Infrastructure - Update build to support direct imports

[dlabaj]

Is this a new component or an extension of an existing one?
N/A

Describe the feature
Currently for federated modules importing the top level barrel file doesn't allow tree shaking to properly be done with shared modules. This results in the need to import every component from PatternFly even if a product is not using it. In order to support tree shaking for federated modules each component should have it's own package.json and index file basically allowing it be imported directly like it is it's own npm package. The following example contains an example how to do this in the mini module package.

https://github.com/Hyperkid123/shared-modules-tree-shaking/tree/main/packages/mini-module-lib

The team should lift this code from this example and update our build to create the mini packages needed to support federate modules. Things to keep in mind with this update are the following:

• Code that generates the mini packages are located in build.js
• Support for versioning should be added. Note: This is not needed as it will be picked up from the main package.json.
• Structure should be updated to be released in a dist folder to support best practices with npm.
• We will need to test this with IDEs such as VSCode, Webstorm, etc. to make sure these updates our developer friendly.
• Test these changes with a simple federated module application to verify the bundle size and tree shaking worked correctly.
• Updates should not prevent importing all components, and this should not be a breaking change.

It should be noted while this works for the javascript it currently still requires a central CSS in the app. Federated modules can override CSS by importing their CSS last as needed. This will allow for version differences for PatternFly for applications that need it.

Are there visuals for this feature? If applicable, please include examples for each state and for varying widths
N/A

Any other information?

[Hyperkid123]

One potential issue that has to be checked is CSS side effects. What can happen is if a module has a CSS import, webpack can sometimes tree shake the file and the styles might be applied. We have encountered this in a past.

import A from 'a'

import './foo/bar.css'

...

What we can do is run AST analysis and check for CSS imports. We can then add sideEffets fields to the individual package.json files to make sure webpack is going to remove the files.