As per the Google Doc report, I created, I wrote this at that time -
Ooni-components size is 3.5MB, very heavy. It doesn’t even say if it’s tree-shakeable or not. Checked using Bundlephobia
V0.4.7 - 3.5MB minified
V0.4.6 - 2.2MB minified
Our design system is using rebass components and we’re exporting almost every component of rebass. So, I thought of investigating what all components are really being used. Went through 100 files in explorer repo importing ooni-components. Most of them are using these 10 components from the design system.
Flex
Box
Container
Link
Heading
Text
Select
Label
Input
Button
Note - The same case is with ooni run and probe-desktop.
We can use a module builder tool like tsdx which provides typescript support, comes with storybook also, tree-shaking, jest for testing, prettier, rollup for bundling and many more.
We can also organize our storybook in this manner.
So, what I want to propose is we move to a new repo - @ooni/design-system which is setup using tsdx, as it'll solve a lot of problems for us - a webpack bundler, tree shaking, typescript, code-redability.
*Sarath's reply -
1. Typescript support
We do want to move as much as possible to Typescript. This project is a good place to start shifting towards Typescript.
2. Package size
This is the most urgent issue to address in this project. Theoretically, it should be tree-shakable. The problem is with the way it is bundled. Simply using webpack/rollup/parcel itself should solve a big part of this problem.
3. Rebass component problem
The exporting code in components/index.js and components/components.js is a big mess. Most of those components imported and re-exported from rebass don't even exist in rebass anymore.
4. tsdx suggestion
tsdx looks like a promising tool that can help maintain the project. We already use jest, eslint and storybook, this can add typescript and bundling. Good suggestion!
As per the Google Doc report, I created, I wrote this at that time -
Ooni-components size is 3.5MB, very heavy. It doesn’t even say if it’s tree-shakeable or not. Checked using Bundlephobia
V0.4.7 - 3.5MB minified V0.4.6 - 2.2MB minified
Our design system is using rebass components and we’re exporting almost every component of rebass. So, I thought of investigating what all components are really being used. Went through 100 files in explorer repo importing ooni-components. Most of them are using these 10 components from the design system.
Flex Box Container Link Heading Text Select Label Input Button
Note - The same case is with ooni run and probe-desktop.
We can use a module builder tool like tsdx which provides typescript support, comes with storybook also, tree-shaking, jest for testing, prettier, rollup for bundling and many more.
We can also organize our storybook in this manner.
As a added bonus, it also got Typescript support.
So, what I want to propose is we move to a new repo - @ooni/design-system which is setup using tsdx, as it'll solve a lot of problems for us - a webpack bundler, tree shaking, typescript, code-redability.
*Sarath's reply -
1. Typescript support We do want to move as much as possible to Typescript. This project is a good place to start shifting towards Typescript.
2. Package size This is the most urgent issue to address in this project. Theoretically, it should be tree-shakable. The problem is with the way it is bundled. Simply using webpack/rollup/parcel itself should solve a big part of this problem.
3. Rebass component problem The exporting code in
components/index.jsandcomponents/components.jsis a big mess. Most of those components imported and re-exported fromrebassdon't even exist inrebassanymore.4. tsdx suggestion tsdx looks like a promising tool that can help maintain the project. We already use jest, eslint and storybook, this can add typescript and bundling. Good suggestion!