@design-embed/plugin-figma-html 0.1.0 → 1.0.1

package/dist/external/imageDownloader.mjs

@@ -0,0 +1,66 @@
+import { join, posix } from "node:path";
+import { mkdirSync, writeFileSync } from "node:fs";
+//#region packages/plugin-figma-html/src/external/imageDownloader.ts
+async function downloadFigmaImageFills(rootNode, outDir, options = {}) {
+	const targets = collectImageFillTargets(rootNode);
+	const uniqueTargets = Array.from(new Map(targets.map((target) => [target.imageRef, target])).values());
+	if (uniqueTargets.length === 0) return [];
+	mkdirSync(outDir, { recursive: true });
+	const downloadedImages = await Promise.all(uniqueTargets.map((target) => downloadImageFill(target, outDir, options)));
+	const publicPathByRef = new Map(downloadedImages.map((image) => [image.imageRef, image.publicPath]));
+	for (const target of targets) {
+		const fill = target.fills[target.fillIndex];
+		if (fill) fill.imageLocalPath = publicPathByRef.get(target.imageRef);
+	}
+	return downloadedImages;
+}
+function collectImageFillTargets(node) {
+	const targets = [];
+	node.fills?.forEach((fill, fillIndex, fills) => {
+		if (fill.type === "IMAGE" && fill.imageRef && fill.imageUrl) targets.push({
+			imageRef: fill.imageRef,
+			imageUrl: fill.imageUrl,
+			fills,
+			fillIndex
+		});
+	});
+	for (const child of node.children || []) targets.push(...collectImageFillTargets(child));
+	return targets;
+}
+async function downloadImageFill(target, outDir, options) {
+	const response = await (options.fetcher ?? fetch)(target.imageUrl);
+	if (!response.ok) throw new Error(`Figma image download failed for ${target.imageRef}: ${response.status} ${response.statusText}`);
+	const extension = extensionFromResponse(response, target.imageUrl);
+	const filename = `${sanitizeFilename(target.imageRef)}.${extension}`;
+	const filePath = join(outDir, filename);
+	const publicPath = posix.join(options.publicPath || outDir, filename);
+	writeFileSync(filePath, Buffer.from(await response.arrayBuffer()));
+	return {
+		imageRef: target.imageRef,
+		sourceUrl: target.imageUrl,
+		filePath,
+		publicPath
+	};
+}
+function extensionFromResponse(response, url) {
+	switch (response.headers.get("content-type")?.split(";")[0]) {
+		case "image/jpeg": return "jpg";
+		case "image/png": return "png";
+		case "image/svg+xml": return "svg";
+		case "image/webp": return "webp";
+		case "image/gif": return "gif";
+	}
+	return safeUrlPathname(url).match(/\.([a-z0-9]+)$/i)?.[1]?.toLowerCase() || "img";
+}
+function safeUrlPathname(url) {
+	try {
+		return new URL(url).pathname;
+	} catch {
+		return url;
+	}
+}
+function sanitizeFilename(value) {
+	return value.replace(/[^a-zA-Z0-9_-]/g, "_");
+}
+//#endregion
+export { downloadFigmaImageFills };

package/dist/external/imageDownloader.test.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/external/imageDownloader.test.mjs

@@ -0,0 +1,42 @@
+import { getNodeStyles } from "../compilers/compilerUtils.mjs";
+import { downloadFigmaImageFills } from "./imageDownloader.mjs";
+import { join } from "node:path";
+import { mkdtempSync, readFileSync, rmSync } from "node:fs";
+import assert from "node:assert/strict";
+import { describe, test } from "node:test";
+import { tmpdir } from "node:os";
+//#region packages/plugin-figma-html/src/external/imageDownloader.test.ts
+describe("downloadFigmaImageFills", () => {
+	test("downloads image fills and attaches local paths for compilers", async () => {
+		const outDir = mkdtempSync(join(tmpdir(), "figma-images-"));
+		const node = {
+			name: "Hero",
+			type: "RECTANGLE",
+			fills: [{
+				type: "IMAGE",
+				scaleMode: "FILL",
+				imageRef: "image/ref",
+				imageUrl: "https://example.com/image.png"
+			}]
+		};
+		const fetcher = async () => new Response("image-bytes", { headers: { "content-type": "image/png" } });
+		try {
+			const downloaded = await downloadFigmaImageFills(node, outDir, {
+				fetcher,
+				publicPath: "assets"
+			});
+			assert.equal(downloaded.length, 1);
+			assert.equal(downloaded[0]?.publicPath, "assets/image_ref.png");
+			assert.equal(readFileSync(downloaded[0]?.filePath || "", "utf-8"), "image-bytes");
+			assert.equal(node.fills?.[0]?.imageLocalPath, "assets/image_ref.png");
+			assert.equal(getNodeStyles(node).backgroundImage, "url(\"assets/image_ref.png\")");
+		} finally {
+			rmSync(outDir, {
+				recursive: true,
+				force: true
+			});
+		}
+	});
+});
+//#endregion
+export {};

package/dist/index.d.mts

@@ -0,0 +1,8 @@
+import { CompilerMode, ExtractedParams, FigmaCompiler, FigmaNode, GeneratedFile } from "./types.mjs";
+import { compileHtml } from "./compilers/htmlCompiler.mjs";
+import { compileReact } from "./compilers/reactCompiler.mjs";
+import { compileVanjs } from "./compilers/vanjsCompiler.mjs";
+import { getCompiler, isCompilerMode } from "./compilers/index.mjs";
+import { FigmaApiResponse, FigmaClientOptions, FigmaFetcher, extractParamsFromURL, fetchFigmaApiResponse, fetchFigmaNode } from "./external/figmaApi.mjs";
+import { FigmaHtmlPlugin, FigmaHtmlPluginOptions } from "./plugin.mjs";
+export { type CompilerMode, type ExtractedParams, type FigmaApiResponse, type FigmaClientOptions, type FigmaCompiler, type FigmaFetcher, FigmaHtmlPlugin, type FigmaHtmlPluginOptions, type FigmaNode, type GeneratedFile, compileHtml, compileReact, compileVanjs, extractParamsFromURL, fetchFigmaApiResponse, fetchFigmaNode, getCompiler, isCompilerMode };

package/dist/index.mjs

@@ -0,0 +1,7 @@
+import { compileHtml } from "./compilers/htmlCompiler.mjs";
+import { compileReact } from "./compilers/reactCompiler.mjs";
+import { compileVanjs } from "./compilers/vanjsCompiler.mjs";
+import { getCompiler, isCompilerMode } from "./compilers/index.mjs";
+import { extractParamsFromURL, fetchFigmaApiResponse, fetchFigmaNode } from "./external/figmaApi.mjs";
+import { FigmaHtmlPlugin } from "./plugin.mjs";
+export { FigmaHtmlPlugin, compileHtml, compileReact, compileVanjs, extractParamsFromURL, fetchFigmaApiResponse, fetchFigmaNode, getCompiler, isCompilerMode };

package/dist/plugin.d.mts

@@ -0,0 +1,16 @@
+import { SourcePlugin, SourcePluginInput, SourcePluginResult } from "./design-embed/src/core/plugins/pluginApi.mjs";
+
+//#region packages/plugin-figma-html/src/plugin.d.ts
+interface FigmaHtmlPluginOptions {
+  url: string;
+  token?: string;
+  assetsDir?: string;
+}
+declare class FigmaHtmlPlugin implements SourcePlugin {
+  private readonly options;
+  readonly name = "figma-html";
+  constructor(options: FigmaHtmlPluginOptions);
+  run(input: SourcePluginInput): Promise<SourcePluginResult>;
+}
+//#endregion
+export { FigmaHtmlPlugin, FigmaHtmlPluginOptions };

package/dist/plugin.mjs

@@ -0,0 +1,43 @@
+import { compileHtml } from "./compilers/htmlCompiler.mjs";
+import { extractParamsFromURL, fetchFigmaNode } from "./external/figmaApi.mjs";
+import { downloadFigmaImageFills } from "./external/imageDownloader.mjs";
+import { join } from "node:path";
+//#region packages/plugin-figma-html/src/plugin.ts
+var FigmaHtmlPlugin = class {
+	options;
+	name = "figma-html";
+	constructor(options) {
+		this.options = options;
+	}
+	async run(input) {
+		const { url, token: optionsToken, assetsDir = "assets" } = this.options;
+		const token = optionsToken ?? process.env.FIGMA_TOKEN;
+		if (!token) return { diagnostics: [{
+			code: "FIGMA_TOKEN_REQUIRED",
+			message: "figma-html requires a Figma token. Pass token in the FigmaHtmlPlugin constructor or set the FIGMA_TOKEN environment variable.",
+			severity: "error"
+		}] };
+		try {
+			const { fileKey, nodeId } = extractParamsFromURL(url);
+			const rootNode = await fetchFigmaNode(fileKey, nodeId, { token });
+			const downloadedImages = await downloadFigmaImageFills(rootNode, join(input.cwd, assetsDir), { publicPath: assetsDir });
+			const [htmlFile] = compileHtml(rootNode);
+			return {
+				html: htmlFile?.contents,
+				diagnostics: downloadedImages.length > 0 ? [{
+					code: "FIGMA_ASSETS_DOWNLOADED",
+					message: `Downloaded ${downloadedImages.length} image asset(s).`,
+					severity: "info"
+				}] : []
+			};
+		} catch (error) {
+			return { diagnostics: [{
+				code: "FIGMA_HTML_FAILED",
+				message: error instanceof Error ? error.message : String(error),
+				severity: "error"
+			}] };
+		}
+	}
+};
+//#endregion
+export { FigmaHtmlPlugin };

package/dist/types.d.mts

@@ -0,0 +1,84 @@
+//#region packages/plugin-figma-html/src/types.d.ts
+interface ExtractedParams {
+  fileKey: string;
+  nodeId: string | null;
+}
+interface FigmaNode {
+  id?: string;
+  name?: string;
+  type?: string;
+  visible?: boolean;
+  characters?: string;
+  children?: FigmaNode[];
+  layoutMode?: "NONE" | "HORIZONTAL" | "VERTICAL" | "GRID" | string;
+  layoutSizingHorizontal?: "FIXED" | "HUG" | "FILL" | string;
+  layoutSizingVertical?: "FIXED" | "HUG" | "FILL" | string;
+  layoutWrap?: "NO_WRAP" | "WRAP" | string;
+  primaryAxisSizingMode?: "FIXED" | "AUTO" | string;
+  counterAxisSizingMode?: "FIXED" | "AUTO" | string;
+  primaryAxisAlignItems?: "MIN" | "CENTER" | "MAX" | "SPACE_BETWEEN" | string;
+  counterAxisAlignItems?: "MIN" | "CENTER" | "MAX" | "BASELINE" | string;
+  layoutPositioning?: "ABSOLUTE" | "AUTO" | string;
+  layoutAlign?: "INHERIT" | "STRETCH" | "MIN" | "CENTER" | "MAX" | string;
+  layoutGrow?: number;
+  itemSpacing?: number;
+  counterAxisSpacing?: number;
+  gridRowGap?: number;
+  gridColumnGap?: number;
+  gridColumnsSizing?: string;
+  gridRowsSizing?: string;
+  gridColumnSpan?: number;
+  gridRowSpan?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  absoluteBoundingBox?: {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+  };
+  fills?: Array<{
+    type?: string;
+    opacity?: number;
+    scaleMode?: string;
+    imageRef?: string;
+    imageUrl?: string;
+    imageLocalPath?: string;
+    color?: {
+      r: number;
+      g: number;
+      b: number;
+    };
+  }>;
+  cornerRadius?: number;
+  rectangleCornerRadii?: number[];
+  strokes?: Array<{
+    type?: string;
+    opacity?: number;
+    color?: {
+      r: number;
+      g: number;
+      b: number;
+    };
+  }>;
+  strokeWeight?: number;
+  strokeAlign?: "INSIDE" | "OUTSIDE" | "CENTER" | string;
+  opacity?: number;
+  clipsContent?: boolean;
+  style?: {
+    fontSize?: number;
+    fontWeight?: number | string;
+    fontFamily?: string;
+    lineHeightPx?: number;
+  };
+}
+interface GeneratedFile {
+  path: string;
+  contents: string;
+}
+type CompilerMode = "react" | "html" | "vanjs";
+type FigmaCompiler = (node: FigmaNode) => GeneratedFile[];
+//#endregion
+export { CompilerMode, ExtractedParams, FigmaCompiler, FigmaNode, GeneratedFile };

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@design-embed/plugin-figma-html",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "type": "module",
   "private": false,
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "exports": {
     ".": {
       "types": "./src/index.ts",
       "development": "./src/index.ts",
-      "default": "./dist/index.js"
+      "default": "./dist/index.mjs"
     }
   },
   "files": [
@@ -19,12 +20,13 @@
     "!src/**/*.test.ts",
     "README.md"
   ],
-  "dependencies": {
-    "@design-embed/config": "0.1.0",
-    "@design-embed/core": "0.1.0"
+  "peerDependencies": {
+    "design-embed": "*"
   },
-  "bundledDependencies": [
-    "@design-embed/config",
-    "@design-embed/core"
-  ]
+  "devDependencies": {
+    "design-embed": "0.2.1"
+  },
+  "scripts": {
+    "test": "node --conditions=development --test src/**/*.test.ts"
+  }
 }

package/src/plugin.ts

@@ -1,10 +1,9 @@
 import { join } from "node:path";
-import type { PluginDefinition } from "@design-embed/config";
 import type {
 	SourcePlugin,
 	SourcePluginInput,
 	SourcePluginResult,
-} from "@design-embed/core";
+} from "design-embed";
 import { compileHtml } from "./compilers/index.ts";
 import { extractParamsFromURL, fetchFigmaNode } from "./external/figmaApi.ts";
 import { downloadFigmaImageFills } from "./external/imageDownloader.ts";
@@ -15,7 +14,7 @@ export interface FigmaHtmlPluginOptions {
 	assetsDir?: string;
 }
 
-export class FigmaHtmlPlugin implements PluginDefinition, SourcePlugin {
+export class FigmaHtmlPlugin implements SourcePlugin {
 	readonly name = "figma-html";
 
 	constructor(private readonly options: FigmaHtmlPluginOptions) {}

package/dist/compilers/compilerUtils.js

@@ -1,182 +0,0 @@
-export function toComponentName(name, fallback = "FigmaExport") {
-    const cleaned = (name || "").replace(/[^a-zA-Z0-9가-힣]/g, "");
-    if (!cleaned)
-        return fallback;
-    return /^[0-9]/.test(cleaned) ? `${fallback}${cleaned}` : cleaned;
-}
-export function escapeHtml(value) {
-    return (value || "")
-        .replace(/&/g, "&")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
-        .replace(/"/g, "&quot;")
-        .replace(/'/g, "&#39;");
-}
-export function escapeJsString(value) {
-    return JSON.stringify(value || "");
-}
-export function getNodeStyles(node, parent) {
-    const styles = {};
-    const bounds = node.absoluteBoundingBox;
-    const parentBounds = parent?.absoluteBoundingBox;
-    const parentUsesLayout = Boolean(parent?.layoutMode && parent.layoutMode !== "NONE");
-    const isAbsoluteChild = Boolean(parent && (!parentUsesLayout || node.layoutPositioning === "ABSOLUTE"));
-    if (isAbsoluteChild && bounds && parentBounds) {
-        styles.position = "absolute";
-        styles.left = `${Math.round((bounds.x || 0) - (parentBounds.x || 0))}px`;
-        styles.top = `${Math.round((bounds.y || 0) - (parentBounds.y || 0))}px`;
-    }
-    else if (node.children?.length || node.layoutMode === "NONE") {
-        styles.position = "relative";
-    }
-    if (bounds && node.layoutSizingHorizontal !== "HUG") {
-        styles.width = `${Math.round(bounds.width || 0)}px`;
-    }
-    if (bounds && node.layoutSizingVertical !== "HUG") {
-        styles.height = `${Math.round(bounds.height || 0)}px`;
-    }
-    if (node.layoutMode === "HORIZONTAL" || node.layoutMode === "VERTICAL") {
-        styles.display = "flex";
-        styles.flexDirection = node.layoutMode === "HORIZONTAL" ? "row" : "column";
-        styles.boxSizing = "border-box";
-        if (node.layoutWrap === "WRAP")
-            styles.flexWrap = "wrap";
-        if (node.itemSpacing !== undefined)
-            styles.gap = `${Math.round(node.itemSpacing)}px`;
-        if (node.counterAxisSpacing !== undefined && node.layoutWrap === "WRAP") {
-            styles.rowGap = `${Math.round(node.counterAxisSpacing)}px`;
-        }
-        styles.justifyContent = mapPrimaryAxisAlignment(node.primaryAxisAlignItems);
-        styles.alignItems = mapCounterAxisAlignment(node.counterAxisAlignItems);
-    }
-    else if (node.layoutMode === "GRID") {
-        styles.display = "grid";
-        styles.boxSizing = "border-box";
-        if (node.gridColumnsSizing)
-            styles.gridTemplateColumns = node.gridColumnsSizing;
-        if (node.gridRowsSizing)
-            styles.gridTemplateRows = node.gridRowsSizing;
-        if (node.gridColumnGap !== undefined)
-            styles.columnGap = `${Math.round(node.gridColumnGap)}px`;
-        if (node.gridRowGap !== undefined)
-            styles.rowGap = `${Math.round(node.gridRowGap)}px`;
-    }
-    if (node.layoutSizingHorizontal === "FILL" || node.layoutGrow === 1) {
-        styles.flex = 1;
-        styles.width = "100%";
-    }
-    if (node.layoutSizingVertical === "FILL") {
-        styles.height = "100%";
-    }
-    if (node.layoutAlign === "STRETCH") {
-        styles.alignSelf = "stretch";
-    }
-    if (node.gridColumnSpan && node.gridColumnSpan > 1) {
-        styles.gridColumn = `span ${node.gridColumnSpan}`;
-    }
-    if (node.gridRowSpan && node.gridRowSpan > 1) {
-        styles.gridRow = `span ${node.gridRowSpan}`;
-    }
-    if (node.paddingTop !== undefined)
-        styles.paddingTop = `${node.paddingTop}px`;
-    if (node.paddingBottom !== undefined)
-        styles.paddingBottom = `${node.paddingBottom}px`;
-    if (node.paddingLeft !== undefined)
-        styles.paddingLeft = `${node.paddingLeft}px`;
-    if (node.paddingRight !== undefined)
-        styles.paddingRight = `${node.paddingRight}px`;
-    if (node.clipsContent)
-        styles.overflow = "hidden";
-    if (node.opacity !== undefined && node.opacity !== 1)
-        styles.opacity = node.opacity;
-    const fill = node.fills?.find((item) => item.type === "SOLID" && item.color);
-    if (fill?.color) {
-        if (node.type === "TEXT") {
-            styles.color = toRgba(fill.color, fill.opacity ?? 1);
-        }
-        else {
-            styles.backgroundColor = toRgba(fill.color, fill.opacity ?? 1);
-        }
-    }
-    const imageFill = node.fills?.find((item) => item.type === "IMAGE" && (item.imageLocalPath || item.imageUrl));
-    const imageSource = imageFill?.imageLocalPath || imageFill?.imageUrl;
-    if (imageSource) {
-        styles.backgroundImage = `url("${imageSource}")`;
-        styles.backgroundRepeat = "no-repeat";
-        styles.backgroundPosition = "center";
-        styles.backgroundSize = mapImageScaleMode(imageFill.scaleMode);
-    }
-    const stroke = node.strokes?.find((item) => item.type === "SOLID" && item.color);
-    if (stroke?.color && node.strokeWeight) {
-        styles.border = `${Math.round(node.strokeWeight)}px solid ${toRgba(stroke.color, stroke.opacity ?? 1)}`;
-        styles.boxSizing = "border-box";
-    }
-    if (node.rectangleCornerRadii?.length === 4) {
-        styles.borderRadius = node.rectangleCornerRadii
-            .map((radius) => `${Math.round(radius)}px`)
-            .join(" ");
-    }
-    else if (node.cornerRadius) {
-        styles.borderRadius = `${Math.round(node.cornerRadius)}px`;
-    }
-    if (node.type === "TEXT") {
-        const textStyle = node.style || {};
-        if (textStyle.fontSize)
-            styles.fontSize = `${textStyle.fontSize}px`;
-        if (textStyle.fontWeight)
-            styles.fontWeight = textStyle.fontWeight;
-        if (textStyle.fontFamily)
-            styles.fontFamily = `"${textStyle.fontFamily}", sans-serif`;
-        if (textStyle.lineHeightPx)
-            styles.lineHeight = `${Math.round(textStyle.lineHeightPx)}px`;
-    }
-    return styles;
-}
-export function toReactStyle(styles) {
-    return JSON.stringify(styles).replace(/"([^"]+)":/g, "$1:");
-}
-export function toCssText(styles) {
-    return Object.entries(styles)
-        .map(([key, value]) => `${toKebabCase(key)}: ${value};`)
-        .join(" ");
-}
-function toKebabCase(value) {
-    return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
-}
-function mapPrimaryAxisAlignment(value) {
-    switch (value) {
-        case "CENTER":
-            return "center";
-        case "MAX":
-            return "flex-end";
-        case "SPACE_BETWEEN":
-            return "space-between";
-        default:
-            return "flex-start";
-    }
-}
-function mapCounterAxisAlignment(value) {
-    switch (value) {
-        case "CENTER":
-            return "center";
-        case "MAX":
-            return "flex-end";
-        case "BASELINE":
-            return "baseline";
-        default:
-            return "flex-start";
-    }
-}
-function mapImageScaleMode(value) {
-    switch (value) {
-        case "FIT":
-            return "contain";
-        case "TILE":
-            return "auto";
-        default:
-            return "cover";
-    }
-}
-function toRgba(color, opacity) {
-    return `rgba(${Math.round(color.r * 255)}, ${Math.round(color.g * 255)}, ${Math.round(color.b * 255)}, ${opacity})`;
-}

package/dist/compilers/htmlCompiler.js

@@ -1,35 +0,0 @@
-import { escapeHtml, getNodeStyles, toCssText } from "./compilerUtils.js";
-export const compileHtml = (node) => [
-    {
-        path: "index.html",
-        contents: `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>${escapeHtml(node.name || "Figma Export")}</title>
-  </head>
-  <body>
-${walkHtml(node, undefined, 2).trimEnd()}
-  </body>
-</html>
-`,
-    },
-];
-function walkHtml(node, parent, depth = 0) {
-    if (!node || node.visible === false)
-        return "";
-    const indent = "  ".repeat(depth);
-    const childIndent = "  ".repeat(depth + 1);
-    const name = escapeHtml(node.name || "LayoutBox");
-    const style = escapeHtml(toCssText(getNodeStyles(node, parent)));
-    if (node.type === "TEXT") {
-        return `${indent}<span style="${style}" data-layer="${name}">
-${childIndent}${escapeHtml(node.characters)}
-${indent}</span>\n`;
-    }
-    const children = node.children?.map((child) => walkHtml(child, node, depth + 1)).join("") ||
-        "";
-    return `${indent}<div style="${style}" data-layer="${name}">
-${children}${indent}</div>\n`;
-}

package/dist/compilers/index.js

@@ -1,17 +0,0 @@
-import { compileHtml } from "./htmlCompiler.js";
-import { compileReact } from "./reactCompiler.js";
-import { compileVanjs } from "./vanjsCompiler.js";
-export { compileHtml } from "./htmlCompiler.js";
-export { compileReact } from "./reactCompiler.js";
-export { compileVanjs } from "./vanjsCompiler.js";
-export const compilers = {
-    react: compileReact,
-    html: compileHtml,
-    vanjs: compileVanjs,
-};
-export function isCompilerMode(value) {
-    return Boolean(value && value in compilers);
-}
-export function getCompiler(mode) {
-    return compilers[mode];
-}

package/dist/compilers/reactCompiler.js

@@ -1,58 +0,0 @@
-import { escapeHtml, escapeJsString, getNodeStyles, toComponentName, toReactStyle, } from "./compilerUtils.js";
-export const compileReact = (node) => {
-    const componentName = toComponentName(node.name);
-    return [
-        {
-            path: "FigmaComponent.tsx",
-            contents: `import React from 'react';
-
-/**
- * Auto-generated UI component from Figma frame: "${escapeHtml(node.name)}"
- */
-export const ${componentName}: React.FC = () => {
-  return (
-${walkReact(node).trimEnd()}
-  );
-};
-
-export default ${componentName};
-`,
-        },
-    ];
-};
-function walkReact(node, depth = 2) {
-    if (!node || node.visible === false)
-        return "";
-    const indent = "  ".repeat(depth);
-    const childIndent = "  ".repeat(depth + 1);
-    const name = escapeHtml(node.name || "LayoutBox");
-    const styles = toReactStyle(getNodeStyles(node));
-    if (node.type === "TEXT") {
-        return `${indent}<span style={${styles}} data-layer={${escapeJsString(node.name || "LayoutBox")}}>
-${childIndent}{${escapeJsString(node.characters)}}
-${indent}</span>\n`;
-    }
-    const children = node.children
-        ?.map((child) => walkReactWithParent(child, node, depth + 1))
-        .join("") || "";
-    return `${indent}<div style={${styles}} data-layer="${name}">
-${children}${indent}</div>\n`;
-}
-function walkReactWithParent(node, parent, depth) {
-    if (!node || node.visible === false)
-        return "";
-    const indent = "  ".repeat(depth);
-    const childIndent = "  ".repeat(depth + 1);
-    const name = escapeHtml(node.name || "LayoutBox");
-    const styles = toReactStyle(getNodeStyles(node, parent));
-    if (node.type === "TEXT") {
-        return `${indent}<span style={${styles}} data-layer={${escapeJsString(node.name || "LayoutBox")}}>
-${childIndent}{${escapeJsString(node.characters)}}
-${indent}</span>\n`;
-    }
-    const children = node.children
-        ?.map((child) => walkReactWithParent(child, node, depth + 1))
-        .join("") || "";
-    return `${indent}<div style={${styles}} data-layer="${name}">
-${children}${indent}</div>\n`;
-}