Code Connect v1.3.2

Author: figma-bot

CHANGELOG.md

@@ -1,4 +1,20 @@
-# Code Connect v1.3.1 (TBD)
+# Code Connect v1.3.3 (TBD)
+
+# Code Connect v1.3.2
+
+## Fixed
+
+### General
+- Added support for GitHub Enterprise source links (fixes https://github.com/figma/code-connect/issues/259)
+
+### React
+- Fixed incompatibility issue with React 19 (fixes https://github.com/figma/code-connect/issues/265)
+- Fixed issue with numeric characters in property names
+
+### HTML
+- Allow examples to return strings to support icon IDs (fixes https://github.com/figma/code-connect/issues/252)
+
+# Code Connect v1.3.1
 
 ## Fixed
 

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@figma/code-connect",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "A tool for connecting your design system components in code with your design system in Figma",
   "keywords": [],
   "author": "Figma",
@@ -61,10 +61,10 @@
     "benchmarking:run": "npx tsx ./src/connect/wizard/__test__/prop_mapping/prop_mapping_benchmarking.ts"
   },
   "devDependencies": {
-    "@babel/core": "7.26.0",
-    "@babel/generator": "7.26.2",
-    "@babel/parser": "7.26.0",
-    "@babel/types": "7.26.0",
+    "@babel/core": "7.26.10",
+    "@babel/generator": "7.26.10",
+    "@babel/parser": "7.26.10",
+    "@babel/types": "7.26.10",
 
     "@storybook/csf-tools": "^8.4.7",
     "@types/cross-spawn": "^6.0.6",
@@ -108,7 +108,7 @@
     "ts-morph": "^23.0.0",
     "typescript": "5.5.4",
     "undici": "^5.28.4",
-    "zod": "^3.23.8",
+    "zod": "3.23.8",
     "zod-validation-error": "^3.2.0"
   }
 }

cli/src/connect/__test__/project.test.ts

@@ -110,5 +110,11 @@ describe('Project helper functions', () => {
         getRemoteFileUrl('/path/file.ts', 'https://[email protected]/myorg/myrepo/_git/myrepo'),
       ).toBe('https://dev.azure.com/myorg/myrepo/_git/myrepo?path=/path/file.ts&branch=master')
     })
+
+    it('assumes GitHub-like structure for unknown urls', () => {
+      expect(
+        getRemoteFileUrl('/path/file.ts', 'https://my-custom-domain.com/myorg/myrepo.git'),
+      ).toBe('https://my-custom-domain.com/myorg/myrepo/blob/master/path/file.ts')
+    })
   })
 })

cli/src/connect/api.ts

@@ -4,7 +4,7 @@ export type EnumValue =
   | number
   | symbol
   | undefined
-  | JSX.Element
+  | React.ReactElement
   | Function
   | Object
 
@@ -38,7 +38,7 @@ export interface ConnectedComponent {
    *  example: ({ icon }) => <Button icon={icon}/>,
    * }
    */
-  render<T = unknown>(renderFunction: (props: T) => JSX.Element): JSX.Element
+  render<T = unknown>(renderFunction: (props: T) => React.ReactElement): React.ReactElement
 }
 
 // This contains the base API interface for figma.connect calls across React and

cli/src/connect/parser_common.ts

@@ -222,8 +222,6 @@ export function getReferencedPropsForTemplate({
 }: {
   /** The prop mappings object */
   propMappings: PropMappings | undefined
-  /** The set of referenced props */
-  referencedProps?: Set<string>
   /** The top level node, used for error reporting */
   exp: ts.Node
   /** The source file */

cli/src/connect/project.ts

@@ -523,8 +523,8 @@ export function getRemoteFileUrl(filePath: string, repoURL?: string) {
       return `https://${url}?path=${relativeFilePath}&branch=${defaultBranch}`
     }
   } else {
-    logger.error('Unsupported remote URL', url)
-    return ''
+    logger.debug('Unknown remote URL - assuming GitHub Enterprise', url)
+    return `${url}/blob/${defaultBranch}${relativeFilePath}`
   }
 }
 

cli/src/html/__test__/parser/examples/WrongSignatureNoHtmlTag.figma.ts

@@ -5,6 +5,5 @@ figma.connect('', {
     visible: figma.boolean('Visible'),
     label: figma.string('Label'),
   },
-  // @ts-expect-error
   example: (props) => `<my-component visible=${props.visible}>${props.label}</my-component>`,
 })

cli/src/html/parser.ts

@@ -1,4 +1,4 @@
-import ts, { isTemplateExpression, SyntaxKind } from 'typescript'
+import ts, { isReturnStatement, isTemplateExpression, SyntaxKind } from 'typescript'
 import {
   stripQuotesFromNode,
   parsePropertyOfType,
@@ -218,6 +218,39 @@ export function parseExampleTemplate(
     throw new ParserError(`Expected a body for the render function`, { sourceFile, node: exp })
   }
 
+  // If the body is a string literal, we generate a `figma.value` statement instead, which just
+  // renders the string as-is in code examples
+  if (ts.isStringLiteral(exp.body)) {
+    const printer = ts.createPrinter()
+    if (!exp.body) {
+      throw new ParserError('Expected a function body', {
+        sourceFile: parserContext.sourceFile,
+        node: exp,
+      })
+    }
+    let exampleCode = printer.printNode(ts.EmitHint.Unspecified, exp.body, sourceFile)
+
+    let templateCode = getParsedTemplateHelpersString() + '\n\n'
+
+    templateCode += `const figma = require('figma')\n\n`
+
+    templateCode += getReferencedPropsForTemplate({
+      propMappings,
+      exp,
+      sourceFile,
+    })
+
+    exampleCode = exampleCode.replace(/`/g, '\\`')
+
+    // Body is a string literal, so there aren't any placeholders
+    templateCode += `export default figma.value(${exampleCode})\n`
+
+    return {
+      code: templateCode,
+      nestable: true,
+    }
+  }
+
   const templateNode = getHtmlTaggedTemplateNode(exp.body)
 
   if (!templateNode) {
@@ -389,7 +422,6 @@ export function parseExampleTemplate(
 
   templateCode += getReferencedPropsForTemplate({
     propMappings,
-    referencedProps,
     exp,
     sourceFile,
   })

cli/src/html/types.ts

@@ -1,8 +1,10 @@
 import { FigmaConnectMeta } from '../connect/api'
 import { HtmlTemplateString } from './template_literal'
 
-export type HtmlMeta<P> = Required<Pick<FigmaConnectMeta<P, P, HtmlTemplateString>, 'example'>> &
-  FigmaConnectMeta<P, P, HtmlTemplateString> & {
+export type HtmlMeta<P> = Required<
+  Pick<FigmaConnectMeta<P, P, HtmlTemplateString | string>, 'example'>
+> &
+  FigmaConnectMeta<P, P, HtmlTemplateString | string> & {
     /**
      * A list of import statements that will render in the Code Snippet in Figma.
      */

cli/src/react/index_react.ts

@@ -18,7 +18,7 @@ import { getClient } from '../connect/index_common'
 import { ReactMeta } from './types'
 
 const _client: FigmaConnectClient = getClient()
-const _figma: FigmaConnectAPI<ConnectedComponent, JSX.Element> & {
+const _figma: FigmaConnectAPI<ConnectedComponent, React.ReactElement> & {
   /**
    * Defines a code snippet that displays in Figma when a component is selected. This function has two signatures:
    * - When called with a component reference as the first argument, it will infer metadata such as the import statement