@erickxavier/no-js 1.0.2 → 1.2.0

package/src/registry.js

@@ -2,6 +2,9 @@
 //  DIRECTIVE REGISTRY & DOM PROCESSING
 // ═══════════════════════════════════════════════════════════════════════
 
+import { _currentEl, _setCurrentEl, _storeWatchers } from "./globals.js";
+import { _i18nListeners } from "./i18n.js";
+
 const _directives = new Map();
 
 export function registerDirective(name, handler) {
@@ -43,9 +46,12 @@ export function processElement(el) {
   }
 
   matched.sort((a, b) => a.priority - b.priority);
+  const prev = _currentEl;
   for (const m of matched) {
+    _setCurrentEl(el);
     m.init(el, m.name, m.value);
   }
+  _setCurrentEl(prev);
 }
 
 export function processTree(root) {
@@ -58,3 +64,27 @@ export function processTree(root) {
     if (!node.__declared) processElement(node);
   }
 }
+
+// ─── Disposal: proactive cleanup of watchers/listeners/disposers ────────
+
+function _disposeElement(node) {
+  if (node.__ctx && node.__ctx.__listeners) {
+    for (const fn of node.__ctx.__listeners) {
+      _storeWatchers.delete(fn);
+      _i18nListeners.delete(fn);
+    }
+    node.__ctx.__listeners.clear();
+  }
+  if (node.__disposers) {
+    node.__disposers.forEach((fn) => fn());
+    node.__disposers = null;
+  }
+  node.__declared = false;
+}
+
+export function _disposeTree(root) {
+  if (!root) return;
+  _disposeElement(root);
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  while (walker.nextNode()) _disposeElement(walker.currentNode);
+}

package/src/router.js

@@ -6,13 +6,14 @@ import { _config, _stores, _log } from "./globals.js";
 import { createContext } from "./context.js";
 import { evaluate } from "./evaluate.js";
 import { findContext, _clearDeclared, _loadTemplateElement, _processTemplateIncludes } from "./dom.js";
-import { processTree } from "./registry.js";
+import { processTree, _disposeTree } from "./registry.js";
 import { _animateIn } from "./animations.js";
 
 export function _createRouter() {
   const routes = [];
   let current = { path: "", params: {}, query: {}, hash: "" };
   const listeners = new Set();
+  const _autoTemplateCache = new Map();
 
   function _getOrCreateEntry(path) {
     let entry = routes.find((r) => r.path === path);
@@ -118,9 +119,38 @@ export function _createRouter() {
       const outletName = outletAttr && outletAttr.trim() !== "" ? outletAttr.trim() : "default";
 
       // Find the template for this outlet in the matched route
-      const tpl = matched?.route?.outlets?.[outletName];
+      let tpl = matched?.route?.outlets?.[outletName];
+
+      // ── File-based routing: auto-resolve from route-view[src] or config ──
+      const configTemplates = _config.router.templates || "";
+      if (!tpl && (outletEl.hasAttribute("src") || configTemplates)) {
+        const rawSrc = outletEl.getAttribute("src") || configTemplates;
+        const baseSrc = rawSrc.replace(/\/?$/, "/");
+        const ext = outletEl.getAttribute("ext") || _config.router.ext || ".html";
+        const indexName = outletEl.getAttribute("route-index") || "index";
+        const segment = current.path === "/" ? indexName : current.path.replace(/^\//, "");
+        const fullSrc = baseSrc + segment + ext;
+        const cacheKey = outletName + ":" + fullSrc;
+
+        if (_autoTemplateCache.has(cacheKey)) {
+          tpl = _autoTemplateCache.get(cacheKey);
+        } else {
+          tpl = document.createElement("template");
+          tpl.setAttribute("src", fullSrc);
+          tpl.setAttribute("route", current.path);
+          document.body.appendChild(tpl);
+          _autoTemplateCache.set(cacheKey, tpl);
+          _log("[ROUTER] File-based route:", current.path, "→", fullSrc);
+        }
+
+        // Auto i18n namespace (convention: filename = namespace)
+        if (outletEl.hasAttribute("i18n-ns") && !tpl.getAttribute("i18n-ns")) {
+          tpl.setAttribute("i18n-ns", segment);
+        }
+      }
 
-      // Always clear first
+      // Always clear first — dispose watchers/listeners before wiping DOM
+      _disposeTree(outletEl);
       outletEl.innerHTML = "";
 
       if (tpl) {
@@ -130,6 +160,13 @@ export function _createRouter() {
           await _loadTemplateElement(tpl);
         }
 
+        // i18n namespace loading for route template
+        const i18nNs = tpl.getAttribute("i18n-ns");
+        if (i18nNs) {
+          const { _loadI18nNamespace } = await import("./i18n.js");
+          await _loadI18nNamespace(i18nNs);
+        }
+
         const clone = tpl.content.cloneNode(true);
 
         const routeCtx = createContext(
@@ -176,10 +213,10 @@ export function _createRouter() {
       if (exactClass) {
         link.classList.toggle(exactClass, current.path === routePath);
       } else if (activeClass && !link.hasAttribute("route-active-exact")) {
-        link.classList.toggle(
-          activeClass,
-          current.path.startsWith(routePath),
-        );
+        const isActive = routePath === "/"
+          ? current.path === "/"
+          : current.path.startsWith(routePath);
+        link.classList.toggle(activeClass, isActive);
       }
     });
 
@@ -278,6 +315,9 @@ export function _createRouter() {
             }
             return;
           }
+          // Skip if path unchanged (prevents double-processing from programmatic hash set)
+          const [p] = raw.split("?");
+          if (p === current.path) return;
           navigate(raw, true);
         });
         // Initial route