virtua 0.53.2 → 0.53.4

package/lib/solid/index.jsx

@@ -49,10 +49,10 @@ var ACTION_SCROLL_END = 2;
 var ACTION_ITEM_RESIZE = 3;
 var ACTION_VIEWPORT_RESIZE = 4;
 var ACTION_ITEMS_LENGTH_CHANGE = 5;
-var ACTION_START_OFFSET_CHANGE = 6;
-var ACTION_MANUAL_SCROLL = 7;
-var ACTION_BEFORE_MANUAL_SMOOTH_SCROLL = 8;
-var ACTION_RELAYOUT = 9;
+var ACTION_RELAYOUT = 6;
+var ACTION_START_OFFSET_CHANGE = 7;
+var ACTION_MANUAL_SCROLL = 8;
+var ACTION_BEFORE_MANUAL_SMOOTH_SCROLL = 9;
 var UPDATE_VIRTUAL_STATE = 1;
 var UPDATE_SIZE_EVENT = 2;
 var UPDATE_SCROLL_EVENT = 4;
@@ -60,7 +60,14 @@ var UPDATE_SCROLL_END_EVENT = 8;
 var getScrollSize = (store) => {
 	return max(store.$getTotalSize(), store.$getViewportSize());
 };
-var createVirtualStore = ({ $getRange: getRange, $getItemOffset: getOffset, $getItemSize: getItemSize, $isSizeEqual: isSizeEqual, $getTotalSize: getTotalSize, $getLength: getLength, $setLength: setLength, $isEstimating: isEstimating, $resize: resize }, ssrCount = 0) => {
+var relayout = (store, layout, a, b) => {
+	const anchorIndex = store._getAnchorIndex();
+	const anchorOffset = layout.$getItemOffset(anchorIndex);
+	if (layout.$relayout(a, b)) {
+		store.$update(6, layout.$getItemOffset(anchorIndex) - anchorOffset);
+	}
+};
+var createVirtualStore = ({ $getRange: getRange, $findIndex: findIndex, $getItemOffset: getItemOffset, $getItemSize: getItemSize, $setItemSizes: setItemSizes, $getTotalSize: getTotalSize, $getLength: getLength, $setLength: setLength, $isEstimating: isEstimating }, ssrCount = 0) => {
 	let isSSR = !!ssrCount;
 	let stateVersion = 1;
 	let viewportSize = 0;
@@ -77,17 +84,7 @@ var createVirtualStore = ({ $getRange: getRange, $getItemOffset: getOffset, $get
 	const subscribers = new Set();
 	const getRelativeScrollOffset = () => scrollOffset - startSpacerSize;
 	const getVisibleOffset = () => getRelativeScrollOffset() + pendingJump + jump;
-	const getItemOffset = (index) => {
-		return getOffset(index) - pendingJump;
-	};
-	const shouldKeep = (index) => {
-		if (_scrollMode === SCROLL_BY_SHIFT) {
-			return true;
-		}
-		if (_frozenRange && _scrollMode === SCROLL_BY_MANUAL_SCROLL) {
-			return index < _frozenRange[0];
-		}
-		const start = getRelativeScrollOffset();
+	const shouldKeep = (index, start) => {
 		const itemOffset = getItemOffset(index);
 		const itemSize = getItemSize(index);
 		return _scrollDirection !== SCROLL_DOWN && _scrollMode === SCROLL_BY_NATIVE ? itemOffset + itemSize <= start : itemOffset < start && itemOffset + itemSize < start + viewportSize;
@@ -101,6 +98,24 @@ var createVirtualStore = ({ $getRange: getRange, $getItemOffset: getOffset, $get
 			}
 		}
 	};
+	const getAnchorIndex = () => {
+		const length = getLength();
+		if (_scrollMode === SCROLL_BY_SHIFT) {
+			return length;
+		}
+		if (_frozenRange && _scrollMode === SCROLL_BY_MANUAL_SCROLL) {
+			return min(_frozenRange[0], length);
+		}
+		const start = getVisibleOffset();
+		let anchorIndex = findIndex(start);
+		while (anchorIndex > 0 && !shouldKeep(anchorIndex - 1, start)) {
+			anchorIndex--;
+		}
+		while (anchorIndex < length && shouldKeep(anchorIndex, start)) {
+			anchorIndex++;
+		}
+		return anchorIndex;
+	};
 	return {
 		$dispose: () => {
 			subscribers.clear();
@@ -134,12 +149,11 @@ var createVirtualStore = ({ $getRange: getRange, $getItemOffset: getOffset, $get
 			}
 			return [max(startIndex, 0), min(endIndex, getLength() - 1)];
 		},
-		$isUnmeasuredItem: isSizeEqual,
-		$getItemOffset: getItemOffset,
-		$getItemSize: getItemSize,
-		$getItemsLength: getLength,
+		_getAnchorIndex: getAnchorIndex,
+		$getItemOffset: (index) => {
+			return getItemOffset(index) - pendingJump;
+		},
 		$getScrollOffset: () => scrollOffset,
-		$getVisibleOffset: getVisibleOffset,
 		$isScrolling: () => _scrollDirection !== SCROLL_IDLE,
 		$getViewportSize: () => viewportSize,
 		$getStartSpacerSize: () => startSpacerSize,
@@ -156,7 +170,7 @@ var createVirtualStore = ({ $getRange: getRange, $getItemOffset: getOffset, $get
 				subscribers.delete(sub);
 			};
 		},
-		$update: (type, payload) => {
+		$update: (type, payload, payload2) => {
 			let shouldFlushPendingJump;
 			let shouldSync;
 			let mutated = 0;
@@ -197,13 +211,14 @@ var createVirtualStore = ({ $getRange: getRange, $getItemOffset: getOffset, $get
 					break;
 				}
 				case 3: {
-					const updated = payload.filter(([index, size]) => !isSizeEqual(index, size));
-					if (!updated.length) {
-						break;
+					if (payload.length) {
+						const anchorIndex = getAnchorIndex();
+						const anchorOffset = getItemOffset(anchorIndex);
+						setItemSizes(payload, viewportSize);
+						applyJump(getItemOffset(anchorIndex) - anchorOffset);
+						mutated = 1 + 2;
+						shouldSync = true;
 					}
-					applyJump(resize(updated, shouldKeep, getVisibleOffset(), viewportSize));
-					mutated = 1 + 2;
-					shouldSync = true;
 					break;
 				}
 				case 4: {
@@ -217,32 +232,33 @@ var createVirtualStore = ({ $getRange: getRange, $getItemOffset: getOffset, $get
 					break;
 				}
 				case 5: {
-					if (payload[1]) {
-						applyJump(setLength(payload[0], true));
-						_scrollMode = SCROLL_BY_SHIFT;
-						mutated = 1;
-					} else {
-						setLength(payload[0]);
+					if (payload !== getLength()) {
+						if (payload2) {
+							const totalSize = getTotalSize();
+							setLength(payload, true);
+							applyJump(getTotalSize() - totalSize);
+							_scrollMode = SCROLL_BY_SHIFT;
+						} else {
+							setLength(payload);
+						}
 						mutated = 1;
 					}
 					break;
 				}
 				case 6: {
-					startSpacerSize = payload;
+					applyJump(payload);
+					mutated = 1;
 					break;
 				}
 				case 7: {
-					_scrollMode = SCROLL_BY_MANUAL_SCROLL;
+					startSpacerSize = payload;
 					break;
 				}
-				case 9: {
-					if (payload != null) {
-						applyJump(payload);
-						mutated = 1 + 2;
-					}
+				case 8: {
+					_scrollMode = SCROLL_BY_MANUAL_SCROLL;
 					break;
 				}
-				case 8: {
+				case 9: {
 					_frozenRange = getRange(payload, payload + viewportSize);
 					mutated = 1;
 					break;
@@ -297,8 +313,8 @@ var createListLayout = (length, itemSize, snapshot) => {
 	let _totalMeasuredSize = 0;
 	let shouldAutoEstimateItemSize = !itemSize;
 	let prevStartIndex = 0;
-	const restoredSizes = snapshot && snapshot[0];
-	const sizes = restoredSizes ? fill(restoredSizes.slice(0, min(length, restoredSizes.length)), max(0, length - restoredSizes.length)) : fill([], length);
+	const sizes = snapshot ? snapshot[0].slice(0, length) : [];
+	fill(sizes, length - sizes.length);
 	const offsets = fill([], length + 1);
 	const getSize = (index) => {
 		const size = sizes[index];
@@ -341,37 +357,26 @@ var createListLayout = (length, itemSize, snapshot) => {
 		$getItemOffset: getOffset,
 		$getItemSize: getSize,
 		$isSizeEqual: (index, size = -1) => sizes[index] === size,
-		$resize: (resizes, shouldKeep, scrollOffset, viewportSize) => {
-			let jump = resizes.reduce((acc, [index, size]) => shouldKeep(index) ? acc + (size - getSize(index)) : acc, 0);
+		$setItemSizes: (resizes, viewportSize) => {
 			for (const [index, size] of resizes) {
 				_totalMeasuredSize += sizes[index] === -1 ? size : size - getSize(index);
 				sizes[index] = size;
 				computedOffsetIndex = min(index, computedOffsetIndex);
 			}
 			if (shouldAutoEstimateItemSize && viewportSize && _totalMeasuredSize > viewportSize) {
-				let measuredCountBeforeStart = 0;
-				const startIndex = findIndex(getOffset, length, scrollOffset + jump);
 				const measuredSizes = [];
-				sizes.forEach((s, i) => {
-					if (s !== -1) {
-						if (s) {
-							measuredSizes.push(s);
-						}
-						if (i < startIndex) {
-							measuredCountBeforeStart++;
-						}
+				sizes.forEach((s) => {
+					if (s !== -1 && s) {
+						measuredSizes.push(s);
 					}
 				});
 				computedOffsetIndex = -1;
 				sort(measuredSizes);
 				const len = measuredSizes.length;
 				const mid = len / 2 | 0;
-				const median = len % 2 === 0 ? (measuredSizes[mid - 1] + measuredSizes[mid]) / 2 : measuredSizes[mid];
-				const prevDefaultItemSize = defaultItemSize;
-				jump += ((defaultItemSize = median) - prevDefaultItemSize) * max(startIndex - measuredCountBeforeStart, 0);
+				defaultItemSize = len % 2 === 0 ? (measuredSizes[mid - 1] + measuredSizes[mid]) / 2 : measuredSizes[mid];
 				shouldAutoEstimateItemSize = false;
 			}
-			return jump;
 		},
 		$getTotalSize: () => getOffset(length),
 		$getLength: () => length,
@@ -382,10 +387,9 @@ var createListLayout = (length, itemSize, snapshot) => {
 			if (diff > 0) {
 				fill(offsets, diff);
 				fill(sizes, diff, isShift);
-				return defaultItemSize * diff;
 			} else {
 				offsets.splice(diff);
-				return (isShift ? sizes.splice(0, -diff) : sizes.splice(diff)).reduce((acc, removed) => acc - (removed === -1 ? defaultItemSize : removed), 0);
+				isShift ? sizes.splice(0, -diff) : sizes.splice(diff);
 			}
 		},
 		$isEstimating: () => shouldAutoEstimateItemSize,
@@ -460,8 +464,7 @@ var createGridLayout = (axis, size, gap = 0) => {
 		$findIndex: find,
 		$getItemOffset: getOffset,
 		$getItemSize: getItemSize,
-		$resize: (resizes, shouldKeep, scrollOffset, viewportSize) => {
-			let jump = resizes.reduce((acc, [index, size]) => isMeasurable(index) && shouldKeep(index) ? acc + (size - getItemSize(index)) : acc, 0);
+		$setItemSizes: (resizes, viewportSize) => {
 			for (const [index, size] of resizes) {
 				if (isMeasurable(index)) {
 					materialize();
@@ -470,29 +473,19 @@ var createGridLayout = (axis, size, gap = 0) => {
 				}
 			}
 			if (shouldAutoEstimateItemSize && viewportSize && _totalMeasuredSize > viewportSize) {
-				let measuredCountBeforeStart = 0;
-				const startIndex = find(scrollOffset + jump);
 				const measuredSizes = [];
-				sizes.forEach((s, i) => {
-					if (s !== -1) {
-						if (s) {
-							measuredSizes.push(s);
-						}
-						if (i < startIndex) {
-							measuredCountBeforeStart++;
-						}
+				sizes.forEach((s) => {
+					if (s !== -1 && s) {
+						measuredSizes.push(s);
 					}
 				});
 				computedOffsetIndex = -1;
 				sort(measuredSizes);
 				const len = measuredSizes.length;
 				const mid = len / 2 | 0;
-				const median = len % 2 === 0 ? (measuredSizes[mid - 1] + measuredSizes[mid]) / 2 : measuredSizes[mid];
-				const prevDefaultItemSize = defaultItemSize;
-				jump += ((defaultItemSize = median) - prevDefaultItemSize) * max(startIndex - measuredCountBeforeStart, 0);
+				defaultItemSize = len % 2 === 0 ? (measuredSizes[mid - 1] + measuredSizes[mid]) / 2 : measuredSizes[mid];
 				shouldAutoEstimateItemSize = false;
 			}
-			return jump;
 		},
 		$isSizeEqual: (index, size = -1) => {
 			const cachedSize = sizes.length ? sizes[index] : -1;
@@ -511,7 +504,6 @@ var createGridLayout = (axis, size, gap = 0) => {
 					sizes.splice(diff);
 				}
 			}
-			return 0;
 		},
 		$isEstimating: () => shouldAutoEstimateItemSize,
 		$isMeasurable: isMeasurable,
@@ -522,28 +514,25 @@ var createGridLayout = (axis, size, gap = 0) => {
 		$getPinnedStart: getPinnedStart,
 		$getTrailStart: getTrailStart,
 		$getSizes: (nextAxis, nextSize) => typeof nextSize === "number" ? isUniform ? nextSize : null : isUniform || isAuto || nextSize === "auto" ? null : nextAxis.map((item) => item != null ? item[nextSize] : null),
-		$relayout: (nextSizes, scrollOffset) => {
+		$relayout: (nextSizes) => {
 			if (nextSizes == null) {
-				return;
+				return false;
 			}
 			if (typeof nextSizes === "number") {
 				const nextDefaultItemSize = nextSizes + gap;
 				if (nextDefaultItemSize === defaultItemSize) {
-					return;
+					return false;
 				}
-				const jump = find(scrollOffset) * (nextDefaultItemSize - defaultItemSize);
 				defaultItemSize = nextDefaultItemSize;
-				return jump;
+				return true;
 			}
 			if (nextSizes === currentSizes && length === autos.length) {
-				return;
+				return false;
 			}
 			currentSizes = nextSizes;
 			autos.length = length;
 			materialize();
-			const anchorIndex = find(scrollOffset);
-			const prevOffset = getOffset(anchorIndex);
-			let changed;
+			let changed = false;
 			for (let i = 0; i < length; i++) {
 				const itemSize = nextSizes[i];
 				const isAutoItem = typeof itemSize !== "number";
@@ -556,10 +545,7 @@ var createGridLayout = (axis, size, gap = 0) => {
 					}
 				}
 			}
-			if (!changed) {
-				return;
-			}
-			return getOffset(anchorIndex) - prevOffset;
+			return changed;
 		}
 	};
 };
@@ -910,96 +896,84 @@ var createMasonryLayout = (length, lanesOpt, gap = 0, itemSize, snapshot) => {
 	let computedIndex = -1;
 	let estimatingIndexes = itemSize ? undefined : new Set();
 	let isEstimating = !itemSize;
-	const restoredSizes = snapshot && snapshot[0];
-	const sizes = restoredSizes ? fill(restoredSizes.slice(0, min(length, restoredSizes.length)), max(0, length - restoredSizes.length)) : fill([], length);
+	const sizes = snapshot ? snapshot[0].slice(0, length) : [];
+	fill(sizes, length - sizes.length);
 	const offsets = [];
 	const laneIndexes = [];
-	const highs = [];
+	const highs = [0];
 	const getSize = (index) => {
 		const size = sizes[index];
 		return size === -1 ? defaultItemSize : size;
 	};
-	const compute = (index) => {
-		index = min(index, length - 1);
-		if (computedIndex >= index) return;
-		const bottoms = [];
+	const compute = () => {
+		if (computedIndex >= length - 1) return;
+		const nextOffsets = [];
 		const lastIndexes = [];
 		for (let l = 0; l < lanes; l++) {
-			bottoms.push(0);
+			nextOffsets.push(0);
 			lastIndexes.push(-1);
 		}
 		for (let j = computedIndex, remaining = lanes; j >= 0 && remaining; j--) {
 			const l = laneIndexes[j];
 			if (lastIndexes[l] === -1) {
 				lastIndexes[l] = j;
-				bottoms[l] = offsets[j] + getSize(j);
+				nextOffsets[l] = offsets[j] + getSize(j) + gap;
 				remaining--;
 			}
 		}
-		while (computedIndex < index) {
+		while (computedIndex < length - 1) {
 			const i = ++computedIndex;
 			let lane = 0;
 			let offset = Infinity;
 			let lastIndex = Infinity;
 			for (let l = 0; l < lanes; l++) {
-				const candidate = bottoms[l] + (lastIndexes[l] >= 0 ? gap : 0);
+				const candidate = nextOffsets[l];
 				if (candidate < offset || candidate === offset && lastIndexes[l] < lastIndex) {
 					lane = l;
 					offset = candidate;
 					lastIndex = lastIndexes[l];
 				}
 			}
+			const bottom = offset + getSize(i);
 			offsets[i] = offset;
 			laneIndexes[i] = lane;
-			bottoms[lane] = offset + getSize(i);
+			nextOffsets[lane] = bottom + gap;
 			lastIndexes[lane] = i;
-			highs[i] = max(i ? highs[i - 1] : 0, bottoms[lane]);
+			highs[i + 1] = max(highs[i], bottom);
 		}
 	};
 	const getOffset = (index) => {
 		if (index >= length) return getTotalSize();
-		compute(index);
+		compute();
 		return offsets[index];
 	};
 	const getHigh = (index) => {
-		compute(index);
+		compute();
 		return highs[index];
 	};
-	const getTotalSize = () => length ? getHigh(length - 1) : 0;
-	const findStart = (offset) => {
-		if (!length) return 0;
-		const index = findIndex(getHigh, length, offset);
-		return getHigh(index) <= offset ? index + 1 : index;
-	};
+	const getTotalSize = () => getHigh(length);
+	const findStart = (offset) => findIndex(getHigh, length + 1, offset);
 	return {
 		$getRange: (startOffset, endOffset) => {
 			const end = findIndex(getOffset, length, endOffset);
 			return [min(findStart(startOffset), end), end];
 		},
+		$findIndex: findStart,
 		$getItemOffset: getOffset,
 		$getItemSize: getSize,
 		$isSizeEqual: (index, size = -1) => sizes[index] === size,
-		$resize: (resizes, shouldKeep, scrollOffset, viewportSize) => {
-			let anchorIndex = findStart(scrollOffset);
-			while (anchorIndex > 0 && !shouldKeep(anchorIndex - 1)) {
-				anchorIndex--;
-			}
-			while (anchorIndex < length && shouldKeep(anchorIndex)) {
-				anchorIndex++;
-			}
-			const prevAnchorOffset = getOffset(anchorIndex);
+		$setItemSizes: (resizes, viewportSize) => {
 			for (const [index, size] of resizes) {
 				sizes[index] = size;
 				estimatingIndexes && estimatingIndexes.add(index);
 				computedIndex = min(index - 1, computedIndex);
 			}
-			let jump = getOffset(anchorIndex) - prevAnchorOffset;
 			if (estimatingIndexes && viewportSize) {
 				const measuredSizes = [];
 				let totalMeasuredSize = 0;
 				estimatingIndexes.forEach((index) => {
 					const size = sizes[index];
-					if (size > 0) {
+					if (size !== -1 && size) {
 						measuredSizes.push(size);
 						totalMeasuredSize += size + gap;
 					}
@@ -1008,17 +982,12 @@ var createMasonryLayout = (length, lanesOpt, gap = 0, itemSize, snapshot) => {
 					sort(measuredSizes);
 					const len = measuredSizes.length;
 					const mid = len / 2 | 0;
-					const median = len % 2 === 0 ? (measuredSizes[mid - 1] + measuredSizes[mid]) / 2 : measuredSizes[mid];
-					const startIndex = findStart(scrollOffset + jump);
-					const prevStartOffset = getOffset(startIndex);
-					defaultItemSize = median;
+					defaultItemSize = len % 2 === 0 ? (measuredSizes[mid - 1] + measuredSizes[mid]) / 2 : measuredSizes[mid];
 					computedIndex = -1;
-					jump += getOffset(startIndex) - prevStartOffset;
 					estimatingIndexes = undefined;
 					isEstimating = false;
 				}
 			}
-			return jump;
 		},
 		$getTotalSize: getTotalSize,
 		$getLength: () => length,
@@ -1031,34 +1000,31 @@ var createMasonryLayout = (length, lanesOpt, gap = 0, itemSize, snapshot) => {
 			} else {
 				sizes.splice(diff);
 			}
-			return 0;
 		},
-		$relayout: (nextLanes, nextGap = 0, scrollOffset) => {
+		$relayout: (nextLanes, nextGap = 0) => {
 			nextLanes = max(nextLanes, 1);
 			if (nextLanes === lanes && nextGap === gap) {
-				return;
+				return false;
 			}
-			const startIndex = findStart(scrollOffset);
-			const prevStartOffset = getOffset(startIndex);
 			lanes = nextLanes;
 			gap = nextGap;
 			computedIndex = -1;
 			estimatingIndexes = itemSize ? undefined : new Set();
-			return getOffset(startIndex) - prevStartOffset;
+			return true;
 		},
 		$isEstimating: () => isEstimating,
 		$snapshot: () => [sizes.slice(), defaultItemSize],
 		$getLanes: () => lanes,
 		$getGap: () => gap,
 		$getItemLane: (index) => {
-			compute(index);
+			compute();
 			return laneIndexes[index];
 		}
 	};
 };
 
 //#endregion
-//#region src/core/observer.ts
+//#region src/core/driver.ts
 var createResizeObserver = (cb) => {
 	let ro;
 	return {
@@ -1073,7 +1039,7 @@ var createResizeObserver = (cb) => {
 		}
 	};
 };
-var createScrollObserver = (store, viewport, scroller, isHorizontal, isRtl, onMomentumJump, getStartOffset) => {
+var createScrollObserver = (store, layout, viewport, scroller, isHorizontal, isRtl, onMomentumJump, getStartOffset) => {
 	let lastScrollTime = 0;
 	let wheeling = false;
 	let touching = false;
@@ -1113,7 +1079,7 @@ var createScrollObserver = (store, viewport, scroller, isHorizontal, isRtl, onMo
 			stillMomentumScrolling = true;
 		}
 		if (getStartOffset) {
-			store.$update(6, getStartOffset());
+			store.$update(7, getStartOffset());
 		}
 		store.$update(1, getScrollOffset());
 		scheduleScrollEnd();
@@ -1197,13 +1163,13 @@ var createScrollObserver = (store, viewport, scroller, isHorizontal, isRtl, onMo
 				}
 				if (smooth) {
 					for (let [i, end] = store.$getRange(0); i <= end; i++) {
-						if (store.$isUnmeasuredItem(i)) {
+						if (layout.$isSizeEqual(i)) {
 							return;
 						}
 					}
 					stop();
 				}
-				store.$update(7);
+				store.$update(8);
 				scrollTo(getTargetOffset(), smooth);
 			};
 			const start = () => {
@@ -1224,16 +1190,13 @@ var createScrollObserver = (store, viewport, scroller, isHorizontal, isRtl, onMo
 				onMeasured();
 			};
 			if (smooth) {
-				store.$update(8, getTargetOffset());
+				store.$update(9, getTargetOffset());
 			}
 			start();
 		}
 	};
 };
-
-//#endregion
-//#region src/core/driver.ts
-var createContainerDriver = (store, isHorizontal) => {
+var createContainerDriver = (store, layout, isHorizontal) => {
 	let viewportElement;
 	let scrollObserver;
 	let initialized = createPromise();
@@ -1255,18 +1218,19 @@ var createContainerDriver = (store, isHorizontal) => {
 			} else if (target.offsetParent) {
 				const index = mountedIndexes.get(target);
 				if (index != null) {
-					resizes.push([index, isHorizontal ? width : height]);
+					const size = isHorizontal ? width : height;
+					if (!layout.$isSizeEqual(index, size)) {
+						resizes.push([index, size]);
+					}
 				}
 			}
 		}
-		if (resizes.length) {
-			store.$update(3, resizes);
-		}
+		store.$update(3, resizes);
 	});
 	return {
 		$observe(containerElement, viewport = containerElement.parentElement) {
 			resizeObserver._observe(viewportElement = viewport);
-			scrollObserver = createScrollObserver(store, viewport, viewport, isHorizontal, isHorizontal && getComputedStyle(viewport).direction === "rtl", () => {
+			scrollObserver = createScrollObserver(store, layout, viewport, viewport, isHorizontal, isHorizontal && getComputedStyle(viewport).direction === "rtl", () => {
 				const overflowKey = isHorizontal ? "overflowX" : "overflowY";
 				const style = viewport.style;
 				const prev = style[overflowKey];
@@ -1302,7 +1266,7 @@ var createContainerDriver = (store, isHorizontal) => {
 		$getBaseOffset: store.$getStartSpacerSize
 	};
 };
-var createWindowDriver = (store, isHorizontal) => {
+var createWindowDriver = (store, layout, isHorizontal) => {
 	let viewportElement;
 	let scrollObserver;
 	let cleanupOnWindowResize;
@@ -1318,13 +1282,14 @@ var createWindowDriver = (store, isHorizontal) => {
 			} else if (target.offsetParent) {
 				const index = mountedIndexes.get(target);
 				if (index != null) {
-					resizes.push([index, isHorizontal ? width : height]);
+					const size = isHorizontal ? width : height;
+					if (!layout.$isSizeEqual(index, size)) {
+						resizes.push([index, size]);
+					}
 				}
 			}
 		}
-		if (resizes.length) {
-			store.$update(3, resizes);
-		}
+		store.$update(3, resizes);
 	});
 	return {
 		$observe(container) {
@@ -1352,7 +1317,7 @@ var createWindowDriver = (store, isHorizontal) => {
 			cleanupOnWindowResize = () => {
 				window.removeEventListener("resize", onWindowResize);
 			};
-			scrollObserver = createScrollObserver(store, window, viewport, isHorizontal, isRtl, null, baseOffset);
+			scrollObserver = createScrollObserver(store, layout, window, viewport, isHorizontal, isRtl, null, baseOffset);
 			initialized[1](true);
 		},
 		$dispose() {
@@ -1383,7 +1348,7 @@ var createWindowDriver = (store, isHorizontal) => {
 		}
 	};
 };
-var createContainerGridDriver = (rowStore, colStore) => {
+var createContainerGridDriver = (rowStore, colStore, rowLayout, colLayout) => {
 	let viewportElement;
 	let rowScrollObserver;
 	let colScrollObserver;
@@ -1410,20 +1375,16 @@ var createContainerGridDriver = (rowStore, colStore) => {
 			} else if (target.offsetParent) {
 				const rowIndex = mountedRowIndexes.get(target);
 				const colIndex = mountedColIndexes.get(target);
-				if (rowIndex != null) {
+				if (rowIndex != null && !rowLayout.$isSizeEqual(rowIndex, height)) {
 					rowResizes.push([rowIndex, height]);
 				}
-				if (colIndex != null) {
+				if (colIndex != null && !colLayout.$isSizeEqual(colIndex, width)) {
 					colResizes.push([colIndex, width]);
 				}
 			}
 		}
-		if (rowResizes.length) {
-			rowStore.$update(3, rowResizes);
-		}
-		if (colResizes.length) {
-			colStore.$update(3, colResizes);
-		}
+		rowStore.$update(3, rowResizes);
+		colStore.$update(3, colResizes);
 	});
 	return {
 		async $scroll(isHorizontal, getTargetOffset) {
@@ -1433,7 +1394,7 @@ var createContainerGridDriver = (rowStore, colStore) => {
 		},
 		$observe(containerElement, viewport = containerElement.parentElement) {
 			resizeObserver._observe(viewportElement = viewport);
-			const observe = (store, isHorizontal) => createScrollObserver(store, viewport, viewport, isHorizontal, isHorizontal && getComputedStyle(viewport).direction === "rtl", () => {
+			const observe = (store, layout, isHorizontal) => createScrollObserver(store, layout, viewport, viewport, isHorizontal, isHorizontal && getComputedStyle(viewport).direction === "rtl", () => {
 				const overflowKey = isHorizontal ? "overflowX" : "overflowY";
 				const style = viewport.style;
 				const prev = style[overflowKey];
@@ -1442,8 +1403,8 @@ var createContainerGridDriver = (rowStore, colStore) => {
 					style[overflowKey] = prev;
 				});
 			});
-			rowScrollObserver = observe(rowStore, false);
-			colScrollObserver = observe(colStore, true);
+			rowScrollObserver = observe(rowStore, rowLayout, false);
+			colScrollObserver = observe(colStore, colLayout, true);
 			initialized[1](true);
 		},
 		$dispose() {
@@ -1482,21 +1443,21 @@ var scrollTo = (driver, offset) => {
 var scrollBy = (driver, store, offset) => {
 	scrollTo(driver, offset + store.$getScrollOffset());
 };
-var scrollToIndex = (driver, store, index, { align, smooth, offset = 0 } = {}) => {
-	index = clamp(index, 0, store.$getItemsLength() - 1);
+var scrollToIndex = (driver, store, layout, index, { align, smooth, offset = 0 } = {}) => {
+	index = clamp(index, 0, layout.$getLength() - 1);
 	if (align === "nearest") {
 		const itemOffset = store.$getItemOffset(index);
 		const scrollOffset = store.$getScrollOffset();
 		if (itemOffset < scrollOffset) {
 			align = "start";
-		} else if (itemOffset + store.$getItemSize(index) > scrollOffset + store.$getViewportSize()) {
+		} else if (itemOffset + layout.$getItemSize(index) > scrollOffset + store.$getViewportSize()) {
 			align = "end";
 		} else {
 			return;
 		}
 	}
 	driver.$scroll(() => {
-		return offset + driver.$getBaseOffset() + store.$getItemOffset(index) + (align === "end" ? store.$getItemSize(index) - store.$getViewportSize() : align === "center" ? (store.$getItemSize(index) - store.$getViewportSize()) / 2 : 0);
+		return offset + driver.$getBaseOffset() + store.$getItemOffset(index) + (align === "end" ? layout.$getItemSize(index) - store.$getViewportSize() : align === "center" ? (layout.$getItemSize(index) - store.$getViewportSize()) / 2 : 0);
 	}, smooth);
 };
 var gridScrollTo = (driver, vertical, horizontal) => {
@@ -1518,7 +1479,7 @@ var gridScrollBy = (driver, rowStore, colStore, vertical, horizontal) => {
 	}
 };
 var scrollGridAxisToIndex = (driver, store, layout, sections, index, align, isHorizontal) => {
-	const count = store.$getItemsLength();
+	const count = layout.$getLength();
 	const pinnedStart = layout.$getPinnedStart();
 	const trailStart = layout.$getTrailStart();
 	index = clamp(index, 0, count - 1);
@@ -1534,11 +1495,11 @@ var scrollGridAxisToIndex = (driver, store, layout, sections, index, align, isHo
 		const insetStart = getInsetStart();
 		const scrollOffset = store.$getScrollOffset() + insetStart;
 		const viewportSize = store.$getViewportSize() - insetStart - getInsetEnd();
-		const itemSize = store.$getItemSize(index);
+		const itemSize = layout.$getItemSize(index);
 		let itemOffset = store.$getItemOffset(index);
 		if (sectionHeader === index) {
 			const lastIndex = (section + 1 < starts.length ? starts[section + 1] : trailStart) - 1;
-			itemOffset = max(itemOffset, min(scrollOffset, store.$getItemOffset(lastIndex) + store.$getItemSize(lastIndex) - itemSize));
+			itemOffset = max(itemOffset, min(scrollOffset, store.$getItemOffset(lastIndex) + layout.$getItemSize(lastIndex) - itemSize));
 		}
 		if (itemOffset < scrollOffset) {
 			align = "start";
@@ -1550,7 +1511,7 @@ var scrollGridAxisToIndex = (driver, store, layout, sections, index, align, isHo
 	}
 	driver.$scroll(isHorizontal, () => {
 		const insetStart = getInsetStart();
-		const rest = store.$getItemSize(index) - (store.$getViewportSize() - insetStart - getInsetEnd());
+		const rest = layout.$getItemSize(index) - (store.$getViewportSize() - insetStart - getInsetEnd());
 		return store.$getItemOffset(index) - insetStart + (align === "end" ? rest : align === "center" ? rest / 2 : 0);
 	});
 };
@@ -1609,7 +1570,7 @@ var Virtualizer = (props) => {
 	const [isSSR, setIsSSR] = createSignal(!!ssrCount);
 	const layout = createListLayout(props.data.length, itemSize, cache);
 	const store = createVirtualStore(layout, ssrCount);
-	const driver = createContainerDriver(store, horizontal);
+	const driver = createContainerDriver(store, layout, horizontal);
 	const [stateVersion, setRerender] = createSignal(store.$getStateVersion());
 	store.$subscribe(1, () => {
 		setRerender(store.$getStateVersion());
@@ -1650,8 +1611,8 @@ var Virtualizer = (props) => {
 			},
 			findItemIndex: (offset) => layout.$findIndex(offset - store.$getStartSpacerSize()),
 			getItemOffset: store.$getItemOffset,
-			getItemSize: store.$getItemSize,
-			scrollToIndex: (index, opts) => scrollToIndex(driver, store, index, opts),
+			getItemSize: layout.$getItemSize,
+			scrollToIndex: (index, opts) => scrollToIndex(driver, store, layout, index, opts),
 			scrollTo: (offset) => scrollTo(driver, offset),
 			scrollBy: (offset) => scrollBy(driver, store, offset)
 		});
@@ -1667,7 +1628,7 @@ var Virtualizer = (props) => {
 	});
 	createComputed(on(() => props.startMargin || 0, (value) => {
 		if (value !== store.$getStartSpacerSize()) {
-			store.$update(6, value);
+			store.$update(7, value);
 		}
 	}));
 	createEffect(on(stateVersion, () => {
@@ -1676,9 +1637,7 @@ var Virtualizer = (props) => {
 	const dataSlice = createMemo(() => {
 		const count = props.data.length;
 		untrack(() => {
-			if (count !== store.$getItemsLength()) {
-				store.$update(5, [count, props.shift]);
-			}
+			store.$update(5, count, props.shift);
 		});
 		const items = [];
 		const indexes = [];
@@ -1711,7 +1670,7 @@ var Virtualizer = (props) => {
 		});
 		const hide = createMemo(() => {
 			stateVersion();
-			return store.$isUnmeasuredItem(index());
+			return layout.$isSizeEqual(index());
 		});
 		const children = createMemo(() => {
 			return untrack(() => props.children(data, index));
@@ -1778,7 +1737,7 @@ var WindowVirtualizer = (props) => {
 	const [isSSR, setIsSSR] = createSignal(!!ssrCount);
 	const layout = createListLayout(props.data.length, itemSize, cache);
 	const store = createVirtualStore(layout, ssrCount);
-	const driver = createWindowDriver(store, horizontal);
+	const driver = createWindowDriver(store, layout, horizontal);
 	const [stateVersion, setRerender] = createSignal(store.$getStateVersion());
 	store.$subscribe(1, () => {
 		setRerender(store.$getStateVersion());
@@ -1816,8 +1775,8 @@ var WindowVirtualizer = (props) => {
 			},
 			findItemIndex: (offset) => layout.$findIndex(offset - store.$getStartSpacerSize()),
 			getItemOffset: store.$getItemOffset,
-			getItemSize: store.$getItemSize,
-			scrollToIndex: (index, opts) => scrollToIndex(driver, store, index, opts)
+			getItemSize: layout.$getItemSize,
+			scrollToIndex: (index, opts) => scrollToIndex(driver, store, layout, index, opts)
 		});
 		onCleanup(() => ref());
 	}
@@ -1835,9 +1794,7 @@ var WindowVirtualizer = (props) => {
 	const dataSlice = createMemo(() => {
 		const count = props.data.length;
 		untrack(() => {
-			if (count !== store.$getItemsLength()) {
-				store.$update(5, [count, props.shift]);
-			}
+			store.$update(5, count, props.shift);
 		});
 		const items = [];
 		for (let [i, j] = range(); i <= j; i++) {
@@ -1863,7 +1820,7 @@ var WindowVirtualizer = (props) => {
 		});
 		const hide = createMemo(() => {
 			stateVersion();
-			return store.$isUnmeasuredItem(itemIndex());
+			return layout.$isSizeEqual(itemIndex());
 		});
 		const children = createMemo(() => {
 			return untrack(() => props.children(data, itemIndex));
@@ -1954,7 +1911,7 @@ var VGrid = (props) => {
 	const spanIndex = createMemo(() => createGridSpanIndex(props.spans));
 	const rowStore = createVirtualStore(rowLayout);
 	const colStore = createVirtualStore(colLayout);
-	const driver = createContainerGridDriver(rowStore, colStore);
+	const driver = createContainerGridDriver(rowStore, colStore, rowLayout, colLayout);
 	const getStateVersion = () => rowStore.$getStateVersion() + colStore.$getStateVersion();
 	const [stateVersion, setRerender] = createSignal(getStateVersion());
 	const rerender = () => setRerender(getStateVersion());
@@ -1994,17 +1951,13 @@ var VGrid = (props) => {
 		colLayout.$setPinned(props.headerCols, props.footerCols);
 		const rowLength = getAxisLength(props.rows);
 		const colLength = getAxisLength(props.cols);
-		if (rowLength !== rowStore.$getItemsLength()) {
-			rowStore.$update(5, [rowLength]);
-		}
-		if (colLength !== colStore.$getItemsLength()) {
-			colStore.$update(5, [colLength]);
-		}
-		rowStore.$update(9, rowLayout.$relayout(rowSizes(), rowStore.$getVisibleOffset()));
-		colStore.$update(9, colLayout.$relayout(colSizes(), colStore.$getVisibleOffset()));
+		rowStore.$update(5, rowLength);
+		colStore.$update(5, colLength);
+		relayout(rowStore, rowLayout, rowSizes());
+		relayout(colStore, colLayout, colSizes());
 	});
-	const rowCount = createMemo(() => stateVersion() && rowStore.$getItemsLength());
-	const colCount = createMemo(() => stateVersion() && colStore.$getItemsLength());
+	const rowCount = createMemo(() => stateVersion() && rowLayout.$getLength());
+	const colCount = createMemo(() => stateVersion() && colLayout.$getLength());
 	const plan = createMemo(() => {
 		stateVersion();
 		return createGridPlan(rowLayout, colLayout, rowStore.$getRange(props.bufferSize), colStore.$getRange(props.bufferSize), spanIndex(), props.sectionRows, props.keepMounted, props.ariaSort);
@@ -2054,8 +2007,8 @@ var VGrid = (props) => {
 			findColIndex: colLayout.$findIndex,
 			getRowOffset: rowStore.$getItemOffset,
 			getColOffset: colStore.$getItemOffset,
-			getRowSize: rowStore.$getItemSize,
-			getColSize: colStore.$getItemSize,
+			getRowSize: rowLayout.$getItemSize,
+			getColSize: colLayout.$getItemSize,
 			scrollToIndex: (opts) => gridScrollToIndex(driver, rowStore, colStore, rowLayout, colLayout, props.sectionRows, opts),
 			scrollTo: ({ vertical, horizontal }) => gridScrollTo(driver, vertical, horizontal),
 			scrollBy: ({ vertical, horizontal }) => gridScrollBy(driver, rowStore, colStore, vertical, horizontal)
@@ -2129,7 +2082,7 @@ var VMasonry = (props) => {
 	]);
 	const layout = createMasonryLayout(props.data.length, props.lanes, props.gap, itemSize, cache);
 	const store = createVirtualStore(layout);
-	const driver = createContainerDriver(store, false);
+	const driver = createContainerDriver(store, layout, false);
 	const [stateVersion, setRerender] = createSignal(store.$getStateVersion());
 	store.$subscribe(1, () => {
 		setRerender(store.$getStateVersion());
@@ -2144,7 +2097,7 @@ var VMasonry = (props) => {
 		props.onResize?.();
 	});
 	createComputed(() => {
-		store.$update(9, layout.$relayout(props.lanes, props.gap, store.$getVisibleOffset()));
+		relayout(store, layout, props.lanes, props.gap);
 	});
 	const range = createMemo((prev) => {
 		stateVersion();
@@ -2175,8 +2128,8 @@ var VMasonry = (props) => {
 				return store.$getViewportSize();
 			},
 			getItemOffset: store.$getItemOffset,
-			getItemSize: store.$getItemSize,
-			scrollToIndex: (index, opts) => scrollToIndex(driver, store, index, opts),
+			getItemSize: layout.$getItemSize,
+			scrollToIndex: (index, opts) => scrollToIndex(driver, store, layout, index, opts),
 			scrollTo: (offset) => scrollTo(driver, offset),
 			scrollBy: (offset) => scrollBy(driver, store, offset)
 		});
@@ -2195,9 +2148,7 @@ var VMasonry = (props) => {
 	const dataSlice = createMemo(() => {
 		const count = props.data.length;
 		untrack(() => {
-			if (count !== store.$getItemsLength()) {
-				store.$update(5, [count]);
-			}
+			store.$update(5, count);
 		});
 		const items = [];
 		const indexes = [];
@@ -2234,7 +2185,7 @@ var VMasonry = (props) => {
 		});
 		const hide = createMemo(() => {
 			stateVersion();
-			return store.$isUnmeasuredItem(index());
+			return layout.$isSizeEqual(index());
 		});
 		const children = createMemo(() => {
 			return untrack(() => props.children(data, index));