@daz4126/helium 0.22.0 → 0.23.0

package/README.md

@@ -12,7 +12,7 @@ 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?
 
@@ -367,6 +367,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 +465,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 +491,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 +695,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 `$`):
 

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 = update(options.loading,options.target,options.action) || options.target;
+    if(options.loading && options.target) 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;
@@ -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 => {
@@ -278,9 +278,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.22.0",
+  "version": "0.23.0",
   "main": "helium.js",
   "type": "module",
   "scripts": {