Code Connect v1.3.4

Author: figma-bot

CHANGELOG.md

@@ -1,4 +1,10 @@
-# Code Connect v1.3.4 (TBD)
+# Code Connect v1.3.4 (26th June 2025)
+
+### Fixed
+
+# React
+
+- Support getProps inside nestedProps
 
 # Code Connect v1.3.3 (22nd May 2025)
 

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@figma/code-connect",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "A tool for connecting your design system components in code with your design system in Figma",
   "keywords": [],
   "author": "Figma",
@@ -38,7 +38,7 @@
     "dev": "tsx src/cli.ts",
     "build": "rm -rf dist && npm run typecheck && tsc",
     "build:web": "pnpm build",
-    "build:webpack": "cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" webpack --mode production",
+    "build:webpack": "cross-env NODE_OPTIONS=\"--max-old-space-size=8196\" webpack --mode production",
     "test": "npm run test:no-coverage -- --coverage",
     "test:no-coverage": "cross-env NODE_OPTIONS=\"--experimental-vm-modules --no-deprecation --max-old-space-size=10240\" npx jest --logHeapUsage --workerIdleMemoryLimit=1.5G",
     "test:fast": "npm run test -- --testPathIgnorePatterns=template_rendering.test.ts --testPathIgnorePatterns=e2e_parse_command_swift.test.ts --testPathIgnorePatterns=e2e_wizard_swift.test.ts",
@@ -66,7 +66,7 @@
     "@babel/parser": "7.26.10",
     "@babel/types": "7.26.10",
 
-    "@storybook/csf-tools": "^8.4.7",
+    "@storybook/csf-tools": "8.5.1",
     "@types/cross-spawn": "^6.0.6",
     "@types/jest": "^29.5.13",
     "@types/jsdom": "^21.1.7",
@@ -83,7 +83,7 @@
     "ts-jest": "^29.2.5",
     "ts-loader": "^9.5.1",
     "tsx": "^4.11.0",
-    "webpack": "^5.91.0",
+    "webpack": "^5.99.6",
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
@@ -108,7 +108,7 @@
     "ts-morph": "^23.0.0",
     "typescript": "5.5.4",
     "undici": "^5.29.0",
-    "zod": "3.23.8",
-    "zod-validation-error": "3.4.0"
+    "zod": "3.25.58",
+    "zod-validation-error": "^3.2.0"
   }
 }

cli/src/common/tsconfig.ts

@@ -0,0 +1,21 @@
+import fs from 'fs'
+import findUp from 'find-up'
+import path from 'path'
+
+export function findTsConfigPath(dir: string): string | undefined {
+  let tsConfigPath: string | undefined = undefined
+
+  findUp.sync(
+    (currentDir) => {
+      const pathToTry = path.join(currentDir, 'tsconfig.json')
+
+      if (fs.existsSync(pathToTry)) {
+        tsConfigPath = pathToTry
+        return findUp.stop
+      }
+    },
+    { cwd: dir },
+  )
+
+  return tsConfigPath
+}

cli/src/connect/parser_common.ts

@@ -173,7 +173,17 @@ export function visitPropReferencingNode({
   ) {
     // nested notation e.g `props.nested.prop`
     if (ts.isPropertyAccessExpression(node.expression)) {
-      const name = `${node.expression.name.getText()}.${node.name.getText()}`
+      let current: ts.Node = node
+      const parts: string[] = []
+
+      // Build the property name by traversing up the chain
+      while (ts.isPropertyAccessExpression(current)) {
+        parts.unshift(current.name.getText())
+        current = current.expression
+      }
+
+      // Join the parts together to form the full property name
+      const name = parts.join('.')
       return createPropPlaceholder({ name, node })
     }
     const name = node.name.getText()

cli/src/connect/wizard/signature_extraction.ts

@@ -1,7 +1,6 @@
 import path from 'path'
-import fs from 'fs'
-import findUp from 'find-up'
 import { Project, ScriptTarget, SourceFile, Symbol, ts } from 'ts-morph'
+import { findTsConfigPath } from '../../common/tsconfig'
 
 const DEFAULT_COMPONENT = 'DefaultComponent'
 const REACT_INTERFACE_NAMES = ['HTMLAttributes', 'Attributes', 'AriaAttributes', 'DOMAttributes']
@@ -161,21 +160,3 @@ function getPropString(tsMorphProject: Project, prop: Symbol, sourceFile: Source
     ? `?${propTypeString.replace(/undefined \| /g, '')}`
     : propTypeString
 }
-
-function findTsConfigPath(dir: string): string | undefined {
-  let tsConfigPath: string | undefined = undefined
-
-  findUp.sync(
-    (currentDir) => {
-      const pathToTry = path.join(currentDir, 'tsconfig.json')
-
-      if (fs.existsSync(pathToTry)) {
-        tsConfigPath = pathToTry
-        return findUp.stop
-      }
-    },
-    { cwd: dir },
-  )
-
-  return tsConfigPath
-}

cli/src/html/parser_template_helpers.ts

@@ -6,6 +6,13 @@
 
 declare const figma: { html: (template: TemplateStringsArray, ...args: any[]) => string }
 
+export type FCCValue =
+  | string
+  | number
+  | boolean
+  | undefined
+  | ReturnType<typeof _fcc_identifier | typeof _fcc_object | typeof _fcc_templateString>
+
 export function _fcc_templateString($value: string) {
   return {
     $value,
@@ -21,6 +28,13 @@ export function _fcc_object($value: Record<string, any>) {
   } as const
 }
 
+export function _fcc_identifier($value: string) {
+  return {
+    $value,
+    $type: 'identifier',
+  } as const
+}
+
 /**
  * Render a value to HTML, following sensible rules according to the type.
  *
@@ -54,7 +68,7 @@ function _fcc_renderHtmlValue(value: any): string {
  * @param name The name of the attribute
  * @param value The value of the attribute
  */
-function _fcc_renderHtmlAttribute(name: string, value: any) {
+function _fcc_renderHtmlAttribute(name: string, value: FCCValue) {
   // figma.boolean returns undefined instead of false in some cases
   if (typeof value === 'undefined') {
     return ''
@@ -66,14 +80,22 @@ function _fcc_renderHtmlAttribute(name: string, value: any) {
     }
   } else if (typeof value === 'string' || typeof value === 'number' || typeof value === 'bigint') {
     return `${name}="${value.toString().replaceAll('\n', '\\n').replaceAll('"', '\\"')}"`
+  } else if (value.$type === 'identifier') {
+    return `${name}="${value.$value}"`
   } else {
     // TODO make this show a proper error in the UI
     return `${name}="Code Connect Error: Unsupported type '${typeof value}' for attribute"`
   }
 }
 
 export function getParsedTemplateHelpersString() {
-  return [_fcc_templateString, _fcc_object, _fcc_renderHtmlValue, _fcc_renderHtmlAttribute]
+  return [
+    _fcc_templateString,
+    _fcc_object,
+    _fcc_renderHtmlValue,
+    _fcc_renderHtmlAttribute,
+    _fcc_identifier,
+  ]
     .map((fn) => fn.toString())
     .join('\n')
 }