Support for destructured imports

[RainerAtSpirit]

It would be great if grommet-toolbox would allow using destructuring syntax.

import {Menu, Anchor, Checkbox} from 'grommet'

instead of

import Menu from 'grommet/components/Menu';
import Anchor from 'grommet/components/Anchor';
import CheckBox from 'grommet/components/CheckBox';

without importing the whole grommet package into the build.

You might consider using https://github.com/lodash/babel-plugin-lodash for that purpose. Despite the name it allows 'cherry-picking' of modules. e.g. nwb (https://github.com/insin/nwb) has the plugin configured in that generic way.

https://github.com/insin/nwb/issues/141 https://github.com/insin/nwb/blob/master/docs/Configuration.md#cherrypick-string--arraystring

[alansouzati]

Thanks for raising this issue.

I think this should be supported today. You just need to include the plugin in your .babelrc.

Although I don't see much value on that as you a just transferring 'grommet/components/CheckBox' to the babel file. Does my interpretation make sense? I may be missing something here...

[RainerAtSpirit]

I gave it a try and yes you're right this is supported as of today. No need for modification. What's the value? Writing destructuring syntax without size penalty.

Here's a baseline repo that compiles into a 806 KB dist size. https://github.com/RainerAtSpirit/grommet-toolbox38

Using desctructuring syntax the dist size grow to 2.45 MB https://github.com/RainerAtSpirit/grommet-toolbox38/compare/destructuring?expand=1

Adding and configuring babel-lodash-plugin cuts the dist file size to 806 KB again https://github.com/RainerAtSpirit/grommet-toolbox38/compare/babel-lodash-plugin?expand=1

There might be further optimization for nested name spaces like icons, but for the POC I simple pulled icons in like usual.

[alansouzati]

Cool good to know, thanks for clarifying that. I thought that with this plugin you would need to declare each component individually in the .babelrc file, but I was wrong.

Great stuff @RainerAtSpirit