[Swift] Support nested/compound property mappings (parity with React)

Offen
  • Stimmt etwas nicht?
#376 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Anfängerfreundlichkeit
35/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
swift
Bereich
developer-experience

Rechercherichtung

Start with the SwiftUI Code Connect documentation and the existing @FigmaInstance, @FigmaBoolean, and @FigmaEnum APIs; the issue provides no source files or tests to target. Compare their behavior with the React nested property helpers and determine how Swift should represent optional instances and compound mappings. Done means Swift can express both use cases and produces valid snippets; the issue leaves the API design open.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

feature request

Summary

React Code Connect supports nesting property helpers inside each other — figma.boolean wrapping figma.instance, figma.enum wrapping figma.enum, etc. This enables conditional rendering and compound property mappings. Swift Code Connect has no equivalent for any of these patterns, making it impossible to express common real-world component APIs.

Use Case 1: Conditionally omitting an optional instance

In React, you can conditionally include or omit an instance property (docs):

props: {
  icon: figma.boolean("Has Icon", {
    true: figma.instance("Icon"),
    false: undefined, // omitted from snippet
  }),
}

In Swift, @FigmaInstance with an optional type renders an empty value when no instance is selected, producing invalid code:

struct MyButton_CodeConnect: FigmaConnect {
  @FigmaInstance("Icon") var icon: Icon?

  var body: some View {
    MyButton("Submit", icon: icon) { }
  }
}

When no icon is selected:

MyButton("Submit", icon: ) { }
//                  ^^^^^ empty — not valid code

Expected: The parameter should either be omitted entirely (MyButton("Submit") { }) or render as nil.

This was discussed for React in #71 and #86, where figma.boolean wrapping was the solution.

Use Case 2: Combining multiple Figma properties into one code value

In React, you can nest figma.enum inside figma.enum to map combinations of Figma properties to a single code value (docs):

props: {
  type: figma.enum("Type", {
    "Secondary": figma.enum("Theme", {
      "Light": "secondary",
      "Dark": "secondary-dark",
    }),
    "Tertiary": figma.enum("Theme", {
      "Light": "tertiary",
      "Dark": "tertiary-dark",
    }),
  }),
}

In Swift, @FigmaEnum mappings are flat — each maps a single Figma property independently. There's no way to express "when Type=Secondary AND Theme=Dark, use .secondary(variation: .dark)":

// Forced to ignore Theme entirely:
@FigmaEnum("Type", mapping: [
  "Secondary": CookbookButton.Style.secondary(),
  "Tertiary": CookbookButton.Style.tertiary(),
])
var type: CookbookButton.Style = .primary()

Attempted Workaround: Variant-specific structs

The docs describe variant for mapping one Figma component to different code components (e.g. PrimaryButton vs DangerButton). We attempted using multiple FigmaConnect structs with the same component type but different variant restrictions to work around both use cases above.

This does not work — Figma only ever displays one of the snippets, regardless of which variant is active. The variant property appears to only function when each struct declares a different component type, as shown in the docs.

Proposal

Support nested/compound property mappings in Swift, bringing parity with React's composable helpers.

For optional instances (Use Case 1)

Option A: Automatically omit the parameter when a @FigmaInstance with an optional type resolves to nothing — consistent with how falsy props are omitted in React.

Option B: Add hideDefault to @FigmaInstance, consistent with the existing @FigmaEnum API:

@FigmaInstance("Icon", hideDefault: true) var icon: Icon?

Option C: Allow @FigmaBoolean to wrap @FigmaInstance:

@FigmaBoolean("Has Icon", mapping: [
  true: FigmaInstance("Icon"),
  false: nil,
])
var icon: Icon?
For compound property mappings (Use Case 2)

Allow nesting @FigmaEnum (or similar) inside @FigmaEnum mapping values:

@FigmaEnum("Type", mapping: [
  "Secondary": FigmaEnum("Theme", mapping: [
    "Light": CookbookButton.Style.secondary(),
    "Dark": CookbookButton.Style.secondary(variation: .dark),
  ]),
  "Tertiary": FigmaEnum("Theme", mapping: [
    "Light": CookbookButton.Style.tertiary(),
    "Dark": CookbookButton.Style.tertiary(variation: .dark),
  ]),
])
var type: CookbookButton.Style = .primary()

Environment

  • Code Connect version: 1.4.1
  • Platform: Swift (SwiftUI)
Vorherrschende Sprache
TypeScript
Sterne
1.6k
Forks
126
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus figma/code-connect

Alle Issues in figma/code-connect

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.