🗣[Discussion] Distribute individual bundles for each component

It would be awesome if I could import only a single component at a time by going a bit deeper into the filesystem, for example something like:

import Flex from '@primer/components/dist/Flex';
// or maybe even
import Flex from '@primer/components/Flex';

That mainly requires creating a JS file per component that has a module.exports instead of a single index.esm.js file. That would allow my app to only pull in the code that I am really using, instead of all components, and also solve #455 and #454.

[shawnbot]

@mxstbr this is possible, but it’s not a great public API because in order for people to use it they need to know how to configure [insert your build tool(s) here] to compile our source files node_modules/@primer/components. If there’s a generally acceptable way to do that, we’re all ears! But it seems like having CommonJS and/or ESM builds of each component would be best, no?

[BinaryMuse]

I’m picking up this issue again. Some recent discussion:

• I’ve successfully been able to create a transpilation-only build of each component into individual modules (not packages), but there are still a few issues to take care of here involving certain resolvers and duplicated code in the built modules
• We’d like to bundle some components into an “experimental” directory where experiments and other incomplete components could live and be usable without being exported in the main @primer/components export
• We should update (or auto-generate) the TypeScript declare module directories in the index.d.ts file so that both src and dist work (or maybe we should drop src and only use dist?)
• It would be nice if we could write some components in TS