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

Đang mở
  • Có gì không ổn?
#383 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
43/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
html, typescript
Lĩnh vực
developer-experience, tooling

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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
Ngôn ngữ chính
TypeScript
Star
1.6k
Fork
126
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của figma/code-connect

Tất cả issue của figma/code-connect

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.