@erickxavier/no-js 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erickxavier/no-js",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "The HTML-first reactive framework — build dynamic web apps with just HTML attributes, no JavaScript required",
   "main": "dist/cjs/no.js",
   "module": "dist/esm/no.js",

package/src/dom.js

@@ -161,6 +161,20 @@ export async function _loadTemplateElement(tpl) {
     // Content-include templates: load nested ones now.
     if (!tpl.hasAttribute("route")) {
       await _loadRemoteTemplates(tpl.content || tpl);
+    } else if (useCache && tpl.content) {
+      // Route templates: pre-warm HTML cache for nested subtemplates so
+      // navigation finds cache hits instead of issuing network requests.
+      // Only the HTML is fetched — no DOM processing or skeleton insertion.
+      const nested = tpl.content.querySelectorAll("template[src]");
+      const warmups = [...nested].map((sub) => {
+        const subSrc = sub.getAttribute("src");
+        const subUrl = _resolveTemplateSrc(subSrc, sub);
+        if (_templateHtmlCache.has(subUrl)) return;
+        return fetch(subUrl).then((r) => r.text()).then((h) => {
+          _templateHtmlCache.set(subUrl, h);
+        }).catch(() => {});
+      });
+      Promise.all(warmups);
     }
     // Remove loading placeholder once real content is ready
     if (loadingMarker) loadingMarker.remove();

package/src/index.js

@@ -216,7 +216,7 @@ const NoJS = {
   resolve,
 
   // Version
-  version: "1.3.0",
+  version: "1.4.0",
 };
 
 export default NoJS;

package/src/router.js

@@ -242,6 +242,63 @@ export function _createRouter() {
     });
   }
 
+  function _prefetchRoutes() {
+    const outletEls = document.querySelectorAll("[route-view]");
+    for (const outletEl of outletEls) {
+      const rawSrc = outletEl.getAttribute("src") || _config.router.templates || "";
+      if (!rawSrc) continue;
+      const baseSrc = rawSrc.replace(/\/?$/, "/");
+      const ext = outletEl.getAttribute("ext") || _config.router.ext || ".html";
+      const indexName = outletEl.getAttribute("route-index") || "index";
+      const outletName = (outletEl.getAttribute("route-view") || "").trim() || "default";
+
+      // Collect routes from links, keeping most aggressive lazy level per path
+      const routeLazy = new Map();
+      document.querySelectorAll("[route]:not([route-view])").forEach((link) => {
+        const raw = link.getAttribute("route");
+        if (!raw) return;
+        const path = raw.split("?")[0].split("#")[0];
+        const lazy = link.getAttribute("lazy");
+        const prev = routeLazy.get(path);
+        if (!routeLazy.has(path) || lazy === "priority" ||
+            (prev === "ondemand" && lazy !== "ondemand")) {
+          routeLazy.set(path, lazy);
+        }
+      });
+
+      const priorityFetches = [];
+      const backgroundFetches = [];
+
+      for (const [path, lazy] of routeLazy) {
+        if (lazy === "ondemand" || path === current.path) continue;
+        const segment = path === "/" ? indexName : path.replace(/^\//, "");
+        const fullSrc = baseSrc + segment + ext;
+        const cacheKey = outletName + ":" + fullSrc;
+        if (_autoTemplateCache.has(cacheKey)) continue;
+
+        const tpl = document.createElement("template");
+        tpl.setAttribute("src", fullSrc);
+        tpl.setAttribute("route", path);
+        document.body.appendChild(tpl);
+        _autoTemplateCache.set(cacheKey, tpl);
+        _log("[ROUTER] Prefetch:", path, "→", fullSrc, lazy === "priority" ? "(priority)" : "(background)");
+
+        if (outletEl.hasAttribute("i18n-ns")) {
+          tpl.setAttribute("i18n-ns", segment);
+        }
+
+        if (lazy === "priority") priorityFetches.push(tpl);
+        else backgroundFetches.push(tpl);
+      }
+
+      if (priorityFetches.length || backgroundFetches.length) {
+        Promise.all(priorityFetches.map(_loadTemplateElement)).then(() => {
+          backgroundFetches.forEach(_loadTemplateElement);
+        });
+      }
+    }
+  }
+
   const router = {
     get current() {
       return current;
@@ -333,6 +390,9 @@ export function _createRouter() {
           window.location.pathname.replace(_config.router.base, "") || "/";
         await navigate(path, true);
       }
+
+      // Prefetch route templates declared via <a route> links
+      _prefetchRoutes();
     },
   };