virtua 0.51.0 → 0.51.2

package/lib/solid/index.jsx

@@ -1,5 +1,5 @@
 import { For, createComputed, createEffect, createMemo, createSignal, mergeProps, on, onCleanup, onMount, splitProps, untrack } from "solid-js";
-import { Dynamic } from "solid-js/web";
+import { Dynamic, isServer } from "solid-js/web";
 
 //#region src/core/utils.ts
 var NULL = null;
@@ -20,28 +20,19 @@ var createPromise = () => {
 	});
 	return [promise, resolve];
 };
-var once = (fn) => {
-	let cache;
-	return () => {
-		if (fn) {
-			cache = fn();
-			fn = undefined;
-		}
-		return cache;
-	};
-};
 
 //#endregion
 //#region src/core/environment.ts
 var isBrowser = typeof window !== "undefined";
 var getCurrentDocument = (node) => node.ownerDocument;
 var getCurrentWindow = (doc) => doc.defaultView;
-var isIOSWebKit = /*#__PURE__*/ once(() => {
-	if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
-		return true;
+var isIOS;
+var isIOSWebKit = () => {
+	if (isIOS == null) {
+		isIOS = /iP(hone|od|ad)/.test(navigator.userAgent) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 0;
 	}
-	return navigator.platform === "MacIntel" && navigator.maxTouchPoints > 0;
-});
+	return isIOS;
+};
 
 //#endregion
 //#region src/core/store.ts
@@ -418,17 +409,27 @@ var createResizeObserver = (cb) => {
 		}
 	};
 };
-var normalizeScrollOffset = (offset, isNegative) => {
-	return isNegative ? -offset : offset;
-};
-var createScrollObserver = (store, viewport, isHorizontal, getScrollOffset, updateScrollOffset, getStartOffset) => {
+var createScrollObserver = (store, viewport, scroller, isHorizontal, isRtl, onMomentumJump, getStartOffset) => {
 	let lastScrollTime = 0;
 	let wheeling = false;
 	let touching = false;
 	let justTouchEnded = false;
 	let stillMomentumScrolling = false;
+	let cancelScroll;
 	let scrollEndTimer;
 	const now = Date.now;
+	const scrollOffsetKey = isHorizontal ? "scrollLeft" : "scrollTop";
+	const scrollToKey = isHorizontal ? "left" : "top";
+	const normalizeScrollOffset = (offset) => {
+		return isRtl ? -offset : offset;
+	};
+	const getScrollOffset = () => normalizeScrollOffset(scroller[scrollOffsetKey]);
+	const scrollTo = (offset, smooth) => {
+		scroller.scrollTo({
+			[scrollToKey]: normalizeScrollOffset(offset),
+			behavior: smooth ? "smooth" : "instant"
+		});
+	};
 	const onScrollEnd = () => {
 		if (wheeling || touching) {
 			wheeling = false;
@@ -487,94 +488,90 @@ var createScrollObserver = (store, viewport, isHorizontal, getScrollOffset, upda
 		_fixScrollJump: () => {
 			const [jump, shift] = store._flushJump();
 			if (!jump) return;
-			updateScrollOffset(jump, shift, stillMomentumScrolling);
+			if (stillMomentumScrolling && onMomentumJump) {
+				onMomentumJump();
+			}
 			stillMomentumScrolling = false;
-			if (shift && store.$getViewportSize() > store.$getTotalSize()) {
-				store.$update(1, getScrollOffset());
+			const target = store.$getScrollOffset() + jump;
+			if (target <= 0 || target >= store.$getStartSpacerSize() + store.$getTotalSize() - store.$getViewportSize()) {
+				scrollTo(target);
+			} else {
+				scroller.scrollBy({
+					[scrollToKey]: normalizeScrollOffset(jump),
+					behavior: "instant"
+				});
 			}
-		}
-	};
-};
-
-//#endregion
-//#region src/core/driver.ts
-var createScrollScheduler = (store, initialized, scroll) => {
-	let cancelScroll;
-	return [async (getTargetOffset, smooth) => {
-		if (!await initialized()) {
-			return;
-		}
-		if (cancelScroll) {
-			cancelScroll();
-		}
-		let stopped;
-		let timerId;
-		let unsubscribe;
-		const stop = cancelScroll = () => {
-			stopped = true;
-			cancelTimeout(timerId);
-			unsubscribe && unsubscribe();
-		};
-		const onMeasured = () => {
-			if (stopped) {
-				return;
+			if (shift) {
+				cancelScroll && cancelScroll();
+				if (store.$getViewportSize() > store.$getTotalSize()) {
+					store.$update(1, getScrollOffset());
+				}
 			}
-			if (store.$getViewportSize()) {
-				cancelTimeout(timerId);
-				timerId = timeout(stop, 150);
+		},
+		_scroll: (getTargetOffset, smooth) => {
+			if (cancelScroll) {
+				cancelScroll();
 			}
-			if (smooth) {
-				for (let [i, end] = store.$getRange(0); i <= end; i++) {
-					if (store.$isUnmeasuredItem(i)) {
-						return;
+			let stopped;
+			let timerId;
+			let unsubscribe;
+			const stop = cancelScroll = () => {
+				stopped = true;
+				cancelTimeout(timerId);
+				unsubscribe && unsubscribe();
+			};
+			const onMeasured = () => {
+				if (stopped) {
+					return;
+				}
+				if (store.$getViewportSize()) {
+					cancelTimeout(timerId);
+					timerId = timeout(stop, 150);
+				}
+				if (smooth) {
+					for (let [i, end] = store.$getRange(0); i <= end; i++) {
+						if (store.$isUnmeasuredItem(i)) {
+							return;
+						}
 					}
+					stop();
 				}
-				stop();
-			}
-			store.$update(7);
-			scroll(getTargetOffset(), smooth);
-		};
-		const start = () => {
-			if (stopped) {
-				return;
-			}
-			let queued;
-			unsubscribe = store.$subscribe(2, () => {
-				if (queued) {
+				store.$update(7);
+				scrollTo(getTargetOffset(), smooth);
+			};
+			const start = () => {
+				if (stopped) {
 					return;
 				}
-				queued = true;
-				microtask(() => {
-					queued = false;
-					onMeasured();
+				let queued;
+				unsubscribe = store.$subscribe(2, () => {
+					if (queued) {
+						return;
+					}
+					queued = true;
+					microtask(() => {
+						queued = false;
+						onMeasured();
+					});
 				});
-			});
-			onMeasured();
-		};
-		if (smooth) {
-			store.$update(8, getTargetOffset());
-			microtask(start);
-		} else {
-			start();
+				onMeasured();
+			};
+			if (smooth) {
+				store.$update(8, getTargetOffset());
+				microtask(start);
+			} else {
+				start();
+			}
 		}
-	}, () => {
-		cancelScroll && cancelScroll();
-	}];
+	};
 };
+
+//#endregion
+//#region src/core/driver.ts
 var createContainerDriver = (store, isHorizontal) => {
 	let viewportElement;
 	let scrollObserver;
 	let initialized = createPromise();
-	let isRtl = false;
-	const scrollOffsetKey = isHorizontal ? "scrollLeft" : "scrollTop";
-	const scrollToKey = isHorizontal ? "left" : "top";
-	const overflowKey = isHorizontal ? "overflowX" : "overflowY";
-	const [scheduleScroll, cancelScroll] = createScrollScheduler(store, () => initialized[0], (offset, smooth) => {
-		viewportElement.scrollTo({
-			[scrollToKey]: normalizeScrollOffset(offset, isRtl),
-			behavior: smooth ? "smooth" : "instant"
-		});
-	});
 	const sizeKey = isHorizontal ? "width" : "height";
 	const mountedIndexes = new WeakMap();
 	const resizeObserver = createResizeObserver((entries) => {
@@ -597,33 +594,14 @@ var createContainerDriver = (store, isHorizontal) => {
 	return {
 		$observe(containerElement, viewport = containerElement.parentElement) {
 			resizeObserver._observe(viewportElement = viewport);
-			if (isHorizontal) {
-				isRtl = getComputedStyle(viewport).direction === "rtl";
-			}
-			scrollObserver = createScrollObserver(store, viewport, isHorizontal, () => normalizeScrollOffset(viewport[scrollOffsetKey], isRtl), (jump, shift, isMomentumScrolling) => {
-				if (isMomentumScrolling) {
-					const style = viewport.style;
-					const prev = style[overflowKey];
-					style[overflowKey] = "hidden";
-					timeout(() => {
-						style[overflowKey] = prev;
-					});
-				}
-				const target = store.$getScrollOffset() + jump;
-				if (target <= 0 || target >= store.$getStartSpacerSize() + store.$getTotalSize() - store.$getViewportSize()) {
-					viewport.scrollTo({
-						[scrollToKey]: normalizeScrollOffset(target, isRtl),
-						behavior: "instant"
-					});
-				} else {
-					viewport.scrollBy({
-						[scrollToKey]: normalizeScrollOffset(jump, isRtl),
-						behavior: "instant"
-					});
-				}
-				if (shift) {
-					cancelScroll();
-				}
+			scrollObserver = createScrollObserver(store, viewport, viewport, isHorizontal, isHorizontal && getComputedStyle(viewport).direction === "rtl", () => {
+				const overflowKey = isHorizontal ? "overflowX" : "overflowY";
+				const style = viewport.style;
+				const prev = style[overflowKey];
+				style[overflowKey] = "hidden";
+				timeout(() => {
+					style[overflowKey] = prev;
+				});
 			});
 			initialized[1](true);
 		},
@@ -641,7 +619,11 @@ var createContainerDriver = (store, isHorizontal) => {
 				resizeObserver._unobserve(el);
 			};
 		},
-		$scroll: scheduleScroll,
+		async $scroll(getTargetOffset, smooth) {
+			if (await initialized[0]) {
+				scrollObserver._scroll(getTargetOffset, smooth);
+			}
+		},
 		$effect() {
 			scrollObserver && scrollObserver._fixScrollJump();
 		},
@@ -655,15 +637,6 @@ var createWindowDriver = (store, isHorizontal) => {
 	let getBaseOffset;
 	let onViewportResize;
 	let initialized = createPromise();
-	let isRtl = false;
-	const scrollOffsetKey = isHorizontal ? "scrollLeft" : "scrollTop";
-	const scrollToKey = isHorizontal ? "left" : "top";
-	const [scheduleScroll, cancelScroll] = createScrollScheduler(store, () => initialized[0], (offset, smooth) => {
-		viewportElement.scrollTo({
-			[scrollToKey]: normalizeScrollOffset(offset, isRtl),
-			behavior: smooth ? "smooth" : "instant"
-		});
-	});
 	const sizeKey = isHorizontal ? "width" : "height";
 	const mountedIndexes = new WeakMap();
 	const resizeObserver = createResizeObserver((entries) => {
@@ -683,20 +656,21 @@ var createWindowDriver = (store, isHorizontal) => {
 			store.$update(3, resizes);
 		}
 	});
-	const calcOffsetToViewport = (node, viewport, until, isHorizontal, offset = 0) => {
-		const offsetKey = isHorizontal ? "offsetLeft" : "offsetTop";
-		const offsetSum = offset + (isRtl ? viewport.clientWidth - node[offsetKey] - node.offsetWidth : node[offsetKey]);
-		const parent = node.offsetParent;
-		if (node === until || !parent) {
-			return offsetSum;
-		}
-		return calcOffsetToViewport(parent, viewport, until, isHorizontal, offsetSum);
-	};
 	return {
 		$observe(container) {
 			const document = getCurrentDocument(container);
 			const window = getCurrentWindow(document);
 			const viewport = viewportElement = document.scrollingElement;
+			const isRtl = isHorizontal && getComputedStyle(viewport).direction === "rtl";
+			const calcOffsetToViewport = (node, viewport, until, isHorizontal, offset = 0) => {
+				const offsetKey = isHorizontal ? "offsetLeft" : "offsetTop";
+				const offsetSum = offset + (isRtl ? viewport.clientWidth - node[offsetKey] - node.offsetWidth : node[offsetKey]);
+				const parent = node.offsetParent;
+				if (node === until || !parent) {
+					return offsetSum;
+				}
+				return calcOffsetToViewport(parent, viewport, until, isHorizontal, offsetSum);
+			};
 			const baseOffset = getBaseOffset = () => {
 				return calcOffsetToViewport(container, viewport, document.body, isHorizontal);
 			};
@@ -708,33 +682,13 @@ var createWindowDriver = (store, isHorizontal) => {
 			cleanupOnWindowResize = () => {
 				window.removeEventListener("resize", onWindowResize);
 			};
-			if (isHorizontal) {
-				isRtl = getComputedStyle(viewport).direction === "rtl";
-			}
-			scrollObserver = createScrollObserver(store, window, isHorizontal, () => normalizeScrollOffset(viewport[scrollOffsetKey], isRtl), (jump, shift) => {
-				const target = store.$getScrollOffset() + jump;
-				if (target <= 0 || target >= store.$getStartSpacerSize() + store.$getTotalSize() - store.$getViewportSize()) {
-					viewport.scrollTo({
-						[scrollToKey]: normalizeScrollOffset(target, isRtl),
-						behavior: "instant"
-					});
-				} else {
-					viewport.scrollBy({
-						[scrollToKey]: normalizeScrollOffset(jump, isRtl),
-						behavior: "instant"
-					});
-				}
-				if (shift) {
-					cancelScroll();
-				}
-			}, baseOffset);
+			scrollObserver = createScrollObserver(store, window, viewport, isHorizontal, isRtl, null, baseOffset);
 			initialized[1](true);
 		},
 		$dispose() {
 			cleanupOnWindowResize && cleanupOnWindowResize();
 			resizeObserver._dispose();
 			scrollObserver && scrollObserver._dispose();
-			viewportElement = undefined;
 			initialized[1](false);
 			initialized = createPromise();
 		},
@@ -746,7 +700,11 @@ var createWindowDriver = (store, isHorizontal) => {
 				resizeObserver._unobserve(el);
 			};
 		},
-		$scroll: scheduleScroll,
+		async $scroll(getTargetOffset, smooth) {
+			if (await initialized[0]) {
+				scrollObserver._scroll(getTargetOffset, smooth);
+			}
+		},
 		$effect() {
 			scrollObserver && scrollObserver._fixScrollJump();
 		},
@@ -760,19 +718,6 @@ var createContainerGridDriver = (rowStore, colStore) => {
 	let rowScrollObserver;
 	let colScrollObserver;
 	let initialized = createPromise();
-	let isRtl = false;
-	const [scheduleScrollX, cancelScrollX] = createScrollScheduler(colStore, () => initialized[0], (offset, smooth) => {
-		viewportElement.scrollTo({
-			left: normalizeScrollOffset(offset, isRtl),
-			behavior: smooth ? "smooth" : "instant"
-		});
-	});
-	const [scheduleScrollY, cancelScrollY] = createScrollScheduler(rowStore, () => initialized[0], (offset, smooth) => {
-		viewportElement.scrollTo({
-			top: offset,
-			behavior: smooth ? "smooth" : "instant"
-		});
-	});
 	const mountedIndexes = new WeakMap();
 	const maybeCachedRowIndexes = new Set();
 	const maybeCachedColIndexes = new Set();
@@ -849,43 +794,20 @@ var createContainerGridDriver = (rowStore, colStore) => {
 			colStore.$update(3, widthResizes);
 		}
 	});
-	const observeAxisScroll = (store, isHorizontal, cancelScroll) => {
-		const viewport = viewportElement;
-		const scrollOffsetKey = isHorizontal ? "scrollLeft" : "scrollTop";
-		const overflowKey = isHorizontal ? "overflowX" : "overflowY";
-		const rtl = isHorizontal && isRtl;
-		return createScrollObserver(store, viewport, isHorizontal, () => normalizeScrollOffset(viewport[scrollOffsetKey], rtl), (jump, shift, isMomentumScrolling) => {
-			if (isMomentumScrolling) {
+	return {
+		$observe(containerElement, viewport = containerElement.parentElement) {
+			resizeObserver._observe(viewportElement = viewport);
+			const isRtl = getComputedStyle(viewport).direction === "rtl";
+			const hackOverflow = (overflowKey) => () => {
 				const style = viewport.style;
 				const prev = style[overflowKey];
 				style[overflowKey] = "hidden";
 				timeout(() => {
 					style[overflowKey] = prev;
 				});
-			}
-			const target = store.$getScrollOffset() + jump;
-			if (target <= 0 || target >= store.$getStartSpacerSize() + store.$getTotalSize() - store.$getViewportSize()) {
-				viewport.scrollTo({
-					[isHorizontal ? "left" : "top"]: normalizeScrollOffset(target, rtl),
-					behavior: "instant"
-				});
-			} else {
-				viewport.scrollBy({
-					[isHorizontal ? "left" : "top"]: normalizeScrollOffset(jump, rtl),
-					behavior: "instant"
-				});
-			}
-			if (shift) {
-				cancelScroll();
-			}
-		});
-	};
-	return {
-		$observe(containerElement, viewport = containerElement.parentElement) {
-			resizeObserver._observe(viewportElement = viewport);
-			isRtl = getComputedStyle(viewport).direction === "rtl";
-			rowScrollObserver = observeAxisScroll(rowStore, false, cancelScrollY);
-			colScrollObserver = observeAxisScroll(colStore, true, cancelScrollX);
+			};
+			rowScrollObserver = createScrollObserver(rowStore, viewport, viewport, false, false, hackOverflow("overflowY"));
+			colScrollObserver = createScrollObserver(colStore, viewport, viewport, true, isRtl, hackOverflow("overflowX"));
 			initialized[1](true);
 		},
 		$dispose() {
@@ -921,8 +843,16 @@ var createContainerGridDriver = (rowStore, colStore) => {
 			}
 			colStore.$update(3, cols);
 		},
-		$scrollX: scheduleScrollX,
-		$scrollY: scheduleScrollY,
+		async $scrollX(getTargetOffset, smooth) {
+			if (await initialized[0]) {
+				colScrollObserver._scroll(getTargetOffset, smooth);
+			}
+		},
+		async $scrollY(getTargetOffset, smooth) {
+			if (await initialized[0]) {
+				rowScrollObserver._scroll(getTargetOffset, smooth);
+			}
+		},
 		$effect() {
 			rowScrollObserver && rowScrollObserver._fixScrollJump();
 			colScrollObserver && colScrollObserver._fixScrollJump();
@@ -1010,7 +940,7 @@ var ListItem = (props) => {
 		}
 		return style;
 	});
-	return <Dynamic component={props._as} index={props._index} ref={elementRef} style={style()}>
+	return <Dynamic component={props._as} index={typeof props._as === "string" ? undefined : props._index} ref={elementRef} style={style()}>
       {props._children}
     </Dynamic>;
 };
@@ -1051,35 +981,34 @@ var Virtualizer = (props) => {
 	});
 	const isScrolling = createMemo(() => stateVersion() && store.$isScrolling());
 	const totalSize = createMemo(() => stateVersion() && store.$getTotalSize());
+	const ref = props.ref;
+	if (!isServer && ref) {
+		ref({
+			get cache() {
+				return layout.$snapshot();
+			},
+			get scrollOffset() {
+				return store.$getScrollOffset();
+			},
+			get scrollSize() {
+				return getScrollSize(store);
+			},
+			get viewportSize() {
+				return store.$getViewportSize();
+			},
+			findItemIndex: store.$findItemIndex,
+			getItemOffset: store.$getItemOffset,
+			getItemSize: store.$getItemSize,
+			scrollToIndex: (index, opts) => scrollToIndex(driver, store, index, opts),
+			scrollTo: (offset) => scrollTo(driver, offset),
+			scrollBy: (offset) => scrollBy(driver, store, offset)
+		});
+		onCleanup(() => ref());
+	}
 	onMount(() => {
 		setIsSSR(false);
-		if (props.ref) {
-			props.ref({
-				get cache() {
-					return layout.$snapshot();
-				},
-				get scrollOffset() {
-					return store.$getScrollOffset();
-				},
-				get scrollSize() {
-					return getScrollSize(store);
-				},
-				get viewportSize() {
-					return store.$getViewportSize();
-				},
-				findItemIndex: store.$findItemIndex,
-				getItemOffset: store.$getItemOffset,
-				getItemSize: store.$getItemSize,
-				scrollToIndex: (index, opts) => scrollToIndex(driver, store, index, opts),
-				scrollTo: (offset) => scrollTo(driver, offset),
-				scrollBy: (offset) => scrollBy(driver, store, offset)
-			});
-		}
 		driver.$observe(containerRef, props.scrollRef);
 		onCleanup(() => {
-			if (props.ref) {
-				props.ref();
-			}
 			store.$dispose();
 			driver.$dispose();
 		});
@@ -1107,8 +1036,10 @@ var Virtualizer = (props) => {
 				mounted.add(i);
 			}
 			sort([...mounted]).forEach((index) => {
-				items.push(props.data[index]);
-				indexes.push(index);
+				if (index < count) {
+					items.push(props.data[index]);
+					indexes.push(index);
+				}
 			});
 		} else {
 			for (let [i, j] = range(); i <= j; i++) {
@@ -1215,30 +1146,29 @@ var WindowVirtualizer = (props) => {
 	});
 	const isScrolling = createMemo(() => stateVersion() && store.$isScrolling());
 	const totalSize = createMemo(() => stateVersion() && store.$getTotalSize());
+	const ref = props.ref;
+	if (!isServer && ref) {
+		ref({
+			get cache() {
+				return layout.$snapshot();
+			},
+			get scrollOffset() {
+				return store.$getScrollOffset();
+			},
+			get viewportSize() {
+				return store.$getViewportSize();
+			},
+			findItemIndex: store.$findItemIndex,
+			getItemOffset: store.$getItemOffset,
+			getItemSize: store.$getItemSize,
+			scrollToIndex: (index, opts) => scrollToIndex(driver, store, index, opts)
+		});
+		onCleanup(() => ref());
+	}
 	onMount(() => {
 		setIsSSR(false);
-		if (props.ref) {
-			props.ref({
-				get cache() {
-					return layout.$snapshot();
-				},
-				get scrollOffset() {
-					return store.$getScrollOffset();
-				},
-				get viewportSize() {
-					return store.$getViewportSize();
-				},
-				findItemIndex: store.$findItemIndex,
-				getItemOffset: store.$getItemOffset,
-				getItemSize: store.$getItemSize,
-				scrollToIndex: (index, opts) => scrollToIndex(driver, store, index, opts)
-			});
-		}
 		driver.$observe(containerRef);
 		onCleanup(() => {
-			if (props.ref) {
-				props.ref();
-			}
 			store.$dispose();
 			driver.$dispose();
 		});