dekit-cli 0.1.0

package/src/vite-plugin-dekit.test.ts

@@ -0,0 +1,55 @@
+import { describe, test, expect } from "vitest";
+import { assemblePageHtml } from "./vite-plugin-dekit.js";
+import type { DesignConfig } from "./types.js";
+import { join } from "node:path";
+
+const DESIGN_DIR = join(import.meta.dirname, "../example");
+
+const mockConfig: DesignConfig = {
+  version: 1.0,
+  globalStyle: "global.css",
+  components: {
+    "my-banner": {
+      template: "components/my-banner/banner.html",
+      style: "components/my-banner/banner.css",
+    },
+  },
+  pages: {
+    cover: {
+      template: "pages/cover/cover.html",
+      style: "pages/cover/cover.css",
+    },
+  },
+  baseDir: DESIGN_DIR,
+};
+
+describe("assemblePageHtml", () => {
+  test("generates valid HTML for a page", async () => {
+    const html = await assemblePageHtml(mockConfig, "cover");
+    expect(html).toContain("<!DOCTYPE html>");
+    expect(html).toContain("global.css");
+    expect(html).toContain("pages/cover/cover.css");
+    expect(html).toContain("Welcome to Dekit");
+    expect(html).toContain("customElements.define");
+    expect(html).toContain("my-banner");
+  });
+
+  test("throws for unknown page", async () => {
+    await expect(
+      assemblePageHtml(mockConfig, "nonexistent")
+    ).rejects.toThrow(/not found/i);
+  });
+
+  test("includes inspector script", async () => {
+    const html = await assemblePageHtml(mockConfig, "cover");
+    expect(html).toContain("postMessage");
+    expect(html).toContain("NODE_SELECTED");
+  });
+
+  test("extracts template inner content for component registration", async () => {
+    const html = await assemblePageHtml(mockConfig, "cover");
+    expect(html).toContain("class=\"banner\"");
+    expect(html).toContain("<slot></slot>");
+    expect(html).not.toMatch(/innerHTML\s*=\s*`\s*<template>/);
+  });
+});

package/src/vite-plugin-dekit.ts

@@ -0,0 +1,107 @@
+import type { Plugin } from "vite";
+import type { DesignConfig } from "./types.js";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { generateComponentRegistrationScript } from "./injected/register-components.js";
+import { generateInspectorScript } from "./injected/inspector.js";
+
+export async function assemblePageHtml(
+  config: DesignConfig,
+  pageName: string
+): Promise<string> {
+  const pageDef = config.pages[pageName];
+  if (!pageDef) {
+    throw new Error(`Page "${pageName}" not found in design config`);
+  }
+
+  const pageTemplate = await readFile(
+    join(config.baseDir, pageDef.template),
+    "utf-8"
+  );
+  const componentScript = await generateComponentRegistrationScript(
+    config.components,
+    config.baseDir
+  );
+  const inspectorScript = generateInspectorScript();
+
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/@design/${config.globalStyle}">
+  <link rel="stylesheet" href="/@design/${pageDef.style}">
+</head>
+<body>
+${pageTemplate}
+<script type="module">
+${componentScript}
+</script>
+<script>
+${inspectorScript}
+</script>
+</body>
+</html>`;
+}
+
+export function dekitPlugin(configRef: { current: DesignConfig }): Plugin {
+  return {
+    name: "vite-plugin-dekit",
+    configureServer(server) {
+      server.middlewares.use(async (req, res, next) => {
+        const url = req.url ?? "";
+
+        if (url.startsWith("/@design/")) {
+          const filePath = join(
+            configRef.current.baseDir,
+            url.replace("/@design/", "")
+          );
+          try {
+            const content = await readFile(filePath, "utf-8");
+            const ext = filePath.split(".").pop();
+            const mimeTypes: Record<string, string> = {
+              css: "text/css",
+              html: "text/html",
+              js: "application/javascript",
+            };
+            res.setHeader(
+              "Content-Type",
+              mimeTypes[ext ?? ""] ?? "text/plain"
+            );
+            res.end(content);
+          } catch {
+            res.statusCode = 404;
+            res.end("Not found");
+          }
+          return;
+        }
+
+        const pageMatch = url.match(/^\/page\/([^/?#]+)/);
+        if (pageMatch) {
+          const pageName = pageMatch[1];
+          try {
+            const html = await assemblePageHtml(configRef.current, pageName);
+            res.setHeader("Content-Type", "text/html");
+            res.end(html);
+          } catch (err) {
+            res.statusCode = 404;
+            res.end(
+              err instanceof Error ? err.message : "Page not found"
+            );
+          }
+          return;
+        }
+
+        next();
+      });
+
+      const watcher = server.watcher;
+      watcher.add(configRef.current.baseDir);
+      watcher.on("change", (changedPath) => {
+        if (changedPath.startsWith(configRef.current.baseDir)) {
+          server.ws.send({ type: "full-reload" });
+        }
+      });
+    },
+  };
+}