design-embed 0.1.0 → 0.1.1

package/dist/src-D3fnqGCq.mjs

@@ -0,0 +1,511 @@
+import { existsSync } from "node:fs";
+import { isAbsolute, resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+//#region packages/config/src/index.ts
+/**
+* Helper to define configuration with type safety.
+*
+* @param config - The configuration object.
+* @returns The same configuration object.
+*
+* @example
+* export default defineConfig({
+*   output: { target: reactTarget }
+* });
+*/
+function defineConfig(config) {
+	return config;
+}
+/**
+* Asynchronously loads a configuration file from disk.
+* Supports .ts, .js, and .mjs files via dynamic import.
+*
+* @param configPath - Path to the config file.
+* @param cwd - Current working directory.
+* @returns A promise resolving to the load result.
+*/
+async function loadConfig(configPath, cwd = process.cwd()) {
+	const diagnostics = [];
+	const resolvedPath = isAbsolute(configPath) ? configPath : resolve(cwd, configPath);
+	if (!existsSync(resolvedPath)) return { diagnostics: [{
+		code: "CONFIG_NOT_FOUND",
+		message: `Config file not found: ${resolvedPath}`,
+		severity: "error"
+	}] };
+	if (!/\.(ts|js|mjs)$/.test(resolvedPath)) return { diagnostics: [{
+		code: "CONFIG_UNSUPPORTED_FORMAT",
+		message: `Unsupported config format: ${resolvedPath}. Only .ts, .js, and .mjs are supported.`,
+		severity: "error"
+	}] };
+	try {
+		const module = await import(pathToFileURL(resolvedPath).href);
+		const config = module.default ?? module.config;
+		if (!config) return { diagnostics: [{
+			code: "CONFIG_INVALID",
+			message: `Config file must export a default object or a named 'config' object: ${resolvedPath}`,
+			severity: "error"
+		}] };
+		diagnostics.push(...validateConfig(config));
+		return {
+			config,
+			diagnostics
+		};
+	} catch (error) {
+		return { diagnostics: [{
+			code: "CONFIG_INVALID",
+			message: `Failed to load config file: ${error instanceof Error ? error.message : String(error)}`,
+			severity: "error"
+		}] };
+	}
+}
+function validateConfig(config) {
+	const diagnostics = [];
+	const target = config.output?.target;
+	const styleMode = config.output?.styleMode;
+	if (target && target !== "html" && (typeof target !== "object" || typeof target.emit !== "function")) diagnostics.push({
+		code: "TARGET_ADAPTER_INVALID",
+		message: "output.target must be a target adapter with emit().",
+		severity: "error"
+	});
+	if (styleMode && styleMode !== "inline" && styleMode !== "css-modules" && styleMode !== "tailwind") diagnostics.push({
+		code: "STYLE_MODE_UNSUPPORTED",
+		message: `Unsupported style mode: ${styleMode}`,
+		severity: "error"
+	});
+	for (const [index, component] of (config.components ?? []).entries()) {
+		if (!component.selector || typeof component.selector !== "string") diagnostics.push({
+			code: "COMPONENT_SELECTOR_INVALID",
+			message: `Component mapping ${index} must include a selector.`,
+			severity: "error"
+		});
+		if (!component.component || typeof component.component !== "string") diagnostics.push({
+			code: "COMPONENT_IMPORT_INVALID",
+			message: `Component mapping ${index} must include a component path.`,
+			severity: "error"
+		});
+	}
+	const spacing = config.tokens?.spacing;
+	if (spacing?.unit && spacing.unit !== "px" && spacing.unit !== "rem") diagnostics.push({
+		code: "TOKEN_SPACING_UNIT_INVALID",
+		message: `Unsupported spacing unit: ${spacing.unit}`,
+		severity: "error"
+	});
+	if (spacing?.threshold !== void 0 && !Number.isFinite(spacing.threshold)) diagnostics.push({
+		code: "TOKEN_SPACING_THRESHOLD_INVALID",
+		message: "Spacing threshold must be a finite number.",
+		severity: "error"
+	});
+	for (const [name, value] of Object.entries(spacing?.values ?? {})) if (!Number.isFinite(value)) diagnostics.push({
+		code: "TOKEN_SPACING_VALUE_INVALID",
+		message: `Spacing token ${name} must be a finite number.`,
+		severity: "error"
+	});
+	for (const [name, value] of Object.entries(config.tokens?.colors ?? {})) if (!/^#[0-9a-f]{3}([0-9a-f]{3})?$/i.test(value)) diagnostics.push({
+		code: "TOKEN_COLOR_INVALID",
+		message: `Color token ${name} must be a hex color.`,
+		severity: "error"
+	});
+	if (config.tokens?.colorThreshold !== void 0 && !Number.isFinite(config.tokens.colorThreshold)) diagnostics.push({
+		code: "TOKEN_COLOR_THRESHOLD_INVALID",
+		message: "Color threshold must be a finite number.",
+		severity: "error"
+	});
+	for (const [groupName, group] of Object.entries({
+		sizing: config.tokens?.sizing,
+		typography: config.tokens?.typography
+	})) {
+		if (!group) continue;
+		if (group.unit && group.unit !== "px" && group.unit !== "rem") diagnostics.push({
+			code: "TOKEN_NUMERIC_UNIT_INVALID",
+			message: `Unsupported ${groupName} unit: ${group.unit}`,
+			severity: "error"
+		});
+		if (group.threshold !== void 0 && !Number.isFinite(group.threshold)) diagnostics.push({
+			code: "TOKEN_NUMERIC_THRESHOLD_INVALID",
+			message: `${groupName} threshold must be a finite number.`,
+			severity: "error"
+		});
+		for (const [name, value] of Object.entries(group.values ?? {})) if (!Number.isFinite(value)) diagnostics.push({
+			code: "TOKEN_NUMERIC_VALUE_INVALID",
+			message: `${groupName} token ${name} must be a finite number.`,
+			severity: "error"
+		});
+	}
+	validateTestGeneration(config.tests, diagnostics);
+	return diagnostics;
+}
+function validateTestGeneration(tests, diagnostics) {
+	if (!tests) return;
+	if (tests.runner && tests.runner !== "playwright") diagnostics.push({
+		code: "TEST_RUNNER_UNSUPPORTED",
+		message: `Unsupported test runner: ${tests.runner}`,
+		severity: "error"
+	});
+	for (const [index, viewport] of (tests.viewports ?? []).entries()) {
+		if (!Number.isFinite(viewport.width) || viewport.width <= 0) diagnostics.push({
+			code: "TEST_VIEWPORT_WIDTH_INVALID",
+			message: `Test viewport ${index} width must be a positive finite number.`,
+			severity: "error"
+		});
+		if (!Number.isFinite(viewport.height) || viewport.height <= 0) diagnostics.push({
+			code: "TEST_VIEWPORT_HEIGHT_INVALID",
+			message: `Test viewport ${index} height must be a positive finite number.`,
+			severity: "error"
+		});
+	}
+	for (const [index, state] of (tests.states ?? []).entries()) if (!state.name || typeof state.name !== "string") diagnostics.push({
+		code: "TEST_STATE_NAME_INVALID",
+		message: `Test state ${index} must include a name.`,
+		severity: "error"
+	});
+	if (tests.assertions?.layoutTolerance !== void 0 && (!Number.isFinite(tests.assertions.layoutTolerance) || tests.assertions.layoutTolerance < 0)) diagnostics.push({
+		code: "TEST_LAYOUT_TOLERANCE_INVALID",
+		message: "Test layout tolerance must be a finite number greater than or equal to 0.",
+		severity: "error"
+	});
+}
+//#endregion
+//#region packages/core/src/diagnostics/jsonDiagnostic.ts
+function toJsonDiagnostic(diagnostic) {
+	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 } : {}
+	};
+}
+function toJsonDiagnostics(diagnostics) {
+	return diagnostics.map(toJsonDiagnostic);
+}
+function formatDiagnosticText(diagnostic) {
+	const location = [
+		diagnostic.file,
+		diagnostic.source?.line,
+		diagnostic.source?.column
+	].filter((part) => part !== void 0).join(":");
+	return `${location ? `${location}: ` : ""}${diagnostic.severity}: ${diagnostic.code}: ${redactSecrets(diagnostic.message)}`;
+}
+function redactSecrets(value) {
+	return value.replace(/figma[_-]?token\s*[:=]\s*[^\s]+/gi, "FIGMA_TOKEN=[redacted]").replace(/bearer\s+[a-z0-9._-]+/gi, "Bearer [redacted]");
+}
+//#endregion
+//#region packages/core/src/pipeline/checkMode.ts
+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 === void 0) {
+			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
+	};
+}
+//#endregion
+//#region packages/core/src/plugins/pluginRegistry.ts
+var PluginRegistry = class {
+	#sourcePlugins = /* @__PURE__ */ new Map();
+	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));
+	}
+};
+//#endregion
+//#region packages/core/src/index.ts
+/**
+* The main compiler entry point.
+* Parses HTML, applies component mappings, 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
+* });
+*/
+async function embed(input) {
+	const ast = parseHtml(input.html);
+	const diagnostics = validateComponentMappings(input.config?.components ?? []);
+	if (diagnostics.some((d) => d.severity === "error")) return {
+		files: [],
+		diagnostics
+	};
+	const mappedNodes = applyComponentMappings(ast, input.config?.components ?? [], diagnostics);
+	const { files } = input.targetEmitter.emit({
+		nodes: mappedNodes,
+		css: input.css,
+		config: input.config,
+		diagnostics
+	});
+	return {
+		files,
+		diagnostics
+	};
+}
+function applyComponentMappings(nodes, mappings, diagnostics = []) {
+	const parsedMappings = mappings.map((mapping, index) => ({
+		index,
+		mapping,
+		selector: parseSelector(mapping.selector)
+	})).filter(({ selector }) => selector !== void 0);
+	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" ? void 0 : applyComponentMappings(node.children ?? [], mappings, diagnostics),
+				source: node.source
+			};
+		}
+		return {
+			...node,
+			children: applyComponentMappings(node.children ?? [], mappings, diagnostics)
+		};
+	});
+}
+function parseSelector(selector) {
+	const trimmed = selector.trim();
+	if (!trimmed || /[\s>+~,:]/.test(trimmed)) return;
+	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;
+			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;
+			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;
+			parsed.attributes[match[1]] = match[2] ?? match[3] ?? match[4] ?? "";
+			rest = rest.slice(match[0].length);
+			continue;
+		}
+		return;
+	}
+	return parsed;
+}
+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;
+}
+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) if (stack.pop()?.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 ?? [];
+}
+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 attributes = parseAttributes(tagBody.slice(tagName.length).trim());
+	return {
+		kind: "element",
+		tagName,
+		attributes,
+		styles: parseInlineStyle(attributes.style),
+		children: [],
+		source
+	};
+}
+function parseAttributes(source) {
+	const attributes = {};
+	for (const match of source.matchAll(/([:@a-zA-Z_][:@a-zA-Z0-9_.-]*)(?:\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g)) {
+		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(6);
+			const value = node.attributes?.[attributeName];
+			if (value === void 0) {
+				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 lines = source.slice(0, offset).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);
+}
+//#endregion
+export { parseInlineStyle as a, checkGeneratedFiles as c, toJsonDiagnostics as d, defineConfig as f, parseHtml as i, formatDiagnosticText as l, validateConfig as m, embed as n, parseSelector as o, loadConfig as p, matchesSelector as r, PluginRegistry as s, applyComponentMappings as t, toJsonDiagnostic as u };

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "design-embed",
-  "version": "0.1.0",
+  "version": "0.1.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": [
@@ -20,18 +21,12 @@
     "README.md"
   ],
   "bin": {
-    "design-embed": "./dist/cli.js"
+    "design-embed": "./dist/cli.mjs"
   },
-  "dependencies": {
-    "@design-embed/config": "0.1.0",
-    "@design-embed/core": "0.1.0",
-    "@design-embed/target-html": "0.1.0",
-    "@design-embed/target-react": "0.1.0"
+  "devDependencies": {
+    "@design-embed/config": "0.1.1",
+    "@design-embed/core": "0.1.1"
   },
-  "bundledDependencies": [
-    "@design-embed/config",
-    "@design-embed/core"
-  ],
   "scripts": {
     "dev": "node src/cli.ts",
     "compile:react": "node src/cli.ts react",

package/src/cli.ts

@@ -26,7 +26,24 @@ async function main(): Promise<number> {
 		return runInitCommand(parsed.flags);
 	}
 
-	return runCompileCommand(parsed.flags);
+	const flags =
+		args[0] && !args[0].startsWith("--")
+			? { ...parsed.flags, "--": args[0] }
+			: parsed.flags;
+	if (getOutPath(flags) && !hasInput(flags)) {
+		return runPluginCommand(undefined, flags);
+	}
+	return runCompileCommand(flags);
+}
+
+function getOutPath(flags: Record<string, string | boolean>): boolean {
+	return typeof flags["--out"] === "string";
+}
+
+function hasInput(flags: Record<string, string | boolean>): boolean {
+	return (
+		typeof flags["--input"] === "string" || typeof flags["--"] === "string"
+	);
 }
 
 main()