@figma/code-connect 0.1.2 → 0.2.0

package/dist/parser_scripts/get_swift_parser_dir.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSwiftParserDir = void 0;
+const child_process_1 = require("child_process");
+const logging_1 = require("../common/logging");
+const get_file_if_exists_1 = require("./get_file_if_exists");
+// Find the location of the Code Connect Swift package on disk, so that we can
+// call `swift run figma-swift` from the correct location. This requires parsing
+// the output of xcodebuild for .xcodeproj projects, or parsing Package.swift
+// for SPM projects.
+//
+// As this is a first party parser, we do this in TypeScript and call it as part
+// of our code. For third party parsers, logic like this would need to be
+// implemented in a script/binary which the user points Code Connect to.
+async function getSwiftParserDir(cwd, xcodeprojPath) {
+    let figmaPackageDir;
+    // Check for the supported project types.
+    const xcodeProjFile = xcodeprojPath || (0, get_file_if_exists_1.getFileIfExists)(cwd, '*.xcodeproj');
+    const packageSwiftFile = (0, get_file_if_exists_1.getFileIfExists)(cwd, 'Package.swift');
+    if (!(xcodeProjFile || packageSwiftFile)) {
+        (0, logging_1.exitWithError)('No supported project found. Supported project types are .xcodeproj or Package.swift. You can specify the location of your .xcodeproj file with the `xcodeprojPath` config option.');
+    }
+    if (xcodeProjFile) {
+        // Use xcodebuild to get the build settings, so we can find where the Code
+        // Connect Swift package is installed
+        const buildSettings = (0, child_process_1.execSync)(`xcodebuild -project ${xcodeProjFile} -showBuildSettings`, {
+            cwd,
+        }).toString();
+        // Extract the source and version of the Code Connect Swift package from the
+        // xcodebuild output, which can be in any of the following formats depending
+        // on how it is installed:
+        // - Figma: https://github.com/figma/code-connect @ 0.1.2
+        // - Figma: /path/to/code-connect @ local
+        // - Figma: /path/to/code-connect
+        const figmaPackageMatch = buildSettings.match(/\s+Figma: ([^\s]*)(?: @ (.*))?/);
+        if (!figmaPackageMatch) {
+            (0, logging_1.exitWithError)('Code Connect Swift package not found');
+        }
+        // Find the package's location on disk, to compile and run the parser binary from
+        const [_, figmaPackageSource, figmaPackageVersion] = figmaPackageMatch;
+        // The package version is `local` if installed via the "Add package" dialog,
+        // or undefined if installed via the "Frameworks" section directly (which we
+        // do for our test project, because the dialog won't allow ancestors to be
+        // added)
+        const isLocalFigmaPackage = figmaPackageVersion === 'local' || figmaPackageVersion === undefined;
+        if (isLocalFigmaPackage) {
+            // If the version is 'local', the package is installed from a local checkout,
+            // and the path on disk is the source output by xcodebuild.
+            figmaPackageDir = figmaPackageSource;
+        }
+        else {
+            // Otherwise, the package will be installed to
+            // <DerviedData>/SourcePackages/checkouts/code-connect. We find the
+            // DerivedData location from the BUILD_DIR (which points to
+            // <DerivedData>/Build/Products).
+            const buildDir = buildSettings.match(/\s+BUILD_DIR = (.*)/);
+            if (!buildDir) {
+                (0, logging_1.exitWithError)('BUILD_DIR not found in xcodebuild output');
+            }
+            figmaPackageDir = `${buildDir[1]}/../../SourcePackages/checkouts/code-connect`;
+        }
+    }
+    else if (packageSwiftFile) {
+        // Use the Swift command to determine if the package is installed locally or from Git
+        try {
+            const packageInfo = JSON.parse((0, child_process_1.execSync)('swift package describe --type json', { cwd }).toString());
+            const codeConnectPackage = packageInfo.dependencies.find((p) => p.identity === 'code-connect') ??
+                // Our local directory is called figmadoc, so this is what swift outputs as the identity
+                packageInfo.dependencies.find((p) => p.identity === 'figmadoc');
+            if (!codeConnectPackage) {
+                (0, logging_1.exitWithError)('Code Connect Swift package not found in Package.swift');
+            }
+            if (codeConnectPackage.path) {
+                // Installed locally
+                figmaPackageDir = codeConnectPackage.path;
+            }
+            else {
+                // Installed from git, SPM clones it into this directory
+                figmaPackageDir = '.build/checkouts/code-connect';
+            }
+        }
+        catch (e) {
+            (0, logging_1.exitWithError)(`Error calling Swift command: ${e}`);
+        }
+    }
+    if (!figmaPackageDir) {
+        (0, logging_1.exitWithError)('Figma package could not be found');
+    }
+    logging_1.logger.info(`Found Code Connect Swift package at ${figmaPackageDir}, building parser binary. This may take a few minutes if this is the first time you've run Code Connect.`);
+    return figmaPackageDir;
+}
+exports.getSwiftParserDir = getSwiftParserDir;
+//# sourceMappingURL=get_swift_parser_dir.js.map

package/dist/parser_scripts/get_swift_parser_dir.js.map

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

package/dist/react/create.d.ts

@@ -0,0 +1,4 @@
+import z from 'zod';
+import { CreateRequestPayload, CreateResponsePayload } from '../connect/parser_executable_types';
+export declare function createReactCodeConnect(payload: CreateRequestPayload): Promise<z.infer<typeof CreateResponsePayload>>;
+//# sourceMappingURL=create.d.ts.map

package/dist/react/create.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../src/react/create.ts"],"names":[],"mappings":"AAGA,OAAO,CAAC,MAAM,KAAK,CAAA;AACnB,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAA;AAyFhG,wBAAsB,sBAAsB,CAC1C,OAAO,EAAE,oBAAoB,GAC5B,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,qBAAqB,CAAC,CAAC,CAoChD"}

package/dist/react/create.js

@@ -0,0 +1,132 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createReactCodeConnect = void 0;
+const lodash_1 = require("lodash");
+const prettier = __importStar(require("prettier"));
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+function isBooleanKind(propValue) {
+    const normalized = propValue.toLowerCase();
+    return (normalized === 'true' ||
+        normalized === 'false' ||
+        normalized === 'yes' ||
+        normalized === 'no' ||
+        normalized === 'on' ||
+        normalized === 'off');
+}
+function normalizePropName(name) {
+    return name.replace(/#[0-9:]*/g, '');
+}
+function generateCodePropName(name) {
+    return (0, lodash_1.camelCase)(name.replace(/[^a-zA-Z]/g, ''));
+}
+function normalizePropValue(name) {
+    // Convert the string to kebab-case
+    return name.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase();
+}
+function generateProps(component) {
+    const props = [];
+    if (!component.componentPropertyDefinitions ||
+        Object.keys(component.componentPropertyDefinitions).length === 0) {
+        return `{}`;
+    }
+    for (const [propName, propDef] of Object.entries(component.componentPropertyDefinitions)) {
+        const codePropName = generateCodePropName(propName);
+        const figmaPropName = normalizePropName(propName);
+        if (propDef.type === 'BOOLEAN') {
+            props.push(`"${codePropName}": figma.boolean('${figmaPropName}')`);
+        }
+        if (propDef.type === 'TEXT') {
+            props.push(`"${codePropName}": figma.string('${figmaPropName}')`);
+        }
+        if (propDef.type === 'VARIANT') {
+            if (propDef.variantOptions?.find((value) => isBooleanKind(value))) {
+                props.push(`"${codePropName}": figma.boolean('${figmaPropName}')`);
+            }
+            else {
+                props.push(`"${codePropName}": figma.enum('${figmaPropName}', { \n${propDef.variantOptions
+                    ?.map((value) => `  "${value}": "${normalizePropValue(value)}"`)
+                    .join(',\n')}})`);
+            }
+        }
+        if (propDef.type === 'INSTANCE_SWAP') {
+            props.push(`"${codePropName}": figma.instance('${figmaPropName}')`);
+        }
+    }
+    return `{
+  ${props.join(',\n  ')}
+}`;
+}
+function getOutFileName({ outFile, outDir, componentName, }) {
+    if (outFile) {
+        return outFile;
+    }
+    const baseName = `${componentName}.figma.tsx`;
+    if (outDir) {
+        return path_1.default.join(outDir, baseName);
+    }
+    return path_1.default.join(process.env.INIT_CWD ?? process.cwd(), baseName);
+}
+async function createReactCodeConnect(payload) {
+    const { component, destinationFile, destinationDir } = payload;
+    const { normalizedName, figmaNodeUrl } = component;
+    const filePath = getOutFileName({
+        outFile: destinationFile,
+        outDir: destinationDir,
+        componentName: normalizedName,
+    });
+    const codeConnect = `
+import React from 'react'
+import { ${normalizedName} } from './${normalizedName}'
+import figma from '@figma/code-connect'
+
+/**
+ * -- This file was auto-generated by \`figma connect create\` --
+ * \`props\` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the \`example\` function to return the
+ * code example you'd like to see in Figma
+*/
+
+figma.connect(${normalizedName}, "${figmaNodeUrl}", {
+  props: ${generateProps(component)},
+  example: (props) => <${normalizedName} />
+})
+`;
+    let formatted = await prettier.format(codeConnect, {
+        parser: 'typescript',
+        semi: false,
+        trailingComma: 'all',
+    });
+    fs_1.default.mkdirSync(path_1.default.dirname(filePath), { recursive: true });
+    fs_1.default.writeFileSync(filePath, formatted);
+    return { createdFiles: [{ filePath }], messages: [] };
+}
+exports.createReactCodeConnect = createReactCodeConnect;
+//# sourceMappingURL=create.js.map

package/dist/react/create.js.map

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

package/dist/react/parser.d.ts

@@ -1,6 +1,6 @@
 import ts from 'typescript';
-import { CodeConnectConfig } from '../common/project';
-import { Intrinsic } from '../common/intrinsics';
+import { CodeConnectReactConfig } from '../connect/project';
+import { PropMappings } from '../common/intrinsics';
 interface ParserErrorContext {
     sourceFile: ts.SourceFile;
     node: ts.Node | undefined;
@@ -18,18 +18,9 @@ export declare class InternalError extends ParserError {
 export interface ParserContext {
     checker: ts.TypeChecker;
     sourceFile: ts.SourceFile;
-    config: CodeConnectConfig | undefined;
+    config: CodeConnectReactConfig;
+    absPath: string;
 }
-/**
- * Parsers the `props` field of a `figma.connect()` call, returning a mapping of
- * prop names to their respective intrinsic types
- *
- * @param objectLiteral An object literal expression
- * @param parserContext Parser context
- * @returns
- */
-export declare function parsePropsObject(objectLiteral: ts.ObjectLiteralExpression, parserContext: ParserContext): PropMappings;
-export type PropMappings = Record<string, Intrinsic>;
 /**
  * Extract metadata about the referenced React component. Used by both the
  * Code Connect and Storybook commands.
@@ -40,7 +31,7 @@ export type PropMappings = Record<string, Intrinsic>;
  * @param node The node being parsed. Used for error logging.
  * @returns Metadata object
  */
-export declare function parseComponentMetadata(node: ts.PropertyAccessExpression | ts.Identifier | ts.Expression, { checker, sourceFile }: ParserContext): Promise<{
+export declare function parseComponentMetadata(node: ts.PropertyAccessExpression | ts.Identifier | ts.Expression, { checker, sourceFile, absPath }: ParserContext): Promise<{
     source: string;
     line: number;
     component: string;
@@ -72,6 +63,6 @@ export declare function parseRenderFunction(exp: ts.ArrowFunction | ts.FunctionE
     nestable: boolean;
 };
 export declare function getDefaultTemplate(componentMetadata: Awaited<ReturnType<typeof parseComponentMetadata>>): string;
-export declare function parse(program: ts.Program, file: string, repoUrl?: string, config?: CodeConnectConfig, debug?: boolean): Promise<any[]>;
+export declare function parse(program: ts.Program, file: string, config: CodeConnectReactConfig, absPath: string, repoUrl?: string, debug?: boolean): Promise<any[]>;
 export {};
 //# sourceMappingURL=parser.d.ts.map

package/dist/react/parser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parser.d.ts","sourceRoot":"","sources":["../../src/react/parser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,iBAAiB,EAAuC,MAAM,mBAAmB,CAAA;AAa1F,OAAO,EAEL,SAAS,EAGV,MAAM,sBAAsB,CAAA;AAK7B,UAAU,kBAAkB;IAC1B,UAAU,EAAE,EAAE,CAAC,UAAU,CAAA;IACzB,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,SAAS,CAAA;CAC1B;AAED,qBAAa,WAAY,SAAQ,KAAK;IACpC,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,GAAG,IAAI,CAAA;IAC9C,cAAc,EAAE,MAAM,CAAA;gBAEV,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,kBAAkB;IAUzD,QAAQ;IAQR,aAAa;CAGd;AAED,qBAAa,aAAc,SAAQ,WAAW;gBAChC,OAAO,EAAE,MAAM;CAI5B;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,EAAE,CAAC,WAAW,CAAA;IACvB,UAAU,EAAE,EAAE,CAAC,UAAU,CAAA;IACzB,MAAM,EAAE,iBAAiB,GAAG,SAAS,CAAA;CACtC;AAwID;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAC9B,aAAa,EAAE,EAAE,CAAC,uBAAuB,EACzC,aAAa,EAAE,aAAa,GAC3B,YAAY,CAOd;AAED,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;AAEpD;;;;;;;;;GASG;AACH,wBAAsB,sBAAsB,CAC1C,IAAI,EAAE,EAAE,CAAC,wBAAwB,GAAG,EAAE,CAAC,UAAU,GAAG,EAAE,CAAC,UAAU,EACjE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,aAAa;;;;GAwGvC;AAeD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,WAmBnE;AAkFD;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,EAAE,CAAC,aAAa,GAAG,EAAE,CAAC,kBAAkB,GAAG,EAAE,CAAC,mBAAmB,EACtE,aAAa,EAAE,aAAa,EAC5B,YAAY,CAAC,EAAE,YAAY;;;;;;;EAiP5B;AA2OD,wBAAgB,kBAAkB,CAChC,iBAAiB,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC,UAItE;AAiHD,wBAAsB,KAAK,CACzB,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,MAAM,EAChB,MAAM,CAAC,EAAE,iBAAiB,EAC1B,KAAK,CAAC,EAAE,OAAO,GACd,OAAO,CAAC,GAAG,EAAE,CAAC,CAkChB"}
+{"version":3,"file":"parser.d.ts","sourceRoot":"","sources":["../../src/react/parser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,sBAAsB,EAAuC,MAAM,oBAAoB,CAAA;AAahG,OAAO,EAGL,YAAY,EAGb,MAAM,sBAAsB,CAAA;AAM7B,UAAU,kBAAkB;IAC1B,UAAU,EAAE,EAAE,CAAC,UAAU,CAAA;IACzB,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,SAAS,CAAA;CAC1B;AAED,qBAAa,WAAY,SAAQ,KAAK;IACpC,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,GAAG,IAAI,CAAA;IAC9C,cAAc,EAAE,MAAM,CAAA;gBAEV,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,kBAAkB;IAUzD,QAAQ;IAQR,aAAa;CAGd;AAED,qBAAa,aAAc,SAAQ,WAAW;gBAChC,OAAO,EAAE,MAAM;CAI5B;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,EAAE,CAAC,WAAW,CAAA;IACvB,UAAU,EAAE,EAAE,CAAC,UAAU,CAAA;IACzB,MAAM,EAAE,sBAAsB,CAAA;IAC9B,OAAO,EAAE,MAAM,CAAA;CAChB;AAwID;;;;;;;;;GASG;AACH,wBAAsB,sBAAsB,CAC1C,IAAI,EAAE,EAAE,CAAC,wBAAwB,GAAG,EAAE,CAAC,UAAU,GAAG,EAAE,CAAC,UAAU,EACjE,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,aAAa;;;;GA8GhD;AAeD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,WAmBnE;AAkFD;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,EAAE,CAAC,aAAa,GAAG,EAAE,CAAC,kBAAkB,GAAG,EAAE,CAAC,mBAAmB,EACtE,aAAa,EAAE,aAAa,EAC5B,YAAY,CAAC,EAAE,YAAY;;;;;;;EAmS5B;AA+LD,wBAAgB,kBAAkB,CAChC,iBAAiB,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC,UAItE;AAiHD,wBAAsB,KAAK,CACzB,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,sBAAsB,EAC9B,OAAO,EAAE,MAAM,EACf,OAAO,CAAC,EAAE,MAAM,EAChB,KAAK,CAAC,EAAE,OAAO,GACd,OAAO,CAAC,GAAG,EAAE,CAAC,CAmChB"}

package/dist/react/parser.js

@@ -3,13 +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.parsePropsObject = exports.InternalError = exports.ParserError = void 0;
+exports.parse = exports.getDefaultTemplate = exports.parseRenderFunction = exports.isFigmaConnectFile = exports.parseComponentMetadata = exports.InternalError = exports.ParserError = void 0;
 const typescript_1 = __importDefault(require("typescript"));
-const project_1 = require("../common/project");
+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 parser_template_helpers_1 = require("./parser_template_helpers");
+const path_1 = __importDefault(require("path"));
 class ParserError extends Error {
     constructor(message, context) {
         super(message);
@@ -152,23 +153,6 @@ function getImportsForIdentifiers({ sourceFile }, _identifiers) {
     }
     return imports;
 }
-/**
- * Parsers the `props` field of a `figma.connect()` call, returning a mapping of
- * prop names to their respective intrinsic types
- *
- * @param objectLiteral An object literal expression
- * @param parserContext Parser context
- * @returns
- */
-function parsePropsObject(objectLiteral, parserContext) {
-    const { sourceFile, checker } = parserContext;
-    return (0, compiler_1.convertObjectLiteralToJs)(objectLiteral, sourceFile, checker, (valueNode) => {
-        if (typescript_1.default.isCallExpression(valueNode)) {
-            return (0, intrinsics_1.parseIntrinsic)(valueNode, parserContext);
-        }
-    });
-}
-exports.parsePropsObject = parsePropsObject;
 /**
  * Extract metadata about the referenced React component. Used by both the
  * Code Connect and Storybook commands.
@@ -179,7 +163,7 @@ exports.parsePropsObject = parsePropsObject;
  * @param node The node being parsed. Used for error logging.
  * @returns Metadata object
  */
-async function parseComponentMetadata(node, { checker, sourceFile }) {
+async function parseComponentMetadata(node, { checker, sourceFile, absPath }) {
     let componentSymbol = checker.getSymbolAtLocation(node);
     let componentSourceFile = sourceFile;
     let component = '';
@@ -241,7 +225,9 @@ async function parseComponentMetadata(node, { checker, sourceFile }) {
     else {
         componentDeclaration = componentSymbol?.declarations?.[0];
     }
-    const source = componentSourceFile.fileName;
+    // On Windows, fileName is relative whereas on Mac it's absolute, so we need
+    // to use path.resolve to build an absolute path
+    const source = path_1.default.join(path_1.default.resolve(componentSourceFile.fileName, absPath), path_1.default.basename(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>\`?`);
     }
@@ -381,15 +367,22 @@ function parseRenderFunction(exp, parserContext, propMappings) {
     // 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) {
-        const mappedProp = propMappings && propMappings[name];
+    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 ${name} in the props object`, {
+            throw new ParserError(`Could not find prop mapping for ${propReferenceName} in the props object`, {
                 sourceFile,
                 node,
             });
         }
-        referencedProps.add(name);
+        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);
@@ -415,8 +408,13 @@ function parseRenderFunction(exp, parserContext, propMappings) {
                     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);
+                        return createPropPlaceholder({ name, node });
                     }
                     // `props[""]` notation
                     if (typescript_1.default.isIdentifier(propsParameter.name) &&
@@ -424,15 +422,15 @@ function parseRenderFunction(exp, parserContext, propMappings) {
                         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);
+                        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) => el.name.getText() === node.expression?.getText())) {
+                        propsParameter.name.elements.find((el) => node.expression?.getText().startsWith(el.name.getText()))) {
                         const name = node.expression.getText();
-                        return createPropPlaceholder(name, node, true);
+                        return createPropPlaceholder({ name, node, wrapInJsxExpression: true });
                     }
                     // Replaces {...props} with all the prop mapped props we know about,
                     // e.g. <Button {...props} /> becomes:
@@ -455,7 +453,11 @@ function parseRenderFunction(exp, parserContext, propMappings) {
                             ? Object.keys(propMappings)
                                 .filter((prop) => !propsToExclude.includes(prop))
                                 .map((prop) => {
-                                return typescript_1.default.factory.createJsxAttribute(typescript_1.default.factory.createIdentifier(prop), createPropPlaceholder(prop, node, true));
+                                return typescript_1.default.factory.createJsxAttribute(typescript_1.default.factory.createIdentifier(prop), createPropPlaceholder({
+                                    name: prop,
+                                    node,
+                                    wrapInJsxExpression: true,
+                                }));
                             })
                             : [];
                         if (propMappings) {
@@ -502,15 +504,18 @@ function parseRenderFunction(exp, parserContext, propMappings) {
     // parser_template_helpers.ts)
     exampleCode = exampleCode.replace(
     // match " reactPropName={__PROP__("figmaPropName")}" and extract the names
-    / ([A-Za-z0-9]+)=\{__PROP__\("([A-Za-z0-9]+)"\)\}/g, (_match, reactPropName, figmaPropName) => {
+    / ([A-Za-z0-9]+)=\{__PROP__\("([A-Za-z0-9_\.]+)"\)\}/g, (_match, reactPropName, figmaPropName) => {
         return `\${_fcc_renderReactProp('${reactPropName}', ${figmaPropName})}`;
     });
     // Replace React children placeholders like `${__PROP__("propName")}` with
-    // `${propName}`. These never need special treatment based on their type.
-    exampleCode = exampleCode.replace(/\{__PROP__\("([A-Za-z]+)"\)\}/g, '${$1}');
+    // calls to _fcc_renderReactChildren, which renders them correctly (see
+    // parser_template_helpers.ts)
+    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) => {
+    exampleCode = exampleCode.replace(/([A-Za-z0-9]+):\s+__PROP__\("([A-Za-z_\.]+)"\)/g, (_match, objectKey, figmaPropName) => {
         return `${objectKey}: \${${figmaPropName}}`;
     });
     // Generate the template code
@@ -518,6 +523,7 @@ 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) {
@@ -529,7 +535,20 @@ function parseRenderFunction(exp, parserContext, propMappings) {
                     node: exp,
                 });
             }
-            templateCode += `const ${prop} = ${(0, intrinsics_1.intrinsicToString)(propMapping)}\n`;
+            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';
     }
@@ -546,30 +565,6 @@ function parseRenderFunction(exp, parserContext, propMappings) {
     };
 }
 exports.parseRenderFunction = parseRenderFunction;
-/**
- * This wrapper function ensures that property names are type checked in case
- * we make changes to the `figma.connect()` interface.
- */
-function makeConfigPropertyParser({ key, predicate, errorMessage, }) {
-    return (configArg, parserContext) => {
-        if (!configArg) {
-            return undefined;
-        }
-        return (0, compiler_1.parsePropertyOfType)({
-            objectLiteralNode: configArg,
-            propertyName: key,
-            predicate,
-            parserContext,
-            required: false,
-            errorMessage,
-        });
-    };
-}
-function makeFunctionArgumentParser({ index, predicate, required, errorMessage, }) {
-    return (node, parserContext) => {
-        return (0, compiler_1.parseFunctionArgument)(node, parserContext, index, predicate, required, errorMessage);
-    };
-}
 function followIdentifierToStringLiteralDeclaration(node, parserContext, errMessage) {
     const { checker } = parserContext;
     let result = node;
@@ -720,7 +715,7 @@ async function parseDoc(node, parserContext, repoUrl) {
     // 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);
-    if (config?.documentUrlSubstitutions) {
+    if (config.documentUrlSubstitutions) {
         Object.entries(config.documentUrlSubstitutions).forEach(([from, to]) => {
             figmaNode = figmaNode.replace(from, to);
         });
@@ -728,7 +723,7 @@ async function parseDoc(node, parserContext, repoUrl) {
     const metadata = componentArg
         ? await parseComponentMetadata(componentArg, parserContext)
         : undefined;
-    const props = propsArg ? parsePropsObject(propsArg, parserContext) : 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;
@@ -748,7 +743,7 @@ async function parseDoc(node, parserContext, repoUrl) {
             // If no imports were found, it might mean that the component is not imported, or
             // that the `figma.connect` call is in the same file as the component. In the latter
             // case - we'll want to generate one
-            const fileName = metadata.source.split('/').pop()?.split('.')[0];
+            const fileName = metadata.source.split(path_1.default.sep).pop()?.split('.')[0];
             imports = [
                 {
                     statement: `import { ${metadata.component} } from './${fileName}'`,
@@ -803,7 +798,7 @@ async function parseDoc(node, parserContext, repoUrl) {
         },
     };
 }
-async function parse(program, file, repoUrl, config, debug) {
+async function parse(program, file, config, absPath, repoUrl, debug) {
     const sourceFile = program.getSourceFile(file);
     if (!sourceFile) {
         throw new InternalError(`Could not find source file for ${file}`);
@@ -812,6 +807,7 @@ async function parse(program, file, repoUrl, config, debug) {
         checker: program.getTypeChecker(),
         sourceFile,
         config,
+        absPath,
     };
     const codeConnectObjects = [];
     const nodes = [parserContext.sourceFile];