figma
dynamic importPaths based on component subpaths
We have our config file set up to rename the import from our specific package, eg:
import { Button } from '@namespace/react-core';
BUT, we can't account for our customers properly implementing tree-shaking of our library, so we'd like to enable dynamic import subpaths, eg:
import { Button } from '@namespace/react-core/button';
This would ensure that the bundle sizes for anyone importing components from our library stay as small as possible. We also can't count on them using the ESM versions of our components (I know, I know... welcome to modern JS).
Is there an easy way to do this dynamically, instead of literally adding every component to our figma.config.json, eg:
"importPaths": {
"path-to-button/*": "@namespace/react-core/button",
"path-to-input/*": "@namespace/react-core/input",
...
}
"paths": {
"./**":["path-to-components/**/*"]
},
If there was a way to dynamically path the imports, that would help us not n+1 our importPaths as we add Code Connect files to our components.
- Code Connect CLI version 1.0.6
- Operating system OSX
FWIW, we did this by adding every component to our figma.config.json. It's not elegant, but it works.
Hey @ericandrewscott, glad you found a workaround but agreed this isn't ideal.
In your .figma.tsx file are you using import { Button } from '@namespace/react-core' or import { Button } from '@namespace/react-core/button'?
