Simplify import

[kennethnym]

We are planning to simplify the way components are imported in v4. Currently, there are multiple ways to import components depending on the usage. We would like to change that in v4: there will only be one entry point for all components:

import { Button, Container, Table } from 'react-bulma-components';

This makes the TypeScript definition file simpler and importing components much less tedious.

cc @couds are we settled on this? If so, I will start making this change.

[couds]

Hi @MrCreeper1008.

Yes at the end we will export only as the basic setup. I will work on this this weekend, mostly we only need to remove the sass imports and update the build process to only build the basic.

The only thing I'm not sure is about the Form component, Probably I will change this to export all the form components also from root.

import { Input } from 'react-bulma-components';

// instead of

import { Form } from 'react-bulma-components';

<Form.Input>....

Note: Not sure what to do about Columns.Column and the other nested components

[kennethnym]

I actually prefer the namespaced import because it makes it clear semantically that the component is part of a Form.

[timorthi]

I think it would still be useful to be able to cherry-pick components directly, e.g.

import Button from 'react-bulma-components/button'

to let users import only components they need to keep bundle sizes small.

An alternative would be to set up react-bulma-components to be tree-shakeable. I haven't developed a tree-shakeable library so I can't provide much help on that, but I thought I'd link out to a relevant discussion (https://github.com/webpack/webpack/issues/2933) since react-bulma-components uses Webpack for its prod build. (Based on my limited understanding it looks like you'd only be able to make a Webpack build tree-shakeable in Webpack 5)

[kennethnym]

Yea we're working on making this library tree-shakable.

[timorthi]

@MrCreeper1008 Great! My bad - I didn't notice Webpack was already dropped in the next branch before I typed out that comment.

Is the meat of the issue, then, to configure the right build tools make this library tree-shakeable? I took a quick glance at next but it's unclear to me what's left to do for this issue. :thinking:

[kennethnym]

Yea I will try to finish v4 next week if possible.

[kennethnym]

Tree shaking should be working (tested with CRA only). Would be great if someone can confirm this with other configurations by installing the next branch of this library:

npm i https://github.com/couds/react-bulma-components#next

For some reason, when trying to install next branch with yarn, yarn also resolves devDependencies, which drastically increases the number of dependencies installed. Not sure if this is a problem with yarn itself or if it's our fault.

cc @timorthi @couds

[timorthi]

Would be great if someone can confirm this with other configurations by installing the next branch of this library

Tried it out with a webpack@4.44.1 setup and confirming that tree shaking works. This is awesome!

For some reason, when trying to install next branch with yarn, yarn also resolves devDependencies, which drastically increases the number of dependencies installed. Not sure if this is a problem with yarn itself or if it's our fault.

I'm not experiencing the same thing. I did yarn add https://github.com/couds/react-bulma-components#next and the only other dependency that was installed was classnames.

[kennethnym]

That is great to hear! Thank you for your feedback. Will finish v4 asap.