htmx.org 4.0.0-alpha1 → 4.0.0-alpha2

package/dist/ext/hx-optimistic.js

@@ -0,0 +1,81 @@
+(() =>{
+
+    // TODO - this needs to be updated to use the new internal API
+
+    function normalizeSwapStyle(style) {
+        return style === 'before' ? 'beforebegin' :
+            style === 'after' ? 'afterend' :
+                style === 'prepend' ? 'afterbegin' :
+                    style === 'append' ? 'beforeend' : style;
+    }
+
+    function insertOptimisticContent(ctx) {
+        // TODO - handle htmx.config.prefix
+        ctx.optimistic = ctx.sourceElement.getAttribute("hx-optimistic");
+        if (!ctx.optimistic) {
+            return
+        }
+
+        // TODO - handle inheritance?
+        let sourceElt = document.querySelector(ctx.optimistic);
+        if (!sourceElt) return;
+
+        let target = ctx.target;
+        if (!target) return;
+
+        if (typeof target === 'string') {
+            target = document.querySelector(target);
+        }
+
+        // Create optimistic div with reset styling
+        let optimisticDiv = document.createElement('div');
+        optimisticDiv.style.cssText = 'all: initial';
+        optimisticDiv.innerHTML = sourceElt.innerHTML;
+
+        let swapStyle = normalizeSwapStyle(ctx.swap);
+        ctx.optHidden = [];
+
+        if (swapStyle === 'innerHTML') {
+            // Hide children of target
+            for (let child of target.children) {
+                child.style.display = 'none';
+                ctx.optHidden.push(child)
+            }
+            target.appendChild(optimisticDiv);
+            ctx.optimisticDiv = optimisticDiv;
+        } else if (['beforebegin', 'afterbegin', 'beforeend', 'afterend'].includes(swapStyle)) {
+            target.insertAdjacentElement(swapStyle, optimisticDiv);
+            ctx.optimisticDiv = optimisticDiv;
+        } else {
+            // Assume outerHTML-like behavior, Hide target and insert div after it
+            target.style.display = 'none';
+            ctx.optHidden.push(target)
+            target.after(optimisticDiv)
+            ctx.optimisticDiv = optimisticDiv;
+        }
+    }
+
+    function removeOptimisticContent(ctx) {
+        if (!ctx.optimisticDiv) return;
+
+        // Remove optimistic div
+        ctx.optimisticDiv.remove();
+
+        // Unhide any hidden elements
+        for (let elt of ctx.optHidden) {
+            elt.style.display = '';
+        }
+    }
+
+    htmx.defineExtension('hx-optimistic', {
+        htmx_before_request : (elt, detail) => {
+            insertOptimisticContent(detail.ctx);
+        },
+        htmx_error : (elt, detail) => {
+            removeOptimisticContent(detail.ctx)
+        },
+        htmx_before_swap : (elt, detail) => {
+            removeOptimisticContent(detail.ctx)
+        }
+    });
+})();

package/dist/ext/hx-optimistic.min.js

@@ -0,0 +1 @@
+(()=>{function e(e){if(e.optimisticDiv){e.optimisticDiv.remove();for(let t of e.optHidden)t.style.display=""}}htmx.defineExtension("hx-optimistic",{htmx_before_request:(e,t)=>{!function(e){if(e.optimistic=e.sourceElement.getAttribute("hx-optimistic"),!e.optimistic)return;let t=document.querySelector(e.optimistic);if(!t)return;let i=e.target;if(!i)return;"string"==typeof i&&(i=document.querySelector(i));let n=document.createElement("div");n.style.cssText="all: initial",n.innerHTML=t.innerHTML;let r="before"===(o=e.swap)?"beforebegin":"after"===o?"afterend":"prepend"===o?"afterbegin":"append"===o?"beforeend":o;var o;if(e.optHidden=[],"innerHTML"===r){for(let t of i.children)t.style.display="none",e.optHidden.push(t);i.appendChild(n),e.optimisticDiv=n}else["beforebegin","afterbegin","beforeend","afterend"].includes(r)?(i.insertAdjacentElement(r,n),e.optimisticDiv=n):(i.style.display="none",e.optHidden.push(i),i.after(n),e.optimisticDiv=n)}(t.ctx)},htmx_error:(t,i)=>{e(i.ctx)},htmx_before_swap:(t,i)=>{e(i.ctx)}})})();

package/dist/ext/hx-optimistic.min.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["removeOptimisticContent","ctx","optimisticDiv","remove","elt","optHidden","style","display","htmx","defineExtension","htmx_before_request","detail","optimistic","sourceElement","getAttribute","sourceElt","document","querySelector","target","createElement","cssText","innerHTML","swapStyle","swap","child","children","push","appendChild","includes","insertAdjacentElement","after","insertOptimisticContent","htmx_error","htmx_before_swap"],"sources":["dist/ext/hx-optimistic.js"],"mappings":"AAAA,MAyDI,SAASA,EAAwBC,GAC7B,GAAKA,EAAIC,cAAT,CAGAD,EAAIC,cAAcC,SAGlB,IAAK,IAAIC,KAAOH,EAAII,UAChBD,EAAIE,MAAMC,QAAU,EAPM,CASlC,CAEAC,KAAKC,gBAAgB,gBAAiB,CAClCC,oBAAsB,CAACN,EAAKO,MA3DhC,SAAiCV,GAG7B,GADAA,EAAIW,WAAaX,EAAIY,cAAcC,aAAa,kBAC3Cb,EAAIW,WACL,OAIJ,IAAIG,EAAYC,SAASC,cAAchB,EAAIW,YAC3C,IAAKG,EAAW,OAEhB,IAAIG,EAASjB,EAAIiB,OACjB,IAAKA,EAAQ,OAES,iBAAXA,IACPA,EAASF,SAASC,cAAcC,IAIpC,IAAIhB,EAAgBc,SAASG,cAAc,OAC3CjB,EAAcI,MAAMc,QAAU,eAC9BlB,EAAcmB,UAAYN,EAAUM,UAEpC,IAAIC,EA7Ba,YADOhB,EA8BWL,EAAIsB,MA7BX,cACd,UAAVjB,EAAoB,WACN,YAAVA,EAAsB,aACR,WAAVA,EAAqB,YAAcA,EAJnD,IAA4BA,EAiCxB,GAFAL,EAAII,UAAY,GAEE,cAAdiB,EAA2B,CAE3B,IAAK,IAAIE,KAASN,EAAOO,SACrBD,EAAMlB,MAAMC,QAAU,OACtBN,EAAII,UAAUqB,KAAKF,GAEvBN,EAAOS,YAAYzB,GACnBD,EAAIC,cAAgBA,CACxB,KAAW,CAAC,cAAe,aAAc,YAAa,YAAY0B,SAASN,IACvEJ,EAAOW,sBAAsBP,EAAWpB,GACxCD,EAAIC,cAAgBA,IAGpBgB,EAAOZ,MAAMC,QAAU,OACvBN,EAAII,UAAUqB,KAAKR,GACnBA,EAAOY,MAAM5B,GACbD,EAAIC,cAAgBA,EAE5B,CAgBQ6B,CAAwBpB,EAAOV,MAEnC+B,WAAa,CAAC5B,EAAKO,KACfX,EAAwBW,EAAOV,MAEnCgC,iBAAmB,CAAC7B,EAAKO,KACrBX,EAAwBW,EAAOV,OAG1C,EAhFD","ignoreList":[]}

package/dist/ext/hx-preload.js

@@ -0,0 +1,83 @@
+(()=>{
+    let api;
+
+    function initializePreload(elt) {
+        let preloadSpec = api.attributeValue(elt, "hx-preload");
+        if (!preloadSpec && !elt._htmx?.boosted) return;
+
+        let eventName;
+        let timeout;
+        if (preloadSpec) {
+            let specs = api.parseTriggerSpecs(preloadSpec);
+            if (specs.length === 0) return;
+            let spec = specs[0];
+            eventName = spec.name;
+            timeout = spec.timeout ? htmx.parseInterval(spec.timeout) : 5000;
+        } else {
+            eventName = htmx.config?.preload?.boostEvent || "mousedown"
+            timeout = htmx.config?.preload?.boostTimeout ? htmx.parseInterval(htmx.config?.preload?.boostTimeout) : 5000;
+        }
+
+        let preloadListener = async (evt) => {
+            let {method} = api.determineMethodAndAction(elt, evt);
+            if (method !== 'GET') return;
+
+            if (elt._htmx?.preload) return;
+
+            let ctx = api.createRequestContext(elt, evt);
+            let form = elt.form || elt.closest("form");
+            let body = api.collectFormData(elt, form, evt.submitter);
+            api.handleHxVals(elt, body);
+
+            let action = ctx.request.action.replace?.(/#.*$/, '');
+
+
+            let params = new URLSearchParams(body);
+            if (params.size) action += (/\?/.test(action) ? "&" : "?") + params;
+
+            elt._htmx.preload = {
+                prefetch: fetch(action, ctx.request),
+                action: action,
+                expiresAt: Date.now() + timeout
+            };
+
+            try {
+                await elt._htmx.preload.prefetch;
+            } catch (error) {
+                delete elt._htmx.preload;
+            }
+        };
+        elt.addEventListener(eventName, preloadListener);
+        elt._htmx.preloadListener = preloadListener;
+        elt._htmx.preloadEvent = eventName;
+    }
+
+    htmx.defineExtension('preload', {
+        init: (internalAPI) => {
+            api = internalAPI;
+        },
+
+        htmx_after_init: (elt) => {
+            initializePreload(elt);
+        },
+
+        htmx_before_request: (elt, detail) => {
+            let {ctx} = detail;
+            if (elt._htmx?.preload &&
+                elt._htmx.preload.action === ctx.request.action &&
+                Date.now() < elt._htmx.preload.expiresAt) {
+                let prefetch = elt._htmx.preload.prefetch;
+                ctx.fetch = () => prefetch;
+                delete elt._htmx.preload;
+            } else {
+                if (elt._htmx) delete elt._htmx.preload;
+            }
+        },
+
+        htmx_before_cleanup: (elt) => {
+            if (elt._htmx?.preloadListener) {
+                elt.removeEventListener(elt._htmx.preloadEvent, elt._htmx.preloadListener);
+            }
+        }
+    });
+})()

package/dist/ext/hx-preload.min.js

@@ -0,0 +1 @@
+(()=>{let e;htmx.defineExtension("preload",{init:t=>{e=t},htmx_after_init:t=>{!function(t){let r,o,a=e.attributeValue(t,"hx-preload");if(!a&&!t._htmx?.boosted)return;if(a){let t=e.parseTriggerSpecs(a);if(0===t.length)return;let l=t[0];r=l.name,o=l.timeout?htmx.parseInterval(l.timeout):5e3}else r=htmx.config?.preload?.boostEvent||"mousedown",o=htmx.config?.preload?.boostTimeout?htmx.parseInterval(htmx.config?.preload?.boostTimeout):5e3;let l=async r=>{let{method:a}=e.determineMethodAndAction(t,r);if("GET"!==a)return;if(t._htmx?.preload)return;let l=e.createRequestContext(t,r),n=t.form||t.closest("form"),m=e.collectFormData(t,n,r.submitter);e.handleHxVals(t,m);let h=l.request.action.replace?.(/#.*$/,""),i=new URLSearchParams(m);i.size&&(h+=(/\?/.test(h)?"&":"?")+i),t._htmx.preload={prefetch:fetch(h,l.request),action:h,expiresAt:Date.now()+o};try{await t._htmx.preload.prefetch}catch(e){delete t._htmx.preload}};t.addEventListener(r,l),t._htmx.preloadListener=l,t._htmx.preloadEvent=r}(t)},htmx_before_request:(e,t)=>{let{ctx:r}=t;if(e._htmx?.preload&&e._htmx.preload.action===r.request.action&&Date.now()<e._htmx.preload.expiresAt){let t=e._htmx.preload.prefetch;r.fetch=()=>t,delete e._htmx.preload}else e._htmx&&delete e._htmx.preload},htmx_before_cleanup:e=>{e._htmx?.preloadListener&&e.removeEventListener(e._htmx.preloadEvent,e._htmx.preloadListener)}})})();

package/dist/ext/hx-preload.min.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["api","htmx","defineExtension","init","internalAPI","htmx_after_init","elt","eventName","timeout","preloadSpec","attributeValue","_htmx","boosted","specs","parseTriggerSpecs","length","spec","name","parseInterval","config","preload","boostEvent","boostTimeout","preloadListener","async","evt","method","determineMethodAndAction","ctx","createRequestContext","form","closest","body","collectFormData","submitter","handleHxVals","action","request","replace","params","URLSearchParams","size","test","prefetch","fetch","expiresAt","Date","now","error","addEventListener","preloadEvent","initializePreload","htmx_before_request","detail","htmx_before_cleanup","removeEventListener"],"sources":["dist/ext/hx-preload.js"],"mappings":"AAAA,MACI,IAAIA,EAqDJC,KAAKC,gBAAgB,UAAW,CAC5BC,KAAOC,IACHJ,EAAMI,GAGVC,gBAAkBC,KAxDtB,SAA2BA,GACvB,IAGIC,EACAC,EAJAC,EAAcT,EAAIU,eAAeJ,EAAK,cAC1C,IAAKG,IAAgBH,EAAIK,OAAOC,QAAS,OAIzC,GAAIH,EAAa,CACb,IAAII,EAAQb,EAAIc,kBAAkBL,GAClC,GAAqB,IAAjBI,EAAME,OAAc,OACxB,IAAIC,EAAOH,EAAM,GACjBN,EAAYS,EAAKC,KACjBT,EAAUQ,EAAKR,QAAUP,KAAKiB,cAAcF,EAAKR,SAAW,GAChE,MACID,EAAYN,KAAKkB,QAAQC,SAASC,YAAc,YAChDb,EAAUP,KAAKkB,QAAQC,SAASE,aAAerB,KAAKiB,cAAcjB,KAAKkB,QAAQC,SAASE,cAAgB,IAG5G,IAAIC,EAAkBC,MAAOC,IACzB,IAAIC,OAACA,GAAU1B,EAAI2B,yBAAyBrB,EAAKmB,GACjD,GAAe,QAAXC,EAAkB,OAEtB,GAAIpB,EAAIK,OAAOS,QAAS,OAExB,IAAIQ,EAAM5B,EAAI6B,qBAAqBvB,EAAKmB,GACpCK,EAAOxB,EAAIwB,MAAQxB,EAAIyB,QAAQ,QAC/BC,EAAOhC,EAAIiC,gBAAgB3B,EAAKwB,EAAML,EAAIS,WAC9ClC,EAAImC,aAAa7B,EAAK0B,GAEtB,IAAII,EAASR,EAAIS,QAAQD,OAAOE,UAAU,OAAQ,IAG9CC,EAAS,IAAIC,gBAAgBR,GAC7BO,EAAOE,OAAML,IAAW,KAAKM,KAAKN,GAAU,IAAM,KAAOG,GAE7DjC,EAAIK,MAAMS,QAAU,CAChBuB,SAAUC,MAAMR,EAAQR,EAAIS,SAC5BD,OAAQA,EACRS,UAAWC,KAAKC,MAAQvC,GAG5B,UACUF,EAAIK,MAAMS,QAAQuB,QAC5B,CAAE,MAAOK,UACE1C,EAAIK,MAAMS,OACrB,GAEJd,EAAI2C,iBAAiB1C,EAAWgB,GAChCjB,EAAIK,MAAMY,gBAAkBA,EAC5BjB,EAAIK,MAAMuC,aAAe3C,CAC7B,CAQQ4C,CAAkB7C,IAGtB8C,oBAAqB,CAAC9C,EAAK+C,KACvB,IAAIzB,IAACA,GAAOyB,EACZ,GAAI/C,EAAIK,OAAOS,SACXd,EAAIK,MAAMS,QAAQgB,SAAWR,EAAIS,QAAQD,QACzCU,KAAKC,MAAQzC,EAAIK,MAAMS,QAAQyB,UAAW,CAC1C,IAAIF,EAAWrC,EAAIK,MAAMS,QAAQuB,SACjCf,EAAIgB,MAAQ,IAAMD,SACXrC,EAAIK,MAAMS,OACrB,MACQd,EAAIK,cAAcL,EAAIK,MAAMS,SAIxCkC,oBAAsBhD,IACdA,EAAIK,OAAOY,iBACXjB,EAAIiD,oBAAoBjD,EAAIK,MAAMuC,aAAc5C,EAAIK,MAAMY,mBAIzE,EAlFD","ignoreList":[]}