virtua/lib/solid/index.mjs

A zero-config, fast and small (~3kB) virtual list (and grid) component for React, Vue, Solid and Svelte.

import{createComponent as e,Dynamic as t,spread as r,mergeProps as n,insert as o,template as s,use as i,effect as l}from"solid-js/web";import{mergeProps as c,createEffect as a,createMemo as u,onCleanup as f,createRoot as d,createSignal as h,onMount as v,createComputed as g,on as p}from"solid-js";const m=null,{min:_,max:w,abs:$,floor:S}=Math,b=(e,t,r)=>_(r,w(t,e)),x="function"==typeof queueMicrotask?queueMicrotask:e=>{Promise.resolve().then(e)},y=e=>{let t,r;return()=>(t||(t=!0,r=e()),r)},z=-1,I=(e,t,r)=>{const n=r?"unshift":"push";for(let r=0;r<t;r++)e[n](z);return e},k=(e,t)=>{const r=e.o[t];return r===z?e.i:r},T=(e,t,r)=>{const n=e.o[t]===z;return e.o[t]=r,e.l=_(t,e.l),n},M=(e,t)=>{if(!e.u)return 0;if(e.l>=t)return e.h[t];e.l<0&&(e.h[0]=0,e.l=0);let r=e.l,n=e.h[r];for(;r<t;)n+=k(e,r),e.h[++r]=n;return e.l=t,n},E=(e,t,r=0,n=e.u-1)=>{for(;r<=n;){const o=S((r+n)/2),s=M(e,o);if(s<=t){if(s+k(e,o)>t)return o;r=o+1}else n=o-1}return b(r,0,e.u-1)},R=(e,t,r)=>{const n=t-e.u;return e.l=r?-1:_(t-1,e.l),e.u=t,n>0?(I(e.h,n),I(e.o,n,r),e.i*n):(e.h.splice(n),(r?e.o.splice(0,-n):e.o.splice(n)).reduce(((t,r)=>t-(r===z?e.i:r)),0))},O="undefined"!=typeof window,P=()=>document.documentElement,J=e=>e.ownerDocument,B=e=>e.defaultView,H=/*#__PURE__*/y((()=>!!O&&"rtl"===getComputedStyle(P()).direction)),L=/*#__PURE__*/y((()=>/iP(hone|od|ad)/.test(navigator.userAgent))),W=/*#__PURE__*/y((()=>"scrollBehavior"in P().style)),j=e=>!!e.v(),q=(e,t=40,r=4,n=0,o,s=!1)=>{let i=!!n,l=1,c=0,a=0,u=0,f=0,d=0,h=0,v=0,g=0,p=i?[0,w(n-1,0)]:m,S=[0,0],b=0;const x=((e,t)=>({i:t,o:I([],e),u:e,l:-1,h:I([],e)}))(e,t),y=new Set,O=()=>u-a,P=()=>O()+d+f,J=e=>((e,t,r,n)=>{if(n=_(n,e.u-1),M(e,n)<=t){const o=E(e,t+r,n);return[E(e,t,n,o),o]}{const o=E(e,t,void 0,n);return[o,E(e,t+r,o)]}})(x,e,c,S[0]),B=()=>(e=>e.u?M(e,e.u-1)+k(e,e.u-1):0)(x),H=e=>M(x,e)-d,W=e=>k(x,e),j=e=>{e&&(L()&&0!==v?d+=e:f+=e)};return{p:()=>l,m:()=>(e=>[e.o.slice(),e.i])(x),_:()=>{let e,t;return h?[e,t]=S:([e,t]=S=J(w(0,P())),p&&(e=_(e,p[0]),t=w(t,p[1]))),1!==v&&(e-=w(0,r)),2!==v&&(t+=w(0,r)),[w(e,0),_(t,x.u-1)]},$:()=>E(x,P()),S:()=>E(x,P()+c),I:e=>x.o[e]===z,k:()=>!!p&&x.o.slice(w(0,p[0]-1),_(x.u-1,p[1]+1)+1).includes(z),T:H,M:W,R:()=>x.u,O:()=>u,P:()=>0!==v,v:()=>c,J:()=>a,B,H:()=>(h=f,f=0,[h,2===g||O()+c>=B()]),L:(e,t)=>{const r=[e,t];return y.add(r),()=>{y.delete(r)}},W:(e,t)=>{let r,n,o=0;switch(e){case 1:{const e=h;h=0;const r=t-u,s=$(r);e&&s<$(e)+1||0!==g||(v=r<0?2:1),i&&(p=m,i=!1),u=t,o=4;const l=O();l>=-c&&l<=B()&&(o+=1,n=s>c);break}case 2:o=8,0!==v&&(r=!0,o+=1),v=0,g=0,p=m;break;case 3:{const e=t.filter((([e,t])=>x.o[e]!==t));if(!e.length)break;j(e.reduce(((e,[t,r])=>((2===g||(p?!i&&t<p[0]:H(t)+(0===v&&0===g?W(t):0)<O()))&&(e+=r-W(t)),e)),0));for(const[t,r]of e){const e=W(t),n=T(x,t,r);s&&(b+=n?r:r-e)}s&&c&&b>c&&(j(((e,t)=>{let r=0;const n=[];e.o.forEach(((e,o)=>{e!==z&&(n.push(e),o<t&&r++)})),e.l=-1;const o=(s=n,[...s].sort(((e,t)=>e-t)));var s;const i=o.length,l=i/2|0,c=i%2==0?(o[l-1]+o[l])/2:o[l],a=e.i;return((e.i=c)-a)*w(t-r,0)})(x,E(x,P()))),s=!1),o=3,n=!0;break}case 4:c!==t&&(c=t,o=3);break;case 5:t[1]?(j(R(x,t[0],!0)),g=2,o=1):(R(x,t[0]),o=1);break;case 6:a=t;break;case 7:g=1;break;case 8:p=J(t),o=1}o&&(l=1+(2147483647&l),r&&d&&(f+=d,d=0),y.forEach((([e,t])=>{o&e&&t(n)})))}}},C=setTimeout,U=(e,t)=>t&&H()?-e:e,V=(e,t,r,n,o,s)=>{const i=Date.now;let l=0,c=!1,a=!1,u=!1,f=!1;const d=(()=>{let t;const r=()=>{t!=m&&clearTimeout(t)},n=()=>{r(),t=C((()=>{t=m,(()=>{if(c||a)return c=!1,void d();u=!1,e.W(2)})()}),150)};return n.j=r,n})(),h=()=>{l=i(),u&&(f=!0),s&&e.W(6,s()),e.W(1,n()),d()},v=t=>{if(c||!e.P()||t.ctrlKey)return;const n=i()-l;150>n&&50<n&&(r?t.deltaX:t.deltaY)&&(c=!0)},g=()=>{a=!0,u=f=!1},p=()=>{a=!1,L()&&(u=!0)};return t.addEventListener("scroll",h),t.addEventListener("wheel",v,{passive:!0}),t.addEventListener("touchstart",g,{passive:!0}),t.addEventListener("touchend",p,{passive:!0}),{q:()=>{t.removeEventListener("scroll",h),t.removeEventListener("wheel",v),t.removeEventListener("touchstart",g),t.removeEventListener("touchend",p),d.j()},C:()=>{const[t,s]=e.H();t&&(o(U(t,r),s,f),f=!1,s&&e.v()>e.B()&&e.W(1,n()))}}},X=e=>{let t;return{U(r){(t||(t=new(B(J(r)).ResizeObserver)(e))).observe(r)},V(e){t.unobserve(e)},q(){t&&t.disconnect()}}},Y=r=>{let n;r=c({X:"div"},r),a((()=>{n&&f(r.Y(n,r.D))}));const o=u((()=>{const e=r.F,t={position:"absolute",[e?"height":"width"]:"100%",[e?"top":"left"]:"0px",[e?H()?"right":"left":"top"]:r.A+"px",visibility:r.G?"hidden":"visible"};return e&&(t.display="flex"),t}));return e(t,{get component(){return r.X},ref(e){"function"==typeof n?n(e):n=e},get style(){return o()},get children(){return r.K}})},D=e=>{let t=new Map;return f((()=>{for(const e of t.values())e.q()})),u((()=>{const r=e.N,[n,o]=e.Z,s=new Map,i=[];for(let l=n;l<=o;l++){const n=r[l],o=t.get(l);i.push(o?o.ee:d((t=>{const r=h(n),o=e.te(r[0],l);return s.set(l,{re:r,ee:o,q:t}),o}))),o&&(n!==o.re&&o.re[1](n),s.set(l,o))}for(const[e,r]of t.entries())s.has(e)||r.q();return t=s,i}))},F=(e,t)=>e[0]===t[0]&&e[1]===t[1],A=r=>{let n;const{itemSize:o,horizontal:s=!1,overscan:i}=r;r=c({as:"div"},r);const l=q(r.data.length,o,i,void 0,0,!o),d=((e,t)=>{let r;const n=t?"width":"height",o=new WeakMap,s=X((t=>{const s=[];for(const{target:i,contentRect:l}of t)if(i.offsetParent)if(i===r)e.W(4,l[n]);else{const e=o.get(i);e!=m&&s.push([e,l[n]])}s.length&&e.W(3,s)}));return{ne(e){s.U(r=e)},oe:(e,t)=>(o.set(e,t),s.U(e),()=>{o.delete(e),s.V(e)}),se:s.q}})(l,s),_=((e,t)=>{let r,n,o;const s=t?"scrollLeft":"scrollTop",i=t?"overflowX":"overflowY",l=async(n,i)=>{if(!r)return void x((()=>l(n,i)));o&&o();const c=()=>{let t;return[new Promise(((r,n)=>{t=r,o=n,j(e)&&C(n,150)})),e.L(2,(()=>{t&&t()}))]};if(i&&W()){for(;e.W(8,n()),e.k();){const[e,t]=c();try{await e}catch(e){return}finally{t()}}r.scrollTo({[t?"left":"top"]:U(n(),t),behavior:"smooth"})}else for(;;){const[o,i]=c();try{r[s]=U(n(),t),e.W(7),await o}catch(e){return}finally{i()}}};return{ie(l){r=l,n=V(e,l,t,(()=>U(l[s],t)),((t,r,n)=>{if(n){const e=l.style,t=e[i];e[i]="hidden",C((()=>{e[i]=t}))}r?(l[s]=e.O()+t,o&&o()):l[s]+=t}))},se(){n&&n.q()},le(e){l((()=>e))},ce(t){t+=e.O(),l((()=>t))},ae(t,{align:r,smooth:n,offset:o=0}={}){if(t=b(t,0,e.R()-1),"nearest"===r){const n=e.T(t),o=e.O();if(n<o)r="start";else{if(!(n+e.M(t)>o+e.v()))return;r="end"}}l((()=>o+e.J()+e.T(t)+("end"===r?e.M(t)-e.v():"center"===r?(e.M(t)-e.v())/2:0)),n)},ue:()=>{n&&n.C()}}})(l,s),[$,S]=h(l.p()),y=l.L(1,(()=>{S(l.p())})),z=l.L(4,(()=>{var e;null===(e=r.onScroll)||void 0===e||e.call(r,l.O())})),I=l.L(8,(()=>{var e;null===(e=r.onScrollEnd)||void 0===e||e.call(r)})),k=u((e=>{$();const t=l._();return e&&F(e,t)?e:t})),T=u((()=>$()&&l.P())),M=u((()=>$()&&l.B()));return v((()=>{r.ref&&r.ref({get scrollOffset(){return l.O()},get scrollSize(){return(e=>w(e.B(),e.v()))(l)},get viewportSize(){return l.v()},findStartIndex:l.$,findEndIndex:l.S,getItemOffset:l.T,getItemSize:l.M,scrollToIndex:_.ae,scrollTo:_.le,scrollBy:_.ce});const e=r.scrollRef||n.parentElement;d.ne(e),_.ie(e),f((()=>{r.ref&&r.ref(),y(),z(),I(),d.se(),_.se()}))})),g(p((()=>r.data.length),(e=>{e!==l.R()&&l.W(5,[e,r.shift])}))),g(p((()=>r.startMargin||0),(e=>{e!==l.J()&&l.W(6,e)}))),a(p($,(()=>{_.ue()}))),e(t,{get component(){return r.as},ref(e){"function"==typeof n?n(e):n=e},get style(){return{"overflow-anchor":"none",flex:"none",position:"relative",visibility:"hidden",width:s?M()+"px":"100%",height:s?"100%":M()+"px","pointer-events":T()?"none":void 0}},get children(){return e(D,{get N(){return r.data},get Z(){return k()},te:(t,n)=>{const o=u((()=>($(),l.T(n)))),i=u((()=>($(),l.I(n))));return e(Y,{get X(){return r.item},D:n,get Y(){return d.oe},get A(){return o()},get G(){return i()},get K(){return r.children(t(),n)},F:s})}})}})};var G=/*#__PURE__*/s("<div>");const K=t=>{const{ref:s,data:i,children:l,overscan:c,itemSize:a,shift:u,horizontal:f,onScroll:d,onScrollEnd:h,style:v,...g}=t;return p=G(),r(p,n(g,{get style(){return{display:f?"inline-block":"block",[f?"overflow-x":"overflow-y"]:"auto",contain:"strict",width:"100%",height:"100%",...t.style}}}),!1,!0),o(p,e(A,{ref(e){var r=t.ref;"function"==typeof r?r(e):t.ref=e},get data(){return t.data},get overscan(){return t.overscan},get itemSize(){return t.itemSize},get shift(){return t.shift},horizontal:f,get onScroll(){return t.onScroll},get onScrollEnd(){return t.onScrollEnd},get children(){return t.children}})),p;var p};var N=/*#__PURE__*/s("<div>");const Q=t=>{let r;const{ref:n,data:s,children:c,overscan:d,itemSize:_,shift:w,horizontal:$=!1,onScrollEnd:S}=t,y=q(t.data.length,_,d,void 0,0,!_),z=((e,t)=>{const r=t?"width":"height",n=t?"innerWidth":"innerHeight",o=new WeakMap,s=X((t=>{const n=[];for(const{target:e,contentRect:s}of t){if(!e.offsetParent)continue;const t=o.get(e);t!=m&&n.push([t,s[r]])}n.length&&e.W(3,n)}));let i;return{ne(t){const r=B(J(t)),o=()=>{e.W(4,r[n])};r.addEventListener("resize",o),o(),i=()=>{r.removeEventListener("resize",o)}},oe:(e,t)=>(o.set(e,t),s.U(e),()=>{o.delete(e),s.V(e)}),se(){i&&i(),s.q()}}})(y,$),I=((e,t)=>{let r,n,o;const s=(e,t,r,n,o=0)=>{const i=n?"offsetLeft":"offsetTop",l=o+(n&&H()?r.innerWidth-e[i]-e.offsetWidth:e[i]),c=e.offsetParent;return e!==t&&c?s(c,t,r,n,l):l},i=async(n,s)=>{if(!r)return void x((()=>i(n,s)));o&&o();const l=()=>{let t;return[new Promise(((r,n)=>{t=r,o=n,j(e)&&C(n,150)})),e.L(2,(()=>{t&&t()}))]},c=B(J(r));if(s&&W()){for(;e.W(8,n()),e.k();){const[e,t]=l();try{await e}catch(e){return}finally{t()}}c.scroll({[t?"left":"top"]:U(n(),t),behavior:"smooth"})}else for(;;){const[r,o]=l();try{c.scroll({[t?"left":"top"]:U(n(),t)}),e.W(7),await r}catch(e){return}finally{o()}}};return{ie(o){r=o;const i=t?"scrollX":"scrollY",l=J(o),c=B(l),a=l.body;n=V(e,c,t,(()=>U(c[i],t)),((r,n)=>{n?c.scroll({[t?"left":"top"]:e.O()+r}):c.scrollBy(t?r:0,t?0:r)}),(()=>s(o,a,c,t)))},se(){n&&n.q(),r=void 0},ue:()=>{n&&n.C()},ae(n,{align:o,smooth:l,offset:c=0}={}){if(!r)return;if(n=b(n,0,e.R()-1),"nearest"===o){const t=e.T(n),r=e.O();if(t<r)o="start";else{if(!(t+e.M(n)>r+e.v()))return;o="end"}}const a=J(r),u=B(a),f=a.documentElement,d=()=>e.v()-(t?f.clientWidth:f.clientHeight);i((()=>c+s(r,a.body,u,t)+e.T(n)+("end"===o?e.M(n)-(e.v()-d()):"center"===o?(e.M(n)-(e.v()-d()))/2:0)),l)}}})(y,$),[k,T]=h(y.p()),M=y.L(1,(()=>{T(y.p())})),E=y.L(4,(()=>{var e;null===(e=t.onScroll)||void 0===e||e.call(t)})),R=y.L(8,(()=>{var e;null===(e=t.onScrollEnd)||void 0===e||e.call(t)})),O=u((e=>{k();const t=y._();return e&&F(e,t)?e:t})),P=u((()=>k()&&y.P())),L=u((()=>k()&&y.B()));return v((()=>{t.ref&&t.ref({findStartIndex:y.$,findEndIndex:y.S,scrollToIndex:I.ae}),z.ne(r),I.ie(r),f((()=>{t.ref&&t.ref(),M(),E(),R(),z.se(),I.se()}))})),g(p((()=>t.data.length),(e=>{e!==y.R()&&y.W(5,[e,t.shift])}))),a(p(k,(()=>{I.ue()}))),A=N(),"function"==typeof r?i(r,A):r=A,A.style.setProperty("overflow-anchor","none"),A.style.setProperty("flex","none"),A.style.setProperty("position","relative"),A.style.setProperty("visibility","hidden"),o(A,e(D,{get N(){return t.data},get Z(){return O()},te:(r,n)=>{const o=u((()=>(k(),y.T(n)))),s=u((()=>(k(),y.I(n))));return e(Y,{D:n,get Y(){return z.oe},get A(){return o()},get G(){return s()},get K(){return t.children(r(),n)},F:$})}})),l((e=>{var t=$?L()+"px":"100%",r=$?"100%":L()+"px",n=P()?"none":void 0;return t!==e.e&&(null!=(e.e=t)?A.style.setProperty("width",t):A.style.removeProperty("width")),r!==e.t&&(null!=(e.t=r)?A.style.setProperty("height",r):A.style.removeProperty("height")),n!==e.a&&(null!=(e.a=n)?A.style.setProperty("pointer-events",n):A.style.removeProperty("pointer-events")),e}),{e:void 0,t:void 0,a:void 0}),A;var A};export{K as VList,A as Virtualizer,Q as WindowVirtualizer};
//# sourceMappingURL=index.mjs.map