@daz4126/helium 0.9.0 → 0.10.1

package/helium.js

@@ -1,6 +1,7 @@
 export default function helium(data = {}) {
+  const he = (...args) => args.flatMap(b => [`@${b}`,`data-he-${b}`])
   const root = document.querySelector("[\\@helium]") || document.querySelector("[data-helium]") || document.body;
-  const [bindings, refs] = [new Map(), new Map()];
+  const [bindings, refs, listeners] = [new Map(), new Map(), new WeakMap()];
   const $ = (s) => document.querySelector(s);
   const html = (s) => {
     const t = document.createElement("template");
@@ -11,11 +12,10 @@ export default function helium(data = {}) {
   const ajax = (url, method, target, opts = {}) => {  
     const headers = {
       "Content-Type": "application/json",
-      "Accept": "text/vnd.turbo-stream.html, application/json, application/vnd.api+json, text/html, */*"
+      "Accept": "text/vnd.turbo-stream.html,application/json,text/html"
     };
-    
-    // Only add CSRF token if it exists
-    if (document.querySelector('meta[name="csrf-token"]')?.content) headers["X-CSRF-Token"] = csrfToken;
+    const token = document.querySelector('meta[name="csrf-token"]')?.content;
+    if (token) headers["X-CSRF-Token"] = token;
     
     fetch(url, {
       method,
@@ -23,35 +23,25 @@ export default function helium(data = {}) {
       body: method === "GET" ? null : JSON.stringify(opts),
       credentials: "same-origin"
     })
-      .then(r =>
-        r.headers.get("content-type")?.includes("application/json") ? r.json() : r.text()
-      )
-      .then(d => state[target] = d)
+      .then(r => r.headers.get("content-type")?.includes("application/json") ? r.json() : r.text())
+      .then(d => {if(target) state[target] = d})
       .catch(e => console.error("AJAX error:", e.message));
   };
 
   const get = (u,t) => ajax(u,"GET",t);
-  const [post, put, patch, del] = ["POST","PUT","PATCH","DELETE"].map((m) => (u, d, t) => ajax(u, m, t, d));
+  const [post, put, patch, del] = ["POST","PUT","PATCH","DELETE"].map(m => (u, d, t) => ajax(u, m, t, d));
   
   const handler = {
-    get(target, prop, receiver) {
-      const val = Reflect.get(target, prop, receiver);
-      return typeof val === "object" && val !== null ? new Proxy(val, handler) : val;
-    },
-    set(target, prop, val, receiver) {
-      const result = Reflect.set(target, prop, val, receiver);
-      if (target === data && bindings.has(prop)) {
-        bindings.get(prop).forEach(applyBinding);
-      } else {
-        for (const [key, bound] of bindings.entries()) {
-          if (key === Object.keys(data).find(k => data[k] === target)) {
-            bound.forEach(applyBinding);
-          }
-        }
+      get(target, prop, receiver) {
+        const val = Reflect.get(target, prop, receiver);
+        return typeof val === "object" && val !== null ? new Proxy(val, handler) : val;
+      },
+      set(target, prop, val) {
+        const result = Reflect.set(target, prop, val);
+        bindings.get(prop)?.forEach(applyBinding);
+        return result;
       }
-      return result;
-    }
-  };
+    };
 
   const state = new Proxy(data, handler);
   let isUpdatingDOM = false;
@@ -63,120 +53,138 @@ export default function helium(data = {}) {
       isUpdatingDOM = true;
       el.innerHTML = result;
       isUpdatingDOM = false;
-    } else if(prop == "class" && typeof(result) == "object"){ 
-      const add = [];
-      const remove = [];
-
-      for (const [key, value] of Object.entries(result)) {
-        (value ? add : remove).push(key);
-      }
-
-      el.classList.add(...add);
-      el.classList.remove(...remove);
-    } else if(prop == "style" && typeof(result) == "object"){
-el.style = Object.entries(result).map(([key, value]) => value ? `${key}: ${value};` : "").join``
-      } else if (prop in el) {
-      el[prop] = result;
+    } else if(prop == "class" && typeof result == "object"){ 
+      Object.entries(result).forEach(([k, v]) => el.classList.toggle(k, v));
+    } else if(prop == "style" && typeof result == "object"){
+      el.style = Object.entries(result).filter(([k, v]) => v).map(([k, v]) => `${k}:${v}`).join(";");
+    } else if (prop in el) {
+      if(el.type == "radio") el.checked = el.value == result;
+      else el[prop] = result;
     } else {
       el.setAttribute(prop, result);
     }
   }
 
-  function compileExpression(expr, withReturn = false) {
+  const compile = (expr, withReturn = false) => {
     try {
       return new Function("$", "$data", "$event", "$el", "$html", "$get", "$post", "$put", "$patch", "$delete", 
         ...Object.keys(data), ...[...refs.keys()],
-        `with($data) { ${withReturn ? "return" : ""} (${expr.trim()}) }`);
+        `with($data){${withReturn ? "return" : ""}(${expr.trim()})}`);
     } catch (err) {
       return () => expr;
     }
-  }
+  };
+
+const trackDependencies = (fn, el) => {
+    const accessed = new Set();
+    const trackProxy = new Proxy(data, {
+      get(target, prop) {
+        if (typeof prop === 'string') accessed.add(prop);
+        const val = target[prop];
+        return typeof val === "object" && val !== null ? new Proxy(val, this) : val;
+      }
+    });
+    
+    try { fn.call(null, $, trackProxy, refs); } catch {}
+    return [...accessed];
+  };
+
+  const cleanup = el => {
+    [el, ...el.querySelectorAll('*')].forEach(e => {
+      listeners.get(e)?.forEach(({receiver, eventName, handler}) => 
+        receiver.removeEventListener(eventName, handler));
+      listeners.delete(e);
+    });
+  };
 
   function processElements(element) {
     const newBindings = [];
-    if (element.nodeType === 1 && element.hasAttribute?.("data-helium-processed")) return newBindings;
-    if (element.nodeType === 1 && element.setAttribute) element.setAttribute("data-helium-processed", "");
-
-    const heElements = [element, ...Array.from(element.querySelectorAll("*")).filter((el) =>
-      Array.from(el.attributes).some((attr) => attr.name.startsWith("data-he-")))];
+    if (element.nodeType === 1) {
+      if (element.hasAttribute?.("data-he-p")) return newBindings;
+      element.setAttribute("data-he-p", "");
+    }
 
-    const xpath = document.evaluate(".//*[@*[starts-with(name(), '@') or starts-with(name(), ':')]]",
-      element, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
-    for (let i = 0; i < xpath.snapshotLength; i++) heElements.push(xpath.snapshotItem(i));
+    const heElements = [element, ...element.querySelectorAll("*")].filter(el =>
+      Array.from(el.attributes).some(attr => /^(@|:|data-he-)/.test(attr.name)
+      )
+    );
 
     // Seed default state values
-    heElements.forEach((el) => {
+    heElements.forEach(el => {
       for (const { name, value } of el.attributes || []) {
-        if (["@html","data-he-html","@text","data-he-text","@bind","data-he-bind"].includes(name)) {
+        if (he("text","html","bind").includes(name)) {
           try {
-            new Function(`let ${value} = 1`);
-            state[value] ||= ["@bind","data-he-bind"].includes(name) ? el.value : el.textContent;
+            new Function(`let ${value}=1`);
+            state[value] ||= he("bind").includes(name) ? el.type == "checkbox" ? el.checked : el.value : el.textContent;
           } catch (e) {}
         }
       }
     });
 
+    const addBinding = (val, b) => {
+      bindings.set(val, [...(bindings.get(val) || []), b]);
+      newBindings.push(b);
+    };
 
     // Register bindings
-    heElements.forEach((el) => {
-       const execFn = (v) => compileExpression(v, true)($, state, {}, el, html, get, post, put, patch, del, ...Object.values(data), ...[...refs.values()]);
+    heElements.forEach(el => {
+      const execFn = v => compile(v, true)($, state, {}, el, html, get, post, put, patch, del, ...Object.values(data), ...[...refs.values()]);
       for (const { name, value } of el.attributes || []) {
         if (["@data","data-he"].includes(name)) Object.assign(state, execFn(value));
-        if (["@ref","data-he-ref"].includes(name)) refs.set("$" + value, el);
-
-        if (["@text","data-he-text","@html","data-he-html"].includes(name)) {
-          Object.keys(state).filter((k) => value.includes(k)).forEach((val) => {
-            const b = { el, prop: ["@text","data-he-text"].includes(name) ? "textContent" : "innerHTML", expr: value, fn: compileExpression(value, true) };
-            bindings.set(val, [...(bindings.get(val) || []), b]);
-            newBindings.push(b);
-          });
+        if (he("ref").includes(name)) refs.set("$" + value, el);
+
+        if (he("text","html").includes(name)) {
+          const fn = compile(value, true);
+          const b = { el, prop: he("text").includes(name) ? "textContent" : "innerHTML", fn };
+          trackDependencies(fn, el).forEach(dep => addBinding(dep, b));
         }
 
-        if (["@bind","data-he-bind"].includes(name)) {
-          el.addEventListener("input", (e) => (state[value] = e.target.value));
-          const b = { el, prop: "value", expr: value, fn: compileExpression(value, true) };
-          bindings.set(value, [...(bindings.get(value) || []), b]);
-          newBindings.push(b);
-          el.value = state[value];
+        if (he("bind").includes(name)) {
+          const inputType = el.type?.toLowerCase();
+          const isCheckbox = inputType === "checkbox";
+          const isRadio = inputType === "radio";
+          const event = (isCheckbox || isRadio || el.tagName === "SELECT") ? "change" : "input";
+          const prop = isCheckbox ? "checked" : "value";
+          
+          const inputHandler = e => state[value] = isCheckbox ? e.target.checked : e.target.value;
+          el.addEventListener(event, inputHandler);
+          if (!listeners.has(el)) listeners.set(el, []);
+          listeners.get(el).push({receiver: el, eventName: event, handler: inputHandler});
+          
+          addBinding(value, { el, prop, fn: compile(value, true) });
+          
+          if (isCheckbox) el.checked = !!state[value];
+          else if (isRadio) el.checked = el.value == state[value];
+          else el.value = state[value] ?? "";
         }
 
-        if (["@hidden","@visible","data-he-hidden","data-he-visible"].includes(name)) {
-          Object.keys(state).filter((k) => value.includes(k)).forEach((val) => {
-            const b = { el, prop: "hidden", expr: value, fn: compileExpression(`${["@hidden","data-he-hidden"].includes(name) ? "!" : ""}!(${value})`, true) };
-            bindings.set(val, [...(bindings.get(val) || []), b]);
-            newBindings.push(b);
-          });
+        if (he("hidden","visible").includes(name)) {
+          const fn = compile(`${he("hidden").includes(name) ? "!" : ""}!(${value})`, true);
+          const b = { el, prop: "hidden", fn };
+          
+          trackDependencies(fn, el).forEach(dep => addBinding(dep, b));
         }
 
         if (name.startsWith(":")) {
-          Object.keys(state).filter((k) => value.includes(k)).forEach((val) => {
-            const b = { el, prop: name.split(":")[1], expr: value, fn: compileExpression(value, true) };
-            bindings.set(val, [...(bindings.get(val) || []), b]);
-            newBindings.push(b);
-          });
+          const fn = compile(value, true);
+          const b = { el, prop: name.slice(1), fn };
+          trackDependencies(fn, el).forEach(dep => addBinding(dep, b));
         }
 
-        if (["@init","data-he-init"].includes(name)) {
-          compileExpression(value, false)($, state, undefined, el, html, get, post, put, patch, del, ...Object.values(data), ...[...refs.values()]);
+        if (he("init").includes(name)) {
+          compile(value, false)($, state, undefined, el, html, get, post, put, patch, del, ...Object.values(data), ...[...refs.values()]);
         } else if (name.startsWith("@") || name.startsWith("data-he-on")) {
           const [eventName, ...mods] = name.slice(name.startsWith("@") ? 1 : 10).split(".");
           const receiver = mods.includes("outside") || mods.includes("document") ? document : el;
-          const debounce = (fn, delay) => {
-            let timeout;
-            return (...args) => {
-              clearTimeout(timeout);
-              timeout = setTimeout(() => fn(...args), delay);
-            };
-          };
-
+          
           let debounceDelay = 0;
-          const debounceMod = mods.find((m) => m.startsWith("debounce"));
+          const debounceMod = mods.find(m => m.startsWith("debounce"));
           if (debounceMod) {
             const time = debounceMod.split(":")[1];
             debounceDelay = time && !isNaN(time) ? Number(time) : 300;
           }
 
-          function _handler(e) {
+          const _handler = e => {
             if (mods.includes("prevent")) e.preventDefault();
             const keyMods = { shift: "shiftKey", ctrl: "ctrlKey", alt: "altKey", meta: "metaKey" };
             for (const [mod, prop] of Object.entries(keyMods)) {
@@ -190,13 +198,23 @@ el.style = Object.entries(result).map(([key, value]) => value ? `${key}: ${value
               }
             }
             if (!mods.includes("outside") || !el.contains(e.target)) {
-              compileExpression(value, false)($, state, e, el, html, get, post, put, patch, del, ...Object.values(data), ...[...refs.values()]);
+              compile(value, false)($, state, e, el, html, get, post, put, patch, del, ...Object.values(data), ...[...refs.values()]);
             }
             if (mods.includes("once")) el.removeEventListener(eventName, debouncedHandler);
-          }
+          };
+
+          const debounce = (fn, delay) => {
+            let timeout;
+            return (...args) => {
+              clearTimeout(timeout);
+              timeout = setTimeout(() => fn(...args), delay);
+            };
+          };
 
           const debouncedHandler = debounceDelay > 0 ? debounce(_handler, debounceDelay) : _handler;
           receiver.addEventListener(eventName, debouncedHandler);
+          if (!listeners.has(el)) listeners.set(el, []);
+          listeners.get(el).push({receiver, eventName, handler: debouncedHandler});
         }
       }
     });
@@ -204,13 +222,15 @@ el.style = Object.entries(result).map(([key, value]) => value ? `${key}: ${value
     return newBindings;
   }
 
-  const observer = new MutationObserver((mutations) => {
+  const observer = new MutationObserver(mutations => {
     if (isUpdatingDOM) return;
     for (const m of mutations) {
+      for (const node of m.removedNodes) {
+        if (node.nodeType === 1) cleanup(node);
+      }
       for (const node of m.addedNodes) {
-        if (node.nodeType === 1 && !node.hasAttribute("data-helium-processed")) {
-          const newly = processElements(node);
-          newly.forEach(applyBinding);
+        if (node.nodeType === 1 && !node.hasAttribute("data-he-p")) {
+          processElements(node).forEach(applyBinding);
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daz4126/helium",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "main": "helium.js",
   "type": "module",
   "scripts": {