Use react-component in HTML template

[magicmatatjahu]

After completing #85 #86 #87 HTML template should be replaced by react-component.

Written in #83

When it comes to making the HTML template render the React component, my suggestion is that we have a look at the following ReactDOMServer and ReactDOM methods:

• ReactDOMServer.renderToNodeStream()
• ReactDOM.hydrate()

I found this article very helpful: https://dev.to/marvelouswololo/how-to-server-side-render-react-hydrate-it-on-the-client-and-combine-client-and-server-routes-1a3p

One possible solution here is to make the HTML template an empty template with a generate:after hook where we do all the rendering process.

Also the HTML template supports some parameters like singleFile, baseHref, version, sidebarOrganization, and others. We should make sure they still work.

Ref: asyncapi/html-template#51

[asyncapi-bot]

Hey! You've labeled this issue as a Scope. Remember you can use the following command to inform about its progress:

/progress <percentage> [message]

or

/progress <percentage>

A mutiline message.
It supports **Markdown**.

Example:

/progress 40 We're still figuring out how to implement this. We have an idea but it is not yet confirmed it will work.

/progress 50

A few notes:

* We got this figured out :tada:
* We're going to use [this library](#link-to-website) to avoid losing time implementing this algorithm.
* We decided to go for the quickest solution and will improve it if we got time at the end of the cycle.

---

🏋️‍♀️ See the progress on the Shape Up Dashboard.

[magicmatatjahu]

/progress 5 Starting task. First, I want to check if the current react component can be rendered as template. I'll give myself one day for it. It's only a premature-integration. Then I will start other tasks.

[magicmatatjahu]

/progress 25

I figured out how we can render component in HTML-template:

1. Using web-component. We can save bundled js files from web-component (from here) as js files in template and "serve" them. Problem is that it's not a true SSR so SEO will be worse (as I know only google can index SPA application).

2. Using hydration. First we will show "stringified" component by ReactDOMServer.renderToString function and then hydrate it by React.hydrate function. For that we need at least react component saved in single file in umd format, so at the moment this is a problem - we must add webpack or rollup to react component, and bundling before publishing to npm to different formats: esm, cjs, umd.

3. Render component like Gatsby renders page - similar to 2. point, but Gatsby bundle hydration and stringified in one process. I don't know how to do that, but I will spend some time on it, if I will have on end of cycle, because for me this is a best way to handle rendering the component.

[magicmatatjahu]

/progress 35 Create draft PR to show how we can integrate React component inside HTML template - asyncapi/html-template#166

[magicmatatjahu]

/progress 45 In asyncapi/html-template#166 there is still work to be done:

• improved pdf generation - component renders, but not with all expanded toggles,
• we don't render in the React component the navigation like in Html-template - yet 😄
• the weight of the component (also the template size) is very high due to the fact that the whole parser is packed together with the component. We need to create two versions of the component with and without a parser
• need to correct Readme

I also want to try generate the page with Gatsby (suggested by Łukasz) and see if it reduces the template size.

[magicmatatjahu]

/progress 50 Waiting for merging this and for implementation for this.

[magicmatatjahu]

/progress 65 I wrote "stringify" function inside this PR. At the moment task is waiting for publishing "new" components with unified styling.

[magicmatatjahu]

/progress 80 Tested old parameters and it works with new component! Readme is also updated. Waiting to publish component.

[magicmatatjahu]

/progress 90 Waiting to publish component, also PR asyncapi/html-template#166 is ready to review!

[magicmatatjahu]

/progress 100 I think that review in asyncapi/html-template#166 is done. Fran accepted, only waiting for last thoughts from Łukasz :) Waiting to merge "new" component and bump it in html-template.