design-embed 0.1.0 → 0.2.0

package/dist/index.d.mts

@@ -0,0 +1,273 @@
+//#region packages/design-embed/src/core/nodes.d.ts
+/**
+ * Location in the source HTML file.
+ */
+interface SourceLocation {
+  /** Absolute offset in characters. */
+  offset: number;
+  /** 1-based line number. */
+  line: number;
+  /** 1-based column number. */
+  column: number;
+}
+/**
+ * A normalized node in the design AST.
+ */
+interface DesignNode {
+  /** The type of node. */
+  kind: "element" | "text" | "component";
+  /** HTML tag name (for element kind). */
+  tagName?: string;
+  /** HTML attributes (for element kind). */
+  attributes?: Record<string, string>;
+  /** Parsed inline styles (for element kind). */
+  styles?: Record<string, string>;
+  /** Utility classes to apply. */
+  generatedClassNames?: string[];
+  /** Child nodes. */
+  children?: DesignNode[];
+  /** Inner text content (for text kind). */
+  text?: string;
+  /** Original location in the source HTML. */
+  source?: SourceLocation;
+  /** Component name (for component kind). */
+  component?: string;
+  /** Named export of the component. */
+  importName?: string;
+  /** Mapped prop values for the component. */
+  props?: Record<string, PropValue>;
+  /** Import path of the component. */
+  importPath?: string;
+  /**
+   * The original element node a component was mapped from. Retained so
+   * targets can reconstruct the element's structure when emitting the
+   * component implementation.
+   */
+  sourceElement?: DesignNode;
+}
+/**
+ * A value passed to a component prop.
+ */
+type PropValue = {
+  kind: "literal";
+  value: string | number | boolean; /** Source attribute name when the prop is bound to `$attr.*`. */
+  attribute?: string;
+} | {
+  kind: "text";
+  value: string;
+} | {
+  kind: "children";
+  value: DesignNode[];
+};
+//#endregion
+//#region packages/design-embed/src/core/plugins/pluginApi.d.ts
+/**
+ * Represents a file generated by the compiler.
+ */
+interface GeneratedFile {
+  /** Relative path from the output directory. */
+  path: string;
+  /** File content. */
+  contents: string;
+}
+interface GeneratedAsset {
+  path: string;
+  contents?: string | Uint8Array;
+  sourceUrl?: string;
+}
+interface SourcePlugin {
+  name: string;
+  run(input: SourcePluginInput): Promise<SourcePluginResult>;
+}
+interface SourcePluginInput {
+  cwd: string;
+  config?: unknown;
+}
+interface SourcePluginResult {
+  html?: string;
+  css?: string;
+  assets?: GeneratedAsset[];
+  files?: GeneratedFile[];
+  diagnostics: Diagnostic[];
+}
+interface TargetEmitResult {
+  files: GeneratedFile[];
+}
+interface TargetTestGenerateResult {
+  files: GeneratedFile[];
+  diagnostics: Diagnostic[];
+}
+//#endregion
+//#region packages/design-embed/src/core/types.d.ts
+interface TargetEmitInput {
+  nodes: DesignNode[];
+  css?: string;
+  config?: DesignEmbedConfig;
+  diagnostics: Diagnostic[];
+}
+interface TargetEmitter {
+  emit(input: TargetEmitInput): TargetEmitResult;
+}
+interface TargetTestGenerateInput {
+  html: string;
+  css?: string;
+  config: DesignEmbedConfig;
+}
+interface TargetTestGenerator {
+  generateTests(input: TargetTestGenerateInput): TargetTestGenerateResult;
+}
+type StyleMode = "inline" | "css-modules" | "tailwind";
+interface ComponentMapping {
+  selector: string;
+  component: string;
+  props?: Record<string, string>;
+}
+interface TokenConfig {
+  spacing?: {
+    unit?: "px" | "rem";
+    threshold?: number;
+    values?: Record<string, number>;
+  };
+  sizing?: NumericTokenGroup;
+  typography?: NumericTokenGroup;
+  radius?: Record<string, number>;
+  borderWidth?: Record<string, number>;
+  shadow?: Record<string, string>;
+  colors?: Record<string, string>;
+  colorThreshold?: number;
+}
+interface NumericTokenGroup {
+  unit?: "px" | "rem";
+  threshold?: number;
+  values?: Record<string, number>;
+}
+type StyleMappings = Record<string, Record<string, string>>;
+interface TestGenerationConfig {
+  outputDir?: string;
+  runner?: "playwright";
+  viewports?: TestViewport[];
+  states?: TestState[];
+  assertions?: TestAssertions;
+}
+interface TestViewport {
+  name?: string;
+  width: number;
+  height: number;
+}
+interface TestState {
+  name: string;
+  hover?: string;
+  focus?: string;
+  click?: string;
+  waitFor?: string;
+}
+interface TestAssertions {
+  screenshot?: boolean;
+  layout?: boolean;
+  layoutTolerance?: number;
+  selectors?: string[];
+  /**
+   * Per-pixel color sensitivity (0-1) for the screenshot comparison. Smaller
+   * is stricter. Defaults to 0.2.
+   */
+  screenshotThreshold?: number;
+  /**
+   * Maximum number of differing pixels tolerated in the screenshot
+   * comparison. Defaults to 0 (byte-exact).
+   */
+  screenshotMaxDiffPixels?: number;
+}
+interface DesignEmbedConfig {
+  output?: {
+    viewsDir?: string | URL;
+    target?: "html" | TargetEmitter;
+    viewName?: string;
+    styleMode?: StyleMode;
+  };
+  components?: ComponentMapping[];
+  tokens?: TokenConfig;
+  styleMappings?: StyleMappings;
+  source?: SourcePlugin;
+  tests?: TestGenerationConfig;
+}
+//#endregion
+//#region packages/design-embed/src/core/index.d.ts
+/**
+ * Input for the core embed function.
+ */
+interface DesignEmbedInput {
+  /** The compiler configuration. */
+  config?: DesignEmbedConfig;
+  /** Working directory. */
+  cwd?: string;
+  /** When true, skips writing output files to disk. Defaults to false. */
+  dryRun?: boolean;
+  /** When true, generates test files alongside output files. Defaults to false. */
+  generateTests?: boolean;
+}
+/**
+ * Result of the embedding process.
+ */
+interface DesignEmbedResult {
+  /** Source HTML resolved from the config's source plugin. */
+  html: string;
+  /** Source CSS resolved from the config's source plugin. */
+  css?: string;
+  /** Generated files. */
+  files: GeneratedFile[];
+  /** Diagnostics reported during compilation. */
+  diagnostics: Diagnostic[];
+}
+/**
+ * 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.
+ *
+ */
+declare function embed(input: DesignEmbedInput): Promise<DesignEmbedResult>;
+declare function applyComponentMappings(nodes: DesignNode[], mappings: ComponentMapping[], diagnostics?: Diagnostic[]): DesignNode[];
+declare function parseHtml(html: string): DesignNode[];
+//#endregion
+//#region packages/design-embed/src/core/diagnostics/diagnostic.d.ts
+type DiagnosticSeverity = "error" | "warning" | "info";
+interface Diagnostic {
+  code: string;
+  message: string;
+  severity: DiagnosticSeverity;
+  file?: string;
+  source?: SourceLocation;
+  selector?: string;
+  property?: string;
+  details?: Record<string, unknown>;
+}
+//#endregion
+//#region packages/design-embed/src/config/index.d.ts
+interface LoadConfigResult {
+  config?: DesignEmbedConfig;
+  configPath?: string;
+  diagnostics: Diagnostic[];
+}
+declare function defineConfig(config: DesignEmbedConfig): DesignEmbedConfig;
+declare function fromFile(htmlPath: string | URL, cssPath?: string | URL): SourcePlugin;
+declare function loadConfig(configPath: string, cwd?: string): Promise<LoadConfigResult>;
+declare function validateConfig(config: DesignEmbedConfig): Diagnostic[];
+//#endregion
+//#region packages/design-embed/src/targets/html.d.ts
+interface HtmlTargetOptions {
+  domModel?: "light" | "shadow";
+}
+declare class HtmlTarget implements TargetEmitter, TargetTestGenerator {
+  private readonly domModel;
+  constructor(options?: HtmlTargetOptions);
+  emit({
+    nodes,
+    css,
+    config
+  }: TargetEmitInput): TargetEmitResult;
+  generateTests(input: TargetTestGenerateInput): TargetTestGenerateResult;
+}
+declare const htmlTarget: TargetEmitter & TargetTestGenerator;
+//#endregion
+export { type ComponentMapping, type DesignEmbedConfig, type DesignEmbedInput, type DesignEmbedResult, type DesignNode, type Diagnostic, type DiagnosticSeverity, type GeneratedAsset, type GeneratedFile, HtmlTarget, type HtmlTargetOptions, type LoadConfigResult, type NumericTokenGroup, type PropValue, type SourceLocation, type SourcePlugin, type SourcePluginInput, type SourcePluginResult, type StyleMappings, type StyleMode, type TargetEmitInput, type TargetEmitResult, type TargetEmitter, type TargetTestGenerateInput, type TargetTestGenerateResult, type TargetTestGenerator, type TestAssertions, type TestGenerationConfig, type TestState, type TestViewport, type TokenConfig, applyComponentMappings, defineConfig, embed, fromFile, htmlTarget, loadConfig, parseHtml, validateConfig };

package/dist/index.mjs

@@ -0,0 +1,2 @@
+import { c as htmlTarget, d as loadConfig, f as validateConfig, l as defineConfig, n as embed, r as parseHtml, s as HtmlTarget, t as applyComponentMappings, u as fromFile } from "./core-BLV62TaX.mjs";
+export { HtmlTarget, applyComponentMappings, defineConfig, embed, fromFile, htmlTarget, loadConfig, parseHtml, validateConfig };

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "design-embed",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "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,23 +21,9 @@
     "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"
-  },
-  "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"
+    "test": "node --conditions=development --test src/**/*.test.ts"
   }
 }

package/src/cli.ts

@@ -4,29 +4,21 @@ 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);
+	const { command, flags } = parseArgs(process.argv.slice(2));
 
-	if (args[0] === "check") {
-		return runCheckCommand(parsed.flags);
+	if (command === "check") {
+		return runCheckCommand(flags);
 	}
-
-	if (args[0] === "plugin") {
-		return runPluginCommand(parsed.positionals[0], parsed.flags);
-	}
-
-	if (args[0] === "generate-tests") {
-		return runGenerateTestsCommand(parsed.flags);
+	if (command === "generate-tests") {
+		return runGenerateTestsCommand(flags);
 	}
-
-	if (args[0] === "init") {
-		return runInitCommand(parsed.flags);
+	if (command === "init") {
+		return runInitCommand(flags);
 	}
 
-	return runCompileCommand(parsed.flags);
+	return runCompileCommand(flags);
 }
 
 main()

package/src/commands/compile.ts

@@ -1,17 +1,14 @@
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
-import { dirname, isAbsolute, 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 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";
+} from "../core/index.ts";
 
 export interface CompileCommandOptions {
 	check?: boolean;
@@ -22,65 +19,43 @@ export async function runCompileCommand(
 	options: CompileCommandOptions = {},
 ): Promise<number> {
 	const cwd = resolve(process.cwd(), getStringFlag(flags, "--cwd") ?? ".");
-	const inputPath = getStringFlag(flags, "--input");
-	const configPath = getStringFlag(flags, "--config");
+	const explicitConfigPath = getStringFlag(flags, "--config");
+	const defaultConfigPath = resolve(cwd, "design-embed.config.ts");
+	const configPath =
+		explicitConfigPath ??
+		(existsSync(defaultConfigPath) ? "design-embed.config.ts" : undefined);
 	const quiet = getBooleanFlag(flags, "--quiet");
 	const format = getFormat(flags);
 	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;
-	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 isCheckMode = options.check && !getBooleanFlag(flags, "--write");
+	const generateTests = !getBooleanFlag(flags, "--no-test");
 
-	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,
+		dryRun: isCheckMode,
+		generateTests,
 	});
 	diagnostics.push(...result.diagnostics);
 
@@ -89,7 +64,7 @@ export async function runCompileCommand(
 		return 2;
 	}
 
-	if (options.check && !getBooleanFlag(flags, "--write")) {
+	if (isCheckMode) {
 		const checkResult = checkGeneratedFiles({
 			cwd,
 			files: result.files,
@@ -97,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).`);
@@ -143,56 +108,6 @@ export function printDiagnostics(
 	}
 }
 
-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");
 }