@erickxavier/no-js 1.0.0

package/src/animations.js

@@ -0,0 +1,113 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  ANIMATIONS
+// ═══════════════════════════════════════════════════════════════════════
+
+let _stylesInjected = false;
+
+function _injectBuiltInStyles() {
+  if (_stylesInjected || typeof document === "undefined") return;
+  _stylesInjected = true;
+
+  const css = `
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes fadeOutUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } }
+@keyframes fadeOutDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); } }
+@keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
+@keyframes slideOutLeft { from { transform: translateX(0); } to { transform: translateX(-100%); } }
+@keyframes slideOutRight { from { transform: translateX(0); } to { transform: translateX(100%); } }
+@keyframes zoomIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
+@keyframes zoomOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.5); } }
+@keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }
+@keyframes bounceOut { 0% { opacity: 1; transform: scale(1); } 20% { transform: scale(0.9); } 50%,55% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(0.3); } }
+`.trim();
+
+  const style = document.createElement("style");
+  style.setAttribute("data-nojs-animations", "");
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+
+export function _animateIn(el, animName, transitionName, durationMs) {
+  _injectBuiltInStyles();
+  const fallback = durationMs || 1000;
+  if (animName) {
+    const target = el.firstElementChild || el;
+    target.classList.add(animName);
+    if (durationMs) target.style.animationDuration = durationMs + "ms";
+    target.addEventListener(
+      "animationend",
+      () => target.classList.remove(animName),
+      { once: true },
+    );
+  }
+  if (transitionName) {
+    const target = el.firstElementChild || el;
+    target.classList.add(
+      transitionName + "-enter",
+      transitionName + "-enter-active",
+    );
+    requestAnimationFrame(() => {
+      target.classList.remove(transitionName + "-enter");
+      target.classList.add(transitionName + "-enter-to");
+      const done = () => {
+        target.classList.remove(
+          transitionName + "-enter-active",
+          transitionName + "-enter-to",
+        );
+      };
+      target.addEventListener("transitionend", done, { once: true });
+      // Fallback
+      setTimeout(done, fallback);
+    });
+  }
+}
+
+export function _animateOut(el, animName, transitionName, callback, durationMs) {
+  _injectBuiltInStyles();
+  const fallback = durationMs || 2000;
+  if (!el.firstElementChild && !el.childNodes.length) {
+    callback();
+    return;
+  }
+  if (animName) {
+    const target = el.firstElementChild || el;
+    target.classList.add(animName);
+    if (durationMs) target.style.animationDuration = durationMs + "ms";
+    target.addEventListener(
+      "animationend",
+      () => {
+        target.classList.remove(animName);
+        callback();
+      },
+      { once: true },
+    );
+    setTimeout(callback, fallback); // Fallback
+    return;
+  }
+  if (transitionName) {
+    const target = el.firstElementChild || el;
+    target.classList.add(
+      transitionName + "-leave",
+      transitionName + "-leave-active",
+    );
+    requestAnimationFrame(() => {
+      target.classList.remove(transitionName + "-leave");
+      target.classList.add(transitionName + "-leave-to");
+      const done = () => {
+        target.classList.remove(
+          transitionName + "-leave-active",
+          transitionName + "-leave-to",
+        );
+        callback();
+      };
+      target.addEventListener("transitionend", done, { once: true });
+      setTimeout(done, fallback);
+    });
+    return;
+  }
+  callback();
+}

package/src/cdn.js

@@ -0,0 +1,16 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  No.JS — CDN Entry Point
+//  For <script> tag usage: auto-initializes, sets window.NoJS
+// ═══════════════════════════════════════════════════════════════════════
+
+import NoJS from "./index.js";
+
+// Expose globally
+window.NoJS = NoJS;
+
+// Auto-init on DOM ready
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", () => NoJS.init());
+} else {
+  NoJS.init();
+}

package/src/context.js

@@ -0,0 +1,104 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  REACTIVE CONTEXT
+// ═══════════════════════════════════════════════════════════════════════
+
+import { _stores, _refs, _routerInstance } from "./globals.js";
+import { _i18n } from "./i18n.js";
+
+let _batchDepth = 0;
+const _batchQueue = new Set();
+
+export function _startBatch() {
+  _batchDepth++;
+}
+
+export function _endBatch() {
+  _batchDepth--;
+  if (_batchDepth === 0 && _batchQueue.size > 0) {
+    const fns = [..._batchQueue];
+    _batchQueue.clear();
+    fns.forEach((fn) => fn());
+  }
+}
+
+export function createContext(data = {}, parent = null) {
+  const listeners = new Set();
+  const raw = {};
+  Object.assign(raw, data);
+  let notifying = false;
+
+  function notify() {
+    if (notifying) return;
+    notifying = true;
+    try {
+      if (_batchDepth > 0) {
+        listeners.forEach((fn) => _batchQueue.add(fn));
+      } else {
+        listeners.forEach((fn) => fn());
+      }
+    } finally {
+      notifying = false;
+    }
+  }
+
+  const handler = {
+    get(target, key) {
+      if (key === "__isProxy") return true;
+      if (key === "__raw") return target;
+      if (key === "__listeners") return listeners;
+      if (key === "$watch")
+        return (fn) => {
+          listeners.add(fn);
+          return () => listeners.delete(fn);
+        };
+      if (key === "$notify") return notify;
+      if (key === "$set")
+        return (k, v) => {
+          proxy[k] = v;
+        };
+      if (key === "$parent") return parent;
+      if (key === "$refs") return _refs;
+      if (key === "$store") return _stores;
+      if (key === "$route")
+        return _routerInstance ? _routerInstance.current : {};
+      if (key === "$router") return _routerInstance;
+      if (key === "$i18n") return _i18n;
+      if (key === "$form") return target.$form || null;
+      if (key in target) return target[key];
+      if (parent && parent.__isProxy) return parent[key];
+      return undefined;
+    },
+    set(target, key, value) {
+      const old = target[key];
+      target[key] = value;
+      if (old !== value) notify();
+      return true;
+    },
+    has(target, key) {
+      if (key in target) return true;
+      if (parent && parent.__isProxy) return key in parent;
+      return false;
+    },
+  };
+
+  const proxy = new Proxy(raw, handler);
+  return proxy;
+}
+
+// Collect all keys from a context + its parent chain
+export function _collectKeys(ctx) {
+  const allKeys = new Set();
+  const allVals = {};
+  let c = ctx;
+  while (c && c.__isProxy) {
+    const raw = c.__raw;
+    for (const k of Object.keys(raw)) {
+      if (!allKeys.has(k)) {
+        allKeys.add(k);
+        allVals[k] = raw[k];
+      }
+    }
+    c = c.$parent;
+  }
+  return { keys: [...allKeys], vals: allVals };
+}

package/src/directives/binding.js

@@ -0,0 +1,118 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  DIRECTIVES: bind, bind-html, bind-*, model
+// ═══════════════════════════════════════════════════════════════════════
+
+import { _watchExpr } from "../globals.js";
+import { evaluate, _execStatement } from "../evaluate.js";
+import { findContext, _sanitizeHtml } from "../dom.js";
+import { registerDirective } from "../registry.js";
+
+registerDirective("bind", {
+  priority: 20,
+  init(el, name, expr) {
+    const ctx = findContext(el);
+    function update() {
+      const val = evaluate(expr, ctx);
+      if (val !== undefined && val !== null) el.textContent = String(val);
+    }
+    _watchExpr(expr, ctx, update);
+    update();
+  },
+});
+
+registerDirective("bind-html", {
+  priority: 20,
+  init(el, name, expr) {
+    const ctx = findContext(el);
+    function update() {
+      const val = evaluate(expr, ctx);
+      if (val != null) el.innerHTML = _sanitizeHtml(String(val));
+    }
+    _watchExpr(expr, ctx, update);
+    update();
+  },
+});
+
+registerDirective("bind-*", {
+  priority: 20,
+  init(el, name, expr) {
+    const attrName = name.replace("bind-", "");
+    const ctx = findContext(el);
+
+    // Two-way binding for value
+    if (
+      attrName === "value" &&
+      (el.tagName === "INPUT" ||
+        el.tagName === "TEXTAREA" ||
+        el.tagName === "SELECT")
+    ) {
+      el.addEventListener("input", () => {
+        const val = el.type === "number" ? Number(el.value) : el.value;
+        _execStatement(`${expr} = ${JSON.stringify(val)}`, ctx);
+      });
+    }
+
+    function update() {
+      const val = evaluate(expr, ctx);
+      // Boolean attributes
+      if (
+        [
+          "disabled",
+          "readonly",
+          "checked",
+          "selected",
+          "hidden",
+          "required",
+        ].includes(attrName)
+      ) {
+        if (val) el.setAttribute(attrName, "");
+        else el.removeAttribute(attrName);
+        if (attrName in el) el[attrName] = !!val;
+        return;
+      }
+      if (val != null) el.setAttribute(attrName, String(val));
+      else el.removeAttribute(attrName);
+    }
+    _watchExpr(expr, ctx, update);
+    update();
+  },
+});
+
+registerDirective("model", {
+  priority: 20,
+  init(el, name, expr) {
+    const ctx = findContext(el);
+    const tag = el.tagName;
+    const type = el.type;
+
+    // Model → DOM
+    function update() {
+      const val = evaluate(expr, ctx);
+      if (tag === "INPUT" && type === "checkbox") {
+        el.checked = !!val;
+      } else if (tag === "INPUT" && type === "radio") {
+        el.checked = el.value === String(val);
+      } else if (tag === "SELECT") {
+        el.value = val != null ? String(val) : "";
+      } else {
+        el.value = val != null ? String(val) : "";
+      }
+    }
+
+    // DOM → Model
+    const event =
+      tag === "SELECT" || type === "checkbox" || type === "radio"
+        ? "change"
+        : "input";
+    el.addEventListener(event, () => {
+      let val;
+      if (type === "checkbox") val = el.checked;
+      else if (type === "number" || type === "range") val = Number(el.value);
+      else val = el.value;
+      _execStatement(`${expr} = __val`, ctx, { __val: val });
+    });
+
+    ctx.$watch(update);
+    update();
+  },
+});

package/src/directives/conditionals.js

@@ -0,0 +1,283 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  DIRECTIVES: if, else-if, else, show, hide, switch
+// ═══════════════════════════════════════════════════════════════════════
+
+import { _watchExpr } from "../globals.js";
+import { evaluate } from "../evaluate.js";
+import { findContext, _clearDeclared, _cloneTemplate } from "../dom.js";
+import { registerDirective, processTree } from "../registry.js";
+import { _animateIn, _animateOut } from "../animations.js";
+
+registerDirective("if", {
+  priority: 10,
+  init(el, name, expr) {
+    const ctx = findContext(el);
+    const thenId = el.getAttribute("then");
+    const elseId = el.getAttribute("else");
+    const animEnter =
+      el.getAttribute("animate-enter") || el.getAttribute("animate");
+    const animLeave = el.getAttribute("animate-leave");
+    const transition = el.getAttribute("transition");
+    const animDuration = parseInt(el.getAttribute("animate-duration")) || 0;
+    const originalChildren = [...el.childNodes].map((n) => n.cloneNode(true));
+    let currentState = undefined;
+
+    function update() {
+      const result = !!evaluate(expr, ctx);
+      if (result === currentState) return;
+      currentState = result;
+
+      // Animation leave
+      if (animLeave || transition) {
+        _animateOut(el, animLeave, transition, () => render(result), animDuration);
+      } else {
+        render(result);
+      }
+    }
+
+    function render(result) {
+      if (result) {
+        if (thenId) {
+          const clone = _cloneTemplate(thenId);
+          if (clone) {
+            el.innerHTML = "";
+            el.appendChild(clone);
+          }
+        } else {
+          el.innerHTML = "";
+          for (const child of originalChildren)
+            el.appendChild(child.cloneNode(true));
+        }
+      } else {
+        if (elseId) {
+          const clone = _cloneTemplate(elseId);
+          if (clone) {
+            el.innerHTML = "";
+            el.appendChild(clone);
+          }
+        } else if (thenId) {
+          el.innerHTML = "";
+        } else {
+          el.innerHTML = "";
+        }
+      }
+
+      _clearDeclared(el);
+      processTree(el);
+
+      // Animation enter
+      if (animEnter || transition) {
+        _animateIn(el, animEnter, transition, animDuration);
+      }
+    }
+
+    ctx.$watch(update);
+    update();
+  },
+});
+
+registerDirective("else-if", {
+  priority: 10,
+  init(el, name, expr) {
+    // Works like `if` but checks previous sibling's condition
+    const ctx = findContext(el);
+    const thenId = el.getAttribute("then");
+
+    function update() {
+      // Check if any preceding if/else-if was true
+      let prev = el.previousElementSibling;
+      while (prev) {
+        const prevExpr =
+          prev.getAttribute("if") || prev.getAttribute("else-if");
+        if (prevExpr) {
+          if (evaluate(prevExpr, ctx)) {
+            el.innerHTML = "";
+            el.style.display = "none";
+            return;
+          }
+        } else break;
+        prev = prev.previousElementSibling;
+      }
+
+      const result = !!evaluate(expr, ctx);
+      el.style.display = "";
+      if (result) {
+        if (thenId) {
+          const clone = _cloneTemplate(thenId);
+          if (clone) {
+            el.innerHTML = "";
+            el.appendChild(clone);
+          }
+        }
+        _clearDeclared(el);
+        processTree(el);
+      } else {
+        el.innerHTML = "";
+      }
+    }
+    ctx.$watch(update);
+    update();
+  },
+});
+
+registerDirective("else", {
+  priority: 10,
+  init(el) {
+    // Skip if this element also has an "if" directive (else is used as an attribute of if)
+    if (el.hasAttribute("if")) return;
+    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
+      let prev = el.previousElementSibling;
+      while (prev) {
+        const prevExpr =
+          prev.getAttribute("if") || prev.getAttribute("else-if");
+        if (prevExpr) {
+          if (evaluate(prevExpr, ctx)) {
+            el.innerHTML = "";
+            el.style.display = "none";
+            return;
+          }
+        } else break;
+        prev = prev.previousElementSibling;
+      }
+
+      // No preceding condition was true — show else content
+      el.style.display = "";
+      if (thenId) {
+        const clone = _cloneTemplate(thenId);
+        if (clone) {
+          el.innerHTML = "";
+          el.appendChild(clone);
+        }
+      } else {
+        el.innerHTML = "";
+        for (const child of originalChildren)
+          el.appendChild(child.cloneNode(true));
+      }
+      _clearDeclared(el);
+      processTree(el);
+    }
+    ctx.$watch(update);
+    update();
+  },
+});
+
+registerDirective("show", {
+  priority: 20,
+  init(el, name, expr) {
+    const ctx = findContext(el);
+    const animEnter = el.getAttribute("animate-enter") || el.getAttribute("animate");
+    const animLeave = el.getAttribute("animate-leave");
+    const transition = el.getAttribute("transition");
+    const animDuration = parseInt(el.getAttribute("animate-duration")) || 0;
+    let currentState = undefined;
+
+    function update() {
+      const result = !!evaluate(expr, ctx);
+      if (result === currentState) return;
+      currentState = result;
+
+      if (result) {
+        el.style.display = "";
+        if (animEnter || transition) _animateIn(el, animEnter, transition, animDuration);
+      } else {
+        if (animLeave || transition) {
+          _animateOut(el, animLeave, transition, () => { el.style.display = "none"; }, animDuration);
+        } else {
+          el.style.display = "none";
+        }
+      }
+    }
+    _watchExpr(expr, ctx, update);
+    update();
+  },
+});
+
+registerDirective("hide", {
+  priority: 20,
+  init(el, name, expr) {
+    const ctx = findContext(el);
+    const animEnter = el.getAttribute("animate-enter") || el.getAttribute("animate");
+    const animLeave = el.getAttribute("animate-leave");
+    const transition = el.getAttribute("transition");
+    const animDuration = parseInt(el.getAttribute("animate-duration")) || 0;
+    let currentState = undefined;
+
+    function update() {
+      const result = !evaluate(expr, ctx);
+      if (result === currentState) return;
+      currentState = result;
+
+      if (result) {
+        el.style.display = "";
+        if (animEnter || transition) _animateIn(el, animEnter, transition, animDuration);
+      } else {
+        if (animLeave || transition) {
+          _animateOut(el, animLeave, transition, () => { el.style.display = "none"; }, animDuration);
+        } else {
+          el.style.display = "none";
+        }
+      }
+    }
+    _watchExpr(expr, ctx, update);
+    update();
+  },
+});
+
+registerDirective("switch", {
+  priority: 10,
+  init(el, name, expr) {
+    const ctx = findContext(el);
+
+    function update() {
+      const val = evaluate(expr, ctx);
+      let matched = false;
+
+      for (const child of [...el.children]) {
+        const caseVal = child.getAttribute("case");
+        const isDefault = child.hasAttribute("default");
+        const thenTpl = child.getAttribute("then");
+
+        if (caseVal) {
+          // Support multi-value: case="'a','b'"
+          const values = caseVal
+            .split(",")
+            .map((v) => evaluate(v.trim(), ctx));
+          if (!matched && values.includes(val)) {
+            matched = true;
+            child.style.display = "";
+            if (thenTpl) {
+              const clone = _cloneTemplate(thenTpl);
+              if (clone) {
+                child.innerHTML = "";
+                child.appendChild(clone);
+              }
+              child.__declared = false;
+              processTree(child);
+            }
+          } else {
+            child.style.display = "none";
+          }
+        } else if (isDefault) {
+          child.style.display = matched ? "none" : "";
+          if (!matched && thenTpl) {
+            const clone = _cloneTemplate(thenTpl);
+            if (clone) {
+              child.innerHTML = "";
+              child.appendChild(clone);
+            }
+            child.__declared = false;
+            processTree(child);
+          }
+        }
+      }
+    }
+
+    ctx.$watch(update);
+    update();
+  },
+});