@muscara/htmx-jsonata 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+GLWT (Good Luck With That) Public License
+Copyright (c) Everyone, except Author
+
+Everyone is permitted to copy, distribute, modify, merge, sell, publish,
+sublicense or whatever they want with this software but at their own risk.
+
+Preamble
+
+The author has absolutely no responsibility for what mess this project may cause.
+It might just work, it might not, there is no third option.
+
+Terms and Conditions for Copying, Distribution, and Modification
+
+You may do whatever you want to as long as you never leave a
+trace to track the author of the original product to blame for or hold
+responsible.
+
+IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,22 @@
+# htmx-jsonata
+
+[htmx extension](https://htmx.org/extensions) that provides [jsonata](https://jsonata.org) query functionality for htmx elements
+
+> only GET request method is supported
+
+## usage
+
+```html
+<div jsonata-url="https://jsonplaceholder.typicode.com/users" jsonata="$[name='Leanne Graham']">
+  <h1 jsonata-property="name"></h1>
+  <p jsonata-property="phone"></p>
+</div>
+```
+
+### attributes
+
+`jsonata-url` (required): the JSON API URL to fetch data from.
+
+`jsonata`: jsonata expression to filter, transform, or query the JSON response.
+
+`jsonata-property`: specifies which property from the parsed result to display in the element.

package/htmx-jsonata.js

@@ -0,0 +1,130 @@
+(function() {
+  const jsonataLib = window.jsonata || (typeof jsonata !== 'undefined' ? jsonata : null);
+  
+  if (!jsonataLib) {
+    console.error('htmx-jsonata extension requires the jsonata library. Include it before this extension.');
+    return;
+  }
+
+  if (typeof htmx !== 'undefined') {
+    htmx.defineExtension('jsonata', {
+      onEvent: function(name, evt) {
+        if (name === 'htmx:afterProcessNode') {
+          const elt = evt.detail.elt;
+          const jsonataUrl = elt.getAttribute('jsonata-url');
+
+          if (jsonataUrl) processJsonataElement(elt, jsonataUrl)
+        }
+        return true;
+      }
+    });
+  }
+
+  function processJsonataElement(element, url) {
+    const jsonataExpression = element.getAttribute('jsonata');
+    
+    fetch(url)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`error: ${response.status}`);
+        }
+
+        return response.json();
+      })
+      .then(data => {
+        let result = data;        
+        if (jsonataExpression) {
+          try {
+            const expression = jsonataLib(jsonataExpression);
+            const evaluateResult = expression.evaluate(data);
+            
+            Promise.resolve(evaluateResult).then(evalResult => {
+              result = evalResult;
+              
+              if (Array.isArray(result) && result.length === 1) {
+                result = result[0];
+              }
+              
+              populateElements(element, result);
+            });
+          } catch (error) {
+            console.error('Error evaluating jsonata expression:', error);
+            return;
+          }
+        } else {
+          populateElements(element, result);
+        }
+      })
+      .catch(error => {
+        console.error('Error fetching or processing jsonata data:', error);
+      });
+  }
+  
+  function populateElements(element, result) {
+    const propertyElements = element.querySelectorAll('[jsonata-property]');
+    
+    propertyElements.forEach(propElt => {
+      const propertyName = propElt.getAttribute('jsonata-property');
+      
+      if (result && propertyName) {
+        const value = getNestedProperty(result, propertyName);
+        
+        if (value !== undefined && value !== null) {
+          if (propElt.tagName === 'INPUT' || propElt.tagName === 'TEXTAREA') {
+            propElt.value = value;
+          } else {
+            propElt.textContent = value;
+          }
+        }
+      }
+    });
+  }
+
+  function getNestedProperty(obj, path) {
+    if (!obj || !path) return undefined;
+    let result = obj;    
+    const parts = path.split('.');
+    
+    for (const part of parts) {
+      const arrayMatch = part.match(/^(.+?)\[(\d+)\]$/);
+      
+      if (arrayMatch) {
+        const propName = arrayMatch[1];
+        const index = parseInt(arrayMatch[2], 10);
+        
+        if (result && typeof result === 'object' && propName in result) {
+          result = result[propName];
+          if (Array.isArray(result) && index >= 0 && index < result.length) {
+            result = result[index];
+          } else {
+            return undefined;
+          }
+        } else {
+          return undefined;
+        }
+      } else {
+        if (result && typeof result === 'object' && part in result) {
+          result = result[part];
+        } else {
+          return undefined;
+        }
+      }
+    }
+    
+    return result;
+  }
+
+  function initializeJsonataElements() {
+    const elements = document.querySelectorAll('[jsonata-url]');
+    elements.forEach(elt => {
+      const url = elt.getAttribute('jsonata-url');
+      if (url) processJsonataElement(elt, url);
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => initializeJsonataElements());
+  } else {
+    initializeJsonataElements();
+  }
+})();

package/htmx-jsonata.min.js

@@ -0,0 +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.")}();

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@muscara/htmx-jsonata",
+  "version": "0.0.1",
+  "description": "htmx extension that provides jsonata query functionality for htmx elements",
+  "main": "htmx-jsonata.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kevinmuscara/htmx-jsonata.git"
+  },
+  "keywords": [
+    "htmx",
+    "jsonata",
+    "htmx-jsonata",
+    "jsonata-htmx",
+    "htmx-json",
+    "json"
+  ],
+  "author": "Kevin Muscara",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "bugs": {
+    "url": "https://github.com/kevinmuscara/htmx-jsonata/issues"
+  },
+  "homepage": "https://github.com/kevinmuscara/htmx-jsonata#readme"
+}