Skip to content
This repository has been archived by the owner on Apr 23, 2020. It is now read-only.

Support for destructured imports #38

Closed
RainerAtSpirit opened this issue Oct 26, 2016 · 3 comments
Closed

Support for destructured imports #38

RainerAtSpirit opened this issue Oct 26, 2016 · 3 comments

Comments

@RainerAtSpirit
Copy link

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.

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

@alansouzati
Copy link
Contributor

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
Copy link
Author

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
Copy link
Contributor

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants