@muscara/htmx-jsonata 0.0.3 → 0.0.5

package/README.md

@@ -2,32 +2,30 @@
 
 [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.
+add the following to your project to begin. **make sure you import after htmx and jsonata**
 ```html
-<script src="https://unpkg.com/@muscara/htmx-jsonata/htmx-jsonata.min.js"></script>
-<!-- ... include htmx -->
 <!-- ... include jsonata -->
+<!-- ... include htmx -->
+<script src="https://unpkg.com/@muscara/htmx-jsonata/htmx-jsonata.min.js"></script>
 ```
 
 > only GET request method is supported
 
 ## usage
 
-```html
-<script src="https://unpkg.com/@muscara/htmx-jsonata@0.0.1/htmx-jsonata.min.js"></script>
-<script src="https://unpkg.com/htmx.org@1.9.10"></script>
-<script src="https://cdn.jsdelivr.net/npm/jsonata@2.0.3/jsonata.min.js"></script> 
+attributes:
 
-<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` (required): the JSON API URL to fetch data from.
 
-### attributes
+- `jn-expression`: jsonata expression to filter, transform, or query the JSON response.
 
-`jsonata-url` (required): the JSON API URL to fetch data from.
+- `jn-path`: specifies a path to nested data (supports dot notation).
 
-`jsonata`: jsonata expression to filter, transform, or query the JSON response.
+example use:
 
-`jsonata-property`: specifies which property from the parsed result to display in the element.
+```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>
+```

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-expression');
     
     fetch(url)
       .then(response => {
@@ -61,10 +61,10 @@
   }
   
   function populateElements(element, result) {
-    const propertyElements = element.querySelectorAll('[jsonata-property]');
+    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 +115,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,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.")}();

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@muscara/htmx-jsonata",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "htmx extension that provides jsonata query functionality for htmx elements",
-  "main": "htmx-jsonata.js",
+  "main": "htmx-jsonata.min.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },