@constela/start 1.5.5 → 1.6.0

package/dist/{chunk-FKQKP2UH.js → chunk-LKFIMB3Q.js}

@@ -1472,8 +1472,8 @@ async function scanLayouts(layoutsDir) {
   if (!existsSync5(layoutsDir)) {
     throw new Error(`Layouts directory does not exist: ${layoutsDir}`);
   }
-  const stat2 = statSync3(layoutsDir);
-  if (!stat2.isDirectory()) {
+  const stat3 = statSync3(layoutsDir);
+  if (!stat3.isDirectory()) {
     throw new Error(`Path is not a directory: ${layoutsDir}`);
   }
   const files = await fg3(["**/*.ts", "**/*.tsx", "**/*.json"], {
@@ -1614,11 +1614,11 @@ var LayoutResolver = class {
 };
 
 // src/dev/server.ts
-import { createServer } from "http";
+import { createServer as createServer2 } from "http";
 import { createReadStream } from "fs";
-import { join as join7, isAbsolute } from "path";
+import { join as join8, isAbsolute, relative as relative3 } from "path";
 import { createServer as createViteServer } from "vite";
-import { isCookieInitialExpr as isCookieInitialExpr2 } from "@constela/core";
+import { isCookieInitialExpr as isCookieInitialExpr2, ConstelaError } from "@constela/core";
 
 // src/json-page-loader.ts
 import { existsSync as existsSync6, readFileSync as readFileSync4 } from "fs";
@@ -2175,6 +2175,243 @@ var JsonPageLoader = class {
 
 // src/dev/server.ts
 import { analyzeLayoutPass, transformLayoutPass, composeLayoutWithPage } from "@constela/compiler";
+
+// src/dev/hmr-server.ts
+import { WebSocketServer } from "ws";
+import { createServer } from "http";
+function createHMRServer(options) {
+  return new Promise((resolve5, reject) => {
+    const { port } = options;
+    const httpServer = createServer();
+    const wss = new WebSocketServer({ server: httpServer });
+    const clients = /* @__PURE__ */ new Set();
+    let isClosed = false;
+    wss.on("connection", (ws) => {
+      clients.add(ws);
+      const connectedMessage = { type: "connected" };
+      ws.send(JSON.stringify(connectedMessage));
+      ws.on("close", () => {
+        clients.delete(ws);
+      });
+      ws.on("error", () => {
+        clients.delete(ws);
+      });
+    });
+    httpServer.on("error", (error) => {
+      reject(error);
+    });
+    httpServer.listen(port, () => {
+      const address = httpServer.address();
+      const actualPort = address.port;
+      const server = {
+        get port() {
+          return actualPort;
+        },
+        get connectedClients() {
+          return clients.size;
+        },
+        broadcastUpdate(file, program) {
+          if (clients.size === 0) {
+            return;
+          }
+          const message = {
+            type: "update",
+            file,
+            program
+          };
+          const data = JSON.stringify(message);
+          for (const client of clients) {
+            if (client.readyState === client.OPEN) {
+              client.send(data);
+            }
+          }
+        },
+        broadcastError(file, errors) {
+          if (clients.size === 0) {
+            return;
+          }
+          const message = {
+            type: "error",
+            file,
+            errors: errors.map((error) => error.toJSON())
+          };
+          const data = JSON.stringify(message);
+          for (const client of clients) {
+            if (client.readyState === client.OPEN) {
+              client.send(data);
+            }
+          }
+        },
+        close() {
+          return new Promise((resolveClose) => {
+            if (isClosed) {
+              resolveClose();
+              return;
+            }
+            isClosed = true;
+            for (const client of clients) {
+              client.close();
+            }
+            clients.clear();
+            wss.close(() => {
+              httpServer.close(() => {
+                resolveClose();
+              });
+            });
+          });
+        }
+      };
+      resolve5(server);
+    });
+  });
+}
+
+// src/dev/watcher.ts
+import { watch } from "fs";
+import { stat } from "fs/promises";
+import { join as join7, relative as relative2 } from "path";
+import { EventEmitter } from "events";
+var DEFAULT_DEBOUNCE_MS = 100;
+var DEFAULT_PATTERNS = ["**/*.json"];
+function shouldIgnore(filePath, baseDir) {
+  const relativePath = relative2(baseDir, filePath);
+  const segments = relativePath.split("/");
+  for (const segment of segments) {
+    if (segment.startsWith(".")) {
+      return true;
+    }
+    if (segment === "node_modules") {
+      return true;
+    }
+  }
+  return false;
+}
+function createPatternMatcher(pattern) {
+  if (pattern.startsWith("**/")) {
+    const suffix = pattern.slice(3);
+    if (suffix.startsWith("*.")) {
+      const ext = suffix.slice(1);
+      return (path) => path.endsWith(ext);
+    }
+    return (path) => path.endsWith(suffix) || path.endsWith("/" + suffix);
+  }
+  if (pattern.startsWith("*.")) {
+    const ext = pattern.slice(1);
+    return (path) => {
+      if (path.includes("/")) {
+        return false;
+      }
+      return path.endsWith(ext);
+    };
+  }
+  return (path) => path === pattern;
+}
+function matchesPatterns(filePath, baseDir, matchers) {
+  const relativePath = relative2(baseDir, filePath);
+  for (const matcher of matchers) {
+    if (matcher(relativePath)) {
+      return true;
+    }
+  }
+  return false;
+}
+async function createWatcher(options) {
+  const {
+    directory,
+    debounceMs = DEFAULT_DEBOUNCE_MS,
+    patterns = DEFAULT_PATTERNS
+  } = options;
+  try {
+    const stats = await stat(directory);
+    if (!stats.isDirectory()) {
+      throw new Error(`Path is not a directory: ${directory}`);
+    }
+  } catch (error) {
+    if (error.code === "ENOENT") {
+      throw new Error(`Directory does not exist: ${directory}`);
+    }
+    throw error;
+  }
+  const matchers = patterns.map((pattern) => createPatternMatcher(pattern));
+  const emitter = new EventEmitter();
+  const pendingEvents = /* @__PURE__ */ new Map();
+  let isClosed = false;
+  let fsWatcher = null;
+  try {
+    fsWatcher = watch(directory, { recursive: true }, (eventType, filename) => {
+      if (isClosed || !filename) {
+        return;
+      }
+      const absolutePath = join7(directory, filename);
+      if (shouldIgnore(absolutePath, directory)) {
+        return;
+      }
+      if (!matchesPatterns(absolutePath, directory, matchers)) {
+        return;
+      }
+      const existingTimeout = pendingEvents.get(absolutePath);
+      if (existingTimeout) {
+        clearTimeout(existingTimeout);
+      }
+      const timeout = setTimeout(async () => {
+        pendingEvents.delete(absolutePath);
+        if (isClosed) {
+          return;
+        }
+        let changeType = "change";
+        try {
+          await stat(absolutePath);
+          changeType = "change";
+        } catch {
+          changeType = "unlink";
+        }
+        const event = {
+          path: absolutePath,
+          type: changeType
+        };
+        emitter.emit("change", event);
+      }, debounceMs);
+      pendingEvents.set(absolutePath, timeout);
+    });
+    fsWatcher.on("error", (error) => {
+      if (!isClosed) {
+        emitter.emit("error", error);
+      }
+    });
+  } catch (error) {
+    throw error;
+  }
+  const watcher = {
+    on(event, listener) {
+      emitter.on(event, listener);
+    },
+    once(event, listener) {
+      emitter.once(event, listener);
+    },
+    close() {
+      return new Promise((resolve5) => {
+        if (isClosed) {
+          resolve5();
+          return;
+        }
+        isClosed = true;
+        for (const timeout of pendingEvents.values()) {
+          clearTimeout(timeout);
+        }
+        pendingEvents.clear();
+        if (fsWatcher) {
+          fsWatcher.close();
+          fsWatcher = null;
+        }
+        emitter.removeAllListeners();
+        resolve5();
+      });
+    }
+  };
+  return watcher;
+}
+
+// src/dev/server.ts
 var DEFAULT_PORT = 3e3;
 var DEFAULT_HOST = "localhost";
 var DEFAULT_PUBLIC_DIR = "public";
@@ -2266,13 +2503,15 @@ async function createDevServer(options = {}) {
     port = DEFAULT_PORT,
     host = DEFAULT_HOST,
     routesDir = DEFAULT_ROUTES_DIR,
-    publicDir = join7(process.cwd(), DEFAULT_PUBLIC_DIR),
+    publicDir = join8(process.cwd(), DEFAULT_PUBLIC_DIR),
     layoutsDir,
     css
   } = options;
   let httpServer = null;
   let actualPort = port;
   let viteServer = null;
+  let hmrServer = null;
+  let watcher = null;
   if (css) {
     viteServer = await createViteServer({
       root: process.cwd(),
@@ -2281,7 +2520,7 @@ async function createDevServer(options = {}) {
       logLevel: "silent"
     });
   }
-  const absoluteRoutesDir = isAbsolute(routesDir) ? routesDir : join7(process.cwd(), routesDir);
+  const absoluteRoutesDir = isAbsolute(routesDir) ? routesDir : join8(process.cwd(), routesDir);
   let routes = [];
   try {
     routes = await scanRoutes(absoluteRoutesDir);
@@ -2290,7 +2529,7 @@ async function createDevServer(options = {}) {
   }
   let layoutResolver = null;
   if (layoutsDir) {
-    const absoluteLayoutsDir = isAbsolute(layoutsDir) ? layoutsDir : join7(process.cwd(), layoutsDir);
+    const absoluteLayoutsDir = isAbsolute(layoutsDir) ? layoutsDir : join8(process.cwd(), layoutsDir);
     layoutResolver = new LayoutResolver(absoluteLayoutsDir);
     await layoutResolver.initialize();
   }
@@ -2298,9 +2537,12 @@ async function createDevServer(options = {}) {
     get port() {
       return actualPort;
     },
+    get hmrPort() {
+      return hmrServer?.port ?? 0;
+    },
     async listen() {
       return new Promise((resolve5, reject) => {
-        httpServer = createServer(async (req, res) => {
+        httpServer = createServer2(async (req, res) => {
           const url = new URL(req.url ?? "/", `http://${req.headers.host}`);
           const pathname = url.pathname;
           if (viteServer) {
@@ -2385,7 +2627,8 @@ async function createDevServer(options = {}) {
                 path: pathname
               });
               const cssHead = css ? (Array.isArray(css) ? css : [css]).map((p) => `<link rel="stylesheet" href="/${p}">`).join("\n") : "";
-              const head = [metaTags, cssHead].filter(Boolean).join("\n");
+              const hmrScript = hmrServer ? `<script>window.__CONSTELA_HMR_URL__ = "ws://${host}:${hmrServer.port}";</script>` : "";
+              const head = [metaTags, cssHead, hmrScript].filter(Boolean).join("\n");
               const themeState = composedProgram.state?.["theme"];
               let initialTheme;
               if (themeState) {
@@ -2458,16 +2701,74 @@ h1 { color: #666; }
         httpServer.on("error", (err) => {
           reject(err);
         });
-        httpServer.listen(port, host, () => {
+        httpServer.listen(port, host, async () => {
           const address = httpServer?.address();
           if (address) {
             actualPort = address.port;
           }
+          try {
+            hmrServer = await createHMRServer({ port: 0 });
+            watcher = await createWatcher({
+              directory: absoluteRoutesDir,
+              patterns: ["**/*.json"]
+            });
+            watcher.on("change", async (event) => {
+              const projectRoot = process.cwd();
+              const pageLoader = new JsonPageLoader(projectRoot);
+              try {
+                const relativePath = relative3(projectRoot, event.path).replace(/\\/g, "/");
+                const pageInfo = await pageLoader.loadPage(relativePath);
+                const program = await convertToCompiledProgram(pageInfo);
+                if (hmrServer) {
+                  hmrServer.broadcastUpdate(event.path, program);
+                }
+              } catch (error) {
+                if (hmrServer) {
+                  if (error instanceof ConstelaError) {
+                    hmrServer.broadcastError(event.path, [error]);
+                  } else {
+                    const genericError = {
+                      code: "COMPILE_ERROR",
+                      message: error instanceof Error ? error.message : String(error),
+                      path: event.path,
+                      severity: "error",
+                      suggestion: void 0,
+                      expected: void 0,
+                      actual: void 0,
+                      context: void 0,
+                      name: "ConstelaError",
+                      toJSON: () => ({
+                        code: "COMPILE_ERROR",
+                        message: error instanceof Error ? error.message : String(error),
+                        path: event.path,
+                        severity: "error",
+                        suggestion: void 0,
+                        expected: void 0,
+                        actual: void 0,
+                        context: void 0
+                      })
+                    };
+                    hmrServer.broadcastError(event.path, [genericError]);
+                  }
+                }
+              }
+            });
+          } catch (hmrError) {
+            console.warn("HMR initialization failed:", hmrError);
+          }
           resolve5();
         });
       });
     },
     async close() {
+      if (watcher) {
+        await watcher.close();
+        watcher = null;
+      }
+      if (hmrServer) {
+        await hmrServer.close();
+        hmrServer = null;
+      }
       if (viteServer) {
         await viteServer.close();
         viteServer = null;
@@ -2495,7 +2796,7 @@ h1 { color: #666; }
 // src/build/index.ts
 import { existsSync as existsSync8, readFileSync as readFileSync5 } from "fs";
 import { mkdir as mkdir2, writeFile, cp, readdir } from "fs/promises";
-import { join as join9, dirname as dirname5, relative as relative3, basename as basename4, isAbsolute as isAbsolute3, resolve as resolve4 } from "path";
+import { join as join10, dirname as dirname5, relative as relative5, basename as basename4, isAbsolute as isAbsolute3, resolve as resolve4 } from "path";
 import { isCookieInitialExpr as isCookieInitialExpr3 } from "@constela/core";
 
 // src/build/bundler.ts
@@ -2503,14 +2804,14 @@ import * as esbuild from "esbuild";
 import { existsSync as existsSync7 } from "fs";
 import { mkdir, readFile } from "fs/promises";
 import { createRequire } from "module";
-import { join as join8, dirname as dirname4, isAbsolute as isAbsolute2, relative as relative2 } from "path";
+import { join as join9, dirname as dirname4, isAbsolute as isAbsolute2, relative as relative4 } from "path";
 import { fileURLToPath } from "url";
 var __dirname = dirname4(fileURLToPath(import.meta.url));
 async function bundleRuntime(options) {
   const entryContent = `
     export { hydrateApp, createApp } from '@constela/runtime';
   `;
-  const outFile = join8(options.outDir, "_constela", "runtime.js");
+  const outFile = join9(options.outDir, "_constela", "runtime.js");
   await mkdir(dirname4(outFile), { recursive: true });
   try {
     await esbuild.build({
@@ -2535,10 +2836,10 @@ async function bundleRuntime(options) {
 }
 async function bundleCSS(options) {
   const cssFiles = Array.isArray(options.css) ? options.css : [options.css];
-  const outFile = join8(options.outDir, "_constela", "styles.css");
+  const outFile = join9(options.outDir, "_constela", "styles.css");
   const shouldMinify = options.minify ?? true;
   await mkdir(dirname4(outFile), { recursive: true });
-  const resolvedCssFiles = cssFiles.map((f) => isAbsolute2(f) ? f : join8(process.cwd(), f));
+  const resolvedCssFiles = cssFiles.map((f) => isAbsolute2(f) ? f : join9(process.cwd(), f));
   for (const fullPath of resolvedCssFiles) {
     if (!existsSync7(fullPath)) {
       throw new Error(`CSS file not found: ${fullPath}`);
@@ -2567,7 +2868,7 @@ async function bundleCSS(options) {
     if (options.content.length > 0) {
       const fg4 = (await import("fast-glob")).default;
       const resolvedContentPaths = options.content.map(
-        (p) => isAbsolute2(p) ? p : join8(process.cwd(), p)
+        (p) => isAbsolute2(p) ? p : join9(process.cwd(), p)
       );
       const matchedFiles = await fg4(resolvedContentPaths, { onlyFiles: true });
       if (matchedFiles.length === 0) {
@@ -2578,9 +2879,9 @@ async function bundleCSS(options) {
     }
     const sourceDir = dirname4(firstCssFile);
     const sourceDirectives = options.content.map((contentPath) => {
-      const absolutePath = isAbsolute2(contentPath) ? contentPath : join8(process.cwd(), contentPath);
+      const absolutePath = isAbsolute2(contentPath) ? contentPath : join9(process.cwd(), contentPath);
       const srcPath = absolutePath.includes("*") ? dirname4(absolutePath.split("*")[0] ?? absolutePath) : absolutePath;
-      const relativePath = relative2(sourceDir, srcPath);
+      const relativePath = relative4(sourceDir, srcPath);
       return `@source "${relativePath}";`;
     }).join("\n");
     const processedCssInput = sourceDirectives + "\n" + cssContent;
@@ -2660,9 +2961,9 @@ function isDynamicRoute(pattern) {
 function getOutputPath(filePath, outDir) {
   const withoutExt = filePath.replace(/\.(json|ts|tsx|js|jsx)$/, "");
   if (withoutExt === "index" || withoutExt.endsWith("/index")) {
-    return join9(outDir, withoutExt + ".html");
+    return join10(outDir, withoutExt + ".html");
   }
-  return join9(outDir, withoutExt, "index.html");
+  return join10(outDir, withoutExt, "index.html");
 }
 function paramsToOutputPath(basePattern, params, outDir) {
   let path = basePattern;
@@ -2672,14 +2973,14 @@ function paramsToOutputPath(basePattern, params, outDir) {
   }
   const relativePath = path.startsWith("/") ? path.slice(1) : path;
   if (relativePath === "") {
-    return join9(outDir, "index.html");
+    return join10(outDir, "index.html");
   }
-  return join9(outDir, relativePath, "index.html");
+  return join10(outDir, relativePath, "index.html");
 }
 async function loadGetStaticPaths(pageFile) {
   const dir = dirname5(pageFile);
   const baseName = basename4(pageFile, ".json");
-  const pathsFile = join9(dir, `${baseName}.paths.ts`);
+  const pathsFile = join10(dir, `${baseName}.paths.ts`);
   if (!existsSync8(pathsFile)) {
     return null;
   }
@@ -2720,7 +3021,7 @@ async function loadGetStaticPaths(pageFile) {
   }
 }
 async function loadLayout2(layoutName, layoutsDir) {
-  const layoutPath = join9(layoutsDir, `${layoutName}.json`);
+  const layoutPath = join10(layoutsDir, `${layoutName}.json`);
   if (!existsSync8(layoutPath)) {
     throw new Error(`Layout "${layoutName}" not found at ${layoutPath}`);
   }
@@ -3121,8 +3422,8 @@ async function copyPublicDir(publicDir, outDir, generatedFiles) {
 async function copyDirRecursive(srcDir, destDir, skipFiles) {
   const entries = await readdir(srcDir, { withFileTypes: true });
   for (const entry of entries) {
-    const srcPath = join9(srcDir, entry.name);
-    const destPath = join9(destDir, entry.name);
+    const srcPath = join10(srcDir, entry.name);
+    const destPath = join10(destDir, entry.name);
     if (entry.isDirectory()) {
       await mkdir2(destPath, { recursive: true });
       await copyDirRecursive(srcPath, destPath, skipFiles);
@@ -3192,8 +3493,8 @@ async function build2(options) {
   const absoluteRoutesDir = isAbsolute3(routesDir) ? routesDir : resolve4(routesDir);
   const projectRoot = dirname5(dirname5(absoluteRoutesDir));
   for (const route of jsonPages) {
-    const relPathFromRoutesDir = relative3(absoluteRoutesDir, route.file);
-    const relPathFromProjectRoot = relative3(projectRoot, route.file);
+    const relPathFromRoutesDir = relative5(absoluteRoutesDir, route.file);
+    const relPathFromProjectRoot = relative5(projectRoot, route.file);
     const content = readFileSync5(route.file, "utf-8");
     const page = validateJsonPage(content, route.file);
     if (isDynamicRoute(route.pattern)) {
@@ -3243,7 +3544,7 @@ async function build2(options) {
         generatedFiles.push(outputPath);
         const slugValue = params["slug"];
         if (slugValue && (slugValue === "index" || slugValue.endsWith("/index"))) {
-          const parentOutputPath = join9(dirname5(dirname5(outputPath)), "index.html");
+          const parentOutputPath = join10(dirname5(dirname5(outputPath)), "index.html");
           if (!generatedFiles.includes(parentOutputPath)) {
             await mkdir2(dirname5(parentOutputPath), { recursive: true });
             await writeFile(parentOutputPath, html, "utf-8");
@@ -3265,9 +3566,9 @@ async function build2(options) {
         const routePath = pageInfo.page.route.path;
         const relativePath = routePath.startsWith("/") ? routePath.slice(1) : routePath;
         if (relativePath === "" || relativePath === "/") {
-          outputPath = join9(outDir, "index.html");
+          outputPath = join10(outDir, "index.html");
         } else {
-          outputPath = join9(outDir, relativePath, "index.html");
+          outputPath = join10(outDir, relativePath, "index.html");
         }
       } else {
         outputPath = getOutputPath(relPathFromRoutesDir, outDir);
@@ -3295,10 +3596,10 @@ async function build2(options) {
 
 // src/config/config-loader.ts
 import { existsSync as existsSync9, readFileSync as readFileSync6 } from "fs";
-import { join as join10 } from "path";
+import { join as join11 } from "path";
 var CONFIG_FILENAME = "constela.config.json";
 async function loadConfig(projectRoot) {
-  const configPath = join10(projectRoot, CONFIG_FILENAME);
+  const configPath = join11(projectRoot, CONFIG_FILENAME);
   if (!existsSync9(configPath)) {
     return {};
   }

package/dist/cli/index.js

@@ -4,7 +4,7 @@ import {
   hyperlink,
   loadConfig,
   resolveConfig
-} from "../chunk-FKQKP2UH.js";
+} from "../chunk-LKFIMB3Q.js";
 import "../chunk-PG3Y4EJN.js";
 
 // src/cli/index.ts

package/dist/index.d.ts

@@ -140,6 +140,8 @@ interface DevServer {
     close(): Promise<void>;
     /** The port number the server is listening on */
     port: number;
+    /** The port number the HMR WebSocket server is listening on */
+    hmrPort: number;
 }
 /**
  * Creates a development server with HMR support.

package/dist/index.js

@@ -28,7 +28,7 @@ import {
   transformCsv,
   transformMdx,
   transformYaml
-} from "./chunk-FKQKP2UH.js";
+} from "./chunk-LKFIMB3Q.js";
 import {
   evaluateMetaExpression,
   generateHydrationScript,

package/dist/runtime/entry-client.d.ts

@@ -46,5 +46,24 @@ interface InitClientOptions {
  * @returns AppInstance for controlling the application
  */
 declare function initClient(options: InitClientOptions): AppInstance;
+/**
+ * Options for initializing the client application with HMR support
+ */
+interface InitClientWithHMROptions extends InitClientOptions {
+    /** WebSocket URL for HMR server (e.g., "ws://localhost:3001") */
+    hmrUrl?: string;
+}
+/**
+ * Initialize the client application with HMR (Hot Module Replacement) support.
+ *
+ * This function extends initClient with automatic HMR setup:
+ * - Connects to HMR WebSocket server
+ * - Handles update messages by preserving state and re-hydrating
+ * - Shows error overlay on compilation errors
+ *
+ * @param options - Configuration options including optional HMR URL
+ * @returns AppInstance for controlling the application
+ */
+declare function initClientWithHMR(options: InitClientWithHMROptions): AppInstance;
 
-export { type EscapeContext, type EscapeHandler, type InitClientOptions, type RouteContext, initClient };
+export { type EscapeContext, type EscapeHandler, type InitClientOptions, type InitClientWithHMROptions, type RouteContext, initClient, initClientWithHMR };

package/dist/runtime/entry-client.js

@@ -1,5 +1,10 @@
 // src/runtime/entry-client.ts
-import { hydrateApp } from "@constela/runtime";
+import {
+  hydrateApp,
+  createHMRClient,
+  createHMRHandler,
+  createErrorOverlay
+} from "@constela/runtime";
 function initClient(options) {
   const { program, container, escapeHandlers = [], route } = options;
   const appInstance = hydrateApp({ program, container, ...route && { route } });
@@ -67,6 +72,59 @@ function initClient(options) {
     }
   };
 }
+function initClientWithHMR(options) {
+  const { hmrUrl, ...clientOptions } = options;
+  const app = initClient(clientOptions);
+  if (hmrUrl) {
+    const overlay = createErrorOverlay();
+    const handlerOptions = {
+      container: options.container,
+      program: options.program,
+      ...options.route && { route: options.route }
+    };
+    const handler = createHMRHandler(handlerOptions);
+    const client = createHMRClient({
+      url: hmrUrl,
+      onUpdate: (_file, program) => {
+        overlay.hide();
+        handler.handleUpdate(program);
+      },
+      onError: (file, errors) => {
+        overlay.show({
+          file,
+          errors: errors.map((e) => {
+            if (typeof e === "object" && e !== null) {
+              const errObj = e;
+              const result = {
+                message: errObj.message ?? "Unknown error"
+              };
+              if (errObj.code !== void 0) result.code = errObj.code;
+              if (errObj.suggestion !== void 0) result.suggestion = errObj.suggestion;
+              return result;
+            }
+            return { message: String(e) };
+          })
+        });
+      },
+      onConnect: () => {
+        console.log("[HMR] Connected");
+      },
+      onDisconnect: () => {
+        console.log("[HMR] Disconnected");
+      }
+    });
+    client.connect();
+    const originalDestroy = app.destroy;
+    app.destroy = () => {
+      client.disconnect();
+      handler.destroy();
+      overlay.hide();
+      originalDestroy();
+    };
+  }
+  return app;
+}
 export {
-  initClient
+  initClient,
+  initClientWithHMR
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/start",
-  "version": "1.5.5",
+  "version": "1.6.0",
   "description": "Meta-framework for Constela applications",
   "type": "module",
   "main": "./dist/index.js",
@@ -43,13 +43,15 @@
     "postcss": "^8.5.0",
     "@tailwindcss/postcss": "^4.0.0",
     "tailwindcss": "^4.0.0",
-    "@constela/core": "0.12.0",
-    "@constela/runtime": "0.15.2",
+    "ws": "^8.18.0",
     "@constela/compiler": "0.11.1",
-    "@constela/router": "13.0.0",
-    "@constela/server": "8.0.1"
+    "@constela/core": "0.12.0",
+    "@constela/server": "8.0.1",
+    "@constela/runtime": "0.16.0",
+    "@constela/router": "14.0.0"
   },
   "devDependencies": {
+    "@types/ws": "^8.5.0",
     "@types/mdast": "^4.0.4",
     "tsup": "^8.0.0",
     "typescript": "^5.3.0",