@muscara/htmx-jsonata 0.0.4 → 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:
+## attributes
 
-- `jsonata-url` (required): the JSON API URL to fetch data from.
+- `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.
 
-- `jsonata`: jsonata expression to filter, transform, or query the JSON response.
+## example
 
-- `jsonata-property`: specifies which property from the parsed result to display in the element.
-
-example use:
+[sample API response](https://my-json-server.typicode.com/kevinmuscara/htmx-jsonata/events)
 
 ```html
-<div jsonata-url="https://jsonplaceholder.typicode.com/users" jsonata="$[name='Leanne Graham']">
-  <h1 jsonata-property="name"></h1>
-  <p jsonata-property="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

@@ -11,7 +11,7 @@
       onEvent: function(name, evt) {
         if (name === 'htmx:afterProcessNode') {
           const elt = evt.detail.elt;
-          const jsonataUrl = elt.getAttribute('jsonata-url');
+          const jsonataUrl = elt.getAttribute('jn-url');
 
           if (jsonataUrl) processJsonataElement(elt, jsonataUrl)
         }
@@ -21,7 +21,7 @@
   }
 
   function processJsonataElement(element, url) {
-    const jsonataExpression = element.getAttribute('jsonata');
+    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,10 +57,42 @@
   }
   
   function populateElements(element, result) {
-    const propertyElements = element.querySelectorAll('[jsonata-property]');
+    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 => {
-      const propertyName = propElt.getAttribute('jsonata-property');
+      const propertyName = propElt.getAttribute('jn-path');
       
       if (result && propertyName) {
         const value = getNestedProperty(result, propertyName);
@@ -115,9 +143,9 @@
   }
 
   function initializeJsonataElements() {
-    const elements = document.querySelectorAll('[jsonata-url]');
+    const elements = document.querySelectorAll('[jn-url]');
     elements.forEach(elt => {
-      const url = elt.getAttribute('jsonata-url');
+      const url = elt.getAttribute('jn-url');
       if (url) processJsonataElement(elt, url);
     });
   }

package/htmx-jsonata.min.js

@@ -1 +1 @@
-!function(){const t=window.jsonata||("undefined"!=typeof jsonata?jsonata:null);function e(e,o){const r=e.getAttribute("jsonata");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 s=t(r).evaluate(o);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("[jsonata-property]").forEach((t=>{const n=t.getAttribute("jsonata-property");if(e&&n){const o=function(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}(e,n);null!=o&&("INPUT"===t.tagName||"TEXTAREA"===t.tagName?t.value=o:t.textContent=o)}}))}function o(){document.querySelectorAll("[jsonata-url]").forEach((t=>{const n=t.getAttribute("jsonata-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("jsonata-url");o&&e(t,o)}return!0}}),"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>o())):o()):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.4",
+  "version": "0.0.6",
   "description": "htmx extension that provides jsonata query functionality for htmx elements",
   "main": "htmx-jsonata.min.js",
   "scripts": {