@figma/code-connect 1.0.5 → 1.1.0

package/dist/react/parser.js

@@ -3,42 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parse = exports.getDefaultTemplate = exports.parseRenderFunction = exports.isFigmaConnectFile = exports.parseComponentMetadata = exports.extractComponentTypeSignature = exports.InternalError = exports.ParserError = void 0;
+exports.parseReactDoc = exports.getDefaultTemplate = exports.parseRenderFunction = exports.parseComponentMetadata = exports.extractComponentTypeSignature = exports.findAndResolveImports = void 0;
 const typescript_1 = __importDefault(require("typescript"));
 const project_1 = require("../connect/project");
 const logging_1 = require("../common/logging");
 const compiler_1 = require("../typescript/compiler");
-const intrinsics_1 = require("../common/intrinsics");
+const intrinsics_1 = require("../connect/intrinsics");
 const parser_template_helpers_1 = require("./parser_template_helpers");
-class ParserError extends Error {
-    constructor(message, context) {
-        super(message);
-        this.name = 'ParserError';
-        this.sourceFileName = context?.sourceFile.fileName || '';
-        this.sourceFilePosition =
-            context && context.node
-                ? getPositionInSourceFile(context.node, context.sourceFile) || null
-                : null;
-    }
-    toString() {
-        let msg = `${(0, logging_1.highlight)((0, logging_1.error)(this.name))}: ${this.message}\n`;
-        if (this.sourceFileName && this.sourceFilePosition) {
-            msg += ` -> ${(0, logging_1.reset)(this.sourceFileName)}:${this.sourceFilePosition.line}:${this.sourceFilePosition.character}\n`;
-        }
-        return msg;
-    }
-    toDebugString() {
-        return this.toString() + `\n ${this.stack}`;
-    }
-}
-exports.ParserError = ParserError;
-class InternalError extends ParserError {
-    constructor(message) {
-        super(message);
-        this.name = 'InternalError';
-    }
-}
-exports.InternalError = InternalError;
+const parser_common_1 = require("../connect/parser_common");
 /**
  * Traverses the AST and returns the first JSX element it finds
  * @param node AST node
@@ -60,20 +32,6 @@ function findBlock(node) {
         return typescript_1.default.forEachChild(node, findBlock);
     }
 }
-function findDescendants(node, cb) {
-    const matches = [];
-    function visit(node) {
-        if (cb(node)) {
-            matches.push(node);
-        }
-        typescript_1.default.forEachChild(node, visit);
-    }
-    visit(node);
-    return matches;
-}
-function getPositionInSourceFile(node, sourceFile) {
-    return sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile));
-}
 /**
  * Walks up the AST from an assignment to find the import declaration
  */
@@ -97,6 +55,33 @@ function getImportsOfModule(sourceFile) {
     visit(sourceFile);
     return imports;
 }
+function resolveModuleSpecifier(program, sourceFile, importSpecifier) {
+    const compilerHost = typescript_1.default.createCompilerHost(program.getCompilerOptions());
+    const moduleResolutionHost = {
+        fileExists: compilerHost.fileExists,
+        readFile: compilerHost.readFile,
+        directoryExists: compilerHost.directoryExists,
+        getCurrentDirectory: compilerHost.getCurrentDirectory,
+        getDirectories: compilerHost.getDirectories,
+    };
+    const resolvedModule = typescript_1.default.resolveModuleName(importSpecifier, sourceFile.fileName, program.getCompilerOptions(), moduleResolutionHost);
+    return resolvedModule.resolvedModule?.resolvedFileName;
+}
+// Traverse the source file and resolve imports
+function findAndResolveImports(program, sourceFile) {
+    const importSpecifierToFilePath = {};
+    typescript_1.default.forEachChild(sourceFile, (node) => {
+        if (typescript_1.default.isImportDeclaration(node)) {
+            const importSpecifier = node.moduleSpecifier.text;
+            const resolvedFileName = resolveModuleSpecifier(program, sourceFile, importSpecifier);
+            if (resolvedFileName) {
+                importSpecifierToFilePath[importSpecifier] = resolvedFileName;
+            }
+        }
+    });
+    return importSpecifierToFilePath;
+}
+exports.findAndResolveImports = findAndResolveImports;
 /**
  * Finds all import statements in a file that matches the given identifiers
  *
@@ -104,13 +89,15 @@ function getImportsOfModule(sourceFile) {
  * @param identifiers List of identifiers to find imports for
  * @returns
  */
-function getImportsForIdentifiers({ sourceFile }, _identifiers) {
+function getSourceFilesOfImportedIdentifiers(parserContext, _identifiers) {
+    const { sourceFile, resolvedImports } = parserContext;
     const importDeclarations = getImportsOfModule(sourceFile);
     const imports = [];
     const identifiers = _identifiers.map((identifier) => identifier.split('.')[0]);
     for (const declaration of importDeclarations) {
         let statement = declaration.getText();
-        const file = declaration.getSourceFile();
+        // remove the quotation marks around the module specifier
+        const moduleSpecifier = declaration.moduleSpecifier.getText().slice(1, -1);
         if (declaration.importClause) {
             // Default imports
             if (declaration.importClause.name) {
@@ -118,7 +105,7 @@ function getImportsForIdentifiers({ sourceFile }, _identifiers) {
                 if (identifiers.includes(identifier)) {
                     imports.push({
                         statement,
-                        file: file.fileName,
+                        file: resolvedImports[moduleSpecifier],
                     });
                 }
             }
@@ -133,7 +120,7 @@ function getImportsForIdentifiers({ sourceFile }, _identifiers) {
                     if (elements.length > 0) {
                         imports.push({
                             statement: statement.replace(/{.*}/s, `{ ${elements.join(', ')} }`),
-                            file: file.fileName,
+                            file: resolvedImports[moduleSpecifier],
                         });
                     }
                 }
@@ -143,7 +130,7 @@ function getImportsForIdentifiers({ sourceFile }, _identifiers) {
                     if (identifiers.includes(identifier)) {
                         imports.push({
                             statement,
-                            file: file.fileName,
+                            file: resolvedImports[moduleSpecifier],
                         });
                     }
                 }
@@ -193,6 +180,25 @@ function getDeclarationFromSymbol(symbol) {
     }
     return symbol.declarations[0];
 }
+function resolveIdentifierSymbol(identifier, checker) {
+    const componentSymbol = checker.getSymbolAtLocation(identifier);
+    if (!componentSymbol) {
+        throw new Error(`Symbol not found at location ${identifier.getText()}`);
+    }
+    const componentDeclaration = getDeclarationFromSymbol(componentSymbol);
+    if (typescript_1.default.isImportSpecifier(componentDeclaration) || typescript_1.default.isImportClause(componentDeclaration)) {
+        let importDeclaration = findParentImportDeclaration(componentDeclaration);
+        if (!importDeclaration) {
+            throw new Error('No import statement found for component');
+        }
+        // The component should be imported from another file, we need to follow the
+        // aliased symbol to get the correct function definition
+        if (componentSymbol.flags & typescript_1.default.SymbolFlags.Alias) {
+            return checker.getAliasedSymbol(componentSymbol);
+        }
+    }
+    return componentSymbol;
+}
 /**
  * This handles a number of cases for finding the function expression of an exported symbol:
  * - A function that is exported directly (function declaration)
@@ -219,17 +225,24 @@ function findFunctionExpression(declaration, checker, sourceFile) {
     // Example: export const MemoButton = memo(Button)
     // Example: export const ButtonWithRef = forwardRef(Button)
     if (typescript_1.default.isVariableDeclaration(declaration)) {
-        const callExpression = findCallExpression(declaration);
-        const component = callExpression.arguments[0];
-        // follow the symbol to its declaration, then try to find the function expression again
-        const componentSymbol = checker.getSymbolAtLocation(component);
+        let componentSymbol = undefined;
+        // Example: export const SomeAlias = Button
+        if (declaration.initializer && typescript_1.default.isIdentifier(declaration.initializer)) {
+            componentSymbol = resolveIdentifierSymbol(declaration.initializer, checker);
+        }
+        else {
+            const callExpression = findCallExpression(declaration);
+            const component = callExpression.arguments[0];
+            // follow the symbol to its declaration, then try to find the function expression again
+            componentSymbol = checker.getSymbolAtLocation(component);
+        }
         if (!componentSymbol) {
             throw new Error('No symbol found at location');
         }
         const componentDeclaration = getDeclarationFromSymbol(componentSymbol);
         return findFunctionExpression(componentDeclaration, checker, sourceFile);
     }
-    throw new ParserError('Failed to find function expression for component', {
+    throw new parser_common_1.ParserError('Failed to find function expression for component', {
         sourceFile,
         node: declaration,
     });
@@ -250,10 +263,25 @@ function findFunctionExpression(declaration, checker, sourceFile) {
 function extractComponentTypeSignature(symbol, checker, sourceFile) {
     const declaration = getDeclarationFromSymbol(symbol);
     const ReactInterfaceNames = ['HTMLAttributes', 'Attributes', 'AriaAttributes', 'DOMAttributes'];
-    const functionExpression = findFunctionExpression(declaration, checker, sourceFile);
-    const propsType = checker.getTypeAtLocation(functionExpression.parameters[0]);
+    let propsType = null;
+    /**
+     * Special case for forwardRef as type is passed as generic arg
+     */
+    if (typescript_1.default.isVariableDeclaration(declaration)) {
+        const callExpression = findCallExpression(declaration);
+        if ((callExpression?.expression.getText() === 'forwardRef' ||
+            callExpression?.expression.getText() === 'React.forwardRef') &&
+            callExpression.typeArguments &&
+            callExpression.typeArguments.length === 2) {
+            propsType = checker.getTypeAtLocation(callExpression.typeArguments[1]);
+        }
+    }
+    if (!propsType) {
+        const functionExpression = findFunctionExpression(declaration, checker, sourceFile);
+        propsType = checker.getTypeAtLocation(functionExpression.parameters[0]);
+    }
     if (!propsType) {
-        throw new InternalError(`Failed to extract props from component declaration: ${declaration.getText()}`);
+        throw new parser_common_1.InternalError(`Failed to extract props from component declaration: ${declaration.getText()}`);
     }
     const propsMap = {};
     const props = propsType.getProperties();
@@ -297,7 +325,8 @@ exports.extractComponentTypeSignature = extractComponentTypeSignature;
  * @param node The node being parsed. Used for error logging.
  * @returns Metadata object
  */
-async function parseComponentMetadata(node, { checker, sourceFile, absPath }, silent) {
+async function parseComponentMetadata(node, parserContext, silent) {
+    const { checker, sourceFile } = parserContext;
     let componentSymbol = checker.getSymbolAtLocation(node);
     let componentSourceFile = sourceFile;
     let component = '';
@@ -306,7 +335,7 @@ async function parseComponentMetadata(node, { checker, sourceFile, absPath }, si
     if (typescript_1.default.isPropertyAccessExpression(node)) {
         componentSymbol = checker.getSymbolAtLocation(node.expression);
         if (!componentSymbol) {
-            throw new ParserError(`Could not find symbol for component ${node.expression.getText()}`, {
+            throw new parser_common_1.ParserError(`Could not find symbol for component ${node.expression.getText()}`, {
                 sourceFile,
                 node,
             });
@@ -319,7 +348,7 @@ async function parseComponentMetadata(node, { checker, sourceFile, absPath }, si
             typescript_1.default.isImportClause(componentSymbol.declarations[0]))) {
         let importDeclaration = findParentImportDeclaration(componentSymbol.declarations[0]);
         if (!importDeclaration) {
-            throw new ParserError('No import statement found for component, make sure the component is imported', {
+            throw new parser_common_1.ParserError('No import statement found for component, make sure the component is imported', {
                 sourceFile,
                 node,
             });
@@ -363,17 +392,17 @@ async function parseComponentMetadata(node, { checker, sourceFile, absPath }, si
     }
     const source = componentSourceFile.fileName;
     if (!source) {
-        throw new InternalError(`Could not find source file for component ${component} - is this file included in the directory passed to \`figma connect <dir>\`?`);
+        throw new parser_common_1.InternalError(`Could not find source file for component ${component} - is this file included in the directory passed to \`figma connect <dir>\`?`);
     }
     if (!componentDeclaration) {
-        throw new ParserError(`Could not find declaration for component ${component}`, {
+        throw new parser_common_1.ParserError(`Could not find declaration for component ${component}`, {
             sourceFile,
             node,
         });
     }
-    const line = getPositionInSourceFile(componentDeclaration, componentSourceFile).line;
+    const line = (0, parser_common_1.getPositionInSourceFile)(componentDeclaration, componentSourceFile).line;
     if (line === undefined) {
-        throw new InternalError(`Could not determine line number for component ${componentDeclaration.getStart(sourceFile)}`);
+        throw new parser_common_1.InternalError(`Could not determine line number for component ${componentDeclaration.getStart(sourceFile)}`);
     }
     return {
         source,
@@ -382,104 +411,6 @@ async function parseComponentMetadata(node, { checker, sourceFile, absPath }, si
     };
 }
 exports.parseComponentMetadata = parseComponentMetadata;
-/**
- * Checks if an AST node is a `figma.connect()` call
- *
- * @param node AST node
- * @param sourceFile Source file
- * @returns True if the node is a `figma.connect()` call
- */
-function isFigmaConnectCall(node, sourceFile) {
-    return (typescript_1.default.isCallExpression(node) && node.expression.getText(sourceFile).includes(intrinsics_1.FIGMA_CONNECT_CALL));
-}
-/**
- * Checks if a file contains Code Connect by looking for the `figma.connect()` function call
- *
- * @param program
- * @param file
- * @returns
- */
-function isFigmaConnectFile(program, file) {
-    // We don't support Code Connect in JSX and this throws an error if we let it proceed
-    if (!file.endsWith('.tsx')) {
-        return false;
-    }
-    const sourceFile = program.getSourceFile(file);
-    if (!sourceFile) {
-        throw new InternalError(`Could not find source file for ${file}`);
-    }
-    return (findDescendants(sourceFile, (node) => {
-        if (isFigmaConnectCall(node, sourceFile)) {
-            return true;
-        }
-        return false;
-    }).length > 0);
-}
-exports.isFigmaConnectFile = isFigmaConnectFile;
-/**
- * Parses the `links` field of a `figma.connect()` call
- *
- * @param linksArray an ArrayLiteralExpression
- * @param parserContext Parser context
- * @returns An array of link objects
- */
-function parseLinks(linksArray, parserContext) {
-    const { sourceFile } = parserContext;
-    const links = [];
-    for (const element of linksArray.elements) {
-        (0, compiler_1.assertIsObjectLiteralExpression)(element, sourceFile, `'links' must be an array literal with objects of the format { name: string, url: string }`);
-        const name = (0, compiler_1.parsePropertyOfType)({
-            objectLiteralNode: element,
-            propertyName: 'name',
-            predicate: typescript_1.default.isStringLiteral,
-            parserContext,
-            required: true,
-            errorMessage: "The 'name' property must be a string literal",
-        });
-        const url = (0, compiler_1.parsePropertyOfType)({
-            objectLiteralNode: element,
-            propertyName: 'url',
-            predicate: typescript_1.default.isStringLiteral,
-            parserContext,
-            required: true,
-            errorMessage: "The 'url' property must be a string literal",
-        });
-        if (name && url) {
-            links.push({ name: (0, compiler_1.stripQuotes)(name), url: (0, compiler_1.stripQuotes)(url) });
-        }
-    }
-    return links;
-}
-function parseVariant(variantMap, sourceFile, checker) {
-    return (0, compiler_1.convertObjectLiteralToJs)(variantMap, sourceFile, checker, (valueNode) => {
-        if (!typescript_1.default.isObjectLiteralElement(valueNode) &&
-            !typescript_1.default.isStringLiteral(valueNode) &&
-            !typescript_1.default.isNumericLiteral(valueNode) &&
-            valueNode.kind !== typescript_1.default.SyntaxKind.TrueKeyword &&
-            valueNode.kind !== typescript_1.default.SyntaxKind.FalseKeyword) {
-            throw new ParserError(`Invalid value for variant, got: ${valueNode.getText()}`, {
-                node: valueNode,
-                sourceFile,
-            });
-        }
-    });
-}
-/**
- * Parses the `imports` field of a `figma.connect()` call
- *
- * @param importsArray an ArrayLiteralExpression
- * @param parserContext Parser context
- * @returns An array of link objects
- */
-function parseImports(importsArray, parserContext) {
-    const { sourceFile } = parserContext;
-    const imports = [];
-    for (const element of importsArray.elements) {
-        (0, compiler_1.assertIsStringLiteral)(element, sourceFile, `'imports' must be an array literal with strings`);
-        imports.push((0, compiler_1.stripQuotes)(element));
-    }
-    return imports;
-}
 /**
  * Parses the render function passed to `figma.connect()`, extracting the code and
  * any import statements matching the JSX elements used in the function body
@@ -494,42 +425,23 @@ function parseRenderFunction(exp, parserContext, propMappings) {
     const { sourceFile } = parserContext;
     let exampleCode;
     if (exp.parameters.length > 1) {
-        throw new ParserError(`Expected a single props parameter for the render function, got ${exp.parameters.length} parameters`, { sourceFile, node: exp });
+        throw new parser_common_1.ParserError(`Expected a single props parameter for the render function, got ${exp.parameters.length} parameters`, { sourceFile, node: exp });
     }
     const propsParameter = exp.parameters[0];
     // Keep track of any props which are referenced in the example so that we can
     // insert the appropriate `figma.properties` call in the JS template
     const referencedProps = new Set();
-    function createPropPlaceholder({ name, node, wrapInJsxExpression = false, }) {
-        let propReferenceName = name;
-        // for nested prop references like `nested.prop`, we only want to look for
-        // the prop mapping of `nested`, but include the full `nested.prop` in the
-        // __PROP__ call
-        if (name.includes('.')) {
-            propReferenceName = name.split('.')[0];
-        }
-        const mappedProp = propMappings && propMappings[propReferenceName];
-        if (!mappedProp) {
-            throw new ParserError(`Could not find prop mapping for ${propReferenceName} in the props object`, {
-                sourceFile,
-                node,
-            });
-        }
-        referencedProps.add(propReferenceName);
-        const callExpression = typescript_1.default.factory.createCallExpression(typescript_1.default.factory.createIdentifier('__PROP__'), undefined, [typescript_1.default.factory.createStringLiteral(name)]);
-        if (wrapInJsxExpression) {
-            return typescript_1.default.factory.createJsxExpression(undefined, callExpression);
-        }
-        else {
-            return callExpression;
-        }
-    }
+    const createPropPlaceholder = (0, parser_common_1.makeCreatePropPlaceholder)({
+        propMappings,
+        referencedProps,
+        sourceFile,
+    });
     // Find all property access expressions in the function body and replace them
     // with a function call like `__PROP__("propName")`, so that we can easily
     // find them in the next step to convert them into
     // `${_fcc_renderReactProp(...)` in the template string.
     //
-    // Doing it this way means we can  normalize the different ways in which props
+    // Doing it this way means we can normalize the different ways in which props
     // can be accessed using the compiler API, which is much easier than using a
     // regex, then in the next step we can use a simple regex to convert that into
     // the template string.
@@ -537,33 +449,14 @@ function parseRenderFunction(exp, parserContext, propMappings) {
         exp = typescript_1.default.transform(exp, [
             (context) => (rootNode) => {
                 function visit(node) {
-                    // `props.` notation
-                    if (typescript_1.default.isIdentifier(propsParameter.name) &&
-                        typescript_1.default.isPropertyAccessExpression(node) &&
-                        node.expression.getText().startsWith(propsParameter.name.getText())) {
-                        // nested notation e.g `props.nested.prop`
-                        if (typescript_1.default.isPropertyAccessExpression(node.expression)) {
-                            const name = `${node.expression.name.getText()}.${node.name.getText()}`;
-                            return createPropPlaceholder({ name, node });
-                        }
-                        const name = node.name.getText();
-                        return createPropPlaceholder({ name, node });
-                    }
-                    // `props[""]` notation
-                    if (typescript_1.default.isIdentifier(propsParameter.name) &&
-                        typescript_1.default.isElementAccessExpression(node) &&
-                        node.expression.getText().startsWith(propsParameter.name.getText()) &&
-                        typescript_1.default.isStringLiteral(node.argumentExpression)) {
-                        const name = (0, compiler_1.stripQuotes)(node.argumentExpression);
-                        return createPropPlaceholder({ name, node });
-                    }
-                    // object destructuring references
-                    if (typescript_1.default.isObjectBindingPattern(propsParameter.name) &&
-                        typescript_1.default.isJsxExpression(node) &&
-                        node.expression &&
-                        propsParameter.name.elements.find((el) => node.expression?.getText().startsWith(el.name.getText()))) {
-                        const name = node.expression.getText();
-                        return createPropPlaceholder({ name, node, wrapInJsxExpression: true });
+                    const visitResult = (0, parser_common_1.visitPropReferencingNode)({
+                        propsParameter,
+                        node,
+                        createPropPlaceholder,
+                        useJsx: true,
+                    });
+                    if (visitResult) {
+                        return visitResult;
                     }
                     // object assignment using destructured reference, e.g `prop={{ key: value }}`
                     // (`{{ key: props.value }}` syntax will be captured by the `props.` notation branch above)
@@ -641,7 +534,7 @@ function parseRenderFunction(exp, parserContext, propMappings) {
         exampleCode = printer.printNode(typescript_1.default.EmitHint.Unspecified, functionExpression, sourceFile);
     }
     else {
-        throw new ParserError(`Expected a single JSX element or a block statement in the render function, got ${exp.getText()}`, { sourceFile, node: exp });
+        throw new parser_common_1.ParserError(`Expected a single JSX element or a block statement in the render function, got ${exp.getText()}`, { sourceFile, node: exp });
     }
     let templateCode = '';
     // Replace React prop placeholders we inserted above (like
@@ -660,9 +553,10 @@ function parseRenderFunction(exp, parserContext, propMappings) {
     exampleCode = exampleCode.replace(/\{__PROP__\("([A-Za-z_\.]+)"\)\}/g, (_match, figmaPropName) => {
         return `\${_fcc_renderReactChildren(${figmaPropName})}`;
     });
-    // Replace object values like `{ prop: __PROP__("propName") }` with
-    // `{ prop: ${propName} }`. These never need special treatment based on their type.
-    exampleCode = exampleCode.replace(/([A-Za-z0-9]+):\s+__PROP__\("([A-Za-z_\.]+)"\)/g, (_match, objectKey, figmaPropName) => {
+    // Replace object values like `{ prop: __PROP__("propName") }` or `{
+    // 'aria-prop': __PROP__("propName") }` with `{ prop: ${propName} }`. These
+    // never need special treatment based on their type.
+    exampleCode = exampleCode.replace(/([^\s]+):\s+__PROP__\("([A-Za-z_\.]+)"\)/g, (_match, objectKey, figmaPropName) => {
         return `${objectKey}: \${_fcc_renderPropValue(${figmaPropName})}`;
     });
     // Generate the template code
@@ -670,41 +564,22 @@ function parseRenderFunction(exp, parserContext, propMappings) {
     templateCode = (0, parser_template_helpers_1.getParsedTemplateHelpersString)() + '\n\n';
     // Require the template API
     templateCode += `const figma = require('figma')\n\n`;
-    let nestedLayerCount = 0;
     // Then we output `const propName = figma.properties.<kind>('propName')` calls
     // for each referenced prop, so these are accessible to the template code.
-    if (propMappings && referencedProps.size > 0) {
-        referencedProps.forEach((prop) => {
-            const propMapping = propMappings[prop];
-            if (!propMapping) {
-                throw new ParserError(`Could not find prop mapping for ${prop}`, {
-                    sourceFile,
-                    node: exp,
-                });
-            }
-            if (propMapping.kind === intrinsics_1.IntrinsicKind.NestedProps) {
-                // the actual layer name in figma could have a bunch of special characters in it,
-                // and if we try to normalize it to a valid JS identifier, it could conflict with
-                // other variables in the template code. So we generate a unique variable name
-                // for each nested layer reference instead.
-                const nestedLayerRef = `nestedLayer${nestedLayerCount++}`;
-                templateCode += `const ${nestedLayerRef} = figma.currentLayer.__find__("${propMapping.args.layer}")\n`;
-                templateCode += `const ${prop} = {
-${Object.entries(propMapping.args.props).map(([key, intrinsic]) => `${key}: ${(0, intrinsics_1.intrinsicToString)(intrinsic, nestedLayerRef)}\n`)}
-        }\n`;
-            }
-            else {
-                templateCode += `const ${prop} = ${(0, intrinsics_1.intrinsicToString)(propMapping)}\n`;
-            }
-        });
-        templateCode += '\n';
-    }
+    templateCode += (0, parser_common_1.getReferencedPropsForTemplate)({
+        propMappings,
+        referencedProps,
+        exp,
+        sourceFile,
+    });
+    // Escape backticks from the example code, as otherwise those would terminate the `figma.tsx` template literal
+    exampleCode = exampleCode.replace(/`/g, '\\`');
     // Finally, output the example code
     templateCode += `export default figma.tsx\`${exampleCode}\`\n`;
     // Find all JSX elements in the function body and extract their import
     // statements
-    const jsxTags = findDescendants(exp, (element) => typescript_1.default.isJsxElement(element) || typescript_1.default.isJsxSelfClosingElement(element)).map(compiler_1.getTagName);
-    const imports = getImportsForIdentifiers(parserContext, jsxTags);
+    const jsxTags = (0, parser_common_1.findDescendants)(exp, (element) => typescript_1.default.isJsxElement(element) || typescript_1.default.isJsxSelfClosingElement(element));
+    const imports = getSourceFilesOfImportedIdentifiers(parserContext, jsxTags.map(compiler_1.getTagName));
     return {
         code: templateCode,
         imports,
@@ -730,7 +605,7 @@ function followIdentifierToStringLiteralDeclaration(node, parserContext, errMess
     // If we followed the identifier to its declaration and it's not a string literal,
     // throw an error
     if (!result || !typescript_1.default.isStringLiteral(result)) {
-        throw new ParserError(errMessage, {
+        throw new parser_common_1.ParserError(errMessage, {
             node: result,
             sourceFile: parserContext.sourceFile,
         });
@@ -854,17 +729,16 @@ function getDefaultTemplate(componentMetadata) {
     return `const figma = require("figma")\n\nexport default figma.tsx\`${example}\``;
 }
 exports.getDefaultTemplate = getDefaultTemplate;
-async function parseDoc(node, parserContext, { repoUrl, silent }) {
+async function parseReactDoc(node, parserContext, { repoUrl, silent }) {
     const { checker, sourceFile, config } = parserContext;
     // Parse the arguments to the `Figma.connect()` call
     const { componentArg, figmaNodeUrlArg, configObjArg } = parseFigmaConnectArgs(node, parserContext);
-    // The ones with ! are definitely defined because their parser fn has required: true,
-    // but I couldn't work out how to model that in TypeScript
     const { propsArg, exampleArg, variantArg, linksArg, importsArg } = parseConfigObjectArg(configObjArg, parserContext);
-    let figmaNode = (0, compiler_1.stripQuotes)(figmaNodeUrlArg);
+    let figmaNode = (0, compiler_1.stripQuotesFromNode)(figmaNodeUrlArg);
     // TODO This logic is duplicated in connect.ts transformDocFromParser due to some type issues
     if (config.documentUrlSubstitutions) {
         Object.entries(config.documentUrlSubstitutions).forEach(([from, to]) => {
+            // @ts-expect-error
             figmaNode = figmaNode.replace(from, to);
         });
     }
@@ -873,11 +747,11 @@ async function parseDoc(node, parserContext, { repoUrl, silent }) {
         : undefined;
     const props = propsArg ? (0, intrinsics_1.parsePropsObject)(propsArg, parserContext) : undefined;
     const render = exampleArg ? parseRenderFunction(exampleArg, parserContext, props) : undefined;
-    const variant = variantArg ? parseVariant(variantArg, sourceFile, checker) : undefined;
-    const links = linksArg ? parseLinks(linksArg, parserContext) : undefined;
-    let resolvedImports;
+    const variant = variantArg ? (0, parser_common_1.parseVariant)(variantArg, sourceFile, checker) : undefined;
+    const links = linksArg ? (0, parser_common_1.parseLinks)(linksArg, parserContext) : undefined;
+    let mappedImports;
     if (importsArg) {
-        resolvedImports = parseImports(importsArg, parserContext);
+        mappedImports = (0, parser_common_1.parseImports)(importsArg, parserContext);
     }
     else {
         // If no template function was provided, construct one and add the import
@@ -885,7 +759,7 @@ async function parseDoc(node, parserContext, { repoUrl, silent }) {
         let imports = render?.imports
             ? render.imports
             : metadata !== undefined
-                ? getImportsForIdentifiers(parserContext, [metadata.component])
+                ? getSourceFilesOfImportedIdentifiers(parserContext, [metadata.component])
                 : [];
         if (imports.length === 0 && metadata?.component) {
             // If no imports were found, it might mean that the component is not imported, or
@@ -899,18 +773,18 @@ async function parseDoc(node, parserContext, { repoUrl, silent }) {
                 },
             ];
         }
-        resolvedImports =
+        mappedImports =
             imports.map((imp) => {
                 if (config) {
-                    const resolvedPath = (0, project_1.resolveImportPath)(imp.file, config);
-                    if (resolvedPath) {
-                        return imp.statement.replace(/['"]([\.\/a-zA-Z0-9]*)['"]/, `'${resolvedPath}'`);
+                    const mappedPath = (0, project_1.mapImportPath)(imp.file, config);
+                    if (mappedPath) {
+                        return imp.statement.replace(/['"]([\.\/a-zA-Z0-9_-]*)['"]/, `'${mappedPath}'`);
                     }
                 }
                 return imp.statement;
             }) ?? [];
     }
-    if (resolvedImports.length === 0 && metadata?.component) {
+    if (mappedImports.length === 0 && metadata?.component) {
         logging_1.logger.warn(`The import statement for ${metadata.component} could not be automatically resolved, make sure the component is imported (if not colocating) and that the path mappings are correct in your figma.config.json`);
     }
     let template;
@@ -921,7 +795,7 @@ async function parseDoc(node, parserContext, { repoUrl, silent }) {
         template = getDefaultTemplate(metadata);
     }
     else {
-        throw new ParserError(`${intrinsics_1.FIGMA_CONNECT_CALL}() requires either a component argument or an example function`, { sourceFile, node });
+        throw new parser_common_1.ParserError(`${intrinsics_1.FIGMA_CONNECT_CALL}() requires either a component argument or an example function`, { sourceFile, node });
     }
     return {
         figmaNode,
@@ -936,7 +810,7 @@ async function parseDoc(node, parserContext, { repoUrl, silent }) {
             // TODO: `props` here is currently only used for validation purposes,
             // we should eventually remove it from the JSON payload
             props,
-            imports: resolvedImports,
+            imports: mappedImports,
             // If there's no render function, the default example is always nestable
             nestable: render ? render.nestable : true,
         },
@@ -946,36 +820,5 @@ async function parseDoc(node, parserContext, { repoUrl, silent }) {
         },
     };
 }
-async function parse(program, file, config, absPath, parseOptions = {}) {
-    const sourceFile = program.getSourceFile(file);
-    if (!sourceFile) {
-        throw new InternalError(`Could not find source file for ${file}`);
-    }
-    const parserContext = {
-        checker: program.getTypeChecker(),
-        sourceFile,
-        config,
-        absPath,
-    };
-    const codeConnectObjects = [];
-    const nodes = [parserContext.sourceFile];
-    while (nodes.length > 0) {
-        const node = nodes.shift();
-        if (isFigmaConnectCall(node, parserContext.sourceFile)) {
-            const doc = await parseDoc(node, parserContext, parseOptions);
-            if (doc) {
-                codeConnectObjects.push(doc);
-            }
-        }
-        nodes.push(...node.getChildren(parserContext.sourceFile));
-    }
-    if (codeConnectObjects.length === 0) {
-        throw new ParserError(`Didn't find any calls to figma.connect()`, {
-            sourceFile: parserContext.sourceFile,
-            node: parserContext.sourceFile,
-        });
-    }
-    return codeConnectObjects;
-}
-exports.parse = parse;
+exports.parseReactDoc = parseReactDoc;
 //# sourceMappingURL=parser.js.map