Open andreiduca opened 1 month ago
Would love to see this as well.
For my use case, I'd like to be able to specify named imports, but my component code is a default export.
So in Button.figma.tsx
I have something like this:
import Button from './Button';
figma.connect('Button', etc...)
Where src/components/Button/Button.jsx
is:
const Button = () => {
// ...
};
export default Button;
And src/components/Button/index.js
is:
import Button from './Button';
import { BUTTON_VARIANT } from './constants';
export default Object.assign(Button, {
VARIANT: BUTTON_VARIANT,
});
And then in figma.config.json
I have:
{
"codeConnect": {
"include": ["src/components/**"],
"exclude": [],
"importPaths": {
"*": "@acme/ui"
}
}
}
Unfortunately, this results in a code snippet that has this import:
import Button from '@acme/ui';
instead of:
import { Button } from '@acme/ui';
I'd like to retain my current component file structure, but provide the correct import statement for the user.
Hey! We added a way to override the import statements in the latest version (It's not yet documented in the README):
figma.connect(Button, "https://...", {
imports: ["import Button from '@acme/ui'"]
})
Keen to hear your thoughts on this - hopefully this helps to unblock you. We'll likely revisit the autogenerated imports too in the future to make them more customizable/flexible to use
Currently, the
import
statement of the example block is inferred/derived from the actualimport
statement from the*.figma.tsx
file. This can be altered to a certain extent throughimportPaths
fromfigma.config.json
.But it's not flexible enough for more use cases.
For example, the local component file is called
Button
with a capital "B". So the import is defined asimport { Button } from './Button'
. But the component is distributed as a standalone package named@uikit/button
, with a lowercase "b".Defining an import path like
"*": "@uikit/*"
will result inimport { Button } from '@uikit/Button'
, with the original capital "B" vs the expected lowercase "b".