Code Connect v1.3.11

Author: figma-bot

CHANGELOG.md

@@ -1,10 +1,22 @@
+# Code Connect v1.3.12 (TBD)
+
+## Fixed
+
+### General
+
+# Code Connect v1.3.11 (26th November 2025)
+
+### Swift
+
+- Fixed a corner case where the swift parser generated invalid code-connect code.
+
 # Code Connect v1.3.10 (19th November 2025)
 
 ## Fixed
 
 ### General
 
-- Updated glob dependency to 11.0.4 to fix security vulnerability (https://github.com/figma/figma/pull/623532)
+- Updated glob dependency to 11.0.4 to fix security vulnerability
 
 # Code Connect v1.3.9 (14th November 2025)
 

Package.resolved

@@ -85,19 +85,19 @@
 "@aws-sdk/util-utf8-browser" = "3.664.0"
 "@aws-sdk/util-waiter" = "3.374.0"
 "@aws-sdk/xml-builder" = "3.664.0"
-"@babel/core" = "7.28.0"
-"@babel/code-frame" = "7.27.1"
-"@babel/generator" = "7.28.0"
-"@babel/helpers" = "7.28.2"
-"@babel/helper-string-parser" = "7.28.2"
-"@babel/helper-validator-identifier" = "7.28.2"
-"@babel/parser" = "7.28.0"
-"@babel/preset-env" = "7.28.0"
-"@babel/runtime" = "7.28.2"
-"@babel/standalone" = "7.28.2"
-"@babel/template" = "7.27.2"
-"@babel/traverse" = "7.28.0"
-"@babel/types" = "7.28.2"
+"@babel/core" = "7.28.5"
+"@babel/code-frame" = "7.28.5"
+"@babel/generator" = "7.28.5"
+"@babel/helpers" = "7.28.4"
+"@babel/helper-string-parser" = "7.28.5"
+"@babel/helper-validator-identifier" = "7.28.5"
+"@babel/parser" = "7.28.5"
+"@babel/preset-env" = "7.28.5"
+"@babel/runtime" = "7.28.4"
+"@babel/standalone" = "7.28.5"
+"@babel/template" = "7.28.5"
+"@babel/traverse" = "7.28.5"
+"@babel/types" = "7.28.5"
 "eslint" = "^9.36.0"
 "eslint-config-prettier" = "^9.1.0"
 "eslint-plugin-import" = "^2.32.0"
@@ -106,19 +106,22 @@
 "eslint-plugin-react-hooks" = "^5.2.0"
 "eslint-plugin-simple-import-sort" = "^12.1.1"
 "eslint-plugin-unused-imports" = "^4.1.4"
+"eslint-import-resolver-typescript" = "^4.4.4"
 "eslint-plugin-testing-library" = "^7.12.0"
 "eslint-plugin-workspaces" = "^0.11.0"
 "@eslint/js" = "^9.23.0"
 "@eslint/config-helpers" = "^0.4.0"
-"@typescript-eslint/eslint-plugin" = "8.45.0"
-"@typescript-eslint/parser" = "8.45.0"
-"@typescript-eslint/rule-tester" = "8.45.0"
-"@typescript-eslint/scope-manager" = "8.45.0"
-"@typescript-eslint/types" = "8.45.0"
-"@typescript-eslint/typescript-estree" = "8.45.0"
-"@typescript-eslint/utils" = "8.45.0"
-"@typescript-eslint/visitor-keys" = "8.45.0"
-"typescript-eslint" = "8.45.0"
+"@typescript-eslint/eslint-plugin" = "8.47.0"
+"@typescript-eslint/parser" = "8.47.0"
+"@typescript-eslint/project-service" = "8.47.0"
+"@typescript-eslint/rule-tester" = "8.47.0"
+"@typescript-eslint/scope-manager" = "8.47.0"
+"@typescript-eslint/tsconfig-utils" = "8.47.0"
+"@typescript-eslint/types" = "8.47.0"
+"@typescript-eslint/typescript-estree" = "8.47.0"
+"@typescript-eslint/utils" = "8.47.0"
+"@typescript-eslint/visitor-keys" = "8.47.0"
+"typescript-eslint" = "8.47.0"
 "@jest/core" = "^29.7.0"
 "@jest/create-cache-key-function" = "^29.7.0"
 "@jest/fake-timers" = "^29.7.0"
@@ -177,6 +180,8 @@
 "webpack" = "5.91.0"
 "webpack-cli" = "5.1.4"
 "@bazel/runfiles" = "^6.3.1"
+"@figma/plugin-typings" = "1.121.0"
+"@figma/widget-typings" = "1.12.1"
 "@modelcontextprotocol/sdk" = "1.18.0"
 "@types/mocha" = "10.0.10"
 "@types/node" = "22.17.2"

cli/npm_catalog.toml

@@ -1,6 +1,6 @@
 {
   "name": "@figma/code-connect",
-  "version": "1.3.10",
+  "version": "1.3.11",
   "description": "A tool for connecting your design system components in code with your design system in Figma",
   "keywords": [],
   "author": "Figma",
@@ -63,10 +63,10 @@
     "benchmarking:run": "npx tsx ./src/connect/wizard/__test__/prop_mapping/prop_mapping_benchmarking.ts"
   },
   "devDependencies": {
-    "@babel/core": "7.28.0",
-    "@babel/generator": "7.28.0",
-    "@babel/parser": "7.28.0",
-    "@babel/types": "7.28.2",
+    "@babel/core": "7.28.5",
+    "@babel/generator": "7.28.5",
+    "@babel/parser": "7.28.5",
+    "@babel/types": "7.28.5",
 
     "@storybook/csf-tools": "8.5.1",
     "@types/cross-spawn": "^6.0.6",

cli/package.json

@@ -0,0 +1,103 @@
+import Foundation
+import XCTest
+
+@testable import CodeConnectParser
+
+class CodeConnectParserInvalidJSTest: XCTestCase {
+    func testDoubleWrappedTemplateVariables() throws {
+        // Test that double wrapped template variables are fixed
+        // Before this fix, the template would be rendered as ${${foo}} instead of ${foo}, which is invalid JavaScript
+        // happens because the element _before_ it has hideDefault = true, so the template writer adds an extra wrapper.
+        let expectedDoc = CodeConnectDoc(
+            figmaNode: "https://figma.com/file/abc/Test?node-id=123",
+            source: "See below",
+            sourceLocation: CodeConnectDoc.SourceLocation(line: 141),
+            component: "ListRowChevron",
+            variant: [:],
+            template: JSTemplateTestHelpers.templateWithInitialBoilerplate("""
+            const disabled = figma.properties.enum('State', {
+            'Active': false,
+            'Disabled': true,
+            'Hover': false,
+            'Idle': false
+            })
+            const showDivider = figma.properties.boolean('Show divider', {
+            'true': true,
+            'false': false
+            })
+            const size = figma.properties.enum('Size', {
+            'Large': '.large',
+            'Medium': '.medium',
+            'Small': '.small'
+            })
+            const title = figma.properties.string('Title')
+            export default figma.swift`ListRowChevron {\n    Text(\"${title.replace(/\\n/g, \'\\\\n\')}\")\n}\n.size(${size})\n.paddingHorizontal(paddingHorizontal)${showDivider === false ? undefined : `\\n.divider(${showDivider})`}\n.disabled(${disabled})`
+            """),
+            templateData: TemplateData(
+                props: [
+                    "showDivider": .propMap(PropMap(
+                        kind: .boolean,
+                        args: PropMapArgs(
+                            figmaPropName: "Show divider",
+                            valueMapping: nil
+                        ),
+                        hideDefault: true,
+                        defaultValue: .bool(false)
+                    )),
+                    "title": .propMap(PropMap(
+                        kind: .string,
+                        args: PropMapArgs(
+                            figmaPropName: "Title",
+                            valueMapping: nil
+                        ),
+                        hideDefault: false,
+                        defaultValue: .string("\"Title\"")
+                    )),
+                    "disabled": .propMap(PropMap(
+                        kind: .enumerable,
+                        args: PropMapArgs(
+                            figmaPropName: "State",
+                            valueMapping: [
+                                .string("Idle"): .bool(false),
+                                .string("Active"): .bool(false),
+                                .string("Disabled"): .bool(true),
+                                .string("Hover"): .bool(false)
+                            ]
+                        ),
+                        hideDefault: false,
+                        defaultValue: .bool(false)
+                    )),
+                    "size": .propMap(PropMap(
+                        kind: .enumerable,
+                        args: PropMapArgs(
+                            figmaPropName: "Size",
+                            valueMapping: [
+                                .string("Small"): .string(".small"),
+                                .string("Large"): .string(".large"),
+                                .string("Medium"): .string(".medium")
+                            ]
+                        ),
+                        hideDefault: false,
+                        defaultValue: .string(".small")
+                    ))
+                ],
+                imports: [],
+                nestable: true
+            ),
+            functionName: "ListRowChevron_connection"
+        )
+
+        let url = try XCTUnwrap(Bundle.module.url(forResource: "Samples.figma", withExtension: "test"))
+        var figmadoc = try XCTUnwrap(CodeConnectParser.createCodeConnects([url], importMapping: [:]).docs.first(where: {
+            $0.component == "ListRowChevron"
+        }))
+
+        // The source is not easily predictable as it depends on the location on disk,
+        // so instead check it looks sensible, then set the doc's source to match the
+        // expectation so we can still XCTAssertEqual instead of manually testing each field
+        XCTAssertTrue(figmadoc.source.hasSuffix("/Samples.figma.test"))
+        figmadoc.source = expectedDoc.source
+
+        XCTAssertEqual(figmadoc, expectedDoc)
+    }
+}

swiftui/Tests/CodeConnectParserTest/CodeConnectParserInvalidJSTest.swift

@@ -39,18 +39,18 @@ struct FigmaButton_doc: FigmaConnect {
         ]
     )
     var buttonVariant: ButtonVariant = .primary
-    
+
     var variant = ["Has Icon": true]
 
     @FigmaString("🎛️ Label")
     var title: String = "Submit"
 
     @FigmaBoolean("🎛️ Disabled")
     var disabled: Bool = false
-    
+
     @FigmaBoolean("Is Destructive", mapping: [true: .destructive, false: .none])
     var role: ButtonRole = .none
-    
+
     @FigmaInstance("Icon")
     var icon: Icon? = nil
 
@@ -112,18 +112,63 @@ struct LegacyFigmaButton_doc: FigmaConnect {
 struct NonNestable: FigmaConnect {
     let component = AnyView.self
     let figmaNodeUrl: String = "https://figma.com/file/abc/Test?node-id=123"
-    
+
     var body: some View {
         @State var isOn = true
-        
+
         ElementWithBinding(isOn: $isOn)
     }
 }
 
 struct ComponentlessDefinition: FigmaConnect {
     let figmaNodeUrl: String = "https://figma.com/file/abc/Test?node-id=123"
-    
+
     var body: some View {
         SomeElement()
     }
 }
+
+enum ListRowSize {
+    case small
+    case medium
+    case large
+}
+
+enum ListRowPaddingHorizontal {
+    case medium
+}
+
+struct ListRowChevron: View {
+    var body: some View {
+        Text("List Row")
+    }
+}
+
+struct ListRowChevron_connection: FigmaConnect {
+    let component = ListRowChevron.self
+    let figmaNodeUrl: String = "https://figma.com/file/abc/Test?node-id=123"
+
+    @FigmaBoolean("Show divider", hideDefault: true)
+    var showDivider: Bool = false
+
+    @FigmaString("Title")
+    var title: String = "Title"
+
+    @FigmaEnum("Size", mapping: ["Small": .small, "Medium": .medium, "Large": .large])
+    var size: ListRowSize = .small
+
+    @FigmaEnum("State", mapping: ["Idle": false, "Hover": false, "Active": false, "Disabled": true])
+    var disabled: Bool = false
+
+    var paddingHorizontal: ListRowPaddingHorizontal = .medium
+
+    var body: some View {
+        ListRowChevron {
+            Text(title)
+        }
+        .size(self.size)
+        .paddingHorizontal(self.paddingHorizontal)
+        .divider(self.showDivider)
+        .disabled(self.disabled)
+    }
+}

swiftui/Tests/CodeConnectParserTest/Samples.figma.test

@@ -242,18 +242,39 @@ struct CodeConnectTemplateWriter {
             newSyntaxTree = rewriter.visit(newSyntaxTree)
         }
 
-        let rewrittenCode = newSyntaxTree.description.replaceConditionalTemplates(
+        var rewrittenCode = newSyntaxTree.description.replaceConditionalTemplates(
             conditionalTemplates: rewriter.conditionalTemplates
         ).replaceNestedInstancePlaceholders(
             nestedInstanceCalls: rewriter.nestedInstanceCalls
         ).trimmingCharacters(in: .whitespacesAndNewlines)
-        
+
+        // Fix double-wrapped template variables like ${${foo}} -> ${foo}
+        // This happens when ExprSyntax(stringLiteral: "${foo}") adds an extra wrapper (foo was already visited)
+        rewrittenCode = rewrittenCode.fixDoubleWrappedTemplateVariables()
+
         return "export default figma.swift`\(rewrittenCode)`"
     }
 }
 
 fileprivate extension String {
-    
+    // Fix double-wrapped template variables like ${${foo}} -> ${foo}
+    func fixDoubleWrappedTemplateVariables() -> String {
+        var result = self
+        var changed = true
+        while changed {
+            let before = result
+            // Match ${${ followed by anything that's not }, then }}
+            if let range = result.range(of: #"\$\{\$\{([^}]+)\}\}"#, options: .regularExpression) {
+                let match = String(result[range])
+                // Extract the variable name from ${${VAR}}
+                let varName = match.dropFirst(4).dropLast(2)  // Remove ${ at start and }} at end, leaving ${VAR
+                result.replaceSubrange(range, with: "${\(varName)}")
+            }
+            changed = (result != before)
+        }
+        return result
+    }
+
     /// In order to replace `figmaApply` and `hideDefault` calls, we use string substitution to find replacement strings and
     /// Insert the appropriate ternary expression.
     ///