jszy-swagger-doc-generator 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +97 -118
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,73 +1,137 @@
|
|
|
1
|
-
#
|
|
1
|
+
# jszy-swagger-doc-generator
|
|
2
2
|
|
|
3
3
|
A tool to generate frontend documentation, TypeScript types, and React Hooks from Swagger/OpenAPI JSON files.
|
|
4
4
|
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Fetches Swagger JSON from a URL or loads from a local file
|
|
8
|
+
- Generates comprehensive Markdown documentation
|
|
9
|
+
- Generates TypeScript type definitions from schemas
|
|
10
|
+
- Generates React Hooks for API endpoints, organized by tags
|
|
11
|
+
- Supports both Swagger 2.0 and OpenAPI 3.x specifications
|
|
12
|
+
- Handles API endpoints, parameters, request/response bodies, and responses
|
|
13
|
+
- All generated content automatically placed in `./generated` directory to keep your project clean
|
|
14
|
+
- Properly handles path and query parameters
|
|
15
|
+
- Generates proper TypeScript interfaces and type aliases
|
|
16
|
+
- Organizes generated code by API tags
|
|
17
|
+
|
|
5
18
|
## Installation
|
|
6
19
|
|
|
7
20
|
You can install this package globally to use it as a CLI tool:
|
|
8
21
|
|
|
9
22
|
```bash
|
|
10
|
-
npm install -g swagger-doc-generator
|
|
23
|
+
npm install -g jszy-swagger-doc-generator
|
|
11
24
|
```
|
|
12
25
|
|
|
13
26
|
Or you can use it without installing with npx:
|
|
14
27
|
|
|
15
28
|
```bash
|
|
16
|
-
npx swagger-doc-generator
|
|
29
|
+
npx jszy-swagger-doc-generator
|
|
17
30
|
```
|
|
18
31
|
|
|
19
|
-
## Usage
|
|
32
|
+
## Usage Examples
|
|
20
33
|
|
|
21
|
-
###
|
|
34
|
+
### Example 1: Generate docs from a local Swagger JSON file
|
|
22
35
|
|
|
23
|
-
|
|
36
|
+
1. First, make sure you have a swagger.json file in your project
|
|
37
|
+
2. Run the command:
|
|
38
|
+
```bash
|
|
39
|
+
jszy-swagger-doc-generator --input ./swagger.json
|
|
40
|
+
```
|
|
41
|
+
3. Check the generated documentation in `./generated/docs/api-documentation.md`
|
|
24
42
|
|
|
25
|
-
|
|
43
|
+
### Example 2: Generate from a live API endpoint
|
|
44
|
+
|
|
45
|
+
1. If your API is running and exposes Swagger JSON at `http://localhost:3000/api-docs-json`:
|
|
26
46
|
```bash
|
|
27
|
-
|
|
28
|
-
|
|
47
|
+
jszy-swagger-doc-generator --url http://localhost:3000/api-docs-json
|
|
48
|
+
```
|
|
49
|
+
2. All content will be generated in the `./generated` directory by default
|
|
29
50
|
|
|
30
|
-
|
|
31
|
-
swagger-doc-generator --input ./swagger.json
|
|
51
|
+
### Example 3: Generate TypeScript types and React hooks
|
|
32
52
|
|
|
33
|
-
|
|
34
|
-
|
|
53
|
+
1. To generate TypeScript types and React hooks from your Swagger file:
|
|
54
|
+
```bash
|
|
55
|
+
jszy-swagger-doc-generator --input ./swagger.json --generate-types --generate-hooks
|
|
35
56
|
```
|
|
57
|
+
2. Generated files will be in:
|
|
58
|
+
- TypeScript types: `./generated/types/`
|
|
59
|
+
- React hooks: `./generated/hooks/`
|
|
60
|
+
|
|
61
|
+
### Example 4: Generate everything from a URL
|
|
36
62
|
|
|
37
|
-
|
|
63
|
+
1. Generate all documentation, types, and hooks from a live API:
|
|
38
64
|
```bash
|
|
39
|
-
|
|
40
|
-
|
|
65
|
+
jszy-swagger-doc-generator --url http://localhost:3000/api-docs-json --generate-types --generate-hooks
|
|
66
|
+
```
|
|
67
|
+
2. This will create all outputs in the `./generated` directory
|
|
68
|
+
|
|
69
|
+
## CLI Options
|
|
41
70
|
|
|
42
|
-
|
|
43
|
-
|
|
71
|
+
- `--url, -u`: URL to the Swagger JSON file
|
|
72
|
+
- `--input, -i`: Path to the local Swagger JSON file
|
|
73
|
+
- `--output, -o`: Output path for the generated documentation (default: ./generated/docs/api-documentation.md)
|
|
74
|
+
- `--generate-types`: Generate TypeScript type definitions
|
|
75
|
+
- `--generate-hooks`: Generate React hooks
|
|
76
|
+
- `--types-output`: Output directory for TypeScript types (default: ./generated/types)
|
|
77
|
+
- `--hooks-output`: Output directory for React hooks (default: ./generated/hooks)
|
|
78
|
+
- `--help`: Show help information
|
|
79
|
+
|
|
80
|
+
## Generated Output Structure
|
|
81
|
+
|
|
82
|
+
By default, all generated content goes to the `./generated` directory:
|
|
83
|
+
|
|
84
|
+
```
|
|
85
|
+
generated/
|
|
86
|
+
├── docs/
|
|
87
|
+
│ └── api-documentation.md
|
|
88
|
+
├── types/
|
|
89
|
+
│ └── [generated TypeScript types]
|
|
90
|
+
└── hooks/
|
|
91
|
+
├── user/
|
|
92
|
+
├── config/
|
|
93
|
+
└── [other tags as directories]/
|
|
44
94
|
```
|
|
45
95
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
swagger-doc-generator --input ./swagger.json --generate-hooks
|
|
96
|
+
## Using Generated TypeScript Types
|
|
97
|
+
|
|
98
|
+
Once generated, the TypeScript types can be imported in your project:
|
|
50
99
|
|
|
51
|
-
|
|
52
|
-
|
|
100
|
+
```typescript
|
|
101
|
+
import { User, UserConfig } from './generated/types/your-api-types';
|
|
53
102
|
|
|
54
|
-
|
|
55
|
-
|
|
103
|
+
const user: User = {
|
|
104
|
+
id: 1,
|
|
105
|
+
name: 'John Doe',
|
|
106
|
+
email: 'john@example.com'
|
|
107
|
+
};
|
|
56
108
|
```
|
|
57
109
|
|
|
58
|
-
|
|
59
|
-
By default, all generated content is placed in the `./generated` directory to keep your project clean and separate generated content from source code:
|
|
110
|
+
## Using Generated React Hooks
|
|
60
111
|
|
|
61
|
-
|
|
62
|
-
- TypeScript types: `./generated/types/`
|
|
63
|
-
- React hooks: `./generated/hooks/`
|
|
112
|
+
The generated React hooks can be used in your React components:
|
|
64
113
|
|
|
65
|
-
|
|
114
|
+
```typescript
|
|
115
|
+
import { useUserController_queryUserInfo } from './generated/hooks/users/users.hooks';
|
|
116
|
+
|
|
117
|
+
function MyComponent() {
|
|
118
|
+
const { userController_queryUserInfo } = useUserController_queryUserInfo();
|
|
119
|
+
|
|
120
|
+
const fetchUser = async () => {
|
|
121
|
+
const user = await userController_queryUserInfo({ id: 1 });
|
|
122
|
+
console.log(user);
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
return <button onClick={fetchUser}>Fetch User</button>;
|
|
126
|
+
}
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
## Programmatic Usage
|
|
66
130
|
|
|
67
131
|
You can also use this package programmatically in your JavaScript/TypeScript code:
|
|
68
132
|
|
|
69
133
|
```javascript
|
|
70
|
-
const { SwaggerDocGenerator } = require('swagger-doc-generator');
|
|
134
|
+
const { SwaggerDocGenerator } = require('jszy-swagger-doc-generator');
|
|
71
135
|
|
|
72
136
|
async function generate() {
|
|
73
137
|
const generator = new SwaggerDocGenerator();
|
|
@@ -94,91 +158,6 @@ async function generate() {
|
|
|
94
158
|
generate().catch(console.error);
|
|
95
159
|
```
|
|
96
160
|
|
|
97
|
-
## Options
|
|
98
|
-
|
|
99
|
-
- `--url, -u`: URL to the Swagger JSON file
|
|
100
|
-
- `--input, -i`: Path to the local Swagger JSON file
|
|
101
|
-
- `--output, -o`: Output path for the generated documentation (default: ./docs/api-documentation.md)
|
|
102
|
-
- `--generate-types`: Generate TypeScript type definitions
|
|
103
|
-
- `--generate-hooks`: Generate React hooks
|
|
104
|
-
- `--types-output`: Output directory for TypeScript types (default: ./types)
|
|
105
|
-
- `--hooks-output`: Output directory for React hooks (default: ./hooks)
|
|
106
|
-
- `--help`: Show help information
|
|
107
|
-
|
|
108
|
-
## Features
|
|
109
|
-
|
|
110
|
-
- Fetches Swagger JSON from a URL
|
|
111
|
-
- Loads Swagger JSON from a local file
|
|
112
|
-
- Generates comprehensive documentation in Markdown format
|
|
113
|
-
- Generates TypeScript type definitions from schemas
|
|
114
|
-
- Generates React Hooks for API endpoints, organized by tags
|
|
115
|
-
- Supports both Swagger 2.0 and OpenAPI 3.x specifications
|
|
116
|
-
- Handles API endpoints, parameters, request/response bodies, and responses
|
|
117
|
-
- Creates output directory if it doesn't exist
|
|
118
|
-
- Properly handles path and query parameters
|
|
119
|
-
- Generates proper TypeScript interfaces and type aliases
|
|
120
|
-
- Organizes generated code by API tags
|
|
121
|
-
|
|
122
|
-
## Example Output
|
|
123
|
-
|
|
124
|
-
### Generated TypeScript Types
|
|
125
|
-
```typescript
|
|
126
|
-
// Auto-generated TypeScript types from Swagger schema
|
|
127
|
-
|
|
128
|
-
export interface User {
|
|
129
|
-
/** 用户ID */
|
|
130
|
-
id: number;
|
|
131
|
-
/** 用户名 */
|
|
132
|
-
name: string;
|
|
133
|
-
/** 用户邮箱 */
|
|
134
|
-
email: string;
|
|
135
|
-
/** 头像URL */
|
|
136
|
-
avatar?: string;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
export interface UserConfig {
|
|
140
|
-
/** 用户ID */
|
|
141
|
-
userId: number;
|
|
142
|
-
/** 主题设置 */
|
|
143
|
-
theme: "light" | "dark";
|
|
144
|
-
/** 语言设置 */
|
|
145
|
-
language: string;
|
|
146
|
-
/** 通知设置 */
|
|
147
|
-
notifications: NotificationSettings;
|
|
148
|
-
/** 个性化设置 */
|
|
149
|
-
preferences: Preferences;
|
|
150
|
-
}
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
### Generated React Hooks
|
|
154
|
-
```typescript
|
|
155
|
-
// Users API Hooks
|
|
156
|
-
|
|
157
|
-
export interface UserController_queryUserInfoParams {
|
|
158
|
-
id?: number;
|
|
159
|
-
name?: string;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
export const useUserController_queryUserInfo = () => {
|
|
163
|
-
const apiCall = async (params: UserController_queryUserInfoParams) => {
|
|
164
|
-
const path = `${process.env.REACT_APP_API_BASE_URL || ''}/api/queryUserInfo`;
|
|
165
|
-
const queryParams = new URLSearchParams();
|
|
166
|
-
if (params.id) queryParams.append('id', params.id.toString());
|
|
167
|
-
if (params.name) queryParams.append('name', params.name.toString());
|
|
168
|
-
const queryString = queryParams.toString();
|
|
169
|
-
const url = `${path}${queryString ? '?' + queryString : ''}`;
|
|
170
|
-
const options: RequestInit = {
|
|
171
|
-
method: 'GET',
|
|
172
|
-
};
|
|
173
|
-
|
|
174
|
-
const result = await fetch(url, options);
|
|
175
|
-
return result.json() as Promise<User[]>;
|
|
176
|
-
};
|
|
177
|
-
|
|
178
|
-
return { userController_queryUserInfo: apiCall };
|
|
179
|
-
};
|
|
180
|
-
```
|
|
181
|
-
|
|
182
161
|
## Development
|
|
183
162
|
|
|
184
163
|
To run this project locally:
|