Move to JSX renderer

[magicmatatjahu]

Reason/Context

Currently template is written in Nunjuck. We should move to JSX (aka React) renderer, of course after unification. Unfornatelly we are blocked by asyncapi/generator#521. After improving compilation of React templates, switching to React template will be very easy.

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.

Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[magicmatatjahu]

Still walid. I will annotate that by good first issue label.

[ritik307]

@derberg @magicmatatjahu I would like to work on it but can you kindly elaborate on the issue

[magicmatatjahu]

@ritik307 Hello! Yeah, no problem, we can discuss. Main improvement here will be change Nunjucks templates to the JSX files (React components). Atm our generator supports two render engines, mentioned Nunjucks and JSX - more info about JSX and Nunjucks is here:

• JSX https://github.com/asyncapi/generator/blob/master/docs/authoring.md#react-1
• Nunjucks https://github.com/asyncapi/generator/blob/master/docs/authoring.md#nunjucks

We have also https://github.com/asyncapi/template-for-generator-templates repo when you can check that same templates written in Nunjucks and JSX to check difference how to achieve that same output:

• Nunjucks https://github.com/asyncapi/template-for-generator-templates/blob/nunjucks/template/index.html
• JSX https://github.com/asyncapi/template-for-generator-templates/blob/master/template/index.js

We are opened for contributions :)

So some actions points to that issue:

• you should change that file https://github.com/asyncapi/html-template/blob/master/template/index.html to the JSX template
• we should still support all parameters that we have for that template https://github.com/asyncapi/html-template#supported-parameters
• all hooks should also work after rewriting template

It sounds as big change, but you can make it by iteration, please rewriting in first step the mentioned file to JSX and we can discuss about next changes :)

[ritik307]

hi @magicmatatjahu correct me if am wrong, initially, I have to convert index.html to a JSX template index.jsx

[magicmatatjahu]

@ritik307 Yes exactly, but you can use .js extension, not .jsx :)

[ritik307]

@magicmatatjahu I am currently facing so many errors while setting up the project. Can you kindly provide me with the steps to set up the project correctly?

Following are the steps that I followed while setting up the project.

1. npm install -g @asyncapi/generator.
2. npm run develops (showed errors that files are missing so I ran npm install but it is still showing some error).
3. npm run develop:install (still showing errors)
   
   

[magicmatatjahu]

@ritik307 Strange, I will check that, but you can also use these steps to test your changes:

# install deps in project
npm install

# run generator
ag https://raw.githubusercontent.com/asyncapi/generator/v1.1.5/test/docs/dummy.yml ./ -o ./output --force-write --watch-template

[ritik307]

@ritik307 Strange, I will check that, but you can also use these steps to test your changes:

# install deps in project
npm install

# run generator
ag https://raw.githubusercontent.com/asyncapi/generator/v1.1.5/test/docs/dummy.yml ./ -o ./output --force-write --watch-template

It worked 🎉 but I am getting a small error

[magicmatatjahu]

Personally I don't use --watch-template flag. I always generate template by:

ag https://raw.githubusercontent.com/asyncapi/generator/v1.1.5/test/docs/dummy.yml ./ -o ./output --force-write

after some changes to not to make unnecessary generations. If you will have any problems/question please ask :)

Also that error is probably related to missmatch version of html-template installed by generator and local template.

[ritik307]

got it 😊

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️