dekit-cli 0.2.3 → 0.4.0

package/src/server.ts

@@ -1,27 +1,53 @@
 import type { DesignConfig } from "./types.js";
 import { startDesignServer } from "./design-server.js";
 import { startEditorServer } from "./editor-server.js";
+import { createServer } from "node:net";
+
+const DEFAULT_PORT = 7980;
 
 export interface ServerOptions {
   config: DesignConfig;
-  port: number;
-  designPort: number;
+  port?: number;
   noOpen?: boolean;
 }
 
+async function findAvailablePort(preferred: number): Promise<number> {
+  return new Promise((resolve, reject) => {
+    const srv = createServer();
+    srv.listen(preferred, () => {
+      srv.close(() => resolve(preferred));
+    });
+    srv.on("error", () => {
+      // Preferred port taken, use random
+      const srv2 = createServer();
+      srv2.listen(0, () => {
+        const addr = srv2.address();
+        const port = typeof addr === "object" && addr ? addr.port : 0;
+        srv2.close(() => resolve(port));
+      });
+      srv2.on("error", reject);
+    });
+  });
+}
+
 export async function startServers(options: ServerOptions) {
   const configRef = { current: options.config };
 
   console.log("\n  Dekit Dev Server\n");
 
-  const designServer = await startDesignServer(configRef, options.designPort);
+  const designServer = await startDesignServer(configRef);
+  const designAddr = designServer.httpServer!.address();
+  const designPort =
+    typeof designAddr === "object" && designAddr ? designAddr.port : 0;
+
+  const editorPort = await findAvailablePort(options.port ?? DEFAULT_PORT);
   const editorServer = await startEditorServer(
     configRef,
-    options.port,
-    options.designPort
+    editorPort,
+    designPort
   );
 
-  const editorUrl = `http://localhost:${options.port}`;
+  const editorUrl = `http://localhost:${editorPort}`;
   console.log(`\n  Open ${editorUrl} in your browser\n`);
 
   // Try to open browser

package/src/types.ts

@@ -13,7 +13,7 @@ export interface DesignConfig {
   globalStyle: string;
   components: Record<string, ComponentDef>;
   pages: Record<string, PageDef>;
-  baseDir: string; // absolute path to directory containing design.yaml
+  baseDir: string; // absolute path to .dekit/ directory (where dekit.yaml lives)
 }
 
 export interface PageRef {

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

@@ -3,21 +3,29 @@ 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 DESIGN_DIR = join(import.meta.dirname, "../example/.dekit");
 
 const mockConfig: DesignConfig = {
   version: 1.0,
   globalStyle: "global.css",
   components: {
-    "my-banner": {
-      template: "components/my-banner/banner.html",
-      style: "components/my-banner/banner.css",
+    "ui-card": {
+      template: "components/ui-card/ui-card.html",
+      style: "components/ui-card/ui-card.css",
+    },
+    "ui-button": {
+      template: "components/ui-button/ui-button.html",
+      style: "components/ui-button/ui-button.css",
     },
   },
   pages: {
-    cover: {
-      template: "pages/cover/cover.html",
-      style: "pages/cover/cover.css",
+    home: {
+      template: "pages/home/home.html",
+      style: "pages/home/home.css",
+    },
+    showcase: {
+      template: "pages/showcase/showcase.html",
+      style: "pages/showcase/showcase.css",
     },
   },
   baseDir: DESIGN_DIR,
@@ -25,13 +33,12 @@ const mockConfig: DesignConfig = {
 
 describe("assemblePageHtml", () => {
   test("generates valid HTML for a page", async () => {
-    const html = await assemblePageHtml(mockConfig, "cover");
+    const html = await assemblePageHtml(mockConfig, "home");
     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("pages/home/home.css");
     expect(html).toContain("customElements.define");
-    expect(html).toContain("my-banner");
+    expect(html).toContain("ui-card");
   });
 
   test("throws for unknown page", async () => {
@@ -41,14 +48,14 @@ describe("assemblePageHtml", () => {
   });
 
   test("includes inspector script", async () => {
-    const html = await assemblePageHtml(mockConfig, "cover");
+    const html = await assemblePageHtml(mockConfig, "home");
     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\"");
+    const html = await assemblePageHtml(mockConfig, "showcase");
+    expect(html).toContain("class=\"card\"");
     expect(html).toContain("<slot></slot>");
     expect(html).not.toMatch(/innerHTML\s*=\s*`\s*<template>/);
   });

package/src/vite-plugin-dekit.ts

@@ -34,6 +34,7 @@ export async function assemblePageHtml(
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script type="module" src="/@vite/client"></script>
   <link rel="stylesheet" href="/@design/${config.globalStyle}">
   <link rel="stylesheet" href="/@design/${pageDef.style}">
 </head>