@daz4126/helium 0.23.0 → 0.25.0

package/README.md

@@ -18,11 +18,10 @@ It's really simple to use - just sprinkle the magic @attributes into your HTML a
 
 Helium is designed for developers who want:
 
-- **Zero build step** - Works directly in the browser with a simple script tag
-- **Minimal learning curve** - If you know HTML and basic JavaScript, you're ready
-- **Ultra-lightweight** - Under 3KB minified and gzipped
-- **Template-first** - Your HTML is the source of truth, not JavaScript
-- **Progressive enhancement** - Add interactivity gradually where you need it
+- **Lightweight** - Just over 3KB minified and gzipped
+- **Powerful** - Declarative JavaScript in your HTML
+- **Zero build step** Works directly in the browser with no compiling
+- **Easy to learn** If you know HTML and basic JavaScript, you're ready
 
 ## Installation
 
@@ -33,7 +32,6 @@ 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>
 ```
 
@@ -47,7 +45,6 @@ Then include it in your JavaScript file and call the helium() function:
 
 ```javascript
 import helium from "@daz4126/helium"
-helium()
 ```
 
 ### Automatic Initialization
@@ -705,34 +702,16 @@ Object containing all elements marked with `@ref` (prefixed with `$`):
 <button @click="console.log($username.value)">Log Username</button>
 ```
 
-## Default Variables and Functions
+## 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.
-
-### Setting Default Values
-
-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"
-})
-```
-
-These variables will be available in all Helium expressions:
-
-```html
-<p @text="count"></p> <!-- Shows: 29 -->
-<p @text="name"></p>  <!-- Shows: Helium -->
-```
+Functions can be imported using `@import` or defined using the `@data` attribute.
 
 ### Adding Functions
 
 You can add functions that can be called from event handlers and other expressions:
 
-```javascript
-helium({ 
+```html
+@data= "{ 
   appendTo(element) {
     const li = document.createElement("li")
     li.textContent = "New Item"
@@ -745,7 +724,7 @@ helium({
       currency: 'USD'
     }).format(amount)
   }
-})
+}"
 ```
 
 Using these functions:
@@ -765,12 +744,12 @@ Using these functions:
 
 ❌ **This won't work as expected:**
 
-```javascript
-helium({ 
+```html
+@data = "{ 
   increment(n = 1) {
     count += n  // 'count' is not defined in this scope
   }
-})
+}"
 ```
 
 ```html
@@ -780,12 +759,12 @@ helium({
 ✅ **Instead, pass variables as arguments:**
 
 **Option 1: Pass specific variables**
-```javascript
-helium({ 
+```html
+@data = "{ 
   increment(currentCount, n = 1) {
     return currentCount + n
   }
-})
+}"
 ```
 
 ```html
@@ -796,8 +775,8 @@ helium({
 
 This is the recommended approach when you need to update variables:
 
-```javascript
-helium({ 
+```html
+@data = "{ 
   increment(data, n = 1) {
     data.count += n  // Will trigger reactivity
   },
@@ -807,7 +786,7 @@ helium({
     data.name = ''
     data.items = []
   }
-})
+}"
 ```
 
 ```html
@@ -829,7 +808,6 @@ If you include [Idiomorph](https://github.com/bigskysoftware/idiomorph), Helium
 <script src="https://unpkg.com/idiomorph@0.3.0/dist/idiomorph.min.js"></script>
 <script type="module">
   import helium from 'https://cdn.jsdelivr.net/gh/daz-codes/helium/helium.js';
-  helium();
 </script>
 ```
 
@@ -891,24 +869,6 @@ Helium automatically integrates with Turbo Drive:
 
 No additional configuration needed - just use Helium with Turbo normally.
 
-### Manual Cleanup
-
-If you need to manually clean up Helium (for example, when unmounting a section of your page):
-
-```javascript
-window.heliumTeardown()
-```
-
-This will:
-- Disconnect the MutationObserver
-- Remove all event listeners
-- Clear all internal state
-
-To reinitialize after teardown:
-```javascript
-helium()
-```
-
 ## Security Considerations
 
 ### XSS Prevention

package/helium.js

@@ -1,18 +1,23 @@
 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 INPUT_EVENTS = { form: "submit", input: "input", textarea:"input", select:"change" };
+const getEvent = el => INPUT_EVENTS[el.tagName.toLowerCase()] || "click";
 const debounce=(f,d)=>{let t;return(...a)=>(clearTimeout(t),t=setTimeout(f,d,...a))}
 
 // Single global object to hold all settings
 let HELIUM = null;
 
-window.helium = function() {
+window.helium = async function() {
   let initFn;
   const ALL = Symbol("all");
-  const he = (n,...a) => {
-  const prefix = n.split(/[.:]/)[0];
-  if (prefix === ":" || prefix === "") return false;
-  return a.map(b => `|@${b}|data-he-${b}|`).join``.includes(`|${prefix}|`);
-};
+  const HE_ATTR_REGEX = /^(@|:|data-he)/;
+  const he = (n, ...a) => {
+    const prefix = n.split(/[.:]/)[0];
+    if (prefix === ":" || prefix === "") return false;
+    for (const attr of a) {
+      if (prefix === `@${attr}` || prefix === `data-he-${attr}`) return true;
+    }
+    return false;
+  };
   const root = document.querySelector("[\\@helium]") || document.querySelector("[data-helium]") || document.body;
   
   // Initialize or reuse HELIUM object
@@ -34,7 +39,7 @@ window.helium = function() {
 
   const update = (data,targets,actions,template) => {
     const newTargets = [];
-    targets?.forEach((target,i) => {
+    targets.forEach((target,i) => {
     const element = target instanceof Node ? target : (HELIUM.refs.get(target.trim()) || $(target.trim()));
       if(element){
         const content = template ? template(data) : data;
@@ -46,7 +51,7 @@ window.helium = function() {
   }  
   
 const ajax = (url,method,options={},params={}) => {
-    if(options.loading && options.target) options.target = update(options.loading,options.target,options.action) || options.target;
+    if(options.loading) options.target = update(options.loading,options.target,options.action) || options.target;
     const fd = params instanceof FormData, token = document.querySelector('meta[name="csrf-token"]')?.content;
     const path = new URL(url, window.location.href);
     const sameOrigin = path.origin === window.location.origin;
@@ -66,7 +71,7 @@ fetch(url, {
                 type.includes("json")         ? res.json() :
                                                 res.text());
       }).then(data =>
-        data.turbo && "Turbo"
+        (data.turbo && window.Turbo)
           ? Turbo.renderStreamMessage(data.data)
           : update(data, options.target, options.loading ? options.action.map(a => a && "replace") : options.action, options.template)
       ).catch(e => console.error("AJAX:", e.message));
@@ -103,7 +108,7 @@ const handler = {
   
 function applyBinding(b,e={},elCtx=b.el){
   const {el,prop,fn,calc}=b;
-  const r=fn($,state,e,elCtx,html,...Object.values(state),...[...HELIUM.refs.values()]);
+  const r=fn($,state,e,elCtx,html,get,post,put,patch,del);
   if (calc) state[calc] = r
   
   if (prop==="innerHTML") {
@@ -117,7 +122,10 @@ function applyBinding(b,e={},elCtx=b.el){
       k.split(/\s+/).forEach(c => el.classList.toggle(c,v)));
 
   if (prop==="style" && r && typeof r==="object")
-  return el.style.cssText = Object.entries(r).map(([k,v])=>v?`${k}:${v}`:'').join(";");
+  return el.style.cssText = Object.entries(r)
+    .filter(([_, v]) => v != null && v !== false)
+    .map(([k, v]) => `${k}:${v}`)
+    .join("; ");
 
   if (prop in el) {
     if (el.type === "radio" && prop != "checked") el.checked = el.value===r;
@@ -134,7 +142,6 @@ const compile = (expr, withReturn = false) => {
   try {
     const fn = new Function(
       "$","$data","$event","$el","$html","$get","$post","$put","$patch","$delete",
-      ...Object.keys(state), ...[...HELIUM.refs.keys()],
       withReturn 
         ? `with($data){return(${expr.trim()})}` 
         : `with($data){${expr.trim()}}`
@@ -142,17 +149,7 @@ const compile = (expr, withReturn = false) => {
     HELIUM.fnCache.set(key, fn);
     return fn;
   } catch {
-    try {
-      const fn = new Function(
-        "$","$data","$event","$el","$html","$get","$post","$put","$patch","$delete",
-        ...Object.keys(state), ...[...HELIUM.refs.keys()],
-        `with($data){${expr.trim()}}`
-      );
-      HELIUM.fnCache.set(key, fn);
-      return fn;
-    } catch {
-      return () => expr;
-    }
+    return () => expr;
   }
 };
 
@@ -173,30 +170,56 @@ const trackDependencies = (fn, el, excludeChanged = false) => {
   return excludeChanged ? [...accessed.keys()].filter(prop => state[prop] === accessed.get(prop)) : [...accessed];
 };
 
-  const cleanup = el => {
+const cleanup = el => {
     [el,...el.querySelectorAll('*')].forEach(e => {
       HELIUM.listeners.get(e)?.forEach(({receiver,event,handler}) => receiver.removeEventListener(event,handler));
       HELIUM.listeners.delete(e);
     });
   };
 
-function processElements(element) {
+async function processElements(element) {
     const newBindings = [];
     const deferredBindings = [];
 
-    const heElements = [element, ...element.querySelectorAll("*")]
-      .filter(e => !HELIUM.processed.has(e) && [...e.attributes].some(a => /^(@|:|data-he)/.test(a.name)));
+   const heElements = [element, ...element.querySelectorAll("*")].filter(e => {
+      if (HELIUM.processed.has(e)) return false;
+      for (let i = 0; i < e.attributes.length; i++) {
+        if (HE_ATTR_REGEX.test(e.attributes[i].name)) return true;
+      }
+      return false;
+    });
 
     const addBinding = (val, 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);
     };
+  
+    const importPromises = [];
+  
+    heElements.forEach(el => {
+      const importAttr = el.getAttribute("@import") || el.getAttribute("data-he-import");
+      if (importAttr) {
+        importAttr.split(",").map(m => m.trim()).forEach(moduleName => {
+          importPromises.push(
+            import(`helium_modules/${moduleName}`)
+              .then(module => {
+                Object.keys(module).forEach(key => state[key] = module[key]);
+              })
+              .catch(error => {
+                console.error(`Failed to import module: ${moduleName}`, error.message);
+              })
+          );
+        });
+      }
+    });
+  
+    if (importPromises.length > 0) await Promise.all(importPromises);
 
     heElements.forEach(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(state), ...[...HELIUM.refs.values()]);
+      const execFn = v => compile(v, true)($, state, {}, el, html, get, post, put, patch, del);
       const inputType = el.type?.toLowerCase();
       const isCheckbox = inputType == "checkbox", isRadio = inputType == "radio", isSelect = el.tagName == "SELECT";
 
@@ -216,7 +239,7 @@ function processElements(element) {
         }
 
         // Process the attribute
-        if (["@data", "data-he"].includes(name)) {
+        if (name === "@data" || name === "data-he") {
           Object.assign(state, parseEx(value));
         }
         else if (name.startsWith(":") || name.startsWith("data-he-attr:")) {
@@ -249,9 +272,6 @@ function processElements(element) {
         else if (he(name, "effect")) {
           deferredBindings.push({el, prop: null, fn: compile(value, true), keys: name.split(":").slice(1)});
         }
-        else if (he(name, "import")) {
-          value.split(",").map(s => s.trim()).forEach(v => state[v] = window[v]);
-        }
         else if (he(name, "init")) {
           initFn = compile(value, true);
         }
@@ -264,7 +284,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(state), ...[...HELIUM.refs.values()])
+    const exFn = v => compile(v,true)($, state, e, el, html, get, post, put, patch, del)
             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;
@@ -278,9 +298,9 @@ function processElements(element) {
             if (!mods.includes("outside") || !el.contains(e.target)) {
               if (isHttpMethod) {
                 const getAttr = name => el.getAttribute(`data-he-${name}`) || el.getAttribute(`@${name}`);
-                const pairs = getAttr('target')?.split(",")?.map(p => p.split(":").map(s => s.trim()));
-const target = pairs?.map(([target]) => target);
-const action = pairs?.map(([, action]) => action);
+                const pairs = (getAttr('target') || "").split(",").map(p => p.split(":").map(s => s.trim()));
+const target = pairs.map(([target]) => target);
+const action = pairs.map(([, action]) => action);
                 const options = {
                   ...(getAttr("options") && parseEx(getAttr("options") || "{}")),
                   ...(target && { target }),
@@ -318,17 +338,23 @@ const action = pairs?.map(([, action]) => action);
   }
   
   // Create new observer
-  HELIUM.observer = new MutationObserver(ms => {
+  HELIUM.observer = new MutationObserver(async (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));
+      m.removedNodes.forEach((n) => n.nodeType === 1 && cleanup(n));
+      
+      for (const n of m.addedNodes) {
+        if (n.nodeType === 1 && !HELIUM.processed.has(n)) {
+          const bindings = await processElements(n);
+          bindings?.forEach(applyBinding);
+        }
+      }
     }
   });
   HELIUM.observer.observe(root, { childList: true, subtree: true });
   
-  processElements(root);
-  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()])
+  const initialBindings = await processElements(root);
+  initialBindings.forEach(applyBinding);
+  if(initFn) initFn($, state, {}, {}, html, get, post, put, patch, del)
 }
 
 window.heliumTeardown = function() {

package/package.json

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