Forma 36 4.0 Packages Structure

Hey F36 Community 🖖

with Forma 36 4.0 approaching we suggest a new project structure that will change the way how we organize and publish react components.

Description

As you’re aware we currently manage all components in a single package forma-36-react-components which many times was challenging to us in terms of resulting bundle size and SLA’s (alpha components)

To offer more flexibility around component management we envision the future project structure like this.

Packages Structure

└── packages
    ├── components
    │   ├── forma-36-react-button
    │   ├── forma-36-react-dropdown
    │   └── forma-36-react-textfield
    ├── forma-36-fcss
    ├── forma-36-react-components
    ├── forma-36-tokens
    └── forma-36-website

The main difference is that every component will be its own package which means that every component will also be published separately. As I see it the main benefits of this structure are:

1. Atomic imports. The consumer can import just the components they need and not the entire bundle.
2. Independent component versioning
3. Component-based SLA’s (alpha components, experimental components)

We’ll still keep the forma-36-react-components package as a facade package that imports all components, creates one bundle and also serves the storybook docs.

Any feedback is much appreciated!

Thanks ❤️

Johannes

[suevalov]

Sounds good for me, with Lerna and tsdx it is actually quite sane approach and it will help to make extensions slimmer.

The only thing that I would do is to create one umbrella package to avoid importing all components one by one in our web app.

[wichniowski]

@davidfateh we’ll definitely have components that rely on each other but since we’re using Lerna those dependant components will be published and updated automatically. Using the forma-36-react-components package which imports all those components nothing should change meaning that it will release one new version no matter how many components changed. The only overhead I can see here is that when you’re using the components separately you’ll have to update all dependent components as you described.