tina4-nodejs 3.10.86 → 3.10.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tina4-nodejs",
-  "version": "3.10.86",
+  "version": "3.10.87",
   "type": "module",
   "description": "Tina4 for Node.js/TypeScript — 54 built-in features, zero dependencies",
   "keywords": ["tina4", "framework", "web", "api", "orm", "graphql", "websocket", "typescript"],

package/packages/cli/src/commands/serve.ts

@@ -37,17 +37,34 @@ export async function serveProject(options: ServeOptions): Promise<void> {
     staticDir,
   });
 
-  // Watch for file changes and reload routes
+  // Watch for file changes.
+  //
+  // Templates and static assets are re-read from disk every request in dev mode,
+  // so we only need to touch the router when a .ts/.js route file actually
+  // changes. Clearing the router on every edit (including templates) leaves a
+  // brief window where the router is empty — any request hitting that window
+  // gets a 404 whose response path bypasses the dev toolbar injection, so the
+  // toolbar appears to "vanish" after a hot reload. Route-file-only clearing
+  // matches the behaviour of Python's DevReload and the fix made in PHP v3.10.87.
   const noReload = ["true", "1", "yes"].includes((process.env.TINA4_NO_RELOAD ?? "").toLowerCase());
   const watchDirs = [routesDir, ormDir, modelsDir, templatesDir].filter((d) => existsSync(d));
   let watcher: { close: () => void } | null = null;
   if (!noReload) {
-    watcher = watchForChanges(watchDirs, async () => {
+    watcher = watchForChanges(watchDirs, async ({ code }) => {
+      if (!code) {
+        // Template/CSS/JS asset change — nothing to do in the server. The
+        // browser will re-fetch on its own reload cycle and the request will
+        // be served against the existing route set with the toolbar intact.
+        return;
+      }
       try {
+        // Re-discover routes. discoverRoutes() cache-busts imports via ?t=<timestamp>,
+        // so the new modules are loaded fresh. Build the new list first, then
+        // replace the router's state in one back-to-back block to minimise the
+        // window where the router is empty.
         const { discoverRoutes } = await import("../../../core/src/index.js");
-        // Clear routes BEFORE re-discovery to avoid stale duplicates
-        server.router.clear();
         const routes = await discoverRoutes(routesDir);
+        server.router.clear();
         for (const route of routes) {
           server.router.addRoute(route);
         }

package/packages/core/src/watcher.ts

@@ -1,25 +1,48 @@
 import { watch, existsSync } from "node:fs";
-import { resolve } from "node:path";
+import { resolve, extname } from "node:path";
 
+/**
+ * File types that indicate a code change and require route re-discovery.
+ * Template/CSS/JS asset changes don't need the router to be touched.
+ */
+const CODE_EXTENSIONS = new Set([".ts", ".tsx", ".js", ".jsx", ".mjs", ".cjs"]);
+
+/**
+ * Watch directories for file changes.
+ *
+ * The callback receives `{ code: boolean }` indicating whether any of the
+ * changed files were source code (.ts/.js). If only templates/CSS/JS assets
+ * changed, `code` is false and the caller should skip route re-discovery —
+ * clearing the router for an asset edit leaves a brief window of 404s that
+ * make the dev toolbar vanish.
+ */
 export function watchForChanges(
   dirs: string[],
-  onChange: () => void
+  onChange: (info: { code: boolean }) => void
 ): { close: () => void } {
   const watchers: ReturnType<typeof watch>[] = [];
   let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  let codeChangePending = false;
 
   const debouncedOnChange = () => {
     if (debounceTimer) clearTimeout(debounceTimer);
     debounceTimer = setTimeout(() => {
-      console.log("\n  \x1b[33mFile change detected, reloading routes...\x1b[0m\n");
-      onChange();
+      const code = codeChangePending;
+      codeChangePending = false;
+      console.log(
+        `\n  \x1b[33mFile change detected${code ? ", reloading routes" : ""}...\x1b[0m\n`,
+      );
+      onChange({ code });
     }, 200);
   };
 
   for (const dir of dirs) {
     if (!existsSync(dir)) continue;
     try {
-      const watcher = watch(resolve(dir), { recursive: true }, () => {
+      const watcher = watch(resolve(dir), { recursive: true }, (_event, filename) => {
+        if (filename && CODE_EXTENSIONS.has(extname(filename))) {
+          codeChangePending = true;
+        }
         debouncedOnChange();
       });
       watchers.push(watcher);