@figma/code-connect 1.0.2 → 1.0.4

package/dist/connect/wizard/prop_mapping.js

@@ -0,0 +1,105 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generatePropMapping = exports.extractSignature = void 0;
+const typescript_1 = __importDefault(require("typescript"));
+const parser_1 = require("../../react/parser");
+const figma_rest_api_1 = require("../figma_rest_api");
+const fast_fuzzy_1 = require("fast-fuzzy");
+const PROP_MINIMUM_MATCH_THRESHOLD = 0.8;
+function extractSignature({ nameToFind, sourceFilePath, projectInfo, }) {
+    const { tsProgram } = projectInfo;
+    const checker = tsProgram.getTypeChecker();
+    // Get source file
+    const sourceFile = tsProgram.getSourceFile(sourceFilePath);
+    if (!sourceFile) {
+        throw new Error(`Could not find source for file: ${sourceFilePath}`);
+    }
+    for (const statement of sourceFile.statements) {
+        if (!(typescript_1.default.isFunctionDeclaration(statement) || typescript_1.default.isVariableStatement(statement))) {
+            continue;
+        }
+        if (!(statement.modifiers &&
+            statement.modifiers.some((modifier) => modifier.kind === typescript_1.default.SyntaxKind.ExportKeyword))) {
+            continue;
+        }
+        const name = typescript_1.default.isFunctionDeclaration(statement)
+            ? statement.name?.text
+            : statement.declarationList.declarations?.[0].name.getText(sourceFile);
+        if (name === nameToFind ||
+            (nameToFind === 'default' &&
+                statement.modifiers.some((modifier) => modifier.kind === typescript_1.default.SyntaxKind.DefaultKeyword))) {
+            const symbol = typescript_1.default.isFunctionDeclaration(statement)
+                ? statement.name && checker.getSymbolAtLocation(statement.name)
+                : checker.getSymbolAtLocation(statement.declarationList.declarations[0].name);
+            if (!symbol) {
+                throw new Error(`Could not find symbol for ${name}`);
+            }
+            const signature = (0, parser_1.extractComponentTypeSignature)(symbol, checker, sourceFile);
+            if (!signature) {
+                throw new Error(`Could not find signature for ${name}`);
+            }
+            return signature;
+        }
+    }
+    throw new Error('No function or variable signatures found');
+}
+exports.extractSignature = extractSignature;
+function getComponentPropertyTypeFromSignature(tsString) {
+    if (tsString === 'string') {
+        return figma_rest_api_1.FigmaRestApi.ComponentPropertyType.Text;
+    }
+    if (tsString === 'false | true') {
+        return figma_rest_api_1.FigmaRestApi.ComponentPropertyType.Boolean;
+    }
+    return null;
+}
+const DELIMITERS_REGEX = /[\s-_]/g;
+function getMatchableStr(str) {
+    return str.replace(DELIMITERS_REGEX, '').toUpperCase();
+}
+function generatePropMapping({ exportName, filepath, projectInfo, component, }) {
+    const signature = extractSignature({
+        nameToFind: exportName,
+        sourceFilePath: filepath,
+        projectInfo,
+    });
+    const matchableCodeProps = Object.keys(signature).reduce((acc, key) => {
+        acc[getMatchableStr(key)] = key;
+        return acc;
+    }, {});
+    const matchedPropScores = {};
+    function isBestMatchForProp(match) {
+        return !matchedPropScores[match.item] || match.score > matchedPropScores[match.item].score;
+    }
+    const searchSpace = Object.keys(matchableCodeProps);
+    const searcher = new fast_fuzzy_1.Searcher(searchSpace);
+    Object.entries(component.componentPropertyDefinitions).forEach(([propertyName, componentPropertyDefinition]) => {
+        const results = searcher.search(getMatchableStr(propertyName), { returnMatchData: true });
+        const bestMatch = results[0];
+        const matchingCodeProp = matchableCodeProps[bestMatch?.item];
+        if (bestMatch &&
+            bestMatch.score > PROP_MINIMUM_MATCH_THRESHOLD &&
+            getComponentPropertyTypeFromSignature(signature[matchingCodeProp]) ===
+                componentPropertyDefinition.type &&
+            isBestMatchForProp(bestMatch)) {
+            matchedPropScores[bestMatch.item] = {
+                codePropName: matchingCodeProp,
+                figmaPropName: propertyName,
+                figmaPropType: componentPropertyDefinition.type,
+                score: bestMatch.score,
+            };
+        }
+    });
+    return Object.entries(matchedPropScores).reduce((acc, [_, { codePropName, figmaPropName, figmaPropType }]) => {
+        acc[figmaPropName] = {
+            codePropName,
+            mapping: figmaPropType,
+        };
+        return acc;
+    }, {});
+}
+exports.generatePropMapping = generatePropMapping;
+//# sourceMappingURL=prop_mapping.js.map

package/dist/connect/wizard/prop_mapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prop_mapping.js","sourceRoot":"","sources":["../../../src/connect/wizard/prop_mapping.ts"],"names":[],"mappings":"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"}

package/dist/connect/wizard/run_wizard.d.ts

@@ -1,28 +1,18 @@
 import { BaseCommand } from '../../commands/connect';
 import prompts from 'prompts';
 import { FigmaRestApi } from '../figma_rest_api';
-import { ReactProjectInfo } from '../../connect/project';
+import { ReactProjectInfo, CodeConnectConfig, ProjectInfo } from '../../connect/project';
 type ConnectedComponentMappings = {
     componentName: string;
-    path: string;
+    filepathExport: string;
 }[];
-export declare function getComponentChoicesForPrompt(components: FigmaRestApi.Component[], linkedNodeIdsToPaths: Record<string, string>, connectedComponentsMappings: ConnectedComponentMappings, dir: string): prompts.Choice[];
-/**
- * Autolinks components/paths based on fuzzy matching of name and writes mappings to linkedNodeIdsToPaths.
- *
- * Matching is done by fast-fuzzy
- */
-export declare function autoLinkComponents({ unconnectedComponents, linkedNodeIdsToPaths, componentPaths, }: {
-    unconnectedComponents: FigmaRestApi.Component[];
-    linkedNodeIdsToPaths: Record<string, string>;
-    componentPaths: string[];
-}): void;
+export declare function getComponentChoicesForPrompt(components: FigmaRestApi.Component[], linkedNodeIdsToFilepathExports: Record<string, string>, connectedComponentsMappings: ConnectedComponentMappings, dir: string): prompts.Choice[];
 export declare function convertRemoteFileUrlToRelativePath({ remoteFileUrl, gitRootPath, dir, }: {
     remoteFileUrl: string;
     gitRootPath: string;
     dir: string;
 }): string | null;
-export declare function getUnconnectedComponentsAndConnectedComponentMappings(cmd: BaseCommand, figmaFileUrl: string, componentsFromFile: FigmaRestApi.Component[], projectInfo: ReactProjectInfo): Promise<{
+export declare function getUnconnectedComponentsAndConnectedComponentMappings(cmd: BaseCommand, figmaFileUrl: string, componentsFromFile: FigmaRestApi.Component[], projectInfo: ProjectInfo<CodeConnectConfig> | ReactProjectInfo): Promise<{
     unconnectedComponents: FigmaRestApi.Component[];
     connectedComponentsMappings: ConnectedComponentMappings;
 }>;

package/dist/connect/wizard/run_wizard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"run_wizard.d.ts","sourceRoot":"","sources":["../../../src/connect/wizard/run_wizard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiD,MAAM,wBAAwB,CAAA;AACnG,OAAO,OAAO,MAAM,SAAS,CAAA;AAG7B,OAAO,EAAE,YAAY,EAAa,MAAM,mBAAmB,CAAA;AAG3D,OAAO,EACL,gBAAgB,EAMjB,MAAM,uBAAuB,CAAA;AAgB9B,KAAK,0BAA0B,GAAG;IAAE,aAAa,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,CAAA;AAoJ3E,wBAAgB,4BAA4B,CAC1C,UAAU,EAAE,YAAY,CAAC,SAAS,EAAE,EACpC,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC5C,2BAA2B,EAAE,0BAA0B,EACvD,GAAG,EAAE,MAAM,GACV,OAAO,CAAC,MAAM,EAAE,CAuClB;AA0JD;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,qBAAqB,EACrB,oBAAoB,EACpB,cAAc,GACf,EAAE;IACD,qBAAqB,EAAE,YAAY,CAAC,SAAS,EAAE,CAAA;IAC/C,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5C,cAAc,EAAE,MAAM,EAAE,CAAA;CACzB,QAsBA;AA2DD,wBAAgB,kCAAkC,CAAC,EACjD,aAAa,EACb,WAAW,EACX,GAAG,GACJ,EAAE;IACD,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,GAAG,EAAE,MAAM,CAAA;CACZ,iBAYA;AAED,wBAAsB,qDAAqD,CACzE,GAAG,EAAE,WAAW,EAChB,YAAY,EAAE,MAAM,EACpB,kBAAkB,EAAE,YAAY,CAAC,SAAS,EAAE,EAC5C,WAAW,EAAE,gBAAgB;;;GA8C9B;AAoFD,wBAAsB,SAAS,CAAC,GAAG,EAAE,WAAW,iBA8J/C"}
+{"version":3,"file":"run_wizard.d.ts","sourceRoot":"","sources":["../../../src/connect/wizard/run_wizard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiD,MAAM,wBAAwB,CAAA;AACnG,OAAO,OAAO,MAAM,SAAS,CAAA;AAG7B,OAAO,EAAE,YAAY,EAAa,MAAM,mBAAmB,CAAA;AAG3D,OAAO,EACL,gBAAgB,EAKhB,iBAAiB,EACjB,WAAW,EAEZ,MAAM,uBAAuB,CAAA;AAwB9B,KAAK,0BAA0B,GAAG;IAAE,aAAa,EAAE,MAAM,CAAC;IAAC,cAAc,EAAE,MAAM,CAAA;CAAE,EAAE,CAAA;AA0JrF,wBAAgB,4BAA4B,CAC1C,UAAU,EAAE,YAAY,CAAC,SAAS,EAAE,EACpC,8BAA8B,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACtD,2BAA2B,EAAE,0BAA0B,EACvD,GAAG,EAAE,MAAM,GACV,OAAO,CAAC,MAAM,EAAE,CA2ClB;AA2QD,wBAAgB,kCAAkC,CAAC,EACjD,aAAa,EACb,WAAW,EACX,GAAG,GACJ,EAAE;IACD,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,GAAG,EAAE,MAAM,CAAA;CACZ,iBAYA;AAED,wBAAsB,qDAAqD,CACzE,GAAG,EAAE,WAAW,EAChB,YAAY,EAAE,MAAM,EACpB,kBAAkB,EAAE,YAAY,CAAC,SAAS,EAAE,EAC5C,WAAW,EAAE,WAAW,CAAC,iBAAiB,CAAC,GAAG,gBAAgB;;;GA8C/D;AAoFD,wBAAsB,SAAS,CAAC,GAAG,EAAE,WAAW,iBAyJ/C"}

package/dist/connect/wizard/run_wizard.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.runWizard = exports.getUnconnectedComponentsAndConnectedComponentMappings = exports.convertRemoteFileUrlToRelativePath = exports.autoLinkComponents = exports.getComponentChoicesForPrompt = void 0;
+exports.runWizard = exports.getUnconnectedComponentsAndConnectedComponentMappings = exports.convertRemoteFileUrlToRelativePath = exports.getComponentChoicesForPrompt = void 0;
 const connect_1 = require("../../commands/connect");
 const prompts_1 = __importDefault(require("prompts"));
 const fs_1 = __importDefault(require("fs"));
@@ -38,15 +38,17 @@ const project_1 = require("../../connect/project");
 const validation_1 = require("../validation");
 const chalk_1 = __importDefault(require("chalk"));
 const path_1 = __importDefault(require("path"));
+const parser_executable_types_1 = require("../parser_executable_types");
 const create_1 = require("../create");
 const create_2 = require("../../react/create");
 const boxen_1 = __importDefault(require("boxen"));
-const fast_fuzzy_1 = require("fast-fuzzy");
-const parser_1 = require("../../react/parser");
 const helpers_2 = require("./helpers");
 const strip_ansi_1 = __importDefault(require("strip-ansi"));
 const parser_executables_1 = require("../parser_executables");
 const ora_1 = __importDefault(require("ora"));
+const zod_validation_error_1 = require("zod-validation-error");
+const autolinking_1 = require("./autolinking");
+const prop_mapping_1 = require("./prop_mapping");
 const NONE = '(None)';
 const DELIMITERS_REGEX = /[\s-_]/g;
 function clearQuestion(prompt, answer) {
@@ -57,13 +59,13 @@ function clearQuestion(prompt, answer) {
     process.stdout.moveCursor(0, -rowsToRemove);
     process.stdout.clearScreenDown();
 }
-async function fetchTopLevelComponentsFromFile({ accessToken, figmaUrl, }) {
+async function fetchTopLevelComponentsFromFile({ accessToken, figmaUrl, cmd, }) {
     // TODO enter create flow if node-id specified
     const fileKey = (0, helpers_1.parseFileKey)(figmaUrl);
     const apiUrl = (0, figma_rest_api_1.getApiUrl)(figmaUrl ?? '') + `/code_connect/${fileKey}/cli_data`;
     try {
         const spinner = (0, ora_1.default)({
-            text: 'Fetching component information from Figma...',
+            text: `Fetching component information from ${cmd.verbose ? `${apiUrl}\n` : 'Figma...'}`,
             color: 'green',
         }).start();
         const response = await (process.env.CODE_CONNECT_MOCK_DOC_RESPONSE
@@ -77,7 +79,12 @@ async function fetchTopLevelComponentsFromFile({ accessToken, figmaUrl, }) {
                     'Content-Type': 'application/json',
                 },
             })).finally(() => {
-            spinner.stop();
+            if (cmd.verbose) {
+                spinner.stopAndPersist();
+            }
+            else {
+                spinner.stop();
+            }
         });
         if (response.status === 200) {
             return (0, helpers_1.findComponentsInDocument)(response.data.document).filter(({ id }) => id in response.data.componentSets || !response.data.components[id].componentSetId);
@@ -155,22 +162,26 @@ async function askQuestionWithExitConfirmation(question) {
         }
     }
 }
-function formatComponentTitle(componentName, path, pad) {
+function formatComponentTitle(componentName, filepathExport, pad) {
     const nameLabel = `${chalk_1.default.dim('Figma component:')} ${componentName.padEnd(pad, ' ')}`;
-    const linkedLabel = `↔️ ${path ?? '-'}`;
+    const linkedLabel = `↔️ ${filepathExport ? (0, helpers_2.parseFilepathExport)(filepathExport).filepath : '-'}`;
     return `${nameLabel}  ${linkedLabel}`;
 }
-function getComponentChoicesForPrompt(components, linkedNodeIdsToPaths, connectedComponentsMappings, dir) {
+function getComponentChoicesForPrompt(components, linkedNodeIdsToFilepathExports, connectedComponentsMappings, dir) {
     const longestNameLength = [...components, ...connectedComponentsMappings].reduce((longest, component) => Math.max(longest, 'name' in component ? component.name.length : component.componentName.length), 0);
     const nameCompare = (a, b) => a.name.localeCompare(b.name);
-    const linkedComponents = components.filter((c) => !!linkedNodeIdsToPaths[c.id]).sort(nameCompare);
-    const unlinkedComponents = components.filter((c) => !linkedNodeIdsToPaths[c.id]).sort(nameCompare);
+    const linkedComponents = components
+        .filter((c) => !!linkedNodeIdsToFilepathExports[c.id])
+        .sort(nameCompare);
+    const unlinkedComponents = components
+        .filter((c) => !linkedNodeIdsToFilepathExports[c.id])
+        .sort(nameCompare);
     const formatComponentChoice = (c) => {
-        const componentPath = linkedNodeIdsToPaths[c.id]
-            ? path_1.default.relative(dir, linkedNodeIdsToPaths[c.id])
+        const filepathExport = linkedNodeIdsToFilepathExports[c.id]
+            ? path_1.default.relative(dir, linkedNodeIdsToFilepathExports[c.id])
             : null;
         return {
-            title: formatComponentTitle(c.name, componentPath, longestNameLength),
+            title: formatComponentTitle(c.name, filepathExport, longestNameLength),
             value: c.id,
             description: `${chalk_1.default.green('Edit link')}`,
         };
@@ -179,7 +190,7 @@ function getComponentChoicesForPrompt(components, linkedNodeIdsToPaths, connecte
         ...linkedComponents.map(formatComponentChoice),
         ...unlinkedComponents.map(formatComponentChoice),
         ...connectedComponentsMappings.map((connectedComponent) => ({
-            title: formatComponentTitle(connectedComponent.componentName, connectedComponent.path, longestNameLength),
+            title: formatComponentTitle(connectedComponent.componentName, connectedComponent.filepathExport, longestNameLength),
             disabled: true,
         })),
     ];
@@ -199,7 +210,8 @@ function getUnconnectedComponentChoices(componentPaths, dir) {
         }),
     ];
 }
-async function runManualLinking({ unconnectedComponents, linkedNodeIdsToPaths, componentPaths, connectedComponentsMappings, cmd, }) {
+async function runManualLinking({ unconnectedComponents, linkedNodeIdsToFilepathExports, filepathExports, connectedComponentsMappings, cmd, }) {
+    const filesToComponentOptionsMap = (0, helpers_2.getComponentOptionsMap)(filepathExports);
     const dir = (0, connect_1.getDir)(cmd);
     while (true) {
         // Don't show exit confirmation as we're relying on esc behavior
@@ -207,7 +219,7 @@ async function runManualLinking({ unconnectedComponents, linkedNodeIdsToPaths, c
             type: 'select',
             name: 'nodeId',
             message: `Select a link to edit (Press ${chalk_1.default.green('esc')} when you're ready to continue on)`,
-            choices: getComponentChoicesForPrompt(unconnectedComponents, linkedNodeIdsToPaths, connectedComponentsMappings, dir),
+            choices: getComponentChoicesForPrompt(unconnectedComponents, linkedNodeIdsToFilepathExports, connectedComponentsMappings, dir),
             warn: 'This component already has a local Code Connect file.',
             hint: ' ',
         }, {
@@ -216,7 +228,14 @@ async function runManualLinking({ unconnectedComponents, linkedNodeIdsToPaths, c
         if (!nodeId) {
             return;
         }
-        const pathChoices = getUnconnectedComponentChoices(componentPaths, dir);
+        const pathChoices = getUnconnectedComponentChoices(Object.keys(filesToComponentOptionsMap), dir);
+        const prevSelectedKey = linkedNodeIdsToFilepathExports[nodeId];
+        const { filepath: prevSelectedFilepath, exportName: prevSelectedComponent } = prevSelectedKey
+            ? (0, helpers_2.parseFilepathExport)(prevSelectedKey)
+            : {
+                filepath: null,
+                exportName: null,
+            };
         const { pathToComponent } = await (0, prompts_1.default)({
             type: 'autocomplete',
             name: 'pathToComponent',
@@ -225,18 +244,39 @@ async function runManualLinking({ unconnectedComponents, linkedNodeIdsToPaths, c
             // default suggest uses .startsWith(input) which isn't very useful for full paths
             suggest: (input, choices) => Promise.resolve(choices.filter((i) => i.value.toUpperCase().includes(input.toUpperCase()))),
             // preselect if editing an existing choice
-            initial: nodeId in linkedNodeIdsToPaths
-                ? pathChoices.findIndex(({ value }) => value === linkedNodeIdsToPaths[nodeId])
+            initial: prevSelectedFilepath
+                ? pathChoices.findIndex(({ value }) => value === prevSelectedFilepath)
                 : 0,
         }, {
             onSubmit: clearQuestion,
         });
         if (pathToComponent) {
             if (pathToComponent === NONE) {
-                delete linkedNodeIdsToPaths[nodeId];
+                delete linkedNodeIdsToFilepathExports[nodeId];
             }
             else {
-                linkedNodeIdsToPaths[nodeId] = pathToComponent;
+                const fileExports = filesToComponentOptionsMap[pathToComponent];
+                if (fileExports.length === 0) {
+                    // Not TS, default to filepath
+                    linkedNodeIdsToFilepathExports[nodeId] = pathToComponent;
+                }
+                else {
+                    const { filepathExport } = await (0, prompts_1.default)({
+                        type: 'autocomplete',
+                        name: 'filepathExport',
+                        message: `Choose an export of ${path_1.default.parse(pathToComponent).base} (type to filter results)`,
+                        choices: fileExports,
+                        // default suggest uses .startsWith(input)
+                        suggest: (input, choices) => Promise.resolve(choices.filter((i) => i.value.toUpperCase().includes(input.toUpperCase()))),
+                        // preselect if editing an existing choice
+                        initial: prevSelectedComponent && prevSelectedFilepath === pathToComponent
+                            ? fileExports.findIndex(({ title }) => title === prevSelectedComponent)
+                            : 0,
+                    }, {
+                        onSubmit: clearQuestion,
+                    });
+                    linkedNodeIdsToFilepathExports[nodeId] = filepathExport;
+                }
             }
         }
     }
@@ -255,7 +295,7 @@ async function runManualLinkingWithConfirmation(manualLinkingArgs) {
             hasAskedOutDirQuestion = true;
             outDir = outputDirectory;
         }
-        const linkedNodes = Object.keys(manualLinkingArgs.linkedNodeIdsToPaths);
+        const linkedNodes = Object.keys(manualLinkingArgs.linkedNodeIdsToFilepathExports);
         if (!linkedNodes.length) {
             const { confirmation } = await askQuestionOrExit({
                 type: 'select',
@@ -298,65 +338,58 @@ async function runManualLinkingWithConfirmation(manualLinkingArgs) {
         }
     }
 }
-/**
- * Autolinks components/paths based on fuzzy matching of name and writes mappings to linkedNodeIdsToPaths.
- *
- * Matching is done by fast-fuzzy
- */
-function autoLinkComponents({ unconnectedComponents, linkedNodeIdsToPaths, componentPaths, }) {
-    const matchableNamesToNodeIdsMap = unconnectedComponents.reduce((acc, curr) => {
-        const matchableName = curr.name;
-        acc[matchableName] = curr.id;
-        return acc;
-    }, {});
-    const searchSpace = Object.keys(matchableNamesToNodeIdsMap);
-    const searcher = new fast_fuzzy_1.Searcher(searchSpace);
-    componentPaths.forEach((componentPath) => {
-        const { name } = path_1.default.parse(componentPath);
-        const matchableName = name;
-        const results = searcher.search(matchableName, { returnMatchData: true });
-        const bestMatch = results[0];
-        if (bestMatch && bestMatch.score > 0.9 && bestMatch.item in matchableNamesToNodeIdsMap) {
-            linkedNodeIdsToPaths[matchableNamesToNodeIdsMap[bestMatch.item]] = componentPath;
-        }
-    });
-}
-exports.autoLinkComponents = autoLinkComponents;
-// returns ES-style import path from given system path
-function formatImportPath(systemPath) {
-    // use forward slashes for import paths
-    let formattedImportPath = systemPath.replaceAll(path_1.default.sep, '/');
-    // prefix current dir paths with ./ (node path does not)
-    formattedImportPath = formattedImportPath.startsWith('.')
-        ? formattedImportPath
-        : `./${formattedImportPath}`;
-    // assume not using ESM imports
-    return formattedImportPath.replace(/\.(jsx|tsx)$/, '');
-}
-async function createCodeConnectFiles({ linkedNodeIdsToPaths, figmaFileUrl, unconnectedComponentsMap, outDir: outDirArg, }) {
-    for (const [nodeId, filePath] of Object.entries(linkedNodeIdsToPaths)) {
+async function createCodeConnectFiles({ linkedNodeIdsToFilepathExports, figmaFileUrl, unconnectedComponentsMap, outDir: outDirArg, projectInfo, }) {
+    for (const [nodeId, filepathExport] of Object.entries(linkedNodeIdsToFilepathExports)) {
         const urlObj = new URL(figmaFileUrl);
         urlObj.search = '';
         urlObj.searchParams.append('node-id', nodeId);
-        const { name } = path_1.default.parse(filePath);
-        const componentName = name.split('.')[0];
-        const outDir = outDirArg || path_1.default.dirname(filePath);
-        const outFile = path_1.default.join(outDir, `${name}.figma.tsx`);
+        const { filepath, exportName } = (0, helpers_2.parseFilepathExport)(filepathExport);
+        const { name } = path_1.default.parse(filepath);
+        const outDir = outDirArg || path_1.default.dirname(filepath);
         const payload = {
             mode: 'CREATE',
-            destinationDir: path_1.default.dirname(filePath),
-            destinationFile: outFile,
+            destinationDir: outDir,
+            sourceFilepath: filepath,
+            sourceExport: exportName || undefined,
+            propMapping: projectInfo.config.parser === 'react' && filepath && exportName
+                ? (0, prop_mapping_1.generatePropMapping)({
+                    filepath,
+                    exportName,
+                    projectInfo: projectInfo,
+                    component: unconnectedComponentsMap[nodeId],
+                })
+                : undefined,
             component: {
                 figmaNodeUrl: urlObj.toString(),
                 normalizedName: (0, create_1.normalizeComponentName)(name),
                 ...unconnectedComponentsMap[nodeId],
             },
-            config: {},
+            config: projectInfo.config,
         };
-        const result = await (0, create_2.createReactCodeConnect)(payload);
+        let result;
+        if (projectInfo.config.parser === 'react') {
+            result = await (0, create_2.createReactCodeConnect)(payload);
+        }
+        else {
+            try {
+                const stdout = await (0, parser_executables_1.callParser)(
+                // We use `as` because the React parser makes the types difficult
+                // TODO remove once React is an executable parser
+                projectInfo.config, payload, projectInfo.absPath);
+                result = parser_executable_types_1.CreateResponsePayload.parse(stdout);
+            }
+            catch (e) {
+                throw (0, zod_validation_error_1.fromError)(e);
+            }
+        }
         const { hasErrors } = (0, parser_executables_1.handleMessages)(result.messages);
-        if (!hasErrors) {
-            logging_1.logger.info((0, logging_1.success)(`Created ${outFile}`));
+        if (hasErrors) {
+            (0, logging_1.exitWithError)('Errors encountered calling parser, exiting');
+        }
+        else {
+            result.createdFiles.forEach((file) => {
+                logging_1.logger.info((0, logging_1.success)(`Created ${file.filePath}`));
+            });
         }
     }
 }
@@ -377,7 +410,7 @@ async function getUnconnectedComponentsAndConnectedComponentMappings(cmd, figmaF
     const fileKey = (0, helpers_1.parseFileKey)(figmaFileUrl);
     const codeConnectObjects = await (0, connect_1.getCodeConnectObjects)(dir, cmd, projectInfo, true);
     const connectedNodeIdsInFileToCodeConnectObjectMap = codeConnectObjects.reduce((map, codeConnectJson) => {
-        const parsedNode = (0, validation_1.parseFigmaNode)(cmd, codeConnectJson, true);
+        const parsedNode = (0, validation_1.parseFigmaNode)(cmd.verbose, codeConnectJson, true);
         if (parsedNode && parsedNode.fileKey === fileKey) {
             map[parsedNode.nodeId] = codeConnectJson;
         }
@@ -396,7 +429,7 @@ async function getUnconnectedComponentsAndConnectedComponentMappings(cmd, figmaF
             });
             connectedComponentsMappings.push({
                 componentName: c.name,
-                path: relativePath ?? '(Unknown file)',
+                filepathExport: relativePath ?? '(Unknown file)',
             });
         }
         else {
@@ -448,23 +481,26 @@ async function askForTopLevelDirectoryOrDetermineFromConfig({ dir, hasConfigFile
                 frames: [''],
             },
         }).start();
-        const projectInfo = (0, project_1.getReactProjectInfo)((await (0, project_1.getProjectInfoFromConfig)(dir, configToUse)));
-        const componentPaths = projectInfo.files.filter((f) => !(0, parser_1.isFigmaConnectFile)(projectInfo.tsProgram, f));
+        let projectInfo = await (0, project_1.getProjectInfoFromConfig)(dir, configToUse);
+        if (projectInfo.config.parser === 'react') {
+            projectInfo = (0, project_1.getReactProjectInfo)(projectInfo);
+        }
+        const filepathExports = (0, helpers_2.getFilepathExportsFromFiles)(projectInfo);
         spinner.stop();
-        if (!componentPaths.length) {
+        if (!filepathExports.length) {
             if (hasConfigFile) {
-                logging_1.logger.error('No jsx/tsx files found. Please update the include/exclude globs in your config file and try again.');
+                logging_1.logger.error('No files found. Please update the include/exclude globs in your config file and try again.');
                 (0, helpers_1.exitWithFeedbackMessage)(1);
             }
             else {
-                logging_1.logger.error('No jsx/tsx files could be found in that directory. Please enter a different directory.');
+                logging_1.logger.error('No files for your project type could be found in that directory. Please enter a different directory.');
             }
         }
         else {
             return {
                 projectInfo,
                 componentDirectory,
-                componentPaths,
+                filepathExports,
             };
         }
     }
@@ -484,10 +520,6 @@ async function runWizard(cmd) {
     }));
     const dir = (0, connect_1.getDir)(cmd);
     const { hasConfigFile, config } = await (0, project_1.parseOrDetermineConfig)(dir, cmd.config);
-    if (config.parser !== 'react' && config.parser !== '__unit_test__') {
-        logging_1.logger.error('This flow currently only supports React projects. Please use one of the other commands.');
-        (0, helpers_1.exitWithFeedbackMessage)(1);
-    }
     let accessToken = (0, connect_1.getAccessToken)(cmd);
     if (!accessToken) {
         const { accessTokenEntered } = await askQuestionOrExit({
@@ -500,7 +532,7 @@ async function runWizard(cmd) {
         accessToken = accessTokenEntered;
     }
     logging_1.logger.info('');
-    const { componentDirectory, projectInfo, componentPaths } = await askForTopLevelDirectoryOrDetermineFromConfig({
+    const { componentDirectory, projectInfo, filepathExports } = await askForTopLevelDirectoryOrDetermineFromConfig({
         dir,
         hasConfigFile,
         config,
@@ -514,6 +546,7 @@ async function runWizard(cmd) {
     const componentsFromFile = await fetchTopLevelComponentsFromFile({
         accessToken,
         figmaUrl: figmaFileUrl,
+        cmd,
     });
     if (!componentsFromFile) {
         (0, helpers_1.exitWithFeedbackMessage)(1);
@@ -538,15 +571,15 @@ async function runWizard(cmd) {
             await (0, helpers_2.createCodeConnectConfig)({ dir, componentDirectory, config });
         }
     }
-    const linkedNodeIdsToPaths = {};
+    const linkedNodeIdsToFilepathExports = {};
     const { unconnectedComponents, connectedComponentsMappings } = await getUnconnectedComponentsAndConnectedComponentMappings(cmd, figmaFileUrl, componentsFromFile, projectInfo);
-    autoLinkComponents({
+    (0, autolinking_1.autoLinkComponents)({
         unconnectedComponents,
-        linkedNodeIdsToPaths,
-        componentPaths,
+        linkedNodeIdsToFilepathExports,
+        filepathExports,
     });
     logging_1.logger.info((0, boxen_1.default)(`${chalk_1.default.bold(`Connecting your components`)}\n\n` +
-        `${chalk_1.default.green(`${chalk_1.default.bold(Object.keys(linkedNodeIdsToPaths).length)} ${Object.keys(linkedNodeIdsToPaths).length === 1
+        `${chalk_1.default.green(`${chalk_1.default.bold(Object.keys(linkedNodeIdsToFilepathExports).length)} ${Object.keys(linkedNodeIdsToFilepathExports).length === 1
             ? 'component was automatically matched based on its name'
             : 'components were automatically matched based on their names'}`)}\n` +
         `${chalk_1.default.yellow(`${chalk_1.default.bold(unconnectedComponents.length)} ${unconnectedComponents.length === 1
@@ -561,8 +594,8 @@ async function runWizard(cmd) {
     const outDir = await runManualLinkingWithConfirmation({
         unconnectedComponents,
         connectedComponentsMappings,
-        linkedNodeIdsToPaths,
-        componentPaths,
+        linkedNodeIdsToFilepathExports,
+        filepathExports,
         cmd,
     });
     const unconnectedComponentsMap = unconnectedComponents.reduce((map, component) => {
@@ -570,10 +603,11 @@ async function runWizard(cmd) {
         return map;
     }, {});
     await createCodeConnectFiles({
-        linkedNodeIdsToPaths,
+        linkedNodeIdsToFilepathExports,
         unconnectedComponentsMap,
         figmaFileUrl,
         outDir,
+        projectInfo,
     });
 }
 exports.runWizard = runWizard;