| Tree shaking & Paragon 🌲 🌴 🌳 | Adam Stankiewicz | [inform] Recent issue was identified/reported with relatively large implications around performance: https://github.com/openedx/paragon/issues/2425 tl;dr; Importing a single compound component (e.g., Form.Group) from Paragon means the resulting application bundle that gets shipped to the user includes all Paragon code, not just the code related to Form.Group, leading to unnecessarily large JS bundle sizes. Examples: Compound component: Form.Group Standalone component: FormGroup
Some potential ideas for next steps: Try to find a workaround to make tree shaking work with compound components (not sure this is possible). Verify all compound components in Paragon also can be imported as a standalone component. Update documentation to suggest only using standalone components. Deprecate and eventually remove compound components, or do we support both and have consumers be the deciding factor in whether that want to use the tree shakable components or not. Create a codemod / CLI tool to automatically migrate from compound → standalone components. Anything else that might need to be addressed?
Notes: Consider documentation pointing only to the optimized documentation, but add a warning for compound components slated for depr Avoid depr process out of the gate More IDE friendly for compound components Keeping compound components generally is user friendly for engineers Tree Shaking and compound components should work together in some way
|
| Ensuring @edx/brand-openedx is the default brand package committed in code | Adam Stankiewicz | [context] Semi-regularly, an issue is raised that the @edx/brand-edx.org NPM package is installed by default in a repository within the openedx GitHub organization. @edx/brand-edx.org is 2U/edX specific and should not be committed in code within openedx. 2U/edX and other instances apply the @edx/brand-edx.org package as an NPM alias override through internal configuration.
Some proposed ideas:  Update the “Usage Insights” automation to auto-create a GitHub issue when it detects something other than @edx/brand-openedx is installed in a consuming project. Standardize and include NPM scripts in package.json files in consuming projects for running MFEs locally with a custom @edx/brand package that doesn’t get committed in code. Modify fedx-scripts in @edx/frontend-build in some way to prompt users to optionally specify a custom @edx/brand package when running npm start and/or npm run build. Any other ideas to better enforce only installing @edx/brand-openedx in code and improve the developer experience for running/building MFEs locally with custom themes?
Related issues:
Notes: +1 to automated insights into which brand packages are installed. Bumping this higher up in the Paragon and/or @edx/brand README. Adding a check somewhere at the PR level to prevent merges with non-openedx brand installed. Opportunity for pattern for a deny list? (interesting idea) Open edX has lots of shared Github Action workflows: https://github.com/openedx/.github CI check to avoid manual.
|