@daz4126/helium 0.22.0 → 0.24.0

package/README.md

@@ -12,17 +12,16 @@ Here's a simple example of a button that counts the number of times it has been
 
 It's really simple to use - just sprinkle the magic @attributes into your HTML and watch it come alive!
 
-[See more examples here](https://codepen.io/daz4126/pen/YPwwdBK)
+[See more examples here](https://codepen.io/daz4126/pen/ogxGMX)
 
 ## Why Helium?
 
 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
@@ -367,6 +364,8 @@ You can add modifiers by appending them with a dot (`.`) after the event name:
 
 Helium includes built-in support for making HTTP requests directly from event handlers. This makes it easy to load data, submit forms, and update parts of your page without writing fetch code.
 
+[See some examples here](https://codepen.io/daz4126/pen/dPMVGdX)
+
 ### Available HTTP Methods
 
 - `@get` - GET request
@@ -463,6 +462,17 @@ Specifies the request parameters. Can be:
 ```
 
 **Shorthand Syntax:**
+
+You can write the params in shorthand using `:` separated string of attributes:
+
+```html
+<!-- Creates { user: { name: [value] } } -->
+<button @post="/api/save" @params="user:name:value" name="value">
+  Save
+</button>
+```
+
+**Magic Parmas Syntax:**
 If the element has a `name` attribute, Helium automatically extracts its value:
 
 ```html
@@ -478,14 +488,6 @@ For checkboxes:
 <button @post="/api/consent" name="agreed">Submit</button>
 ```
 
-**Nested Object Syntax:**
-```html
-<!-- Creates { user: { name: [value] } } -->
-<button @post="/api/save" @params="user:name:value" name="value">
-  Save
-</button>
-```
-
 **FormData Example:**
 ```html
 <form @post="/api/upload">
@@ -690,6 +692,8 @@ HTTP request functions that can be called programmatically:
 </button>
 ```
 
+The arguments are `url`,`params` (not for `$get`) and `options`. `options` is an object that can include the properties `loading`,`target`, `template`
+
 ### $refs
 Object containing all elements marked with `@ref` (prefixed with `$`):
 
@@ -698,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
-
-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"
-})
-```
+## Functions
 
-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"
@@ -738,7 +724,7 @@ helium({
       currency: 'USD'
     }).format(amount)
   }
-})
+}"
 ```
 
 Using these functions:
@@ -758,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
@@ -773,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
@@ -789,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
   },
@@ -800,7 +786,7 @@ helium({
     data.name = ''
     data.items = []
   }
-})
+}"
 ```
 
 ```html
@@ -822,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>
 ```
 
@@ -884,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

@@ -57,7 +57,7 @@ fetch(url, {
     ...(!fd && method !== "GET" && {"Content-Type":"application/json"}),
     ...(sameOrigin && token ? {"X-CSRF-Token": token} : {})
   },
-  body: method === "GET" ? null : (fd ? params : JSON.stringify(parmas)),
+  body: method === "GET" ? null : (fd ? params : JSON.stringify(params)),
   credentials: sameOrigin ? "same-origin" : "omit"
 })
       .then(res => {
@@ -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);
         }

package/package.json

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