Patternfly-react: Create unified react dist file

[evwilkin]

Enhancement: Combine React packages into one dist file and document installation instructions.

[redallen]

My goal is to make a single react-core.umd.js and react-core.css bundle with no external dependencies on react-icons, react-tokens, or react-styles.

These are the problems I'm facing while using rollup with the rollup-plugin-node-resolve, rollup-plugin-commonjs, and rollup-plugin-scss plugins:

• Remove as many 3rd party deps as possible since they cause CommonJS module resolution problems
  
  
  
  • exenv and lodash (we shouldn't even be using lodash, it's not listed anywhere as a dep!)
  
  
  • prop-types (replace with typescript interfaces)
  
  
  • focus-trap-react (copy single component, write correct types for it so we can use ESM imports for it)
  
  
  • correctly parse CJS focus-trap that depends on other CJS node_modules tabbable and xtend
  
  
• Fix our own 3rd party deps used in react-core
  
  
  
  • react-icons/dist/js needs some love where it uses exports["default"] = _default; so rollup can correctly bundle icons into react-core
  
  

[ishuverma]

To increase adoption, lower the adoption barrier, the better. It should be as easy as:
1) download the example template (from a couple of very simple designs with very few elements),
2) download tarball/use npm,
3) modify the static elements within the downloaded template to your needs
4) deploy and everything works

It should be available for html/css format as well as that's what a lot of beginners start with. In v3, there were html/css example templates but had too many components e.g. index.html for vertical nav was >1700 lines

[edewit]

@redallen focus-trap-react: "write correct types for it so we can use ESM imports for it" I did that for you, https://github.com/davidtheclark/focus-trap-react/pull/68 we want to use patternfly with snowpack so we need all imports to be ESM imports

[redallen]

Thanks @edewit ! I looked more through their implementation and I'm not a very big fan so I wrote my own that is sufficient for PatternFly. Feel free to use it in the meantime!

[edewit]

@redallen any eta when that will be merged into patternfly?

[redallen]

I'm hoping #3967 gets merged today or tomorrow.

[redallen]

@edewit Freshly merged, you can see our implementation here.

I've just gotten an HTML page working with our UMD bundle (exciting!) and I'll submit a PR shortly for that to close this issue.

[evwilkin]

Closed by #3971

[redallen]

@edewit @ishuverma Checkout http://patternfly-react.surge.sh/umd.html for how to get started!