design-embed 0.1.0 → 0.1.1

package/dist/commands/generateTests.js

@@ -1,113 +0,0 @@
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
-import { dirname, isAbsolute, resolve } from "node:path";
-import { loadConfig } from "@design-embed/config";
-import { reactTestGenerator } from "@design-embed/target-react";
-import { getBooleanFlag, getFormat, getStringFlag } from "../args.js";
-import { printDiagnostics } from "./compile.js";
-export async function runGenerateTestsCommand(flags) {
-    const cwd = resolve(process.cwd(), getStringFlag(flags, "--cwd") ?? ".");
-    const configPath = getStringFlag(flags, "--config");
-    const quiet = getBooleanFlag(flags, "--quiet");
-    const format = getFormat(flags);
-    const diagnostics = [];
-    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;
-}
-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 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;
-    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, configDir) {
-    return isAbsolute(path) ? path : resolve(configDir, path);
-}
-function hasErrors(diagnostics) {
-    return diagnostics.some((diagnostic) => diagnostic.severity === "error");
-}

package/dist/commands/init.js

@@ -1,102 +0,0 @@
-import { existsSync, mkdirSync, writeFileSync } from "node:fs";
-import { dirname, resolve } from "node:path";
-import { getBooleanFlag, getFormat, getStringFlag } from "../args.js";
-import { printDiagnostics } from "./compile.js";
-export async function runInitCommand(flags) {
-    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 = [];
-    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) {
-    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() {
-    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() {
-    return `import { defineConfig } from "@playwright/experimental-ct-react";
-
-export default defineConfig({
-\ttestDir: ".",
-\tuse: {
-\t\tctPort: 3100,
-\t},
-});
-`;
-}

package/dist/commands/plugin.js

@@ -1,68 +0,0 @@
-import { mkdirSync, writeFileSync } from "node:fs";
-import { dirname, resolve } from "node:path";
-import { loadConfig } from "@design-embed/config";
-import { getStringFlag } from "../args.js";
-export async function runPluginCommand(_name, flags) {
-    const configPath = getStringFlag(flags, "--config");
-    if (!configPath) {
-        console.error("Error: --config is required.");
-        return 2;
-    }
-    const cwd = process.cwd();
-    const configResult = await loadConfig(configPath, 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);
-}

package/dist/index.js

@@ -1,2 +0,0 @@
-export * from "@design-embed/config";
-export * from "@design-embed/core";

package/node_modules/@design-embed/config/README.md

@@ -1,5 +0,0 @@
-# @design-embed/config
-
-Internal configuration loading and validation for design-embed.
-
-It parses the project config format used by the compiler, validates supported output targets, style modes, component mappings, token settings, plugin settings, and local transformer declarations. It also reports config diagnostics in a stable shape so callers can fail early before compilation begins.

package/node_modules/@design-embed/config/dist/index.js

@@ -1,283 +0,0 @@
-import { existsSync } from "node:fs";
-import { dirname, isAbsolute, resolve } from "node:path";
-import { pathToFileURL } from "node:url";
-/**
- * Helper to define configuration with type safety.
- *
- * @param config - The configuration object.
- * @returns The same configuration object.
- *
- * @example
- * export default defineConfig({
- *   output: { target: 'react' }
- * });
- */
-export function defineConfig(config) {
-    return config;
-}
-/**
- * Asynchronously loads a configuration file from disk.
- * Supports .ts, .js, and .mjs files via dynamic import.
- *
- * @param configPath - Path to the config file.
- * @param cwd - Current working directory.
- * @returns A promise resolving to the load result.
- */
-export async function loadConfig(configPath, cwd = process.cwd()) {
-    const diagnostics = [];
-    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));
-        diagnostics.push(...validateTransformerPaths(config, dirname(resolvedPath)));
-        return { config, 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) {
-    const diagnostics = [];
-    const target = config.output?.target;
-    const styleMode = config.output?.styleMode;
-    if (target && target !== "html" && target !== "react") {
-        diagnostics.push({
-            code: "UNSUPPORTED_TARGET",
-            message: `Unsupported output target: ${target}`,
-            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 path.`,
-                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",
-                });
-            }
-        }
-    }
-    for (const [index, transformer] of (config.transformers ?? []).entries()) {
-        if (!transformer.path || typeof transformer.path !== "string") {
-            diagnostics.push({
-                code: "TRANSFORMER_PATH_INVALID",
-                message: `Transformer ${index} must include a path.`,
-                severity: "error",
-            });
-        }
-        if (transformer.order !== undefined &&
-            !Number.isFinite(transformer.order)) {
-            diagnostics.push({
-                code: "TRANSFORMER_ORDER_INVALID",
-                message: `Transformer ${index} order must be a finite number.`,
-                severity: "error",
-            });
-        }
-    }
-    validateTestGeneration(config.tests, diagnostics);
-    return diagnostics;
-}
-function validateTestGeneration(tests, diagnostics) {
-    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",
-        });
-    }
-}
-function isPackageName(path) {
-    return !path.startsWith(".") && !isAbsolute(path);
-}
-function validateTransformerPaths(config, configDir) {
-    const diagnostics = [];
-    for (const transformer of config.transformers ?? []) {
-        if (!transformer.path || typeof transformer.path !== "string") {
-            continue;
-        }
-        if (isPackageName(transformer.path)) {
-            continue;
-        }
-        const resolvedPath = isAbsolute(transformer.path)
-            ? transformer.path
-            : resolve(configDir, transformer.path);
-        if (!existsSync(resolvedPath)) {
-            diagnostics.push({
-                code: "TRANSFORMER_NOT_FOUND",
-                message: `Transformer file not found: ${resolvedPath}`,
-                severity: "error",
-            });
-        }
-    }
-    return diagnostics;
-}

package/node_modules/@design-embed/config/package.json

@@ -1,19 +0,0 @@
-{
-	"name": "@design-embed/config",
-	"version": "0.1.0",
-	"type": "module",
-	"private": true,
-	"exports": {
-		".": {
-			"types": "./src/index.ts",
-			"development": "./src/index.ts",
-			"default": "./dist/index.js"
-		}
-	},
-	"files": [
-		"dist",
-		"src",
-		"!src/**/*.test.ts",
-		"README.md"
-	]
-}