design-embed 0.1.1 → 0.2.0

package/README.md

@@ -38,6 +38,11 @@ By default this uses the built-in HTML target and writes:
 src/generated/views/debug.html
 ```
 
+When `components` are configured with the HTML target, two additional files are generated for each view alongside the HTML:
+
+- `ViewName.ts` — a native web component scaffold (`HTMLElement` subclass with `observedAttributes`, lifecycle hooks, and a `render()` method; no React dependency)
+- `ViewName.html` — includes `<script type="module" src="./ViewName.js"></script>` at the bottom
+
 ## React Adapter Example
 
 Install the React target adapter alongside `design-embed`:
@@ -51,11 +56,11 @@ Create a config file:
 ```ts
 // design-embed.config.ts
 import { defineConfig } from "design-embed";
-import { reactTarget } from "@design-embed/target-react";
+import { ReactTarget } from "@design-embed/target-react";
 
 export default defineConfig({
 	output: {
-		target: reactTarget,
+		target: new ReactTarget(),
 		viewName: "WelcomeHero",
 		viewsDir: "src/components",
 		assembliesDir: "src/pages",

package/dist/cli.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
-import { c as checkGeneratedFiles, d as toJsonDiagnostics, l as formatDiagnosticText, n as embed, p as loadConfig } from "./src-D3fnqGCq.mjs";
+import { a as formatDiagnosticText, d as loadConfig, i as checkGeneratedFiles, n as embed, o as toJsonDiagnostics } from "./core-BLV62TaX.mjs";
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
-import { dirname, isAbsolute, resolve } from "node:path";
+import { dirname, resolve } from "node:path";
 //#region packages/design-embed/src/args.ts
 function parseArgs(args) {
 	const positionals = [];
@@ -38,104 +38,44 @@ function getFormat(flags) {
 	return flags["--format"] === "json" ? "json" : "text";
 }
 //#endregion
-//#region packages/design-embed/src/targets/html.ts
-function emitHtmlDebug(nodes, css) {
-	const body = nodes.map((node) => emitNode(node, 0)).join("");
-	if (!css?.trim()) return body;
-	return `<style>\n${css.trim()}\n</style>\n${body}\n`;
-}
-const htmlEmitter = { emit({ nodes, css, config }) {
-	return { files: [{
-		path: `${config?.output?.viewsDir ?? "src/generated/views"}/debug.html`,
-		contents: emitHtmlDebug(nodes, css)
-	}] };
-} };
-function emitNode(node, depth) {
-	const indent = "	".repeat(depth);
-	if (node.kind === "text") return `${indent}${escapeHtml(node.text ?? "")}\n`;
-	if (node.kind === "component") return `${indent}<${node.component}></${node.component}>\n`;
-	const attributes = Object.entries(node.attributes ?? {}).sort(([left], [right]) => left.localeCompare(right)).map(([name, value]) => value === "" ? name : `${name}="${escapeAttribute(value)}"`).join(" ");
-	const openTag = attributes ? `<${node.tagName} ${attributes}>` : `<${node.tagName}>`;
-	const children = node.children ?? [];
-	if (children.length === 0) return `${indent}${openTag}</${node.tagName}>\n`;
-	return `${indent}${openTag}\n${children.map((child) => emitNode(child, depth + 1)).join("")}${indent}</${node.tagName}>\n`;
-}
-function escapeHtml(value) {
-	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-function escapeAttribute(value) {
-	return escapeHtml(value).replace(/"/g, "&quot;");
-}
-//#endregion
 //#region packages/design-embed/src/commands/compile.ts
 async function runCompileCommand(flags, options = {}) {
 	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 = explicitConfigPath ?? (existsSync(defaultConfigPath) ? "design-embed.config.ts" : void 0);
 	const quiet = getBooleanFlag(flags, "--quiet");
 	const format = getFormat(flags);
-	const generateTests = !getBooleanFlag(flags, "--no-test");
 	const diagnostics = [];
-	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$1(diagnostics)) {
 		printDiagnostics(diagnostics, format, quiet);
 		return 2;
 	}
-	let config;
-	if (configPath) {
-		const configResult = await loadConfig(configPath, cwd);
-		diagnostics.push(...configResult.diagnostics);
-		config = configResult.config;
-		if (hasErrors$1(diagnostics)) {
-			printDiagnostics(diagnostics, format, quiet);
-			return 2;
-		}
-	}
-	const targetAdapter = getTargetAdapter(config);
-	const cssPath = getStringFlag(flags, "--css");
-	const html = readFileSync(resolvedInputPath, "utf-8");
-	const css = cssPath ? readFileSync(resolve(cwd, cssPath), "utf-8") : void 0;
+	const isCheckMode = options.check && !getBooleanFlag(flags, "--write");
 	const result = await embed({
-		html,
-		css,
-		configPath,
 		config,
 		cwd,
-		targetEmitter: targetAdapter.emitter
+		dryRun: isCheckMode,
+		generateTests: !getBooleanFlag(flags, "--no-test")
 	});
 	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$1(diagnostics)) {
 		printDiagnostics(diagnostics, format, quiet);
 		return 2;
 	}
-	if (options.check && !getBooleanFlag(flags, "--write")) {
+	if (isCheckMode) {
 		const checkResult = checkGeneratedFiles({
 			cwd,
 			files: result.files,
@@ -143,17 +83,10 @@ async function runCompileCommand(flags, options = {}) {
 				return existsSync(path) ? readFileSync(path, "utf-8") : void 0;
 			}
 		});
-		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).`);
 	return 0;
@@ -170,14 +103,6 @@ function printDiagnostics(diagnostics, format, quiet) {
 		else console.warn(output);
 	}
 }
-function getTargetAdapter(config) {
-	const target = config?.output?.target;
-	if (!target || target === "html") return { emitter: htmlEmitter };
-	return {
-		emitter: target,
-		testGenerator: "generateTests" in target ? target : void 0
-	};
-}
 function hasErrors$1(diagnostics) {
 	return diagnostics.some((diagnostic) => diagnostic.severity === "error");
 }
@@ -201,13 +126,7 @@ async function runGenerateTestsCommand(flags) {
 		printDiagnostics(diagnostics, format, quiet);
 		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: "generate-tests requires output.target to be a target adapter with generateTests().",
@@ -216,72 +135,23 @@ async function runGenerateTestsCommand(flags) {
 		printDiagnostics(diagnostics, format, quiet);
 		return 2;
 	}
-	const result = testGenerator.generateTests({
-		html: source.html,
-		css: source.css,
+	const result = await embed({
 		config,
-		diagnostics
+		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).`);
 	return 0;
 }
-function readConfiguredSource(config, configPath, cwd, diagnostics) {
-	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;
-	}
-	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;
-	}
-	let css;
-	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;
-		}
-		css = readFileSync(cssPath, "utf-8");
-	}
-	return {
-		html: readFileSync(htmlPath, "utf-8"),
-		css
-	};
-}
-function resolveConfigPath(path, configDir) {
-	return isAbsolute(path) ? path : resolve(configDir, path);
-}
 function getTestGenerator(config) {
 	const target = config.output?.target;
-	return target && target !== "html" && "generateTests" in target ? target : void 0;
+	return !!(target && target !== "html" && "generateTests" in target);
 }
 function hasErrors(diagnostics) {
 	return diagnostics.some((diagnostic) => diagnostic.severity === "error");
@@ -326,13 +196,12 @@ async function runInitCommand(flags) {
 function configTemplate(viewName) {
 	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 };
 
@@ -374,11 +243,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",
@@ -387,77 +254,14 @@ export default defineConfig({
 `;
 }
 //#endregion
-//#region packages/design-embed/src/commands/plugin.ts
-async function runPluginCommand(_name, flags) {
-	const cwd = resolve(process.cwd(), getStringFlag(flags, "--cwd") ?? ".");
-	const configResult = await loadConfig(getStringFlag(flags, "--config") ?? "design-embed.config.ts", cwd);
-	for (const diagnostic of configResult.diagnostics) if (diagnostic.severity === "error") console.error(`error: ${diagnostic.code}: ${diagnostic.message}`);
-	else console.warn(`${diagnostic.severity}: ${diagnostic.code}: ${diagnostic.message}`);
-	if (configResult.diagnostics.some((d) => d.severity === "error")) return 2;
-	const outPath = getStringFlag(flags, "--out");
-	if (!outPath) {
-		console.error("Error: --out is required.");
-		return 2;
-	}
-	const plugin = findSourcePlugin(configResult.config?.plugins);
-	if (!plugin) {
-		console.error("Error: config must include a source plugin instance in the plugins array (e.g. new FigmaHtmlPlugin({ ... })).");
-		return 2;
-	}
-	const result = await plugin.run({
-		cwd,
-		args: {}
-	});
-	for (const diagnostic of result.diagnostics) {
-		const output = `${diagnostic.severity}: ${diagnostic.code}: ${diagnostic.message}`;
-		if (diagnostic.severity === "error") console.error(output);
-		else console.warn(output);
-	}
-	if (result.diagnostics.some((d) => d.severity === "error")) return 2;
-	if (!result.html) {
-		console.error("Error: source plugin produced no HTML.");
-		return 2;
-	}
-	const resolvedOutPath = resolve(cwd, outPath);
-	mkdirSync(dirname(resolvedOutPath), { recursive: true });
-	writeFileSync(resolvedOutPath, result.html, "utf-8");
-	console.log(`Wrote ${outPath}`);
-	for (const file of result.files ?? []) {
-		const resolvedPath = resolve(cwd, file.path);
-		mkdirSync(dirname(resolvedPath), { recursive: true });
-		writeFileSync(resolvedPath, file.contents, "utf-8");
-		console.log(`Wrote ${file.path}`);
-	}
-	return 0;
-}
-function isSourcePlugin(plugin) {
-	return typeof plugin.run === "function";
-}
-function findSourcePlugin(plugins) {
-	return plugins?.find(isSourcePlugin);
-}
-//#endregion
 //#region packages/design-embed/src/cli.ts
 async function main() {
-	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);
-	const flags = args[0] && !args[0].startsWith("--") ? {
-		...parsed.flags,
-		"--": args[0]
-	} : parsed.flags;
-	if (getOutPath(flags) && !hasInput(flags)) return runPluginCommand(void 0, flags);
+	const { command, flags } = parseArgs(process.argv.slice(2));
+	if (command === "check") return runCheckCommand(flags);
+	if (command === "generate-tests") return runGenerateTestsCommand(flags);
+	if (command === "init") return runInitCommand(flags);
 	return runCompileCommand(flags);
 }
-function getOutPath(flags) {
-	return typeof flags["--out"] === "string";
-}
-function hasInput(flags) {
-	return typeof flags["--input"] === "string" || typeof flags["--"] === "string";
-}
 main().then((code) => {
 	if (code !== 0) process.exit(code);
 }).catch((error) => {