@figma/code-connect 1.0.6 → 1.1.1

package/dist/html/index_html.d.ts

@@ -0,0 +1,77 @@
+import { EnumValue, FigmaConnectAPI, FigmaConnectMeta, ValueOf } from '../connect/api';
+import { FigmaConnectClient } from '../client/figma_client';
+import { html, HtmlTemplateString } from './template_literal';
+declare const _client: FigmaConnectClient;
+declare const _figma: FigmaConnectAPI<HtmlTemplateString> & {
+    /**
+     * Defines a code snippet that displays in Figma when a component is selected.
+     *
+     * @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: Required<Pick<FigmaConnectMeta<P, HtmlTemplateString>, 'example'>> & FigmaConnectMeta<P, HtmlTemplateString>): 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: <my-label></my-label>,
+     *    false: <my-disabled-label></my-disabled-label>,
+     *  }),
+     * }
+     * ```
+     * Would replace `label` with `<my-label></my-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) => html`<my-button label=${props.nested.label}>${props.nested.icon}</my-button>`
+     * ```
+     */
+    nestedProps<V>(layer: string, input: V): V;
+    /**
+     * A list of import statements that will render in the Code Snippet in Figma.
+     */
+    imports?: string[];
+};
+declare const _html: typeof html;
+export { _figma as figma, _client as client, _html as html };
+export default _figma;
+//# sourceMappingURL=index_html.d.ts.map

package/dist/html/index_html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index_html.d.ts","sourceRoot":"","sources":["../../src/html/index_html.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAEtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAG7D,QAAA,MAAM,OAAO,EAAE,kBAAgC,CAAA;AAC/C,QAAA,MAAM,MAAM,EAAE,eAAe,CAAC,kBAAkB,CAAC,GAAG;IAClD;;;;;OAKG;IACH,OAAO,CAAC,CAAC,GAAG,EAAE,EACZ,YAAY,EAAE,MAAM,EACpB,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,EAAE,kBAAkB,CAAC,EAAE,SAAS,CAAC,CAAC,GACtE,gBAAgB,CAAC,CAAC,EAAE,kBAAkB,CAAC,GACxC,IAAI,CAAA;IAEP;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAA;IAEvC;;;;;;;;;;;;;;;;;;OAkBG;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;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;CACX,CAAA;AACT,QAAA,MAAM,KAAK,aAAO,CAAA;AAElB,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,IAAI,IAAI,EAAE,CAAA;AAC5D,eAAe,MAAM,CAAA"}

package/dist/html/index_html.js

@@ -0,0 +1,42 @@
+"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.html = exports.client = exports.figma = void 0;
+const figma = __importStar(require("./external"));
+const template_literal_1 = require("./template_literal");
+const index_common_1 = require("../connect/index_common");
+const _client = (0, index_common_1.getClient)();
+exports.client = _client;
+const _figma = figma;
+exports.figma = _figma;
+const _html = template_literal_1.html;
+exports.html = _html;
+exports.default = _figma;
+//# sourceMappingURL=index_html.js.map

package/dist/html/index_html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index_html.js","sourceRoot":"","sources":["../../src/html/index_html.ts"],"names":[],"mappings":";AAAA,8EAA8E;AAC9E,uEAAuE;AACvE,yEAAyE;AACzE,qEAAqE;AACrE,uCAAuC;;;;;;;;;;;;;;;;;;;;;;;;;;AAGvC,kDAAmC;AAEnC,yDAA6D;AAC7D,0DAAmD;AAEnD,MAAM,OAAO,GAAuB,IAAA,wBAAS,GAAE,CAAA;AAmFV,yBAAM;AAlF3C,MAAM,MAAM,GA+ER,KAAK,CAAA;AAGU,uBAAK;AAFxB,MAAM,KAAK,GAAG,uBAAI,CAAA;AAEoC,qBAAI;AAC1D,kBAAe,MAAM,CAAA"}

package/dist/html/parser.d.ts

@@ -0,0 +1,19 @@
+import ts from 'typescript';
+import { PropMappings } from '../connect/intrinsics';
+import { CodeConnectJSON } from '../connect/figma_connect';
+import { ParserContext, ParseOptions } from '../connect/parser_common';
+/**
+ * Parses the example template string passed to `figma.connect()`.
+ *
+ * @param exp A function or arrow function expression
+ * @param parserContext Parser context
+ * @param propMappings Prop mappings object as returned by parseProps
+ *
+ * @returns The code of the render function and a list of imports
+ */
+export declare function parseExampleTemplate(exp: ts.ArrowFunction, parserContext: ParserContext, propMappings?: PropMappings): {
+    code: string;
+    nestable: boolean;
+};
+export declare function parseHtmlDoc(node: ts.CallExpression, parserContext: ParserContext, { repoUrl, silent }: ParseOptions): Promise<CodeConnectJSON>;
+//# sourceMappingURL=parser.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"parser.d.ts","sourceRoot":"","sources":["../../src/html/parser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,MAAM,YAAY,CAAA;AAOjE,OAAO,EAAsB,YAAY,EAAoB,MAAM,uBAAuB,CAAA;AAC1F,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAI1D,OAAO,EAEL,aAAa,EAOb,YAAY,EACb,MAAM,0BAA0B,CAAA;AAyKjC;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,EAAE,CAAC,aAAa,EACrB,aAAa,EAAE,aAAa,EAC5B,YAAY,CAAC,EAAE,YAAY;;;EA4L5B;AAiID,wBAAsB,YAAY,CAChC,IAAI,EAAE,EAAE,CAAC,cAAc,EACvB,aAAa,EAAE,aAAa,EAC5B,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,YAAY,GAChC,OAAO,CAAC,eAAe,CAAC,CA6D1B"}

package/dist/html/parser.js

@@ -0,0 +1,487 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseHtmlDoc = exports.parseExampleTemplate = void 0;
+const typescript_1 = __importStar(require("typescript"));
+const compiler_1 = require("../typescript/compiler");
+const intrinsics_1 = require("../connect/intrinsics");
+const parser_template_helpers_1 = require("./parser_template_helpers");
+const jsdom_1 = require("jsdom");
+const parse5_1 = require("parse5");
+const parser_common_1 = require("../connect/parser_common");
+const prettier_1 = require("prettier");
+function getHtmlTaggedTemplateNode(node) {
+    if (typescript_1.default.isTaggedTemplateExpression(node)) {
+        const tag = node.tag;
+        if (typescript_1.default.isIdentifier(tag) && tag.text === 'html') {
+            return node;
+        }
+    }
+    else if (typescript_1.default.isBlock(node) &&
+        node.statements.length === 1 &&
+        typescript_1.default.isReturnStatement(node.statements[0]) &&
+        node.statements[0].expression &&
+        typescript_1.default.isTaggedTemplateExpression(node.statements[0].expression) &&
+        typescript_1.default.isIdentifier(node.statements[0].expression.tag) &&
+        node.statements[0].expression.tag.text === 'html') {
+        return node.statements[0].expression;
+    }
+    return undefined;
+}
+/**
+ * This function converts the HTML template literal into a DOM (using JSDOM) to
+ * extract information which is used in generating the template:
+ * 1. A dictionary of template placeholders which correspond to HTML attribute
+ *    values. The key is the placeholder index, and the value is the attribute
+ *    name. We use this to render attribute placeholders appropriately (either
+ *    in quotes for strings, or as either the attribute name or nothing for
+ *    booleans).
+ * 2. Whether the template is "nestable" or not. A template is considered
+ *    nestable if it has only one top level element.
+ *
+ * For finding the attribute placeholders, the algorithm is as follows:
+ * 1. Build up a full string from the template literal, replacing any value
+ *    ${placeholders} with `__FIGMA_PLACEHOLDER_0`, where 0 is the placeholder
+ *    index. This results in a valid HTML string, with placeholders we can later
+ *    detect.
+ * 2. Use JSDOM to turn this into a DOM.
+ * 3. Iterate over every node in the DOM, and if the node has any attributes
+ *    starting `__FIGMA_PLACEHOLDER`, store the info of these attributes.
+ *    This allows us to know which template literal placeholders correspond to
+ *    HTML attributes when we construct the template.
+ */
+function getInfoFromDom(templateExp, parserContext) {
+    let htmlString;
+    if (typescript_1.default.isTemplateExpression(templateExp)) {
+        // If this is a template expression, build up the HTML string with
+        // identifiable placeholders as described above
+        htmlString = templateExp.head.text;
+        templateExp.templateSpans.forEach((part, index) => {
+            htmlString += `__FIGMA_PLACEHOLDER_${index}` + part.literal.text;
+        });
+    }
+    else if (templateExp.template.kind === typescript_1.default.SyntaxKind.FirstTemplateToken) {
+        // This is just a template literal with no placeholders
+        htmlString = templateExp.template.text;
+    }
+    else {
+        // This should never happen as we check the type in the calling function
+        throw new Error(`Unsupported template type: ${typescript_1.SyntaxKind[templateExp.template.kind]}`);
+    }
+    // First, check for HTML which we cannot handle. JSDOM is quite forgiving,
+    // like a browser, but we need to be stricter
+    //
+    // Duplicate attribute names are handled gracefully by JSDOM (it just keeps
+    // one of the attributes), but this breaks our algorithm because some of the
+    // placeholders are no longer in the DOM. JSDOM has no way to detect this, but
+    // parse5 (which is a library JSDOM uses under the hood) can detect this. We
+    // just thrown an error in this case as there's no use case for doing this.
+    (0, parse5_1.parse)(htmlString, {
+        onParseError: (error) => {
+            if (error.code === 'duplicate-attribute') {
+                throw new parser_common_1.ParserError(`Duplicate attribute name in example HTML`, {
+                    node: templateExp,
+                    sourceFile: parserContext.sourceFile,
+                });
+            }
+        },
+    });
+    // Try to format the HTML with prettier, to catch any errors due to invalid
+    // HTML which would otherwise result in broken formatting in the UI as
+    // prettier is less forgiving
+    try {
+        // pluginSearchDirs: false is needed as otherwise prettier picks up other
+        // prettier plugins in our monorepo and fails on CI
+        (0, prettier_1.format)(htmlString, { parser: 'html', pluginSearchDirs: false });
+    }
+    catch (e) {
+        throw new parser_common_1.ParserError(`Error parsing example HTML. Check the HTML is valid.`, {
+            node: templateExp,
+            sourceFile: parserContext.sourceFile,
+        });
+    }
+    // Create a DOM with JSDOM.
+    //
+    // JSDOM doesn't work properly in all cases if we parse a DOM without a full
+    // document, e.g. Vue templates - when traversing with NodeIterator, it
+    // doesn't find all elements. We create a Fragment then append it to a full
+    // DOM to work around this. The extra wrapping elements don't matter, as we're
+    // only interested in the attributes.
+    const fragment = jsdom_1.JSDOM.fragment(htmlString);
+    const dom = new jsdom_1.JSDOM('<!DOCTYPE html><html><body></body></html>');
+    dom.window.document.body.appendChild(fragment);
+    const document = dom.window.document;
+    const NodeFilter = dom.window.NodeFilter;
+    const attributePlaceholders = {};
+    function iterateNodeIterator(nodeIterator) {
+        let currentNode;
+        while ((currentNode = nodeIterator.nextNode())) {
+            // I couldn't work out how to do this in a way which satisfies TypeScript,
+            // so using a check and a cast
+            if (currentNode.nodeType === dom.window.Node.ELEMENT_NODE) {
+                // Check for any attributes which correspond to placeholders in the
+                // template literal, and store their index and name
+                for (let attr of currentNode.attributes) {
+                    if (attr.value.startsWith('__FIGMA_PLACEHOLDER_')) {
+                        attributePlaceholders[parseInt(attr.value.split('__FIGMA_PLACEHOLDER_')[1])] = attr.name;
+                    }
+                }
+            }
+            // <TEMPLATE> nodes are not iterated over by default, as they are a way to
+            // store a fragment which is not rendered immediately. These are used in
+            // e.g. Vue templates, so we need to  iterate over them explicitly.
+            if (currentNode.nodeName === 'TEMPLATE') {
+                const templateContent = currentNode.content;
+                const templateNodeIterator = document.createNodeIterator(templateContent, NodeFilter.SHOW_ELEMENT, null);
+                iterateNodeIterator(templateNodeIterator);
+            }
+        }
+    }
+    // Iterate over all the nodes in the DOM
+    const nodeIterator = document.createNodeIterator(document.body, NodeFilter.SHOW_ELEMENT, null);
+    iterateNodeIterator(nodeIterator);
+    // We check if there is more than one top level child, as we use this as a
+    // signal that the template is not "nestable" (and so we render an instance
+    // pill rather than render the child's code inline in the UI)
+    const topLevelChildrenCount = document.body.children.length;
+    return {
+        attributePlaceholders,
+        nestable: topLevelChildrenCount === 1,
+    };
+}
+function escapeTemplateString(code) {
+    return code.replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+}
+/**
+ * Parses the example template string passed to `figma.connect()`.
+ *
+ * @param exp A function or arrow function expression
+ * @param parserContext Parser context
+ * @param propMappings Prop mappings object as returned by parseProps
+ *
+ * @returns The code of the render function and a list of imports
+ */
+function parseExampleTemplate(exp, parserContext, propMappings) {
+    const { sourceFile } = parserContext;
+    if (exp.parameters.length > 1) {
+        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];
+    if (!exp.body) {
+        throw new parser_common_1.ParserError(`Expected a body for the render function`, { sourceFile, node: exp });
+    }
+    const templateNode = getHtmlTaggedTemplateNode(exp.body);
+    if (!templateNode) {
+        throw new parser_common_1.ParserError(`Expected only a tagged template literal as the body of the render function`, { sourceFile, node: templateNode });
+    }
+    // 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();
+    let exampleCode = '';
+    let nestable = true;
+    if ((0, typescript_1.isTemplateExpression)(templateNode.template)) {
+        // This is a template expression with placeholders
+        const createPropPlaceholder = (0, parser_common_1.makeCreatePropPlaceholder)({
+            propMappings,
+            referencedProps,
+            sourceFile,
+        });
+        // Transform the template to replace any props references with placeholder
+        // function calls, normalising the different types of props references
+        const transformedTemplate = typescript_1.default.transform(templateNode.template, [
+            (context) => (rootNode) => {
+                function visit(node) {
+                    if (typescript_1.default.isTemplateSpan(node)) {
+                        const visitResult = (0, parser_common_1.visitPropReferencingNode)({
+                            propsParameter,
+                            node: node.expression,
+                            createPropPlaceholder,
+                            useJsx: false,
+                        });
+                        if (visitResult) {
+                            return typescript_1.default.factory.createTemplateSpan(visitResult, node.literal);
+                        }
+                    }
+                    return typescript_1.default.visitEachChild(node, visit, context);
+                }
+                return typescript_1.default.visitNode(rootNode, visit);
+            },
+        ]).transformed[0];
+        // Iterate over the template string spans (i.e. the interleaved strings and
+        // placeholders) to build up our example code.
+        //
+        // Each time we encounter a placeholder (which by this point has been
+        // normalised to a __PROP__ placeholder function call), we check if it
+        // corresponds to a HTML attribute based on our previous DOM analysis (see
+        // getInfoFromDom).
+        //
+        // If it does, we replace it with a call to
+        // `_fcc_renderHtmlAttribute("attributeName", propVariableName), otherwise
+        // we replace it with a call to `_fcc_renderHtmlValue(propVariableName)`.
+        //
+        // We have some additional logic to handle cases where the user accidentally
+        // writes `attribute="${props.prop}"` rather than `attribute=${props.prop}`
+        // (which is what we show in the docs), as it's easy to make this mistake
+        // when copy/pasting.
+        // Keep track of whether we're inside an attribute value that is wrapped in quotes,
+        // so that we can strip the trailing quote if we are
+        let insideAttributeWithQuotes = false;
+        const infoFromDom = getInfoFromDom(transformedTemplate, parserContext);
+        const { attributePlaceholders } = infoFromDom;
+        nestable = infoFromDom.nestable;
+        // Handle a chunk of HTML, i.e. a text section of the template string. If
+        // the next placeholder is an attribute and this chunk ends with a HTML
+        // attribute (i.e. matches a regex like ` text=` or ` text="`), we remove the
+        // attribute name so that it's not present in the low level template before the
+        // call to _fcc_renderHtmlAttribute.
+        function handleHtmlChunk(html, nextPlaceholderIsAttribute) {
+            // If we were previously inside an attribute value placeholder with quotes
+            // surrounding it, remove the leading quote. We do it like this rather
+            // than always removing the leading quote to avoid situations where we
+            // mistakenly remove a quote that is part of the actual content.
+            if (insideAttributeWithQuotes) {
+                html = html.replace(/^"/g, '');
+            }
+            // If the next placeholder is an attribute, then match the start of the
+            // attribute (`attribute=`) at the end of this chunk, so that we can
+            // remove it from the example code
+            const attributeMatches = html.match(/(.*\s)([^\s]+)="?$/s);
+            if (nextPlaceholderIsAttribute && attributeMatches) {
+                // attributeMatches should always have matched here, but we check it
+                // anyway so we can fail gracefully if not
+                // Add the code up to the attribute, not including the ` attribute=`
+                // part, as _fcc_renderHtmlAttribute is responsible for (maybe)
+                // rendering that
+                exampleCode += escapeTemplateString(attributeMatches[1]);
+                // If we are in this block, we know that we've matched an attribute, so
+                // store whether it ends with a quote
+                insideAttributeWithQuotes = html.endsWith('"');
+            }
+            else {
+                // No attribute to remove, just add the code
+                exampleCode += escapeTemplateString(html);
+                insideAttributeWithQuotes = false;
+            }
+        }
+        // Process the first chunk, which is a special case as it is not in templateSpans
+        handleHtmlChunk(transformedTemplate.head.text, attributePlaceholders[0] !== undefined);
+        // For each section of the template string, check that the expression is a
+        // prop placeholder, then add the appropriate template function call
+        transformedTemplate.templateSpans.forEach((part, index) => {
+            if (!typescript_1.default.isCallExpression(part.expression)) {
+                throw new parser_common_1.ParserError(`Expected an call expression as a placeholder in the template, got ${typescript_1.SyntaxKind[part.expression.kind]}`, { sourceFile, node: part.expression });
+            }
+            const propNameArg = part.expression.arguments[0];
+            if (!typescript_1.default.isStringLiteral(propNameArg)) {
+                throw new parser_common_1.ParserError(`Expected a string literal as the argument to the placeholder call, got ${typescript_1.SyntaxKind[propNameArg.kind]}`, { sourceFile, node: propNameArg });
+            }
+            const propVariableName = propNameArg.text;
+            referencedProps.add(propVariableName);
+            if (attributePlaceholders[index]) {
+                exampleCode += `\${_fcc_renderHtmlAttribute('${attributePlaceholders[index]}', ${propVariableName})}`;
+            }
+            else {
+                exampleCode += `\${_fcc_renderHtmlValue(${propVariableName})}`;
+            }
+            // Process the next chunk
+            handleHtmlChunk(part.literal.text, attributePlaceholders[index + 1] !== undefined);
+        });
+    }
+    else if (templateNode.template.kind === typescript_1.default.SyntaxKind.FirstTemplateToken) {
+        // Template string with no placeholders
+        nestable = getInfoFromDom(templateNode, parserContext).nestable;
+        exampleCode = escapeTemplateString(templateNode.template.text);
+    }
+    else {
+        throw new parser_common_1.ParserError(`Expected a template expression as the body of the render function, got ${typescript_1.SyntaxKind[templateNode.template.kind]}`, { sourceFile, node: templateNode.template });
+    }
+    let templateCode = (0, parser_template_helpers_1.getParsedTemplateHelpersString)() + '\n\n';
+    templateCode += `const figma = require('figma')\n\n`;
+    templateCode += (0, parser_common_1.getReferencedPropsForTemplate)({
+        propMappings,
+        referencedProps,
+        exp,
+        sourceFile,
+    });
+    templateCode += `export default figma.html\`${exampleCode}\`\n`;
+    return {
+        code: templateCode,
+        nestable,
+    };
+}
+exports.parseExampleTemplate = parseExampleTemplate;
+function parseFigmaConnectArgs(node, parserContext) {
+    const required = true;
+    const figmaNodeUrlArg = (0, compiler_1.parseFunctionArgument)(node, parserContext, 0, typescript_1.default.isStringLiteral, required, `\`${intrinsics_1.FIGMA_CONNECT_CALL}\` must be called with a Figma Component URL as the first argument. Example usage:
+\`${intrinsics_1.FIGMA_CONNECT_CALL}('https://www.figma.com/file/123?node-id=1-1', {
+  example: () => html\`<button />\`
+})\``);
+    const configObjArg = (0, compiler_1.parseFunctionArgument)(node, parserContext, 1, typescript_1.default.isObjectLiteralExpression, true, `The second argument to ${intrinsics_1.FIGMA_CONNECT_CALL}() must be an object literal. Example usage:
+\`${intrinsics_1.FIGMA_CONNECT_CALL}('https://www.figma.com/file/123?node-id=1-1', {
+  example: () => html\`<button />\`
+})\``);
+    return {
+        figmaNodeUrlArg,
+        configObjArg,
+    };
+}
+function parseConfigObjectArg(configArg, parserContext) {
+    if (!configArg) {
+        return {
+            propsArg: undefined,
+            exampleArg: undefined,
+            variantArg: undefined,
+            importsArg: undefined,
+            linksArg: undefined,
+        };
+    }
+    const propsArg = (0, compiler_1.parsePropertyOfType)({
+        objectLiteralNode: configArg,
+        propertyName: 'props',
+        predicate: typescript_1.default.isObjectLiteralExpression,
+        parserContext,
+        required: false,
+        errorMessage: `The 'props' property must be an object literal. Example usage:
+\`${intrinsics_1.FIGMA_CONNECT_CALL}('https://www.figma.com/file/123?node-id=1-1', {
+  props: {
+    disabled: figma.boolean('Disabled'),
+    text: figma.string('TextContent'),
+  },
+  example: (props) => html\`<my-button disabled=\${props.disabled} label=\${props.text} />\`
+})\``,
+    });
+    const exampleArg = (0, compiler_1.parsePropertyOfType)({
+        objectLiteralNode: configArg,
+        propertyName: 'example',
+        predicate: typescript_1.default.isArrowFunction,
+        parserContext,
+        required: true,
+        errorMessage: `The 'example' property must be an arrow function which returns a html tagged template string. Example usage:
+\`${intrinsics_1.FIGMA_CONNECT_CALL}('https://www.figma.com/file/123?node-id=1-1', {
+  example: (props) => html\`<my-button />\`
+})\``,
+    });
+    const variantArg = (0, compiler_1.parsePropertyOfType)({
+        objectLiteralNode: configArg,
+        propertyName: 'variant',
+        predicate: typescript_1.default.isObjectLiteralExpression,
+        parserContext,
+        required: false,
+        errorMessage: `The 'variant' property must be an object literal. Example usage:
+\`${intrinsics_1.FIGMA_CONNECT_CALL}('https://www.figma.com/file/123?node-id=1-1', {
+  variant: {
+    "Has Icon": true
+  },
+  example: (props) => html\`<my-button />\`
+})\``,
+    });
+    const linksArg = (0, compiler_1.parsePropertyOfType)({
+        objectLiteralNode: configArg,
+        propertyName: 'links',
+        predicate: typescript_1.default.isArrayLiteralExpression,
+        parserContext,
+        required: false,
+        errorMessage: `The 'links' property must be an array literal. Example usage:
+\`${intrinsics_1.FIGMA_CONNECT_CALL}('https://www.figma.com/file/123?node-id=1-1', {
+  links: [
+    { name: 'Storybook', url: 'https://storybook.com' }
+  ],
+  example: (props) => html\`<my-button />\`
+})\``,
+    });
+    const importsArg = (0, compiler_1.parsePropertyOfType)({
+        objectLiteralNode: configArg,
+        propertyName: 'imports',
+        predicate: typescript_1.default.isArrayLiteralExpression,
+        parserContext,
+        required: false,
+        errorMessage: `The 'imports' property must be an array literal. Example usage:
+\`${intrinsics_1.FIGMA_CONNECT_CALL}('https://www.figma.com/file/123?node-id=1-1', {
+  imports: ['import { Button } from "./Button"']
+  example: (props) => html\`<my-button />\`,
+})\``,
+    });
+    return {
+        propsArg,
+        exampleArg,
+        variantArg,
+        linksArg,
+        importsArg,
+    };
+}
+async function parseHtmlDoc(node, parserContext, { repoUrl, silent }) {
+    const { checker, sourceFile, config } = parserContext;
+    // Parse the arguments to the `Figma.connect()` call
+    const { figmaNodeUrlArg, configObjArg } = parseFigmaConnectArgs(node, parserContext);
+    const { propsArg, exampleArg, variantArg, linksArg, importsArg } = parseConfigObjectArg(configObjArg, parserContext);
+    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);
+        });
+    }
+    const metadata = undefined;
+    const props = propsArg ? (0, intrinsics_1.parsePropsObject)(propsArg, parserContext) : undefined;
+    const render = exampleArg ? parseExampleTemplate(exampleArg, parserContext, props) : undefined;
+    const variant = variantArg ? (0, parser_common_1.parseVariant)(variantArg, sourceFile, checker) : undefined;
+    const links = linksArg ? (0, parser_common_1.parseLinks)(linksArg, parserContext) : undefined;
+    let imports = importsArg ? (0, parser_common_1.parseImports)(importsArg, parserContext) : undefined;
+    let template;
+    if (render?.code) {
+        template = render.code;
+    }
+    else {
+        throw new parser_common_1.ParserError(`${intrinsics_1.FIGMA_CONNECT_CALL}() requires an example function`, {
+            sourceFile,
+            node,
+        });
+    }
+    return {
+        figmaNode,
+        label: 'Web Components',
+        language: 'html',
+        component: metadata?.component,
+        source: '',
+        sourceLocation: { line: -1 },
+        variant,
+        template,
+        templateData: {
+            // TODO: `props` here is currently only used for validation purposes,
+            // we should eventually remove it from the JSON payload
+            props,
+            imports,
+            // If there's no render function, the default example is always nestable
+            nestable: render ? render.nestable : true,
+        },
+        links,
+        metadata: {
+            cliVersion: require('../../package.json').version,
+        },
+    };
+}
+exports.parseHtmlDoc = parseHtmlDoc;
+//# sourceMappingURL=parser.js.map