hx-tomselect 1.0.14 → 1.0.15

package/hx-tomselect.js

@@ -2,6 +2,9 @@
     /** stable build*/
     const version = '11'
 
+    /** Resolve htmx from global (script tag) so we work with htmx 4 and correct load order. */
+    function getHtmx() { return typeof window !== 'undefined' && window.htmx; }
+
     /**
      * @typedef {Object} SupportedAttribute
      * Defines an attribute supported by a configuration modification system.
@@ -166,7 +169,7 @@
 							}
 							return res.text();
 						})
-                        .then((responseHtml) => htmx.process(elm, responseHtml))
+                        .then((responseHtml) => getHtmx().process(elm, responseHtml))
                         .catch(error => {
                             console.error('Error adding item', error)
                             elm.setAttribute('tom-select-warning', `ts-add-post-url - Error processing item: ${JSON.stringify(error)}`);
@@ -225,7 +228,7 @@
                 multiple: false,
                 onChange: function(value) {
                     const urlTemplate = elm.getAttribute('ts-on-change-navigate')
-                    if(urlTemplate){
+                    if(urlTemplate && value){
                         const url = urlTemplate.replace('{value}', value)
                         window.location.href = url
                     }else{
@@ -310,7 +313,10 @@
     }
     }
 
-    htmx.defineExtension('tomselect', {
+    function register() {
+        var h = getHtmx();
+        if (!h || !h.defineExtension) return false;
+        h.defineExtension('tomselect', {
         // This is doing all the tom-select attachment at this stage, but relies on this full document scan (would prefer onLoad of speicfic content):
         onEvent: function (name, evt) {
             if (name === "htmx:afterProcessNode") {
@@ -344,5 +350,22 @@
             	.forEach(elt => elt.tomselect.destroy())*/
 		}
     });
+        return true;
+    }
+    if (!register()) {
+        function tryRegister() {
+            if (register()) return;
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', tryRegister);
+            } else {
+                setTimeout(tryRegister, 50);
+            }
+        }
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', tryRegister);
+        } else {
+            setTimeout(tryRegister, 50);
+        }
+    }
 
 })();

package/index.html

@@ -5,8 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>hx-tomselect</title>
-    <script defer src="./hx-tomselect.js"></script>
-    <script src="https://unpkg.com/htmx.org@latest"></script>
+    <script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-alpha7/dist/htmx.min.js"></script>
+    <script src="./hx-tomselect.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/tom-select@latest/dist/css/tom-select.css" rel="stylesheet"/>
     <script src="https://cdn.jsdelivr.net/npm/tom-select@latest/dist/js/tom-select.complete.min.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">
@@ -60,15 +60,15 @@
             <pre
                 class="mb-2 code-container"><code class="language-markup wrap">&lt;script src="https://unpkg.com/hx-tomselect/hx-tomselect.js"&gt;&lt;/script&gt;</code></pre>
 
-            this extention relies on <a class="underline" href="https://v1.htmx.org">htmx</a> and <a class="underline"
-                href="https://tom-select.js.org/">tom-select.js</a> being loaded before it is included:
+            this extention relies on <a class="underline" href="https://htmx.org">htmx</a> and <a class="underline"
+                href="https://tom-select.js.org/">tom-select.js</a> being loaded before it is included (htmx first, then this extension):
             <pre class="mb-2 code-container"><code class="language-markup">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
     &lt;head&gt;
-        &lt;script src="https://unpkg.com/htmx.org@latest"&gt;
+        &lt;script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-alpha7/dist/htmx.min.js"&gt;&lt;/script&gt;
         &lt;link href="https://unpkg.com/tom-select@latest/dist/css/tom-select.css" rel="stylesheet" /&gt;
-        &lt;script src="https://unpkg.com/tom-select@latest/dist/js/tom-select.complete.min.js"&gt;
-        &lt;script src="https://unpkg.com/hx-tomselect/hx-tomselect.js"/&gt;
+        &lt;script src="https://unpkg.com/tom-select@latest/dist/js/tom-select.complete.min.js"&gt;&lt;/script&gt;
+        &lt;script src="https://unpkg.com/hx-tomselect/hx-tomselect.js"&gt;&lt;/script&gt;
     &lt;/head&gt;
     &lt;body&gt;
         &lt;select hx-ext="tomselect"&gt;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hx-tomselect",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "Htmx extension that allows rendering tom-select via plain html elements",
   "main": "hx-tomselect.js",
   "repository": {