Support for Web Components

[cscheffauer]

First of - thanks for the great work on this! It would be amazing to also support Web Components (Lit, Stencil) to connect.

[CITguy]

I work on a web component design system.

The way it's built, consumers initialize the entire library before bootstrapping their client side app, so all published custom elements are available everywhere (consumers don't explicitly import/initialize individual components/custom elements).

The output of the React API is very close to what I need. The biggest issue, right now is that I'd need to be able to customize and/or remove the import line above the markup snippet. Additionally, some of our Figma components are implemented via semantic HTML using published CSS classes (no custom elements or components, just CSS).

[tomduncalf-figma]

Hey, thanks for your interest in Code Connect!

We’re planning to add support for more frameworks in the near future. We can’t say yet exactly which frameworks or when, but it’s helpful for us to hear from the community to help us decide where to focus, so please feel free to add a 👍 to this issue if you are also interested in support for web components. I will leave this issue open to track interest.

Code Connect is also designed to be extensible, and the community will be able to create their own plugins to support frameworks and languages which we don’t natively support. More details about how to build these plugins will be coming soon!

It's interesting what you say about the React support being very close to what you would need @CITguy. It sounds like if we had the ability to support plain HTML (i.e. not specify a React component in the figma.connect call) and the ability to manually specify import statements, this might work for you?

[timrombergjakobsson]

+1 one that feature request! Also working on a design system built on web components using Stencil.js! Would be a highly appreciated addition!

[lau-vt]

+1

[ynotdraw]

Hey @tomduncalf-figma!

Thanks for the response on this issue. Like others here, I'm very excited to one day use Code Connect with our Design System being built with Lit Web Components.

It sounds like if we had the ability to support plain HTML (i.e. not specify a React component in the figma.connect call) and the ability to manually specify import statements, this might work for you?

I would say that yeah, this is true! Being able to specify the import statement and then supporting HTML would cover most cases, I believe. Here's an example of a button component in Lit:

import '@namespace/some-design-system/button.js';

// And then usage:

<my-button variant="secondary" disabled>Button</my-button>

A more complex example may be Shoelace's Tree components:

import '@shoelace-style/shoelace/dist/components/tree-item/tree-item.js';
import '@shoelace-style/shoelace/dist/components/tree/tree.js';

<sl-tree>
  <sl-tree-item>
    Deciduous
    <sl-tree-item>Birch</sl-tree-item>
    <sl-tree-item>
      Maple
      <sl-tree-item>Field maple</sl-tree-item>
      <sl-tree-item>Red maple</sl-tree-item>
      <sl-tree-item>Sugar maple</sl-tree-item>
    </sl-tree-item>
    <sl-tree-item>Oak</sl-tree-item>
  </sl-tree-item>

  <sl-tree-item>
    Coniferous
    <sl-tree-item>Cedar</sl-tree-item>
    <sl-tree-item>Pine</sl-tree-item>
    <sl-tree-item>Spruce</sl-tree-item>
  </sl-tree-item>

  <sl-tree-item>
    Non-trees
    <sl-tree-item>Bamboo</sl-tree-item>
    <sl-tree-item>Cactus</sl-tree-item>
    <sl-tree-item>Fern</sl-tree-item>
  </sl-tree-item>
</sl-tree>

There are some concepts that are Lit-specific like property expressions but for most Design Systems, I think supporting string and boolean attributes (HTML!) would be a great start.

[jaasum-msft]

+1 to this I use StencilJS alongside a Storybook instance. The Storybook instance is set up to use Web Components which uses lit. Either using the StencilJS files or the Storybook stories would be great. Thank you!