svelte-tiny-virtual-list - npm Package Compare versions

Comparing version 1.0.7 to 1.1.0

dist/svelte-tiny-virtual-list.js

@@ -522,3 +522,3 @@ (function (global, factory) {
      * @property {number} itemCount
-     * @property {ItemSizeGetter} itemSizeGetter
+     * @property {ItemSize} itemSize
      * @property {number} estimatedItemSize
@@ -532,8 +532,8 @@ */
     	 */
-    	constructor({ itemCount, itemSizeGetter, estimatedItemSize }) {
+    	constructor({ itemSize, itemCount, estimatedItemSize }) {
     		/**
     		 * @private
-    		 * @type {ItemSizeGetter}
+    		 * @type {ItemSize}
     		 */
-    		this.itemSizeGetter = itemSizeGetter;
+    		this.itemSize = itemSize;
 
@@ -567,8 +567,16 @@ /**
     		this.lastMeasuredIndex = -1;
+
+    		this.checkForMismatchItemSizeAndItemCount();
+
+    		if (!this.justInTime) this.computeTotalSizeAndPositionData();
     	}
 
+    	get justInTime() {
+    		return typeof this.itemSize === 'function';
+    	}
+
     	/**
     	 * @param {Options} options
     	 */
-    	updateConfig({ itemCount, itemSizeGetter, estimatedItemSize }) {
+    	updateConfig({ itemSize, itemCount, estimatedItemSize }) {
     		if (itemCount != null) {
@@ -582,7 +590,56 @@ this.itemCount = itemCount;
 
-    		if (itemSizeGetter != null) {
-    			this.itemSizeGetter = itemSizeGetter;
+    		if (itemSize != null) {
+    			this.itemSize = itemSize;
     		}
+
+    		this.checkForMismatchItemSizeAndItemCount();
+
+    		if (this.justInTime && this.totalSize != null) {
+    			this.totalSize = undefined;
+    		} else {
+    			this.computeTotalSizeAndPositionData();
+    		}
     	}
 
+    	checkForMismatchItemSizeAndItemCount() {
+    		if (Array.isArray(this.itemSize) && this.itemSize.length < this.itemCount) {
+    			throw Error(
+    				`When itemSize is an array, itemSize.length can't be smaller than itemCount`,
+    			);
+    		}
+    	}
+
+    	/**
+    	 * @param {number} index
+    	 */
+    	getSize(index) {
+    		const { itemSize } = this;
+
+    		if (typeof itemSize === 'function') {
+    			return itemSize(index);
+    		}
+
+    		return Array.isArray(itemSize) ? itemSize[index] : itemSize;
+    	}
+
+    	/**
+    	 * Compute the totalSize and itemSizeAndPositionData at the start,
+    	 * only when itemSize is a number or an array.
+    	 */
+    	computeTotalSizeAndPositionData() {
+    		let totalSize = 0;
+    		for (let i = 0; i < this.itemCount; i++) {
+    			const size = this.getSize(i);
+    			const offset = totalSize;
+    			totalSize += size;
+
+    			this.itemSizeAndPositionData[i] = {
+    				offset,
+    				size,
+    			};
+    		}
+
+    		this.totalSize = totalSize;
+    	}
+
     	getLastMeasuredIndex() {
@@ -595,3 +652,2 @@ return this.lastMeasuredIndex;
     	 * This method returns the size and position for the item at the specified index.
-    	 * It just-in-time calculates (or used cached values) for items leading up to the index.
     	 *
@@ -607,2 +663,14 @@ * @param {number} index
 
+    		return this.justInTime
+    			? this.getJustInTimeSizeAndPositionForIndex(index)
+    			: this.itemSizeAndPositionData[index];
+    	}
+
+    	/**
+    	 * This is used when itemSize is a function.
+    	 * just-in-time calculates (or used cached values) for items leading up to the index.
+    	 *
+    	 * @param {number} index
+    	 */
+    	getJustInTimeSizeAndPositionForIndex(index) {
     		if (index > this.lastMeasuredIndex) {
@@ -614,3 +682,3 @@ const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
     			for (let i = this.lastMeasuredIndex + 1; i <= index; i++) {
-    				const size = this.itemSizeGetter(i);
+    				const size = this.getSize(i);
 
@@ -638,3 +706,3 @@ if (size == null || isNaN(size)) {
     			? this.itemSizeAndPositionData[this.lastMeasuredIndex]
-    			: {offset: 0, size: 0};
+    			: { offset: 0, size: 0 };
     	}
@@ -644,4 +712,2 @@
     	 * Total size of all items being measured.
-    	 * This value will be completedly estimated initially.
-    	 * As items as measured the estimate will be updated.
     	 *
@@ -651,2 +717,10 @@ * @return {number}
     	getTotalSize() {
+    		// Return the pre computed totalSize when itemSize is number or array.
+    		if (this.totalSize) return this.totalSize;
+
+    		/**
+    		 * When itemSize is a function,
+    		 * This value will be completedly estimated initially.
+    		 * As items as measured the estimate will be updated.
+    		 */
     		const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
@@ -776,3 +850,3 @@
     				high: lastMeasuredIndex,
-    				low: 0,
+    				low:  0,
     				offset,
@@ -839,3 +913,3 @@ });
     			high: Math.min(index, this.itemCount - 1),
-    			low: Math.floor(index / 2),
+    			low:  Math.floor(index / 2),
     			offset,
@@ -877,3 +951,3 @@ });
 
-    // (336:2) {#each items as item (item.index)}
+    // (318:2) {#each items as item (item.index)}
     function create_each_block(key_1, ctx) {
@@ -1071,14 +1145,2 @@ let first;
 
-    function itemSizeGetter(_itemSize) {
-    	return index => getSize(index, _itemSize);
-    }
-
-    function getSize(index, _itemSize) {
-    	if (typeof _itemSize === "function") {
-    		return _itemSize(index);
-    	}
-
-    	return Array.isArray(_itemSize) ? _itemSize[index] : _itemSize;
-    }
-
     function cssVal(val) {
@@ -1105,3 +1167,3 @@ return typeof val === "number" ? val + "px" : val;
     			itemCount,
-    			itemSizeGetter: itemSizeGetter(itemSize),
+    			itemSize,
     			estimatedItemSize: getEstimatedItemSize()
@@ -1111,3 +1173,3 @@ });
     	let mounted = false;
-    	let rootNode;
+    	let wrapper;
     	let items = [];
@@ -1138,3 +1200,3 @@
     		mounted = true;
-    		rootNode.addEventListener("scroll", handleScroll, thirdEventArg);
+    		wrapper.addEventListener("scroll", handleScroll, thirdEventArg);
 
@@ -1149,3 +1211,3 @@ if (scrollOffset != null) {
     	onDestroy(() => {
-    		if (mounted) rootNode.removeEventListener("scroll", handleScroll);
+    		if (mounted) wrapper.removeEventListener("scroll", handleScroll);
     	});
@@ -1160,3 +1222,3 @@
     			sizeAndPositionManager.updateConfig({
-    				itemSizeGetter: itemSizeGetter(itemSize),
+    				itemSize,
     				itemCount,
@@ -1225,5 +1287,5 @@ estimatedItemSize: getEstimatedItemSize()
 
-    			if (scrollDirection === DIRECTION.HORIZONTAL) {
-    				$$invalidate(3, innerStyle += "display:flex;");
-    			}
+    			$$invalidate(3, innerStyle += "display:flex;" + (scrollDirection === DIRECTION.VERTICAL
+    			? "flex-direction:column;"
+    			: ""));
     		}
@@ -1247,3 +1309,3 @@
     	function scrollTo(value) {
-    		$$invalidate(0, rootNode[SCROLL_PROP[scrollDirection]] = value, rootNode);
+    		$$invalidate(0, wrapper[SCROLL_PROP[scrollDirection]] = value, wrapper);
     	}
@@ -1271,4 +1333,4 @@
     	function handleScroll(event) {
-    		const offset = getNodeOffset();
-    		if (offset < 0 || state.offset === offset || event.target !== rootNode) return;
+    		const offset = getWrapperOffset();
+    		if (offset < 0 || state.offset === offset || event.target !== wrapper) return;
 
@@ -1283,4 +1345,4 @@ $$invalidate(16, state = {
 
-    	function getNodeOffset() {
-    		return rootNode[SCROLL_PROP[scrollDirection]];
+    	function getWrapperOffset() {
+    		return wrapper[SCROLL_PROP[scrollDirection]];
     	}
@@ -1300,13 +1362,13 @@
     				...STYLE_STICKY_ITEM,
-    				[SIZE_PROP[scrollDirection]]: size,
-    				[MARGIN_PROP[scrollDirection]]: offset,
-    				[OPPOSITE_MARGIN_PROP[scrollDirection]]: -(offset + size)
+    				[SIZE_PROP[scrollDirection]]: cssVal(size),
+    				[MARGIN_PROP[scrollDirection]]: cssVal(offset),
+    				[OPPOSITE_MARGIN_PROP[scrollDirection]]: cssVal(-(offset + size))
     			}
     		: {
     				...STYLE_ITEM,
-    				[SIZE_PROP[scrollDirection]]: size,
-    				[POSITION_PROP[scrollDirection]]: offset
+    				[SIZE_PROP[scrollDirection]]: cssVal(size),
+    				[POSITION_PROP[scrollDirection]]: cssVal(offset)
     			}).reduce(
     			(prev, [key, val], i) => {
-    				const curr = key + ":" + cssVal(val) + ";";
+    				const curr = key + ":" + val + ";";
     				return i === 0 ? curr : prev + curr;
@@ -1320,4 +1382,4 @@ },
     		binding_callbacks[$$value ? "unshift" : "push"](() => {
-    			rootNode = $$value;
-    			$$invalidate(0, rootNode);
+    			wrapper = $$value;
+    			$$invalidate(0, wrapper);
     		});
@@ -1352,3 +1414,3 @@ }
     	return [
-    		rootNode,
+    		wrapper,
     		items,
@@ -1355,0 +1417,0 @@ wrapperStyle,

package.json

 {
   "name": "svelte-tiny-virtual-list",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "A tiny but mighty list virtualization component for svelte, with zero dependencies 💪",
@@ -5,0 +5,0 @@ "svelte": "src/index.js",

README.md

@@ -156,3 +156,3 @@ <p align="center"><img src="https://raw.githubusercontent.com/Skayo/svelte-tiny-virtual-list/master/assets/ListLogo.svg" alt="ListLogo" width="225"></p>
     - `event: ScrollEvent` - The original scroll event
-    - `offset: number` - Either the value of `rootNode.scrollTop` or `rootNode.scrollLeft`
+    - `offset: number` - Either the value of `wrapper.scrollTop` or `wrapper.scrollLeft`
 - `itemsUpdated` - Fired when the visible items are updated
@@ -159,0 +159,0 @@ - `detail` Props:

src/SizeAndPositionManager.js

@@ -31,3 +31,3 @@ /* Forked from react-virtualized 💖 */
  * @property {number} itemCount
- * @property {ItemSizeGetter} itemSizeGetter
+ * @property {ItemSize} itemSize
  * @property {number} estimatedItemSize
@@ -41,8 +41,8 @@ */
 	 */
-	constructor({ itemCount, itemSizeGetter, estimatedItemSize }) {
+	constructor({ itemSize, itemCount, estimatedItemSize }) {
 		/**
 		 * @private
-		 * @type {ItemSizeGetter}
+		 * @type {ItemSize}
 		 */
-		this.itemSizeGetter = itemSizeGetter;
+		this.itemSize = itemSize;
 
@@ -76,8 +76,16 @@ /**
 		this.lastMeasuredIndex = -1;
+
+		this.checkForMismatchItemSizeAndItemCount();
+
+		if (!this.justInTime) this.computeTotalSizeAndPositionData();
 	}
 
+	get justInTime() {
+		return typeof this.itemSize === 'function';
+	}
+
 	/**
 	 * @param {Options} options
 	 */
-	updateConfig({ itemCount, itemSizeGetter, estimatedItemSize }) {
+	updateConfig({ itemSize, itemCount, estimatedItemSize }) {
 		if (itemCount != null) {
@@ -91,7 +99,56 @@ this.itemCount = itemCount;
 
-		if (itemSizeGetter != null) {
-			this.itemSizeGetter = itemSizeGetter;
+		if (itemSize != null) {
+			this.itemSize = itemSize;
 		}
+
+		this.checkForMismatchItemSizeAndItemCount();
+
+		if (this.justInTime && this.totalSize != null) {
+			this.totalSize = undefined;
+		} else {
+			this.computeTotalSizeAndPositionData();
+		}
 	}
 
+	checkForMismatchItemSizeAndItemCount() {
+		if (Array.isArray(this.itemSize) && this.itemSize.length < this.itemCount) {
+			throw Error(
+				`When itemSize is an array, itemSize.length can't be smaller than itemCount`,
+			);
+		}
+	}
+
+	/**
+	 * @param {number} index
+	 */
+	getSize(index) {
+		const { itemSize } = this;
+
+		if (typeof itemSize === 'function') {
+			return itemSize(index);
+		}
+
+		return Array.isArray(itemSize) ? itemSize[index] : itemSize;
+	}
+
+	/**
+	 * Compute the totalSize and itemSizeAndPositionData at the start,
+	 * only when itemSize is a number or an array.
+	 */
+	computeTotalSizeAndPositionData() {
+		let totalSize = 0;
+		for (let i = 0; i < this.itemCount; i++) {
+			const size = this.getSize(i);
+			const offset = totalSize;
+			totalSize += size;
+
+			this.itemSizeAndPositionData[i] = {
+				offset,
+				size,
+			};
+		}
+
+		this.totalSize = totalSize;
+	}
+
 	getLastMeasuredIndex() {
@@ -104,3 +161,2 @@ return this.lastMeasuredIndex;
 	 * This method returns the size and position for the item at the specified index.
-	 * It just-in-time calculates (or used cached values) for items leading up to the index.
 	 *
@@ -116,2 +172,14 @@ * @param {number} index
 
+		return this.justInTime
+			? this.getJustInTimeSizeAndPositionForIndex(index)
+			: this.itemSizeAndPositionData[index];
+	}
+
+	/**
+	 * This is used when itemSize is a function.
+	 * just-in-time calculates (or used cached values) for items leading up to the index.
+	 *
+	 * @param {number} index
+	 */
+	getJustInTimeSizeAndPositionForIndex(index) {
 		if (index > this.lastMeasuredIndex) {
@@ -123,3 +191,3 @@ const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
 			for (let i = this.lastMeasuredIndex + 1; i <= index; i++) {
-				const size = this.itemSizeGetter(i);
+				const size = this.getSize(i);
 
@@ -147,3 +215,3 @@ if (size == null || isNaN(size)) {
 			? this.itemSizeAndPositionData[this.lastMeasuredIndex]
-			: {offset: 0, size: 0};
+			: { offset: 0, size: 0 };
 	}
@@ -153,4 +221,2 @@
 	 * Total size of all items being measured.
-	 * This value will be completedly estimated initially.
-	 * As items as measured the estimate will be updated.
 	 *
@@ -160,2 +226,10 @@ * @return {number}
 	getTotalSize() {
+		// Return the pre computed totalSize when itemSize is number or array.
+		if (this.totalSize) return this.totalSize;
+
+		/**
+		 * When itemSize is a function,
+		 * This value will be completedly estimated initially.
+		 * As items as measured the estimate will be updated.
+		 */
 		const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
@@ -285,3 +359,3 @@
 				high: lastMeasuredIndex,
-				low: 0,
+				low:  0,
 				offset,
@@ -348,3 +422,3 @@ });
 			high: Math.min(index, this.itemCount - 1),
-			low: Math.floor(index / 2),
+			low:  Math.floor(index / 2),
 			offset,
@@ -351,0 +425,0 @@ });

types/index.d.ts

@@ -148,3 +148,3 @@ /// <reference types="svelte" />
 	/**
-	 * Either the value of `rootNode.scrollTop` or `rootNode.scrollLeft`
+	 * Either the value of `wrapper.scrollTop` or `wrapper.scrollLeft`
 	 */
@@ -151,0 +151,0 @@ offset: number;

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

119897

increased by3.56%

Lines of code

3081

increased by5.55%

No dependency changes