virtua/lib/solid/index.cjs

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

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