figma / code-connect

A tool for connecting your design system components in code with your design system in Figma
MIT License
931 stars 67 forks source link

dynamic importPaths based on component subpaths #154

Open ericandrewscott opened 1 month ago

ericandrewscott commented 1 month ago

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.

ericandrewscott commented 1 week ago

FWIW, we did this by adding every component to our figma.config.json. It's not elegant, but it works.

tomduncalf-figma commented 1 week ago

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'?