@erickxavier/no-js 1.6.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erickxavier/no-js",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "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",

package/src/directives/refs.js

@@ -6,8 +6,12 @@ import {
   _refs,
   _stores,
   _notifyStoreWatchers,
+  _emitEvent,
+  _routerInstance,
+  _warn,
   _onDispose,
 } from "../globals.js";
+import { _devtoolsEmit } from "../devtools.js";
 import { createContext } from "../context.js";
 import { evaluate, _execStatement, _interpolate } from "../evaluate.js";
 import { _doFetch } from "../fetch.js";
@@ -75,19 +79,41 @@ registerDirective("call", {
   init(el, name, url) {
     const ctx = findContext(el);
     const method = el.getAttribute("method") || "get";
-    const asKey = el.getAttribute("as");
+    const asKey = el.getAttribute("as") || "data";
     const intoStore = el.getAttribute("into");
     const successTpl = el.getAttribute("success");
     const errorTpl = el.getAttribute("error");
+    const loadingTpl = el.getAttribute("loading");
     const thenExpr = el.getAttribute("then");
     const confirmMsg = el.getAttribute("confirm");
     const bodyAttr = el.getAttribute("body");
+    const redirectPath = el.getAttribute("redirect");
+    const headersAttr = el.getAttribute("headers");
+
+    const originalChildren = [...el.childNodes].map((n) => n.cloneNode(true));
+    let _activeAbort = null;
 
     el.addEventListener("click", async (e) => {
       e.preventDefault();
       if (confirmMsg && !window.confirm(confirmMsg)) return;
 
+      // SwitchMap: abort previous in-flight request
+      if (_activeAbort) _activeAbort.abort();
+      _activeAbort = new AbortController();
+
       const resolvedUrl = _interpolate(url, ctx);
+
+      // Show loading template
+      if (loadingTpl) {
+        const clone = _cloneTemplate(loadingTpl);
+        if (clone) {
+          el.innerHTML = "";
+          el.appendChild(clone);
+          processTree(el);
+          el.disabled = true;
+        }
+      }
+
       try {
         let reqBody = null;
         if (bodyAttr) {
@@ -98,9 +124,27 @@ registerDirective("call", {
             reqBody = interpolated;
           }
         }
-        const data = await _doFetch(resolvedUrl, method, reqBody, {}, el);
+
+        const extraHeaders = headersAttr ? JSON.parse(headersAttr) : {};
+        const data = await _doFetch(
+          resolvedUrl,
+          method,
+          reqBody,
+          extraHeaders,
+          el,
+          _activeAbort.signal,
+        );
+
+        // Restore original children
+        if (loadingTpl) {
+          el.innerHTML = "";
+          for (const child of originalChildren)
+            el.appendChild(child.cloneNode(true));
+          el.disabled = false;
+        }
+
         if (asKey) ctx.$set(asKey, data);
-        if (asKey && intoStore) {
+        if (intoStore) {
           if (!_stores[intoStore]) _stores[intoStore] = createContext({});
           _stores[intoStore].$set(asKey, data);
           _notifyStoreWatchers();
@@ -123,14 +167,37 @@ registerDirective("call", {
             processTree(wrapper);
           }
         }
+
+        if (redirectPath && _routerInstance)
+          _routerInstance.push(redirectPath);
+
+        _emitEvent("fetch:success", { url: resolvedUrl, data });
+        _devtoolsEmit("fetch:success", { method, url: resolvedUrl });
       } catch (err) {
+        // SwitchMap: silently ignore aborted requests
+        if (err.name === "AbortError") return;
+
+        _warn(`call ${method.toUpperCase()} ${resolvedUrl} failed:`, err.message);
+
+        // Restore original children
+        if (loadingTpl) {
+          el.innerHTML = "";
+          for (const child of originalChildren)
+            el.appendChild(child.cloneNode(true));
+          el.disabled = false;
+        }
+
+        _emitEvent("fetch:error", { url: resolvedUrl, error: err });
+        _emitEvent("error", { url: resolvedUrl, error: err });
+        _devtoolsEmit("fetch:error", { method, url: resolvedUrl, error: err.message });
+
         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 } },
+              { [vn]: { message: err.message, status: err.status, body: err.body } },
               ctx,
             );
             const target = el.parentElement;

package/src/directives/validation.js

@@ -1,13 +1,189 @@
 // ═══════════════════════════════════════════════════════════════════════
 //  DIRECTIVES: validate, error-boundary
-//  HELPER: _validateField
+//  HELPER: _validateField, _getValidityErrors, _resolveErrorMessage
 // ═══════════════════════════════════════════════════════════════════════
 
 import { _validators, _onDispose } from "../globals.js";
 import { createContext } from "../context.js";
 import { findContext, _cloneTemplate } from "../dom.js";
 import { registerDirective, processTree } from "../registry.js";
+import { evaluate } from "../evaluate.js";
 
+// ── ValidityState → rule name mapping ────────────────────────────────
+const _validityMap = [
+  ["valueMissing", "required"],
+  ["typeMismatch", null],       // resolved to input type at runtime
+  ["tooShort", "minlength"],
+  ["tooLong", "maxlength"],
+  ["patternMismatch", "pattern"],
+  ["rangeUnderflow", "min"],
+  ["rangeOverflow", "max"],
+  ["stepMismatch", "step"],
+];
+
+// ── Priority order for error display ─────────────────────────────────
+const _rulePriority = [
+  "required", "email", "url", "number", "date", "time",
+  "datetime-local", "month", "week", "tel",
+  "minlength", "maxlength", "pattern", "min", "max", "step",
+];
+
+function _getFieldType(field) {
+  return (field.getAttribute("type") || "text").toLowerCase();
+}
+
+// ── Get all failing rules from ValidityState + NoJS validators ───────
+function _getValidityErrors(field, allValues) {
+  const errors = [];
+  const seenRules = new Set();
+
+  // First, check NoJS-specific validators from validate="" attribute
+  // (these take priority over native ValidityState messages)
+  const rules = field.getAttribute("validate");
+  if (rules) {
+    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(field.value, ...args, allValues);
+        if (result !== true && result) {
+          errors.push({ rule: name, message: result });
+          seenRules.add(name);
+        }
+      } else {
+        // Built-in NoJS validators (backward compat + NoJS-only)
+        const value = field.value;
+        let msg = null;
+        switch (name) {
+          case "required":
+            if (value == null || String(value).trim() === "") msg = "Required";
+            break;
+          case "email":
+            if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) msg = "Invalid email";
+            break;
+          case "url":
+            try { new URL(value); } catch { msg = "Invalid URL"; }
+            break;
+          case "min":
+            if (Number(value) < Number(args[0])) msg = `Minimum value is ${args[0]}`;
+            break;
+          case "max":
+            if (Number(value) > Number(args[0])) msg = `Maximum value is ${args[0]}`;
+            break;
+          case "custom":
+            if (args[0] && _validators[args[0]]) {
+              const result = _validators[args[0]](value, allValues);
+              if (result !== true && result) msg = result;
+            }
+            break;
+        }
+        if (msg) {
+          errors.push({ rule: name, message: msg });
+          seenRules.add(name);
+        }
+      }
+    }
+  }
+
+  // Then, check native ValidityState (skip rules already covered by NoJS validators)
+  const validity = field.validity;
+  if (validity && !validity.valid) {
+    for (const [prop, ruleName] of _validityMap) {
+      if (validity[prop]) {
+        const name = ruleName || _getFieldType(field);
+        if (!seenRules.has(name)) {
+          errors.push({ rule: name, message: field.validationMessage });
+          seenRules.add(name);
+        }
+      }
+    }
+  }
+
+  return errors;
+}
+
+// ── Resolve error message: error-{rule} attr → error attr → default ──
+function _resolveErrorMessage(field, ruleName, defaultMsg) {
+  const perRule = field.getAttribute(`error-${ruleName}`);
+  if (perRule) return perRule;
+  const generic = field.getAttribute("error");
+  if (generic && !generic.startsWith("#")) return generic;
+  return defaultMsg;
+}
+
+// ── Pick the highest-priority error from a list ──────────────────────
+function _pickError(errors, field) {
+  if (!errors.length) return null;
+
+  // Sort by priority
+  const sorted = [...errors].sort((a, b) => {
+    const ai = _rulePriority.indexOf(a.rule);
+    const bi = _rulePriority.indexOf(b.rule);
+    return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi);
+  });
+
+  const top = sorted[0];
+  return {
+    rule: top.rule,
+    message: _resolveErrorMessage(field, top.rule, top.message),
+  };
+}
+
+// ── Render template reference for error ──────────────────────────────
+function _renderErrorTemplate(selector, errorMsg, ruleName, anchorEl, ctx) {
+  // Clean up previous render
+  _clearErrorTemplate(anchorEl);
+
+  const tpl = document.querySelector(selector);
+  if (!tpl) return;
+
+  const clone = tpl.content.cloneNode(true);
+  const wrapper = document.createElement("div");
+  wrapper.style.display = "contents";
+  wrapper.__errorTemplateFor = anchorEl;
+  const childCtx = createContext({ $error: errorMsg, $rule: ruleName }, ctx);
+  wrapper.__ctx = childCtx;
+  wrapper.appendChild(clone);
+
+  // Insert after the template element (in-place rendering)
+  tpl.parentNode.insertBefore(wrapper, tpl.nextSibling);
+  processTree(wrapper);
+}
+
+function _clearErrorTemplate(anchorEl) {
+  // Find and remove any previously rendered error template for this field
+  const existing = document.querySelector(`div[style="display: contents;"]`);
+  // Use a more targeted approach
+  const all = document.querySelectorAll('div[style="display: contents;"]');
+  for (const el of all) {
+    if (el.__errorTemplateFor === anchorEl) {
+      el.remove();
+    }
+  }
+}
+
+// ── Check if field should be validated (validate-if) ─────────────────
+function _shouldValidate(field, ctx) {
+  const expr = field.getAttribute("validate-if");
+  if (!expr) return true;
+  try {
+    return !!evaluate(expr, ctx);
+  } catch {
+    return true;
+  }
+}
+
+// ── Get validate-on triggers ─────────────────────────────────────────
+function _getValidationTriggers(field, form) {
+  const fieldAttr = field.getAttribute("validate-on");
+  if (fieldAttr) return fieldAttr.split(/\s+/);
+  const formAttr = form ? form.getAttribute("validate-on") : null;
+  if (formAttr) return formAttr.split(/\s+/);
+  return ["input", "focusout"];
+}
+
+// ── Backward-compat: old _validateField for field-level validation ───
 function _validateField(value, rules, allValues) {
   const ruleList = rules.split("|").map((r) => r.trim());
   for (const rule of ruleList) {
@@ -17,55 +193,21 @@ function _validateField(value, rules, allValues) {
       const result = fn(value, ...args, allValues);
       if (result !== true && result) return result;
     } else {
-      // Built-in validators
       switch (name) {
         case "required":
-          if (value == null || String(value).trim() === "")
-            return "Required";
+          if (value == null || String(value).trim() === "") return "Required";
           break;
         case "email":
-          if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
-            return "Invalid email";
+          if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return "Invalid email";
           break;
         case "url":
-          try {
-            new URL(value);
-          } catch {
-            return "Invalid URL";
-          }
+          try { new URL(value); } catch { return "Invalid URL"; }
           break;
         case "min":
-          if (Number(value) < Number(args[0]))
-            return `Minimum value is ${args[0]}`;
+          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";
+          if (Number(value) > Number(args[0])) return `Maximum value is ${args[0]}`;
           break;
         case "custom":
           if (args[0] && _validators[args[0]]) {
@@ -84,65 +226,259 @@ registerDirective("validate", {
   init(el, name, rules) {
     const ctx = findContext(el);
 
-    // If on a form, set up form-level validation
+    // ═════════════════════════════════════════════════════
+    //  FORM-LEVEL VALIDATION
+    // ═════════════════════════════════════════════════════
     if (el.tagName === "FORM") {
+      // Prevent native browser validation popups
+      el.setAttribute("novalidate", "");
+
+      const errorClassAttr = el.getAttribute("error-class");
+      const touchedFields = new Set();
+      const dirtyFields = new Set();
+      const pendingValidators = new Map();
+
       const formCtx = {
         valid: false,
         dirty: false,
         touched: false,
         submitting: false,
+        pending: false,
         errors: {},
         values: {},
+        firstError: null,
+        errorCount: 0,
+        fields: {},
         reset: () => {
           formCtx.dirty = false;
           formCtx.touched = false;
+          formCtx.pending = false;
+          touchedFields.clear();
+          dirtyFields.clear();
           el.reset();
           checkValidity();
         },
       };
       ctx.$set("$form", formCtx);
 
+      // ── Collect all form fields ────────────────────────
+      function getFields() {
+        return el.querySelectorAll("input, textarea, select");
+      }
+
+      // ── Main validation check ──────────────────────────
       function checkValidity() {
         const errors = {};
         const values = {};
+        const fields = {};
         let valid = true;
+        let firstError = null;
+        let errorCount = 0;
+        let hasPending = false;
 
-        for (const field of el.querySelectorAll("input, textarea, select")) {
+        for (const field of getFields()) {
           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;
+
+          // Collect value
+          if (field.type === "checkbox") {
+            values[field.name] = field.checked;
+          } else if (field.type === "radio") {
+            if (field.checked) values[field.name] = field.value;
+            else if (!(field.name in values)) values[field.name] = "";
+          } else {
+            values[field.name] = field.value;
+          }
+        }
+
+        for (const field of getFields()) {
+          if (!field.name) continue;
+
+          const fieldTouched = touchedFields.has(field.name);
+          const fieldDirty = dirtyFields.has(field.name);
+
+          // Check validate-if
+          if (!_shouldValidate(field, ctx)) {
+            // Field excluded from validation
+            fields[field.name] = {
+              valid: true, dirty: fieldDirty, touched: fieldTouched,
+              error: null, value: values[field.name],
+            };
+            continue;
+          }
+
+          // Get all errors for this field
+          const fieldErrors = _getValidityErrors(field, values);
+          const topError = _pickError(fieldErrors, field);
+
+          const fieldValid = !topError;
+          const fieldInteracted = fieldTouched || fieldDirty;
+
+          // $form.valid reflects real state (keeps submit disabled)
+          if (!fieldValid) valid = false;
+
+          // $form.errors only shows errors for interacted fields
+          if (!fieldValid && fieldInteracted) {
+            errors[field.name] = topError.message;
+            errorCount++;
+            if (!firstError) firstError = topError.message;
+          }
+
+          // Per-field context ($field)
+          fields[field.name] = {
+            valid: fieldValid,
+            dirty: fieldDirty,
+            touched: fieldTouched,
+            error: topError ? topError.message : null,
+            value: values[field.name],
+          };
+
+          // error-class handling
+          const fieldErrorClass = field.getAttribute("error-class") || errorClassAttr;
+          if (fieldErrorClass) {
+            const classes = fieldErrorClass.split(/\s+/);
+            if (!fieldValid && fieldInteracted) {
+              field.classList.add(...classes);
+            } else {
+              field.classList.remove(...classes);
+            }
+          }
+
+          // error template references (error="#tpl" or error-{rule}="#tpl")
+          if (topError && fieldInteracted) {
+            const perRuleVal = field.getAttribute(`error-${topError.rule}`);
+            const genericVal = field.getAttribute("error");
+            const tplRef = (perRuleVal && perRuleVal.startsWith("#") ? perRuleVal : null) ||
+                           (genericVal && genericVal.startsWith("#") ? genericVal : null);
+            if (tplRef) {
+              _renderErrorTemplate(tplRef, topError.message, topError.rule, field, ctx);
+            } else {
+              _clearErrorTemplate(field);
             }
+          } else {
+            _clearErrorTemplate(field);
           }
 
-          if (!field.checkValidity()) {
-            errors[field.name] =
-              errors[field.name] || field.validationMessage;
-            valid = false;
+          // $field via as="" attribute
+          const asAttr = field.getAttribute("as");
+          if (asAttr) {
+            ctx.$set(asAttr, fields[field.name]);
           }
         }
 
+        // Check for pending async validators
+        if (pendingValidators.size > 0) hasPending = true;
+
         formCtx.valid = valid;
         formCtx.errors = errors;
         formCtx.values = values;
+        formCtx.fields = fields;
+        formCtx.firstError = firstError;
+        formCtx.errorCount = errorCount;
+        formCtx.pending = hasPending;
         ctx.$set("$form", { ...formCtx });
+
+        // Auto-disable submit buttons
+        _updateSubmitButtons(el, valid && !hasPending);
       }
 
-      el.addEventListener("input", () => {
-        formCtx.dirty = true;
-        checkValidity();
-      });
-      el.addEventListener("focusout", () => {
+      // ── Auto-disable submit buttons ────────────────────
+      function _updateSubmitButtons(form, isValid) {
+        const buttons = form.querySelectorAll(
+          'button:not([type="button"]), input[type="submit"]'
+        );
+        for (const btn of buttons) {
+          // Skip if user has explicit disabled expression
+          if (btn.hasAttribute("disabled") && btn.getAttribute("disabled") !== "") {
+            const val = btn.getAttribute("disabled");
+            // Only skip if it's a custom expression (not empty or "disabled")
+            if (val !== "disabled" && val !== "true" && val !== "false") continue;
+          }
+          btn.disabled = !isValid;
+          btn.__autoDisabled = true;
+        }
+      }
+
+      // ── Event binding with validate-on support ─────────
+      function bindFieldEvents(field) {
+        if (!field.name) return;
+        const triggers = _getValidationTriggers(field, el);
+
+        const handler = () => {
+          dirtyFields.add(field.name);
+          formCtx.dirty = true;
+          checkValidity();
+        };
+
+        const touchHandler = () => {
+          touchedFields.add(field.name);
+          formCtx.touched = true;
+          checkValidity();
+        };
+
+        if (triggers.includes("input")) {
+          field.addEventListener("input", handler);
+        } else {
+          // Always track dirty and re-validate on input for data accuracy
+          // (validate-on only affects visual feedback like error-class/templates)
+          field.addEventListener("input", () => {
+            dirtyFields.add(field.name);
+            formCtx.dirty = true;
+            checkValidity();
+          });
+        }
+        if (triggers.includes("blur") || triggers.includes("focusout")) {
+          field.addEventListener("focusout", (e) => {
+            touchHandler();
+            if (triggers.includes("blur")) handler();
+          });
+        } else {
+          // Always track touched on focusout
+          field.addEventListener("focusout", touchHandler);
+        }
+        if (triggers.includes("submit")) {
+          field.addEventListener("focusout", touchHandler);
+        }
+      }
+
+      // Default events if no validate-on (backward compat)
+      const hasValidateOn = el.hasAttribute("validate-on");
+      const hasFieldValidateOn = [...getFields()].some(f => f.hasAttribute("validate-on"));
+
+      if (!hasValidateOn && !hasFieldValidateOn) {
+        // Legacy behavior: form-level input, change, and focusout
+        const inputHandler = (e) => {
+          const target = e.target;
+          if (target && target.name) {
+            dirtyFields.add(target.name);
+          }
+          formCtx.dirty = true;
+          checkValidity();
+        };
+        el.addEventListener("input", inputHandler);
+        el.addEventListener("change", inputHandler);
+        el.addEventListener("focusout", (e) => {
+          if (e.target && e.target.name) {
+            touchedFields.add(e.target.name);
+          }
+          formCtx.touched = true;
+          checkValidity();
+        });
+      } else {
+        // Per-field event binding with validate-on
+        for (const field of getFields()) {
+          bindFieldEvents(field);
+        }
+      }
+
+      el.addEventListener("submit", (e) => {
+        // If validate-on="submit", run validation now
+        formCtx.submitting = true;
+        // Mark all fields as touched on submit
+        for (const field of getFields()) {
+          if (field.name) touchedFields.add(field.name);
+        }
         formCtx.touched = true;
         checkValidity();
-      });
-      el.addEventListener("submit", () => {
-        formCtx.submitting = true;
         ctx.$set("$form", { ...formCtx });
         requestAnimationFrame(() => {
           formCtx.submitting = false;
@@ -155,7 +491,9 @@ registerDirective("validate", {
       return;
     }
 
-    // Field-level validation
+    // ═════════════════════════════════════════════════════
+    //  FIELD-LEVEL VALIDATION (standalone, outside form)
+    // ═════════════════════════════════════════════════════
     if (
       rules &&
       (el.tagName === "INPUT" ||
@@ -166,7 +504,6 @@ registerDirective("validate", {
       el.addEventListener("input", () => {
         const err = _validateField(el.value, rules, {});
         if (err && errorTpl) {
-          // Show error
           let errorEl = el.nextElementSibling?.__validationError
             ? el.nextElementSibling
             : null;