search

asyncapi / shape-up-process

This repo contains pitches and the current cycle bets. More info about the Shape Up process: https://basecamp.com/shapeup
https://shapeup.asyncapi.io
11 stars 8 forks source link

Use react-component in HTML template #88

Closed magicmatatjahu closed 3 years ago

magicmatatjahu commented 3 years ago

After completing https://github.com/asyncapi/shape-up-process/issues/85 https://github.com/asyncapi/shape-up-process/issues/86 https://github.com/asyncapi/shape-up-process/issues/87 HTML template should be replaced by react-component.

Written in https://github.com/asyncapi/shape-up-process/issues/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:

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: https://github.com/asyncapi/html-template/issues/51

asyncapi-bot commented 3 years ago

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.

:weight_lifting_woman: See the progress on the Shape Up Dashboard.

magicmatatjahu commented 3 years ago

/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 commented 3 years ago

/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 commented 3 years ago

/progress 35 Create draft PR to show how we can integrate React component inside HTML template - https://github.com/asyncapi/html-template/pull/166

magicmatatjahu commented 3 years ago

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

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

magicmatatjahu commented 3 years ago

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

magicmatatjahu commented 3 years ago

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

magicmatatjahu commented 3 years ago

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

magicmatatjahu commented 3 years ago

/progress 90 Waiting to publish component, also PR https://github.com/asyncapi/html-template/pull/166 is ready to review!

magicmatatjahu commented 3 years ago

/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.