@erickxavier/no-js 1.0.0

package/src/directives/events.js

@@ -0,0 +1,153 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  DIRECTIVES: on:*, trigger
+// ═══════════════════════════════════════════════════════════════════════
+
+import { evaluate, _execStatement } from "../evaluate.js";
+import { findContext } from "../dom.js";
+import { registerDirective } from "../registry.js";
+
+registerDirective("on:*", {
+  priority: 20,
+  init(el, name, expr) {
+    const ctx = findContext(el);
+    const parts = name.replace("on:", "").split(".");
+    const event = parts[0];
+    const modifiers = new Set(parts.slice(1));
+
+    // Lifecycle hooks
+    if (event === "mounted") {
+      requestAnimationFrame(() => _execStatement(expr, ctx, { $el: el }));
+      return;
+    }
+    if (event === "init") {
+      _execStatement(expr, ctx, { $el: el });
+      return;
+    }
+    if (event === "updated") {
+      const updatedObserver = new MutationObserver(() => {
+        _execStatement(expr, ctx, { $el: el });
+      });
+      updatedObserver.observe(el, { childList: true, subtree: true, characterData: true, attributes: true });
+      return;
+    }
+    if (event === "error") {
+      window.addEventListener("error", (e) => {
+        if (el.contains(e.target) || e.target === el) {
+          _execStatement(expr, ctx, { $el: el, $error: e.error || e.message });
+        }
+      });
+      return;
+    }
+    if (event === "unmounted") {
+      const observer = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          for (const node of m.removedNodes) {
+            if (node === el || node.contains?.(el)) {
+              _execStatement(expr, ctx, { $el: el });
+              observer.disconnect();
+              return;
+            }
+          }
+        }
+      });
+      if (el.parentElement)
+        observer.observe(el.parentElement, { childList: true });
+      return;
+    }
+
+    // Debounce / throttle
+    let debounceMs = 0;
+    let throttleMs = 0;
+    for (const mod of modifiers) {
+      if (/^\d+$/.test(mod)) {
+        if (modifiers.has("debounce")) debounceMs = parseInt(mod);
+        else if (modifiers.has("throttle")) throttleMs = parseInt(mod);
+      }
+    }
+
+    let handler = (e) => {
+      // Key modifiers
+      if (event === "keydown" || event === "keyup" || event === "keypress") {
+        const keyMods = [
+          "enter",
+          "escape",
+          "tab",
+          "space",
+          "delete",
+          "backspace",
+          "up",
+          "down",
+          "left",
+          "right",
+          "ctrl",
+          "alt",
+          "shift",
+          "meta",
+        ];
+        for (const mod of modifiers) {
+          if (!keyMods.includes(mod)) continue;
+          if (mod === "enter" && e.key !== "Enter") return;
+          if (mod === "escape" && e.key !== "Escape") return;
+          if (mod === "tab" && e.key !== "Tab") return;
+          if (mod === "space" && e.key !== " ") return;
+          if (mod === "delete" && e.key !== "Delete" && e.key !== "Backspace")
+            return;
+          if (mod === "up" && e.key !== "ArrowUp") return;
+          if (mod === "down" && e.key !== "ArrowDown") return;
+          if (mod === "left" && e.key !== "ArrowLeft") return;
+          if (mod === "right" && e.key !== "ArrowRight") return;
+          if (mod === "ctrl" && !e.ctrlKey) return;
+          if (mod === "alt" && !e.altKey) return;
+          if (mod === "shift" && !e.shiftKey) return;
+          if (mod === "meta" && !e.metaKey) return;
+        }
+      }
+
+      if (modifiers.has("prevent")) e.preventDefault();
+      if (modifiers.has("stop")) e.stopPropagation();
+      if (modifiers.has("self") && e.target !== el) return;
+
+      _execStatement(expr, ctx, { $event: e, $el: el });
+    };
+
+    // Wrap with debounce
+    if (debounceMs > 0) {
+      const original = handler;
+      let timer;
+      handler = (e) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => original(e), debounceMs);
+      };
+    }
+
+    // Wrap with throttle
+    if (throttleMs > 0) {
+      const original = handler;
+      let last = 0;
+      handler = (e) => {
+        const now = Date.now();
+        if (now - last >= throttleMs) {
+          last = now;
+          original(e);
+        }
+      };
+    }
+
+    const opts = {};
+    if (modifiers.has("once")) opts.once = true;
+
+    el.addEventListener(event, handler, opts);
+  },
+});
+
+registerDirective("trigger", {
+  priority: 20,
+  init(el, name, eventName) {
+    const ctx = findContext(el);
+    const dataExpr = el.getAttribute("trigger-data");
+    el.addEventListener("click", () => {
+      const detail = dataExpr ? evaluate(dataExpr, ctx) : null;
+      el.dispatchEvent(new CustomEvent(eventName, { detail, bubbles: true }));
+    });
+  },
+});

package/src/directives/http.js

@@ -0,0 +1,288 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  DIRECTIVES: get, post, put, patch, delete
+// ═══════════════════════════════════════════════════════════════════════
+
+import {
+  _config,
+  _log,
+  _warn,
+  _stores,
+  _notifyStoreWatchers,
+  _emitEvent,
+  _routerInstance,
+} from "../globals.js";
+import { createContext } from "../context.js";
+import { evaluate, _execStatement, _interpolate } from "../evaluate.js";
+import { _doFetch, _cacheGet, _cacheSet } from "../fetch.js";
+import { findContext, _clearDeclared, _cloneTemplate } from "../dom.js";
+import { registerDirective, processTree } from "../registry.js";
+
+const HTTP_METHODS = ["get", "post", "put", "patch", "delete"];
+
+for (const method of HTTP_METHODS) {
+  registerDirective(method, {
+    priority: 1,
+    init(el, name, url) {
+      const asKey = el.getAttribute("as") || "data";
+      const loadingTpl = el.getAttribute("loading");
+      const errorTpl = el.getAttribute("error");
+      const emptyTpl = el.getAttribute("empty");
+      const successTpl = el.getAttribute("success");
+      const thenExpr = el.getAttribute("then");
+      const redirectPath = el.getAttribute("redirect");
+      const confirmMsg = el.getAttribute("confirm");
+      const refreshInterval = parseInt(el.getAttribute("refresh")) || 0;
+      const cachedRaw = el.getAttribute("cached");
+      const cacheStrategy = el.hasAttribute("cached")
+        ? cachedRaw || "memory"
+        : "none";
+      const bodyAttr = el.getAttribute("body");
+      const headersAttr = el.getAttribute("headers");
+      const varName = el.getAttribute("var");
+      const intoStore = el.getAttribute("into");
+      const retryCount =
+        parseInt(el.getAttribute("retry")) || _config.retries;
+      const retryDelay =
+        parseInt(el.getAttribute("retry-delay")) || _config.retryDelay || 1000;
+      const paramsAttr = el.getAttribute("params");
+
+      const parentCtx = el.parentElement
+        ? findContext(el.parentElement)
+        : createContext();
+      const ctx = el.__ctx || createContext({}, parentCtx);
+      el.__ctx = ctx;
+
+      const originalChildren = [...el.childNodes].map((n) =>
+        n.cloneNode(true),
+      );
+
+      let _activeAbort = null;
+
+      async function doRequest() {
+        // SwitchMap: abort previous in-flight request
+        if (_activeAbort) _activeAbort.abort();
+        _activeAbort = new AbortController();
+
+        // Confirmation
+        if (confirmMsg && !window.confirm(confirmMsg)) return;
+
+        let resolvedUrl = _interpolate(url, ctx);
+
+        // Append query params
+        if (paramsAttr) {
+          const paramsObj = evaluate(paramsAttr, ctx);
+          if (paramsObj && typeof paramsObj === "object") {
+            const sep = resolvedUrl.includes("?") ? "&" : "?";
+            const qs = new URLSearchParams(paramsObj).toString();
+            if (qs) resolvedUrl += sep + qs;
+          }
+        }
+
+        const cacheKey = method + ":" + resolvedUrl;
+
+        // Check cache
+        if (method === "get") {
+          const cached = _cacheGet(cacheKey, cacheStrategy);
+          if (cached != null) {
+            ctx.$set(asKey, cached);
+            _clearDeclared(el);
+            processTree(el);
+            return;
+          }
+        }
+
+        // Show loading
+        if (loadingTpl) {
+          const clone = _cloneTemplate(loadingTpl);
+          if (clone) {
+            el.innerHTML = "";
+            el.appendChild(clone);
+            processTree(el);
+          }
+        }
+
+        try {
+          let reqBody = null;
+          if (bodyAttr) {
+            const interpolated = _interpolate(bodyAttr, ctx);
+            try {
+              reqBody = JSON.parse(interpolated);
+            } catch {
+              reqBody = interpolated;
+            }
+          }
+
+          // For forms, collect form data
+          if (el.tagName === "FORM") {
+            const formData = new FormData(el);
+            reqBody = Object.fromEntries(formData.entries());
+          }
+
+          const extraHeaders = headersAttr ? JSON.parse(headersAttr) : {};
+          const savedRetries = _config.retries;
+          const savedRetryDelay = _config.retryDelay;
+          _config.retries = retryCount;
+          _config.retryDelay = retryDelay;
+          const data = await _doFetch(
+            resolvedUrl,
+            method,
+            reqBody,
+            extraHeaders,
+            el,
+            _activeAbort.signal,
+          );
+          _config.retries = savedRetries;
+          _config.retryDelay = savedRetryDelay;
+
+          // Cache response
+          if (method === "get") _cacheSet(cacheKey, data, cacheStrategy);
+
+          // Check empty
+          if (
+            emptyTpl &&
+            (data == null || (Array.isArray(data) && data.length === 0))
+          ) {
+            const clone = _cloneTemplate(emptyTpl);
+            if (clone) {
+              el.innerHTML = "";
+              el.appendChild(clone);
+              processTree(el);
+            }
+            return;
+          }
+
+          ctx.$set(asKey, data);
+
+          // Write to global store if into attribute is present
+          if (intoStore) {
+            if (!_stores[intoStore]) _stores[intoStore] = createContext({});
+            _stores[intoStore].$set(asKey, data);
+            _notifyStoreWatchers();
+          }
+
+          // Success template
+          if (successTpl) {
+            const clone = _cloneTemplate(successTpl);
+            if (clone) {
+              el.innerHTML = "";
+              // Inject var
+              const tplEl = document.getElementById(
+                successTpl.replace("#", ""),
+              );
+              const vn = tplEl?.getAttribute("var") || varName || "result";
+              const childCtx = createContext({ [vn]: data }, ctx);
+              const wrapper = document.createElement("div");
+              wrapper.style.display = "contents";
+              wrapper.__ctx = childCtx;
+              wrapper.appendChild(clone);
+              el.appendChild(wrapper);
+              processTree(wrapper);
+            }
+          } else {
+            // Restore original children and re-process
+            el.innerHTML = "";
+            for (const child of originalChildren)
+              el.appendChild(child.cloneNode(true));
+            _clearDeclared(el);
+            processTree(el);
+          }
+
+          // Then expression
+          if (thenExpr) _execStatement(thenExpr, ctx, { result: data });
+
+          // Redirect
+          if (redirectPath && _routerInstance)
+            _routerInstance.push(redirectPath);
+
+          _emitEvent("fetch:success", { url: resolvedUrl, data });
+        } catch (err) {
+          // SwitchMap: silently ignore aborted requests
+          if (err.name === "AbortError") return;
+
+          _warn(
+            `${method.toUpperCase()} ${resolvedUrl} failed:`,
+            err.message,
+          );
+          _emitEvent("fetch:error", { url: resolvedUrl, error: err });
+          _emitEvent("error", { url: resolvedUrl, error: err });
+
+          if (errorTpl) {
+            const clone = _cloneTemplate(errorTpl);
+            if (clone) {
+              el.innerHTML = "";
+              const tplEl = document.getElementById(
+                errorTpl.replace("#", ""),
+              );
+              const vn = tplEl?.getAttribute("var") || "err";
+              const childCtx = createContext(
+                {
+                  [vn]: {
+                    message: err.message,
+                    status: err.status,
+                    body: err.body,
+                  },
+                },
+                ctx,
+              );
+              const wrapper = document.createElement("div");
+              wrapper.style.display = "contents";
+              wrapper.__ctx = childCtx;
+              wrapper.appendChild(clone);
+              el.appendChild(wrapper);
+              processTree(wrapper);
+            }
+          }
+        }
+      }
+
+      // For forms, intercept submit
+      if (el.tagName === "FORM" && method !== "get") {
+        el.addEventListener("submit", (e) => {
+          e.preventDefault();
+          doRequest();
+        });
+      } else if (method === "get") {
+        doRequest();
+      } else {
+        // Non-GET on non-FORM: attach click listener
+        el.addEventListener("click", (e) => {
+          e.preventDefault();
+          doRequest();
+        });
+      }
+
+      // Reactive URL watching: re-fetch when {expressions} in URL change
+      const hasInterpolation = /\{[^}]+\}/.test(url);
+      if (hasInterpolation) {
+        const debounceMs = parseInt(el.getAttribute("debounce")) || 0;
+        let _lastResolvedUrl = _interpolate(url, ctx);
+        let _debounceTimer = null;
+
+        function onAncestorChange() {
+          const newUrl = _interpolate(url, ctx);
+          if (newUrl !== _lastResolvedUrl) {
+            _lastResolvedUrl = newUrl;
+            if (_debounceTimer) clearTimeout(_debounceTimer);
+            if (debounceMs > 0) {
+              _debounceTimer = setTimeout(doRequest, debounceMs);
+            } else {
+              doRequest();
+            }
+          }
+        }
+
+        // Watch all ancestor contexts for changes
+        let ancestor = parentCtx;
+        while (ancestor && ancestor.__isProxy) {
+          ancestor.$watch(onAncestorChange);
+          ancestor = ancestor.$parent;
+        }
+      }
+
+      // Polling
+      if (refreshInterval > 0) {
+        setInterval(doRequest, refreshInterval);
+      }
+    },
+  });
+}

package/src/directives/i18n.js

@@ -0,0 +1,29 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  DIRECTIVE: t (i18n translations)
+// ═══════════════════════════════════════════════════════════════════════
+
+import { _i18n } from "../i18n.js";
+import { evaluate } from "../evaluate.js";
+import { findContext } from "../dom.js";
+import { registerDirective } from "../registry.js";
+
+registerDirective("t", {
+  priority: 20,
+  init(el, name, key) {
+    const ctx = findContext(el);
+
+    function update() {
+      const params = {};
+      for (const attr of [...el.attributes]) {
+        if (attr.name.startsWith("t-") && attr.name !== "t") {
+          const paramName = attr.name.replace("t-", "");
+          params[paramName] = evaluate(attr.value, ctx) ?? attr.value;
+        }
+      }
+      el.textContent = _i18n.t(key, params);
+    }
+
+    ctx.$watch(update);
+    update();
+  },
+});

package/src/directives/loops.js

@@ -0,0 +1,235 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  DIRECTIVES: each, foreach
+// ═══════════════════════════════════════════════════════════════════════
+
+import { createContext } from "../context.js";
+import { evaluate, resolve } from "../evaluate.js";
+import { findContext, _cloneTemplate } from "../dom.js";
+import { registerDirective, processTree } from "../registry.js";
+import { _animateOut } from "../animations.js";
+
+registerDirective("each", {
+  priority: 10,
+  init(el, name, expr) {
+    const ctx = findContext(el);
+    const match = expr.match(/^(\w+)\s+in\s+(\S+)$/);
+    if (!match) return;
+    const [, itemName, listPath] = match;
+    const tplId = el.getAttribute("template");
+    const elseTpl = el.getAttribute("else");
+    const keyExpr = el.getAttribute("key");
+    const animEnter =
+      el.getAttribute("animate-enter") || el.getAttribute("animate");
+    const animLeave = el.getAttribute("animate-leave");
+    const stagger = parseInt(el.getAttribute("animate-stagger")) || 0;
+    const animDuration = parseInt(el.getAttribute("animate-duration")) || 0;
+
+    function update() {
+      let list = resolve(listPath, ctx);
+      if (!Array.isArray(list)) return;
+
+      // Empty state
+      if (list.length === 0 && elseTpl) {
+        const clone = _cloneTemplate(elseTpl);
+        if (clone) {
+          el.innerHTML = "";
+          el.appendChild(clone);
+          processTree(el);
+        }
+        return;
+      }
+
+      const tpl = tplId ? document.getElementById(tplId) : null;
+      if (!tpl) return;
+
+      // Animate out old items if animate-leave is set
+      if (animLeave && el.children.length > 0) {
+        const oldItems = [...el.children];
+        let remaining = oldItems.length;
+        oldItems.forEach((child) => {
+          const target = child.firstElementChild || child;
+          target.classList.add(animLeave);
+          const done = () => {
+            target.classList.remove(animLeave);
+            remaining--;
+            if (remaining <= 0) renderItems(tpl, list);
+          };
+          target.addEventListener("animationend", done, { once: true });
+          setTimeout(done, animDuration || 2000);
+        });
+      } else {
+        renderItems(tpl, list);
+      }
+    }
+
+    function renderItems(tpl, list) {
+      const count = list.length;
+      el.innerHTML = "";
+
+      list.forEach((item, i) => {
+        const childData = {
+          [itemName]: item,
+          $index: i,
+          $count: count,
+          $first: i === 0,
+          $last: i === count - 1,
+          $even: i % 2 === 0,
+          $odd: i % 2 !== 0,
+        };
+        const childCtx = createContext(childData, ctx);
+
+        const clone = tpl.content.cloneNode(true);
+        const wrapper = document.createElement("div");
+        wrapper.style.display = "contents";
+        wrapper.__ctx = childCtx;
+        wrapper.appendChild(clone);
+        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);
+        }
+      });
+    }
+
+    ctx.$watch(update);
+    update();
+  },
+});
+
+registerDirective("foreach", {
+  priority: 10,
+  init(el, name, itemName) {
+    const ctx = findContext(el);
+    const fromPath = el.getAttribute("from");
+    const indexName = el.getAttribute("index") || "$index";
+    const elseTpl = el.getAttribute("else");
+    const filterExpr = el.getAttribute("filter");
+    const sortProp = el.getAttribute("sort");
+    const limit = parseInt(el.getAttribute("limit")) || Infinity;
+    const offset = parseInt(el.getAttribute("offset")) || 0;
+    const tplId = el.getAttribute("template");
+    const animEnter = el.getAttribute("animate-enter") || el.getAttribute("animate");
+    const animLeave = el.getAttribute("animate-leave");
+    const stagger = parseInt(el.getAttribute("animate-stagger")) || 0;
+    const animDuration = parseInt(el.getAttribute("animate-duration")) || 0;
+
+    if (!fromPath || !itemName) return;
+
+    const templateContent = tplId
+      ? null // Will use external template
+      : el.cloneNode(true); // Use the element itself as template
+
+    function update() {
+      let list = resolve(fromPath, ctx);
+      if (!Array.isArray(list)) return;
+
+      // Filter
+      if (filterExpr) {
+        list = list.filter((item, i) => {
+          const tempCtx = createContext(
+            { [itemName]: item, [indexName]: i },
+            ctx,
+          );
+          return !!evaluate(filterExpr, tempCtx);
+        });
+      }
+
+      // Sort
+      if (sortProp) {
+        const desc = sortProp.startsWith("-");
+        const key = desc ? sortProp.slice(1) : sortProp;
+        list = [...list].sort((a, b) => {
+          const va = resolve(key, a) ?? a?.[key];
+          const vb = resolve(key, b) ?? b?.[key];
+          const r = va < vb ? -1 : va > vb ? 1 : 0;
+          return desc ? -r : r;
+        });
+      }
+
+      // Offset and limit
+      list = list.slice(offset, offset + limit);
+
+      // Empty
+      if (list.length === 0 && elseTpl) {
+        const clone = _cloneTemplate(elseTpl);
+        if (clone) {
+          el.innerHTML = "";
+          el.appendChild(clone);
+          processTree(el);
+        }
+        return;
+      }
+
+      const tpl = tplId ? document.getElementById(tplId) : null;
+      const count = list.length;
+
+      function renderForeachItems() {
+        el.innerHTML = "";
+        list.forEach((item, i) => {
+          const childData = {
+            [itemName]: item,
+            [indexName]: i,
+            $index: i,
+            $count: count,
+            $first: i === 0,
+            $last: i === count - 1,
+            $even: i % 2 === 0,
+            $odd: i % 2 !== 0,
+          };
+          const childCtx = createContext(childData, ctx);
+
+          let clone;
+          if (tpl) {
+            clone = tpl.content.cloneNode(true);
+          } else {
+            clone = templateContent.cloneNode(true);
+          }
+
+          const wrapper = document.createElement("div");
+          wrapper.style.display = "contents";
+          wrapper.__ctx = childCtx;
+          wrapper.appendChild(clone);
+          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);
+          }
+        });
+      }
+
+      // Animate out old items if animate-leave is set
+      if (animLeave && el.children.length > 0) {
+        const oldItems = [...el.children];
+        let remaining = oldItems.length;
+        oldItems.forEach((child) => {
+          const target = child.firstElementChild || child;
+          target.classList.add(animLeave);
+          const done = () => {
+            target.classList.remove(animLeave);
+            remaining--;
+            if (remaining <= 0) renderForeachItems();
+          };
+          target.addEventListener("animationend", done, { once: true });
+          setTimeout(done, animDuration || 2000);
+        });
+      } else {
+        renderForeachItems();
+      }
+    }
+
+    ctx.$watch(update);
+    update();
+  },
+});