From d655c0044fe0bbc7de9c00e814433cae096ded90 Mon Sep 17 00:00:00 2001 From: Alistair Shepherd Date: Fri, 27 Dec 2024 17:26:55 +0000 Subject: [PATCH] fix: check component is connected before downloading or activating --- dist/async-alpine.cjs.js | 2 ++ dist/async-alpine.esm.js | 2 ++ dist/async-alpine.script.js | 2 +- src/async-alpine.js | 2 ++ 4 files changed, 7 insertions(+), 1 deletion(-) diff --git a/dist/async-alpine.cjs.js b/dist/async-alpine.cjs.js index ec6c013..185546e 100644 --- a/dist/async-alpine.cjs.js +++ b/dist/async-alpine.cjs.js @@ -259,7 +259,9 @@ function async_alpine_default(Alpine) { el, id: el.id || index() }); + if (!el.isConnected) return; await download(name); + if (!el.isConnected) return; activate(el); el._x_async = "loaded"; })(); diff --git a/dist/async-alpine.esm.js b/dist/async-alpine.esm.js index eea9906..92e0ba9 100644 --- a/dist/async-alpine.esm.js +++ b/dist/async-alpine.esm.js @@ -224,7 +224,9 @@ function async_alpine_default(Alpine) { el, id: el.id || index() }); + if (!el.isConnected) return; await download(name); + if (!el.isConnected) return; activate(el); el._x_async = "loaded"; })(); diff --git a/dist/async-alpine.script.js b/dist/async-alpine.script.js index e888577..73d99e3 100644 --- a/dist/async-alpine.script.js +++ b/dist/async-alpine.script.js @@ -1 +1 @@ -(()=>{var T=Object.defineProperty;var w=Object.getOwnPropertySymbols;var D=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var v=(e,r,n)=>r in e?T(e,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[r]=n,y=(e,r)=>{for(var n in r||(r={}))D.call(r,n)&&v(e,n,r[n]);if(w)for(var n of w(r))M.call(r,n)&&v(e,n,r[n]);return e};var f=(e,r,n)=>new Promise((a,c)=>{var d=u=>{try{o(n.next(u))}catch(l){c(l)}},s=u=>{try{o(n.throw(u))}catch(l){c(l)}},o=u=>u.done?a(u.value):Promise.resolve(u.value).then(d,s);o((n=n.apply(e,r)).next())});function $(){return!0}function j({component:e,argument:r}){return new Promise(n=>{if(r)window.addEventListener(r,()=>n(),{once:!0});else{let a=c=>{c.detail.id===e.id&&(window.removeEventListener("async-alpine:load",a),n())};window.addEventListener("async-alpine:load",a)}})}function q(){return new Promise(e=>{"requestIdleCallback"in window?window.requestIdleCallback(e):setTimeout(e,200)})}function z({argument:e}){return new Promise(r=>{if(!e)return console.log("Async Alpine: media strategy requires a media query. Treating as 'eager'"),r();let n=window.matchMedia(`(${e})`);n.matches?r():n.addEventListener("change",r,{once:!0})})}function S({component:e,argument:r}){return new Promise(n=>{let a=r||"0px 0px 0px 0px",c=new IntersectionObserver(d=>{d[0].isIntersecting&&(c.disconnect(),n())},{rootMargin:a});c.observe(e.el)})}var g={eager:$,event:j,idle:q,media:z,visible:S};function _(e){return f(this,null,function*(){let r=H(e.strategy);yield m(e,r)})}function m(e,r){return f(this,null,function*(){if(r.type==="expression"){if(r.operator==="&&")return Promise.all(r.parameters.map(n=>m(e,n)));if(r.operator==="||")return Promise.any(r.parameters.map(n=>m(e,n)))}return g[r.method]?g[r.method]({component:e,argument:r.argument}):!1})}function H(e){let r=Q(e),n=R(r);return n.type==="method"?{type:"expression",operator:"&&",parameters:[n]}:n}function Q(e){let r=/\s*([()])\s*|\s*(\|\||&&|\|)\s*|\s*((?:[^()&|]+\([^()]+\))|[^()&|]+)\s*/g,n=[],a;for(;(a=r.exec(e))!==null;){let[c,d,s,o]=a;if(d!==void 0)n.push({type:"parenthesis",value:d});else if(s!==void 0)n.push({type:"operator",value:s==="|"?"&&":s});else{let u={type:"method",method:o.trim()};o.includes("(")&&(u.method=o.substring(0,o.indexOf("(")).trim(),u.argument=o.substring(o.indexOf("(")+1,o.indexOf(")"))),o.method==="immediate"&&(o.method="eager"),n.push(u)}}return n}function R(e){let r=b(e);for(;e.length>0&&(e[0].value==="&&"||e[0].value==="|"||e[0].value==="||");){let n=e.shift().value,a=b(e);r.type==="expression"&&r.operator===n?r.parameters.push(a):r={type:"expression",operator:n,parameters:[r,a]}}return r}function b(e){if(e[0].value==="("){e.shift();let r=R(e);return e[0].value===")"&&e.shift(),r}else return e.shift()}function E(e){let r="load",n=e.prefixed("load-src"),a=e.prefixed("ignore"),c={defaultStrategy:"eager",keepRelativeURLs:!1},d=!1,s={},o=0;function u(){return o++}e.asyncOptions=t=>{c=y(y({},c),t)},e.asyncData=(t,i=!1)=>{s[t]={loaded:!1,download:i}},e.asyncUrl=(t,i)=>{!t||!i||s[t]||(s[t]={loaded:!1,download:()=>import(N(i))})},e.asyncAlias=t=>{d=t};let l=t=>{e.skipDuringClone(()=>{t._x_async||(t._x_async="init",t._x_ignore=!0,t.setAttribute(a,""))})()},x=t=>f(this,null,function*(){e.skipDuringClone(()=>f(this,null,function*(){if(t._x_async!=="init")return;t._x_async="await";let{name:i,strategy:p}=L(t);yield _({name:i,strategy:p,el:t,id:t.id||u()}),yield U(i),P(t),t._x_async="loaded"}))()});x.inline=l,e.directive(r,x).before("ignore");function L(t){let i=C(t.getAttribute(e.prefixed("data"))),p=t.getAttribute(e.prefixed(r))||c.defaultStrategy,h=t.getAttribute(n);return h&&e.asyncUrl(i,h),{name:i,strategy:p}}function U(t){return f(this,null,function*(){if(t.startsWith("_x_async_")||(I(t),!s[t]||s[t].loaded))return;let i=yield O(t);e.data(t,i),s[t].loaded=!0})}function O(t){return f(this,null,function*(){if(!s[t])return;let i=yield s[t].download(t);return typeof i=="function"?i:i[t]||i.default||Object.values(i)[0]||!1})}function P(t){e.destroyTree(t),t._x_ignore=!1,t.removeAttribute(a),!t.closest(`[${a}]`)&&e.initTree(t)}function I(t){if(!(!d||s[t])){if(typeof d=="function"){e.asyncData(t,d);return}e.asyncUrl(t,d.replaceAll("[name]",t))}}function C(t){return(t||"").split(/[({]/g)[0]||`_x_async_${u()}`}function N(t){return c.keepRelativeURLs||new RegExp("^(?:[a-z+]+:)?//","i").test(t)?t:new URL(t,document.baseURI).href}}document.addEventListener("alpine:init",()=>{Alpine.plugin(E),document.dispatchEvent(new CustomEvent("async-alpine:init"))});})(); +(()=>{var T=Object.defineProperty;var w=Object.getOwnPropertySymbols;var D=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var v=(e,r,n)=>r in e?T(e,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[r]=n,y=(e,r)=>{for(var n in r||(r={}))D.call(r,n)&&v(e,n,r[n]);if(w)for(var n of w(r))M.call(r,n)&&v(e,n,r[n]);return e};var f=(e,r,n)=>new Promise((a,c)=>{var d=u=>{try{o(n.next(u))}catch(l){c(l)}},s=u=>{try{o(n.throw(u))}catch(l){c(l)}},o=u=>u.done?a(u.value):Promise.resolve(u.value).then(d,s);o((n=n.apply(e,r)).next())});function $(){return!0}function j({component:e,argument:r}){return new Promise(n=>{if(r)window.addEventListener(r,()=>n(),{once:!0});else{let a=c=>{c.detail.id===e.id&&(window.removeEventListener("async-alpine:load",a),n())};window.addEventListener("async-alpine:load",a)}})}function q(){return new Promise(e=>{"requestIdleCallback"in window?window.requestIdleCallback(e):setTimeout(e,200)})}function z({argument:e}){return new Promise(r=>{if(!e)return console.log("Async Alpine: media strategy requires a media query. Treating as 'eager'"),r();let n=window.matchMedia(`(${e})`);n.matches?r():n.addEventListener("change",r,{once:!0})})}function S({component:e,argument:r}){return new Promise(n=>{let a=r||"0px 0px 0px 0px",c=new IntersectionObserver(d=>{d[0].isIntersecting&&(c.disconnect(),n())},{rootMargin:a});c.observe(e.el)})}var g={eager:$,event:j,idle:q,media:z,visible:S};function _(e){return f(this,null,function*(){let r=H(e.strategy);yield m(e,r)})}function m(e,r){return f(this,null,function*(){if(r.type==="expression"){if(r.operator==="&&")return Promise.all(r.parameters.map(n=>m(e,n)));if(r.operator==="||")return Promise.any(r.parameters.map(n=>m(e,n)))}return g[r.method]?g[r.method]({component:e,argument:r.argument}):!1})}function H(e){let r=Q(e),n=R(r);return n.type==="method"?{type:"expression",operator:"&&",parameters:[n]}:n}function Q(e){let r=/\s*([()])\s*|\s*(\|\||&&|\|)\s*|\s*((?:[^()&|]+\([^()]+\))|[^()&|]+)\s*/g,n=[],a;for(;(a=r.exec(e))!==null;){let[c,d,s,o]=a;if(d!==void 0)n.push({type:"parenthesis",value:d});else if(s!==void 0)n.push({type:"operator",value:s==="|"?"&&":s});else{let u={type:"method",method:o.trim()};o.includes("(")&&(u.method=o.substring(0,o.indexOf("(")).trim(),u.argument=o.substring(o.indexOf("(")+1,o.indexOf(")"))),o.method==="immediate"&&(o.method="eager"),n.push(u)}}return n}function R(e){let r=b(e);for(;e.length>0&&(e[0].value==="&&"||e[0].value==="|"||e[0].value==="||");){let n=e.shift().value,a=b(e);r.type==="expression"&&r.operator===n?r.parameters.push(a):r={type:"expression",operator:n,parameters:[r,a]}}return r}function b(e){if(e[0].value==="("){e.shift();let r=R(e);return e[0].value===")"&&e.shift(),r}else return e.shift()}function E(e){let r="load",n=e.prefixed("load-src"),a=e.prefixed("ignore"),c={defaultStrategy:"eager",keepRelativeURLs:!1},d=!1,s={},o=0;function u(){return o++}e.asyncOptions=t=>{c=y(y({},c),t)},e.asyncData=(t,i=!1)=>{s[t]={loaded:!1,download:i}},e.asyncUrl=(t,i)=>{!t||!i||s[t]||(s[t]={loaded:!1,download:()=>import(N(i))})},e.asyncAlias=t=>{d=t};let l=t=>{e.skipDuringClone(()=>{t._x_async||(t._x_async="init",t._x_ignore=!0,t.setAttribute(a,""))})()},x=t=>f(this,null,function*(){e.skipDuringClone(()=>f(this,null,function*(){if(t._x_async!=="init")return;t._x_async="await";let{name:i,strategy:p}=L(t);yield _({name:i,strategy:p,el:t,id:t.id||u()}),t.isConnected&&(yield U(i),t.isConnected&&(O(t),t._x_async="loaded"))}))()});x.inline=l,e.directive(r,x).before("ignore");function L(t){let i=I(t.getAttribute(e.prefixed("data"))),p=t.getAttribute(e.prefixed(r))||c.defaultStrategy,h=t.getAttribute(n);return h&&e.asyncUrl(i,h),{name:i,strategy:p}}function U(t){return f(this,null,function*(){if(t.startsWith("_x_async_")||(P(t),!s[t]||s[t].loaded))return;let i=yield C(t);e.data(t,i),s[t].loaded=!0})}function C(t){return f(this,null,function*(){if(!s[t])return;let i=yield s[t].download(t);return typeof i=="function"?i:i[t]||i.default||Object.values(i)[0]||!1})}function O(t){e.destroyTree(t),t._x_ignore=!1,t.removeAttribute(a),!t.closest(`[${a}]`)&&e.initTree(t)}function P(t){if(!(!d||s[t])){if(typeof d=="function"){e.asyncData(t,d);return}e.asyncUrl(t,d.replaceAll("[name]",t))}}function I(t){return(t||"").split(/[({]/g)[0]||`_x_async_${u()}`}function N(t){return c.keepRelativeURLs||new RegExp("^(?:[a-z+]+:)?//","i").test(t)?t:new URL(t,document.baseURI).href}}document.addEventListener("alpine:init",()=>{Alpine.plugin(E),document.dispatchEvent(new CustomEvent("async-alpine:init"))});})(); diff --git a/src/async-alpine.js b/src/async-alpine.js index 3349ffa..403ba89 100644 --- a/src/async-alpine.js +++ b/src/async-alpine.js @@ -97,7 +97,9 @@ export default function (Alpine) { el, id: el.id || index(), }) + if (!el.isConnected) return await download(name) + if (!el.isConnected) return activate(el) el._x_async = 'loaded' })()