You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
**A fully typed API client generator powered by OpenAPI.
4
21
Fetch-compatible, auto-generated types, zero generics required.**
5
22
6
-
devup API reads your `openapi.json` file and automatically generates a fully typed client that behaves like an ergonomic, type-safe version of `fetch()`.
23
+
devup-api reads your `openapi.json` file and automatically generates a fully typed client that behaves like an ergonomic, type-safe version of `fetch()`.
7
24
No manual type declarations. No generics. No SDK boilerplate.
8
25
Just write API calls — the types are already there.
9
26
@@ -17,115 +34,318 @@ Just write API calls — the types are already there.
17
34
- No need to write or maintain separate TypeScript definitions.
18
35
19
36
### **🪝 Fetch-compatible design**
20
-
devup API feels like using `fetch`, but with superpowers:
37
+
devup-api feels like using `fetch`, but with superpowers:
21
38
22
39
- Path params automatically replaced
23
40
- Query/body/header types enforced
24
41
- Typed success & error responses
25
42
- Optional runtime schema validation
26
43
- Minimal abstraction over standard fetch
27
44
45
+
### **🔌 Build tool integration**
46
+
- Works seamlessly with Vite, Next.js, Webpack, and Rsbuild
Place your `openapi.json` file in the project root (or specify a custom path in plugin options).
113
+
114
+
### **4. Configure TypeScript**
36
115
37
-
// create api instance
38
-
const api =devupApi("https://api.example.com");
116
+
Add the generated type definitions to your `tsconfig.json`:
117
+
118
+
```json
119
+
{
120
+
"compilerOptions": {
121
+
// ... your compiler options
122
+
},
123
+
"include": [
124
+
"src",
125
+
"df/**/*.d.ts"
126
+
]
127
+
}
39
128
```
40
129
41
-
### **2. Call endpoints — types are automatic**
130
+
> **Note:** The `df` directory is the default temporary directory where generated types are stored. If you've customized `tempDir` in plugin options, adjust the path accordingly (e.g., `"your-temp-dir/**/*.d.ts"`).
131
+
132
+
### **5. Create and use the API client**
42
133
43
134
```ts
44
-
const user =awaitapi.get("/users/{id}", {
45
-
params: { id: "123" },
135
+
import { createApi } from'@devup-api/fetch'
136
+
137
+
const api =createApi('https://api.example.com')
138
+
139
+
// Use operationId
140
+
const users =awaitapi.get('getUsers', {})
141
+
142
+
// Or use the path directly
143
+
const user =awaitapi.get('/users/{id}', {
144
+
params: { id: '123' },
46
145
headers: {
47
-
Authorization: "Bearer TOKEN"
146
+
Authorization: 'Bearer TOKEN'
48
147
}
49
-
});
148
+
})
50
149
51
-
const user =awaitapi.get("getUser", {
52
-
params: { id: "123" },
53
-
headers: {
54
-
Authorization: "Bearer TOKEN"
150
+
// POST request with typed body
151
+
const newUser =awaitapi.post('createUser', {
152
+
body: {
153
+
name: 'John Doe',
154
+
email: 'john@example.com'
55
155
}
56
-
});
156
+
})
57
157
```
58
158
59
159
---
60
160
61
-
## 📦 Installation
161
+
## 🔥 Cold Typing vs Bold Typing
62
162
63
-
```bash
64
-
npm install @devup-api/fetch
163
+
devup-api uses a two-phase typing system to ensure smooth development experience:
65
164
66
-
npm install @devup-api/next-plugin
67
-
npm install @devup-api/webpack-plugin
68
-
npm install @devup-api/rsbuild-plugin
69
-
npm install @devup-api/vite-plugin
165
+
### **Cold Typing**
166
+
167
+
**Cold typing** refers to the state before the TypeScript interface files are generated. This happens when:
168
+
- You first install the plugin
169
+
- The build hasn't run yet
170
+
- The generated `api.d.ts` file doesn't exist
171
+
172
+
During cold typing:
173
+
- All API types are treated as `any`
174
+
- Type checking is relaxed to prevent type errors
175
+
- Your code will compile and run without issues
176
+
- You can write API calls without waiting for type generation
177
+
178
+
```ts
179
+
// Cold typing: No type errors even if api.d.ts doesn't exist yet
180
+
const api =createApi('https://api.example.com')
181
+
const result =awaitapi.get('getUsers', {}) // ✅ Works, types are 'any'
182
+
```
183
+
184
+
### **Bold Typing**
185
+
186
+
**Bold typing** refers to the state after the TypeScript interface files are generated. This happens when:
187
+
- The build tool has run (`dev` or `build`)
188
+
- The plugin has generated `api.d.ts` in the temp directory
189
+
- TypeScript can find and use the generated types
190
+
191
+
During bold typing:
192
+
- All API types are strictly enforced
193
+
- Full type safety is applied
194
+
- Type errors will be caught at compile time
195
+
- You get full IntelliSense and autocomplete
196
+
197
+
```ts
198
+
// Bold typing: Full type safety after api.d.ts is generated
199
+
const api =createApi('https://api.example.com')
200
+
const result =awaitapi.get('getUsers', {})
201
+
// ✅ Fully typed: result.data is typed based on your OpenAPI schema
202
+
// ❌ Type error if you use wrong parameters or paths
70
203
```
71
204
205
+
### **Why This Matters**
206
+
207
+
This two-phase approach ensures:
208
+
1.**No blocking**: You can start coding immediately without waiting for the build
209
+
2.**Gradual typing**: Types become available as soon as the build runs
210
+
3.**Production safety**: Full type checking in production builds
211
+
4.**Developer experience**: No false type errors during initial setup
212
+
213
+
---
214
+
215
+
## 📦 Packages
216
+
217
+
This is a monorepo containing multiple packages:
218
+
219
+
-**`@devup-api/core`** - Core types and interfaces
220
+
-**`@devup-api/utils`** - Utility functions for OpenAPI processing
221
+
-**`@devup-api/generator`** - TypeScript interface generator from OpenAPI schemas
222
+
-**`@devup-api/fetch`** - Type-safe API client
223
+
-**`@devup-api/vite-plugin`** - Vite plugin
224
+
-**`@devup-api/next-plugin`** - Next.js plugin
225
+
-**`@devup-api/webpack-plugin`** - Webpack plugin
226
+
-**`@devup-api/rsbuild-plugin`** - Rsbuild plugin
227
+
72
228
---
73
229
74
230
## 📚 API Usage
75
231
76
232
### **GET Example**
77
233
78
234
```ts
79
-
awaitapi.get("/posts", {
235
+
// Using operationId
236
+
const users =awaitapi.get('getUsers', {
237
+
query: { page: 1, limit: 20 }
238
+
})
239
+
240
+
// Using path
241
+
const users =awaitapi.get('/users', {
80
242
query: { page: 1, limit: 20 }
81
-
});
243
+
})
82
244
```
83
245
84
246
### **POST Example**
85
247
86
248
```ts
87
-
awaitapi.post("/posts", {
249
+
const newPost =awaitapi.post('createPost', {
88
250
body: {
89
-
title: "Hello World",
90
-
content: "This is a typed API request."
251
+
title: 'Hello World',
252
+
content: 'This is a typed API request.'
91
253
}
92
-
});
254
+
})
93
255
```
94
256
95
257
### **Path Params Example**
96
258
97
259
```ts
98
-
awaitapi.get("/posts/{id}", {
99
-
params: { id: "777" }
100
-
});
260
+
const post =awaitapi.get('/posts/{id}', {
261
+
params: { id: '777' }
262
+
})
263
+
```
264
+
265
+
### **Response Handling**
266
+
267
+
```ts
268
+
const result =awaitapi.get('getUser', { params: { id: '123' } })
0 commit comments