design-embed 0.1.1 → 0.2.0

package/src/commands/compile.ts

@@ -1,17 +1,14 @@
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
-import { dirname, resolve } from "node:path";
-import { type DesignEmbedConfig, loadConfig } from "@design-embed/config";
+import { existsSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { getBooleanFlag, getFormat, getStringFlag } from "../args.ts";
+import { loadConfig } from "../config/index.ts";
 import {
 	checkGeneratedFiles,
 	type Diagnostic,
 	embed,
 	formatDiagnosticText,
-	type TargetEmitter,
-	type TargetTestGenerator,
 	toJsonDiagnostics,
-} from "@design-embed/core";
-import { getBooleanFlag, getFormat, getStringFlag } from "../args.ts";
-import { htmlEmitter } from "../targets/html.ts";
+} from "../core/index.ts";
 
 export interface CompileCommandOptions {
 	check?: boolean;
@@ -22,8 +19,6 @@ export async function runCompileCommand(
 	options: CompileCommandOptions = {},
 ): Promise<number> {
 	const cwd = resolve(process.cwd(), getStringFlag(flags, "--cwd") ?? ".");
-	const inputPath =
-		getStringFlag(flags, "--input") ?? getStringFlag(flags, "--");
 	const explicitConfigPath = getStringFlag(flags, "--config");
 	const defaultConfigPath = resolve(cwd, "design-embed.config.ts");
 	const configPath =
@@ -31,77 +26,45 @@ export async function runCompileCommand(
 		(existsSync(defaultConfigPath) ? "design-embed.config.ts" : undefined);
 	const quiet = getBooleanFlag(flags, "--quiet");
 	const format = getFormat(flags);
-	const generateTests = !getBooleanFlag(flags, "--no-test");
 	const diagnostics: Diagnostic[] = [];
 
-	if (!inputPath) {
+	if (!configPath) {
 		diagnostics.push({
-			code: "INPUT_REQUIRED",
-			message: "--input is required.",
+			code: "CONFIG_REQUIRED",
+			message:
+				"No config file found. Create design-embed.config.ts or use --config.",
 			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,
-		});
+	const configResult = await loadConfig(configPath, cwd);
+	diagnostics.push(...configResult.diagnostics);
+	const config = configResult.config;
+
+	if (hasErrors(diagnostics)) {
 		printDiagnostics(diagnostics, format, quiet);
 		return 2;
 	}
 
-	let config: DesignEmbedConfig | undefined;
-	if (configPath) {
-		const configResult = await loadConfig(configPath, cwd);
-		diagnostics.push(...configResult.diagnostics);
-		config = configResult.config;
-
-		if (hasErrors(diagnostics)) {
-			printDiagnostics(diagnostics, format, quiet);
-			return 2;
-		}
-	}
-
-	const targetAdapter = getTargetAdapter(config);
+	const isCheckMode = options.check && !getBooleanFlag(flags, "--write");
+	const generateTests = !getBooleanFlag(flags, "--no-test");
 
-	const cssPath = getStringFlag(flags, "--css");
-	const html = readFileSync(resolvedInputPath, "utf-8");
-	const css = cssPath
-		? readFileSync(resolve(cwd, cssPath), "utf-8")
-		: undefined;
 	const result = await embed({
-		html,
-		css,
-		configPath,
 		config,
 		cwd,
-		targetEmitter: targetAdapter.emitter,
+		dryRun: isCheckMode,
+		generateTests,
 	});
 	diagnostics.push(...result.diagnostics);
 
-	if (generateTests && targetAdapter.testGenerator) {
-		const testResult = targetAdapter.testGenerator.generateTests({
-			html,
-			css,
-			config: config ?? {},
-			diagnostics,
-			generatedFiles: result.files,
-		});
-		result.files.push(...testResult.files);
-	}
-
 	if (hasErrors(diagnostics)) {
 		printDiagnostics(diagnostics, format, quiet);
 		return 2;
 	}
 
-	if (options.check && !getBooleanFlag(flags, "--write")) {
+	if (isCheckMode) {
 		const checkResult = checkGeneratedFiles({
 			cwd,
 			files: result.files,
@@ -109,21 +72,11 @@ export async function runCompileCommand(
 				return existsSync(path) ? readFileSync(path, "utf-8") : undefined;
 			},
 		});
-		const checkDiagnostics = checkResult.diagnostics;
-		diagnostics.push(...checkDiagnostics);
+		diagnostics.push(...checkResult.diagnostics);
 		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).`);
@@ -155,27 +108,6 @@ export function printDiagnostics(
 	}
 }
 
-interface ResolvedTargetAdapter {
-	emitter: TargetEmitter;
-	testGenerator?: TargetTestGenerator;
-}
-
-function getTargetAdapter(
-	config: DesignEmbedConfig | undefined,
-): ResolvedTargetAdapter {
-	const target = config?.output?.target;
-	if (!target || target === "html") {
-		return { emitter: htmlEmitter };
-	}
-	return {
-		emitter: target as TargetEmitter,
-		testGenerator:
-			"generateTests" in target
-				? (target as TargetEmitter & TargetTestGenerator)
-				: undefined,
-	};
-}
-
 function hasErrors(diagnostics: Diagnostic[]): boolean {
 	return diagnostics.some((diagnostic) => diagnostic.severity === "error");
 }

package/src/commands/generateTests.ts

@@ -1,8 +1,8 @@
-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, TargetTestGenerator } from "@design-embed/core";
+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(
@@ -23,14 +23,7 @@ export async function runGenerateTestsCommand(
 		return 2;
 	}
 
-	const source = readConfiguredSource(config, configPath, cwd, diagnostics);
-	if (!source || hasErrors(diagnostics)) {
-		printDiagnostics(diagnostics, format, quiet);
-		return 2;
-	}
-
-	const testGenerator = getTestGenerator(config);
-	if (!testGenerator) {
+	if (!getTestGenerator(config)) {
 		diagnostics.push({
 			code: "TEST_TARGET_UNSUPPORTED",
 			message:
@@ -41,26 +34,13 @@ export async function runGenerateTestsCommand(
 		return 2;
 	}
 
-	const result = testGenerator.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).`);
@@ -68,71 +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,
-): TargetTestGenerator | undefined {
+function getTestGenerator(config: DesignEmbedConfig): boolean {
 	const target = config.output?.target;
-	return target && target !== "html" && "generateTests" in target
-		? (target as TargetTestGenerator)
-		: undefined;
+	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(
@@ -52,13 +52,12 @@ export async function runInitCommand(
 function configTemplate(viewName: string): string {
 	return `import {
 \tdefineConfig,
-\ttype PluginDefinition,
 \ttype SourcePlugin,
 \ttype SourcePluginInput,
 \ttype SourcePluginResult,
 } from "design-embed";
 
-class HtmlFetcherPlugin implements PluginDefinition, SourcePlugin {
+class HtmlFetcherPlugin implements SourcePlugin {
 \treadonly name = "html-fetcher";
 \tprivate readonly options: { url: string };
 
@@ -100,11 +99,9 @@ class HtmlFetcherPlugin implements PluginDefinition, SourcePlugin {
 }
 
 export default defineConfig({
-\tplugins: [
-\t\tnew HtmlFetcherPlugin({
-\t\t\turl: "https://www.scrapethissite.com/pages/",
-\t\t}),
-\t],
+\tsource: new HtmlFetcherPlugin({
+\t\turl: "https://www.scrapethissite.com/pages/",
+\t}),
 \toutput: {
 \t\tviewName: "${viewName}",
 \t\tviewsDir: "src/generated/views",

package/src/commands/plugin.ts

@@ -1,8 +1,7 @@
 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,
@@ -31,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({ ... })).",
@@ -39,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}`;
@@ -73,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",
+		});
+	}
+}

package/src/core/diagnostics/diagnostic.ts

@@ -0,0 +1,18 @@
+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");
+}