@figma/code-connect 1.4.1 → 1.4.3

package/README.md

@@ -2,7 +2,7 @@
 
 Code Connect is a tool for connecting your design system components in code with your design system in Figma. When using Code Connect, Figma's Dev Mode will display true-to-production code snippets from your design system instead of autogenerated code examples. In addition to connecting component definitions, Code Connect also supports mapping properties from code to Figma enabling dynamic and correct examples. This can be useful for when you have an existing design system and are looking to drive consistent and correct adoption of that design system across design and engineering.
 
-Code Connect is easy to set up, easy to maintain, type-safe, and extensible. Out of the box Code Connect comes with support for React (and React Native), Storybook, HTML (e.g. Web Components, Angular and Vue), SwiftUI and Jetpack Compose.
+Code Connect is easy to set up, easy to maintain, type-safe, and extensible. The easiest way to get started is using **template files** — a framework-agnostic way to represent any code snippet, giving you full control over how components appear in Dev Mode. Code Connect also includes framework-specific integrations for React (and React Native), Storybook, HTML (e.g. Web Components, Angular and Vue), SwiftUI and Jetpack Compose.
 
 ![image](https://static.figma.com/uploads/d98e747613e01685d6a0f9dd3e2dcd022ff289c0.png)
 
@@ -13,11 +13,11 @@ Code Connect is easy to set up, easy to maintain, type-safe, and extensible. Out
 
 Use Figma’s Code Connect to make your design system easily accessible to your developers and create a shared source of truth for both the design and code elements.
 
-Our Getting Started guide will walk you through the process of setting up Code Connect, using our interactive setup to automatically map components, and publishing your first components. **[Code Connect Documentation →](https://developers.figma.com/docs/code-connect/)**
+Our Getting Started guide will walk you through setting up Code Connect and publishing your first components using template files. **[Code Connect Documentation →](https://developers.figma.com/docs/code-connect/)**
 
-Code Connect comes with support for different frameworks and languages. Our integration guides will walk you through the process of refining your components by mapping props and variants for:
+For framework-specific prop mapping and variant support, see the integration guides for:
 
 - **[React (and React Native) →](https://www.figma.com/code-connect-docs/react)**
 - **[HTML (e.g. Web Components, Angular and Vue) →](https://www.figma.com/code-connect-docs/html)**
 - **[SwiftUI →](https://www.figma.com/code-connect-docs/swiftui)**
-- **[Jetpack Compose →](https://www.figma.com/code-connect-docs/compose)**.
+- **[Jetpack Compose →](https://www.figma.com/code-connect-docs/compose)**

package/dist/commands/connect.d.ts

@@ -1,5 +1,5 @@
 import * as commander from 'commander';
-import { CodeConnectConfig, ProjectInfo } from '../connect/project';
+import { ProjectInfo } from '../connect/project';
 import { CodeConnectJSON } from '../connect/figma_connect';
 export type BaseCommand = commander.Command & {
     token: string;
@@ -9,17 +9,19 @@ export type BaseCommand = commander.Command & {
     config: string;
     dryRun: boolean;
     dir: string;
+    file: string;
     jsonFile: string;
     skipUpdateCheck: boolean;
     exitOnUnreadableFiles: boolean;
     apiUrl?: string;
-    removeProps?: boolean;
+    includeProps?: boolean;
 };
 export declare function addConnectCommandToProgram(program: commander.Command): void;
 export declare function getAccessToken(cmd: BaseCommand): string;
+export declare function getAccessTokenOrExit(cmd: BaseCommand): string;
 export declare function getDir(cmd: BaseCommand): string;
-export declare function parseRawFile(filePath: string, label: string | undefined, config?: CodeConnectConfig, dir?: string): CodeConnectJSON;
+export declare function setupHandler(cmd: BaseCommand): void;
 export declare function getCodeConnectObjects(cmd: BaseCommand & {
     label?: string;
-}, projectInfo: ProjectInfo, silent?: boolean, skipTemplateHelpers?: boolean): Promise<CodeConnectJSON[]>;
+}, projectInfo: ProjectInfo, silent?: boolean, isForMigration?: boolean): Promise<CodeConnectJSON[]>;
 //# sourceMappingURL=connect.d.ts.map

package/dist/commands/connect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"connect.d.ts","sourceRoot":"","sources":["../../src/commands/connect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,WAAW,CAAA;AAKtC,OAAO,EACL,iBAAiB,EAIjB,WAAW,EAKZ,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AA0B1D,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,GAAG;IAC5C,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,OAAO,CAAA;IACf,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,eAAe,EAAE,OAAO,CAAA;IACxB,qBAAqB,EAAE,OAAO,CAAA;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AA0BD,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,QAiEpE;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,WAAW,UAE9C;AAcD,wBAAgB,MAAM,CAAC,GAAG,EAAE,WAAW,UAEtC;AA0CD,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,MAAM,CAAC,EAAE,iBAAiB,EAC1B,GAAG,CAAC,EAAE,MAAM,GACX,eAAe,CAoEjB;AAED,wBAAsB,qBAAqB,CACzC,GAAG,EAAE,WAAW,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,EACrC,WAAW,EAAE,WAAW,EACxB,MAAM,UAAQ,EACd,mBAAmB,UAAQ,GAC1B,OAAO,CAAC,eAAe,EAAE,CAAC,CAkH5B"}
+{"version":3,"file":"connect.d.ts","sourceRoot":"","sources":["../../src/commands/connect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,WAAW,CAAA;AAKtC,OAAO,EAKL,WAAW,EAKZ,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAgC1D,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,GAAG;IAC5C,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,OAAO,CAAA;IACf,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,eAAe,EAAE,OAAO,CAAA;IACxB,qBAAqB,EAAE,OAAO,CAAA;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAA;AA2BD,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,QA4EpE;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,WAAW,UAE9C;AAED,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,WAAW,UAUpD;AAED,wBAAgB,MAAM,CAAC,GAAG,EAAE,WAAW,UAEtC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,WAAW,QAI5C;AAkCD,wBAAsB,qBAAqB,CACzC,GAAG,EAAE,WAAW,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,EACrC,WAAW,EAAE,WAAW,EACxB,MAAM,UAAQ,EACd,cAAc,UAAQ,GACrB,OAAO,CAAC,eAAe,EAAE,CAAC,CA6H5B"}

package/dist/commands/connect.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addConnectCommandToProgram = addConnectCommandToProgram;
 exports.getAccessToken = getAccessToken;
+exports.getAccessTokenOrExit = getAccessTokenOrExit;
 exports.getDir = getDir;
-exports.parseRawFile = parseRawFile;
+exports.setupHandler = setupHandler;
 exports.getCodeConnectObjects = getCodeConnectObjects;
 const fs_1 = __importDefault(require("fs"));
 const upload_1 = require("../connect/upload");
@@ -23,11 +24,13 @@ const parser_executable_types_1 = require("../connect/parser_executable_types");
 const path_1 = __importDefault(require("path"));
 const updates_1 = require("../common/updates");
 const helpers_1 = require("../connect/helpers");
+const filter_project_info_1 = require("./filter_project_info");
 const parser_1 = require("../html/parser");
 const parser_common_1 = require("../connect/parser_common");
 const parser_2 = require("../react/parser");
 const label_language_mapping_1 = require("../connect/label_language_mapping");
 const migration_helpers_1 = require("../connect/migration_helpers");
+const raw_templates_1 = require("../connect/raw_templates");
 const run_wizard_2 = require("../connect/wizard/run_wizard");
 const project_2 = require("../connect/project");
 function addBaseCommand(command, name, description) {
@@ -36,6 +39,7 @@ function addBaseCommand(command, name, description) {
         .description(description)
         .usage('[options]')
         .option('-r --dir <dir>', 'directory to parse')
+        .option('-f --file <file>', 'path to a single Code Connect file to process')
         .option('-t --token <token>', 'figma access token')
         .option('-v --verbose', 'enable verbose logging for debugging')
         .option('-o --outFile <file>', 'specify a file to output generated Code Connect')
@@ -57,6 +61,7 @@ function addConnectCommandToProgram(program) {
         .option('--skip-validation', 'skip validation of Code Connect docs')
         .option('-l --label <label>', 'label to apply to the published files')
         .option('-b --batch-size <batch_size>', 'optional batch size (in number of documents) to use when uploading. Use this if you hit "request too large" errors. See README for more information.')
+        .option('--include-template-files', '(Deprecated) No longer needed - template files are included by default. Will be removed in a future version.')
         .action((0, updates_1.withUpdateCheck)(handlePublish));
     addBaseCommand(connectCommand, 'unpublish', 'Run to find any files that have figma connections and unpublish them from Figma. ' +
         'By default this looks for a config file named "figma.config.json", and uses the `include` and `exclude` fields to determine which files to parse. ' +
@@ -66,15 +71,15 @@ function addConnectCommandToProgram(program) {
         .action((0, updates_1.withUpdateCheck)(handleUnpublish));
     addBaseCommand(connectCommand, 'parse', 'Run Code Connect locally to find any files that have figma connections, then converts them to JSON and outputs to stdout.')
         .option('-l --label <label>', 'label to apply to the parsed files')
+        .option('--include-template-files', '(Deprecated) No longer needed - template files are included by default. Will be removed in a future version.')
         .action((0, updates_1.withUpdateCheck)(handleParse));
     addBaseCommand(connectCommand, 'create', 'Generate a Code Connect file with boilerplate in the current directory for a Figma node URL')
         .argument('<figma-node-url>', 'Figma node URL to create the Code Connect file from')
         .action((0, updates_1.withUpdateCheck)(handleCreate));
     addBaseCommand(connectCommand, 'migrate', 'Parse Code Connect files and migrate their templates into .figma.js files that can be published directly without parsing.')
         .argument('[pattern]', 'glob pattern to match files (optional, uses config if not provided)')
-        .option('-l --label <label>', 'label to apply to the migrated templates')
-        .option('--output-dir <dir>', 'directory to write template files (default: same directory as source file)')
-        .option('--remove-props', 'remove __props metadata blocks from migrated templates')
+        .option('--include-props', 'preserve __props metadata blocks in migrated templates (removed by default). Use if your templates use the React .getProps() or .render() modifiers, or read executeTemplate().metadata.__props from the migrated components')
+        .option('--javascript', 'output migrated templates as JavaScript (.figma.js) instead of TypeScript (.figma.ts)')
         .action((0, updates_1.withUpdateCheck)(handleMigrate));
 }
 function getAccessToken(cmd) {
@@ -105,15 +110,13 @@ function transformDocFromParser(doc, remoteUrl, config) {
             }
         }
         catch (e) {
-            source = (0, project_1.getRemoteFileUrl)(source, remoteUrl);
+            source = (0, project_1.getRemoteFileUrl)(source, remoteUrl, config.defaultBranch);
         }
     }
     // TODO This logic is duplicated in parser.ts parseDoc due to some type issues
     let figmaNode = doc.figmaNode;
     if (config.documentUrlSubstitutions) {
-        Object.entries(config.documentUrlSubstitutions).forEach(([from, to]) => {
-            figmaNode = figmaNode.replace(from, to);
-        });
+        figmaNode = (0, helpers_1.applyDocumentUrlSubstitutions)(figmaNode, config.documentUrlSubstitutions);
     }
     return {
         ...doc,
@@ -121,67 +124,7 @@ function transformDocFromParser(doc, remoteUrl, config) {
         figmaNode,
     };
 }
-function parseRawFile(filePath, label, config, dir) {
-    const fileContent = fs_1.default.readFileSync(filePath, 'utf-8');
-    const lines = fileContent.split('\n');
-    const fields = {};
-    let templateStartIndex = 0;
-    // Parse consecutive comment lines at the start of the file
-    for (let i = 0; i < lines.length; i++) {
-        const line = lines[i].trim();
-        // Match pattern: // fieldName=value
-        const match = line.match(/^\/\/\s*(\w+)=(.+)$/);
-        if (match) {
-            const [, fieldName, fieldValue] = match;
-            const normalizedFieldName = fieldName.toLowerCase();
-            if (normalizedFieldName === 'url' ||
-                normalizedFieldName === 'component' ||
-                normalizedFieldName === 'source') {
-                fields[normalizedFieldName] = fieldValue.trim();
-            }
-            templateStartIndex = i + 1;
-        }
-        else if (line === '' || line.startsWith('//')) {
-            // Allow blank lines or other comments, but don't increment template start
-            continue;
-        }
-        else {
-            // First non-comment line found
-            break;
-        }
-    }
-    if (!fields.url) {
-        throw new Error(`Missing required url field in ${filePath}. Please add a // url=... comment to the top of the file.`);
-    }
-    let figmaNodeUrl = fields.url;
-    const template = lines.slice(templateStartIndex).join('\n');
-    // Apply documentUrlSubstitutions if provided
-    if (config?.documentUrlSubstitutions) {
-        Object.entries(config.documentUrlSubstitutions).forEach(([from, to]) => {
-            figmaNodeUrl = figmaNodeUrl.replace(from, to);
-        });
-    }
-    // Determine effective label from parameter, config, or default
-    const effectiveLabel = label || config?.label || label_language_mapping_1.CodeConnectLabel.Code;
-    const language = config?.language || (0, label_language_mapping_1.getInferredLanguageForRaw)(effectiveLabel);
-    return {
-        figmaNode: figmaNodeUrl,
-        component: fields.component,
-        template,
-        // nestable by default unless user specifies in template
-        // (templateData.nestable AND template.metadata.nestable need to
-        // be true for instance to be nested)
-        templateData: { nestable: true, isParserless: true },
-        language,
-        label: effectiveLabel,
-        source: fields.source || '',
-        sourceLocation: { line: -1 },
-        metadata: {
-            cliVersion: require('../../package.json').version,
-        },
-    };
-}
-async function getCodeConnectObjects(cmd, projectInfo, silent = false, skipTemplateHelpers = false) {
+async function getCodeConnectObjects(cmd, projectInfo, silent = false, isForMigration = false) {
     if (cmd.jsonFile) {
         try {
             const docsFromJson = JSON.parse(fs_1.default.readFileSync(cmd.jsonFile, 'utf8'));
@@ -197,7 +140,7 @@ async function getCodeConnectObjects(cmd, projectInfo, silent = false, skipTempl
     }
     let codeConnectObjects = [];
     if (projectInfo.config.parser === 'react') {
-        codeConnectObjects = await getReactCodeConnectObjects(projectInfo, cmd, silent, skipTemplateHelpers);
+        codeConnectObjects = await getReactCodeConnectObjects(projectInfo, cmd, silent, isForMigration);
     }
     else if (projectInfo.config.parser === 'html') {
         codeConnectObjects = await getCodeConnectObjectsFromParseFn({
@@ -206,14 +149,14 @@ async function getCodeConnectObjects(cmd, projectInfo, silent = false, skipTempl
             projectInfo,
             cmd,
             silent,
-            skipTemplateHelpers,
+            isForMigration,
         });
     }
     else {
         const payload = {
             mode: 'PARSE',
             paths: projectInfo.files,
-            config: { ...projectInfo.config, skipTemplateHelpers },
+            config: { ...projectInfo.config, skipTemplateHelpers: isForMigration },
             verbose: cmd.verbose,
         };
         try {
@@ -244,12 +187,26 @@ async function getCodeConnectObjects(cmd, projectInfo, silent = false, skipTempl
             }
         }
     }
-    const rawTemplateFiles = projectInfo.files.filter((f) => f.endsWith('.figma.js') || f.endsWith('.figma.template.js'));
+    const rawTemplateFiles = projectInfo.files.filter((f) => {
+        // Suffix may be used by HTML / custom parsers
+        const isPotentialRawTemplate = f.endsWith('.figma.js') ||
+            f.endsWith('.figma.template.js') ||
+            f.endsWith('.figma.ts') ||
+            f.endsWith('.figma.template.ts');
+        if (!isPotentialRawTemplate)
+            return false;
+        try {
+            return (0, raw_templates_1.isRawTemplate)(fs_1.default.readFileSync(f, 'utf-8'));
+        }
+        catch {
+            return false;
+        }
+    });
     if (rawTemplateFiles.length > 0) {
         // Resolve the label before parsing so language inference works correctly
         const resolvedLabel = cmd.label || projectInfo.config.label;
         const rawTemplateDocs = rawTemplateFiles.map((file) => {
-            const doc = parseRawFile(file, resolvedLabel, projectInfo.config, projectInfo.absPath);
+            const doc = (0, raw_templates_1.parseRawFile)(file, resolvedLabel, projectInfo.config, projectInfo.absPath);
             // Store the Code Connect file path for migration purposes
             doc._codeConnectFilePath = file;
             if (!silent || cmd.verbose) {
@@ -289,8 +246,8 @@ projectInfo,
 cmd, 
 /** Silences console output */
 silent = false, 
-/** Skip template helpers (used for extract command) */
-skipTemplateHelpers = false, }) {
+/** Whether this parse is for the migrate command */
+isForMigration = false, }) {
     const codeConnectObjects = [];
     const tsProgram = (0, project_1.getTsProgram)(projectInfo);
     const { files, remoteUrl, config, absPath } = projectInfo;
@@ -307,7 +264,7 @@ skipTemplateHelpers = false, }) {
                     repoUrl: remoteUrl,
                     debug: cmd.verbose,
                     silent,
-                    skipTemplateHelpers,
+                    isForMigration,
                 },
             });
             codeConnectObjects.push(...docs);
@@ -343,7 +300,7 @@ skipTemplateHelpers = false, }) {
     }
     return codeConnectObjects;
 }
-async function getReactCodeConnectObjects(projectInfo, cmd, silent = false, skipTemplateHelpers = false) {
+async function getReactCodeConnectObjects(projectInfo, cmd, silent = false, isForMigration = false) {
     const codeConnectObjects = await getCodeConnectObjectsFromParseFn({
         parseFn: parser_2.parseReactDoc,
         resolveImportsFn: parser_2.findAndResolveImports,
@@ -351,18 +308,24 @@ async function getReactCodeConnectObjects(projectInfo, cmd, silent = false, skip
         projectInfo,
         cmd,
         silent,
-        skipTemplateHelpers,
+        isForMigration,
     });
     const storybookCodeConnectObjects = await (0, convert_1.convertStorybookFiles)({
         projectInfo: (0, project_1.getReactProjectInfo)(projectInfo),
+        isForMigration,
     });
     const allCodeConnectObjects = codeConnectObjects.concat(storybookCodeConnectObjects);
     return allCodeConnectObjects;
 }
 async function handlePublish(cmd) {
     setupHandler(cmd);
+    // Show deprecation warning if the flag is used
+    if (cmd.includeTemplateFiles !== undefined) {
+        logging_1.logger.warn('[Deprecated] The --include-template-files flag is no longer needed because template files are now included by default. ' +
+            "Please don't use this flag - it will be removed in a future version.");
+    }
     let dir = getDir(cmd);
-    const projectInfo = await (0, project_1.getProjectInfo)(dir, cmd.config);
+    const projectInfo = (0, filter_project_info_1.filterProjectInfoByFile)(await (0, project_1.getProjectInfo)(dir, cmd.config), cmd.file);
     const codeConnectObjects = await getCodeConnectObjects(cmd, projectInfo);
     if (codeConnectObjects.length === 0) {
         logging_1.logger.warn(`No Code Connect files found in ${dir} - Make sure you have configured \`include\` and \`exclude\` in your figma.config.json file correctly, or that you are running in a directory that contains Code Connect files.`);
@@ -416,7 +379,7 @@ async function handleUnpublish(cmd) {
         logging_1.logger.info(`Files that would be unpublished:`);
     }
     let nodesToDeleteRelevantInfo;
-    const projectInfo = await (0, project_1.getProjectInfo)(dir, cmd.config);
+    const projectInfo = (0, filter_project_info_1.filterProjectInfoByFile)(await (0, project_1.getProjectInfo)(dir, cmd.config), cmd.file);
     if (cmd.node) {
         if (!cmd.label) {
             (0, logging_1.exitWithError)('Label is required when specifying a node');
@@ -446,8 +409,13 @@ async function handleUnpublish(cmd) {
 }
 async function handleParse(cmd) {
     setupHandler(cmd);
+    // Show deprecation warning if the flag is used
+    if (cmd.includeTemplateFiles !== undefined) {
+        logging_1.logger.warn('[Deprecated] The --include-template-files flag is no longer needed because template files are now included by default. ' +
+            "Please don't use this flag - it will be removed in a future version.");
+    }
     const dir = cmd.dir ?? process.cwd();
-    const projectInfo = await (0, project_1.getProjectInfo)(dir, cmd.config);
+    const projectInfo = (0, filter_project_info_1.filterProjectInfoByFile)(await (0, project_1.getProjectInfo)(dir, cmd.config), cmd.file);
     const codeConnectObjects = await getCodeConnectObjects(cmd, projectInfo);
     if (cmd.dryRun) {
         logging_1.logger.info(`Dry run complete`);
@@ -522,59 +490,67 @@ async function handleMigrate(pattern, cmd) {
     // Parse the files to get Code Connect objects
     const allCodeConnectObjects = await getCodeConnectObjects(cmd, projectInfo, false, true);
     const codeConnectObjectsByFigmaUrl = (0, migration_helpers_1.groupCodeConnectObjectsByFigmaUrl)(allCodeConnectObjects);
-    const totalVariants = Object.values(codeConnectObjectsByFigmaUrl).reduce((acc, obj) => acc + obj.variants.length, 0);
-    // TODO support variants (for now filtering on non-variants)
-    const codeConnectObjects = Object.values(codeConnectObjectsByFigmaUrl).flatMap((obj) => obj.main ? [obj.main] : []);
-    if (codeConnectObjects.length === 0) {
+    const groupCount = Object.keys(codeConnectObjectsByFigmaUrl).length;
+    if (groupCount === 0) {
         (0, logging_1.exitWithError)('No Code Connect objects found to migrate');
     }
-    logging_1.logger.info(`Found ${codeConnectObjects.length} Code Connect object(s) to migrate`);
+    logging_1.logger.info(`Found ${groupCount} component(s) to migrate`);
     let migratedCount = 0;
     let skippedCount = 0;
     const errors = [];
-    // Track file paths created during this migration run
     const filePathsCreated = new Set();
-    // Get git root path for converting remote URLs to local paths
     const gitRootPath = (0, project_2.getGitRepoAbsolutePath)(dir);
-    // Migrate each Code Connect object to a template file
-    for (const doc of codeConnectObjects) {
+    const useTypeScript = !cmd.javascript;
+    for (const [figmaUrl, group] of Object.entries(codeConnectObjectsByFigmaUrl)) {
         try {
-            // Skip if no template (shouldn't happen, but be safe)
-            if (!doc.template) {
-                logging_1.logger.warn(`Skipping ${doc.figmaNode}: no template found`);
+            const hasVariants = group.variants.length > 0;
+            const representativeDoc = group.main ?? group.variants[0];
+            if (!representativeDoc?.template) {
+                logging_1.logger.warn(`Skipping ${figmaUrl}: no template found`);
                 skippedCount++;
                 continue;
             }
             // Determine local source path for output location
             let localSourcePath;
-            if (doc._codeConnectFilePath) {
+            if (representativeDoc._codeConnectFilePath) {
                 // Use the Code Connect file path directly (preferred)
-                localSourcePath = doc._codeConnectFilePath;
+                localSourcePath = representativeDoc._codeConnectFilePath;
             }
-            else if (doc.source && gitRootPath) {
+            else if (representativeDoc?.source && gitRootPath) {
                 // Fallback: Convert remote file URL to local path
                 const relativePath = (0, run_wizard_2.convertRemoteFileUrlToRelativePath)({
-                    remoteFileUrl: doc.source,
+                    remoteFileUrl: representativeDoc.source,
                     gitRootPath,
                     dir,
                 });
                 if (relativePath) {
-                    // Convert relative path to absolute path for writeTemplateFile
                     localSourcePath = path_1.default.resolve(dir, relativePath);
                 }
             }
-            const { outputPath, skipped } = (0, migration_helpers_1.writeTemplateFile)(doc, cmd.outDir, dir, localSourcePath, filePathsCreated, cmd.removeProps);
+            const { outputPath, skipped } = hasVariants
+                ? (0, migration_helpers_1.writeVariantTemplateFile)(group, figmaUrl, cmd.outDir, dir, {
+                    localSourcePath,
+                    filePathsCreated,
+                    useTypeScript,
+                    includeProps: cmd.includeProps,
+                })
+                : (0, migration_helpers_1.writeTemplateFile)(representativeDoc, cmd.outDir, dir, {
+                    localSourcePath,
+                    filePathsCreated,
+                    includeProps: cmd.includeProps,
+                    useTypeScript,
+                });
             if (skipped) {
                 logging_1.logger.warn(`Skipping ${outputPath}: file already exists`);
                 skippedCount++;
             }
             else {
-                logging_1.logger.info(`${(0, logging_1.success)('✓')} Migrated to ${(0, logging_1.highlight)(outputPath)}`);
+                logging_1.logger.info(`${(0, logging_1.success)('✓')} Migrated${hasVariants ? ' (with variants)' : ''} to ${(0, logging_1.highlight)(outputPath)}`);
                 migratedCount++;
             }
         }
         catch (error) {
-            const errorMsg = `Failed to migrate ${doc.figmaNode}: ${error}`;
+            const errorMsg = `Failed to migrate ${figmaUrl}: ${error}`;
             logging_1.logger.error(errorMsg);
             errors.push(errorMsg);
         }
@@ -586,10 +562,10 @@ async function handleMigrate(pattern, cmd) {
                 logging_1.logger.warn(`Config file already exists at ${(0, logging_1.highlight)(configFilePath)}`);
             }
             else {
-                const { language: docLanguage, label } = codeConnectObjects[0];
+                const { language: docLanguage, label } = allCodeConnectObjects[0];
                 const language = (0, label_language_mapping_1.getInferredLanguageForRaw)(label, docLanguage);
                 const config = {
-                    include: ['**/*.figma.js'],
+                    include: [useTypeScript ? '**/*.figma.ts' : '**/*.figma.js'],
                     language,
                     label,
                     ...(documentUrlSubstitutions && Object.keys(documentUrlSubstitutions).length > 0
@@ -604,9 +580,6 @@ async function handleMigrate(pattern, cmd) {
     // Summary
     console.log('');
     logging_1.logger.info(`Migration complete: ${(0, logging_1.success)(`${migratedCount} migrated`)}, ${skippedCount} skipped`);
-    if (totalVariants > 0) {
-        logging_1.logger.error(`${(0, logging_1.error)(`${totalVariants} variant restriction(s)`)} found, but not supported by the migration script yet`);
-    }
     if (errors.length > 0) {
         console.log('');
         logging_1.logger.error(`Encountered ${errors.length} error(s):`);