@tanstack/virtual-core - npm Package Compare versions

Comparing version 3.0.0-beta.6 to 3.0.0-beta.8

build/cjs/packages/virtual-core/src/index.js

@@ -163,2 +163,3 @@ /**
       this.unsubs = [];
+      this.scrollElement = null;
     };
@@ -165,0 +166,0 @@

build/esm/index.js

@@ -267,2 +267,3 @@ /**
       this.unsubs = [];
+      this.scrollElement = null;
     };
@@ -269,0 +270,0 @@

build/stats.json

@@ -11,3 +11,3 @@ {
             "name": "node_modules/@reach/observe-rect/dist/observe-rect.esm.js",
-            "uid": "6b55-7"
+            "uid": "27cd-7"
           },
@@ -18,7 +18,7 @@ {
               {
-                "uid": "6b55-9",
+                "uid": "27cd-9",
                 "name": "utils.ts"
               },
               {
-                "uid": "6b55-11",
+                "uid": "27cd-11",
                 "name": "index.ts"
@@ -34,26 +34,26 @@ }
   "nodeParts": {
-    "6b55-7": {
+    "27cd-7": {
       "renderedLength": 1732,
       "gzipLength": 652,
       "brotliLength": 0,
-      "mainUid": "6b55-6"
+      "mainUid": "27cd-6"
     },
-    "6b55-9": {
+    "27cd-9": {
       "renderedLength": 1432,
       "gzipLength": 544,
       "brotliLength": 0,
-      "mainUid": "6b55-8"
+      "mainUid": "27cd-8"
     },
-    "6b55-11": {
-      "renderedLength": 12929,
-      "gzipLength": 2875,
+    "27cd-11": {
+      "renderedLength": 12964,
+      "gzipLength": 2877,
       "brotliLength": 0,
-      "mainUid": "6b55-10"
+      "mainUid": "27cd-10"
     }
   },
   "nodeMetas": {
-    "6b55-6": {
+    "27cd-6": {
       "id": "/node_modules/@reach/observe-rect/dist/observe-rect.esm.js",
       "moduleParts": {
-        "index.production.js": "6b55-7"
+        "index.production.js": "27cd-7"
       },
@@ -63,10 +63,10 @@ "imported": [],
         {
-          "uid": "6b55-10"
+          "uid": "27cd-10"
         }
       ]
     },
-    "6b55-8": {
+    "27cd-8": {
       "id": "/packages/virtual-core/src/utils.ts",
       "moduleParts": {
-        "index.production.js": "6b55-9"
+        "index.production.js": "27cd-9"
       },
@@ -76,17 +76,17 @@ "imported": [],
         {
-          "uid": "6b55-10"
+          "uid": "27cd-10"
         }
       ]
     },
-    "6b55-10": {
+    "27cd-10": {
       "id": "/packages/virtual-core/src/index.ts",
       "moduleParts": {
-        "index.production.js": "6b55-11"
+        "index.production.js": "27cd-11"
       },
       "imported": [
         {
-          "uid": "6b55-6"
+          "uid": "27cd-6"
         },
         {
-          "uid": "6b55-8"
+          "uid": "27cd-8"
         }
@@ -93,0 +93,0 @@ ],

build/types/index.d.ts

 export * from './utils';
 declare type ScrollAlignment = 'start' | 'center' | 'end' | 'auto';
-interface ScrollToOptions {
+export interface ScrollToOptions {
     align: ScrollAlignment;
@@ -5,0 +5,0 @@ }

build/umd/index.development.js

@@ -273,2 +273,3 @@ /**
         this.unsubs = [];
+        this.scrollElement = null;
       };
@@ -275,0 +276,0 @@

build/umd/index.production.js

@@ -11,3 +11,3 @@ /**
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VirtualCore={})}(this,(function(e){"use strict";var t,s=["bottom","height","left","right","top","width"],n=new Map,o=function e(){var o=[];n.forEach((function(e,t){var n,i,l=t.getBoundingClientRect();n=l,i=e.rect,void 0===n&&(n={}),void 0===i&&(i={}),s.some((function(e){return n[e]!==i[e]}))&&(e.rect=l,o.push(e))})),o.forEach((function(e){e.callbacks.forEach((function(t){return t(e.rect)}))})),t=window.requestAnimationFrame(e)};function i(e,t,s){let n,o=[];return()=>{let i;s.key&&null!=s.debug&&s.debug()&&(i=Date.now());const l=e();if(!(l.length!==o.length||l.some(((e,t)=>o[t]!==e))))return n;let r;if(o=l,s.key&&null!=s.debug&&s.debug()&&(r=Date.now()),n=t(...l),null==s||null==s.onChange||s.onChange(n),s.key&&null!=s.debug&&s.debug()){const e=Math.round(100*(Date.now()-i))/100,t=Math.round(100*(Date.now()-r))/100,n=t/16,o=(e,t)=>{for(e=String(e);e.length<t;)e=" "+e;return e};console.info("%c⏱ "+o(t,5)+" /"+o(e,5)+" ms","\n            font-size: .6rem;\n            font-weight: bold;\n            color: hsl("+Math.max(0,Math.min(120-120*n,120))+"deg 100% 31%);",null==s?void 0:s.key)}return n}}const l=e=>e,r=e=>{const t=Math.max(e.startIndex-e.overscan,0),s=Math.min(e.endIndex+e.overscan,e.count-1),n=[];for(let e=t;e<=s;e++)n.push(e);return n},a=(e,t)=>e.getBoundingClientRect()[t.options.horizontal?"width":"height"];e.Virtualizer=class{constructor(e){var t=this;this.unsubs=[],this.scrollElement=null,this.measurementsCache=[],this.itemMeasurementsCache={},this.pendingMeasuredCacheIndexes=[],this.measureElementCache={},this.setOptions=e=>{Object.entries(e).forEach((t=>{let[s,n]=t;void 0===n&&delete e[s]})),this.options={debug:!1,initialOffset:0,overscan:1,paddingStart:0,paddingEnd:0,scrollPaddingStart:0,scrollPaddingEnd:0,horizontal:!1,getItemKey:l,rangeExtractor:r,enableSmoothScroll:!0,onChange:()=>{},measureElement:a,initialRect:{width:0,height:0},...e}},this.notify=()=>{var e,t;null==(e=(t=this.options).onChange)||e.call(t,this)},this.cleanup=()=>{this.unsubs.filter(Boolean).forEach((e=>e())),this.unsubs=[]},this._didMount=()=>()=>{this.cleanup()},this._willUpdate=()=>{const e=this.options.getScrollElement();this.scrollElement!==e&&(this.cleanup(),this.scrollElement=e,this.unsubs.push(this.options.observeElementRect(this,(e=>{this.scrollRect=e,this.notify()}))),this.unsubs.push(this.options.observeElementOffset(this,(e=>{this.scrollOffset=e,this.notify()}))))},this.getSize=()=>this.scrollRect[this.options.horizontal?"width":"height"],this.getMeasurements=i((()=>[this.options.count,this.options.paddingStart,this.options.getItemKey,this.itemMeasurementsCache]),((e,t,s,n)=>{const o=this.pendingMeasuredCacheIndexes.length>0?Math.min(...this.pendingMeasuredCacheIndexes):0;this.pendingMeasuredCacheIndexes=[];const i=this.measurementsCache.slice(0,o);for(let l=o;l<e;l++){const e=s(l),o=n[e],r=i[l-1]?i[l-1].end:t,a="number"==typeof o?o:this.options.estimateSize(l),c=r+a;i[l]={index:l,start:r,size:a,end:c,key:e}}return this.measurementsCache=i,i}),{key:!1,debug:()=>this.options.debug}),this.calculateRange=i((()=>[this.getMeasurements(),this.getSize(),this.scrollOffset]),((e,t,s)=>function(e){let{measurements:t,outerSize:s,scrollOffset:n}=e;const o=t.length-1,i=((e,t,s,n)=>{for(;e<=t;){const o=(e+t)/2|0,i=s(o);if(i<n)e=o+1;else{if(!(i>n))return o;t=o-1}}return e>0?e-1:0})(0,o,(e=>t[e].start),n);let l=i;for(;l<o&&t[l].end<n+s;)l++;return{startIndex:i,endIndex:l}}({measurements:e,outerSize:t,scrollOffset:s})),{key:!1,debug:()=>this.options.debug}),this.getIndexes=i((()=>[this.options.rangeExtractor,this.calculateRange(),this.options.overscan,this.options.count]),((e,t,s,n)=>e({...t,overscan:s,count:n})),{key:!1}),this.getVirtualItems=i((()=>[this.getIndexes(),this.getMeasurements(),this.options.measureElement]),((e,t,s)=>{const n=e=>t=>{var n;const o=this.measurementsCache[e];if(!t)return;const i=s(t,this),l=null!=(n=this.itemMeasurementsCache[o.key])?n:o.size;i!==l&&(o.start<this.scrollOffset&&(this.destinationOffset||this._scrollToOffset(this.scrollOffset+(i-l),!1)),this.pendingMeasuredCacheIndexes.push(e),this.itemMeasurementsCache={...this.itemMeasurementsCache,[o.key]:i},this.notify())},o=[],i={};for(let s=0,r=e.length;s<r;s++){var l;const r=e[s],a={...t[r],measureElement:i[r]=null!=(l=this.measureElementCache[r])?l:n(r)};o.push(a)}return this.measureElementCache=i,o}),{key:!1}),this.scrollToOffset=function(e,s){let{align:n}=void 0===s?{align:"start"}:s;const o=()=>{const s=t.scrollOffset,o=t.getSize();"auto"===n&&(n=e<=s?"start":e>=s+o?"end":"start"),"start"===n?t._scrollToOffset(e,!0):"end"===n?t._scrollToOffset(e-o,!0):"center"===n&&t._scrollToOffset(e-o/2,!0)};o(),requestAnimationFrame((()=>{o()}))},this.scrollToIndex=function(e,s){let{align:n,...o}=void 0===s?{align:"auto"}:s;const i=t.getMeasurements(),l=t.scrollOffset,r=t.getSize(),{count:a}=t.options,c=i[Math.max(0,Math.min(e,a-1))];if(!c)return;if("auto"===n)if(c.end>=l+r-t.options.scrollPaddingEnd)n="end";else{if(!(c.start<=l+t.options.scrollPaddingStart))return;n="start"}const h="end"===n?c.end+t.options.scrollPaddingEnd:c.start-t.options.scrollPaddingStart;t.scrollToOffset(h,{align:n,...o})},this.getTotalSize=()=>{var e;return((null==(e=this.getMeasurements()[this.options.count-1])?void 0:e.end)||this.options.paddingStart)+this.options.paddingEnd},this._scrollToOffset=(e,t)=>{let s;clearTimeout(this.scrollCheckFrame),this.destinationOffset=e,this.options.scrollToFn(e,this.options.enableSmoothScroll&&t,this);const n=()=>{let e=this.scrollOffset;this.scrollCheckFrame=s=setTimeout((()=>{this.scrollCheckFrame===s&&(this.scrollOffset!==e?(e=this.scrollOffset,n()):this.destinationOffset=void 0)}),100)};n()},this.measure=()=>{this.itemMeasurementsCache={},this.notify()},this.setOptions(e),this.scrollRect=this.options.initialRect,this.scrollOffset=this.options.initialOffset}},e.defaultKeyExtractor=l,e.defaultRangeExtractor=r,e.elementScroll=(e,t,s)=>{var n;null==(n=s.scrollElement)||n.scrollTo({[s.options.horizontal?"left":"top"]:e,behavior:t?"smooth":void 0})},e.measureElement=a,e.memo=i,e.observeElementOffset=(e,t)=>{const s=()=>t(e.scrollElement[e.options.horizontal?"scrollLeft":"scrollTop"]);if(e.scrollElement)return s(),e.scrollElement.addEventListener("scroll",s,{capture:!1,passive:!0}),()=>{e.scrollElement.removeEventListener("scroll",s)}},e.observeElementRect=(e,s)=>{const i=function(e,s){return{observe:function(){var t=0===n.size;n.has(e)?n.get(e).callbacks.push(s):n.set(e,{rect:void 0,hasRectChanged:!1,callbacks:[s]}),t&&o()},unobserve:function(){var o=n.get(e);if(o){var i=o.callbacks.indexOf(s);i>=0&&o.callbacks.splice(i,1),o.callbacks.length||n.delete(e),n.size||cancelAnimationFrame(t)}}}}(e.scrollElement,(e=>{s(e)}));if(e.scrollElement)return s(e.scrollElement.getBoundingClientRect()),i.observe(),()=>{i.unobserve()}},e.observeWindowOffset=(e,t)=>{const s=()=>t(e.scrollElement[e.options.horizontal?"scrollX":"scrollY"]);if(e.scrollElement)return s(),e.scrollElement.addEventListener("scroll",s,{capture:!1,passive:!0}),()=>{e.scrollElement.removeEventListener("scroll",s)}},e.observeWindowRect=(e,t)=>{const s=()=>{t({width:e.scrollElement.innerWidth,height:e.scrollElement.innerHeight})};if(e.scrollElement)return s(),e.scrollElement.addEventListener("resize",s,{capture:!1,passive:!0}),()=>{e.scrollElement.removeEventListener("resize",s)}},e.windowScroll=(e,t,s)=>{var n;null==(n=s.scrollElement)||n.scrollTo({[s.options.horizontal?"left":"top"]:e,behavior:t?"smooth":void 0})},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VirtualCore={})}(this,(function(e){"use strict";var t,s=["bottom","height","left","right","top","width"],n=new Map,o=function e(){var o=[];n.forEach((function(e,t){var n,i,l=t.getBoundingClientRect();n=l,i=e.rect,void 0===n&&(n={}),void 0===i&&(i={}),s.some((function(e){return n[e]!==i[e]}))&&(e.rect=l,o.push(e))})),o.forEach((function(e){e.callbacks.forEach((function(t){return t(e.rect)}))})),t=window.requestAnimationFrame(e)};function i(e,t,s){let n,o=[];return()=>{let i;s.key&&null!=s.debug&&s.debug()&&(i=Date.now());const l=e();if(!(l.length!==o.length||l.some(((e,t)=>o[t]!==e))))return n;let r;if(o=l,s.key&&null!=s.debug&&s.debug()&&(r=Date.now()),n=t(...l),null==s||null==s.onChange||s.onChange(n),s.key&&null!=s.debug&&s.debug()){const e=Math.round(100*(Date.now()-i))/100,t=Math.round(100*(Date.now()-r))/100,n=t/16,o=(e,t)=>{for(e=String(e);e.length<t;)e=" "+e;return e};console.info("%c⏱ "+o(t,5)+" /"+o(e,5)+" ms","\n            font-size: .6rem;\n            font-weight: bold;\n            color: hsl("+Math.max(0,Math.min(120-120*n,120))+"deg 100% 31%);",null==s?void 0:s.key)}return n}}const l=e=>e,r=e=>{const t=Math.max(e.startIndex-e.overscan,0),s=Math.min(e.endIndex+e.overscan,e.count-1),n=[];for(let e=t;e<=s;e++)n.push(e);return n},a=(e,t)=>e.getBoundingClientRect()[t.options.horizontal?"width":"height"];e.Virtualizer=class{constructor(e){var t=this;this.unsubs=[],this.scrollElement=null,this.measurementsCache=[],this.itemMeasurementsCache={},this.pendingMeasuredCacheIndexes=[],this.measureElementCache={},this.setOptions=e=>{Object.entries(e).forEach((t=>{let[s,n]=t;void 0===n&&delete e[s]})),this.options={debug:!1,initialOffset:0,overscan:1,paddingStart:0,paddingEnd:0,scrollPaddingStart:0,scrollPaddingEnd:0,horizontal:!1,getItemKey:l,rangeExtractor:r,enableSmoothScroll:!0,onChange:()=>{},measureElement:a,initialRect:{width:0,height:0},...e}},this.notify=()=>{var e,t;null==(e=(t=this.options).onChange)||e.call(t,this)},this.cleanup=()=>{this.unsubs.filter(Boolean).forEach((e=>e())),this.unsubs=[],this.scrollElement=null},this._didMount=()=>()=>{this.cleanup()},this._willUpdate=()=>{const e=this.options.getScrollElement();this.scrollElement!==e&&(this.cleanup(),this.scrollElement=e,this.unsubs.push(this.options.observeElementRect(this,(e=>{this.scrollRect=e,this.notify()}))),this.unsubs.push(this.options.observeElementOffset(this,(e=>{this.scrollOffset=e,this.notify()}))))},this.getSize=()=>this.scrollRect[this.options.horizontal?"width":"height"],this.getMeasurements=i((()=>[this.options.count,this.options.paddingStart,this.options.getItemKey,this.itemMeasurementsCache]),((e,t,s,n)=>{const o=this.pendingMeasuredCacheIndexes.length>0?Math.min(...this.pendingMeasuredCacheIndexes):0;this.pendingMeasuredCacheIndexes=[];const i=this.measurementsCache.slice(0,o);for(let l=o;l<e;l++){const e=s(l),o=n[e],r=i[l-1]?i[l-1].end:t,a="number"==typeof o?o:this.options.estimateSize(l),c=r+a;i[l]={index:l,start:r,size:a,end:c,key:e}}return this.measurementsCache=i,i}),{key:!1,debug:()=>this.options.debug}),this.calculateRange=i((()=>[this.getMeasurements(),this.getSize(),this.scrollOffset]),((e,t,s)=>function(e){let{measurements:t,outerSize:s,scrollOffset:n}=e;const o=t.length-1,i=((e,t,s,n)=>{for(;e<=t;){const o=(e+t)/2|0,i=s(o);if(i<n)e=o+1;else{if(!(i>n))return o;t=o-1}}return e>0?e-1:0})(0,o,(e=>t[e].start),n);let l=i;for(;l<o&&t[l].end<n+s;)l++;return{startIndex:i,endIndex:l}}({measurements:e,outerSize:t,scrollOffset:s})),{key:!1,debug:()=>this.options.debug}),this.getIndexes=i((()=>[this.options.rangeExtractor,this.calculateRange(),this.options.overscan,this.options.count]),((e,t,s,n)=>e({...t,overscan:s,count:n})),{key:!1}),this.getVirtualItems=i((()=>[this.getIndexes(),this.getMeasurements(),this.options.measureElement]),((e,t,s)=>{const n=e=>t=>{var n;const o=this.measurementsCache[e];if(!t)return;const i=s(t,this),l=null!=(n=this.itemMeasurementsCache[o.key])?n:o.size;i!==l&&(o.start<this.scrollOffset&&(this.destinationOffset||this._scrollToOffset(this.scrollOffset+(i-l),!1)),this.pendingMeasuredCacheIndexes.push(e),this.itemMeasurementsCache={...this.itemMeasurementsCache,[o.key]:i},this.notify())},o=[],i={};for(let s=0,r=e.length;s<r;s++){var l;const r=e[s],a={...t[r],measureElement:i[r]=null!=(l=this.measureElementCache[r])?l:n(r)};o.push(a)}return this.measureElementCache=i,o}),{key:!1}),this.scrollToOffset=function(e,s){let{align:n}=void 0===s?{align:"start"}:s;const o=()=>{const s=t.scrollOffset,o=t.getSize();"auto"===n&&(n=e<=s?"start":e>=s+o?"end":"start"),"start"===n?t._scrollToOffset(e,!0):"end"===n?t._scrollToOffset(e-o,!0):"center"===n&&t._scrollToOffset(e-o/2,!0)};o(),requestAnimationFrame((()=>{o()}))},this.scrollToIndex=function(e,s){let{align:n,...o}=void 0===s?{align:"auto"}:s;const i=t.getMeasurements(),l=t.scrollOffset,r=t.getSize(),{count:a}=t.options,c=i[Math.max(0,Math.min(e,a-1))];if(!c)return;if("auto"===n)if(c.end>=l+r-t.options.scrollPaddingEnd)n="end";else{if(!(c.start<=l+t.options.scrollPaddingStart))return;n="start"}const h="end"===n?c.end+t.options.scrollPaddingEnd:c.start-t.options.scrollPaddingStart;t.scrollToOffset(h,{align:n,...o})},this.getTotalSize=()=>{var e;return((null==(e=this.getMeasurements()[this.options.count-1])?void 0:e.end)||this.options.paddingStart)+this.options.paddingEnd},this._scrollToOffset=(e,t)=>{let s;clearTimeout(this.scrollCheckFrame),this.destinationOffset=e,this.options.scrollToFn(e,this.options.enableSmoothScroll&&t,this);const n=()=>{let e=this.scrollOffset;this.scrollCheckFrame=s=setTimeout((()=>{this.scrollCheckFrame===s&&(this.scrollOffset!==e?(e=this.scrollOffset,n()):this.destinationOffset=void 0)}),100)};n()},this.measure=()=>{this.itemMeasurementsCache={},this.notify()},this.setOptions(e),this.scrollRect=this.options.initialRect,this.scrollOffset=this.options.initialOffset}},e.defaultKeyExtractor=l,e.defaultRangeExtractor=r,e.elementScroll=(e,t,s)=>{var n;null==(n=s.scrollElement)||n.scrollTo({[s.options.horizontal?"left":"top"]:e,behavior:t?"smooth":void 0})},e.measureElement=a,e.memo=i,e.observeElementOffset=(e,t)=>{const s=()=>t(e.scrollElement[e.options.horizontal?"scrollLeft":"scrollTop"]);if(e.scrollElement)return s(),e.scrollElement.addEventListener("scroll",s,{capture:!1,passive:!0}),()=>{e.scrollElement.removeEventListener("scroll",s)}},e.observeElementRect=(e,s)=>{const i=function(e,s){return{observe:function(){var t=0===n.size;n.has(e)?n.get(e).callbacks.push(s):n.set(e,{rect:void 0,hasRectChanged:!1,callbacks:[s]}),t&&o()},unobserve:function(){var o=n.get(e);if(o){var i=o.callbacks.indexOf(s);i>=0&&o.callbacks.splice(i,1),o.callbacks.length||n.delete(e),n.size||cancelAnimationFrame(t)}}}}(e.scrollElement,(e=>{s(e)}));if(e.scrollElement)return s(e.scrollElement.getBoundingClientRect()),i.observe(),()=>{i.unobserve()}},e.observeWindowOffset=(e,t)=>{const s=()=>t(e.scrollElement[e.options.horizontal?"scrollX":"scrollY"]);if(e.scrollElement)return s(),e.scrollElement.addEventListener("scroll",s,{capture:!1,passive:!0}),()=>{e.scrollElement.removeEventListener("scroll",s)}},e.observeWindowRect=(e,t)=>{const s=()=>{t({width:e.scrollElement.innerWidth,height:e.scrollElement.innerHeight})};if(e.scrollElement)return s(),e.scrollElement.addEventListener("resize",s,{capture:!1,passive:!0}),()=>{e.scrollElement.removeEventListener("resize",s)}},e.windowScroll=(e,t,s)=>{var n;null==(n=s.scrollElement)||n.scrollTo({[s.options.horizontal?"left":"top"]:e,behavior:t?"smooth":void 0})},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.production.js.map

package.json

 {
   "name": "@tanstack/virtual-core",
   "author": "Tanner Linsley",
-  "version": "3.0.0-beta.6",
+  "version": "3.0.0-beta.8",
   "description": "Headless UI for virtualizing scrollable elements in TS/JS + Frameworks",
@@ -6,0 +6,0 @@ "license": "MIT",

src/index.ts

@@ -10,3 +10,3 @@ import observeRect from '@reach/observe-rect'
 
-interface ScrollToOptions {
+export interface ScrollToOptions {
   align: ScrollAlignment
@@ -292,2 +292,3 @@ }
     this.unsubs = []
+    this.scrollElement = null
   }
@@ -294,0 +295,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

325433

increased by0.14%

Lines of code

2224

increased by0.18%

No dependency changes