Skip to content

Commit

Permalink
docs(generator): update latest generator documentation (#3203)
Browse files Browse the repository at this point in the history
  • Loading branch information
asyncapi-bot authored Sep 10, 2024
1 parent b81302d commit 1b6c3e1
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 10 deletions.
4 changes: 2 additions & 2 deletions markdown/docs/tools/generator/configuration-file.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,8 @@ The `generator` property from `package.json` file must contain a JSON object tha
"lib/lib/config.js"
],
"generator": "<2.0.0",
"filters": [
"@asyncapi/generator-filters"
"filters":[
"my-package-with-filters"
],
"hooks": {
"@asyncapi/generator-hooks": "hookFunctionName"
Expand Down
81 changes: 76 additions & 5 deletions markdown/docs/tools/generator/file-templates.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ title: "File templates"
weight: 140
---

It is possible to generate files for each specific object in your AsyncAPI documentation. For example, you can specify a filename like `$$channel$$.js` to generate a file for each channel defined in your AsyncAPI. The following file-template names and extra variables in them are available:
## Generating files with the Nunjucks render engine

> **Note**: This section applies only to the Nunjucks render engine. For information on using the React render engine, refer to the [Generating files with the React render engine](#generating-files-with-the-react-render-engine) section below.
It is possible to generate files for each specific object in your AsyncAPI documentation using the Nunjucks render engine. For example, you can specify a filename like `$$channel$$.js` to generate a file for each channel defined in your AsyncAPI. The following file-template names and extra variables are available:

- `$$channel$$`, within the template-file you have access to two variables [`channel`](https://github.com/asyncapi/parser-api/blob/master/docs/api.md#channel) and [`channelName`](https://github.com/asyncapi/parser-api/blob/master/docs/api.md#channels). Where the `channel` contains the current channel being rendered.
- `$$message$$`, within the template-file you have access to two variables [`message`](https://github.com/asyncapi/parser-api/blob/master/docs/api.md#message) and [`messageName`](https://github.com/asyncapi/parser-api/blob/master/docs/api.md#message). Where `message` contains the current message being rendered.
Expand All @@ -25,7 +29,7 @@ Schema name is '{{schemaName}}' and properties are:
{% endfor %}
```

With following AsyncAPI:
With the following AsyncAPI:
```
components:
schemas:
Expand Down Expand Up @@ -53,15 +57,82 @@ Schema name is 'people' and properties are:
- id
```

### React
> You can see an example of a file template that uses the Nunjucks render engine [here](https://github.com/asyncapi/template-for-generator-templates/tree/nunjucks/template/schemas).
## Generating files with the React render engine

The above way of rendering **file templates** works for both `nunjucks` and `react` render engines, but `react` also has another, more generic way to render multiple files. It is enough to return an array of `File` components in the rendering component. See the following example:
The above method of rendering **file templates** only works for the Nunjucks render engine. To use the React render engine, you need to follow a different approach. The React render engine allows for a more generic way to render multiple files by returning an array of `File` components in the rendering component. This can be particularly useful for complex templates or when you need to generate a large number of files with varying content.

### Example 1: Rendering hardcoded files

The following is a simple hardcoded example of how to render multiple files using the React render engine:

```tsx
import { File} from "@asyncapi/generator-react-sdk";

export default function({ asyncapi }) {
return [
<File name={`file1.html`}>Content</File>,
<File name={`file2.html`}>Content</File>
]
}
```
```

### Example 2: Rendering files based on the AsyncAPI Schema

In practice, to render the multiple files, that are generated from the data defined in your AsyncAPI, you'll iterate over the array of schemas and generate a file for each schema as shown in the example below:

```js
import { File} from "@asyncapi/generator-react-sdk";

/*
* To render multiple files, it is enough to return an array of `File` components in the rendering component, like in following example.
*/
export default function({ asyncapi }) {
const schemas = asyncapi.allSchemas();
const files = [];
// schemas is an instance of the Map
schemas.forEach((schema) => {

files.push(
// We return a react file component and each time we do it, the name of the generated file will be a schema name
// Content of the file will be a variable representing schema
<File name={`${schema.id()}.js`}>
const { schema.id() } = { JSON.stringify(schema._json, null, 2) }
</File>
);
});
return files;
}
```

### Example 3: Rendering files for each channel

Additionally, you can generate multiple files for each channel defined in your AsyncAPI specification using the React render engine as shown in the example below:

```js
import { File, Text } from "@asyncapi/generator-react-sdk";


export default function ({ asyncapi }) {
const files = [];

// Generate files for channels
asyncapi.channels().forEach((channel) => {
const channelName = channel.id();

files.push(
<File name={`${channelName}.md`}>
<Text newLines={2}># Channel: {channelName}</Text>
<Text>
{channel.hasDescription() && `${channel.description()}`}
</Text>
</File>
);
});
return files;
}
```
The code snippet above uses the `Text` component to write file content to the `.md` markdown file. The `newline` property is used to ensure that the content isn't all rendered in one line in the markdown file. In summary, the code snippet above is a practical guide on generating properly formatted multiline Markdown files for each channel in an AsyncAPI document.

> You can see an example of a file template that uses the React render engine [here](https://github.com/asyncapi/template-for-generator-templates/blob/master/template/schemas/schema.js).
2 changes: 1 addition & 1 deletion markdown/docs/tools/generator/generator-template.md
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ To see this in action, navigate to the **python-mqtt-client-template** directory

``` cmd
Generation in progress. Keep calm and wait a bit... done
Check out your shiny new generated files at output.
Check out your shiny new generated files at test/project.
```

Navigating to the **test/project** directory. You should see a **client.py** file; the only content is `Temperature Service`.
Expand Down
3 changes: 2 additions & 1 deletion markdown/docs/tools/generator/nunjucks-render-engine.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ async function asyncCamelCase(str, callback) {
}
```

In case you have more than one template and want to reuse filters, you can put them in a single library. You can configure such a library in the template configuration under `filters` property. You can also use the official AsyncAPI [filters library](https://github.com/asyncapi/generator-filters). To learn how to add such filters to configuration [read more about the configuration file](#configuration-file).
In case you have more than one template and want to reuse filters, you can put them in a single library. You can configure such a library in the template configuration under `filters` property. To learn how to add such filters to configuration [read more about the configuration file](#configuration-file).


You can also use the official AsyncAPI [nunjucks-filters](/apps/nunjucks-filters) that are by default included in the generator library.
2 changes: 1 addition & 1 deletion markdown/docs/tools/generator/template.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ Template Name | Description | Source code
`@asyncapi/go-watermill-template` | Generates Go client using Watermill | [GO watermill template](https://github.com/asyncapi/go-watermill-template)
`@asyncapi/dotnet-nats-template` | Generates .NET C# client using NATS | [.NET C# NATS template](https://github.com/asyncapi/dotnet-nats-template)

<!-- TEMPLATES-LIST:END -->
<!-- TEMPLATES-LIST:END -->

> Some of these templates are maintained by various third-party organizations. The README file usually contains this information and more, such as configuration options the user can pass to the template, usage, technical requirements, etc.
Expand Down

0 comments on commit 1b6c3e1

Please sign in to comment.