@figma/code-connect/dist/html/create.js

A tool for connecting your design system components in code with your design system in Figma

"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 () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __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.createHtmlCodeConnect = createHtmlCodeConnect;
const path_1 = __importDefault(require("path"));
const fs_1 = __importDefault(require("fs"));
const create_1 = require("../react/create");
const prettier = __importStar(require("prettier"));
const lodash_1 = require("lodash");
const create_common_1 = require("../connect/create_common");
async function createHtmlCodeConnect(payload) {
    const { figmaConnections, normalizedName, destinationFile, destinationDir, sourceFilepath } = payload;
    const component = figmaConnections[0].component;
    const { figmaNodeUrl } = component;
    const webComponentName = (0, lodash_1.kebabCase)(normalizedName);
    const sourceFilename = sourceFilepath
        ? path_1.default.parse(sourceFilepath).name.split('.')[0]
        : webComponentName;
    const filePath = (0, create_common_1.getOutFileName)({
        outFile: destinationFile,
        outDir: destinationDir,
        sourceFilename,
        extension: 'ts',
    });
    const codeConnect = `
import figma, { html } from '@figma/code-connect/html'

/**
 * -- 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("${figmaNodeUrl}", {
  props: ${(0, create_1.generateProps)(component)},
  example: (props) => html\`<${webComponentName} />\`
})
`;
    let formatted = prettier.format(codeConnect, {
        parser: 'typescript',
        semi: false,
        trailingComma: 'all',
    });
    if (fs_1.default.existsSync(filePath)) {
        return {
            createdFiles: [],
            messages: [{ message: `File ${filePath} already exists, skipping creation`, level: 'ERROR' }],
        };
    }
    fs_1.default.mkdirSync(path_1.default.dirname(filePath), { recursive: true });
    fs_1.default.writeFileSync(filePath, formatted);
    return { createdFiles: [{ filePath }], messages: [] };
}
//# sourceMappingURL=create.js.map