Page Comparison

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?

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:

• Surface the installed brand package and its version across all consuming packages of @edx/paragon in the “Usage Insights” tool. For example, something like:

Image Added

• 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.

  • Example: THEME=@edx/brand-edx.org npm start:with-theme as a possible usage API where the package specified in the THEME environment variable is installed with --no-save.

• Modify fedx-scripts in @edx/frontend-build in some way

• 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:

• https://github.com/openedx/paragon/issues/2240