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