@daz4126/helium 0.10.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, listeners, proxyCache] = [new Map(), new Map(), new WeakMap(), new WeakMap()];
+  const [bindings, refs, listeners] = [new Map(), new Map(), new WeakMap()];
   const $ = (s) => document.querySelector(s);
   const html = (s) => {
     const t = document.createElement("template");
@@ -23,7 +24,7 @@ export default function helium(data = {}) {
       credentials: "same-origin"
     })
       .then(r => r.headers.get("content-type")?.includes("application/json") ? r.json() : r.text())
-      .then(d => state[target] = d)
+      .then(d => {if(target) state[target] = d})
       .catch(e => console.error("AJAX error:", e.message));
   };
 
@@ -31,28 +32,16 @@ export default function helium(data = {}) {
   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);
-      if (typeof val === "object" && val !== null) {
-        if (!proxyCache.has(val)) proxyCache.set(val, new Proxy(val, handler));
-        return proxyCache.get(val);
-      }
-      return 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;
@@ -65,12 +54,7 @@ export default function helium(data = {}) {
       el.innerHTML = result;
       isUpdatingDOM = false;
     } else if(prop == "class" && typeof result == "object"){ 
-      const [add, remove] = [[], []];
-      for (const [key, value] of Object.entries(result)) {
-        (value ? add : remove).push(key);
-      }
-      el.classList.add(...add);
-      el.classList.remove(...remove);
+      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) {
@@ -91,63 +75,47 @@ export default function helium(data = {}) {
     }
   };
 
-  // Track which state properties an expression depends on
-  const trackDependencies = (fn, el) => {
+const trackDependencies = (fn, el) => {
     const accessed = new Set();
-    const trackingHandler = {
-      get(target, prop, receiver) {
-        if (prop !== Symbol.toStringTag && typeof prop === 'string') {
-          accessed.add(prop);
-        }
-        const val = Reflect.get(target, prop, receiver);
-        return typeof val === "object" && val !== null ? new Proxy(val, trackingHandler) : val;
+    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;
       }
-    };
-    
-    const trackingProxy = new Proxy(data, trackingHandler);
-    
-    try {
-      fn($, trackingProxy, {}, el, html, get, post, put, patch, del, ...Object.values(data), ...[...refs.values()]);
-    } catch (e) {
-      // Expression might fail on first run, that's ok
-    }
+    });
     
+    try { fn.call(null, $, trackProxy, refs); } catch {}
     return [...accessed];
   };
 
-  const cleanup = (el) => {
-    const clean = (e) => {
-      if (listeners.has(e)) {
-        listeners.get(e).forEach(({receiver, eventName, handler}) => {
-          receiver.removeEventListener(eventName, handler);
-        });
-        listeners.delete(e);
-      }
-    };
-    clean(el);
-    el.querySelectorAll('*').forEach(clean);
+  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) {
-      if (element.hasAttribute?.("data-helium-processed")) return newBindings;
-      element.setAttribute("data-helium-processed", "");
+      if (element.hasAttribute?.("data-he-p")) return newBindings;
+      element.setAttribute("data-he-p", "");
     }
 
     const heElements = [element, ...element.querySelectorAll("*")].filter(el =>
-      Array.from(el.attributes).some(attr => 
-        attr.name.startsWith("@") || attr.name.startsWith(":") || attr.name.startsWith("data-he-")
+      Array.from(el.attributes).some(attr => /^(@|:|data-he-)/.test(attr.name)
       )
     );
 
     // Seed default state values
     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;
+            state[value] ||= he("bind").includes(name) ? el.type == "checkbox" ? el.checked : el.value : el.textContent;
           } catch (e) {}
         }
       }
@@ -163,17 +131,15 @@ export default function helium(data = {}) {
       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 (he("ref").includes(name)) refs.set("$" + value, el);
 
-        if (["@text","data-he-text","@html","data-he-html"].includes(name)) {
+        if (he("text","html").includes(name)) {
           const fn = compile(value, true);
-          const deps = trackDependencies(fn, el);
-          const b = { el, prop: ["@text","data-he-text"].includes(name) ? "textContent" : "innerHTML", expr: value, fn };
-          
-          deps.forEach(dep => addBinding(dep, b));
+          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)) {
+        if (he("bind").includes(name)) {
           const inputType = el.type?.toLowerCase();
           const isCheckbox = inputType === "checkbox";
           const isRadio = inputType === "radio";
@@ -185,30 +151,27 @@ export default function helium(data = {}) {
           if (!listeners.has(el)) listeners.set(el, []);
           listeners.get(el).push({receiver: el, eventName: event, handler: inputHandler});
           
-          addBinding(value, { el, prop, expr: value, fn: compile(value, true) });
+          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)) {
-          const fn = compile(`${["@hidden","data-he-hidden"].includes(name) ? "!" : ""}!(${value})`, true);
-          const deps = trackDependencies(fn, el);
-          const b = { el, prop: "hidden", expr: value, fn };
+        if (he("hidden","visible").includes(name)) {
+          const fn = compile(`${he("hidden").includes(name) ? "!" : ""}!(${value})`, true);
+          const b = { el, prop: "hidden", fn };
           
-          deps.forEach(dep => addBinding(dep, b));
+          trackDependencies(fn, el).forEach(dep => addBinding(dep, b));
         }
 
         if (name.startsWith(":")) {
           const fn = compile(value, true);
-          const deps = trackDependencies(fn, el);
-          const b = { el, prop: name.slice(1), expr: value, fn };
-          
-          deps.forEach(dep => addBinding(dep, b));
+          const b = { el, prop: name.slice(1), fn };
+          trackDependencies(fn, el).forEach(dep => addBinding(dep, b));
         }
 
-        if (["@init","data-he-init"].includes(name)) {
+        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(".");
@@ -266,7 +229,7 @@ export default function helium(data = {}) {
         if (node.nodeType === 1) cleanup(node);
       }
       for (const node of m.addedNodes) {
-        if (node.nodeType === 1 && !node.hasAttribute("data-helium-processed")) {
+        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.10.0",
+  "version": "0.10.1",
   "main": "helium.js",
   "type": "module",
   "scripts": {