Add support for custom import statements

[andreiduca]

Currently, the import statement of the example block is inferred/derived from the actual import statement from the *.figma.tsx file. This can be altered to a certain extent through importPaths from figma.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 as import { 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 in import { Button } from '@uikit/Button', with the original capital "B" vs the expected lowercase "b".

[mryechkin]

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.

[karlpetersson]

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