@figma/code-connect 1.0.6 → 1.1.0

package/dist/react/index_react.d.ts

@@ -0,0 +1,94 @@
+/// <reference types="react" />
+import { EnumValue, FigmaConnectAPI, FigmaConnectMeta, ValueOf } from '../connect/api';
+import * as StorybookTypes from '../storybook/external';
+import { FigmaConnectClient } from '../client/figma_client';
+declare const _client: FigmaConnectClient;
+declare const _figma: FigmaConnectAPI<JSX.Element> & {
+    /**
+     * Defines a code snippet that displays in Figma when a component is selected. This function has two signatures:
+     * - When called with a component reference as the first argument, it will infer metadata such as the import statement
+     * and location in source file from the component reference
+     * - When called only with a Figma node URL, this metadata will not be included. This is useful when you want to display a code snippet
+     * for something that isn't a React component, such as a `<button>` element
+     *
+     * @param component A reference to the React component
+     * @param figmaNodeUrl A link to the node in Figma, for example:`https://www.figma.com/file/123abc/My-Component?node-id=123:456`
+     * @param meta {@link FigmaConnectMeta}
+     */
+    connect<P = {}>(component: any, figmaNodeUrl: string, meta?: FigmaConnectMeta<P, React.Component | JSX.Element>): void;
+    /**
+     * Defines a code snippet that displays in Figma when a component is selected. This function has two signatures:
+     * - When called with a component reference as the first argument, it will infer metadata such as the import statement
+     * and location in source file from the component reference
+     * - When called only with a Figma node URL, this metadata will not be included. This is useful when you want to display a code snippet
+     * for something that isn't a React component, such as a `<button>` element
+     *
+     * @param figmaNodeUrl A link to the node in Figma, for example:`https://www.figma.com/file/123abc/My-Component?node-id=123:456`
+     * @param meta {@link FigmaConnectMeta}
+     */
+    connect<P = {}>(figmaNodeUrl: string, meta?: FigmaConnectMeta<P, React.Component | JSX.Element>): void;
+    /**
+     * Maps a Figma property to a boolean value for the connected component. This prop is replaced
+     * with values from the Figma instance when viewed in Dev Mode. For example:
+     * ```ts
+     * props: {
+     *  disabled: figma.boolean('Disabled'),
+     * }
+     * ```
+     * Would show the `disabled` property if the Figma property "Disabled" is true.
+     *
+     * @param figmaPropName The name of the property on the Figma component
+     */
+    boolean(figmaPropName: string): boolean;
+    /**
+     * Maps a Figma boolean property to a set of values for the connected component, providing
+     * a value mapping for `true` and `false`. This prop is replaced with values from the
+     * Figma instance when viewed in Dev Mode. Example:
+     * ```ts
+     * props: {
+     *  label: figma.boolean('Disabled', {
+     *    true: <Label />,
+     *    false: <HiddenLabel />
+     *  }),
+     * }
+     * ```
+     * Would replace `label` with `<Label />` if the Figma property "Disabled" is true.
+     *
+     * @param figmaPropName The name of the property on the Figma component
+     * @param valueMapping A mapping of values for `true` and `false`
+     */
+    boolean<TrueT extends EnumValue, FalseT extends EnumValue>(figmaPropName: string, valueMapping?: {
+        true?: TrueT;
+        false?: FalseT;
+    }): ValueOf<Record<'true' | 'false', TrueT | FalseT>>;
+    /**
+     * Maps nested properties from a Figma instance layer. The first argument
+     * should be the layer name of the nested instance. The mapping object passed
+     * in is in the same format as the `props` object in the `connect` function.
+     * For example:
+     * ```ts
+     * props: {
+     *   nested: figma.nestedProps('Nested', {
+     *     label: figma.string('Text'),
+     *     icon: figma.instance('Icon'),
+     *   }),
+     * }
+     * ```
+     *
+     * Which would then allow you to access the nested properties in the `example` function like so:
+     * ```ts
+     * (props) => <Button label={props.nested.label} icon={props.nested.icon} />
+     * ```
+     */
+    nestedProps<V>(layer: string, input: V): V;
+    /**
+     * A list of import statements that will render in the Code Snippet in Figma.
+     * This overrides the auto-generated imports for the component. When this is specified,
+     * the `importPaths` option in the config file is also ignored.
+     */
+    imports?: string[];
+};
+export { _figma as figma, _client as client };
+export default _figma;
+export type StoryParameters<T = {}> = StorybookTypes.StoryParameters<T>;
+//# sourceMappingURL=index_react.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index_react.d.ts","sourceRoot":"","sources":["../../src/react/index_react.ts"],"names":[],"mappings":";AAMA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAEtF,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAG3D,QAAA,MAAM,OAAO,EAAE,kBAAgC,CAAA;AAC/C,QAAA,MAAM,MAAM,EAAE,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG;IAC3C;;;;;;;;;;OAUG;IACH,OAAO,CAAC,CAAC,GAAG,EAAE,EACZ,SAAS,EAAE,GAAG,EACd,YAAY,EAAE,MAAM,EACpB,IAAI,CAAC,EAAE,gBAAgB,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,GACxD,IAAI,CAAA;IAEP;;;;;;;;;OASG;IACH,OAAO,CAAC,CAAC,GAAG,EAAE,EACZ,YAAY,EAAE,MAAM,EACpB,IAAI,CAAC,EAAE,gBAAgB,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,GACxD,IAAI,CAAA;IAEP;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAA;IAEvC;;;;;;;;;;;;;;;;OAgBG;IACH,OAAO,CAAC,KAAK,SAAS,SAAS,EAAE,MAAM,SAAS,SAAS,EACvD,aAAa,EAAE,MAAM,EACrB,YAAY,CAAC,EAAE;QACb,IAAI,CAAC,EAAE,KAAK,CAAA;QACZ,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,GACA,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,OAAO,EAAE,KAAK,GAAG,MAAM,CAAC,CAAC,CAAA;IAEpD;;;;;;;;;;;;;;;;;;OAkBG;IACH,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAAA;IAE1C;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;CACX,CAAA;AAET,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,OAAO,IAAI,MAAM,EAAE,CAAA;AAC7C,eAAe,MAAM,CAAA;AAErB,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,EAAE,IAAI,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC,CAAA"}

package/dist/react/index_react.js

@@ -0,0 +1,39 @@
+"use strict";
+// IMPORTANT: be careful to ensure you don't accidentally add code which has a
+// dependency on Node.js-only modules here, as it will break co-located
+// components. We don't have a test for this yet. Any such code should be
+// conditionally required - see `client` for an example. Reach out in
+// #feat-code-connect if you're unsure.
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.client = exports.figma = void 0;
+const figma = __importStar(require("./external"));
+const index_common_1 = require("../connect/index_common");
+const _client = (0, index_common_1.getClient)();
+exports.client = _client;
+const _figma = figma;
+exports.figma = _figma;
+exports.default = _figma;
+//# sourceMappingURL=index_react.js.map

package/dist/react/index_react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index_react.js","sourceRoot":"","sources":["../../src/react/index_react.ts"],"names":[],"mappings":";AAAA,8EAA8E;AAC9E,uEAAuE;AACvE,yEAAyE;AACzE,qEAAqE;AACrE,uCAAuC;;;;;;;;;;;;;;;;;;;;;;;;;;AAGvC,kDAAmC;AAGnC,0DAAmD;AAEnD,MAAM,OAAO,GAAuB,IAAA,wBAAS,GAAE,CAAA;AAsGV,yBAAM;AArG3C,MAAM,MAAM,GAmGR,KAAK,CAAA;AAEU,uBAAK;AACxB,kBAAe,MAAM,CAAA"}

package/dist/react/parser.d.ts

@@ -1,26 +1,8 @@
 import ts from 'typescript';
-import { CodeConnectReactConfig } from '../connect/project';
-import { PropMappings } from '../common/intrinsics';
-interface ParserErrorContext {
-    sourceFile: ts.SourceFile;
-    node: ts.Node | undefined;
-}
-export declare class ParserError extends Error {
-    sourceFilePosition: ts.LineAndCharacter | null;
-    sourceFileName: string;
-    constructor(message: string, context?: ParserErrorContext);
-    toString(): string;
-    toDebugString(): string;
-}
-export declare class InternalError extends ParserError {
-    constructor(message: string);
-}
-export interface ParserContext {
-    checker: ts.TypeChecker;
-    sourceFile: ts.SourceFile;
-    config: CodeConnectReactConfig;
-    absPath: string;
-}
+import { PropMappings } from '../connect/intrinsics';
+import { CodeConnectJSON } from '../connect/figma_connect';
+import { ParserContext, ParseOptions } from '../connect/parser_common';
+export declare function findAndResolveImports(program: ts.Program, sourceFile: ts.SourceFile): Record<string, string>;
 export type ComponentTypeSignature = Record<string, string>;
 /**
  * Extracts the type signature from the interface of a React component as a map of
@@ -46,19 +28,11 @@ export declare function extractComponentTypeSignature(symbol: ts.Symbol, checker
  * @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, absPath }: ParserContext, silent?: boolean): Promise<{
+export declare function parseComponentMetadata(node: ts.PropertyAccessExpression | ts.Identifier | ts.Expression, parserContext: ParserContext, silent?: boolean): Promise<{
     source: string;
     line: number;
     component: string;
 }>;
-/**
- * Checks if a file contains Code Connect by looking for the `figma.connect()` function call
- *
- * @param program
- * @param file
- * @returns
- */
-export declare function isFigmaConnectFile(program: ts.Program, file: string): boolean;
 /**
  * Parses the render function passed to `figma.connect()`, extracting the code and
  * any import statements matching the JSX elements used in the function body
@@ -78,11 +52,5 @@ export declare function parseRenderFunction(exp: ts.ArrowFunction | ts.FunctionE
     nestable: boolean;
 };
 export declare function getDefaultTemplate(componentMetadata: Awaited<ReturnType<typeof parseComponentMetadata>>): string;
-type ParseOptions = {
-    repoUrl?: string;
-    debug?: boolean;
-    silent?: boolean;
-};
-export declare function parse(program: ts.Program, file: string, config: CodeConnectReactConfig, absPath: string, parseOptions?: ParseOptions): Promise<any[]>;
-export {};
+export declare function parseReactDoc(node: ts.CallExpression, parserContext: ParserContext, { repoUrl, silent }: ParseOptions): Promise<CodeConnectJSON>;
 //# 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,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;IAUR,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;AAuOD,MAAM,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAE3D;;;;;;;;;;;;GAYG;AACH,wBAAgB,6BAA6B,CAC3C,MAAM,EAAE,EAAE,CAAC,MAAM,EACjB,OAAO,EAAE,EAAE,CAAC,WAAW,EACvB,UAAU,EAAE,EAAE,CAAC,UAAU,0BAsD1B;AAED;;;;;;;;;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,EAC/C,MAAM,CAAC,EAAE,OAAO;;;;GA2GjB;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;;;;;;;EA+T5B;AA+LD,wBAAgB,kBAAkB,CAChC,iBAAiB,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC,UAItE;AAkHD,KAAK,YAAY,GAAG;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,wBAAsB,KAAK,CACzB,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,sBAAsB,EAC9B,OAAO,EAAE,MAAM,EACf,YAAY,GAAE,YAAiB,GAC9B,OAAO,CAAC,GAAG,EAAE,CAAC,CAmChB"}
+{"version":3,"file":"parser.d.ts","sourceRoot":"","sources":["../../src/react/parser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAA;AAW3B,OAAO,EAAsB,YAAY,EAAoB,MAAM,uBAAuB,CAAA;AAC1F,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EAIL,aAAa,EASb,YAAY,EACb,MAAM,0BAA0B,CAAA;AAgFjC,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,UAAU,0BAanF;AAsMD,MAAM,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAE3D;;;;;;;;;;;;GAYG;AACH,wBAAgB,6BAA6B,CAC3C,MAAM,EAAE,EAAE,CAAC,MAAM,EACjB,OAAO,EAAE,EAAE,CAAC,WAAW,EACvB,UAAU,EAAE,EAAE,CAAC,UAAU,0BA0E1B;AAED;;;;;;;;;GASG;AACH,wBAAsB,sBAAsB,CAC1C,IAAI,EAAE,EAAE,CAAC,wBAAwB,GAAG,EAAE,CAAC,UAAU,GAAG,EAAE,CAAC,UAAU,EACjE,aAAa,EAAE,aAAa,EAC5B,MAAM,CAAC,EAAE,OAAO;;;;GA4GjB;AAED;;;;;;;;;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;;;;;;;EA8O5B;AA+LD,wBAAgB,kBAAkB,CAChC,iBAAiB,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC,UAItE;AAED,wBAAsB,aAAa,CACjC,IAAI,EAAE,EAAE,CAAC,cAAc,EACvB,aAAa,EAAE,aAAa,EAC5B,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,YAAY,GAChC,OAAO,CAAC,eAAe,CAAC,CAyG1B"}