Code Connect throws errors in Figma UI after validating with the CLI

Abierto
  • ¿Algo no está bien?
#383 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
43/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
html, typescript
Área
developer-experience, tooling

Línea de trabajo

Start by reading the Code Connect CLI validation and upload flow for HTML examples, then trace how published examples are interpreted in the Figma UI. Compare the reported figma.slot footer case with the banner's boolean and enum props; the payload does not identify relevant source files or tests. Done means both examples display correctly in Figma or provide actionable errors that explain how to fix the reported cases.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

API question

Code connect seems to throw errors after the CLI has validated it's files and provides no clear directions on what is happening or ways to resolve them. Here's my figma.config.json file.

{
  "codeConnect": {
    "include": ["src/components/**/*", "src/components/**/*.figma.*"],
    "parser": "html",
    "importPaths": {
      "components/**/*": "components"
    },
    "paths": {
      "components": ["src/components"]
    },
    "documentUrlSubstitutions": {}
  }
}

Both examples were published with the publish command and are web components.

/packages/components/src/components/blz-card/blz-card.figma.ts
/packages/components/src/components/blz-banner/blz-banner.figma.ts

Validating Code Connect files...
All Code Connect files are valid (12873ms)
Uploading to Figma...
uploading to https://api.figma.com/v1/code_connect
Successfully uploaded to Figma, for Web Components:
  • Code Connect CLI version: v1.4.2
  • Operating system: MacOS
Card

Here's the *figma.ts version of my card component:

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

figma.connect(
  'https://www.figma.com/design/XXX',
  {
    props: {
      orientation: figma.enum('Orientation', {
        Vertical: 'vertical',
        Horizontal: 'horizontal',
      }),
      order: figma.enum('Order', {Default: 'default', Reverse: 'reverse'}),
      backplate: figma.enum('↳ Backplate', {True: 'true', False: 'false'}),
      media: figma.children('.Card/Media'),
      footer: figma.slot('↳ 🧩 Footer'),
    },
    imports: [
      "import '@blizzard/forge-components/components/blz-card/blz-card.js'",
    ],
    example: props =>
      html`<blz-card
        orientation="${props.orientation}"
        order="${props.order}"
        backplate="${props.backplate}"
      >
        <div slot="media">${props.media}</div>
        <div slot="footer">${props.footer}</div>
      </blz-card>`,
  },
);

And the structure in Figma:

Image

For some reason I get an error on Footer despite the names matching:

Image
Banner

In the case of my banner component the entire code connect samples errors.

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

figma.connect(
  'https://www.figma.com/design/XXX',
  {
    props: {
      'auto-gradient': figma.boolean('Auto Gradient'),
      height: figma.enum('Height', {"Fixed":"fixed","Flex":"flex"}),
    },
    imports: ["import '@blizzard/forge-components/components/blz-banner/blz-banner.js'"],
    example: props =>
      html`<blz-banner auto-gradient="${props['auto-gradient']}" height="${props.height}">
      </blz-banner>`,
  },
);
Image
Lenguaje dominante
TypeScript
Estrellas
1.6k
Forks
126
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de figma/code-connect

Todos los issues de figma/code-connect

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.