code-connect icon indicating copy to clipboard operation
code-connect copied to clipboard

Is Lit syntax supported?

Open cadamsdev opened this issue 11 months ago • 0 comments

My team wants to provide output code in Lit syntax where we show how to bind click events however the syntax @click=${() => console.log("clicked")} doesn't seem to be supported in code connect.

example (this is valid Lit syntax)

figma.connect("<DS_BUTTON>", {
  props: { },
  example: () =>
    html`
      <ds-button
        @click=${() => console.log("clicked")}
      >
      </ds-button>
    `,
});

error

❯ npm run publish:lit

> [email protected] publish:lit
> figma connect publish --config ./figma-lit.config.json

Config file found, parsing /Users/user/Workspaces/repo/code-connect using specified include globs
❌ /Users/user/Workspaces/repo/code-connect/src/components/ds-button/ds-button.lit.connect.ts
ParserError
undefined: Expected a call expression as a placeholder in the template, got ArrowFunction
 -> /Users/user/Workspaces/repo/code-connect/src/components/ds-button/ds-button.lit.connect.ts:27:15

Using label "Lit"
No Code Connect files found in /Users/user/Workspaces/repo/code-connect - Make sure you have configured `include` and `exclude` in your figma.config.json file correctly, or that you are running in a directory that contains Code Connect files.

also tried

figma.connect("<DS_BUTTON>", {
  props: { },
  example: () =>
    html`
      <ds-button
        @click=${handleClick}
      >
      </ds-button>
    `,
});

error

❯ npm run publish:lit

> [email protected] publish:lit
> figma connect publish --config ./figma-lit.config.json

Config file found, parsing /Users/user/Workspaces/repo/code-connect using specified include globs
❌ /Users/user/Workspaces/repo/code-connect/src/components/ds-button/ds-button.lit.connect.ts
ParserError
undefined: Expected a call expression as a placeholder in the template, got Identifier
 -> /Users/user/Workspaces/repo/code-connect/src/components/ds-button/ds-button.lit.connect.ts:27:15

Using label "Lit"
No Code Connect files found in /Users/user/Workspaces/repo/code-connect - Make sure you have configured `include` and `exclude` in your figma.config.json file correctly, or that you are running in a directory that contains Code Connect files.

cadamsdev avatar Mar 04 '25 02:03 cadamsdev