Is TypeScript the only option?

[mryechkin]

Hey there - congrats on the launch, this is really exciting!

I have a question that I didn't really see an answer to in the docs. Is TypeScript and .tsx extension the only way to use Code Connect currently? I'm trying to add this to a plain JavaScript project, and couldn't get it to run after renaming *.figma.tsx to *.figma.jsx.

Is this at all configurable? If not, would you consider adding such a feature at some point in the future?

[tomduncalf-figma]

Hey @mryechkin, I just took a look into this and I believe the Code Connect files themselves need to be Typescript. We use the Typescript Compiler API under the hood to parse the file, and it seems like this can't extract the information it needs if the file is not .tsx.

However, you should be able to connect .jsx components without any issues, so that only your Code Connect files need to be in Typescript – everything else can stay as JS. Would this work for you? Please reopen this issue or open a new one and let us know if you run into any issues.

[mryechkin]

Hey Tom - that makes sense, thanks for the details.

I figured something like that was the case but wanted to confirm. It does work, I'm now just thinking of how I should be organizing the Code Connect files in the component library repo. Do they need to be colocated with the component code? Or could these live in a separate repo, and have the components imported from the published package instead?

So something like this:

import { Button } from '@acme/ui';

figma.connect(Button, ...);

Instead of:

import Button from './Button';

figma.connect(Button, ...);

I understand that I'd have to adjust my figma.config.json, but would this approach work in general?