Nested props not syncing to code

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

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

評価

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

調査の方向性

Start by tracing how Code Connect 1.4.0 resolves figma.nestedProps for the conditional Badge in the supplied IconButton example. Reproduce the issue by changing Content or Variant in Figma and checking whether the generated code updates; done when both nested prop changes appear correctly in the generated code.

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

説明

API question

While integrating Figma with Code Connect, I encountered an issue with prop synchronization for nested components.

I have an IconButton component that conditionally renders a nested Badge component when the Show Badge property is set to true.

The Badge component has the following props:

  • Variant (Standard / Dot)
  • Content (only displayed when Variant is set to Standard)

Issue
When updating any of the Badge props in Figma:

  • Changing the Content value
  • Switching the Variant between Standard and Dot

…the changes are not reflected in the generated code via Code Connect (the changes are reflected in Figma).

Expected behavior
Changes made to the nested Badge component props should be propagated and correctly reflected in the generated code.

Actual behavior
The Badge props remain unchanged in the code, even though they are updated in Figma.

Code Connect version: 1.4.0
OS: Ubuntu

Code snippet:

figma.connect(
  IconButton,
  "figma_url",
  {
    props: {
      disabled: figma.enum("State", {
        Disabled: true,
      }),
      showBadge: figma.boolean("Show badge"),
      badge: figma.boolean("Show badge", {
        true: figma.nestedProps("<Badge>", {
          variant: figma.enum("Variant", {
            Standard: "standard",
            Dot: "dot",
          }),
          badgeContent: figma.enum("Variant", {
            Standard: figma.string("Content"),
            Dot: undefined,
          }),
        }),
        false: { variant: undefined, badgeContent: undefined },
      }),

      icon: figma.nestedProps("<Icon>", {
        name: figma.instance<string>("Icon instance"),
      }),
    },
    example: (props) => (
      <IconButton
        disabled={props.disabled}
        showBadge={props.showBadge}
        badgeContent={props.badge.badgeContent}
      >
        <Icon>{props.icon.name}</Icon>
      </IconButton>
    ),
  },
);
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 を短くまとめたダイジェスト。