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

Aberta Para iniciantes
  • Algo errado?
#419 0 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
72/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
typescript
Domínio
developer-experience

Direção de pesquisa

Comece por normalizePropName em cli/src/connect/create_template.ts e cli/src/connect/helpers.ts, que usa /#[0-9:]*/g, e compare com normalizePropKey em cli/src/connect/property_combinations.ts e getPropName em cli/src/connect/validation.ts, que removem apenas o sufixo de ID #<digits>:<digits>. Reproduza com os passos do mock.json da issue. Está concluído quando "Step #1#12:1" resultar em "Step #1", "C# Snippet#4:5" resultar em "C# Snippet" e a colisão de Step desaparecer.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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/

Linguagem predominante
TypeScript
Estrelas
1.6k
Forks
126
Nenhum PR com merge em 30d

Preparar o ambiente

Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de figma/code-connect

Todas as issues de figma/code-connect

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.