dekit-cli 0.4.1 → 0.4.3

package/src/parser.ts

@@ -2,7 +2,8 @@ import { readFile } from "node:fs/promises";
 import { existsSync } from "node:fs";
 import { dirname, join, resolve } from "node:path";
 import yaml from "js-yaml";
-import type { DesignConfig, ComponentDef, PageDef } from "./types.js";
+import type { DesignConfig, DeviceConfig, ComponentDef, PageDef, PropertyDef, PropertyType } from "./types.js";
+import { DEVICE_PRESETS } from "./devices.js";
 
 export async function parseDesignConfig(
   configPath: string,
@@ -24,6 +25,8 @@ export async function parseDesignConfig(
   // Validate file paths if the base directory actually exists on disk
   const shouldValidateFiles = existsSync(baseDir);
 
+  const device = parseDevice(doc.device);
+
   const globalStyle = (doc["global-style"] as string) ?? "";
   if (globalStyle && shouldValidateFiles) {
     const globalStylePath = join(baseDir, globalStyle);
@@ -51,24 +54,92 @@ export async function parseDesignConfig(
   }
 
   const rawPages =
-    (doc.pages as Record<string, { template: string; style: string }>) ?? {};
+    (doc.pages as Record<string, { template: string; style: string; properties?: Record<string, unknown> }>) ?? {};
   const pages: Record<string, PageDef> = {};
   for (const [key, val] of Object.entries(rawPages)) {
     if (shouldValidateFiles) {
       validateFilePaths(baseDir, key, val.template, val.style);
     }
-    pages[key] = { template: val.template, style: val.style };
+    const properties = val.properties ? parseProperties(key, val.properties) : undefined;
+    pages[key] = { template: val.template, style: val.style, properties };
   }
 
   return {
     version: doc.version as number,
     globalStyle,
+    device,
     components,
     pages,
     baseDir,
   };
 }
 
+function parseDevice(raw: unknown): DeviceConfig | undefined {
+  if (raw == null) return undefined;
+
+  if (typeof raw === "string") {
+    const normalizedInput = raw.toLowerCase().replace(/\s+/g, "-");
+    const preset = DEVICE_PRESETS.find(
+      (d) => d.name.toLowerCase().replace(/\s+/g, "-") === normalizedInput
+    );
+    if (!preset) {
+      throw new Error(
+        `Unknown device: "${raw}". Available: ${DEVICE_PRESETS.map((d) => d.name).join(", ")}`
+      );
+    }
+    return { width: preset.width, height: preset.height, dpr: preset.dpr, name: preset.name };
+  }
+
+  if (typeof raw === "object") {
+    const obj = raw as Record<string, unknown>;
+    const width = obj.width;
+    const height = obj.height;
+    if (typeof width !== "number" || typeof height !== "number") {
+      throw new Error("Device config must have numeric 'width' and 'height'");
+    }
+    const dpr = typeof obj.dpr === "number" ? obj.dpr : 1;
+    return { width, height, dpr };
+  }
+
+  throw new Error("Invalid device config: expected a device name string or {width, height, dpr} object");
+}
+
+const VALID_PROPERTY_TYPES: PropertyType[] = ["boolean", "number", "string"];
+
+function parseProperties(
+  pageKey: string,
+  raw: Record<string, unknown>
+): Record<string, PropertyDef> {
+  const result: Record<string, PropertyDef> = {};
+  for (const [name, def] of Object.entries(raw)) {
+    if (!def || typeof def !== "object") {
+      throw new Error(
+        `Invalid property "${name}" on page "${pageKey}": expected {type, default}`
+      );
+    }
+    const obj = def as Record<string, unknown>;
+    const type = obj.type as string;
+    if (!VALID_PROPERTY_TYPES.includes(type as PropertyType)) {
+      throw new Error(
+        `Invalid type "${type}" for property "${name}" on page "${pageKey}". Must be: ${VALID_PROPERTY_TYPES.join(", ")}`
+      );
+    }
+    if (obj.default == null) {
+      throw new Error(
+        `Missing default for property "${name}" on page "${pageKey}"`
+      );
+    }
+    const expectedType = type === "boolean" ? "boolean" : type === "number" ? "number" : "string";
+    if (typeof obj.default !== expectedType) {
+      throw new Error(
+        `Default value for "${name}" on page "${pageKey}" must be a ${type}`
+      );
+    }
+    result[name] = { type: type as PropertyType, default: obj.default };
+  }
+  return result;
+}
+
 function validateFilePaths(
   baseDir: string,
   key: string,

package/src/server.ts

@@ -33,8 +33,6 @@ async function findAvailablePort(preferred: number): Promise<number> {
 export async function startServers(options: ServerOptions) {
   const configRef = { current: options.config };
 
-  console.log("\n  Dekit Dev Server\n");
-
   const designServer = await startDesignServer(configRef);
   const designAddr = designServer.httpServer!.address();
   const designPort =
@@ -48,7 +46,7 @@ export async function startServers(options: ServerOptions) {
   );
 
   const editorUrl = `http://localhost:${editorPort}`;
-  console.log(`\n  Open ${editorUrl} in your browser\n`);
+  console.log(`\n  Dekit running at ${editorUrl}\n`);
 
   // Try to open browser
   if (!options.noOpen) {

package/src/types.ts

@@ -3,14 +3,30 @@ export interface ComponentDef {
   style: string;
 }
 
+export type PropertyType = "boolean" | "number" | "string";
+
+export interface PropertyDef {
+  type: PropertyType;
+  default: unknown;
+}
+
 export interface PageDef {
   template: string;
   style: string;
+  properties?: Record<string, PropertyDef>;
+}
+
+export interface DeviceConfig {
+  width: number;
+  height: number;
+  dpr: number;
+  name?: string;
 }
 
 export interface DesignConfig {
   version: number;
   globalStyle: string;
+  device?: DeviceConfig;
   components: Record<string, ComponentDef>;
   pages: Record<string, PageDef>;
   baseDir: string; // absolute path to .dekit/ directory (where dekit.yaml lives)

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

@@ -1,5 +1,5 @@
 import { describe, test, expect } from "vitest";
-import { assemblePageHtml } from "./vite-plugin-dekit.js";
+import { assemblePageHtml, resolvePageProps } from "./vite-plugin-dekit.js";
 import type { DesignConfig } from "./types.js";
 import { join } from "node:path";
 
@@ -59,4 +59,88 @@ describe("assemblePageHtml", () => {
     expect(html).toContain("<slot></slot>");
     expect(html).not.toMatch(/innerHTML\s*=\s*`\s*<template>/);
   });
+
+  test("injects __DEKIT_PROPS__ when page has properties", async () => {
+    const configWithProps: DesignConfig = {
+      ...mockConfig,
+      pages: {
+        home: {
+          ...mockConfig.pages["home"],
+          properties: {
+            showBanner: { type: "boolean", default: true },
+            count: { type: "number", default: 3 },
+          },
+        },
+      },
+    };
+    const html = await assemblePageHtml(configWithProps, "home");
+    expect(html).toContain("window.__DEKIT_PROPS__");
+    expect(html).toContain('"showBanner":true');
+    expect(html).toContain('"count":3');
+  });
+
+  test("does not inject __DEKIT_PROPS__ when page has no properties", async () => {
+    const html = await assemblePageHtml(mockConfig, "home");
+    expect(html).not.toContain("__DEKIT_PROPS__");
+  });
+
+  test("props override applies over defaults", async () => {
+    const configWithProps: DesignConfig = {
+      ...mockConfig,
+      pages: {
+        home: {
+          ...mockConfig.pages["home"],
+          properties: {
+            showBanner: { type: "boolean", default: true },
+            count: { type: "number", default: 3 },
+          },
+        },
+      },
+    };
+    const html = await assemblePageHtml(configWithProps, "home", {
+      props: { showBanner: "false", count: "10" },
+    });
+    expect(html).toContain('"showBanner":false');
+    expect(html).toContain('"count":10');
+  });
+});
+
+describe("resolvePageProps", () => {
+  test("returns defaults when no overrides", () => {
+    const result = resolvePageProps({
+      properties: {
+        flag: { type: "boolean", default: true },
+        num: { type: "number", default: 5 },
+        str: { type: "string", default: "hi" },
+      },
+    });
+    expect(result).toEqual({ flag: true, num: 5, str: "hi" });
+  });
+
+  test("overrides convert types based on schema", () => {
+    const result = resolvePageProps(
+      {
+        properties: {
+          flag: { type: "boolean", default: true },
+          num: { type: "number", default: 5 },
+          str: { type: "string", default: "hi" },
+        },
+      },
+      { flag: "false", num: "42", str: "world" }
+    );
+    expect(result).toEqual({ flag: false, num: 42, str: "world" });
+  });
+
+  test("ignores unknown override keys", () => {
+    const result = resolvePageProps(
+      { properties: { flag: { type: "boolean", default: true } } },
+      { flag: "false", unknown: "value" }
+    );
+    expect(result).toEqual({ flag: false });
+  });
+
+  test("returns empty object when no properties defined", () => {
+    expect(resolvePageProps({})).toEqual({});
+    expect(resolvePageProps({ properties: undefined })).toEqual({});
+  });
 });

package/src/vite-plugin-dekit.ts

@@ -5,10 +5,38 @@ import { join } from "node:path";
 import { generateComponentRegistrationScript } from "./injected/register-components.js";
 import { generateInspectorScript } from "./injected/inspector.js";
 
+export function resolvePageProps(
+  pageDef: { properties?: Record<string, { type: string; default: unknown }> },
+  overrides?: Record<string, string>
+): Record<string, unknown> {
+  const props: Record<string, unknown> = {};
+  if (!pageDef.properties) return props;
+
+  for (const [key, def] of Object.entries(pageDef.properties)) {
+    props[key] = def.default;
+  }
+
+  if (overrides) {
+    for (const [key, raw] of Object.entries(overrides)) {
+      const def = pageDef.properties[key];
+      if (!def) continue;
+      if (def.type === "boolean") {
+        props[key] = raw === "true";
+      } else if (def.type === "number") {
+        props[key] = Number(raw);
+      } else {
+        props[key] = raw;
+      }
+    }
+  }
+
+  return props;
+}
+
 export async function assemblePageHtml(
   config: DesignConfig,
   pageName: string,
-  options?: { inspector?: boolean }
+  options?: { inspector?: boolean; props?: Record<string, string> }
 ): Promise<string> {
   const pageDef = config.pages[pageName];
   if (!pageDef) {
@@ -29,6 +57,11 @@ export async function assemblePageHtml(
     ? `<script>\n${generateInspectorScript()}\n</script>`
     : "";
 
+  const resolvedProps = resolvePageProps(pageDef, options?.props);
+  const propsBlock = Object.keys(resolvedProps).length > 0
+    ? `<script>window.__DEKIT_PROPS__ = ${JSON.stringify(resolvedProps)};</script>\n`
+    : "";
+
   return `<!DOCTYPE html>
 <html>
 <head>
@@ -39,7 +72,7 @@ export async function assemblePageHtml(
   <link rel="stylesheet" href="/@design/${pageDef.style}">
 </head>
 <body>
-${pageTemplate}
+${propsBlock}${pageTemplate}
 <script type="module">
 ${componentScript}
 </script>
@@ -85,9 +118,16 @@ export function dekitPlugin(configRef: { current: DesignConfig }): Plugin {
           const pageName = pageMatch[1];
           const urlObj = new URL(url, "http://localhost");
           const noInspector = urlObj.searchParams.has("noinspector");
+          const props: Record<string, string> = {};
+          for (const [key, value] of urlObj.searchParams.entries()) {
+            if (key.startsWith("props.")) {
+              props[key.slice(6)] = value;
+            }
+          }
           try {
             const html = await assemblePageHtml(configRef.current, pageName, {
               inspector: !noInspector,
+              props: Object.keys(props).length > 0 ? props : undefined,
             });
             res.setHeader("Content-Type", "text/html");
             res.end(html);

package/templates/projects/mobile/dekit.yaml

@@ -1,4 +1,5 @@
 version: 1.0
+device: "iPhone 16"
 global-style: "global.css"
 
 components: {}