Converting Typescript Types to JSON Schema (Props definition)?

Folks,

We're creating a CMS solution using Deno and Fresh. For our product goals, we want to dynamically extract how UI components are configured using their Props declaration.

Example: For this component

interface Props {
  title: string
  numberOfLines: number 
}

export default MyComponent(props: Props) {
  return <div>.,.
}

interface Props {
  title: string
  numberOfLines: number 
}

export default MyComponent(props: Props) {
  return <div>.,.
}

we should be able to extract (in dev time, we have a slight "build process" already in place) the PropsProps declaration, and be able to generate a form for that.

To generate the Form, we're using JSON Schema + react-json-schema-form (https://react-jsonschema-form.readthedocs.io/en/latest/) and, for that to happen, we need to transform the file above into a JSON Schema that defines exactly the data for that component's props.

The question is: how can we accomplish that in a reliable way?

We have a proof of concept working where we use deno doc file.ts --jsondeno doc file.ts --json (https://github.com/deco-cx/live/blob/main/utils/denoDoc.ts) and it's ok, but we need to manually "map" everything. Right now, we don't support Array<CustomObject>Array<CustomObject> as a type for a prop, for example. We believe that there must be a more "native" way, that uses the same AST/metadata that Deno uses, that will handle most case for us. Edge cases are:

- props with custom types defined elsewhere in the module and referenced in the props declaration.
- props with types imported from other files
- props with types imported using import_map.jsonimport_map.json

We're aware of https://github.com/YousefED/typescript-json-schema but I'm pretty sure that it'll differ slightly to how Deno works.

Do you have any suggestions?

interface Props {
  title: string
  numberOfLines: number 
}

export default MyComponent(props: Props) {
  return <div>.,.
}

interface Props {
  title: string
  numberOfLines: number 
}

export default MyComponent(props: Props) {
  return <div>.,.
}

Converting Typescript Types to JSON Schema (Props definition)?

Converting Typescript Types to JSON Schema (Props definition)?

Continue the conversation

Deno

Continue the conversation

Deno

Similar Threads