normalizePropName strips `#` characters from Figma property names instead of only the `#id` suffix

未关闭 适合新手
  • 哪里不对？
#419 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
72/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
typescript
领域
developer-experience

调研方向

从 cli/src/connect/create_template.ts 和 cli/src/connect/helpers.ts 中的 normalizePropName 开始，它使用 /#[0-9:]*/g，并将其与 cli/src/connect/property_combinations.ts 中的 normalizePropKey 以及 cli/src/connect/validation.ts 中的 getPropName 进行比较，后两者只去除 #<digits>:<digits> 这一 ID 后缀。按照 issue 中的 mock.json 步骤复现。完成标准：“Step #1#12:1”得到“Step #1”，“C# Snippet#4:5”得到“C# Snippet”，并且 Step 的冲突消失。

由索引模型根据 Issue 内容生成。

描述

figma connect create and client.getComponents() strip every # (and any following digits or colons) from Figma component property names instead of removing only the trailing #<digits>:<digits> property ID suffix.

Reproduction
mkdir repro && cd repro
npm init -y
npm install @figma/[email protected]

cat > mock.json << 'EOF'
{
  "document": {
    "id": "0:0",
    "name": "Document",
    "type": "DOCUMENT",
    "children": [{
      "id": "0:1",
      "name": "Page 1",
      "type": "CANVAS",
      "children": [{
        "id": "1:2",
        "name": "Stepper",
        "type": "COMPONENT_SET",
        "componentPropertyDefinitions": {
          "Step #1#12:1": { "type": "BOOLEAN", "defaultValue": true },
          "Step #2#12:2": { "type": "BOOLEAN", "defaultValue": false },
          "C# Snippet#4:5": { "type": "TEXT", "defaultValue": "x" },
          "Heading #1": { "type": "VARIANT", "defaultValue": "Small", "variantOptions": ["Small", "Large"] }
        },
        "children": []
      }]
    }]
  }
}
EOF

FIGMA_ACCESS_TOKEN=test CODE_CONNECT_MOCK_CREATE_API_RESPONSE=mock.json \
  npx figma connect create --skip-update-check "https://www.figma.com/design/abc/Test?node-id=1-2"
cat Stepper.figma.ts
Actual output (Stepper.figma.ts)
const step1 = figma.selectedInstance.getBoolean("Step ")
const step2 = figma.selectedInstance.getBoolean("Step ")
const cSnippet = figma.selectedInstance.getString("C Snippet")
const heading = figma.selectedInstance.getEnum("Heading ", {
  Small: "small",
  Large: "large",
})
Expected output
const step1 = figma.selectedInstance.getBoolean("Step #1")
const step2 = figma.selectedInstance.getBoolean("Step #2")
const cSnippet = figma.selectedInstance.getString("C# Snippet")
const heading1 = figma.selectedInstance.getEnum("Heading #1", {
  Small: "small",
  Large: "large",
})

normalizePropName in cli/src/connect/create_template.ts and cli/src/connect/helpers.ts (also used by client.getComponents() in cli/src/client/figma_client.ts, where "Step #1#12:1" and "Step #2#12:2" collide on "Step ") uses /#[0-9:]*/g (generateCodePropName also uses /#[0-9:]+$/g on variant keys that have no ID suffix), whereas normalizePropKey in cli/src/connect/property_combinations.ts and getPropName in cli/src/connect/validation.ts strip only the #<digits>:<digits> ID suffix.

Versions
  • @figma/code-connect: 2.1.0, main (d856baa)
  • Node.js: v26.13.0

Credit: https://ucsbplse.github.io/

主要语言
TypeScript
星标
1.6k
派生
126
30 天内没有已合并 PR

环境准备

这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

figma/code-connect 的其他 Issue

查看 figma/code-connect 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。