virtua/lib/solid/index.js

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