Code Connect v1.1.3

CHANGELOG.md

@@ -1,3 +1,14 @@
+# Code Connect v1.1.3 (11th September 2024)
+
+## Fixed
+
+### HTML
+- Fixed an issue where `imports` was incorrectly not included in the TypeScript interface
+- Added a note in the [documentation](docs/html.md) that HTML support requires `moduleResolution: "NodeNext"`
+
+### React
+- Fixed an issue where `imports` was incorrectly not included in the TypeScript interface (fixes https://github.com/figma/code-connect/issues/159)
+
 # Code Connect v1.1.2 (10th September 2024)
 
 ## Fixed

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@figma/code-connect",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "A tool for connecting your design system components in code with your design system in Figma",
   "keywords": [],
   "author": "Figma",
@@ -36,7 +36,7 @@
   },
   "scripts": {
     "dev": "tsx src/cli.ts",
-    "build": "tsc",
+    "build": "rm -rf dist && npm run typecheck && tsc",
     "build:web": "pnpm build",
     "build:webpack": "webpack --mode production",
     "test": "npm run test:no-coverage -- --coverage",
@@ -57,7 +57,7 @@
     "bundle:cli:mac:arm64": "npm run bundle:cli -- -o bundle-cli/figma-mac-arm64 --target node18-mac-arm64",
     "bundle:cli:win": "npm run bundle:cli -- -o bundle-cli/figma-win --target node18-win-x64",
     "publish:npm": "npm install && npm run build && npm run bundle:npm-readme:prepare && npm publish --access public; npm run bundle:npm-readme:restore",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit -p tsconfig-typecheck.json"
   },
   "devDependencies": {
     "@types/cross-spawn": "^6.0.6",

cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/ReactApiComponent.figmadoc.tsx

@@ -1,4 +1,4 @@
-import figma from '../../..'
+import figma from '../../../../../react/index_react'
 
 import { ReactApiComponent } from './ReactApiComponent'
 

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

@@ -1,5 +1,6 @@
-import { StoryParameters } from '../../..'
+import { StoryParameters } from '../../../../../react/index_react'
 import { StorybookComponent } from './StorybookComponent'
+import React from 'react'
 
 export default {
   title: 'StorybookComponent',

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react'
+import React from 'react'
 
 interface Props {
   disabled: boolean

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

@@ -46,7 +46,7 @@ export default figma.tsx\`<ReactApiComponent />\``,
         figmaNode: 'https://figma.com/test',
         source:
           'https://github.com/figma/code-connect/blob/main/cli/src/connect/__test__/e2e/e2e_parse_command/react_storybook/StorybookComponent.tsx',
-        sourceLocation: { line: 7 },
+        sourceLocation: { line: 8 },
         templateData: { imports: [] },
         component: 'StorybookComponent',
         label: 'Storybook',

cli/src/connect/api.ts

@@ -127,7 +127,10 @@ export interface FigmaConnectLink {
   url: string
 }
 
-export interface FigmaConnectMeta<T = {}, ExampleFnReturnT = unknown> {
+// ExampleFnReturnT is the return type of an example function.
+// ExtraExampleT allows us to pass in an extra type to the `example` property,
+// so that in Storybook, we can use strings to refer to non-hoisted functions
+export interface FigmaConnectMeta<T = {}, ExampleFnReturnT = unknown, ExtraExampleT = never> {
   /**
    * Restricts this figma connect to any variants that fullfill the given filter.
    * The filter is a map of Figma variant names to values. Example:
@@ -140,7 +143,7 @@ export interface FigmaConnectMeta<T = {}, ExampleFnReturnT = unknown> {
 
   /**
    * Prop mappings for the connected component. This is used to map the values of the component's props
-   * to the values that are used in Figma, using helper functions like `Figma.boolean`. For example:
+   * to the values that are used in Figma, using helper functions like `figma.boolean`. For example:
    * ```ts
    * props: {
    *   disabled: figma.boolean('Disabled'),
@@ -160,7 +163,7 @@ export interface FigmaConnectMeta<T = {}, ExampleFnReturnT = unknown> {
    * @param props
    * @returns
    */
-  example?: (props: T) => ExampleFnReturnT
+  example?: ((props: T) => ExampleFnReturnT) | ExtraExampleT
 
   /**
    * A list of links that will display in Figma along with the examples

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

@@ -0,0 +1,6 @@
+import figma, { html } from '../../../index_html'
+
+figma.connect('ui/button', {
+  example: () => html`<my-button>Click me</my-button>`,
+  imports: ['import "@ui/Button"'],
+})

cli/src/html/__test__/parser/parser.test.ts

@@ -65,4 +65,16 @@ describe('HTML Parser', () => {
       async () => await testParse('RegularFunctionExampleWithExtraCode.figma.ts'),
     ).rejects.toThrow('Expected only a tagged template literal as the body of the render function')
   })
+
+  it('handles imports', async () => {
+    const result = await testParse('CustomImports.figma.ts', [])
+
+    expect(result).toMatchObject([
+      {
+        templateData: {
+          imports: ['import "@ui/Button"'],
+        },
+      },
+    ])
+  })
 })

cli/src/html/external.ts

@@ -1,4 +1,3 @@
-import { FigmaConnectMeta } from '../connect/api'
 import {
   booleanType,
   enumType,
@@ -8,11 +7,9 @@ import {
   textContentType,
 } from '../connect/external_types'
 import { HtmlTemplateString } from './template_literal'
+import { HtmlMeta } from './types'
 
-function connectType<P = {}>(
-  _figmaNodeUrl: string,
-  _meta?: FigmaConnectMeta<P, HtmlTemplateString>,
-): void {}
+function connectType<P = {}>(_figmaNodeUrl: string, _meta?: HtmlMeta<P>): void {}
 
 function instanceType(_figmaPropName: string): HtmlTemplateString {
   return {