@daz4126/helium 0.7.3 → 0.8.0

package/README.md

@@ -14,10 +14,10 @@ It's really simple to use - just sprinkle the magic @attributes into your HTML a
 
 [See more examples here](https://codepen.io/daz4126/pen/YPwwdBK)
 
-To use, just import from the CDN (no install or build step required!):
+To use, just import from the CDN in a script tag directly in your HTML page (no install or build step required!):
 
-```javascript
-import helium from "https://cdn.jsdelivr.net/gh/daz-codes/helium/helium.js"
+```html
+<script type="module">import helium from 'https://cdn.jsdelivr.net/gh/daz-codes/helium/helium.js';helium();</script>
 ```
 
 Alernatively you can install from NPM:
@@ -26,10 +26,11 @@ Alernatively you can install from NPM:
 npm install @daz4126/helium
 ```
 
-Then include it in your
+Then include it in your JavaScript file and call the `helium()` function:
 
 ```javascript
 import helium from "@daz4126/helium"
+helium()
 ```
 
 # Helium Attributes

package/helium.js

@@ -1,80 +1,77 @@
-let ue = true;
 export default function helium(data = {}) {
-  const root =
-    document.querySelector("[\\@helium]") ||
-    document.querySelector("[data-helium]") ||
-    document.body;
-  if (Object.keys(data).length > 0)
-    document
-      .querySelectorAll("[data-helium-processed]")
-      .forEach((el) => el.removeAttribute("data-helium-processed"));
+  const root = document.querySelector("[\\@helium]") || document.querySelector("[data-helium]") || document.body;
   const [bindings, refs] = [new Map(), new Map()];
-  const $ = (selector) => document.querySelector(selector);
-  const html = (string) => {
-    const temp = document.createElement("template");
-    temp.innerHTML = string;
-    return temp.content.firstChild;
+  const $ = (s) => document.querySelector(s);
+  const html = (s) => {
+    const t = document.createElement("template");
+    t.innerHTML = s;
+    return t.content.firstChild;
   };
 
-  const ajax = (m, u, t, d) =>
-    fetch(u, {
-      method: m,
-      headers: { "Content-Type": "application/json" },
-      body: m == "GET" ? null : JSON.stringify(d),
+  const ajax = (url, method, target, opts = {}) => {
+    fetch(url, {
+      method,
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "text/vnd.turbo-stream.html, application/json, application/vnd.api+json, text/html, */*",
+        "X-CSRF-Token": document.querySelector("meta[name='csrf-token']")?.content || ""
+      },
+      body: method === "GET" ? null : JSON.stringify(opts),
+      credentials: "same-origin"
     })
-      .then((r) =>
-        r[r.headers.get("content-type")?.includes("json") ? "json" : "text"](),
+      .then(r =>
+        r.headers.get("content-type")?.includes("application/json") ? r.json() : r.text()
       )
-      .then((x) => (state[t] = x));
-
-  const [get, post, put, patch, del] = [
-    "GET",
-    "POST",
-    "PUT",
-    "PATCH",
-    "DELETE",
-  ].map((m) => (u, d, t) => ajax(m, u, t, d));
+      .then(d => state[target] = d)
+      .catch(e => console.error("AJAX error:", e.message));
+  };
 
-  const state = new Proxy(data, {
-    get(target, prop) {
-      return target[prop];
+  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 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, value) {
-      // skip if identical (prevents redundant re-renders)
-      if (target[prop] === value) return true;
-      target[prop] = value;
-      if (bindings.has(prop)) {
-        // only call the bindings for this prop
-        bindings.get(prop).forEach((binding) => applyBinding(binding));
+    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);
+          }
+        }
       }
-      return true;
-    },
-  });
+      return result;
+    }
+  };
 
+  const state = new Proxy(data, handler);
   let isUpdatingDOM = false;
 
   function applyBinding(binding, event = {}, elCtx = binding.el) {
     const { el, prop, fn } = binding;
-    const result = fn(
-      $,
-      state,
-      event,
-      elCtx,
-      html,
-      get,
-      post,
-      put,
-      patch,
-      del,
-      ...Object.values(data),
-      ...[...refs.values()],
-    );
-    // guard to reduce observer recursion (optional but helpful)
-    if (prop === "innerHTML") {
+    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;
       isUpdatingDOM = false;
-    } else if (prop in el) {
+    } 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 {
       el.setAttribute(prop, result);
@@ -83,286 +80,132 @@ export default function helium(data = {}) {
 
   function compileExpression(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()}) }`,
-      );
+      return new Function("$", "$data", "$event", "$el", "$html", "$get", "$post", "$put", "$patch", "$delete", 
+        ...Object.keys(data), ...[...refs.keys()],
+        `with($data) { ${withReturn ? "return" : ""} (${expr.trim()}) }`);
     } catch (err) {
       return () => expr;
     }
   }
 
-  // processElements now returns an array of newly-created binding objects
-  function processElements(element, addEvents = ue) {
-    const newlyAddedBindings = [];
+  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", "");
 
-    // quick guard: avoid re-processing same node
-    if (
-      element.nodeType === 1 &&
-      element.hasAttribute &&
-      element.hasAttribute("data-helium-processed")
-    )
-      return newlyAddedBindings;
-    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-")))];
 
-    const heliumElements = [
-      element,
-      ...Array.from(element.querySelectorAll("*")).filter((el) =>
-        Array.from(el.attributes).some((attr) =>
-          attr.name.startsWith("data-he-"),
-        ),
-      ),
-    ];
+    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 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++)
-      heliumElements.push(xpath.snapshotItem(i));
-
-    // seed default state values (no binding creation here)
-    heliumElements.forEach((el) => {
+    // Seed default state values
+    heElements.forEach((el) => {
       for (const { name, value } of el.attributes || []) {
-        if (
-          name == "@html" ||
-          name == "data-he-html" ||
-          name == "@text" ||
-          name == "data-he-text" ||
-          name == "@bind" ||
-          name == "data-he-bind"
-        ) {
+        if (["@html","data-he-html","@text","data-he-text","@bind","data-he-bind"].includes(name)) {
           try {
             new Function(`let ${value} = 1`);
-            state[value] ||=
-              name == "@bind" || name == "data-he-bind"
-                ? el.value
-                : el.textContent;
+            state[value] ||= ["@bind","data-he-bind"].includes(name) ? el.value : el.textContent;
           } catch (e) {}
         }
       }
     });
 
-    // Register bindings for these elements and collect the newly added binding objects
-    heliumElements.forEach((el) => {
-      for (const { name, value } of el.attributes || []) {
-        if (name == "@data" || name == "data-he") {
-          Object.assign(
-            state,
-            compileExpression(value, true)(
-              $,
-              state,
-              {},
-              el,
-              html,
-              get,
-              post,
-              put,
-              patch,
-              del,
-              ...Object.values(data),
-              ...[...refs.values()],
-            ),
-          );
-        }
-        if (name == "@ref" || name == "data-he-ref") refs.set("$" + value, el);
 
-        if (
-          name == "@text" ||
-          name == "data-he-text" ||
-          name == "@html" ||
-          name == "data-he-html"
-        ) {
-          Object.keys(state)
-            .filter((key) => value.includes(key))
-            .forEach((val) => {
-              const b = {
-                el,
-                prop:
-                  name == "@text" || name == "data-he-text"
-                    ? "textContent"
-                    : "innerHTML",
-                expr: value,
-                fn: compileExpression(value, true),
-              };
-              bindings.set(val, [...(bindings.get(val) || []), b]);
-              newlyAddedBindings.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()]);
+      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 (name == "@bind" || name == "data-he-bind") {
+        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),
-          };
+          const b = { el, prop: "value", expr: value, fn: compileExpression(value, true) };
           bindings.set(value, [...(bindings.get(value) || []), b]);
-          newlyAddedBindings.push(b);
+          newBindings.push(b);
           el.value = state[value];
         }
 
-        if (
-          name == "@hidden" ||
-          name == "@visible" ||
-          name == "data-he-hidden" ||
-          name == "data-he-visible"
-        ) {
-          Object.keys(state)
-            .filter((key) => value.includes(key))
-            .forEach((val) => {
-              const b = {
-                el,
-                prop: "hidden",
-                expr: value,
-                fn: compileExpression(
-                  `${name == "@hidden" || name == "data-he-hidden" ? "!" : ""}!(${value})`,
-                  true,
-                ),
-              };
-              bindings.set(val, [...(bindings.get(val) || []), b]);
-              newlyAddedBindings.push(b);
-            });
+        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 (name.startsWith(":")) {
-          Object.keys(state)
-            .filter((key) => value.includes(key))
-            .forEach((val) => {
-              const b = {
-                el,
-                prop: name.split(":")[1],
-                expr: value,
-                fn: compileExpression(value, true),
-              };
-              bindings.set(val, [...(bindings.get(val) || []), b]);
-              newlyAddedBindings.push(b);
-            });
+          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);
+          });
         }
 
-        if (name == "@init" || name == "data-he-init") {
-          compileExpression(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")) &&
-          addEvents
-        ) {
-          // event handling — keep this as before (register listeners)
-          const [eventName, ...modifiers] = name
-            .slice(name.startsWith("@") ? 1 : 10)
-            .split(".");
-          const receiver =
-            modifiers.includes("outside") || modifiers.includes("document")
-              ? document
-              : el;
+        if (["@init","data-he-init"].includes(name)) {
+          compileExpression(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 function (...args) {
+            return (...args) => {
               clearTimeout(timeout);
-              timeout = setTimeout(() => fn.apply(this, args), delay);
+              timeout = setTimeout(() => fn(...args), delay);
             };
           };
 
           let debounceDelay = 0;
-          const debounceModifier = modifiers.find((m) =>
-            m.startsWith("debounce"),
-          );
-          if (debounceModifier) {
-            const time = debounceModifier.split(":")[1];
-            if (time && !isNaN(time)) debounceDelay = Number(time);
-            else debounceDelay = 300;
+          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) {
-            if (modifiers.includes("prevent")) e.preventDefault();
-            const keyModifiers = {
-              shift: "shiftKey",
-              ctrl: "ctrlKey",
-              alt: "altKey",
-              meta: "metaKey",
-            };
-            for (const [mod, prop] of Object.entries(keyModifiers)) {
-              if (modifiers.includes(mod) && !e[prop]) return;
+            if (mods.includes("prevent")) e.preventDefault();
+            const keyMods = { shift: "shiftKey", ctrl: "ctrlKey", alt: "altKey", meta: "metaKey" };
+            for (const [mod, prop] of Object.entries(keyMods)) {
+              if (mods.includes(mod) && !e[prop]) return;
             }
-            if (["keydown", "keyup", "keypress"].includes(eventName)) {
-              const last = modifiers[modifiers.length - 1];
+            if (["keydown","keyup","keypress"].includes(eventName)) {
+              const last = mods[mods.length - 1];
               if (last) {
-                let keyName = e.key;
-                if (keyName === " ") keyName = "Space";
-                else if (keyName === "Escape") keyName = "Esc";
+                let keyName = e.key === " " ? "Space" : e.key === "Escape" ? "Esc" : e.key;
                 if (keyName.toLowerCase() !== last.toLowerCase()) return;
               }
             }
-
-            if (!modifiers.includes("outside") || !el.contains(e.target)) {
-              compileExpression(value, false)(
-                $,
-                state,
-                e,
-                el,
-                html,
-                get,
-                post,
-                put,
-                patch,
-                del,
-                ...Object.values(data),
-                ...[...refs.values()],
-              );
+            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()]);
             }
-            if (modifiers.includes("once"))
-              el.removeEventListener(eventName, debouncedHandler);
+            if (mods.includes("once")) el.removeEventListener(eventName, debouncedHandler);
           }
 
-          const debouncedHandler =
-            debounceDelay > 0 ? debounce(_handler, debounceDelay) : _handler;
+          const debouncedHandler = debounceDelay > 0 ? debounce(_handler, debounceDelay) : _handler;
           receiver.addEventListener(eventName, debouncedHandler);
         }
-      } // end attributes loop
-    }); // end heliumElements.forEach
+      }
+    });
 
-    return newlyAddedBindings;
-  } // end processElements
+    return newBindings;
+  }
 
-  // set up mutation observer that only processes and applies bindings for newly added nodes
   const observer = new MutationObserver((mutations) => {
-    if (isUpdatingDOM) return; // ignore mutations we caused directly
+    if (isUpdatingDOM) return;
     for (const m of mutations) {
       for (const node of m.addedNodes) {
-        if (
-          node.nodeType === 1 &&
-          !node.hasAttribute("data-helium-processed")
-        ) {
-          const newly = processElements(node, false);
-          // apply only the bindings we just created for this node
+        if (node.nodeType === 1 && !node.hasAttribute("data-helium-processed")) {
+          const newly = processElements(node);
           newly.forEach(applyBinding);
         }
       }
@@ -370,9 +213,6 @@ export default function helium(data = {}) {
   });
   observer.observe(root, { childList: true, subtree: true });
 
-  const initialBindings = processElements(root);
+  processElements(root);
   for (const [key, items] of bindings.entries()) items.forEach(applyBinding);
-  ue = false;
 }
-
-helium();

package/helium.test.js

@@ -0,0 +1,441 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import helium from './helium.js';
+
+describe('Helium Reactive Library', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    container.setAttribute('data-helium', '');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('State Reactivity', () => {
+    it('should initialize with default data', () => {
+      container.innerHTML = '<div @text="count"></div>';
+      helium({ count: 5 });
+      expect(container.querySelector('div').textContent).toBe('5');
+    });
+
+    it('should react to direct property assignment', (done) => {
+      container.innerHTML = '<div @text="count"></div>';
+      const state = helium({ count: 0 });
+      
+      setTimeout(() => {
+        state.count = 10;
+        setTimeout(() => {
+          expect(container.querySelector('div').textContent).toBe('10');
+          done();
+        }, 0);
+      }, 0);
+    });
+
+    it('should react to nested object mutations', (done) => {
+      container.innerHTML = '<div @text="user.name"></div>';
+      const state = helium({ user: { name: 'Alice' } });
+      
+      setTimeout(() => {
+        state.user.name = 'Bob';
+        setTimeout(() => {
+          expect(container.querySelector('div').textContent).toBe('Bob');
+          done();
+        }, 0);
+      }, 0);
+    });
+
+    it('should react to array push', (done) => {
+      container.innerHTML = '<div @text="items.length"></div>';
+      const state = helium({ items: [1, 2, 3] });
+      
+      setTimeout(() => {
+        state.items.push(4);
+        setTimeout(() => {
+          expect(container.querySelector('div').textContent).toBe('4');
+          done();
+        }, 0);
+      }, 0);
+    });
+
+    it('should react to array index assignment', (done) => {
+      container.innerHTML = '<div @text="items[0]"></div>';
+      const state = helium({ items: ['a', 'b', 'c'] });
+      
+      setTimeout(() => {
+        state.items[0] = 'z';
+        setTimeout(() => {
+          expect(container.querySelector('div').textContent).toBe('z');
+          done();
+        }, 0);
+      }, 0);
+    });
+
+    it('should react to complete array replacement', (done) => {
+      container.innerHTML = '<div @text="items.length"></div>';
+      const state = helium({ items: [1, 2, 3] });
+      
+      setTimeout(() => {
+        state.items = [...state.items, 4, 5];
+        setTimeout(() => {
+          expect(container.querySelector('div').textContent).toBe('5');
+          done();
+        }, 0);
+      }, 0);
+    });
+  });
+
+  describe('Directives - @text and @html', () => {
+    it('should bind text content with @text', () => {
+      container.innerHTML = '<div @text="message"></div>';
+      helium({ message: 'Hello World' });
+      expect(container.querySelector('div').textContent).toBe('Hello World');
+    });
+
+    it('should bind HTML content with @html', () => {
+      container.innerHTML = '<div @html="content"></div>';
+      helium({ content: '<strong>Bold</strong>' });
+      expect(container.querySelector('div').innerHTML).toBe('<strong>Bold</strong>');
+    });
+
+    it('should work with data-he-text prefix', () => {
+      container.innerHTML = '<div data-he-text="message"></div>';
+      helium({ message: 'Test' });
+      expect(container.querySelector('div').textContent).toBe('Test');
+    });
+
+    it('should evaluate expressions in @text', () => {
+      container.innerHTML = '<div @text="count * 2"></div>';
+      helium({ count: 5 });
+      expect(container.querySelector('div').textContent).toBe('10');
+    });
+  });
+
+  describe('Directives - @bind', () => {
+    it('should create two-way binding with input', () => {
+      container.innerHTML = '<input @bind="name" />';
+      const state = helium({ name: 'John' });
+      const input = container.querySelector('input');
+      
+      expect(input.value).toBe('John');
+    });
+
+    it('should update state when input changes', (done) => {
+      container.innerHTML = '<input @bind="name" /><span @text="name"></span>';
+      const state = helium({ name: 'John' });
+      const input = container.querySelector('input');
+      
+      input.value = 'Jane';
+      input.dispatchEvent(new Event('input'));
+      
+      setTimeout(() => {
+        expect(container.querySelector('span').textContent).toBe('Jane');
+        done();
+      }, 0);
+    });
+  });
+
+  describe('Directives - @hidden and @visible', () => {
+    it('should hide element with @hidden when true', () => {
+      container.innerHTML = '<div @hidden="isHidden"></div>';
+      helium({ isHidden: true });
+      expect(container.querySelector('div').hidden).toBe(true);
+    });
+
+    it('should show element with @hidden when false', () => {
+      container.innerHTML = '<div @hidden="isHidden"></div>';
+      helium({ isHidden: false });
+      expect(container.querySelector('div').hidden).toBe(false);
+    });
+
+    it('should show element with @visible when true', () => {
+      container.innerHTML = '<div @visible="isVisible"></div>';
+      helium({ isVisible: true });
+      expect(container.querySelector('div').hidden).toBe(false);
+    });
+
+    it('should hide element with @visible when false', () => {
+      container.innerHTML = '<div @visible="isVisible"></div>';
+      helium({ isVisible: false });
+      expect(container.querySelector('div').hidden).toBe(true);
+    });
+  });
+
+  describe('Directives - Dynamic Attributes (:attr)', () => {
+    it('should bind attribute dynamically', () => {
+      container.innerHTML = '<div :class="className"></div>';
+      helium({ className: 'active' });
+      expect(container.querySelector('div').getAttribute('class')).toBe('active');
+    });
+
+    it('should update attribute on state change', (done) => {
+      container.innerHTML = '<div :title="tooltip"></div>';
+      const state = helium({ tooltip: 'Initial' });
+      
+      setTimeout(() => {
+        state.tooltip = 'Updated';
+        setTimeout(() => {
+          expect(container.querySelector('div').getAttribute('title')).toBe('Updated');
+          done();
+        }, 0);
+      }, 0);
+    });
+  });
+
+  describe('Event Handlers', () => {
+    it('should handle click events', () => {
+      container.innerHTML = '<button @click="count++">Click</button><span @text="count"></span>';
+      helium({ count: 0 });
+      
+      container.querySelector('button').click();
+      setTimeout(() => {
+        expect(container.querySelector('span').textContent).toBe('1');
+      }, 0);
+    });
+
+    it('should handle event with prevent modifier', () => {
+      container.innerHTML = '<form @submit.prevent="submitted = true"></form>';
+      const state = helium({ submitted: false });
+      const form = container.querySelector('form');
+      const event = new Event('submit', { cancelable: true });
+      
+      form.dispatchEvent(event);
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it('should handle keyboard events with key modifiers', () => {
+      container.innerHTML = '<input @keydown.enter="pressed = true" />';
+      const state = helium({ pressed: false });
+      const input = container.querySelector('input');
+      
+      const event = new KeyboardEvent('keydown', { key: 'Enter' });
+      input.dispatchEvent(event);
+      
+      setTimeout(() => {
+        expect(state.pressed).toBe(true);
+      }, 0);
+    });
+
+    it('should handle debounced events', (done) => {
+      container.innerHTML = '<input @input.debounce:100="value = $event.target.value" />';
+      const state = helium({ value: '' });
+      const input = container.querySelector('input');
+      
+      input.value = 'test';
+      input.dispatchEvent(new Event('input'));
+      
+      // Should not update immediately
+      expect(state.value).toBe('');
+      
+      setTimeout(() => {
+        expect(state.value).toBe('test');
+        done();
+      }, 150);
+    });
+
+    it('should handle once modifier', () => {
+      container.innerHTML = '<button @click.once="count++">Click</button>';
+      const state = helium({ count: 0 });
+      const button = container.querySelector('button');
+      
+      button.click();
+      button.click();
+      button.click();
+      
+      setTimeout(() => {
+        expect(state.count).toBe(1);
+      }, 0);
+    });
+  });
+
+  describe('@ref Directive', () => {
+    it('should create reference to element', () => {
+      container.innerHTML = '<div @ref="myDiv"></div><button @click="$myDiv.textContent = \'Changed\'">Change</button>';
+      helium({});
+      
+      container.querySelector('button').click();
+      setTimeout(() => {
+        expect(container.querySelector('div').textContent).toBe('Changed');
+      }, 0);
+    });
+  });
+
+  describe('@init Directive', () => {
+    it('should execute code on initialization', () => {
+      container.innerHTML = '<div @init="initialized = true"></div>';
+      const state = helium({ initialized: false });
+      expect(state.initialized).toBe(true);
+    });
+  });
+
+  describe('@data Directive', () => {
+    it('should merge data into state', () => {
+      container.innerHTML = '<div @data="{ user: \'Alice\', age: 30 }"></div><span @text="user"></span>';
+      helium({});
+      expect(container.querySelector('span').textContent).toBe('Alice');
+    });
+  });
+
+  describe('Helper Functions', () => {
+    it('should provide $ selector helper', () => {
+      container.innerHTML = '<div id="target"></div><button @click="$(\'#target\').textContent = \'Found\'">Click</button>';
+      helium({});
+      
+      container.querySelector('button').click();
+      setTimeout(() => {
+        expect(container.querySelector('#target').textContent).toBe('Found');
+      }, 0);
+    });
+
+    it('should provide $html helper to create elements', () => {
+      container.innerHTML = '<div @init="$el.appendChild($html(\'<span>Test</span>\'))"></div>';
+      helium({});
+      expect(container.querySelector('span').textContent).toBe('Test');
+    });
+  });
+
+  describe('AJAX Helpers', () => {
+    beforeEach(() => {
+      global.fetch = vi.fn();
+    });
+
+    it('should call GET request with $get', async () => {
+      global.fetch.mockResolvedValueOnce({
+        headers: { get: () => 'application/json' },
+        json: async () => ({ data: 'test' })
+      });
+
+      container.innerHTML = '<button @click="$get(\'/api/data\', \'result\')">Load</button><div @text="result?.data"></div>';
+      helium({ result: null });
+      
+      container.querySelector('button').click();
+      
+      await new Promise(resolve => setTimeout(resolve, 100));
+      expect(global.fetch).toHaveBeenCalledWith('/api/data', expect.any(Object));
+    });
+
+    it('should call POST request with $post', async () => {
+      global.fetch.mockResolvedValueOnce({
+        headers: { get: () => 'application/json' },
+        json: async () => ({ success: true })
+      });
+
+      container.innerHTML = '<button @click="$post(\'/api/save\', { name: \'test\' }, \'response\')">Save</button>';
+      helium({ response: null });
+      
+      container.querySelector('button').click();
+      
+      await new Promise(resolve => setTimeout(resolve, 100));
+      expect(global.fetch).toHaveBeenCalledWith('/api/save', expect.objectContaining({
+        method: 'POST',
+        body: JSON.stringify({ name: 'test' })
+      }));
+    });
+  });
+
+  describe('Dynamic DOM Updates', () => {
+    it('should process dynamically added elements', (done) => {
+      container.innerHTML = '<div id="container"></div>';
+      const state = helium({ message: 'Dynamic' });
+      
+      setTimeout(() => {
+        const newEl = document.createElement('span');
+        newEl.setAttribute('@text', 'message');
+        container.querySelector('#container').appendChild(newEl);
+        
+        setTimeout(() => {
+          expect(newEl.textContent).toBe('Dynamic');
+          done();
+        }, 100);
+      }, 0);
+    });
+
+    it('should handle innerHTML updates with new bindings', (done) => {
+      container.innerHTML = '<div @html="content"></div>';
+      const state = helium({ content: '', name: 'Test' });
+      
+      setTimeout(() => {
+        state.content = '<span @text="name"></span>';
+        setTimeout(() => {
+          expect(container.querySelector('span').textContent).toBe('Test');
+          done();
+        }, 100);
+      }, 0);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle undefined state values', () => {
+      container.innerHTML = '<div @text="undefined"></div>';
+      helium({});
+      expect(container.querySelector('div').textContent).toBe('undefined');
+    });
+
+    it('should handle null state values', () => {
+      container.innerHTML = '<div @text="value"></div>';
+      helium({ value: null });
+      expect(container.querySelector('div').textContent).toBe('null');
+    });
+
+    it('should handle circular references in state', () => {
+      const obj = { name: 'test' };
+      obj.self = obj;
+      
+      container.innerHTML = '<div @text="obj.name"></div>';
+      expect(() => helium({ obj })).not.toThrow();
+    });
+
+    it('should not process already processed elements', () => {
+      container.innerHTML = '<div @text="count"></div>';
+      const state = helium({ count: 0 });
+      
+      // Manually mark as processed
+      container.querySelector('div').setAttribute('data-helium-processed', '');
+      
+      state.count = 5;
+      // Should still work because binding was already created
+      setTimeout(() => {
+        expect(container.querySelector('div').textContent).toBe('5');
+      }, 0);
+    });
+  });
+
+  describe('Performance', () => {
+    it('should handle many bindings efficiently', () => {
+      const html = Array.from({ length: 100 }, (_, i) => 
+        `<div @text="items[${i}]"></div>`
+      ).join('');
+      
+      container.innerHTML = html;
+      const items = Array.from({ length: 100 }, (_, i) => i);
+      
+      const start = performance.now();
+      helium({ items });
+      const end = performance.now();
+      
+      expect(end - start).toBeLessThan(100); // Should initialize in < 100ms
+    });
+
+    it('should not cause infinite loops with DOM mutations', (done) => {
+      container.innerHTML = '<div @html="content"></div>';
+      const state = helium({ content: '<span>Test</span>', updateCount: 0 });
+      
+      let mutationCount = 0;
+      const observer = new MutationObserver(() => {
+        mutationCount++;
+      });
+      observer.observe(container, { childList: true, subtree: true });
+      
+      setTimeout(() => {
+        state.content = '<span>Updated</span>';
+        setTimeout(() => {
+          expect(mutationCount).toBeLessThan(10); // Should not cause excessive mutations
+          observer.disconnect();
+          done();
+        }, 100);
+      }, 0);
+    });
+  });
+});

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@daz4126/helium",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "main": "helium.js",
   "type": "module",
+  "scripts": {
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run"
+  },
   "keywords": [
     "tiny",
     "reactive",

package/vitest.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+  },
+});