Shape Up đŸ‹ïžâ€â™€ïž

Visualize the progress we're making, one cycle at a time. Don't know what Shape Up is about? Learn more.

Cycle #3 — Cleaning the beastCurrent cycle11 days remaining

The current cycle started on Mon Mar 15 2021 and will finish on Mon Apr 26 2021.

Figuring things outMaking it happen

History

Maciej UrbaƄczyk
Updated progress of
Create bundles for React component
to 75% on Tue Apr 13 2021

Waiting for review and for merging this PR.

Maciej UrbaƄczyk
Updated progress of
Use react-component in HTML template
to 65% on Tue Apr 13 2021

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

Maciej UrbaƄczyk
Updated progress of
Use react-component in HTML template
to 50% on Mon Apr 12 2021

Waiting for merging this and for implementation for this.

Maciej UrbaƄczyk
Updated progress of
[Nice-to-have] Use react-component in studio
to 75% on Mon Apr 12 2021

Tested the umd bundle and it works. Waiting for https://github.com/asyncapi/shape-up-process/issues/105 and https://github.com/asyncapi/shape-up-process/issues/86 tasks to go forward.

Maciej UrbaƄczyk
Updated progress of
Create bundles for React component
to 5% on Fri Apr 09 2021

Start task.

In asyncapi/asyncapi-react#296:

  • styling missed parts in Servers, Operations, Messages.
  • left to styling: Sidebar, Examples for Message (for html-template resolution) and for mobiles.

In https://github.com/asyncapi/asyncapi-react/pull/296:

  • add config for TailwindCSS
  • styling Info, half of Servers, Operations, Message, Schema
  • left to styling: Sidebar, Examples for Message and mobile menu.

Render side menu/navigation and missed examples for messages. Everything was added from HTML-Template. The skipped items will be added along with the https://github.com/asyncapi/shape-up-process/issues/86

Maciej UrbaƄczyk
Updated progress of
[Nice-to-have] Use react-component in studio
to 40% on Tue Mar 30 2021

As suggested by Fran, I switched from server-side parsing to client-side parsing and I have this same problem like described here, so first I must fix problem in React component side to go further.

Maciej UrbaƄczyk
Updated progress of
Use react-component in HTML template
to 45% on Tue Mar 30 2021

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.

Maciej UrbaƄczyk
Updated progress of
Use parser-js in react-component
to 100% ✹ on Mon Mar 29 2021
Maciej UrbaƄczyk
Updated progress of
Use parser-js in react-component
to 100% ✹ on Mon Mar 29 2021

"New" component supports in every place parser API. PR with removing beautifier https://github.com/asyncapi/asyncapi-react/pull/285

Currently, the component supports everything that has been mentioned. The only thing that still needs to be added to component is the side menu/navigation.

In asyncapi/asyncapi-react#280 PR:

  • render bindings
  • render extensions

Info component uses TailwindCSS - commit

In asyncapi/asyncapi-react#276 PR:

  • render correlationId,
  • render tags,
  • render all messages, not only under the components section,
Maciej UrbaƄczyk
Updated progress of
Use parser-js in react-component
to 85% on Mon Mar 22 2021

New component for Schema (in PR) already uses parser-js API. After adapting components that use the old Schema component, the beautify stage will be removed and the task will be marked as completed.

Start using TailwindCSS in react-component. First PR: https://github.com/asyncapi/asyncapi-react/pull/269

In https://github.com/asyncapi/asyncapi-react/pull/269 PR:

  • handle circular properties,
  • handle additionalItems and additionalProperties,
  • handle combined schema anyOf, allOf, and oneOf.
Maciej UrbaƄczyk
Updated progress of
Use react-component in HTML template
to 35% on Thu Mar 18 2021

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

Maciej UrbaƄczyk
Updated progress of
[Nice-to-have] Use react-component in studio
to 20% on Thu Mar 18 2021

Create draft PR to show how we can integrate React component - https://github.com/asyncapi/studio/pull/17

I think that separate route /parse on backend should parse AsyncAPI spec from Editor and only in component we should consume parsed spec - parsing in backend is faster than in client and also client is much more light (in this situation, we don't need parser on client side).

Maciej UrbaƄczyk
Updated progress of
Use parser-js in react-component
to 55% on Wed Mar 17 2021

Open PR - https://github.com/asyncapi/asyncapi-react/pull/264 Changes will be merged to unify-component branch.

Maciej UrbaƄczyk
Updated progress of
Use react-component in HTML template
to 25% on Tue Mar 16 2021

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.

Maciej UrbaƄczyk
Updated progress of
Use react-component in HTML template
to 5% on Tue Mar 16 2021

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.

Maciej UrbaƄczyk
Updated progress of
Use parser-js in react-component
to 50% on Tue Mar 16 2021

Info, Servers, Channels, Messages are using parser-js api. I left Schemas, because this part should be rewritten to meet the requirements of the task https://github.com/asyncapi/shape-up-process/issues/86

Maciej UrbaƄczyk
Updated progress of
Use parser-js in react-component
to 15% on Mon Mar 15 2021

Info and Servers components are using parser-js api

Maciej UrbaƄczyk
Updated progress of
Use parser-js in react-component
to 5% on Mon Mar 15 2021

Starting task