@erickxavier/no-js 1.0.0

package/src/directives/refs.js

@@ -0,0 +1,144 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  DIRECTIVES: ref, use, call
+// ═══════════════════════════════════════════════════════════════════════
+
+import {
+  _refs,
+  _stores,
+  _notifyStoreWatchers,
+} from "../globals.js";
+import { createContext } from "../context.js";
+import { evaluate, _execStatement, _interpolate } from "../evaluate.js";
+import { _doFetch } from "../fetch.js";
+import { findContext, _cloneTemplate } from "../dom.js";
+import { registerDirective, processTree } from "../registry.js";
+
+registerDirective("ref", {
+  priority: 5,
+  init(el, name, refName) {
+    _refs[refName] = el;
+  },
+});
+
+registerDirective("use", {
+  priority: 10,
+  init(el, name, tplId) {
+    const ctx = findContext(el);
+    const clone = _cloneTemplate(tplId);
+    if (!clone) return;
+
+    // Collect var-* attributes
+    const vars = {};
+    for (const attr of [...el.attributes]) {
+      if (attr.name.startsWith("var-")) {
+        const varName = attr.name.replace("var-", "");
+        vars[varName] = evaluate(attr.value, ctx);
+      }
+    }
+
+    const childCtx = createContext(vars, ctx);
+
+    // Handle slots
+    const slots = {};
+    for (const child of [...el.children]) {
+      const slotName = child.getAttribute("slot") || "default";
+      if (!slots[slotName])
+        slots[slotName] = document.createDocumentFragment();
+      slots[slotName].appendChild(child.cloneNode(true));
+    }
+
+    // Replace <slot> elements in template
+    const slotEls = clone.querySelectorAll("slot");
+    for (const slotEl of slotEls) {
+      const slotName = slotEl.getAttribute("name") || "default";
+      if (slots[slotName]) {
+        slotEl.replaceWith(slots[slotName]);
+      }
+    }
+
+    el.innerHTML = "";
+    const wrapper = document.createElement("div");
+    wrapper.style.display = "contents";
+    wrapper.__ctx = childCtx;
+    wrapper.appendChild(clone);
+    el.appendChild(wrapper);
+    processTree(wrapper);
+  },
+});
+
+registerDirective("call", {
+  priority: 20,
+  init(el, name, url) {
+    const ctx = findContext(el);
+    const method = el.getAttribute("method") || "get";
+    const asKey = el.getAttribute("as");
+    const intoStore = el.getAttribute("into");
+    const successTpl = el.getAttribute("success");
+    const errorTpl = el.getAttribute("error");
+    const thenExpr = el.getAttribute("then");
+    const confirmMsg = el.getAttribute("confirm");
+    const bodyAttr = el.getAttribute("body");
+
+    el.addEventListener("click", async (e) => {
+      e.preventDefault();
+      if (confirmMsg && !window.confirm(confirmMsg)) return;
+
+      const resolvedUrl = _interpolate(url, ctx);
+      try {
+        let reqBody = null;
+        if (bodyAttr) {
+          const interpolated = _interpolate(bodyAttr, ctx);
+          try {
+            reqBody = JSON.parse(interpolated);
+          } catch {
+            reqBody = interpolated;
+          }
+        }
+        const data = await _doFetch(resolvedUrl, method, reqBody, {}, el);
+        if (asKey) ctx.$set(asKey, data);
+        if (asKey && intoStore) {
+          if (!_stores[intoStore]) _stores[intoStore] = createContext({});
+          _stores[intoStore].$set(asKey, data);
+          _notifyStoreWatchers();
+        }
+        if (thenExpr) _execStatement(thenExpr, ctx, { result: data });
+        if (successTpl) {
+          const clone = _cloneTemplate(successTpl);
+          if (clone) {
+            const tplEl = document.getElementById(
+              successTpl.replace("#", ""),
+            );
+            const vn = tplEl?.getAttribute("var") || "result";
+            const childCtx = createContext({ [vn]: data }, ctx);
+            const target = el.closest("[route-view]") || el.parentElement;
+            const wrapper = document.createElement("div");
+            wrapper.style.display = "contents";
+            wrapper.__ctx = childCtx;
+            wrapper.appendChild(clone);
+            target.appendChild(wrapper);
+            processTree(wrapper);
+          }
+        }
+      } catch (err) {
+        if (errorTpl) {
+          const clone = _cloneTemplate(errorTpl);
+          if (clone) {
+            const tplEl = document.getElementById(errorTpl.replace("#", ""));
+            const vn = tplEl?.getAttribute("var") || "err";
+            const childCtx = createContext(
+              { [vn]: { message: err.message, status: err.status } },
+              ctx,
+            );
+            const target = el.parentElement;
+            const wrapper = document.createElement("div");
+            wrapper.style.display = "contents";
+            wrapper.__ctx = childCtx;
+            wrapper.appendChild(clone);
+            target.appendChild(wrapper);
+            processTree(wrapper);
+          }
+        }
+      }
+    });
+  },
+});

package/src/directives/state.js

@@ -0,0 +1,102 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  DIRECTIVES: state, store, computed, watch
+// ═══════════════════════════════════════════════════════════════════════
+
+import { _stores, _log } from "../globals.js";
+import { createContext } from "../context.js";
+import { evaluate, _execStatement } from "../evaluate.js";
+import { findContext } from "../dom.js";
+import { registerDirective } from "../registry.js";
+
+registerDirective("state", {
+  priority: 0,
+  init(el, name, value) {
+    const data = evaluate(value, createContext()) || {};
+    const parent = el.parentElement ? findContext(el.parentElement) : null;
+    const ctx = createContext(data, parent);
+    el.__ctx = ctx;
+
+    // Persistence
+    const persist = el.getAttribute("persist");
+    const persistKey = el.getAttribute("persist-key");
+    if (persist && persistKey) {
+      const store =
+        persist === "localStorage"
+          ? localStorage
+          : persist === "sessionStorage"
+            ? sessionStorage
+            : null;
+      if (store) {
+        try {
+          const saved = store.getItem("nojs_state_" + persistKey);
+          if (saved) {
+            const parsed = JSON.parse(saved);
+            for (const [k, v] of Object.entries(parsed)) ctx.$set(k, v);
+          }
+        } catch {
+          /* ignore */
+        }
+        ctx.$watch(() => {
+          try {
+            store.setItem(
+              "nojs_state_" + persistKey,
+              JSON.stringify(ctx.__raw),
+            );
+          } catch {
+            /* ignore */
+          }
+        });
+      }
+    }
+
+    _log("state", data);
+  },
+});
+
+registerDirective("store", {
+  priority: 0,
+  init(el, name, storeName) {
+    const valueAttr = el.getAttribute("value");
+    if (!storeName) return;
+    if (!_stores[storeName]) {
+      const data = valueAttr
+        ? evaluate(valueAttr, createContext()) || {}
+        : {};
+      _stores[storeName] = createContext(data);
+    }
+    _log("store", storeName);
+  },
+});
+
+registerDirective("computed", {
+  priority: 2,
+  init(el, name, computedName) {
+    const expr = el.getAttribute("expr");
+    if (!computedName || !expr) return;
+    const ctx = findContext(el);
+    function update() {
+      const val = evaluate(expr, ctx);
+      ctx.$set(computedName, val);
+    }
+    ctx.$watch(update);
+    update();
+  },
+});
+
+registerDirective("watch", {
+  priority: 2,
+  init(el, name, watchExpr) {
+    const ctx = findContext(el);
+    const onChange = el.getAttribute("on:change");
+    let lastVal = evaluate(watchExpr, ctx);
+    ctx.$watch(() => {
+      const newVal = evaluate(watchExpr, ctx);
+      if (newVal !== lastVal) {
+        const oldVal = lastVal;
+        lastVal = newVal;
+        if (onChange)
+          _execStatement(onChange, ctx, { $old: oldVal, $new: newVal });
+      }
+    });
+  },
+});

package/src/directives/styling.js

@@ -0,0 +1,88 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  DIRECTIVES: class-*, style-*
+// ═══════════════════════════════════════════════════════════════════════
+
+import { evaluate } from "../evaluate.js";
+import { findContext } from "../dom.js";
+import { registerDirective } from "../registry.js";
+
+registerDirective("class-*", {
+  priority: 20,
+  init(el, name, expr) {
+    const suffix = name.replace("class-", "");
+    const ctx = findContext(el);
+
+    // class-map="{ active: x, bold: y }"
+    if (suffix === "map") {
+      function update() {
+        const obj = evaluate(expr, ctx);
+        if (obj && typeof obj === "object") {
+          for (const [cls, cond] of Object.entries(obj)) {
+            el.classList.toggle(cls, !!cond);
+          }
+        }
+      }
+      ctx.$watch(update);
+      update();
+      return;
+    }
+
+    // class-list="['a', condition ? 'b' : 'c']"
+    if (suffix === "list") {
+      let prevClasses = [];
+      function update() {
+        const arr = evaluate(expr, ctx);
+        if (Array.isArray(arr)) {
+          prevClasses.forEach((cls) => {
+            if (cls) el.classList.remove(cls);
+          });
+          const next = arr.filter(Boolean);
+          next.forEach((cls) => el.classList.add(cls));
+          prevClasses = next;
+        }
+      }
+      ctx.$watch(update);
+      update();
+      return;
+    }
+
+    // class-{name}="expr"
+    function update() {
+      el.classList.toggle(suffix, !!evaluate(expr, ctx));
+    }
+    ctx.$watch(update);
+    update();
+  },
+});
+
+registerDirective("style-*", {
+  priority: 20,
+  init(el, name, expr) {
+    const suffix = name.replace("style-", "");
+    const ctx = findContext(el);
+
+    // style-map="{ color: x, fontSize: y }"
+    if (suffix === "map") {
+      function update() {
+        const obj = evaluate(expr, ctx);
+        if (obj && typeof obj === "object") {
+          for (const [prop, val] of Object.entries(obj)) {
+            el.style[prop] = val ?? "";
+          }
+        }
+      }
+      ctx.$watch(update);
+      update();
+      return;
+    }
+
+    // style-{property}="expr" (e.g. style-color, style-font-size)
+    const cssProp = suffix.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+    function update() {
+      const val = evaluate(expr, ctx);
+      el.style[cssProp] = val != null ? String(val) : "";
+    }
+    ctx.$watch(update);
+    update();
+  },
+});

package/src/directives/validation.js

@@ -0,0 +1,216 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  DIRECTIVES: validate, error-boundary
+//  HELPER: _validateField
+// ═══════════════════════════════════════════════════════════════════════
+
+import { _validators } from "../globals.js";
+import { createContext } from "../context.js";
+import { findContext, _cloneTemplate } from "../dom.js";
+import { registerDirective, processTree } from "../registry.js";
+
+function _validateField(value, rules, allValues) {
+  const ruleList = rules.split("|").map((r) => r.trim());
+  for (const rule of ruleList) {
+    const [name, ...args] = rule.split(":");
+    const fn = _validators[name];
+    if (fn) {
+      const result = fn(value, ...args, allValues);
+      if (result !== true && result) return result;
+    } else {
+      // Built-in validators
+      switch (name) {
+        case "email":
+          if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
+            return "Invalid email";
+          break;
+        case "url":
+          try {
+            new URL(value);
+          } catch {
+            return "Invalid URL";
+          }
+          break;
+        case "min":
+          if (Number(value) < Number(args[0]))
+            return `Minimum value is ${args[0]}`;
+          break;
+        case "max":
+          if (Number(value) > Number(args[0]))
+            return `Maximum value is ${args[0]}`;
+          break;
+        case "between": {
+          const n = Number(value);
+          if (n < Number(args[0]) || n > Number(args[1]))
+            return `Must be between ${args[0]} and ${args[1]}`;
+          break;
+        }
+        case "match":
+          if (value !== allValues[args[0]]) return `Must match ${args[0]}`;
+          break;
+        case "phone":
+          if (!/^[\d\s\-+()]{7,15}$/.test(value))
+            return "Invalid phone number";
+          break;
+        case "cpf":
+          if (!/^\d{3}\.?\d{3}\.?\d{3}-?\d{2}$/.test(value))
+            return "Invalid CPF";
+          break;
+        case "cnpj":
+          if (!/^\d{2}\.?\d{3}\.?\d{3}\/?\d{4}-?\d{2}$/.test(value))
+            return "Invalid CNPJ";
+          break;
+        case "creditcard":
+          if (!/^\d{13,19}$/.test(value.replace(/\s|-/g, "")))
+            return "Invalid card number";
+          break;
+        case "custom":
+          if (args[0] && _validators[args[0]]) {
+            const result = _validators[args[0]](value, allValues);
+            if (result !== true && result) return result;
+          }
+          break;
+      }
+    }
+  }
+  return null;
+}
+
+registerDirective("validate", {
+  priority: 30,
+  init(el, name, rules) {
+    const ctx = findContext(el);
+
+    // If on a form, set up form-level validation
+    if (el.tagName === "FORM") {
+      const formCtx = {
+        valid: false,
+        dirty: false,
+        touched: false,
+        submitting: false,
+        errors: {},
+        values: {},
+        reset: () => {
+          el.reset();
+          checkValidity();
+        },
+      };
+      ctx.$set("$form", formCtx);
+
+      function checkValidity() {
+        const errors = {};
+        const values = {};
+        let valid = true;
+
+        for (const field of el.querySelectorAll("input, textarea, select")) {
+          if (!field.name) continue;
+          values[field.name] = field.value;
+
+          const fieldRules = field.getAttribute("validate");
+          if (fieldRules) {
+            const err = _validateField(field.value, fieldRules, values);
+            if (err) {
+              errors[field.name] = err;
+              valid = false;
+            }
+          }
+
+          if (!field.checkValidity()) {
+            errors[field.name] =
+              errors[field.name] || field.validationMessage;
+            valid = false;
+          }
+        }
+
+        formCtx.valid = valid;
+        formCtx.errors = errors;
+        formCtx.values = values;
+        ctx.$set("$form", { ...formCtx });
+      }
+
+      el.addEventListener("input", () => {
+        formCtx.dirty = true;
+        checkValidity();
+      });
+      el.addEventListener("focusout", () => {
+        formCtx.touched = true;
+        checkValidity();
+      });
+      el.addEventListener("submit", () => {
+        formCtx.submitting = true;
+        ctx.$set("$form", { ...formCtx });
+        requestAnimationFrame(() => {
+          formCtx.submitting = false;
+          ctx.$set("$form", { ...formCtx });
+        });
+      });
+
+      // Initial check
+      requestAnimationFrame(checkValidity);
+      return;
+    }
+
+    // Field-level validation
+    if (
+      rules &&
+      (el.tagName === "INPUT" ||
+        el.tagName === "TEXTAREA" ||
+        el.tagName === "SELECT")
+    ) {
+      const errorTpl = el.getAttribute("error");
+      el.addEventListener("input", () => {
+        const err = _validateField(el.value, rules, {});
+        if (err && errorTpl) {
+          // Show error
+          let errorEl = el.nextElementSibling?.__validationError
+            ? el.nextElementSibling
+            : null;
+          if (!errorEl) {
+            errorEl = document.createElement("div");
+            errorEl.__validationError = true;
+            errorEl.style.display = "contents";
+            el.parentNode.insertBefore(errorEl, el.nextSibling);
+          }
+          const clone = _cloneTemplate(errorTpl);
+          if (clone) {
+            const childCtx = createContext({ err: { message: err } }, ctx);
+            errorEl.innerHTML = "";
+            errorEl.__ctx = childCtx;
+            errorEl.appendChild(clone);
+            processTree(errorEl);
+          }
+        } else {
+          const errorEl = el.nextElementSibling?.__validationError
+            ? el.nextElementSibling
+            : null;
+          if (errorEl) errorEl.innerHTML = "";
+        }
+      });
+    }
+  },
+});
+
+registerDirective("error-boundary", {
+  priority: 1,
+  init(el, name, fallbackTpl) {
+    const ctx = findContext(el);
+
+    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);
+        }
+      }
+    });
+  },
+});