Running TS Schema Generator in a Browser

[orta]

Not an issue, but a set of instructions for folks interested (and maybe the maintainers are interested in supporting this natively)

You can see my WIP playground (for something else) which uses ts-json-schema-generator to do "TS type docs" - https://orta.io/angular-expressions-playground/

Here's the key blockers:

• use of process in a few places
• glob dependency has requirements on running with an FS
• the recommended route for the API (createGenerator) does not provide an API for a custom VFS version of TypeScript

How I fixed them:

1. Fake process

  <script>
      window.process = {
        env: {
          NODE_ENV: "development",
        },
        versions: {},
        stdout: {},
      }
    </script>

2. yarn patch to remove glob, and process.cwd()

3. Create the schema generator manually:

    import ts from "typescript"
    import { createSystem, createVirtualTypeScriptEnvironment } from "@typescript/vfs"
    import { CompletedConfig, Config, createFormatter, createParser, DEFAULT_CONFIG, SchemaGenerator } from "ts-json-schema-generator"
   
    const fsMap = new Map<string, string>()
    fsMap.set("/schema.ts", tsInterface)
    fsMap.set("/lib.d.ts", libDTS)
   
    const system = createSystem(fsMap)
    const env = createVirtualTypeScriptEnvironment(system, ["/schema.ts"], ts)
    const program = env.languageService.getProgram()
    if (!program) throw new Error("No program")
   
    const schemaConfig: Config = { path: "/schema.ts" }
    const config: CompletedConfig = { ...schemaConfig, ...DEFAULT_CONFIG }
   
    const parser = createParser(program, config)
    const formatter = createFormatter(config)
    const generator = new SchemaGenerator(program, parser, formatter, schemaConfig)
   
    const result = generator.createSchema()

Then folks can write typescript types and as they type see what the schema looks like. Thanks for the great library, just trying to give back a little

[arthurfiorette]

That's awesome! I'd love to merge a PR adding this bit of information to our README, wanna do it? :)

[domoritz]

Instead of adding this to the readme, could we change the package to work in the browser (and test it)?

[arthurfiorette]

That's what I was looking for, seems easy changes but I don't know how could I test and ensure this keeps node-free. Any ideas?

[domoritz]

Vitest can easily run in the browser for example. I just moved Vega-Lite to it in a pull request.

[arthurfiorette]

Was thinking the same, any solutions to it running slower here?

[domoritz]

Maybe jest has some something similar? Maybe vitest has caught up in v3? Or we just accept the slower test times (and report it to hope they fix it).