Custom Vue Components Rendered as Lowercase Native HTML Elements

[james-cavanagh]

• Code Connect CLI version: 1.2.0


Apologies if I am missing something obvious, but I'm encountering an issue when using the HTML implementation for a Vue component library. While I understand that custom components are often rendered in a similar way to native HTML elements, in my specific use case, when attempting to render a <Button /> component as a self-closing tag, the output is <button /> instead of <Button />.

Is there an advised solution or workaround for ensuring that custom components like <Button /> retain their capitalisation and are not treated as native HTML elements?

import figma, { html } from "@figma/code-connect/html"

figma.connect(
  "https://...",
  {
    props: {
      label: figma.string("Label"),
      size: figma.enum("Size", {
        XS: "xs",
        SM: "sm",
        LG: "lg",
      }),
    },
    example: ({ label, size }) => html`
      <Button :label="${label}" :size="${size}" />
    `,
  },
)

[tomduncalf-figma]

Hey @james-cavanagh, the issue here seems to be that the prettier library we use to format Code Connect output converts known HTML tag names such as button to lowercase.

I can't see a way to opt out of this behaviour, but I was able to publish a Code Connect example like:

figma.connect(
  <URL>,
  {
    /* prettier-ignore */
    example: () => html`<!-- prettier-ignore --><Button />`,
  }
);

The first /* prettier-ignore */ stops my VS Code from formatting Button to lowercase, the second one inside the example prevents the Figma UI prettier from doing the same. The downside is you will see this in the output:

This might be a suitable workaround, though I wouldn't say it's an official solution and could stop working if we were to move to another formatter, for example.

Out of interest, do you use prettier in your codebase? If so, how do you work around this behaviour? If there's some setting we can set to avoid this behaviour we can definitely look to change that.