openedx / openedx/paragon

Migrate off of compound components to standalone components

Open
#2,464 3 comments 1 reaction 1 assignee View on GitHub

@viktorrusakov is already working on this.

Since Jul 25, 2023.

best addressed by breaking change code health enhancement
Dominant language
JavaScript
Stars
140
Forks
100
Avg merge
1h 3m
Merged PRs (30d)
30

Description

As was discovered by #2425, compound components that are extensively used by Paragon do not support tree-shaking (e.g., importing Form component would also include From.Group component into the resulting bundle even if From.Group is not explicitly used in the code, same goes for all Form.<subcomponentName> components). This negatively impacts bundles sizes of consuming applications.

It appears that there is no way to support tree-shaking for compound components (that's because all of the Form.<subcomponentName> components are part of the Form object so you have to bring them all into the bundle if you import Form), that's why popular component libraries (e.g. Material UI, Chakra UI) do not have compound components in their code, instead they utilize standalone components.

We should remove compound components from Paragon to provide best performance possible to consumers. This will result in a breaking change, so we should also provide a CLI command to ease migration.

### Tasks
- [ ] Ensure that Paragon no longer uses compound components in the code and instead exports only standalone components (e.g. `Form` should no longer have `Form.Group` component, instead this component should be exported under `FormGroup` name)
- [ ] Create a CLI command that replaces all compound components' usages with their standalone counterpart (e.g. `Form.Group` is replaced with `FormGroup` across all code)
- [ ] Verify all react-bootstrap imports pull from standalone components rather than root import

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.