@daz4126/helium 0.23.0 → 0.24.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

@@ -34,7 +34,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 +46,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;
@@ -180,7 +180,7 @@ const trackDependencies = (fn, el, excludeChanged = false) => {
     });
   };
 
-function processElements(element) {
+async function processElements(element) {
     const newBindings = [];
     const deferredBindings = [];
 
@@ -191,6 +191,20 @@ function processElements(element) {
       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(async el => {
+      const importAttr = el.getAttribute("@import") || el.getAttribute("data-he-import");
+      if (importAttr) {        
+         importAttr.split(",").map(m => m.trim()).forEach(async moduleName => {
+          try {
+            const module = await import(`helium_modules/${moduleName}.js`);
+            Object.keys(module).forEach(key => state[key] = module[key]);
+          } catch (error) {
+            console.error(`Failed to import module: ${moduleName}`, error.message);
+          }
+        })
+      }
+    })
 
     heElements.forEach(el => {
       HELIUM.processed.add(el);
@@ -249,9 +263,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);
         }
@@ -278,9 +289,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 }),

package/package.json

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