chore: add esm, cjs and umd bundles #297

magicmatatjahu · 2021-04-12T14:28:23Z

Description

Changes proposed in this pull request:

Add esm bundle under module field,
Add cjs bundle under main field,
Add umd bundle under {package}/bundles/umd directory.
Update package.json with helper scripts.
switch from dompurify to isomorphic-dompurify to support rendering in node and in browser - original dompurify can only be used in browser.
extract main component to two separates: AsyncAPI with parser and Standalone without parser -- for these two bundler creates two umd packages.

ems is prepared when you use something like create-react-app when someone have another bundler (webpack) to bundle our component with another application. Only for better DX.
cjs is prepared only for application when you use CommonJS (require, module.exports). There is also not needed to bundle our package by webpack, because on the Node app should deal with the dependencies of our component. cjs is only needed for rendering on the server side (hydration), when someone use cjs, otherwise will be used esm.
umd can be used on Node side and client side (browser), but unfornatelly we are using parser in our component which needs a Node polyfills to run on browser, so umd is only needed when someone wants to run a component as a script in html - something like webcomponent but run from react. For umd I created two packages, with and without parser, but you know why we need it :)

Related issue(s)
Part of asyncapi/shape-up-process#105

magicmatatjahu · 2021-04-16T10:30:03Z

library/webpack.config.js

+  },
+
+  plugins: [
+    // new BundleAnalyzerPlugin(),


BundleAnalyzerPlugin is used to check size of bundled package on prepared for that html-site. I don't wanna remove it from code, but only comment when someone will want to check the size before commit (with new changes in component).

magicmatatjahu · 2021-04-16T10:31:24Z

library/src/containers/AsyncApi/Standalone.tsx

@@ -0,0 +1,146 @@
+import React, { Component } from 'react';


This is the old AsyncAPI component but without parser. "New" AsyncAPI component uses this component directly in render function to avoid repetitive code.

derberg

I think it looks fine, just one comment so I can understand something

derberg · 2021-04-16T10:59:55Z

library/src/components/Schema.tsx

@@ -153,7 +161,7 @@ export const Schema: React.FunctionComponent<Props> = ({
                        key={idx}
                        className="border inline-block text-orange-600 rounded ml-1 py-0 px-2"
                      >
-                        <span>{e}</span>
+                        <span>{JSON.stringify(e)}</span>


can you explain why now we need to stringify this and const? I thought it is string always

JSON.stringify add to string "", similar to Nunjucks something | safe. I think that I should make some helper to "prettiefy" these string, not using JSON.stringify.

derberg · 2021-04-16T11:14:33Z

I have to shamefully confess I don't get why it is so important to support all these different bundlers. It only makes me feel there are moments where I feel tired with JS ecosystem complexity 😄

derberg · 2021-04-16T11:22:15Z

also strange that with so many modifications there was no need to update/add any tests 😝

magicmatatjahu · 2021-04-16T11:26:53Z

@derberg Agree with you with JS ecosystem complexity! 😅 I will try to explain why we need it (for community of course):

ems is prepared when you use something like create-react-app when someone have another bundler (webpack) to bundle our component with another application. Only for better DX.
cjs is prepared only for application when you use CommonJS (require, module.exports). There is also not needed to bundle our package by webpack, because on the Node app should deal with the dependencies of our component. cjs is only needed for rendering on the server side (hydration), when someone use cjs, otherwise will be used esm.
umd can be used on Node side and client side (browser), but unfornatelly we are using parser in our component which needs a Node polyfills to run on browser, so umd is only needed when someone wants to run a component as a script in html - something like webcomponent but run from react. For umd I created two packages, with and without parser, but you know why we need it :)

Feel free when you have another questions!

also strange that with so many modifications there was no need to update/add any tests 😝

PR adds only configurations for the webpack, in which way you want to test it? 🤣

derberg · 2021-04-16T11:35:16Z

PR adds only configurations for the webpack, in which way you want to test it? 🤣

just wanted to point out I'm missing components tests in overal 😛

I will try to explain why we need it

thanks for that, please update description with this comment so it is clear for anyone in the future and there is no need to scroll through comments

I also think we need some info about it in the readme, don't you think?

btw, you think it will solve issue with next.js? as a side effect :D

magicmatatjahu · 2021-04-16T11:40:50Z

@derberg I'm kidding with tests, I know about it, at the moment I need only this PR, some changes with styling, updated Readme and I'm on the way to merge to master. I think that on Monday I will have the last PR to merge before merging to master and I will think about missed tests to helpers. Component testing 🤔 I don't know if it's needed, because we don't have any interactivity in them.

btw, you think it will solve issue with next.js? as a side effect :D

I tested umd module in studio and it works, so yeah, as a side effect I fixed these problems with next.js, but at the moment, I don't want to write about it in these issues.

derberg · 2021-04-16T11:44:22Z

you mean you want me to approve and update readme in final PR?

magicmatatjahu · 2021-04-16T11:45:57Z

I will write helper to prettify string from const, enum and I will ping you to accept PR. I mean about Readme.md that it will be included in next PR (probably the last one).

derberg · 2021-04-16T11:52:34Z

ok, but please remember about the explanation for different modules, as I will forget to check that explicitly

also, hint for final PR -> would be awesome to have playground deployed from the branch, somewhere, for manual testing + webcomponent available for test too

magicmatatjahu · 2021-04-16T11:56:57Z

ok, but please remember about the explanation for different modules, as I will forget to check that explicitly

👌🏼

also, hint for final PR -> would be awesome to have playground deployed from the branch, somewhere, for manual testing + webcomponent available for test too

I planned to add instruction how to install html-template with new component onboard something like ag {spec} ../{my branch} to test it.

derberg · 2021-04-16T12:06:10Z

I think deploying playground from your branch would make it super easy for others to take a look and try out their files, to give you a good feedback.

anyway, approving

sonarqubecloud · 2021-04-16T12:19:46Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

magicmatatjahu · 2021-04-16T12:32:56Z

@derberg I added missed function. I see that I have possibility to merge, so I'm merging :) Thanks for review!

asyncapi-bot · 2021-05-04T07:38:09Z

🎉 This PR is included in version 0.21.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

magicmatatjahu added enhancement New feature or request area/library Related to all activities around Library package labels Apr 12, 2021

magicmatatjahu mentioned this pull request Apr 12, 2021

Create bundles for React component asyncapi/shape-up-process#105

Closed

5 tasks

magicmatatjahu force-pushed the unify-bundles branch from a9d6674 to 6083816 Compare April 15, 2021 08:31

magicmatatjahu added 3 commits April 15, 2021 10:33

refactor: add bundler

6e18623

refactor: add bundles

096e679

rebase

99473a8

magicmatatjahu force-pushed the unify-bundles branch from 6083816 to 99473a8 Compare April 15, 2021 09:29

magicmatatjahu added 2 commits April 15, 2021 11:34

rebase

d63d623

extract separate files

ff81894

magicmatatjahu requested a review from derberg April 16, 2021 10:27

magicmatatjahu commented Apr 16, 2021

View reviewed changes

derberg reviewed Apr 16, 2021

View reviewed changes

derberg approved these changes Apr 16, 2021

View reviewed changes

add prettifyValue function

27693bd

magicmatatjahu merged commit 320c389 into asyncapi:unify-component Apr 16, 2021

magicmatatjahu deleted the unify-bundles branch April 16, 2021 12:37

asyncapi-bot added the released on @next label May 4, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: add esm, cjs and umd bundles #297

chore: add esm, cjs and umd bundles #297

magicmatatjahu commented Apr 12, 2021 •

edited

Loading

magicmatatjahu Apr 16, 2021 •

edited

Loading

magicmatatjahu Apr 16, 2021 •

edited

Loading

derberg left a comment

derberg Apr 16, 2021

magicmatatjahu Apr 16, 2021

derberg commented Apr 16, 2021

derberg commented Apr 16, 2021

magicmatatjahu commented Apr 16, 2021 •

edited

Loading

derberg commented Apr 16, 2021

magicmatatjahu commented Apr 16, 2021

derberg commented Apr 16, 2021

magicmatatjahu commented Apr 16, 2021

derberg commented Apr 16, 2021

magicmatatjahu commented Apr 16, 2021

derberg commented Apr 16, 2021

sonarqubecloud bot commented Apr 16, 2021

magicmatatjahu commented Apr 16, 2021

asyncapi-bot commented May 4, 2021

chore: add esm, cjs and umd bundles #297

chore: add esm, cjs and umd bundles #297

Conversation

magicmatatjahu commented Apr 12, 2021 • edited Loading

magicmatatjahu Apr 16, 2021 • edited Loading

Choose a reason for hiding this comment

magicmatatjahu Apr 16, 2021 • edited Loading

Choose a reason for hiding this comment

derberg left a comment

Choose a reason for hiding this comment

derberg Apr 16, 2021

Choose a reason for hiding this comment

magicmatatjahu Apr 16, 2021

Choose a reason for hiding this comment

derberg commented Apr 16, 2021

derberg commented Apr 16, 2021

magicmatatjahu commented Apr 16, 2021 • edited Loading

derberg commented Apr 16, 2021

magicmatatjahu commented Apr 16, 2021

derberg commented Apr 16, 2021

magicmatatjahu commented Apr 16, 2021

derberg commented Apr 16, 2021

magicmatatjahu commented Apr 16, 2021

derberg commented Apr 16, 2021

sonarqubecloud bot commented Apr 16, 2021

magicmatatjahu commented Apr 16, 2021

asyncapi-bot commented May 4, 2021

magicmatatjahu commented Apr 12, 2021 •

edited

Loading

magicmatatjahu Apr 16, 2021 •

edited

Loading

magicmatatjahu Apr 16, 2021 •

edited

Loading

magicmatatjahu commented Apr 16, 2021 •

edited

Loading