@muscara/htmx-jsonata 0.0.5 → 0.0.6

package/README.md

@@ -2,30 +2,45 @@
 
 [htmx extension](https://htmx.org/extensions) that provides [jsonata](https://jsonata.org) query functionality for htmx elements
 
-add the following to your project to begin. **make sure you import after htmx and jsonata**
+> [!TIP]
+> make sure htmx-jsonata is imported after htmx and jsonata.
+
 ```html
 <!-- ... include jsonata -->
 <!-- ... include htmx -->
 <script src="https://unpkg.com/@muscara/htmx-jsonata/htmx-jsonata.min.js"></script>
 ```
 
-> only GET request method is supported
-
-## usage
-
-attributes:
-
-- `jn-url` (required): the JSON API URL to fetch data from.
-
-- `jn-expression`: jsonata expression to filter, transform, or query the JSON response.
+## attributes
 
+- `jn-url` (required): the url to fetch data from.
+- `jn-query`: jsonata expression to filter and transform the data
 - `jn-path`: specifies a path to nested data (supports dot notation).
+- `jn-each`: marks an element as a template to be cloned for each item in an array response.
+
+## example
 
-example use:
+[sample API response](https://my-json-server.typicode.com/kevinmuscara/htmx-jsonata/events)
 
 ```html
-<div jn-url="https://jsonplaceholder.typicode.com/users" jn-expression="$[name='Leanne Graham']">
-  <h1 jn-path="name"></h1>
-  <p jn-path="phone"></p>
+<div
+  jn-url="https://my-json-server.typicode.com/kevinmuscara/htmx-jsonata/events"
+  jn-query="
+    $[type='login'].{
+      'user': user,
+      'totalDuration': $sum(duration)
+    }
+    ~> $distinct()"
+>
+  <ul>
+    <li jn-each>
+      <span jn-path="user"></span>: <span jn-path="totalDuration"></span> min
+    </li>
+  </ul>
 </div>
 ```
+
+Output:
+* alice: 15 min
+* charlie: 8 min
+* bob: 20 min

package/db.json

@@ -0,0 +1,38 @@
+{
+  "users": [
+    {
+      "id": 1,
+      "name": "Kevin Muscara",
+      "username": "muscara",
+      "email": "kevin@muscara.com",
+      "address": {
+        "street": "Light road",
+        "suite": "Apt. 556",
+        "city": "Cincinnati",
+        "zipcode": "45245"
+      }
+    }
+  ],
+  "events": [
+    {
+      "type": "login",
+      "user": "alice",
+      "duration": 15
+    },
+    {
+      "type": "purchase",
+      "user": "bob",
+      "amount": 120
+    },
+    {
+      "type": "login",
+      "user": "charlie",
+      "duration": 8
+    },
+    {
+      "type": "login",
+      "user": "bob",
+      "duration": 20
+    }
+  ]
+}

package/htmx-jsonata.js

@@ -21,7 +21,7 @@
   }
 
   function processJsonataElement(element, url) {
-    const jsonataExpression = element.getAttribute('jn-expression');
+    const jsonataExpression = element.getAttribute('jn-query');
     
     fetch(url)
       .then(response => {
@@ -41,10 +41,6 @@
             Promise.resolve(evaluateResult).then(evalResult => {
               result = evalResult;
               
-              if (Array.isArray(result) && result.length === 1) {
-                result = result[0];
-              }
-              
               populateElements(element, result);
             });
           } catch (error) {
@@ -61,6 +57,38 @@
   }
   
   function populateElements(element, result) {
+    const eachElement = element.querySelector('[jn-each]');
+    
+    if (eachElement && Array.isArray(result)) {
+      const parent = eachElement.parentElement;
+      const template = eachElement.cloneNode(true);      
+      parent.innerHTML = '';
+      
+      result.forEach(item => {
+        const clone = template.cloneNode(true);
+        clone.removeAttribute('jn-each');
+        
+        const pathElements = clone.querySelectorAll('[jn-path]');
+        pathElements.forEach(pathElt => {
+          const propertyName = pathElt.getAttribute('jn-path');
+          if (item && propertyName) {
+            const value = getNestedProperty(item, propertyName);
+            if (value !== undefined && value !== null) {
+              if (pathElt.tagName === 'INPUT' || pathElt.tagName === 'TEXTAREA') {
+                pathElt.value = value;
+              } else {
+                pathElt.textContent = value;
+              }
+            }
+          }
+        });
+        
+        parent.appendChild(clone);
+      });
+      
+      return;
+    }
+    
     const propertyElements = element.querySelectorAll('[jn-path]');
     
     propertyElements.forEach(propElt => {

package/htmx-jsonata.min.js

@@ -1 +1 @@
-!function(){const t=window.jsonata||("undefined"!=typeof jsonata?jsonata:null);function e(e,r){const o=e.getAttribute("jn-expression");fetch(r).then((t=>{if(!t.ok)throw new Error(`error: ${t.status}`);return t.json()})).then((r=>{let a=r;if(o)try{const s=t(o).evaluate(r);Promise.resolve(s).then((t=>{a=t,Array.isArray(a)&&1===a.length&&(a=a[0]),n(e,a)}))}catch(t){return void console.error("Error evaluating jsonata expression:",t)}else n(e,a)})).catch((t=>{console.error("Error fetching or processing jsonata data:",t)}))}function n(t,e){t.querySelectorAll("[jn-path]").forEach((t=>{const n=t.getAttribute("jn-path");if(e&&n){const r=function(t,e){if(!t||!e)return;let n=t;const r=e.split(".");for(const t of r){const e=t.match(/^(.+?)\[(\d+)\]$/);if(e){const t=e[1],r=parseInt(e[2],10);if(!n||"object"!=typeof n||!(t in n))return;if(n=n[t],!(Array.isArray(n)&&r>=0&&r<n.length))return;n=n[r]}else{if(!n||"object"!=typeof n||!(t in n))return;n=n[t]}}return n}(e,n);null!=r&&("INPUT"===t.tagName||"TEXTAREA"===t.tagName?t.value=r:t.textContent=r)}}))}function r(){document.querySelectorAll("[jn-url]").forEach((t=>{const n=t.getAttribute("jn-url");n&&e(t,n)}))}t?("undefined"!=typeof htmx&&htmx.defineExtension("jsonata",{onEvent:function(t,n){if("htmx:afterProcessNode"===t){const t=n.detail.elt,r=t.getAttribute("jn-url");r&&e(t,r)}return!0}}),"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>r())):r()):console.error("htmx-jsonata extension requires the jsonata library. Include it before this extension.")}();
+!function(){const t=window.jsonata||("undefined"!=typeof jsonata?jsonata:null);function e(e,o){const r=e.getAttribute("jn-query");fetch(o).then((t=>{if(!t.ok)throw new Error(`error: ${t.status}`);return t.json()})).then((o=>{let a=o;if(r)try{const c=t(r).evaluate(o);Promise.resolve(c).then((t=>{a=t,n(e,a)}))}catch(t){return void console.error("Error evaluating jsonata expression:",t)}else n(e,a)})).catch((t=>{console.error("Error fetching or processing jsonata data:",t)}))}function n(t,e){const n=t.querySelector("[jn-each]");if(n&&Array.isArray(e)){const t=n.parentElement,r=n.cloneNode(!0);return t.innerHTML="",void e.forEach((e=>{const n=r.cloneNode(!0);n.removeAttribute("jn-each");n.querySelectorAll("[jn-path]").forEach((t=>{const n=t.getAttribute("jn-path");if(e&&n){const r=o(e,n);null!=r&&("INPUT"===t.tagName||"TEXTAREA"===t.tagName?t.value=r:t.textContent=r)}})),t.appendChild(n)}))}t.querySelectorAll("[jn-path]").forEach((t=>{const n=t.getAttribute("jn-path");if(e&&n){const r=o(e,n);null!=r&&("INPUT"===t.tagName||"TEXTAREA"===t.tagName?t.value=r:t.textContent=r)}}))}function o(t,e){if(!t||!e)return;let n=t;const o=e.split(".");for(const t of o){const e=t.match(/^(.+?)\[(\d+)\]$/);if(e){const t=e[1],o=parseInt(e[2],10);if(!n||"object"!=typeof n||!(t in n))return;if(n=n[t],!(Array.isArray(n)&&o>=0&&o<n.length))return;n=n[o]}else{if(!n||"object"!=typeof n||!(t in n))return;n=n[t]}}return n}function r(){document.querySelectorAll("[jn-url]").forEach((t=>{const n=t.getAttribute("jn-url");n&&e(t,n)}))}t?("undefined"!=typeof htmx&&htmx.defineExtension("jsonata",{onEvent:function(t,n){if("htmx:afterProcessNode"===t){const t=n.detail.elt,o=t.getAttribute("jn-url");o&&e(t,o)}return!0}}),"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>r())):r()):console.error("htmx-jsonata extension requires the jsonata library. Include it before this extension.")}();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muscara/htmx-jsonata",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "htmx extension that provides jsonata query functionality for htmx elements",
   "main": "htmx-jsonata.min.js",
   "scripts": {