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
Copy file name to clipboardExpand all lines: EXTENDING.md
+32-18Lines changed: 32 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,22 +1,27 @@
1
1
# Guide to Extending the Code Generator
2
2
3
-
This document provides instructions on how to extend the generator to support new frameworks (like React or Vue) and new HTTP clients (like Axios).
3
+
This document provides instructions on how to extend the generator to support new frameworks (like React or Vue) and new
4
+
HTTP clients (like Axios).
4
5
5
6
## Architectural Overview
6
7
7
8
The generator is built on a clean, three-layer architecture designed for extensibility:
8
9
9
-
1.**Core Layer (`src/core`)**: Parses the OpenAPI specification. This layer is completely framework-agnostic.
10
-
2.**Analysis / IR Layer (`src/analysis`)**: Analyzes the parsed spec and converts it into a framework-agnostic **Intermediate Representation (IR)**. This IR provides a simple, abstract model of services, forms, lists, and validation rules. This is the key to decoupling.
11
-
3.**Generation Layer (`src/generators`)**: Consumes the IR and generates framework-specific code. All framework-specific logic is isolated here.
10
+
1.**Core Layer (`src/core`)**: Parses the OpenAPI specification. This layer is completely framework-agnostic.
11
+
2.**Analysis / IR Layer (`src/analysis`)**: Analyzes the parsed spec and converts it into a framework-agnostic *
12
+
*Intermediate Representation (IR)**. This IR provides a simple, abstract model of services, forms, lists, and
13
+
validation rules. This is the key to decoupling.
14
+
3.**Generation Layer (`src/generators`)**: Consumes the IR and generates framework-specific code. All
15
+
framework-specific logic is isolated here.
12
16
13
17
To add support for a new technology, you will primarily be working in the **Generation Layer**.
14
18
15
19
---
16
20
17
21
## How to Add a New Framework (e.g., React)
18
22
19
-
Adding a new framework like React involves creating a new set of generators that consume the existing IR from the `src/analysis` layer and emit React-specific code (e.g., TypeScript with JSX).
23
+
Adding a new framework like React involves creating a new set of generators that consume the existing IR from the
24
+
`src/analysis` layer and emit React-specific code (e.g., TypeScript with JSX).
20
25
21
26
### 1. Create the Framework Directory
22
27
@@ -36,7 +41,9 @@ src/generators/
36
41
37
42
### 2. Implement the Main Client Generator
38
43
39
-
Create `src/generators/react/react-client.generator.ts`. This file will be the main orchestrator for your framework's code generation. It must implement the `IClientGenerator` interface. You can use `src/generators/angular/angular-client.generator.ts` as a reference.
44
+
Create `src/generators/react/react-client.generator.ts`. This file will be the main orchestrator for your framework's
45
+
code generation. It must implement the `IClientGenerator` interface. You can use
46
+
`src/generators/angular/angular-client.generator.ts` as a reference.
40
47
41
48
```typescript
42
49
// src/generators/react/react-client.generator.ts
@@ -62,7 +69,7 @@ export class ReactClientGenerator extends AbstractClientGenerator {
62
69
// const adminGenerator = new ReactAdminGenerator(...);
1. Use `FormModelBuilder` and `ListModelBuilder` from `src/analysis` to get the `FormAnalysisResult` and `ListViewModel`.
133
-
2. Create React-specific generators that consume this IR to produce JSX.
134
-
3. You will need to create a **React-specific renderer for validation**. For example, create a `ValidationRenderer` that converts the `ValidationRule[]` IR into a `Yup` schema for use with Formik.
141
+
1. Use `FormModelBuilder` and `ListModelBuilder` from `src/analysis` to get the `FormAnalysisResult` and
142
+
`ListViewModel`.
143
+
2. Create React-specific generators that consume this IR to produce JSX.
144
+
3. You will need to create a **React-specific renderer for validation**. For example, create a `ValidationRenderer` that
145
+
converts the `ValidationRule[]` IR into a `Yup` schema for use with Formik.
135
146
136
147
---
137
148
138
149
## How to Add a New HTTP Client (e.g., Axios)
139
150
140
-
This change is much simpler as it's localized within a specific framework's generator. Here’s how to do it for the existing Angular generator.
151
+
This change is much simpler as it's localized within a specific framework's generator. Here’s how to do it for the
152
+
existing Angular generator.
141
153
142
154
### 1. Locate the HTTP Call Logic
143
155
@@ -175,8 +187,9 @@ Replace the `this.http.*` calls with your desired client's syntax.
175
187
176
188
**To switch to Axios, you would:**
177
189
178
-
1. Change the imports at the top of `src/generators/angular/service/service.generator.ts` to import `axios` and `from` from `rxjs` (to wrap the Promise in an Observable).
179
-
2. Modify the `emitMethodBody` logic to build an `axios` config object and make the call.
190
+
1. Change the imports at the top of `src/generators/angular/service/service.generator.ts` to import `axios` and `from`
191
+
from `rxjs` (to wrap the Promise in an Observable).
192
+
2. Modify the `emitMethodBody` logic to build an `axios` config object and make the call.
You would need to adapt the `requestOptions` object to the format expected by Axios. You could also add a configuration option in `config.ts` to let the user choose which HTTP client to generate code for.
209
+
You would need to adapt the `requestOptions` object to the format expected by Axios. You could also add a configuration
210
+
option in `config.ts` to let the user choose which HTTP client to generate code for.
0 commit comments