tokvista 1.5.0 → 1.5.2

package/README.md

@@ -24,6 +24,7 @@ Zero configuration. Multiple formats. One command.
 - 🔍 **Instant search** - `Cmd+K` / `Ctrl+K` to find any token
 - 🎯 **Zero config** - Works out of the box with any token format
 - ⚡ **Two modes** - CLI for quick preview or React component for apps
+- 🔥 **Live reload** - Auto-refresh on file changes
 
 ---
 
@@ -120,6 +121,7 @@ Then run `npx tokvista` to use your config.
 | `--config`, `-c` | Config file path |
 | `--port`, `-p` | Server port (default: `3000`) |
 | `--no-open` | Don't open browser |
+| `--no-watch` | Disable live reload |
 | `--no-preview` | Skip preview after init |
 | `--force`, `-f` | Overwrite existing config |
 | `--help`, `-h` | Show help |

package/dist/bin/tokvista.js

@@ -2,12 +2,76 @@
 
 // src/bin/tokvista.ts
 import { spawn } from "child_process";
-import { existsSync } from "fs";
+import { existsSync, readdirSync } from "fs";
 import { readFile, writeFile } from "fs/promises";
 import { createServer } from "http";
 import path from "path";
 import { createInterface } from "readline";
 import { fileURLToPath, pathToFileURL } from "url";
+
+// src/bin/hotreload.ts
+import { createHash } from "crypto";
+var HotReloadServer = class {
+  constructor() {
+    this.clients = /* @__PURE__ */ new Set();
+  }
+  handleUpgrade(request, socket, head) {
+    if (request.url !== "/__tokvista_ws") {
+      socket.destroy();
+      return;
+    }
+    const key = request.headers["sec-websocket-key"];
+    if (!key) {
+      socket.destroy();
+      return;
+    }
+    const accept = createHash("sha1").update(key + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11").digest("base64");
+    socket.write(
+      `HTTP/1.1 101 Switching Protocols\r
+Upgrade: websocket\r
+Connection: Upgrade\r
+Sec-WebSocket-Accept: ${accept}\r
+\r
+`
+    );
+    const client = {
+      socket,
+      send: (data) => {
+        const buffer = Buffer.from(data);
+        const frame = Buffer.allocUnsafe(2 + buffer.length);
+        frame[0] = 129;
+        frame[1] = buffer.length;
+        buffer.copy(frame, 2);
+        socket.write(frame);
+      }
+    };
+    this.clients.add(client);
+    socket.on("close", () => this.clients.delete(client));
+  }
+  reload() {
+    for (const client of this.clients) {
+      client.send("reload");
+    }
+  }
+  close() {
+    for (const client of this.clients) {
+      client.socket.destroy();
+    }
+    this.clients.clear();
+  }
+};
+
+// src/bin/watcher.ts
+import { watch } from "fs";
+function watchFile(filePath, onChange) {
+  let debounce = null;
+  return watch(filePath, () => {
+    if (debounce) clearTimeout(debounce);
+    debounce = setTimeout(onChange, 100);
+  });
+}
+
+// src/bin/tokvista.ts
 var DEFAULT_PORT = 3e3;
 var MAX_PORT_ATTEMPTS = 25;
 var SHUTDOWN_TIMEOUT_MS = 1500;
@@ -52,6 +116,7 @@ function parseServeArgs(args) {
   let configPathArg;
   let port = DEFAULT_PORT;
   let openBrowser2 = true;
+  let watch2 = true;
   for (let index = 0; index < args.length; index += 1) {
     const arg = args[index];
     if (arg === "-h" || arg === "--help") {
@@ -62,6 +127,10 @@ function parseServeArgs(args) {
       openBrowser2 = false;
       continue;
     }
+    if (arg === "--no-watch") {
+      watch2 = false;
+      continue;
+    }
     if (arg === "--port" || arg === "-p") {
       const next = args[index + 1];
       if (!next) {
@@ -96,7 +165,7 @@ function parseServeArgs(args) {
     }
     tokenFileArg = arg;
   }
-  return { command: "serve", tokenFileArg, configPathArg, port, openBrowser: openBrowser2 };
+  return { command: "serve", tokenFileArg, configPathArg, port, openBrowser: openBrowser2, watch: watch2 };
 }
 function parseInitArgs(args) {
   let force = false;
@@ -176,6 +245,17 @@ function askRawQuestion(rl, prompt) {
     rl.question(prompt, (answer) => resolve(answer.trim()));
   });
 }
+function createCompleter(cwd) {
+  return (line) => {
+    try {
+      const files = readdirSync(cwd);
+      const hits = files.filter((f) => f.startsWith(line));
+      return [hits.length ? hits : files, line];
+    } catch {
+      return [[], line];
+    }
+  };
+}
 async function askWithDefault(rl, label, defaultValue) {
   const suffix = defaultValue != null && defaultValue !== "" ? ` [${defaultValue}]` : "";
   const answer = await askRawQuestion(rl, `${label}${suffix}: `);
@@ -257,7 +337,12 @@ async function buildInitConfigFromPrompt(cwd, askPreviewQuestion) {
   }
   console.log("TokVista init");
   console.log("Press Enter to accept defaults.\n");
-  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  const rl = createInterface({
+    input: process.stdin,
+    output: process.stdout,
+    completer: createCompleter(cwd),
+    tabSize: 2
+  });
   try {
     const title = await askWithDefault(rl, "Title", defaults.title);
     const subtitle = await askWithDefault(rl, "Subtitle", defaults.subtitle);
@@ -351,7 +436,8 @@ async function runInitCommand(cwd, options) {
     tokenFileArg: void 0,
     configPathArg: configPath,
     port: options.port,
-    openBrowser: options.openBrowser
+    openBrowser: options.openBrowser,
+    watch: true
   };
 }
 function serializeForInlineScript(value) {
@@ -528,12 +614,13 @@ async function buildRuntimeConfig(config, configPath, cwd) {
     ...typeof config.showSearch === "boolean" ? { showSearch: config.showSearch } : {}
   };
 }
-function buildHtml(tokens, runtimeConfig, css, appBundle) {
+function buildHtml(tokens, runtimeConfig, css, appBundle, enableHotReload) {
   const serializedTokens = serializeForInlineScript(tokens);
   const serializedConfig = serializeForInlineScript(runtimeConfig);
   const safeCss = escapeInlineTag(css, "style");
   const safeAppBundle = escapeInlineTag(appBundle, "script");
   const pageTitle = runtimeConfig.title || "TokVista";
+  const hotReloadScript = enableHotReload ? `<script>(function(){const ws=new WebSocket('ws://'+location.host+'/__tokvista_ws');ws.onmessage=()=>location.reload();ws.onerror=()=>setTimeout(()=>location.reload(),1000);})();</script>` : "";
   return `<!doctype html>
 <html lang="en">
   <head>
@@ -547,6 +634,7 @@ function buildHtml(tokens, runtimeConfig, css, appBundle) {
     <script>window.__TOKVISTA_TOKENS__ = ${serializedTokens};</script>
     <script>window.__TOKVISTA_CONFIG__ = ${serializedConfig};</script>
     <script type="module">${safeAppBundle}</script>
+    ${hotReloadScript}
   </body>
 </html>`;
 }
@@ -555,7 +643,7 @@ function resolveDistAsset(relativePath) {
   const binDir = path.dirname(currentFilePath);
   return path.resolve(binDir, "..", relativePath);
 }
-function handleRequest(request, response, html) {
+function handleRequest(request, response, getHtml) {
   const requestUrl = request.url ?? "/";
   const pathname = requestUrl.split("?")[0];
   if (pathname === "/" || pathname === "") {
@@ -563,7 +651,7 @@ function handleRequest(request, response, html) {
       "content-type": "text/html; charset=utf-8",
       "cache-control": "no-store"
     });
-    response.end(html);
+    response.end(getHtml());
     return;
   }
   if (pathname === "/favicon.ico") {
@@ -577,11 +665,11 @@ function handleRequest(request, response, html) {
 function isPortInUse(error) {
   return typeof error === "object" && error !== null && "code" in error && error.code === "EADDRINUSE";
 }
-async function startServer(html, preferredPort) {
+async function startServer(getHtml, preferredPort) {
   for (let attempt = 0; attempt < MAX_PORT_ATTEMPTS; attempt += 1) {
     const port = preferredPort + attempt;
     const server = createServer(
-      (request, response) => handleRequest(request, response, html)
+      (request, response) => handleRequest(request, response, getHtml)
     );
     try {
       await new Promise((resolve, reject) => {
@@ -637,27 +725,48 @@ async function runServeCommand(cwd, options) {
     throw new Error(`Token file not found: ${resolvedTokenPath}`);
   }
   const runtimeConfig = await buildRuntimeConfig(config, configPath, cwd);
-  const [tokens, css, appBundle] = await Promise.all([
-    readTokens(resolvedTokenPath),
+  const [css, appBundle] = await Promise.all([
     readFile(resolveDistAsset("styles.css"), "utf8"),
     readFile(resolveDistAsset("cli/browser.js"), "utf8")
   ]);
-  const html = buildHtml(tokens, runtimeConfig, css, appBundle);
-  const { server, port } = await startServer(html, options.port);
+  let cachedTokens = await readTokens(resolvedTokenPath);
+  const getHtml = () => buildHtml(cachedTokens, runtimeConfig, css, appBundle, options.watch);
+  const { server, port } = await startServer(getHtml, options.port);
   const openSockets = /* @__PURE__ */ new Set();
   let isShuttingDown = false;
+  const hotReload = options.watch ? new HotReloadServer() : null;
   server.on("connection", (socket) => {
     openSockets.add(socket);
     socket.on("close", () => {
       openSockets.delete(socket);
     });
   });
+  if (hotReload) {
+    server.on("upgrade", (req, socket, head) => hotReload.handleUpgrade(req, socket, head));
+  }
   const url = `http://localhost:${port}`;
   console.log(`TokVista running at ${url}`);
   console.log(`Using tokens: ${resolvedTokenPath}`);
   if (configPath) {
     console.log(`Using config: ${configPath}`);
   }
+  if (options.watch) {
+    console.log("Watching for changes...");
+    const watcher = watchFile(resolvedTokenPath, async () => {
+      try {
+        cachedTokens = await readTokens(resolvedTokenPath);
+        hotReload == null ? void 0 : hotReload.reload();
+        console.log("Tokens reloaded");
+      } catch (error) {
+        console.error("Failed to reload tokens:", error.message);
+      }
+    });
+    const cleanup = () => {
+      watcher.close();
+      hotReload == null ? void 0 : hotReload.close();
+    };
+    process.on("exit", cleanup);
+  }
   if (options.openBrowser) {
     try {
       await openBrowser(url);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokvista",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Interactive visual documentation for design tokens.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -80,7 +80,7 @@
     "url": "https://www.linkedin.com/in/nibin-kurian"
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=20.0.0"
   },
   "license": "MIT",
   "peerDependencies": {