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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#419 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
72/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript
Área
developer-experience

Línea de trabajo

Empieza con normalizePropName en cli/src/connect/create_template.ts y cli/src/connect/helpers.ts, que usa /#[0-9:]*/g, y compáralo con normalizePropKey en cli/src/connect/property_combinations.ts y getPropName en cli/src/connect/validation.ts, que eliminan solo el sufijo de ID #<digits>:<digits>. Reproduce con los pasos de mock.json del issue. Listo cuando "Step #1#12:1" produzca "Step #1", "C# Snippet#4:5" produzca "C# Snippet" y la colisión de Step desaparezca.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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/

Lenguaje dominante
TypeScript
Estrellas
1.6k
Forks
126
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de figma/code-connect

Todos los issues de figma/code-connect

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.