@design-embed/plugin-figma-html 0.1.0

package/node_modules/@design-embed/core/src/plugins/pluginRegistry.ts

@@ -0,0 +1,37 @@
+import type { SourcePlugin, TransformerPlugin } from "./pluginApi.ts";
+
+export class PluginRegistry {
+	#sourcePlugins = new Map<string, SourcePlugin>();
+	#transformers: TransformerPlugin[] = [];
+
+	registerSource(plugin: SourcePlugin): void {
+		this.#sourcePlugins.set(plugin.name, plugin);
+	}
+
+	getSource(name: string): SourcePlugin | undefined {
+		return this.#sourcePlugins.get(name);
+	}
+
+	listSources(): SourcePlugin[] {
+		return [...this.#sourcePlugins.values()].sort((left, right) =>
+			left.name.localeCompare(right.name),
+		);
+	}
+
+	registerTransformer(plugin: TransformerPlugin): void {
+		this.#transformers.push(plugin);
+	}
+
+	listTransformers(): TransformerPlugin[] {
+		return sortTransformers(this.#transformers);
+	}
+}
+
+export function sortTransformers(
+	transformers: TransformerPlugin[],
+): TransformerPlugin[] {
+	return [...transformers].sort((left, right) => {
+		const orderDelta = (left.order ?? 0) - (right.order ?? 0);
+		return orderDelta || left.name.localeCompare(right.name);
+	});
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@design-embed/plugin-figma-html",
+  "version": "0.1.0",
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.ts",
+    "README.md"
+  ],
+  "dependencies": {
+    "@design-embed/config": "0.1.0",
+    "@design-embed/core": "0.1.0"
+  },
+  "bundledDependencies": [
+    "@design-embed/config",
+    "@design-embed/core"
+  ]
+}

package/src/compilers/compilerUtils.ts

@@ -0,0 +1,211 @@
+import type { FigmaNode } from "../types.ts";
+
+export function toComponentName(
+	name: string | undefined,
+	fallback = "FigmaExport",
+): string {
+	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: string | undefined): string {
+	return (value || "")
+		.replace(/&/g, "&")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#39;");
+}
+
+export function escapeJsString(value: string | undefined): string {
+	return JSON.stringify(value || "");
+}
+
+export function getNodeStyles(
+	node: FigmaNode,
+	parent?: FigmaNode,
+): Record<string, string | number> {
+	const styles: Record<string, string | number> = {};
+	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: Record<string, string | number>): string {
+	return JSON.stringify(styles).replace(/"([^"]+)":/g, "$1:");
+}
+
+export function toCssText(styles: Record<string, string | number>): string {
+	return Object.entries(styles)
+		.map(([key, value]) => `${toKebabCase(key)}: ${value};`)
+		.join(" ");
+}
+
+function toKebabCase(value: string): string {
+	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+
+function mapPrimaryAxisAlignment(value: string | undefined): string {
+	switch (value) {
+		case "CENTER":
+			return "center";
+		case "MAX":
+			return "flex-end";
+		case "SPACE_BETWEEN":
+			return "space-between";
+		default:
+			return "flex-start";
+	}
+}
+
+function mapCounterAxisAlignment(value: string | undefined): string {
+	switch (value) {
+		case "CENTER":
+			return "center";
+		case "MAX":
+			return "flex-end";
+		case "BASELINE":
+			return "baseline";
+		default:
+			return "flex-start";
+	}
+}
+
+function mapImageScaleMode(value: string | undefined): string {
+	switch (value) {
+		case "FIT":
+			return "contain";
+		case "TILE":
+			return "auto";
+		default:
+			return "cover";
+	}
+}
+
+function toRgba(
+	color: { r: number; g: number; b: number },
+	opacity: number,
+): string {
+	return `rgba(${Math.round(color.r * 255)}, ${Math.round(color.g * 255)}, ${Math.round(color.b * 255)}, ${opacity})`;
+}

package/src/compilers/htmlCompiler.ts

@@ -0,0 +1,41 @@
+import type { FigmaCompiler, FigmaNode } from "../types.ts";
+import { escapeHtml, getNodeStyles, toCssText } from "./compilerUtils.ts";
+
+export const compileHtml: FigmaCompiler = (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: FigmaNode, parent?: FigmaNode, depth = 0): string {
+	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/src/compilers/index.ts

@@ -0,0 +1,24 @@
+import type { CompilerMode, FigmaCompiler } from "../types.ts";
+import { compileHtml } from "./htmlCompiler.ts";
+import { compileReact } from "./reactCompiler.ts";
+import { compileVanjs } from "./vanjsCompiler.ts";
+
+export { compileHtml } from "./htmlCompiler.ts";
+export { compileReact } from "./reactCompiler.ts";
+export { compileVanjs } from "./vanjsCompiler.ts";
+
+export const compilers: Record<CompilerMode, FigmaCompiler> = {
+	react: compileReact,
+	html: compileHtml,
+	vanjs: compileVanjs,
+};
+
+export function isCompilerMode(
+	value: string | undefined,
+): value is CompilerMode {
+	return Boolean(value && value in compilers);
+}
+
+export function getCompiler(mode: CompilerMode): FigmaCompiler {
+	return compilers[mode];
+}

package/src/compilers/reactCompiler.ts

@@ -0,0 +1,79 @@
+import type { FigmaCompiler, FigmaNode } from "../types.ts";
+import {
+	escapeHtml,
+	escapeJsString,
+	getNodeStyles,
+	toComponentName,
+	toReactStyle,
+} from "./compilerUtils.ts";
+
+export const compileReact: FigmaCompiler = (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: FigmaNode, depth = 2): string {
+	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: FigmaNode,
+	parent: FigmaNode,
+	depth: number,
+): string {
+	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`;
+}

package/src/compilers/vanjsCompiler.ts

@@ -0,0 +1,67 @@
+import type { FigmaCompiler, FigmaNode } from "../types.ts";
+import {
+	escapeHtml,
+	escapeJsString,
+	getNodeStyles,
+	toCssText,
+} from "./compilerUtils.ts";
+
+export const compileVanjs: FigmaCompiler = (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>
+    <div id="app"></div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>
+`,
+	},
+	{
+		path: "main.js",
+		contents: `import van from 'https://cdn.jsdelivr.net/npm/vanjs-core@1.5.5/src/van.min.js';
+
+const { div, span } = van.tags;
+
+const App = () => (
+${walkVanjs(node, undefined, 1).trimEnd()}
+);
+
+van.add(document.getElementById('app'), App());
+`,
+	},
+];
+
+function walkVanjs(node: FigmaNode, parent?: FigmaNode, depth = 0): string {
+	if (!node || node.visible === false) return "null";
+
+	const indent = "  ".repeat(depth);
+	const childIndent = "  ".repeat(depth + 1);
+	const tag = node.type === "TEXT" ? "span" : "div";
+	const props = `{
+${childIndent}style: ${escapeJsString(toCssText(getNodeStyles(node, parent)))},
+${childIndent}"data-layer": ${escapeJsString(node.name || "LayoutBox")}
+${indent}}`;
+
+	if (node.type === "TEXT") {
+		return `${indent}${tag}(${props}, ${escapeJsString(node.characters)})\n`;
+	}
+
+	const children = (node.children || [])
+		.map((child) => walkVanjs(child, node, depth + 1))
+		.filter((value) => value.trim() !== "null")
+		.join(",");
+
+	if (!children) {
+		return `${indent}${tag}(${props})\n`;
+	}
+
+	return `${indent}${tag}(${props},
+${children}${indent})\n`;
+}

package/src/external/figmaApi.ts

@@ -0,0 +1,142 @@
+import type { ExtractedParams, FigmaNode } from "../types.ts";
+
+interface FigmaFileResponse {
+	document?: FigmaNode;
+	nodes?: Record<string, { document?: FigmaNode }>;
+}
+
+interface FigmaImageFillsResponse {
+	images?: Record<string, string | null>;
+}
+
+export type FigmaApiResponse = unknown;
+
+export type FigmaFetcher = (
+	input: string,
+	init?: RequestInit,
+) => Promise<Response>;
+
+export interface FigmaClientOptions {
+	token: string;
+	fetcher?: FigmaFetcher;
+}
+
+export function extractParamsFromURL(input: string): ExtractedParams {
+	const cleanInput = input.trim();
+	const fileKeyPattern = /figma\.com\/(?:file|design)\/([^/]+)/;
+	const fileKeyMatch = cleanInput.match(fileKeyPattern);
+	const fileKey = fileKeyMatch?.[1] || cleanInput;
+
+	let nodeId: string | null = null;
+	try {
+		if (cleanInput.includes("figma.com")) {
+			const url = new URL(cleanInput);
+			const rawNodeId = url.searchParams.get("node-id");
+			if (rawNodeId) {
+				nodeId = rawNodeId.replace(/-/g, ":");
+			}
+		}
+	} catch {
+		// Treat non-URL input as a raw Figma file key.
+	}
+
+	return { fileKey, nodeId };
+}
+
+export async function fetchFigmaNode(
+	fileKey: string,
+	nodeId: string | null,
+	options: FigmaClientOptions,
+): Promise<FigmaNode> {
+	const data = (await fetchFigmaApiResponse(
+		fileKey,
+		nodeId,
+		options,
+	)) as FigmaFileResponse;
+	const rootNode = nodeId ? data.nodes?.[nodeId]?.document : data.document;
+
+	if (!rootNode) {
+		throw new Error(`Could not find valid element tree for Node ID: ${nodeId}`);
+	}
+
+	const imageFills = await fetchFigmaImageFills(fileKey, options);
+	attachImageFillUrls(rootNode, imageFills);
+
+	return rootNode;
+}
+
+export async function fetchFigmaApiResponse(
+	fileKey: string,
+	nodeId: string | null,
+	options: FigmaClientOptions,
+): Promise<FigmaApiResponse> {
+	const endpoint = buildFigmaNodeEndpoint(fileKey, nodeId);
+	const fetcher = options.fetcher ?? fetch;
+	const response = await fetcher(endpoint, {
+		method: "GET",
+		headers: { "X-Figma-Token": options.token },
+	});
+
+	if (!response.ok) {
+		throw new Error(
+			`Figma API Error: ${response.status} ${response.statusText}`,
+		);
+	}
+
+	return response.json();
+}
+
+export function buildFigmaNodeEndpoint(
+	fileKey: string,
+	nodeId: string | null,
+): string {
+	if (!nodeId) {
+		return `https://api.figma.com/v1/files/${fileKey}?depth=2`;
+	}
+
+	return `https://api.figma.com/v1/files/${fileKey}/nodes?ids=${encodeURIComponent(nodeId)}`;
+}
+
+export async function fetchFigmaImageFills(
+	fileKey: string,
+	options: FigmaClientOptions,
+): Promise<Record<string, string>> {
+	const endpoint = buildFigmaImageFillsEndpoint(fileKey);
+	const fetcher = options.fetcher ?? fetch;
+	const response = await fetcher(endpoint, {
+		method: "GET",
+		headers: { "X-Figma-Token": options.token },
+	});
+
+	if (!response.ok) {
+		throw new Error(
+			`Figma image fills API Error: ${response.status} ${response.statusText}`,
+		);
+	}
+
+	const data = (await response.json()) as FigmaImageFillsResponse;
+	return Object.fromEntries(
+		Object.entries(data.images || {}).filter(
+			(entry): entry is [string, string] => typeof entry[1] === "string",
+		),
+	);
+}
+
+export function buildFigmaImageFillsEndpoint(fileKey: string): string {
+	return `https://api.figma.com/v1/files/${fileKey}/images`;
+}
+
+function attachImageFillUrls(
+	node: FigmaNode,
+	imageFills: Record<string, string>,
+): void {
+	for (const fill of node.fills || []) {
+		if (fill.type === "IMAGE" && fill.imageRef) {
+			fill.imageUrl = imageFills[fill.imageRef];
+		}
+	}
+
+	for (const child of node.children || []) {
+		attachImageFillUrls(child, imageFills);
+	}
+}