Skip to content

Commit c732542

Browse files
docs(openapi-ts): add docs for using Node.js API in web projects (#1195)
1 parent 64decb7 commit c732542

File tree

2 files changed

+74
-0
lines changed

2 files changed

+74
-0
lines changed

.changeset/quick-parrots-worry.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"openapi-typescript-docs": patch
3+
---
4+
5+
Add docs for using Node.js API in web projects

docs/src/content/docs/node.md

+69
Original file line numberDiff line numberDiff line change
@@ -113,3 +113,72 @@ Resultant diff with correctly-typed `file` property:
113113
Any [Schema Object](https://spec.openapis.org/oas/latest.html#schema-object) present in your schema will be run through this formatter (even remote ones!). Also be sure to check the `metadata` parameter for additional context that may be helpful.
114114
115115
There are many other uses for this besides checking `format`. Because this must return a **string** you can produce any arbitrary TypeScript code you’d like (even your own custom types).
116+
117+
## Node.js API with browser build target
118+
119+
Projects with a browser build target (e.g. a React app) may be unable to run a Node.js script, due to differences between Node.js and and browser module systems. Some minor configuration is needed.
120+
121+
Here's an example script implementing the above transforms:
122+
123+
```ts
124+
// scripts/generateTypes.ts
125+
import fs from "node:fs";
126+
import openapiTS from "openapi-typescript";
127+
128+
const OPENAPI_URL = "https://petstore3.swagger.io/api/v3/openapi.json";
129+
const OUTPUT_FILE = "src/services/api/schema.d.ts";
130+
131+
async function main() {
132+
process.stdout.write(`Generating types "${OPENAPI_URL}" --> "${OUTPUT_FILE}"...`);
133+
const types = await openapiTS(OPENAPI_URL, {
134+
transform: (schemaObject, metadata): string | undefined => {
135+
if ("format" in schemaObject && schemaObject.format === "binary") {
136+
return schemaObject.nullable ? "Blob | null" : "Blob";
137+
}
138+
if ("format" in schemaObject && schemaObject.format === "date-time") {
139+
return schemaObject.nullable ? "Date | null" : "Date";
140+
}
141+
},
142+
});
143+
fs.writeFileSync(OUTPUT_FILE, types);
144+
process.stdout.write(` OK!\r\n`);
145+
}
146+
147+
main();
148+
```
149+
150+
Add a `package.json` to the scripts folder declaring the module type:
151+
152+
```json
153+
// scripts/package.json
154+
{
155+
"type": "module"
156+
}
157+
```
158+
159+
Now you can run your script using `ts-node`. The `--esm` flag tells `ts-node` how to handle the imports:
160+
161+
```bash
162+
npx ts-node --esm scripts/generateTypes.ts
163+
```
164+
165+
If you the project uses JSX (e.g. React), you may need to pass in `compilerOptions` with correct `"jsx"`property:
166+
167+
```bash
168+
npx ts-node --esm -compilerOptions {\"jsx\":\"preserve\"} scripts/generateTypes.ts
169+
```
170+
171+
A alternative to the CLI flags is to add a `ts-node` section to your `tsconfig.json`:
172+
173+
```json
174+
// tsconfig.json
175+
{
176+
... // your existing config
177+
"ts-node": {
178+
"compilerOptions": { // `ts-node`-specific compiler options
179+
"jsx": "preserve" // this may not be the correct value for your project
180+
},
181+
"esm": true // support ECMAScript modules
182+
}
183+
}
184+
```

0 commit comments

Comments
 (0)