Code Connect v1.3.3

Author: figma-bot

CHANGELOG.md

@@ -1,6 +1,18 @@
-# Code Connect v1.3.3 (TBD)
+# Code Connect v1.3.4 (TBD)
 
-# Code Connect v1.3.2
+# Code Connect v1.3.3 (22nd May 2025)
+
+## Features
+
+### Compose
+- Enhanced `--verbose` command to output detailed stacktrace.
+
+## Fixed
+
+### General
+- Bumped Undici version to address security issue
+
+# Code Connect v1.3.2 (4th April 2025)
 
 ## Fixed
 
@@ -14,7 +26,7 @@
 ### HTML
 - Allow examples to return strings to support icon IDs (fixes https://github.com/figma/code-connect/issues/252)
 
-# Code Connect v1.3.1
+# Code Connect v1.3.1 (14th February 2025)
 
 ## Fixed
 

cli/jest.config.js

@@ -5,7 +5,7 @@ module.exports = {
   testPathIgnorePatterns: ['/dist/'],
 
   // Some of these tests can be long running, e.g. e2e ones, so set the timeout higher globally
-  testTimeout: 15000,
+  testTimeout: 20000,
 
   modulePathIgnorePatterns: [
     // Ignore changes to figma.config.json and figma.config.json.backup otherwise

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@figma/code-connect",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "A tool for connecting your design system components in code with your design system in Figma",
   "keywords": [],
   "author": "Figma",
@@ -107,8 +107,8 @@
     "strip-ansi": "^6.0.0",
     "ts-morph": "^23.0.0",
     "typescript": "5.5.4",
-    "undici": "^5.28.4",
+    "undici": "^5.29.0",
     "zod": "3.23.8",
-    "zod-validation-error": "^3.2.0"
+    "zod-validation-error": "3.4.0"
   }
 }

cli/src/commands/connect.ts

@@ -242,6 +242,7 @@ export async function getCodeConnectObjects(
       mode: 'PARSE',
       paths: projectInfo.files,
       config: projectInfo.config,
+      verbose: cmd.verbose,
     }
 
     try {
@@ -268,10 +269,16 @@ export async function getCodeConnectObjects(
         },
       }))
     } catch (e) {
-      // zod-validation-error formats the error message into a readable format
-      exitWithError(
-        `Error returned from parser: ${fromError(e)}. Try re-running the command with --verbose for more information.`,
-      )
+      if (cmd.verbose) {
+        console.trace(e)
+
+        // Don't say to enable verbose if the user has already enabled it.
+        exitWithError(`Error calling parser: ${e}.`)
+      } else {
+        exitWithError(
+          `Error returned from parser: ${fromError(e)}. Try re-running the command with --verbose for more information.`,
+        )
+      }
     }
   }
 
@@ -543,5 +550,6 @@ async function handleCreate(nodeUrl: string, cmd: BaseCommand) {
     outFile: cmd.outFile,
     outDir: cmd.outDir,
     projectInfo,
+    cmd,
   })
 }

cli/src/connect/__test__/e2e/e2e_create_command.test.ts

@@ -78,7 +78,12 @@ Received: ${JSON.stringify({
             },
           },
         },
-        config: { parser: '__unit_test__', include: ['*.test'], exclude: ['Excluded.test'] },
+        config: {
+          parser: '__unit_test__',
+          include: ['*.test'],
+          exclude: ['Excluded.test'],
+        },
+        verbose: true,
       })}
 Success from parser!
 Code Connect files generated successfully:

cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/StorybookComponent.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react'
 import React from 'react'
 
-interface Props {
+export interface Props {
   disabled: boolean
   children: ReactNode
 }

cli/src/connect/create.ts

@@ -19,12 +19,15 @@ import {
 import { fromError } from 'zod-validation-error'
 import { createHtmlCodeConnect } from '../html/create'
 import { isFetchError, request } from '../common/fetch'
+import { BaseCommand } from '../commands/connect'
+
 interface GenerateDocsArgs {
   accessToken: string
   figmaNodeUrl: string
   outFile: string
   outDir: string
   projectInfo: ProjectInfo
+  cmd: BaseCommand
 }
 
 export function normalizeComponentName(name: string) {
@@ -43,6 +46,7 @@ export async function createCodeConnectFromUrl({
   outFile,
   outDir,
   projectInfo,
+  cmd,
 }: GenerateDocsArgs) {
   try {
     const fileKey = parseFileKey(figmaNodeUrl)
@@ -122,6 +126,7 @@ export async function createCodeConnectFromUrl({
             destinationFile: outFile,
             component: componentPayload,
             config: projectInfo.config,
+            verbose: cmd.verbose,
           }
           const stdout = await callParser(
             // We use `as` because the React parser makes the types difficult

cli/src/connect/parser_executable_types.ts

@@ -12,6 +12,7 @@ export type ParseRequestPayload = {
   // Each parser's configuration is separate and can take any shape, though we
   // will recommend using the same naming for common concepts like "importPaths".
   config: Record<string, any>
+  verbose?: boolean
 }
 
 const FigmaConnectLink = z.object({
@@ -193,6 +194,7 @@ export type CreateRequestPayload = {
   // Each parser's configuration is separate and can take any shape, though we
   // will recommend using the same naming for common concepts like "importPaths".
   config: Record<string, any>
+  verbose?: boolean
 }
 
 export type CreateRequestPayloadMulti = {

cli/src/connect/parser_executables.ts

@@ -38,10 +38,11 @@ const FIRST_PARTY_PARSERS: Record<CodeConnectExecutableParser, ParserInfo> = {
     command: async (cwd, config, mode) => {
       const gradlewPath = await getGradleWrapperPath(cwd, (config as any).gradleWrapperPath)
       const gradleExecutableInvocation = getGradleWrapperExecutablePath(gradlewPath)
+      const verboseFlags = (config as any).verbose ? ' --stacktrace' : ''
       if (mode === 'CREATE') {
-        return `${gradleExecutableInvocation} -p ${gradlewPath} createCodeConnect -PfilePath=${temporaryIOFilePath} -q`
+        return `${gradleExecutableInvocation} -p ${gradlewPath} createCodeConnect -PfilePath=${temporaryIOFilePath}${verboseFlags}`
       } else {
-        return `${gradleExecutableInvocation} -p ${gradlewPath} parseCodeConnect -PfilePath=${temporaryIOFilePath} -q`
+        return `${gradleExecutableInvocation} -p ${gradlewPath} parseCodeConnect -PfilePath=${temporaryIOFilePath}${verboseFlags}`
       }
     },
     temporaryIOFilePath: temporaryIOFilePath,
@@ -82,7 +83,11 @@ export async function callParser(
   return new Promise<object>(async (resolve, reject) => {
     try {
       const parser = getParser(config)
-      const command = await parser.command(cwd, config, payload.mode)
+      const configWithVerbose = {
+        ...config,
+        verbose: (payload as any).verbose,
+      }
+      const command = await parser.command(cwd, configWithVerbose, payload.mode)
       if (parser.temporaryIOFilePath) {
         fs.mkdirSync(path.dirname(parser.temporaryIOFilePath), { recursive: true })
         fs.writeFileSync(temporaryIOFilePath, JSON.stringify(payload))
@@ -162,9 +167,16 @@ export async function callParser(
         child.stdin.end()
       }
     } catch (e) {
-      exitWithError(
-        `Error calling parser: ${e}. Try re-running the command with --verbose for more information.`,
-      )
+      if ((payload as any).verbose) {
+        console.trace(e)
+
+        // Don't say to enable verbose if the user has already enabled it.
+        exitWithError(`Error calling parser: ${e}.`)
+      } else {
+        exitWithError(
+          `Error calling parser: ${e}. Try re-running the command with --verbose for more information.`,
+        )
+      }
     }
   })
 }

cli/src/storybook/__test__/examples/ArrowComponent.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react'
 import React from 'react'
 
-interface Props {
+export interface Props {
   disabled: boolean
   children: ReactNode
 }