Skip to content

Commit

Permalink
added the migration guide and log the warning msg
Browse files Browse the repository at this point in the history
  • Loading branch information
Gmin2 committed Aug 11, 2024
1 parent c7323d9 commit eb2e170
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 2 deletions.
121 changes: 121 additions & 0 deletions apps/generator/docs/depreciate-nunjucks.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
---
title: "Depreciation of nunjucks render engine"
weight: 170
---

# Migration Guide from nunjucks render engine to react render engine

## Introduction

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.

## Step-by-Step Migration Guide

### 1. Update package.json

Change your template configuration in `package.json`:

```json
{
"generator": {
"renderer": "react"
}
}
```

### 2. Install Dependencies

Install the necessary React dependencies:

```bash
npm install @asyncapi/generator-react-sdk
```

### 3. Basic Template Structure

Nunjucks:
```jsx
<h1>{{ asyncapi.info().title() }}</h1>
<p>{{ asyncapi.info().description() }}</p>
```

React:
```jsx
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>
);
}
```

### 4. Macros

Replace macros with React components:

Nunjucks:
```jsx
{% macro renderChannel(channel) %}
<div class="channel">
<h3>{{ channel.address() }}</h3>
<p>{{ channel.description() }}</p>
</div>
{% endmacro %}

{{ renderChannel(someChannel) }}
```

React:
```jsx
// 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 key={channel.address()} channel={channel} />
))}
</File>
);
}
```

### 5. File template

//TODO: we can add a link to Florence docs once it is merged

## Testing Your Migration

After migrating, test your template thoroughly:

1. Run the generator with your new React template
2. Compare the output with the previous Nunjucks template output
3. Check for any missing or incorrectly rendered content

## Conclusion

Migrating from Nunjucks to React templates may require some initial effort, but it will result in more maintainable. You can read why we introduced react render engine [here](https://www.asyncapi.com/blog/react-as-generator-engine)

6 changes: 4 additions & 2 deletions apps/generator/lib/generator.js
Original file line number Diff line number Diff line change
Expand Up @@ -931,9 +931,11 @@ class Generator {
async renderFile(asyncapiDocument, filePath, extraTemplateData = {}) {
if (isReactTemplate(this.templateConfig)) {
return await renderReact(asyncapiDocument, filePath, extraTemplateData, this.templateDir, this.templateContentDir, TRANSPILED_TEMPLATE_LOCATION, this.templateParams, this.debug, this.originalAsyncAPI);
} else {
console.warn('Deprecation Warning: Nunjucks templates are deprecated. Please migrate to React templates.');
const templateString = await readFile(filePath, 'utf8');
return renderNunjucks(asyncapiDocument, templateString, filePath, extraTemplateData, this.templateParams, this.originalAsyncAPI, this.nunjucks);
}
const templateString = await readFile(filePath, 'utf8');
return renderNunjucks(asyncapiDocument, templateString, filePath, extraTemplateData, this.templateParams, this.originalAsyncAPI, this.nunjucks);
}

/**
Expand Down
1 change: 1 addition & 0 deletions apps/generator/lib/renderer/nunjucks.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const nunjucksExport = module.exports;
* @param {string} templateDir path
*/
nunjucksExport.configureNunjucks = (debug, templateDir) => {
console.warn('Deprecation Warning: Nunjucks support is being phased out. Please migrate to React templates.');
const config = {};
if (debug) config.dev = true;

Expand Down

0 comments on commit eb2e170

Please sign in to comment.