@erickxavier/no-js 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erickxavier/no-js",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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",
@@ -27,6 +27,11 @@
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
     "test:verbose": "jest --verbose",
+    "test:e2e": "npx playwright test --config e2e/playwright.config.ts",
+    "test:e2e:ui": "npx playwright test --config e2e/playwright.config.ts --ui",
+    "test:e2e:headed": "npx playwright test --config e2e/playwright.config.ts --headed",
+    "test:e2e:report": "npx playwright show-report e2e/playwright-report",
+    "test:all": "npm test && npm run test:e2e",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
@@ -54,11 +59,13 @@
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@babel/preset-env": "^7.29.0",
+    "@playwright/test": "^1.58.2",
     "@testing-library/jest-dom": "^6.9.1",
     "babel-jest": "^30.2.0",
     "esbuild": "^0.27.3",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
-    "jsdom": "^28.1.0"
+    "jsdom": "^28.1.0",
+    "serve": "^14.2.5"
   }
 }

package/src/directives/binding.js

@@ -13,7 +13,7 @@ registerDirective("bind", {
     const ctx = findContext(el);
     function update() {
       const val = evaluate(expr, ctx);
-      if (val !== undefined && val !== null) el.textContent = String(val);
+      el.textContent = (val !== undefined && val !== null) ? String(val) : '';
     }
     _watchExpr(expr, ctx, update);
     update();

package/src/directives/conditionals.js

@@ -82,6 +82,7 @@ registerDirective("else-if", {
     // Works like `if` but checks previous sibling's condition
     const ctx = findContext(el);
     const thenId = el.getAttribute("then");
+    const originalChildren = [...el.childNodes].map((n) => n.cloneNode(true));
 
     function update() {
       // Check if any preceding if/else-if was true
@@ -108,6 +109,10 @@ registerDirective("else-if", {
             el.innerHTML = "";
             el.appendChild(clone);
           }
+        } else {
+          el.innerHTML = "";
+          for (const child of originalChildren)
+            el.appendChild(child.cloneNode(true));
         }
         _clearDeclared(el);
         processTree(el);

package/src/directives/i18n.js

@@ -2,7 +2,7 @@
 //  DIRECTIVE: t (i18n translations)
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _i18n } from "../i18n.js";
+import { _i18n, _watchI18n } from "../i18n.js";
 import { evaluate } from "../evaluate.js";
 import { findContext } from "../dom.js";
 import { registerDirective } from "../registry.js";
@@ -24,6 +24,7 @@ registerDirective("t", {
     }
 
     ctx.$watch(update);
+    _watchI18n(update);
     update();
   },
 });

package/src/directives/loops.js

@@ -86,13 +86,15 @@ registerDirective("each", {
         el.appendChild(wrapper);
         processTree(wrapper);
 
-        // Stagger animation
-        if (animEnter && stagger) {
-          wrapper.style.animationDelay = i * stagger + "ms";
-        }
         if (animEnter) {
           const firstChild = wrapper.firstElementChild;
-          if (firstChild) firstChild.classList.add(animEnter);
+          if (firstChild) {
+            firstChild.classList.add(animEnter);
+            // Stagger animation — delay must be on the child, not the wrapper
+            if (stagger) {
+              firstChild.style.animationDelay = i * stagger + "ms";
+            }
+          }
         }
       });
     }
@@ -198,13 +200,15 @@ registerDirective("foreach", {
           el.appendChild(wrapper);
           processTree(wrapper);
 
-          // Stagger animation
-          if (animEnter && stagger) {
-            wrapper.style.animationDelay = (i * stagger) + "ms";
-          }
           if (animEnter) {
             const firstChild = wrapper.firstElementChild;
-            if (firstChild) firstChild.classList.add(animEnter);
+            if (firstChild) {
+              firstChild.classList.add(animEnter);
+              // Stagger animation — delay must be on the child, not the wrapper
+              if (stagger) {
+                firstChild.style.animationDelay = (i * stagger) + "ms";
+              }
+            }
           }
         });
       }

package/src/directives/validation.js

@@ -19,6 +19,10 @@ function _validateField(value, rules, allValues) {
     } else {
       // Built-in validators
       switch (name) {
+        case "required":
+          if (value == null || String(value).trim() === "")
+            return "Required";
+          break;
         case "email":
           if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
             return "Invalid email";
@@ -90,6 +94,8 @@ registerDirective("validate", {
         errors: {},
         values: {},
         reset: () => {
+          formCtx.dirty = false;
+          formCtx.touched = false;
           el.reset();
           checkValidity();
         },
@@ -194,22 +200,32 @@ registerDirective("error-boundary", {
   init(el, name, fallbackTpl) {
     const ctx = findContext(el);
 
+    function showFallback(message) {
+      const clone = _cloneTemplate(fallbackTpl);
+      if (clone) {
+        const childCtx = createContext(
+          { err: { message } },
+          ctx,
+        );
+        el.innerHTML = "";
+        const wrapper = document.createElement("div");
+        wrapper.style.display = "contents";
+        wrapper.__ctx = childCtx;
+        wrapper.appendChild(clone);
+        el.appendChild(wrapper);
+        processTree(wrapper);
+      }
+    }
+
+    // Listen for NoJS expression errors dispatched from event handlers
+    el.addEventListener("nojs:error", (e) => {
+      showFallback(e.detail?.message || "An error occurred");
+    });
+
+    // Listen for window-level errors (resource load failures, etc.)
     window.addEventListener("error", (e) => {
       if (el.contains(e.target) || el === e.target) {
-        const clone = _cloneTemplate(fallbackTpl);
-        if (clone) {
-          const childCtx = createContext(
-            { err: { message: e.message } },
-            ctx,
-          );
-          el.innerHTML = "";
-          const wrapper = document.createElement("div");
-          wrapper.style.display = "contents";
-          wrapper.__ctx = childCtx;
-          wrapper.appendChild(clone);
-          el.appendChild(wrapper);
-          processTree(wrapper);
-        }
+        showFallback(e.message || "An error occurred");
       }
     });
   },

package/src/evaluate.js

@@ -2,7 +2,7 @@
 //  EXPRESSION EVALUATOR
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _stores, _routerInstance, _filters, _warn, _config } from "./globals.js";
+import { _stores, _routerInstance, _filters, _warn, _config, _notifyStoreWatchers } from "./globals.js";
 import { _i18n } from "./i18n.js";
 import { _collectKeys } from "./context.js";
 
@@ -272,6 +272,7 @@ export function _execStatement(expr, ctx, extraVars = {}) {
       _wCtx = _wCtx.$parent;
     }
     const setters = [...chainKeys]
+      .filter((k) => !k.startsWith("$"))
       .map(
         (k) =>
           `{let _c=__ctx;while(_c&&_c.__isProxy){if('${k}'in _c.__raw){_c.$set('${k}',typeof ${k}!=='undefined'?${k}:_c.__raw['${k}']);break;}_c=_c.$parent;}}`,
@@ -280,8 +281,19 @@ export function _execStatement(expr, ctx, extraVars = {}) {
 
     const fn = new Function("__ctx", ...keyArr, `${expr};\n${setters}`);
     fn(ctx, ...valArr);
+
+    // Notify global store watchers when expression touches $store
+    if (typeof expr === "string" && expr.includes("$store")) {
+      _notifyStoreWatchers();
+    }
   } catch (e) {
     _warn("Expression error:", expr, e.message);
+    // Dispatch a custom DOM event so error-boundary directives can catch it
+    if (extraVars.$el) {
+      extraVars.$el.dispatchEvent(
+        new CustomEvent("nojs:error", { bubbles: true, detail: { message: e.message, error: e } })
+      );
+    }
   }
 }
 

package/src/i18n.js

@@ -4,9 +4,25 @@
 
 import { _config } from "./globals.js";
 
+const _i18nListeners = new Set();
+
+export function _watchI18n(fn) {
+  _i18nListeners.add(fn);
+  return () => _i18nListeners.delete(fn);
+}
+
 export const _i18n = {
-  locale: "en",
+  _locale: "en",
   locales: {},
+  get locale() {
+    return this._locale;
+  },
+  set locale(v) {
+    if (this._locale !== v) {
+      this._locale = v;
+      _i18nListeners.forEach((fn) => fn());
+    }
+  },
   t(key, params = {}) {
     const messages =
       _i18n.locales[_i18n.locale] ||

package/src/index.js

@@ -183,7 +183,7 @@ const NoJS = {
   resolve,
 
   // Version
-  version: "1.0.0",
+  version: "1.0.2",
 };
 
 export default NoJS;

package/src/router.js

@@ -99,6 +99,15 @@ export function _createRouter() {
     // Render
     await _renderRoute(matched);
     listeners.forEach((fn) => fn(current));
+
+    // Scroll to anchor if hash is present (e.g. route="/docs#cheatsheet")
+    if (current.hash) {
+      const anchorId = current.hash.slice(1);
+      requestAnimationFrame(() => {
+        const el = document.getElementById(anchorId);
+        if (el) el.scrollIntoView({ behavior: "smooth" });
+      });
+    }
   }
 
   async function _renderRoute(matched) {
@@ -184,6 +193,18 @@ export function _createRouter() {
     // "preserve" — do nothing, keep current scroll position
   }
 
+  function _scrollToAnchor(id, el) {
+    el.scrollIntoView({ behavior: "smooth" });
+
+    // Update active class on anchor links that point to "#<id>"
+    const selector = 'a[href="#' + id + '"]';
+    document.querySelectorAll('a[href^="#"]').forEach((a) => {
+      if (!a.hasAttribute("route")) {
+        a.classList.toggle("active", a.matches(selector));
+      }
+    });
+  }
+
   const router = {
     get current() {
       return current;
@@ -224,14 +245,40 @@ export function _createRouter() {
           e.preventDefault();
           const path = link.getAttribute("route");
           navigate(path);
+          return;
+        }
+
+        // In hash mode, intercept plain anchor links (href="#id") so they
+        // scroll to the target element instead of conflicting with the router.
+        if (_config.router.mode === "hash") {
+          const anchor = e.target.closest('a[href^="#"]');
+          if (anchor && !anchor.hasAttribute("route")) {
+            const href = anchor.getAttribute("href");
+            const id = href.slice(1);
+            if (id && !id.startsWith("/")) {
+              const target = document.getElementById(id);
+              if (target) {
+                e.preventDefault();
+                _scrollToAnchor(id, target);
+              }
+            }
+          }
         }
       });
 
       // Listen for URL changes
       if (_config.router.mode === "hash") {
         window.addEventListener("hashchange", () => {
-          const path = window.location.hash.slice(1) || "/";
-          navigate(path, true);
+          const raw = window.location.hash.slice(1) || "/";
+          if (!raw.startsWith("/")) {
+            const el = document.getElementById(raw);
+            if (el) {
+              _scrollToAnchor(raw, el);
+              window.history.replaceState(null, "", "#" + current.path);
+            }
+            return;
+          }
+          navigate(raw, true);
         });
         // Initial route
         const path = window.location.hash.slice(1) || "/";