docs: add docs for custom generator

client-generator/custom.md

@@ -0,0 +1,117 @@
+# Custom Generator
+
+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.
+
+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.
+
+## Usage
+
+```shell
+generate-api-platform-client -g "$(pwd)/path/to/custom/generator.js" -t "$(pwd)/path/to/templates"
+```
+
+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.
+
+## Example
+
+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.
+
+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`.
+
+### Generator
+
+```js
+// ./Generator.js
+import BaseGenerator from "@api-platform/client-generator/lib/generators/BaseGenerator";
+
+export default class extends BaseGenerator {
+    constructor(params) {
+        super(params);
+
+        this.registerTemplates("", ["main.rs"]);
+    }
+
+    help() {}
+
+    generate(api, resource, dir) {
+        const context = {
+            type: "Tilia",
+            structure: [
+                { name: "name", type: "String" },
+                { name: "min_size", type: "u8" },
+                { name: "max_size", type: "u8" },
+            ],
+            list: [
+                {
+                    name: "Tilia cordata",
+                    minSize: 50,
+                    maxSize: 80,
+                },
+                {
+                    name: "Tilia platyphyllos",
+                    minSize: 50,
+                    maxSize: 70,
+                },
+                {
+                    name: "Tilia tomentosa",
+                    minSize: 50,
+                    maxSize: 70,
+                },
+                {
+                    name: "Tilia intermedia",
+                    minSize: 50,
+                    maxSize: 165,
+                },
+            ],
+        };
+
+        this.createDir(dir);
+
+        this.createFile("main.rs", `${dir}/main.rs`, context, false);
+    }
+}
+```
+
+### Template
+
+```rs
+// template/main.rs
+struct {{{type}}} {
+  {{#each structure}}
+  {{{name}}}: {{{type}}}
+  {{/each}}
+}
+
+fn main() {
+  let tilias = [
+  {{#each list}}
+    Tilia { name: "{{{name}}}", min_size: {{{minSize}}}, max_size: {{{maxSize}}}, },
+  {{/each}}
+  ];
+}
+```
+
+Then we can use our generator:
+
+```shell
+generate-api-platform-client https://demo.api-platform.com out/ -g "$(pwd)/Generator.js" -t "$(pwd)/template"
+```
+
+which will produces:
+
+```ts
+struct Tilia {
+  name: String
+  min_size: u8
+  max_size: u8
+}
+
+fn main() {
+  let tilias = [
+    Tilia { name: "Tilia cordata", min_size: 50, max_size: 80, },
+    Tilia { name: "Tilia platyphyllos", min_size: 50, max_size: 70, },
+    Tilia { name: "Tilia tomentosa", min_size: 50, max_size: 70, },
+    Tilia { name: "Tilia intermedia", min_size: 50, max_size: 165, },
+  ];
+}
+```

client-generator/index.md

@@ -8,29 +8,30 @@ Client Generator is the fastest way to scaffold fully featured webapps and nativ
 
 It is able to generate apps using the following frontend stacks:
 
-* [Next.js](nextjs.md)
-* [Nuxt.js](nuxtjs.md)
-* [Quasar Framework](quasar.md)
-* [Vuetify](vuetify.md)
-* [React with Redux](react.md)
-* [React Native](react-native.md)
-* [Vue.js](vuejs.md)
+-   [Next.js](nextjs.md)
+-   [Nuxt.js](nuxtjs.md)
+-   [Quasar Framework](quasar.md)
+-   [Vuetify](vuetify.md)
+-   [React with Redux](react.md)
+-   [React Native](react-native.md)
+-   [Vue.js](vuejs.md)
+-   [Or bring your custom generator](custom.md)
 
 Client Generator works especially well with APIs built with the [API Platform](https://api-platform.com) framework.
 
 ## Features
 
-* Generates high-quality ES6:
-  * list view (with pagination)
-  * detail view
-  * creation form
-  * update form
-  * delete button
-* Supports to-one and to-many relations
-* Uses the appropriate input type (`number`, `date`...)
-* Client-side validation
-* Subscribes to data updates pushed by servers supporting [the Mercure protocol](https://mercure.rocks)
-* Displays server-side validation errors under the related input (if using API Platform Core)
-* Integration with [Bootstrap](https://getbootstrap.com/) and [FontAwesome](https://fontawesome.com/) (Progressive Web Apps)
-* Integration with [React Native Elements](https://react-native-training.github.io/react-native-elements/)
-* Accessible to people with disabilities ([ARIA](https://www.w3.org/WAI/intro/aria) support in webapps)
+-   Generates high-quality ES6:
+    -   list view (with pagination)
+    -   detail view
+    -   creation form
+    -   update form
+    -   delete button
+-   Supports to-one and to-many relations
+-   Uses the appropriate input type (`number`, `date`...)
+-   Client-side validation
+-   Subscribes to data updates pushed by servers supporting [the Mercure protocol](https://mercure.rocks)
+-   Displays server-side validation errors under the related input (if using API Platform Core)
+-   Integration with [Bootstrap](https://getbootstrap.com/) and [FontAwesome](https://fontawesome.com/) (Progressive Web Apps)
+-   Integration with [React Native Elements](https://react-native-training.github.io/react-native-elements/)
+-   Accessible to people with disabilities ([ARIA](https://www.w3.org/WAI/intro/aria) support in webapps)

outline.yaml

@@ -1,5 +1,5 @@
 chapters:
-  - title: 'The Distribution: Create Powerful APIs with Ease'
+  - title: "The Distribution: Create Powerful APIs with Ease"
     path: distribution
     items:
       - index
@@ -83,6 +83,7 @@ chapters:
       - react-native
       - vuejs
       - typescript
+      - custom
       - troubleshooting
   - title: Deployment
     path: deployment