Skip to content

Commit e20f084

Browse files
docs(openapi-ts): add docs for using Node.js API in web projects
1 parent f259093 commit e20f084

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
@@ -76,3 +76,72 @@ That would result in the following change:
7676
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.
7777
7878
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).
79+
80+
## Node.js API with browser build target
81+
82+
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.
83+
84+
Here's an example script implementing the above transforms:
85+
86+
```ts
87+
// scripts/generateTypes.ts
88+
import fs from "node:fs";
89+
import openapiTS from "openapi-typescript";
90+
91+
const OPENAPI_URL = "https://petstore3.swagger.io/api/v3/openapi.json";
92+
const OUTPUT_FILE = "src/services/api/schema.d.ts";
93+
94+
async function main() {
95+
process.stdout.write(`Generating types "${OPENAPI_URL}" --> "${OUTPUT_FILE}"...`);
96+
const types = await openapiTS(OPENAPI_URL, {
97+
transform: (schemaObject, metadata): string | undefined => {
98+
if ("format" in schemaObject && schemaObject.format === "binary") {
99+
return schemaObject.nullable ? "Blob | null" : "Blob";
100+
}
101+
if ("format" in schemaObject && schemaObject.format === "date-time") {
102+
return schemaObject.nullable ? "Date | null" : "Date";
103+
}
104+
},
105+
});
106+
fs.writeFileSync(OUTPUT_FILE, types);
107+
process.stdout.write(` OK!\r\n`);
108+
}
109+
110+
main();
111+
```
112+
113+
Add a `package.json` to the scripts folder declaring the module type:
114+
115+
```json
116+
// scripts/package.json
117+
{
118+
"type": "module"
119+
}
120+
```
121+
122+
Now you can run your script using `ts-node`. The `--esm` flag tells `ts-node` how to handle the imports:
123+
124+
```bash
125+
npx ts-node --esm scripts/generateTypes.ts
126+
```
127+
128+
If you the project uses JSX (e.g. React), you may need to pass in `compilerOptions` with correct `"jsx"`property:
129+
130+
```bash
131+
npx ts-node --esm -compilerOptions {\"jsx\":\"preserve\"} scripts/generateTypes.ts
132+
```
133+
134+
A alternative to the CLI flags is to add a `ts-node` section to your `tsconfig.json`:
135+
136+
```json
137+
// tsconfig.json
138+
{
139+
... // your existing config
140+
"ts-node": {
141+
"compilerOptions": { // `ts-node`-specific compiler options
142+
"jsx": "preserve" // this may not be the correct value for your project
143+
},
144+
"esm": true // support ECMAScript modules
145+
}
146+
}
147+
```

0 commit comments

Comments
 (0)