@daz4126/helium 0.15.0 → 0.17.0

package/README.md

@@ -1,4 +1,4 @@
-# 🎈Helium🎈
+# 🎈 Helium 🎈
 
 The ultra-light library that makes HTML interactive!
 
@@ -14,90 +14,104 @@ 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 in a script tag directly in your HTML page (no install or build step required!):
+## Installation
+
+### CDN (No build step required!)
+
+Just import from the CDN in a script tag directly in your HTML page:
 
 ```html
-<script type="module">import helium from 'https://cdn.jsdelivr.net/gh/daz-codes/helium/helium.js';helium();</script>
+<script type="module">
+  import helium from 'https://cdn.jsdelivr.net/gh/daz-codes/helium/helium.js';
+  helium();
+</script>
 ```
 
-Alernatively you can install from NPM:
+### NPM
 
 ```bash
 npm install @daz4126/helium
 ```
 
-Then include it in your JavaScript file and call the `helium()` function:
+Then include it in your JavaScript file and call the helium() function:
 
 ```javascript
 import helium from "@daz4126/helium"
 helium()
 ```
 
-# Helium Attributes
-
-Helium uses custom attributes to add interactivity to HTML elements. To identify them, they all start with `@`, although there are also `data` attribute aliases that can be used instead.
+## Helium Attributes
 
-## `@helium`
+Helium uses custom attributes to add interactivity to HTML elements. To identify them, they all start with `@`, although there are also data attribute aliases that can be used instead.
 
-This attribute sets the root element. Helium attributes can only be used on this element and its children. If not set then it defaults to `document`.
+### @helium
 
-Alias: `data-helium`
+This attribute sets the root element. Helium attributes can only be used on this element and its children. If not set then it defaults to `document.body`.
 
-## `@text`
+**Alias:** `data-helium`
 
-Inserts the result of a JavaScript expression into the text-content of the element.
+### @text
 
-This will update the textContent of the element with the value of the `count` variable:
+Inserts the result of a JavaScript expression into the text-content of the element. This will update the textContent of the element with the value of the count variable:
 
 ```html
 <b @text="count">0</b>
 ```
 
-You can also use expresions. This will update the textContent of the element with the value of the `name` variable but in uppercase:
+You can also use expressions. This will update the textContent of the element with the value of the name variable but in uppercase:
 
 ```html
-<span @text="name.toUpperCase()">0</span>
+<span @text="name.toUpperCase()">Dave</span>
 ```
 
-Alias: `data-he-text`
+**Alias:** `data-he-text`
 
-## `@bind`
+### @html
 
-Creates a 2-way binding between an input or textcontent element's value attribute and a variable.
+Similar to `@text`, but inserts HTML content into the element's innerHTML. Supports arrays, objects, and DOM morphing with Idiomorph if available.
 
-Whatever is entered in the following input field will be stored as a variable called `name`:
+```html
+<div @html="'<strong>Bold text</strong>'"></div>
+```
+
+**Alias:** `data-he-html`
+
+### @bind
+
+Creates a 2-way binding between an input element's value and a variable. Whatever is entered in the following input field will be stored as a variable called name:
 
 ```html
 <input @bind="name" placeholder="Enter your name">
 ```
 
-Alias: `data-he-bind`
+Works with text inputs, textareas, checkboxes, radio buttons, and select elements.
+
+**Alias:** `data-he-bind`
 
-## `@hidden` & `@visible`
+### @hidden & @visible
 
 Makes the element hidden or visible depending on the result of a JavaScript expression.
 
 ```html
 <div @visible="count > 3">Only visible if the count is greater than 3</div>
+<div @hidden="count <= 3">Hidden when count is 3 or less</div>
 ```
 
-Alias: `data-he-hidden` & `data-he-visible`
+**Alias:** `data-he-hidden` & `data-he-visible`
 
-## `@data`
+### @data
 
-Initializes variables that can be used in JacaScript expressions.
+Initializes variables that can be used in JavaScript expressions.
 
 ```html
 <div @data="{ count: 0, open: false }"></div>
 ```
 
-Alias: `data-he-data`
+**Alias:** `data-he-data`
 
-## `@ref`
+### @ref
 
-Creates a reference to the element that can be used in JavaScript expressions.
-
-For example, this will create a reference called `$list` to this element:
+Creates a reference to the element that can be used in JavaScript expressions. For example, this will create a reference called `$list` to this element:
 
 ```html
 <ul @ref="list"></ul>
@@ -109,9 +123,9 @@ This element can then be accessed in other JavaScript expressions as `$list`, fo
 <button @click="appendTo($list)">Add Task</button>
 ```
 
-Alias: `data-he-ref`
+**Alias:** `data-he-ref`
 
-## `@init`
+### @init
 
 A JavaScript expression that will run once when Helium initializes.
 
@@ -119,84 +133,195 @@ A JavaScript expression that will run once when Helium initializes.
 <div @init="timestamp = Date.now()"></div>
 ```
 
-Alias: `data-he-init`
+**Alias:** `data-he-init`
+
+### @calculate
+
+Creates a computed property that automatically updates when its dependencies change. The calculated value is stored in a state variable.
+
+```html
+<div @calculate:total="price * quantity"></div>
+```
+
+This will create a `total` variable that automatically recalculates whenever `price` or `quantity` changes.
+
+**Alias:** `data-he-calculate`
+
+### @effect
+
+Runs a side effect whenever specified dependencies change. Use `:*` to run on any state change, or list specific dependencies.
+
+```html
+<!-- Run on any state change -->
+<div @effect:*="console.log('State changed')"></div>
+
+<!-- Run when specific variables change -->
+<div @effect:count:name="console.log('Count or name changed')"></div>
+```
+
+**Alias:** `data-he-effect`
 
 ## Event Listeners & Handlers
 
-Event listeners and handlers can be created by prepending `@` before the event name, for example `@click="count++"` will run the cound `count++` when the element is clicked on.
+Event listeners and handlers can be created by prepending `@` before the event name, for example `@click="count++"` will run the code `count++` when the element is clicked on.
 
 ```html
 <button @click="count++">Increment</button>
 ```
 
-You can add modifiers of `prevent` to prevent the default behaviour, `outside` to only fire when the event happens outside the element and `once` to only run the event handler once.
+### Event Modifiers
+
+You can add modifiers by appending them with a dot (`.`) after the event name:
+
+- **prevent** - Prevents the default browser behavior
+- **once** - Only runs the event handler once
+- **outside** - Only fires when the event happens outside the element
+- **document** - Attaches the listener to the document instead of the element
+- **debounce** - Debounces the event handler (default 300ms)
+- **debounce:500** - Debounces with custom delay in milliseconds
+- **shift, ctrl, alt, meta** - Only fires if the modifier key is pressed
+- **Key names** - For keyboard events, specify which key (e.g., `@keydown.enter`, `@keyup.esc`)
+
+Examples:
 
 ```html
 <button @click.prevent="submitForm()">Save</button>
+<button @click.once="initialize()">Initialize</button>
+<div @click.outside="closeModal()">Modal</div>
+<input @input.debounce:500="search()">
+<input @keydown.enter="submit()">
+<input @keydown.ctrl.s.prevent="save()">
 ```
 
-Alias: prepend the event name with `data-he-on`, for example `data-he-onclick="count++"`
+**Alias:** Prepend the event name with `data-he-on`, for example `data-he-onclick="count++"`
 
-## Dynamic Attributes
+## HTTP Requests
 
-It's possible to dynamically update the attributes of elements. To do this, just prepend a `:` in front of the attribute name and write a JavaScript expression that evaulates to the desired attribute value. This will update whenever any of the Helium variables change value.
+Helium includes built-in support for making HTTP requests directly from event handlers.
 
-In the following example, the `<div>` element has a dynamic class attribute that will be 'normal' if the count is less than 10, but 'danger' if the count is 10 or more:
+### Available HTTP Methods
+
+- `@get` - GET request
+- `@post` - POST request
+- `@put` - PUT request
+- `@patch` - PATCH request
+- `@delete` - DELETE request
+
+The HTTP method is triggered by the element's default event (click for buttons, submit for forms, input for inputs, etc.).
 
 ```html
-<div :class="count < 10 ? 'normal' : 'danger'>
-    The count is <b @text=count></b>
-</div>
+<button @get="/api/data">Load Data</button>
+<form @post="/api/users">Submit</form>
 ```
 
-## Magic Attributes
+### HTTP Request Options
 
-`$` is an alias for `document.querySelector`
+Configure requests using these additional attributes:
 
+- **@target** or **data-he-target** - Where to insert the response (CSS selector or ref)
+- **@action** or **data-he-action** - How to insert: `replace`, `append`, `prepend`, `before`, `after`
+- **@params** or **data-he-params** - Request parameters (object or FormData)
+- **@options** or **data-he-options** - Additional fetch options
+- **@template** or **data-he-template** - Template function to transform response
+- **@loading** or **data-he-loading** - Loading state content to show during request
 
 ```html
-<div @click="$('#header').classList.add('active')">Activate Header!</div>
+<button 
+  @get="/api/users"
+  @target="#user-list"
+  @action="replace">
+  Load Users
+</button>
+
+<form 
+  @post="/api/users"
+  @params="{ name: username, email: email }"
+  @target="#message"
+  @loading="Saving...">
+  <input @bind="username">
+  <input @bind="email">
+  <button>Save</button>
+</form>
 ```
 
-`$el` is an alias for the element:
+### Special Features
+
+- Automatically includes CSRF tokens from `<meta name="csrf-token">` for same-origin requests
+- Supports Turbo Stream responses
+- Handles JSON and HTML responses
+- Works with FormData for file uploads
+
+## Dynamic Attributes
+
+It's possible to dynamically update the attributes of elements. To do this, just prepend a `:` in front of the attribute name and write a JavaScript expression that evaluates to the desired attribute value. This will update whenever any of the Helium variables change value.
+
+In the following example, the `<div>` element has a dynamic class attribute that will be 'normal' if the count is less than 10, but 'danger' if the count is 10 or more:
 
 ```html
-<div @click="$el.remove()">Click to remove me!</div>
+<div :class="count < 10 ? 'normal' : 'danger'">
+    The count is <b @text="count"></b>
+</div>
 ```
 
-`$event` is an alias for the event object of an event handler:
+### Special Dynamic Attributes
 
+**:class** - Can accept an object to toggle multiple classes:
 
 ```html
-<div @click="console.log($event.timeStamp)">Log the timestamp</div>
+<div :class="{ active: isActive, disabled: !isEnabled }"></div>
+```
+
+**:style** - Can accept an object for multiple styles:
+
+```html
+<div :style="{ color: textColor, fontSize: size + 'px' }"></div>
 ```
 
-`@data` gives you access to the data object that contains all the Helium variables:
+**Alias:** `data-he-attr:attributeName`
+
+## Magic Variables
+
+These special variables are available in all JavaScript expressions:
 
+- **$** - Alias for `document.querySelector`
+- **$el** - Reference to the current element
+- **$event** - The event object (in event handlers)
+- **$data** - The reactive data object containing all Helium variables
+- **$html** - Helper function to create HTML elements from strings
+- **$get, $post, $put, $patch, $delete** - HTTP request functions
+- **$refs** - All elements marked with `@ref`
+
+Examples:
 
 ```html
-<div @click="console.log($data)">Log the data</div>
+<div @click="$('#header').classList.add('active')">Activate Header!</div>
+<div @click="$el.remove()">Click to remove me!</div>
+<div @click="console.log($event.timeStamp)">Log the timestamp</div>
+<div @click="console.log($data)">Log all data</div>
 ```
 
 ## Default Variables and Functions
 
 The helium function accepts a single JavaScript object as an argument. This can include default variable values and functions that can then be called inside the JavaScript expressions.
 
-For example, the following will set the `count` variable to an initial value of `29` and the `name` variable to "Helium":
+For example, the following will set the count variable to an initial value of 29 and the name variable to "Helium":
 
 ```javascript
-helium({ count: 29, name: "Helium"})
+helium({ 
+  count: 29, 
+  name: "Helium"
+})
 ```
 
-The following example shows how a function can be added into Helium and then used by even listeners:
+The following example shows how a function can be added into Helium and then used by event listeners:
 
 ```javascript
 helium({ 
-    appendTo(element){
-        const li = document.createElement("li")
-        li.textContent = "New Item"
-        element.append(li)
-    }
+  appendTo(element) {
+    const li = document.createElement("li")
+    li.textContent = "New Item"
+    element.append(li)
+  }
 })
 ```
 
@@ -204,10 +329,14 @@ This function can then be called from an event handler, such as `@click`:
 
 ```html
 <ul @ref="list"></ul>
-<button @click="appendTo($list)>Append item to list</button>
+<button @click="appendTo($list)">Append item to list</button>
 ```
 
-Note that magic attributes and Helium variables are not available inside these functions. However, you can pass them as arguments and they will then be available in the function. If you pass Helium variables then they will be passed as values and updating them inside the function will *not* trigger a reactive update. A solution is to pass the magic `$data` attribute as an argument, then updating the properties of this inside the function *will* trigger a reactive update.
+### Important Note About Functions
+
+Magic variables and Helium variables are not available inside these functions. However, you can pass them as arguments and they will then be available in the function. 
+
+If you pass Helium variables, they will be passed as values and updating them inside the function will **not** trigger a reactive update. A solution is to pass the magic `$data` attribute as an argument, then updating the properties of this inside the function **will** trigger a reactive update.
 
 So instead of this:
 
@@ -217,9 +346,9 @@ So instead of this:
 
 ```javascript
 helium({ 
-    increment(count,n = 1){
-        count += n
-    }
+  increment(count, n = 1) {
+    count += n  // Won't trigger reactivity
+  }
 })
 ```
 
@@ -231,8 +360,34 @@ You should do this instead:
 
 ```javascript
 helium({ 
-    increment(data,n = 1){
-        data.count += n
-    }
+  increment(data, n = 1) {
+    data.count += n  // Will trigger reactivity
+  }
 })
 ```
+
+## Advanced Features
+
+### DOM Morphing
+
+If Idiomorph is available, Helium will use it for efficient DOM updates when updating innerHTML, preserving element state and reducing flicker.
+
+### List Rendering
+
+When rendering arrays with `@html`, Helium can efficiently update lists by using `key` or `data-key` attributes on child elements for tracking.
+
+```html
+<ul @html="items.map(item => `<li key='${item.id}'>${item.name}</li>`)"></ul>
+```
+
+### MutationObserver
+
+Helium automatically observes the DOM and processes new elements as they're added, making it work seamlessly with dynamically inserted content.
+
+### CSRF Protection
+
+Helium automatically includes CSRF tokens from `<meta name="csrf-token">` elements in same-origin requests for enhanced security.
+
+## Browser Compatibility
+
+Helium uses modern JavaScript features including Proxy, MutationObserver, and ES6 syntax. It works in all modern browsers that support ES6 modules.

package/helium.js

@@ -2,16 +2,34 @@ const parseEx=v=>{try{return Function(`return(${v})`)()}catch{return v}}
 const getEvent = el => ({form:"submit",input:"input",textarea:"input",select:"change"}[el.tagName.toLowerCase()]||"click")
 const debounce=(f,d)=>{let t;return(...a)=>(clearTimeout(t),t=setTimeout(f,d,...a))}
 
-export default function helium(data = {}) {
+// Single global object to hold all settings
+let HELIUM = null;
+
+window.helium = function() {
   let initFn;
-  const he = (n,...a) => a.map(b => `|@${b}|data-he-${b}|`).join``.includes(`|${n.split('.')[0]}|`);
+  const ALL = Symbol("all");
+  const he = (n,...a) => a.map(b => `|@${b}|data-he-${b}|`).join``.includes(`|${n.split(/[.:]/)[0]}|`);
   const root = document.querySelector("[\\@helium]") || document.querySelector("[data-helium]") || document.body;
-  const [bindings, refs, listeners, processed, parentKeys, fnCache, proxyCache] = [new Map(), new Map(), new WeakMap(), new WeakSet(), new WeakMap(), new Map(), new WeakMap()];
+  
+  // Initialize or reuse HELIUM object
+  if (!HELIUM) {
+    HELIUM = {
+      observer: null,
+      bindings: new Map(),
+      refs: new Map(),
+      listeners: new WeakMap(),
+      processed: new WeakSet(),
+      parentKeys: new WeakMap(),
+      fnCache: new Map(),
+      proxyCache: new WeakMap()
+    };
+  }
+  
   const $ = s => document.querySelector(s);
   const html = s => Object.assign(document.createElement("template"),{innerHTML:s.trim()}).content.firstChild
 
   const update = (data,target,action,template) => {
-    const element = target instanceof Node ? target : (refs.get(target) || $(target));
+    const element = target instanceof Node ? target : (HELIUM.refs.get(target) || $(target));
     if(element){
       const content = html(template ? template(data) : data);
       action ? element[action=="replace"?"replaceWith":action](content) : element.innerHTML = content;
@@ -22,11 +40,18 @@ export default function helium(data = {}) {
 const ajax = (u,m,o={},p={}) => {
     if(o.loading) o.target = update(o.loading,o.target,o.action) || o.target;
     const fd = p instanceof FormData, t = document.querySelector('meta[name="csrf-token"]')?.content;
-    fetch(u,{method:m,headers:{
-      Accept:"text/vnd.turbo-stream.html,application/json,text/html",
-      ...(!fd&&m!=="GET"&&{"Content-Type":"application/json"}),
-      ...(t&&{"X-CSRF-Token":t})
-    },body:m==="GET"?null:(fd?p:JSON.stringify(p)),credentials:"same-origin"})
+    const url = new URL(u, window.location.href);
+    const sameOrigin = url.origin === window.location.origin;
+fetch(u, {
+  method: m,
+  headers: {
+    Accept:"text/vnd.turbo-stream.html,application/json,text/html",
+    ...(!fd && m !== "GET" && {"Content-Type":"application/json"}),
+    ...(sameOrigin && t ? {"X-CSRF-Token": t} : {})
+  },
+  body: m === "GET" ? null : (fd ? p : JSON.stringify(p)),
+  credentials: sameOrigin ? "same-origin" : "omit"
+})
       .then(r => {
         const type = r.headers.get("content-type") || "";
         return (type.includes("turbo-stream") ? r.text().then(d => ({ t: true, d })) :
@@ -46,10 +71,10 @@ const handler = {
     get(t,p,r) {
     const v = Reflect.get(t,p,r);
     if (v && typeof v === "object") {
-      if (proxyCache.has(v)) return proxyCache.get(v);
+      if (HELIUM.proxyCache.has(v)) return HELIUM.proxyCache.get(v);
       const proxy = new Proxy(v, handler);
-      proxyCache.set(v, proxy);
-      parentKeys.set(v, p);
+      HELIUM.proxyCache.set(v, proxy);
+      HELIUM.parentKeys.set(v, p);
       return proxy;
     }
     return v;
@@ -57,22 +82,21 @@ const handler = {
     set: (t,p,v) => {
       const res = Reflect.set(t,p,v);    
       if (Array.isArray(t) && !isNaN(p)) {
-        const parentKey = parentKeys.get(t);
-        if (parentKey) bindings.get(parentKey)?.forEach(applyBinding);
+        const parentKey = HELIUM.parentKeys.get(t);
+        if (parentKey) HELIUM.bindings.get(parentKey)?.forEach(applyBinding);
       }   
-      bindings.get(p)?.forEach(applyBinding); 
+      HELIUM.bindings.get(p)?.concat(...(HELIUM.bindings.get(ALL) ?? []))?.forEach(applyBinding); 
       return res
     }
 };
 
-  const state = new Proxy(data, handler);
+  // Initialize state if it doesn't exist
+  const state = new Proxy({}, handler);
   
 function applyBinding(b,e={},elCtx=b.el){
-  const {el,prop,fn}=b;
-  const r=fn($,state,e,elCtx,html,...Object.values(data),...[...refs.values()]);
-
-  if (prop==="innerHTML" && Array.isArray(r) && el.children.length > 0)
-    return updateList(el, r);
+  const {el,prop,fn,calc}=b;
+  const r=fn($,state,e,elCtx,html,...Object.values(state),...[...HELIUM.refs.values()]);
+  if (calc) state[calc] = r
   
   if (prop==="innerHTML") {
     const content = Array.isArray(r)?r.join``:r;
@@ -98,98 +122,75 @@ function applyBinding(b,e={},elCtx=b.el){
   el.setAttribute(prop, parseEx(r));
 }
 
-
-function updateList(el,r){
-  const temp = html(`<${el.tagName.toLowerCase()}>${r.join``}</${el.tagName.toLowerCase()}>`);
-  const newChildren = [...temp.children];
-  
-  const newItems = newChildren.map((child, idx) => ({
-    key: child.getAttribute("key") || child.dataset.key,
-    element: child,
-    index: idx
-  }));
-  
-  const existingItems = [...el.children].map((child, idx) => ({
-    key: child.getAttribute("key") || child.dataset.key,
-    element: child,
-    index: idx
-  }));
-  
-  for (let i = 0; i < Math.max(newItems.length, existingItems.length); i++) {
-    const existing = existingItems[i];
-    const newItem = newItems[i];
-    
-    if (!newItem && existing) {
-      cleanup(existing.element);
-      existing.element.remove();
-    } else if (newItem && !existing) {
-      el.appendChild(newItem.element);
-    } else if (newItem && existing) {
-      if (existing.element.outerHTML !== newItem.element.outerHTML) {
-        if(typeof Idiomorph === "object") {
-          Idiomorph.morph(existing.element, newItem.element.outerHTML);
-        } else {
-          cleanup(existing.element);
-          existing.element.replaceWith(newItem.element);
-        }
-      }
-    }
-  }    
-    } 
-
 const compile = (expr, withReturn = false) => {
-  const key = `${withReturn}:${expr}`;
-  if (fnCache.has(key)) return fnCache.get(key);
+  // Auto-detect if this should be a statement block
+  const hasStatements = /[;\r\n]/.test(expr);
+  const useReturn = withReturn && (!hasStatements || expr.trim().startsWith('{') && expr.trim().endsWith('}'));
+  const key = `${useReturn}:${expr}`;
+  if (HELIUM.fnCache.has(key)) return HELIUM.fnCache.get(key);
   try {
     const fn = new Function(
       "$","$data","$event","$el","$html","$get","$post","$put","$patch","$delete",
-      ...Object.keys(data), ...[...refs.keys()],
-      `with($data){${withReturn?"return":""}(${expr.trim()})}`
+      ...Object.keys(state), ...[...HELIUM.refs.keys()],
+      useReturn 
+        ? `with($data){return(${expr.trim()})}` 
+        : `with($data){${expr.trim()}}`
     );
-    fnCache.set(key, fn);
+    HELIUM.fnCache.set(key, fn);
     return fn;
   } catch {
     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;
+const trackDependencies = (fn, el, excludeChanged = false) => {
+  const accessed = excludeChanged ? new Map() : new Set();
+  const trackProxy = new Proxy(state, {
+    get(target, prop) {
+      if (typeof prop == 'string') {
+        if (excludeChanged && !accessed.has(prop)) {
+          accessed.set(prop, target[prop]); // Store initial value
+        } else if (!excludeChanged) {
+          accessed.add(prop);
+        }
       }
-    });
-    
-    try { fn.call(null, $, trackProxy, refs); } catch {}
-    return [...accessed];
-  };
+      const val = target[prop];
+      return typeof val == "object" && val != null ? new Proxy(val, this) : val;
+    }
+  });
+  
+  try { fn.call(null, $, trackProxy, HELIUM.refs); } catch {}
+  
+  if (excludeChanged) {
+    return [...accessed.keys()].filter(prop => state[prop] === accessed.get(prop));
+  }
+  return [...accessed];
+};
 
   const cleanup = el => {
     [el,...el.querySelectorAll('*')].forEach(e => {
-      listeners.get(e)?.forEach(({receiver,event,handler}) => receiver.removeEventListener(event,handler));
-      listeners.delete(e);
+      HELIUM.listeners.get(e)?.forEach(({receiver,event,handler}) => receiver.removeEventListener(event,handler));
+      HELIUM.listeners.delete(e);
     });
   };
 
 function processElements(element) {
     const newBindings = [];
+    const deferredBindings = [];
 
     const heElements = [element, ...element.querySelectorAll("*")]
-      .filter(e => !processed.has(e) && [...e.attributes].some(a => /^(@|:|data-he)/.test(a.name)));
+      .filter(e => !HELIUM.processed.has(e) && [...e.attributes].some(a => /^(@|:|data-he)/.test(a.name)));
 
     const addBinding = (val, b) => {
-      bindings.set(val, [...(bindings.get(val) || []), b]);
-      newBindings.push(b);
+      HELIUM.bindings.set(val, b.calc ? [b,...(HELIUM.bindings.get(val) || [])] : [...(HELIUM.bindings.get(val) || []), b]);
+      b.calc ? newBindings.unshift(b) : newBindings.push(b);
     };
 
     heElements.forEach(el => {
-      processed.add(el);
+      HELIUM.processed.add(el);
       
       const attrs = el.attributes;
-      const execFn = v => compile(v, true)($, state, {}, el, html, get, post, put, patch, del, ...Object.values(data), ...[...refs.values()]);
+      const execFn = v => compile(v, true)($, state, {}, el, html, get, post, put, patch, del, ...Object.values(state), ...[...HELIUM.refs.values()]);
       const inputType = el.type?.toLowerCase();
       const isCheckbox = inputType == "checkbox", isRadio = inputType == "radio", isSelect = el.tagName == "SELECT";
 
@@ -210,23 +211,27 @@ function processElements(element) {
 
         // Process the attribute
         if (["@data", "data-he"].includes(name)) {
-          Object.assign(state, execFn(value));
+          Object.assign(state, parseEx(value));
+        }
+        else if (name.startsWith(":") || name.startsWith("data-he-attr:")) {
+          const fn = compile(value, true);
+          deferredBindings.push(() => trackDependencies(fn, el).forEach(dep => addBinding(dep, {el, prop: name.slice(name.startsWith(":") ? 1 : 13), fn})));
         }
         else if (he(name, "ref")) {
-          refs.set("$" + value, el);
+          HELIUM.refs.set("$" + value, el);
         }
         else if (he(name, "text", "html")) {
           const fn = compile(value, true);
           const b = {el, prop: he(name, "text") ? "textContent" : "innerHTML", fn};
-          trackDependencies(fn, el).forEach(dep => addBinding(dep, b));
+          deferredBindings.push(() => trackDependencies(fn, el).forEach(dep => addBinding(dep, b)));
         }
         else if (he(name, "bind")) {
           const event = (isCheckbox || isRadio || isSelect) ? "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, event, handler: inputHandler});
+          if (!HELIUM.listeners.has(el)) HELIUM.listeners.set(el, []);
+          HELIUM.listeners.get(el).push({receiver: el, 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];
@@ -234,15 +239,24 @@ function processElements(element) {
         }
         else if (he(name, "hidden", "visible")) {
           const fn = compile(`${he(name, "hidden") ? "!" : ""}!(${value})`, true);
-          trackDependencies(fn, el).forEach(dep => addBinding(dep, {el, prop: "hidden", fn}));
+          deferredBindings.push(() => trackDependencies(fn, el).forEach(dep => addBinding(dep, {el, prop: "hidden", fn})));
         }
-        else if (he(name, "class")) {
+        else if (he(name, "calculate")) {
+          const calc = name.split(":")[1];
+          const fn = compile(value, true);
+          deferredBindings.push(() => trackDependencies(fn, el, true).forEach(key => addBinding(key, {el, calc, prop: null, fn})));
+        }
+        else if (he(name, "effect")) {
+          const keys = name.split(":").slice(1);
           const fn = compile(value, true);
-          trackDependencies(fn, el).forEach(dep => addBinding(dep, {el, prop: "class", fn}));
+          deferredBindings.push(() => {
+            const tracked = keys.includes("*") ? [ALL] : trackDependencies(fn, el, true).concat(keys);
+            tracked.forEach(key => addBinding(key, {el, prop: null, fn}));
+          })
         }
-        else if (name.startsWith(":")) {
+        else if (he(name, "class")) {
           const fn = compile(value, true);
-          trackDependencies(fn, el).forEach(dep => addBinding(dep, {el, prop: name.slice(1), fn}));
+          deferredBindings.push(() => trackDependencies(fn, el).forEach(dep => addBinding(dep, {el, prop: "class", fn})));
         }
         else if (he(name, "init")) {
           initFn = compile(value, true);
@@ -256,7 +270,7 @@ function processElements(element) {
           const debounceMod = mods.find(m => m.startsWith("debounce"));
           const debounceDelay = debounceMod ? (t => t && !isNaN(t) ? Number(t) : 300)(debounceMod.split(":")[1]) : 0;
           const _handler = e => {
-            const exFn = v => compile(v, true)($, state, e, el, html, get, post, put, patch, del, ...Object.values(data), ...[...refs.values()])
+    const exFn = v => compile(v,true)($, state, e, el, html, get, post, put, patch, del, ...Object.values(state), ...[...HELIUM.refs.values()])
             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;
@@ -272,11 +286,11 @@ function processElements(element) {
                 const getAttr = name => el.getAttribute(`data-he-${name}`) || el.getAttribute(`@${name}`);
                 const [target, action] = (getAttr('target') || "").split(":");
                 const options = {
-                  ...exFn(getAttr('options') || '{}'),
-                  ...(target && {target}),
-                  ...(action && {action}),
-                  ...execFn(getAttr('template')) && {template: execFn(getAttr('template'))},
-                  ...getAttr('loading') && {loading: getAttr('loading')}
+                  ...(getAttr("options") && parseEx(getAttr("options") || "{}")),
+                  ...(target && { target }),
+                  ...(action && { action }),
+                  ...(getAttr("template") && { template: execFn(getAttr("template")),}),
+                  ...(getAttr("loading") && { loading: execFn(getAttr("loading"))}),
                 };
                 let paramsAttr = getAttr('params') || '{}';
                 if (!paramsAttr.trim().startsWith("{") && paramsAttr.includes(":")) {
@@ -293,20 +307,50 @@ function processElements(element) {
           };
           const handler = debounceDelay > 0 ? debounce(_handler, debounceDelay) : _handler;
           receiver.addEventListener(event, handler);
-          if (!listeners.has(el)) listeners.set(el, []);
-          listeners.get(el).push({receiver, event, handler});
+          if (!HELIUM.listeners.has(el)) HELIUM.listeners.set(el, []);
+          HELIUM.listeners.get(el).push({receiver, event, handler});
         }
       }
     });
+    deferredBindings.forEach(fn => fn());
     return newBindings;
   }
-  new MutationObserver(ms=>{
-    for(const m of ms){
-      m.removedNodes.forEach(n=>n.nodeType===1&&cleanup(n));
-      m.addedNodes.forEach(n=>n.nodeType===1&&!processed.has(n)&&processElements(n).forEach(applyBinding));
+  
+  // Disconnect old observer if it exists
+  if (HELIUM.observer) HELIUM.observer.disconnect();
+  
+  // Create new observer
+  HELIUM.observer = new MutationObserver(ms => {
+    for (const m of ms) {
+      m.removedNodes.forEach(n => n.nodeType === 1 && cleanup(n));
+      m.addedNodes.forEach(n => n.nodeType === 1 && !HELIUM.processed.has(n) && processElements(n).forEach(applyBinding));
     }
-  }).observe(root,{childList:1,subtree:1});
+  });
+  HELIUM.observer.observe(root, { childList: true, subtree: true });
+  
   processElements(root);
-  for (const [key, items] of bindings.entries()) items.forEach(applyBinding);
-  if(initFn) initFn($, state, {}, {}, html,get,post, put,patch,del, ...Object.values(data), ...[...refs.values()])
+  for (const [key, items] of HELIUM.bindings.entries()) items.forEach(applyBinding);
+  if(initFn) initFn($, state, {}, {}, html, get, post, put, patch, del, ...Object.values(state), ...[...HELIUM.refs.values()])
 }
+
+window.heliumTeardown = function() {
+  if (HELIUM?.observer) HELIUM.observer.disconnect();
+  HELIUM?.bindings?.clear();
+  HELIUM?.refs?.clear();
+  HELIUM?.parentKeys?.clear();
+  HELIUM?.fnCache?.clear(); 
+  HELIUM = null;
+}
+
+// Initialize on load
+document.addEventListener("DOMContentLoaded", () => helium());
+
+// Turbo integration
+document.addEventListener("turbo:before-render", () => {
+  if (HELIUM?.observer) HELIUM.observer.disconnect();
+  window.heliumTeardown();
+});
+
+document.addEventListener("turbo:render", () => {
+  helium();
+});

package/package.json

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