-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
docs(generator): update latest generator documentation #3602
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
derberg
merged 5 commits into
master
from
update-generator-docs-fd5dfd7687c0e4899a548718bf420226a5cd60f9
Jan 23, 2025
Merged
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| --- | ||
| title: "Migrating from `ag` CLI to AsyncAPI CLI" | ||
| weight: 260 | ||
| --- | ||
|
|
||
| This guide provides detailed instructions on how to transition from the old `ag` Generator CLI to the new AsyncAPI CLI. | ||
|
|
||
| ## Options Overview | ||
|
|
||
| Here is a list of `ag` options and their equivalents in the AsyncAPI CLI: | ||
|
|
||
| - **-d, --disable-hook [hooks...]** | ||
| - **AsyncAPI CLI equivalent:** `asyncapi generate fromTemplate <ASYNCAPI> <TEMPLATE> --disable-hook <hookType>=<hookName>` | ||
|
|
||
| - **--debug** | ||
| - **AsyncAPI CLI equivalent:** `asyncapi generate fromTemplate <ASYNCAPI> <TEMPLATE> --debug` | ||
|
|
||
| - **-i, --install** | ||
| - **AsyncAPI CLI equivalent:** `asyncapi generate fromTemplate <ASYNCAPI> <TEMPLATE> --install` | ||
|
|
||
| - **-n, --no-overwrite <glob>** | ||
| - **AsyncAPI CLI equivalent:** `asyncapi generate fromTemplate <ASYNCAPI> <TEMPLATE> --no-overwrite <glob>` | ||
|
|
||
| - **-o, --output <outputDir>** | ||
| - **AsyncAPI CLI equivalent:** `asyncapi generate fromTemplate <ASYNCAPI> <TEMPLATE> --output <outputDir>` | ||
|
|
||
| - **-p, --param <name=value>** | ||
| - **AsyncAPI CLI equivalent:** `asyncapi generate fromTemplate <ASYNCAPI> <TEMPLATE> --param <name=value>` | ||
|
|
||
| - **--force-write** | ||
| - **AsyncAPI CLI equivalent:** `asyncapi generate fromTemplate <ASYNCAPI> <TEMPLATE> --force-write` | ||
|
|
||
| - **--watch-template** | ||
| - **AsyncAPI CLI equivalent:** `asyncapi generate fromTemplate <ASYNCAPI> <TEMPLATE> --watch` | ||
|
|
||
| - **--map-base-url <url:folder>** | ||
| - **AsyncAPI CLI equivalent:** `asyncapi generate fromTemplate <ASYNCAPI> <TEMPLATE> --map-base-url <url:folder>` | ||
|
|
||
| ## Migration Steps | ||
|
|
||
| ### 1. Install AsyncAPI CLI | ||
|
|
||
| There are multiple different artifacts that AsyncAPI CLI is provided as. Get familiar with the [official CLI installation guide](https://www.asyncapi.com/docs/tools/cli/installation). | ||
|
|
||
| ### 2. Update Your Commands | ||
|
|
||
| Replace the deprecated `ag` commands with the AsyncAPI CLI equivalents. Below are examples of how to update your commands: | ||
|
|
||
| **Using `ag`**: | ||
| ``` | ||
| ag ./asyncapi.yaml ./template -o ./output -p param1=value1 --debug --install --disable-hook hookType=hookName | ||
| ``` | ||
|
|
||
| **Using AsyncAPI CLI**: | ||
| ``` | ||
| asyncapi generate fromTemplate ./asyncapi.yaml ./template -o ./output -p param1=value1 --debug --install --disable-hook hookType=hookName | ||
| ``` | ||
|
|
||
| Notice that the change basically related to changing from `ag` to `asyncapi generate fromTemplate`. | ||
|
|
||
| ### 3. Verify and Test | ||
|
|
||
| Run the updated commands to ensure they work as expected and verify that the output files are generated correctly. | ||
|
|
||
| ## Additional Resources | ||
|
|
||
| **CLI Documentation**: [AsyncAPI CLI Documentation](https://www.asyncapi.com/docs/tools/cli) | ||
| **Installation**: [AsyncAPI CLI Installation](https://www.asyncapi.com/docs/tools/cli/installation) | ||
| **Usage**: [AsyncAPI CLI Usage](https://www.asyncapi.com/docs/tools/cli/usage) | ||
| **Support**: For any issues with CLI, create an issue in [CLI repository](https://github.com/asyncapi/cli). | ||
144 changes: 144 additions & 0 deletions
144
markdown/docs/tools/generator/migration-nunjucks-react.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| --- | ||
| title: "Migrating from Nunjucks to React render engine" | ||
| weight: 250 | ||
| --- | ||
|
|
||
| The AsyncAPI Generator is moving away from Nunjucks templates in favor of React templates. This guide will help you migrate your existing Nunjucks templates to React. For a comprehensive understanding of why we introduced React as an alternative in 2021 and why we're now removing Nunjucks entirely, please read our article [React as a Generator Engine](https://www.asyncapi.com/blog/react-as-generator-engine). The principles discussed in this article still apply to our current transition. | ||
|
|
||
| ## Step-by-step migration guide | ||
|
|
||
| ### 1. Update package.json | ||
|
|
||
| Change your template configuration in `package.json`: | ||
|
|
||
| ```json | ||
| { | ||
| "generator": { | ||
| "renderer": "react" | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| Once the deprecation period has ended, and we remove the default Nunjucks, the React render engine will be used by default and this setting will no longer be needed to configure | ||
|
|
||
| ### 2. Install dependencies | ||
|
|
||
| Install the necessary React dependencies: | ||
|
|
||
| ```bash | ||
| npm install @asyncapi/generator-react-sdk | ||
| ``` | ||
|
|
||
| ### 3. File naming | ||
|
|
||
| In Nunjucks, the template's filename directly corresponds to the output file. For example, a template named **index.html** will generate an **index.html** file. | ||
|
|
||
| In React, the filename of the generated file is not controlled by the file itself, but rather by the `File` component. The React component itself can be named anything with a `.js` extension because the output filename is controlled by the `name` attribute of the `File` component used inside the template file. Below you can see some examples of filenames: | ||
|
|
||
| Nunjucks: `index.html` | ||
| React: `index.js` or `index.html.js` or `anything-you-want.js` | ||
|
|
||
| ### 4. Basic template structure | ||
|
|
||
| Nunjucks: | ||
| ```js | ||
| <h1>{{ asyncapi.info().title() }}</h1> | ||
| <p>{{ asyncapi.info().description() }}</p> | ||
| ``` | ||
|
|
||
| React: | ||
| ```js | ||
| import { File } from '@asyncapi/generator-react-sdk'; | ||
|
|
||
| export default function({ asyncapi }) { | ||
| return ( | ||
| <File name="index.html"> | ||
| <h1>{asyncapi.info().title()}</h1> | ||
| <p>{asyncapi.info().description()}</p> | ||
| </File> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| ### 5. Macros and Partials | ||
|
|
||
| Replace macros with React components: | ||
|
|
||
| Nunjucks: | ||
| ```js | ||
| {% macro renderChannel(channel) %} | ||
| <div class="channel"> | ||
| <h3>{{ channel.address() }}</h3> | ||
| <p>{{ channel.description() }}</p> | ||
| </div> | ||
| {% endmacro %} | ||
|
|
||
| {{ renderChannel(someChannel) }} | ||
| ``` | ||
|
|
||
| React: | ||
| ```js | ||
| // components/Channel.js | ||
| import { Text } from '@asyncapi/generator-react-sdk'; | ||
|
|
||
| export function Channel({ channel }) { | ||
| return ( | ||
| <Text> | ||
| <div className="channel"> | ||
| <h3>{channel.address()}</h3> | ||
| <p>{channel.description()}</p> | ||
| </div> | ||
| </Text> | ||
| ); | ||
| } | ||
|
|
||
| // Main template | ||
| import { File, Text } from '@asyncapi/generator-react-sdk'; | ||
| import { Channel } from './components/Channel'; | ||
|
|
||
| export default function({ asyncapi }) { | ||
| return ( | ||
| <File name="channels.html"> | ||
| <Text> | ||
| <h2>Channels</h2> | ||
| </Text> | ||
| {asyncapi.channels().map(channel => ( | ||
| <Channel channel={channel} /> | ||
| ))} | ||
| </File> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| ### 6. File template | ||
|
|
||
| Check the [detailed guide on file templates](file-templates.md) to learn what is the difference between templating multiple file outputs in Nunjucks and React. | ||
|
|
||
| ### 7. Models generation | ||
|
|
||
| If you have a template written with Nunjucks, it is almost certain that you have your own custom models, classes, or types templates in place. Instead of migrating them to React render engine we strongly advise you to delegate models generation to AsyncAPI Modelina project. Learn more about [how to add models generation using Modelina](https://www.asyncapi.com/docs/tools/generator/model-generation). | ||
|
|
||
| ## Additional Resources and Information | ||
|
|
||
| ### Template Examples | ||
| For a complete example of React features in use, please refer to the [AsyncAPI Template for Generator Templates](https://github.com/asyncapi/template-for-generator-templates). The `master` branch demonstrates all React features, while the `nunjucks` branch shows the old Nunjucks implementation. This comparison can be particularly helpful in understanding the differences and migration process. | ||
|
|
||
| ### Filters to Helpers | ||
| If you've been using Nunjucks filters placed in the `filters` directory, you can still use this functionality in React. However, they should be treated as normal functions that you import into your components. We recommend renaming the `filters` directory to `helpers` to better reflect their new usage in React. | ||
|
|
||
| ### Hooks Remain Unchanged | ||
| It's important to note that hooks remain unchanged in this migration process. Hooks are not related to the render engine functionality, so you can continue to use them as you have been. | ||
|
|
||
| ### Testing your migration | ||
|
|
||
| After migrating, test your template thoroughly: | ||
|
|
||
| 1. Run the generator using your new React template | ||
| 2. Compare the output with the previous Nunjucks template output | ||
| 3. Check for any missing or incorrectly rendered content | ||
|
|
||
| Consider implementing snapshot tests for your template before starting the migration. This will ease the review of changes in comparing the content rendered after render engine changes. Snapshot tests allow you to have tests that will persist expected output from Nunjucks template, and compare it with output generated after the migration. Check out an [example of such snapshot integration test for our internal react template we use for development and testing](https://github.com/asyncapi/generator/blob/master/apps/generator/test/integration.test.js#L66). | ||
|
|
||
| ## Conclusion | ||
|
|
||
| Migrating from Nunjucks to React templates may require some initial effort, but it will result in more maintainable code. You can learn more about why we introduced the React render engine from article [React as a Generator Engine](https://www.asyncapi.com/blog/react-as-generator-engine). |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Add language specifiers to code blocks.
Add language specifiers to the fenced code blocks for proper syntax highlighting:
-
+bashasyncapi generate fromTemplate ./asyncapi.yaml ./template -o ./output -p param1=value1 --debug --install --disable-hook hookType=hookName
🧰 Tools
🪛 Markdownlint (0.37.0)
50-50: null
Fenced code blocks should have a language specified
(MD040, fenced-code-language)
55-55: null
Fenced code blocks should have a language specified
(MD040, fenced-code-language)