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