design-embed 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,42 @@
+{
+  "name": "design-embed",
+  "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"
+  ],
+  "bin": {
+    "design-embed": "./dist/cli.js"
+  },
+  "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"
+  },
+  "bundledDependencies": [
+    "@design-embed/config",
+    "@design-embed/core"
+  ],
+  "scripts": {
+    "dev": "node src/cli.ts",
+    "compile:react": "node src/cli.ts react",
+    "compile:html": "node src/cli.ts html",
+    "compile:vanjs": "node src/cli.ts vanjs",
+    "get-raw": "node src/cli.ts raw"
+  }
+}

package/src/args.ts

@@ -0,0 +1,57 @@
+export interface ParsedArgs {
+	command: string;
+	positionals: string[];
+	flags: Record<string, string | boolean>;
+}
+
+export function parseArgs(args: string[]): ParsedArgs {
+	const positionals: string[] = [];
+	const flags: Record<string, string | boolean> = {};
+
+	for (let index = 0; index < args.length; index += 1) {
+		const value = args[index];
+		if (!value?.startsWith("--")) {
+			if (value) {
+				positionals.push(value);
+			}
+			continue;
+		}
+
+		const next = args[index + 1];
+		if (!next || next.startsWith("--")) {
+			flags[value] = true;
+			continue;
+		}
+
+		flags[value] = next;
+		index += 1;
+	}
+
+	const [command = "compile", ...rest] = positionals;
+	return {
+		command,
+		positionals: rest,
+		flags,
+	};
+}
+
+export function getStringFlag(
+	flags: Record<string, string | boolean>,
+	name: string,
+): string | undefined {
+	const value = flags[name];
+	return typeof value === "string" ? value : undefined;
+}
+
+export function getBooleanFlag(
+	flags: Record<string, string | boolean>,
+	name: string,
+): boolean {
+	return flags[name] === true;
+}
+
+export function getFormat(
+	flags: Record<string, string | boolean>,
+): "json" | "text" {
+	return flags["--format"] === "json" ? "json" : "text";
+}

package/src/cli.ts

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+import { parseArgs } from "./args.ts";
+import { runCheckCommand } from "./commands/check.ts";
+import { runCompileCommand } from "./commands/compile.ts";
+import { runGenerateTestsCommand } from "./commands/generateTests.ts";
+import { runInitCommand } from "./commands/init.ts";
+import { runPluginCommand } from "./commands/plugin.ts";
+
+async function main(): Promise<number> {
+	const args = process.argv.slice(2);
+	const parsed = parseArgs(args);
+
+	if (args[0] === "check") {
+		return runCheckCommand(parsed.flags);
+	}
+
+	if (args[0] === "plugin") {
+		return runPluginCommand(parsed.positionals[0], parsed.flags);
+	}
+
+	if (args[0] === "generate-tests") {
+		return runGenerateTestsCommand(parsed.flags);
+	}
+
+	if (args[0] === "init") {
+		return runInitCommand(parsed.flags);
+	}
+
+	return runCompileCommand(parsed.flags);
+}
+
+main()
+	.then((code) => {
+		if (code !== 0) {
+			process.exit(code);
+		}
+	})
+	.catch((error) => {
+		const message = error instanceof Error ? error.message : String(error);
+		console.error(`Pipeline failed: ${message}`);
+		process.exit(1);
+	});

package/src/commands/check.ts

@@ -0,0 +1,7 @@
+import { runCompileCommand } from "./compile.ts";
+
+export async function runCheckCommand(
+	flags: Record<string, string | boolean>,
+): Promise<number> {
+	return runCompileCommand(flags, { check: true });
+}

package/src/commands/compile.ts

@@ -0,0 +1,198 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, isAbsolute, resolve } from "node:path";
+import { type DesignEmbedConfig, loadConfig } from "@design-embed/config";
+import {
+	checkGeneratedFiles,
+	type Diagnostic,
+	embed,
+	formatDiagnosticText,
+	type TransformerPlugin,
+	toJsonDiagnostics,
+} from "@design-embed/core";
+import { htmlEmitter } from "@design-embed/target-html";
+import { reactEmitter } from "@design-embed/target-react";
+import { getBooleanFlag, getFormat, getStringFlag } from "../args.ts";
+
+export interface CompileCommandOptions {
+	check?: boolean;
+}
+
+export async function runCompileCommand(
+	flags: Record<string, string | boolean>,
+	options: CompileCommandOptions = {},
+): Promise<number> {
+	const cwd = resolve(process.cwd(), getStringFlag(flags, "--cwd") ?? ".");
+	const inputPath = getStringFlag(flags, "--input");
+	const configPath = getStringFlag(flags, "--config");
+	const quiet = getBooleanFlag(flags, "--quiet");
+	const format = getFormat(flags);
+	const diagnostics: Diagnostic[] = [];
+
+	if (!inputPath) {
+		diagnostics.push({
+			code: "INPUT_REQUIRED",
+			message: "--input is required.",
+			severity: "error",
+		});
+		printDiagnostics(diagnostics, format, quiet);
+		return 2;
+	}
+
+	const resolvedInputPath = resolve(cwd, inputPath);
+	if (!existsSync(resolvedInputPath)) {
+		diagnostics.push({
+			code: "INPUT_NOT_FOUND",
+			message: `Input file not found: ${resolvedInputPath}`,
+			severity: "error",
+			file: inputPath,
+		});
+		printDiagnostics(diagnostics, format, quiet);
+		return 2;
+	}
+
+	let config: DesignEmbedConfig | undefined;
+	let transformers: TransformerPlugin[] = [];
+	if (configPath) {
+		const configResult = await loadConfig(configPath, cwd);
+		diagnostics.push(...configResult.diagnostics);
+		config = configResult.config;
+
+		if (hasErrors(diagnostics)) {
+			printDiagnostics(diagnostics, format, quiet);
+			return 2;
+		}
+
+		transformers = await loadTransformers(config, configPath, cwd, diagnostics);
+		if (hasErrors(diagnostics)) {
+			printDiagnostics(diagnostics, format, quiet);
+			return 2;
+		}
+	}
+
+	const target = config?.output?.target ?? "html";
+	const targetEmitter = target === "react" ? reactEmitter : htmlEmitter;
+
+	const cssPath = getStringFlag(flags, "--css");
+	const result = await embed({
+		html: readFileSync(resolvedInputPath, "utf-8"),
+		css: cssPath ? readFileSync(resolve(cwd, cssPath), "utf-8") : undefined,
+		configPath,
+		config,
+		cwd,
+		transformers,
+		targetEmitter,
+	});
+	diagnostics.push(...result.diagnostics);
+
+	if (hasErrors(diagnostics)) {
+		printDiagnostics(diagnostics, format, quiet);
+		return 2;
+	}
+
+	if (options.check && !getBooleanFlag(flags, "--write")) {
+		const checkResult = checkGeneratedFiles({
+			cwd,
+			files: result.files,
+			readFile(path) {
+				return existsSync(path) ? readFileSync(path, "utf-8") : undefined;
+			},
+		});
+		const checkDiagnostics = checkResult.diagnostics;
+		diagnostics.push(...checkDiagnostics);
+		printDiagnostics(diagnostics, format, quiet);
+		return checkResult.ok ? 0 : 3;
+	}
+
+	for (const file of result.files) {
+		const outPath = resolve(cwd, file.path);
+		mkdirSync(dirname(outPath), { recursive: true });
+		writeFileSync(outPath, file.contents, "utf-8");
+		if (!quiet && format === "text") {
+			console.log(`Wrote ${file.path}`);
+		}
+	}
+
+	printDiagnostics(diagnostics, format, quiet);
+	if (!quiet && format === "text") {
+		console.log(`Success. Generated ${result.files.length} file(s).`);
+	}
+	return 0;
+}
+
+export function printDiagnostics(
+	diagnostics: Diagnostic[],
+	format: "json" | "text",
+	quiet: boolean,
+): void {
+	if (format === "json") {
+		console.log(
+			JSON.stringify({ diagnostics: toJsonDiagnostics(diagnostics) }, null, 2),
+		);
+		return;
+	}
+	if (quiet) {
+		return;
+	}
+	for (const diagnostic of diagnostics) {
+		const output = formatDiagnosticText(diagnostic);
+		if (diagnostic.severity === "error") {
+			console.error(output);
+		} else {
+			console.warn(output);
+		}
+	}
+}
+
+function isPackageName(path: string): boolean {
+	return !path.startsWith(".") && !isAbsolute(path);
+}
+
+async function loadTransformers(
+	config: DesignEmbedConfig | undefined,
+	configPath: string,
+	cwd: string,
+	diagnostics: Diagnostic[],
+): Promise<TransformerPlugin[]> {
+	const configDir = dirname(resolve(cwd, configPath));
+	const loaded: TransformerPlugin[] = [];
+
+	for (const transformer of config?.transformers ?? []) {
+		const specifier = isPackageName(transformer.path)
+			? transformer.path
+			: isAbsolute(transformer.path)
+				? transformer.path
+				: resolve(configDir, transformer.path);
+		try {
+			const module = await import(specifier);
+			const plugin = module.default ?? module.transformer;
+			if (!plugin?.transform) {
+				diagnostics.push({
+					code: "TRANSFORMER_INVALID",
+					message: `Transformer ${transformer.path} must export a plugin object with transform().`,
+					severity: "error",
+					file: transformer.path,
+				});
+				continue;
+			}
+			loaded.push({
+				name: plugin.name ?? transformer.path,
+				order: transformer.order ?? plugin.order,
+				transform: plugin.transform,
+			});
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			diagnostics.push({
+				code: "TRANSFORMER_LOAD_FAILED",
+				message: `Failed to load transformer ${transformer.path}: ${message}`,
+				severity: "error",
+				file: transformer.path,
+			});
+		}
+	}
+
+	return loaded;
+}
+
+function hasErrors(diagnostics: Diagnostic[]): boolean {
+	return diagnostics.some((diagnostic) => diagnostic.severity === "error");
+}

package/src/commands/generateTests.ts

@@ -0,0 +1,140 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, isAbsolute, resolve } from "node:path";
+import { type DesignEmbedConfig, loadConfig } from "@design-embed/config";
+import type { Diagnostic } from "@design-embed/core";
+import { reactTestGenerator } from "@design-embed/target-react";
+import { getBooleanFlag, getFormat, getStringFlag } from "../args.ts";
+import { printDiagnostics } from "./compile.ts";
+
+export async function runGenerateTestsCommand(
+	flags: Record<string, string | boolean>,
+): Promise<number> {
+	const cwd = resolve(process.cwd(), getStringFlag(flags, "--cwd") ?? ".");
+	const configPath = getStringFlag(flags, "--config");
+	const quiet = getBooleanFlag(flags, "--quiet");
+	const format = getFormat(flags);
+	const diagnostics: Diagnostic[] = [];
+
+	if (!configPath) {
+		diagnostics.push({
+			code: "CONFIG_REQUIRED",
+			message: "--config is required for generate-tests.",
+			severity: "error",
+		});
+		printDiagnostics(diagnostics, format, quiet);
+		return 2;
+	}
+
+	const configResult = await loadConfig(configPath, cwd);
+	diagnostics.push(...configResult.diagnostics);
+	const config = configResult.config;
+	if (!config || hasErrors(diagnostics)) {
+		printDiagnostics(diagnostics, format, quiet);
+		return 2;
+	}
+
+	const source = readConfiguredSource(config, configPath, cwd, diagnostics);
+	if (!source || hasErrors(diagnostics)) {
+		printDiagnostics(diagnostics, format, quiet);
+		return 2;
+	}
+
+	const target = config.output?.target ?? "html";
+	if (target !== "react") {
+		diagnostics.push({
+			code: "TEST_TARGET_UNSUPPORTED",
+			message: `generate-tests currently supports target "react"; received "${target}".`,
+			severity: "error",
+		});
+		printDiagnostics(diagnostics, format, quiet);
+		return 2;
+	}
+
+	const result = reactTestGenerator.generateTests({
+		html: source.html,
+		css: source.css,
+		config,
+		diagnostics,
+	});
+	if (hasErrors(diagnostics)) {
+		printDiagnostics(diagnostics, format, quiet);
+		return 2;
+	}
+
+	for (const file of result.files) {
+		const outPath = resolve(cwd, file.path);
+		mkdirSync(dirname(outPath), { recursive: true });
+		writeFileSync(outPath, file.contents, "utf-8");
+		if (!quiet && format === "text") {
+			console.log(`Wrote ${file.path}`);
+		}
+	}
+
+	printDiagnostics(diagnostics, format, quiet);
+	if (!quiet && format === "text") {
+		console.log(`Success. Generated ${result.files.length} test file(s).`);
+	}
+	return 0;
+}
+
+interface SourceContents {
+	html: string;
+	css?: string;
+}
+
+function readConfiguredSource(
+	config: DesignEmbedConfig,
+	configPath: string,
+	cwd: string,
+	diagnostics: Diagnostic[],
+): SourceContents | undefined {
+	const source = config.tests?.source;
+	if (!source?.html) {
+		diagnostics.push({
+			code: "TEST_SOURCE_HTML_REQUIRED",
+			message: "tests.source.html is required for generate-tests.",
+			severity: "error",
+		});
+		return undefined;
+	}
+
+	const configDir = dirname(resolve(cwd, configPath));
+	const htmlPath = resolveConfigPath(source.html, configDir);
+	if (!existsSync(htmlPath)) {
+		diagnostics.push({
+			code: "TEST_SOURCE_HTML_NOT_FOUND",
+			message: `Test source HTML not found: ${htmlPath}`,
+			severity: "error",
+			file: source.html,
+		});
+		return undefined;
+	}
+
+	let css: string | undefined;
+	if (source.css) {
+		const cssPath = resolveConfigPath(source.css, configDir);
+		if (!existsSync(cssPath)) {
+			diagnostics.push({
+				code: "TEST_SOURCE_CSS_NOT_FOUND",
+				message: `Test source CSS not found: ${cssPath}`,
+				severity: "error",
+				file: source.css,
+			});
+			return undefined;
+		}
+		css = readFileSync(cssPath, "utf-8");
+	}
+
+	return {
+		html: readFileSync(htmlPath, "utf-8"),
+		css,
+	};
+}
+
+function resolveConfigPath(path: string, configDir: string): string {
+	return isAbsolute(path) ? path : resolve(configDir, path);
+}
+
+function hasErrors(diagnostics: Diagnostic[]): boolean {
+	return diagnostics.some((diagnostic) => diagnostic.severity === "error");
+}

package/src/commands/init.ts

@@ -0,0 +1,114 @@
+import { existsSync, mkdirSync, writeFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import type { Diagnostic } from "@design-embed/core";
+import { getBooleanFlag, getFormat, getStringFlag } from "../args.ts";
+import { printDiagnostics } from "./compile.ts";
+
+export async function runInitCommand(
+	flags: Record<string, string | boolean>,
+): Promise<number> {
+	const cwd = resolve(process.cwd(), getStringFlag(flags, "--cwd") ?? ".");
+	const quiet = getBooleanFlag(flags, "--quiet");
+	const force = getBooleanFlag(flags, "--force");
+	const format = getFormat(flags);
+	const viewName = getStringFlag(flags, "--view-name") ?? "WelcomeHero";
+	const diagnostics: Diagnostic[] = [];
+
+	const files = [
+		{
+			path: "design-embed.config.ts",
+			contents: configTemplate(viewName),
+		},
+		{
+			path: "design.html",
+			contents: designHtmlTemplate(),
+		},
+		{
+			path: "playwright-ct.config.ts",
+			contents: playwrightConfigTemplate(),
+		},
+	];
+
+	let written = 0;
+	for (const file of files) {
+		const outPath = resolve(cwd, file.path);
+		if (existsSync(outPath) && !force) {
+			diagnostics.push({
+				code: "INIT_FILE_EXISTS",
+				message: `Skipped existing file: ${file.path}. Pass --force to overwrite it.`,
+				severity: "warning",
+				file: file.path,
+			});
+			continue;
+		}
+		mkdirSync(dirname(outPath), { recursive: true });
+		writeFileSync(outPath, file.contents, "utf-8");
+		written += 1;
+		if (!quiet && format === "text") {
+			console.log(`Wrote ${file.path}`);
+		}
+	}
+
+	printDiagnostics(diagnostics, format, quiet);
+	if (!quiet && format === "text") {
+		console.log(`Success. Initialized design-embed with ${written} file(s).`);
+		console.log(
+			"Next: pnpm exec design-embed --input ./design.html --config ./design-embed.config.ts",
+		);
+	}
+	return 0;
+}
+
+function configTemplate(viewName: string): string {
+	return `import { defineConfig } from "design-embed";
+
+export default defineConfig({
+\toutput: {
+\t\ttarget: "react",
+\t\tviewName: "${viewName}",
+\t\tviewsDir: "src/generated/views",
+\t\tstyleMode: "inline",
+\t},
+\ttests: {
+\t\toutputDir: "tests/generated/design-embed",
+\t\trunner: "playwright",
+\t\tsource: {
+\t\t\thtml: "./design.html",
+\t\t},
+\t\tviewports: [
+\t\t\t{ name: "mobile", width: 390, height: 844 },
+\t\t\t{ name: "desktop", width: 1440, height: 900 },
+\t\t],
+\t\tstates: [{ name: "default" }],
+\t\tassertions: {
+\t\t\tscreenshot: true,
+\t\t\tlayout: true,
+\t\t\tlayoutTolerance: 1,
+\t\t\tselectors: [":scope", ":scope *"],
+\t\t},
+\t},
+});
+`;
+}
+
+function designHtmlTemplate(): string {
+	return `<section style="box-sizing: border-box; width: 320px; padding: 24px; border-radius: 16px; background: #f8fafc; color: #0f172a; font-family: Arial, sans-serif;">
+\t<p style="margin: 0 0 8px; color: #2563eb; font-size: 14px; font-weight: 700;">Design Embed</p>
+\t<h1 style="margin: 0 0 12px; font-size: 32px; line-height: 1.1;">Welcome hero</h1>
+\t<p style="margin: 0 0 20px; font-size: 16px; line-height: 1.5;">Replace this file with HTML exported from your design source.</p>
+\t<button data-role="primary" style="border: 0; border-radius: 999px; padding: 12px 18px; background: #2563eb; color: white; font-size: 14px; font-weight: 700;">Get started</button>
+</section>
+`;
+}
+
+function playwrightConfigTemplate(): string {
+	return `import { defineConfig } from "@playwright/experimental-ct-react";
+
+export default defineConfig({
+\ttestDir: ".",
+\tuse: {
+\t\tctPort: 3100,
+\t},
+});
+`;
+}