design-embed 0.1.0 → 0.2.0

package/src/commands/generateTests.ts

@@ -1,30 +1,20 @@
-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 { resolve } from "node:path";
 import { getBooleanFlag, getFormat, getStringFlag } from "../args.ts";
+import { loadConfig } from "../config/index.ts";
+import { type Diagnostic, embed } from "../core/index.ts";
+import type { DesignEmbedConfig } from "../core/types.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 configPath =
+		getStringFlag(flags, "--config") ?? "design-embed.config.ts";
 	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;
@@ -33,43 +23,24 @@ export async function runGenerateTestsCommand(
 		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") {
+	if (!getTestGenerator(config)) {
 		diagnostics.push({
 			code: "TEST_TARGET_UNSUPPORTED",
-			message: `generate-tests currently supports target "react"; received "${target}".`,
+			message:
+				"generate-tests requires output.target to be a target adapter with generateTests().",
 			severity: "error",
 		});
 		printDiagnostics(diagnostics, format, quiet);
 		return 2;
 	}
 
-	const result = reactTestGenerator.generateTests({
-		html: source.html,
-		css: source.css,
-		config,
-		diagnostics,
-	});
+	const result = await embed({ config, cwd, generateTests: true });
+	diagnostics.push(...result.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).`);
@@ -77,62 +48,9 @@ export async function runGenerateTestsCommand(
 	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 getTestGenerator(config: DesignEmbedConfig): boolean {
+	const target = config.output?.target;
+	return !!(target && target !== "html" && "generateTests" in target);
 }
 
 function hasErrors(diagnostics: Diagnostic[]): boolean {

package/src/commands/init.ts

@@ -1,7 +1,7 @@
 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 type { Diagnostic } from "../core/index.ts";
 import { printDiagnostics } from "./compile.ts";
 
 export async function runInitCommand(
@@ -19,14 +19,6 @@ export async function runInitCommand(
 			path: "design-embed.config.ts",
 			contents: configTemplate(viewName),
 		},
-		{
-			path: "design.html",
-			contents: designHtmlTemplate(),
-		},
-		{
-			path: "playwright-ct.config.ts",
-			contents: playwrightConfigTemplate(),
-		},
 	];
 
 	let written = 0;
@@ -52,62 +44,67 @@ export async function runInitCommand(
 	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",
-		);
+		console.log("Next: pnpm exec design-embed --out ./design.html");
 	}
 	return 0;
 }
 
 function configTemplate(viewName: string): string {
-	return `import { defineConfig } from "design-embed";
+	return `import {
+\tdefineConfig,
+\ttype SourcePlugin,
+\ttype SourcePluginInput,
+\ttype SourcePluginResult,
+} 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},
-});
-`;
-}
+class HtmlFetcherPlugin implements SourcePlugin {
+\treadonly name = "html-fetcher";
+\tprivate readonly options: { url: string };
 
-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>
-`;
-}
+\tconstructor(options: { url: string }) {
+\t\tthis.options = options;
+\t}
 
-function playwrightConfigTemplate(): string {
-	return `import { defineConfig } from "@playwright/experimental-ct-react";
+\tasync run(_input: SourcePluginInput): Promise<SourcePluginResult> {
+\t\ttry {
+\t\t\tconst response = await fetch(this.options.url);
+\t\t\tif (!response.ok) {
+\t\t\t\treturn {
+\t\t\t\t\tdiagnostics: [
+\t\t\t\t\t\t{
+\t\t\t\t\t\t\tcode: "HTML_FETCH_FAILED",
+\t\t\t\t\t\t\tmessage: \`Failed to fetch HTML: \${response.status} \${response.statusText}\`,
+\t\t\t\t\t\t\tseverity: "error",
+\t\t\t\t\t\t},
+\t\t\t\t\t],
+\t\t\t\t};
+\t\t\t}
+
+\t\t\treturn {
+\t\t\t\thtml: await response.text(),
+\t\t\t\tdiagnostics: [],
+\t\t\t};
+\t\t} catch (error) {
+\t\t\treturn {
+\t\t\t\tdiagnostics: [
+\t\t\t\t\t{
+\t\t\t\t\t\tcode: "HTML_FETCH_FAILED",
+\t\t\t\t\t\tmessage: error instanceof Error ? error.message : String(error),
+\t\t\t\t\t\tseverity: "error",
+\t\t\t\t\t},
+\t\t\t\t],
+\t\t\t};
+\t\t}
+\t}
+}
 
 export default defineConfig({
-\ttestDir: ".",
-\tuse: {
-\t\tctPort: 3100,
+\tsource: new HtmlFetcherPlugin({
+\t\turl: "https://www.scrapethissite.com/pages/",
+\t}),
+\toutput: {
+\t\tviewName: "${viewName}",
+\t\tviewsDir: "src/generated/views",
 \t},
 });
 `;

package/src/commands/plugin.ts

@@ -1,20 +1,15 @@
 import { mkdirSync, writeFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
-import { loadConfig, type PluginDefinition } from "@design-embed/config";
-import type { SourcePlugin } from "@design-embed/core";
 import { getStringFlag } from "../args.ts";
+import { loadConfig } from "../config/index.ts";
 
 export async function runPluginCommand(
 	_name: string | undefined,
 	flags: Record<string, string | boolean>,
 ): Promise<number> {
-	const configPath = getStringFlag(flags, "--config");
-	if (!configPath) {
-		console.error("Error: --config is required.");
-		return 2;
-	}
-
-	const cwd = process.cwd();
+	const cwd = resolve(process.cwd(), getStringFlag(flags, "--cwd") ?? ".");
+	const configPath =
+		getStringFlag(flags, "--config") ?? "design-embed.config.ts";
 	const configResult = await loadConfig(configPath, cwd);
 	for (const diagnostic of configResult.diagnostics) {
 		if (diagnostic.severity === "error") {
@@ -35,7 +30,7 @@ export async function runPluginCommand(
 		return 2;
 	}
 
-	const plugin = findSourcePlugin(configResult.config?.plugins);
+	const plugin = configResult.config?.source;
 	if (!plugin) {
 		console.error(
 			"Error: config must include a source plugin instance in the plugins array (e.g. new FigmaHtmlPlugin({ ... })).",
@@ -43,7 +38,7 @@ export async function runPluginCommand(
 		return 2;
 	}
 
-	const result = await plugin.run({ cwd, args: {} });
+	const result = await plugin.run({ cwd });
 
 	for (const diagnostic of result.diagnostics) {
 		const output = `${diagnostic.severity}: ${diagnostic.code}: ${diagnostic.message}`;
@@ -77,13 +72,3 @@ export async function runPluginCommand(
 
 	return 0;
 }
-
-function isSourcePlugin(plugin: PluginDefinition): plugin is SourcePlugin {
-	return typeof (plugin as SourcePlugin).run === "function";
-}
-
-function findSourcePlugin(
-	plugins: PluginDefinition[] | undefined,
-): SourcePlugin | undefined {
-	return plugins?.find(isSourcePlugin);
-}

package/src/config/index.ts

@@ -0,0 +1,302 @@
+import { existsSync, readFileSync } from "node:fs";
+import { isAbsolute, resolve } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import type { Diagnostic } from "../core/diagnostics/diagnostic.ts";
+import type {
+	SourcePlugin,
+	SourcePluginInput,
+	SourcePluginResult,
+} from "../core/plugins/pluginApi.ts";
+import type { DesignEmbedConfig, TestGenerationConfig } from "../core/types.ts";
+
+export type { Diagnostic } from "../core/diagnostics/diagnostic.ts";
+
+export interface LoadConfigResult {
+	config?: DesignEmbedConfig;
+	configPath?: string;
+	diagnostics: Diagnostic[];
+}
+
+export function defineConfig(config: DesignEmbedConfig): DesignEmbedConfig {
+	return config;
+}
+
+export function fromFile(
+	htmlPath: string | URL,
+	cssPath?: string | URL,
+): SourcePlugin {
+	const resolvedHtml = htmlPath instanceof URL ? fileURLToPath(htmlPath) : null;
+	const resolvedCss = cssPath
+		? cssPath instanceof URL
+			? fileURLToPath(cssPath)
+			: null
+		: null;
+	return {
+		name: "html-file",
+		async run({ cwd }: SourcePluginInput): Promise<SourcePluginResult> {
+			const html = readFileSync(
+				resolvedHtml ?? resolve(cwd, htmlPath as string),
+				"utf-8",
+			);
+			const css = cssPath
+				? readFileSync(resolvedCss ?? resolve(cwd, cssPath as string), "utf-8")
+				: undefined;
+			return { html, css, diagnostics: [] };
+		},
+	};
+}
+
+export async function loadConfig(
+	configPath: string,
+	cwd = process.cwd(),
+): Promise<LoadConfigResult> {
+	const diagnostics: Diagnostic[] = [];
+	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, configPath: resolvedPath, diagnostics };
+	} catch (error) {
+		const message = error instanceof Error ? error.message : String(error);
+		return {
+			diagnostics: [
+				{
+					code: "CONFIG_INVALID",
+					message: `Failed to load config file: ${message}`,
+					severity: "error",
+				},
+			],
+		};
+	}
+}
+
+export function validateConfig(config: DesignEmbedConfig): Diagnostic[] {
+	const diagnostics: Diagnostic[] = [];
+	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 name.`,
+				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 !== undefined && !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 !== undefined &&
+		!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 !== undefined && !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: TestGenerationConfig | undefined,
+	diagnostics: Diagnostic[],
+): void {
+	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 !== undefined &&
+		(!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",
+		});
+	}
+}