@daz4126/helium 0.10.0 → 0.10.2

package/helium.js

@@ -1,6 +1,7 @@
 export default function helium(data = {}) {
+  const he = (name,...args) => args.map(b => `|@${b}|data-he-${b}|`).join``.includes(`|${name}|`)
   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");
@@ -19,11 +20,11 @@ export default function helium(data = {}) {
     fetch(url, {
       method,
       headers,
-      body: method === "GET" ? null : JSON.stringify(opts),
+      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(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;
@@ -62,15 +51,10 @@ export default function helium(data = {}) {
     const result = fn($, state, event, elCtx, html, get, post, put, patch, del, ...Object.values(data), ...[...refs.values()]);
     if (prop == "innerHTML") {
       isUpdatingDOM = true;
-      el.innerHTML = result;
+      el.innerHTML = Array.isArray(result) ? result.join`` : 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,48 @@ 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.nodeType == 1) {
+      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(name,"text","html","bind")) {
           try {
             new Function(`let ${value}=1`);
-            state[value] ||= ["@bind","data-he-bind"].includes(name) ? el.value : el.textContent;
+            const val = he(name,"bind") ? el.type == "checkbox" ? el.checked : el.value : el.textContent;
+            state[value] ||= Number.isNaN(Number(val)) ? val : Number(val);
           } catch (e) {}
         }
       }
@@ -163,21 +132,18 @@ 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 (["@text","data-he-text","@html","data-he-html"].includes(name)) {
+        if (he(name,"ref")) refs.set("$" + value, el);
+        if (he(name,"text","html")) {
           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(name,"text") ? "textContent" : "innerHTML", fn };
+          trackDependencies(fn, el).forEach(dep => addBinding(dep, b));
         }
 
-        if (["@bind", "data-he-bind"].includes(name)) {
+        if (he(name,"bind")) {
           const inputType = el.type?.toLowerCase();
-          const isCheckbox = inputType === "checkbox";
-          const isRadio = inputType === "radio";
-          const event = (isCheckbox || isRadio || el.tagName === "SELECT") ? "change" : "input";
+          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;
@@ -185,35 +151,31 @@ 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(name,"hidden","visible")) {
+          const fn = compile(`${he(name,"hidden") ? "!" : ""}!(${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(name,"init")) {
           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;
-          
           let debounceDelay = 0;
           const debounceMod = mods.find(m => m.startsWith("debounce"));
           if (debounceMod) {
@@ -230,7 +192,7 @@ export default function helium(data = {}) {
             if (["keydown","keyup","keypress"].includes(eventName)) {
               const last = mods[mods.length - 1];
               if (last) {
-                let keyName = e.key === " " ? "Space" : e.key === "Escape" ? "Esc" : e.key;
+                let keyName = e.key == " " ? "Space" : e.key == "Escape" ? "Esc" : e.key;
                 if (keyName.toLowerCase() !== last.toLowerCase()) return;
               }
             }
@@ -263,10 +225,10 @@ export default function helium(data = {}) {
     if (isUpdatingDOM) return;
     for (const m of mutations) {
       for (const node of m.removedNodes) {
-        if (node.nodeType === 1) cleanup(node);
+        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.2",
   "main": "helium.js",
   "type": "module",
   "scripts": {