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

package/node_modules/@design-embed/core/dist/index.js

@@ -1,351 +0,0 @@
-import { sortTransformers } from "./plugins/pluginRegistry.js";
-export { formatDiagnosticText, toJsonDiagnostic, toJsonDiagnostics, } from "./diagnostics/jsonDiagnostic.js";
-export { checkGeneratedFiles } from "./pipeline/checkMode.js";
-export { PluginRegistry, sortTransformers, } from "./plugins/pluginRegistry.js";
-/**
- * The main compiler entry point.
- * Parses HTML, applies component mappings, runs transformers, and emits files.
- *
- * @param input - The compilation input.
- * @returns A promise resolving to the compilation result.
- *
- * @example
- * const result = await embed({
- *   html: '<div class="btn">Click me</div>',
- *   config: myConfig,
- *   targetEmitter: reactEmitter
- * });
- */
-export async function embed(input) {
-    let ast = parseHtml(input.html);
-    const diagnostics = validateComponentMappings(input.config?.components ?? []);
-    if (diagnostics.some((d) => d.severity === "error")) {
-        return { files: [], diagnostics };
-    }
-    if (input.transformers && input.transformers.length > 0) {
-        ast = await applyTransformers(ast, input.config ?? {}, input.transformers, diagnostics);
-        if (diagnostics.some((d) => d.severity === "error")) {
-            return { files: [], diagnostics };
-        }
-    }
-    const { files } = input.targetEmitter.emit({
-        nodes: ast,
-        css: input.css,
-        config: input.config,
-        diagnostics,
-    });
-    return { files, diagnostics };
-}
-async function applyTransformers(ast, config, transformers, diagnostics) {
-    let nextAst = ast;
-    for (const transformer of sortTransformers(transformers)) {
-        try {
-            const result = await transformer.transform({
-                ast: nextAst,
-                config,
-                diagnostics,
-            });
-            if (result.diagnostics) {
-                diagnostics.push(...result.diagnostics);
-            }
-            if (result.ast) {
-                nextAst = result.ast;
-            }
-        }
-        catch (error) {
-            const message = error instanceof Error ? error.message : String(error);
-            diagnostics.push({
-                code: "TRANSFORMER_FAILED",
-                message: `Transformer ${transformer.name} failed: ${message}`,
-                severity: "error",
-                details: { transformer: transformer.name },
-            });
-        }
-    }
-    return nextAst;
-}
-export function applyComponentMappings(nodes, mappings, diagnostics = []) {
-    const parsedMappings = mappings
-        .map((mapping, index) => ({
-        index,
-        mapping,
-        selector: parseSelector(mapping.selector),
-    }))
-        .filter(({ selector }) => selector !== undefined);
-    return nodes.map((node) => {
-        if (node.kind !== "element") {
-            return node;
-        }
-        const match = parsedMappings.find(({ selector }) => matchesSelector(node, selector));
-        if (match) {
-            const props = extractProps(node, match.mapping, diagnostics);
-            return {
-                kind: "component",
-                component: match.mapping.importName ?? inferImportName(match.mapping),
-                importName: match.mapping.importName ?? inferImportName(match.mapping),
-                importPath: match.mapping.component,
-                props,
-                children: props.children?.kind === "children"
-                    ? undefined
-                    : applyComponentMappings(node.children ?? [], mappings, diagnostics),
-                source: node.source,
-            };
-        }
-        return {
-            ...node,
-            children: applyComponentMappings(node.children ?? [], mappings, diagnostics),
-        };
-    });
-}
-export function parseSelector(selector) {
-    const trimmed = selector.trim();
-    if (!trimmed || /[\s>+~,:]/.test(trimmed)) {
-        return undefined;
-    }
-    const parsed = { classes: [], attributes: {} };
-    let rest = trimmed;
-    const tagMatch = rest.match(/^[a-zA-Z][a-zA-Z0-9-]*/);
-    if (tagMatch?.[0]) {
-        parsed.tagName = tagMatch[0].toLowerCase();
-        rest = rest.slice(tagMatch[0].length);
-    }
-    while (rest) {
-        if (rest.startsWith(".")) {
-            const match = rest.match(/^\.([a-zA-Z_][a-zA-Z0-9_-]*)/);
-            if (!match?.[1]) {
-                return undefined;
-            }
-            parsed.classes.push(match[1]);
-            rest = rest.slice(match[0].length);
-            continue;
-        }
-        if (rest.startsWith("#")) {
-            const match = rest.match(/^#([a-zA-Z_][a-zA-Z0-9_-]*)/);
-            if (!match?.[1] || parsed.id) {
-                return undefined;
-            }
-            parsed.id = match[1];
-            rest = rest.slice(match[0].length);
-            continue;
-        }
-        if (rest.startsWith("[")) {
-            const match = rest.match(/^\[([a-zA-Z_][a-zA-Z0-9_.:-]*)(?:=(?:"([^"]*)"|'([^']*)'|([^\]]+)))?\]/);
-            if (!match?.[1]) {
-                return undefined;
-            }
-            parsed.attributes[match[1]] = match[2] ?? match[3] ?? match[4] ?? "";
-            rest = rest.slice(match[0].length);
-            continue;
-        }
-        return undefined;
-    }
-    return parsed;
-}
-export function matchesSelector(node, selector) {
-    if (node.kind !== "element") {
-        return false;
-    }
-    const attributes = node.attributes ?? {};
-    if (selector.tagName && node.tagName !== selector.tagName) {
-        return false;
-    }
-    if (selector.id && attributes.id !== selector.id) {
-        return false;
-    }
-    const classNames = new Set((attributes.class ?? "").split(/\s+/).filter(Boolean));
-    for (const className of selector.classes) {
-        if (!classNames.has(className)) {
-            return false;
-        }
-    }
-    for (const [name, value] of Object.entries(selector.attributes)) {
-        if (!(name in attributes)) {
-            return false;
-        }
-        if (value !== "" && attributes[name] !== value) {
-            return false;
-        }
-    }
-    return true;
-}
-export function parseHtml(html) {
-    const root = {
-        kind: "element",
-        tagName: "root",
-        attributes: {},
-        styles: {},
-        children: [],
-    };
-    const stack = [root];
-    const tokens = html.matchAll(/<!--[\s\S]*?-->|<\/?[a-zA-Z][^>]*>|[^<]+/g);
-    for (const token of tokens) {
-        const value = token[0];
-        const offset = token.index;
-        const source = getSourceLocation(html, offset);
-        if (value.startsWith("<!--")) {
-            continue;
-        }
-        if (value.startsWith("</")) {
-            const tagName = value.slice(2, -1).trim().toLowerCase();
-            while (stack.length > 1) {
-                const node = stack.pop();
-                if (node?.tagName === tagName) {
-                    break;
-                }
-            }
-            continue;
-        }
-        if (value.startsWith("<")) {
-            const selfClosing = /\/>$/.test(value) || isVoidElement(value);
-            const node = parseElement(value, source);
-            currentParent(stack).children?.push(node);
-            if (!selfClosing) {
-                stack.push(node);
-            }
-            continue;
-        }
-        if (value.trim()) {
-            currentParent(stack).children?.push({
-                kind: "text",
-                text: collapseWhitespace(value),
-                source,
-            });
-        }
-    }
-    return root.children ?? [];
-}
-export function parseInlineStyle(style) {
-    const styles = {};
-    if (!style) {
-        return styles;
-    }
-    for (const declaration of style.split(";")) {
-        const [property, ...valueParts] = declaration.split(":");
-        const value = valueParts.join(":").trim();
-        if (!property?.trim() || !value) {
-            continue;
-        }
-        styles[property.trim().toLowerCase()] = value;
-    }
-    return styles;
-}
-function parseElement(rawTag, source) {
-    const tagBody = rawTag.replace(/^</, "").replace(/\/?>$/, "").trim();
-    const tagName = tagBody.split(/\s+/, 1)[0]?.toLowerCase() ?? "div";
-    const attributeSource = tagBody.slice(tagName.length).trim();
-    const attributes = parseAttributes(attributeSource);
-    const styles = parseInlineStyle(attributes.style);
-    return {
-        kind: "element",
-        tagName,
-        attributes,
-        styles,
-        children: [],
-        source,
-    };
-}
-function parseAttributes(source) {
-    const attributes = {};
-    const attributePattern = /([:@a-zA-Z_][:@a-zA-Z0-9_.-]*)(?:\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
-    for (const match of source.matchAll(attributePattern)) {
-        const name = match[1];
-        if (!name) {
-            continue;
-        }
-        attributes[name] = match[3] ?? match[4] ?? match[5] ?? "";
-    }
-    return attributes;
-}
-function validateComponentMappings(mappings) {
-    const diagnostics = [];
-    for (const [index, mapping] of mappings.entries()) {
-        if (mapping.selector && !parseSelector(mapping.selector)) {
-            diagnostics.push({
-                code: "SELECTOR_UNSUPPORTED",
-                message: `Component mapping ${index} uses an unsupported selector: ${mapping.selector}`,
-                severity: "error",
-            });
-        }
-        for (const [propName, expression] of Object.entries(mapping.props ?? {})) {
-            if (!isSupportedPropExpression(expression)) {
-                diagnostics.push({
-                    code: "PROP_EXPRESSION_UNSUPPORTED",
-                    message: `Component mapping ${index} prop "${propName}" uses an unsupported expression: ${expression}`,
-                    severity: "error",
-                });
-            }
-        }
-    }
-    return diagnostics;
-}
-function isSupportedPropExpression(expression) {
-    return (!expression.startsWith("$") ||
-        expression === "$text" ||
-        expression === "$children" ||
-        /^\$attr\.[a-zA-Z_][a-zA-Z0-9_.:-]*$/.test(expression));
-}
-function extractProps(node, mapping, diagnostics) {
-    const props = {};
-    for (const [propName, expression] of Object.entries(mapping.props ?? {})) {
-        if (expression === "$text") {
-            props[propName] = { kind: "text", value: collectText(node) };
-            continue;
-        }
-        if (expression === "$children") {
-            props[propName] = { kind: "children", value: node.children ?? [] };
-            continue;
-        }
-        if (expression.startsWith("$attr.")) {
-            const attributeName = expression.slice("$attr.".length);
-            const value = node.attributes?.[attributeName];
-            if (value === undefined) {
-                diagnostics.push({
-                    code: "PROP_ATTRIBUTE_MISSING",
-                    message: `Attribute "${attributeName}" is missing for prop "${propName}".`,
-                    severity: "warning",
-                });
-                continue;
-            }
-            props[propName] = { kind: "literal", value };
-            continue;
-        }
-        props[propName] = { kind: "literal", value: expression };
-    }
-    return props;
-}
-function collectText(node) {
-    if (node.kind === "text") {
-        return node.text ?? "";
-    }
-    return (node.children ?? [])
-        .map((child) => collectText(child))
-        .filter(Boolean)
-        .join(" ")
-        .trim();
-}
-function inferImportName(mapping) {
-    const lastSegment = mapping.component.split("/").filter(Boolean).at(-1);
-    return mapping.importName ?? lastSegment ?? "Component";
-}
-function currentParent(stack) {
-    const parent = stack[stack.length - 1];
-    if (!parent) {
-        throw new Error("HTML parser stack is empty.");
-    }
-    return parent;
-}
-function getSourceLocation(source, offset) {
-    const before = source.slice(0, offset);
-    const lines = before.split(/\r?\n/);
-    return {
-        offset,
-        line: lines.length,
-        column: (lines[lines.length - 1]?.length ?? 0) + 1,
-    };
-}
-function collapseWhitespace(value) {
-    return value.replace(/\s+/g, " ").trim();
-}
-function isVoidElement(tag) {
-    return /^<(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)(\s|>|\/)/i.test(tag);
-}

package/node_modules/@design-embed/core/dist/pipeline/checkMode.js

@@ -1,29 +0,0 @@
-import { resolve } from "node:path";
-export function checkGeneratedFiles(input) {
-    const diagnostics = [];
-    for (const file of input.files) {
-        const absolutePath = resolve(input.cwd, file.path);
-        const current = input.readFile(absolutePath);
-        if (current === undefined) {
-            diagnostics.push({
-                code: "CHECK_FILE_MISSING",
-                message: `Generated file is missing: ${file.path}`,
-                severity: "error",
-                file: file.path,
-            });
-            continue;
-        }
-        if (current !== file.contents) {
-            diagnostics.push({
-                code: "CHECK_FILE_STALE",
-                message: `Generated file is stale: ${file.path}`,
-                severity: "error",
-                file: file.path,
-            });
-        }
-    }
-    return {
-        ok: diagnostics.length === 0,
-        diagnostics,
-    };
-}

package/node_modules/@design-embed/core/dist/plugins/pluginApi.js

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

package/node_modules/@design-embed/core/dist/plugins/pluginRegistry.js

@@ -1,25 +0,0 @@
-export class PluginRegistry {
-    #sourcePlugins = new Map();
-    #transformers = [];
-    registerSource(plugin) {
-        this.#sourcePlugins.set(plugin.name, plugin);
-    }
-    getSource(name) {
-        return this.#sourcePlugins.get(name);
-    }
-    listSources() {
-        return [...this.#sourcePlugins.values()].sort((left, right) => left.name.localeCompare(right.name));
-    }
-    registerTransformer(plugin) {
-        this.#transformers.push(plugin);
-    }
-    listTransformers() {
-        return sortTransformers(this.#transformers);
-    }
-}
-export function sortTransformers(transformers) {
-    return [...transformers].sort((left, right) => {
-        const orderDelta = (left.order ?? 0) - (right.order ?? 0);
-        return orderDelta || left.name.localeCompare(right.name);
-    });
-}

package/node_modules/@design-embed/core/package.json

@@ -1,19 +0,0 @@
-{
-	"name": "@design-embed/core",
-	"version": "0.1.0",
-	"type": "module",
-	"private": true,
-	"exports": {
-		".": {
-			"types": "./src/index.ts",
-			"development": "./src/index.ts",
-			"default": "./dist/index.js"
-		}
-	},
-	"files": [
-		"dist",
-		"src",
-		"!src/**/*.test.ts",
-		"README.md"
-	]
-}

package/node_modules/@design-embed/core/src/diagnostics/diagnostic.ts

@@ -1,18 +0,0 @@
-import type { SourceLocation } from "../index.ts";
-
-export type DiagnosticSeverity = "error" | "warning" | "info";
-
-export interface Diagnostic {
-	code: string;
-	message: string;
-	severity: DiagnosticSeverity;
-	file?: string;
-	source?: SourceLocation;
-	selector?: string;
-	property?: string;
-	details?: Record<string, unknown>;
-}
-
-export function hasErrorDiagnostics(diagnostics: Diagnostic[]): boolean {
-	return diagnostics.some((diagnostic) => diagnostic.severity === "error");
-}

package/node_modules/@design-embed/core/src/diagnostics/jsonDiagnostic.ts

@@ -1,51 +0,0 @@
-import type { Diagnostic } from "./diagnostic.ts";
-
-export interface JsonDiagnostic {
-	code: string;
-	severity: "error" | "warning" | "info";
-	message: string;
-	file?: string;
-	line?: number;
-	column?: number;
-	details?: Record<string, unknown>;
-}
-
-export function toJsonDiagnostic(diagnostic: Diagnostic): JsonDiagnostic {
-	const details = {
-		...diagnostic.details,
-		...(diagnostic.selector ? { selector: diagnostic.selector } : {}),
-		...(diagnostic.property ? { property: diagnostic.property } : {}),
-	};
-
-	return {
-		code: diagnostic.code,
-		severity: diagnostic.severity,
-		message: redactSecrets(diagnostic.message),
-		...(diagnostic.file ? { file: diagnostic.file } : {}),
-		...(diagnostic.source ? { line: diagnostic.source.line } : {}),
-		...(diagnostic.source ? { column: diagnostic.source.column } : {}),
-		...(Object.keys(details).length > 0 ? { details } : {}),
-	};
-}
-
-export function toJsonDiagnostics(diagnostics: Diagnostic[]): JsonDiagnostic[] {
-	return diagnostics.map(toJsonDiagnostic);
-}
-
-export function formatDiagnosticText(diagnostic: Diagnostic): string {
-	const location = [
-		diagnostic.file,
-		diagnostic.source?.line,
-		diagnostic.source?.column,
-	]
-		.filter((part) => part !== undefined)
-		.join(":");
-	const prefix = location ? `${location}: ` : "";
-	return `${prefix}${diagnostic.severity}: ${diagnostic.code}: ${redactSecrets(diagnostic.message)}`;
-}
-
-function redactSecrets(value: string): string {
-	return value
-		.replace(/figma[_-]?token\s*[:=]\s*[^\s]+/gi, "FIGMA_TOKEN=[redacted]")
-		.replace(/bearer\s+[a-z0-9._-]+/gi, "Bearer [redacted]");
-}