Skip to content

Commit ea85336

Browse files
Merge pull request #1469 from Shywim/feature/custom-generator-doc
docs: add docs for custom generator
2 parents 150bddc + e1bec8d commit ea85336

File tree

3 files changed

+141
-22
lines changed

3 files changed

+141
-22
lines changed

client-generator/custom.md

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
# Custom Generator
2+
3+
Client Generator provides support for many of the popular JS frameworks, but you may be using another framework or language and may need a solution adapted to your specific needs. For this cenario, you can write your own generator and pass it to the CLI using a path as the `-g` argument.
4+
5+
You will probably want to extend or, at least, take a look at [BaseGenerator.js](https://github.com/api-platform/client-generator/blob/main/src/generators/BaseGenerator.js), since the library expects some methods to be available, as well as one of the [included generators](https://github.com/api-platform/client-generator/blob/main/src/generators/BaseGenerator.j) to make your own.
6+
7+
## Usage
8+
9+
```shell
10+
generate-api-platform-client -g "$(pwd)/path/to/custom/generator.js" -t "$(pwd)/path/to/templates"
11+
```
12+
13+
The `-g` argument can point to any resolvable node module which means it can be a package dependency of the current project as well as any js file.
14+
15+
## Example
16+
17+
Client Generator makes use of the [Handlebars](https://handlebarsjs.com/) template engine. You can use any programming language or file type. Your generator can also pass data to your templates in any shape you want.
18+
19+
In this example, we'll create a simple [Rust](https://www.rust-lang.org) file defining a new `struct` and creating some instances of this `struct`.
20+
21+
### Generator
22+
23+
```js
24+
// ./Generator.js
25+
import BaseGenerator from "@api-platform/client-generator/lib/generators/BaseGenerator";
26+
27+
export default class extends BaseGenerator {
28+
constructor(params) {
29+
super(params);
30+
31+
this.registerTemplates("", ["main.rs"]);
32+
}
33+
34+
help() {}
35+
36+
generate(api, resource, dir) {
37+
const context = {
38+
type: "Tilia",
39+
structure: [
40+
{ name: "name", type: "String" },
41+
{ name: "min_size", type: "u8" },
42+
{ name: "max_size", type: "u8" },
43+
],
44+
list: [
45+
{
46+
name: "Tilia cordata",
47+
minSize: 50,
48+
maxSize: 80,
49+
},
50+
{
51+
name: "Tilia platyphyllos",
52+
minSize: 50,
53+
maxSize: 70,
54+
},
55+
{
56+
name: "Tilia tomentosa",
57+
minSize: 50,
58+
maxSize: 70,
59+
},
60+
{
61+
name: "Tilia intermedia",
62+
minSize: 50,
63+
maxSize: 165,
64+
},
65+
],
66+
};
67+
68+
this.createDir(dir);
69+
70+
this.createFile("main.rs", `${dir}/main.rs`, context, false);
71+
}
72+
}
73+
```
74+
75+
### Template
76+
77+
```rs
78+
// template/main.rs
79+
struct {{{type}}} {
80+
{{#each structure}}
81+
{{{name}}}: {{{type}}}
82+
{{/each}}
83+
}
84+
85+
fn main() {
86+
let tilias = [
87+
{{#each list}}
88+
Tilia { name: "{{{name}}}", min_size: {{{minSize}}}, max_size: {{{maxSize}}}, },
89+
{{/each}}
90+
];
91+
}
92+
```
93+
94+
Then we can use our generator:
95+
96+
```shell
97+
generate-api-platform-client https://demo.api-platform.com out/ -g "$(pwd)/Generator.js" -t "$(pwd)/template"
98+
```
99+
100+
which will produces:
101+
102+
```ts
103+
struct Tilia {
104+
name: String
105+
min_size: u8
106+
max_size: u8
107+
}
108+
109+
fn main() {
110+
let tilias = [
111+
Tilia { name: "Tilia cordata", min_size: 50, max_size: 80, },
112+
Tilia { name: "Tilia platyphyllos", min_size: 50, max_size: 70, },
113+
Tilia { name: "Tilia tomentosa", min_size: 50, max_size: 70, },
114+
Tilia { name: "Tilia intermedia", min_size: 50, max_size: 165, },
115+
];
116+
}
117+
```

client-generator/index.md

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,30 @@ Client Generator is the fastest way to scaffold fully featured webapps and nativ
88

99
It is able to generate apps using the following frontend stacks:
1010

11-
* [Next.js](nextjs.md)
12-
* [Nuxt.js](nuxtjs.md)
13-
* [Quasar Framework](quasar.md)
14-
* [Vuetify](vuetify.md)
15-
* [React with Redux](react.md)
16-
* [React Native](react-native.md)
17-
* [Vue.js](vuejs.md)
11+
- [Next.js](nextjs.md)
12+
- [Nuxt.js](nuxtjs.md)
13+
- [Quasar Framework](quasar.md)
14+
- [Vuetify](vuetify.md)
15+
- [React with Redux](react.md)
16+
- [React Native](react-native.md)
17+
- [Vue.js](vuejs.md)
18+
- [Or bring your custom generator](custom.md)
1819

1920
Client Generator works especially well with APIs built with the [API Platform](https://api-platform.com) framework.
2021

2122
## Features
2223

23-
* Generates high-quality ES6:
24-
* list view (with pagination)
25-
* detail view
26-
* creation form
27-
* update form
28-
* delete button
29-
* Supports to-one and to-many relations
30-
* Uses the appropriate input type (`number`, `date`...)
31-
* Client-side validation
32-
* Subscribes to data updates pushed by servers supporting [the Mercure protocol](https://mercure.rocks)
33-
* Displays server-side validation errors under the related input (if using API Platform Core)
34-
* Integration with [Bootstrap](https://getbootstrap.com/) and [FontAwesome](https://fontawesome.com/) (Progressive Web Apps)
35-
* Integration with [React Native Elements](https://react-native-training.github.io/react-native-elements/)
36-
* Accessible to people with disabilities ([ARIA](https://www.w3.org/WAI/intro/aria) support in webapps)
24+
- Generates high-quality ES6:
25+
- list view (with pagination)
26+
- detail view
27+
- creation form
28+
- update form
29+
- delete button
30+
- Supports to-one and to-many relations
31+
- Uses the appropriate input type (`number`, `date`...)
32+
- Client-side validation
33+
- Subscribes to data updates pushed by servers supporting [the Mercure protocol](https://mercure.rocks)
34+
- Displays server-side validation errors under the related input (if using API Platform Core)
35+
- Integration with [Bootstrap](https://getbootstrap.com/) and [FontAwesome](https://fontawesome.com/) (Progressive Web Apps)
36+
- Integration with [React Native Elements](https://react-native-training.github.io/react-native-elements/)
37+
- Accessible to people with disabilities ([ARIA](https://www.w3.org/WAI/intro/aria) support in webapps)

outline.yaml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
chapters:
2-
- title: 'The Distribution: Create Powerful APIs with Ease'
2+
- title: "The Distribution: Create Powerful APIs with Ease"
33
path: distribution
44
items:
55
- index
@@ -88,6 +88,7 @@ chapters:
8888
- react-native
8989
- vuejs
9090
- typescript
91+
- custom
9192
- troubleshooting
9293
- title: Deployment
9394
path: deployment

0 commit comments

Comments
 (0)