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

オープン
  • 何か問題がありますか？
#383 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
43/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
静か
技術スタック
html, typescript
領域
developer-experience, tooling

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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
主要言語
TypeScript
スター
1.6k
フォーク
126
30日以内にマージされた PR はありません

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

figma/code-connect のほかの issue

figma/code-connect の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。