[Feature Request]: Babel plugin to transform imports to subpackage imports

[brandones]

Summary

Asking for development of a babel plugin which would transform standard Carbon imports into subpackage imports.

Justification

This would provide the best possible DX, since developers wouldn't have to worry about identifying the right way to do a subpackage import, which presently is not obvious.

This would also solve #9540, since Typescript would work on the main namespace import.

Desired UX and success metrics

No response

Required functionality

The plugin should transform standard imports like

import { Button } from 'carbon-components-react';

into subpackage imports like

import Button from 'carbon-components-react/lib/components/Button';

or

import Button from 'carbon-components-react/es/components/Button';

Where a configuration option specifies whether to use lib or es (or any other option).

Specific timeline issues / requests

No response

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[brandones]

Oh apparently this used to exist: #3869 . My organization needs this. We're running Webpack 5 and Babel 7.

[joshblack]

Hi there @brandones! 👋 Teams should not require needing to do sub-package imports as the project is set up for tree-shaking out of the box. Are you / your team currently experience challenges with a large bundle? If so, could you share more details about what is being included?

[brandones]

Oh, this is interesting. I don't know at what point we decided that carbon-components-react wasn't tree shaking, but it seems not to be true, at least any more. I just did a bundle analysis and found no difference between the normal import and subpackage import.

I do have an unrelated question, though. What's going on with "bucket," here? This is a sample project that has carbon-icons installed but doesn't actually use it:

And here's a breakdown from a real project we have, which actually does use icons:

Maybe there's something wrong with how we're bundling carbon-icons?

[joshblack]

@brandones typically when all of the icons are included, there is a CommonJS import somewhere in the code. Here is a comment where we touched on this briefly: #6602 (comment)

Hope this helps!

[brandones]

Yes, it appears that this app has an import from carbon-components-react/lib. Thanks for your help!