virtua/lib/solid/index.js

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