D
Deno

help

Converting Typescript Types to JSON Schema (Props definition)?

Llucis11/18/2022
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 Props 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 --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> 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.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? cc @guifromrio @brasileiro_ @tgimenes
UUUnknown User11/19/2022
Message Not Public
Sign In & Join Server To View
LLeokuma11/19/2022
An AST-based solution sounds too complex for a CMS. Personally I would avoid that strategy Can't you export the Props interface and import it in another script which would then generate and save the JSON schema to the filesystem? I guess you can iterate over Props with for in, Object.keys or something
UUUnknown User11/19/2022
Message Not Public
Sign In & Join Server To View
SSorikairo11/20/2022
I would suggest that you look into decorators with “emitDecoratorMetadata” compilers option and “design:paramstype”, “design:type” metadata. This is what I use to generate open api schema from ts code. Yes it forces you to add decorators to your component and classes, but it can also be a way to white list what you want to generate schema for 😃
Llucis11/21/2022
types in typescript are not something you can iterate over, there's no reflection for that. that's the main problem and why we need go to AST parsing
LLeokuma11/22/2022
I knew I must be missing something 😅

Looking for more? Join the community!

Recommended Posts
What would the benefits for Deno + VueJS (for the frontend only) be?So basicly using: deno run --allow-read --allow-write --allow-env npm:create-vite-extra@latest deno VScode Deno Extensions produces constant errorsI am currently using Deno with Opine in order to rewrite an API from JS to TS. While Opine only is uProblem with Mongoose + authHi i followed the mongoose example provided by denoland, but if my local database has authenticatiodeno_core run files concurrentlyIs is possible to run multiple files concurrently using the `deno_core` crate?deno.lock multiple entry point best practicesHi, I just upgraded to 1.28.0 and realized that lock files are here by default for deno.json config About performanceif a function takes only one paramater and i pass unnecessary additional parameters would it affect deno_core Extension with Global AccessIs there a way to make a Deno Extension be accessed by `Extension.op()` instead of `Deno.core.ops.opHow to stop reading from a ReadableStream?```js let user for await (const data of readable) { if (data.user.id === 'user-id') { user = Deno.inspect, how to log class instances with gettersim trying to log a class instance that has getters in it, with `Deno.inspect` ```ts Deno.inspect(clhow to ssr preact (without fresh)i tried with preact render to string but it wouldnt ship any jsSynchronous read single line from Deno.stdinHi, how would I go about reading a single line from `Deno.stdin` synchronously?Closing a websocket server in a unit testHello, I'm an author of [rpc lib](https://github.com/deno-libs/rpc) and I'm currently writing unit tHow to cancel or abort .pipeTo()?I prefer not asking, but after I found (what I consider) an MDN easter egg, I realized this is probais it possible to change how tsx bundles to js?So I’m wondering if it’s possible to get Deno to convert ```jsx <div class="test">Potato</div> ``` tcan't load external modules when run as child process with Deno.spawnChildHi! This is really weird, but I'm trying to run deno scripts under another deno process with Deno.spFile line operationsHello, How to perform the following file manipulations in Deno ? - Read the nth line - Remove the