virtua 0.44.2 → 0.45.0

package/lib/solid/index.jsx

@@ -292,12 +292,6 @@ const UPDATE_SCROLL_END_EVENT = 0b1000;
 const getScrollSize = (store) => {
     return max(store.$getTotalSize(), store.$getViewportSize());
 };
-/**
- * @internal
- */
-const isInitialMeasurementDone = (store) => {
-    return !!store.$getViewportSize();
-};
 /**
  * @internal
  */
@@ -686,69 +680,81 @@ const createScrollObserver = (store, viewport, isHorizontal, getScrollOffset, up
         },
     };
 };
-/**
- * @internal
- */
-const createScroller = (store, isHorizontal) => {
-    let viewportElement;
-    let scrollObserver;
+const createScrollScheduler = (store, initialized, scroll) => {
     let cancelScroll;
-    let initialized = createPromise();
-    const scrollOffsetKey = isHorizontal ? "scrollLeft" : "scrollTop";
-    const overflowKey = isHorizontal ? "overflowX" : "overflowY";
     // The given offset will be clamped by browser
     // https://drafts.csswg.org/cssom-view/#dom-element-scrolltop
-    const scheduleImperativeScroll = async (getTargetOffset, smooth) => {
-        // Wait for element assign. The element may be undefined if scrollRef prop is used and scroll is scheduled on mount.
-        // https://github.com/inokawa/virtua/pull/733
-        // https://github.com/inokawa/virtua/pull/750
-        if (!(await initialized[0])) {
-            return;
-        }
-        if (cancelScroll) {
-            // Cancel waiting scrollTo
-            cancelScroll();
-        }
-        const waitForMeasurement = () => {
-            // Wait for the scroll destination items to be measured.
-            // The measurement will be done asynchronously and the timing is not predictable so we use promise.
-            const [promise, resolve] = createPromise();
-            cancelScroll = () => {
-                resolve(false);
-            };
-            // Resize event may not happen when the window/tab is not visible, or during browser back in Safari.
-            // We have to wait for the initial measurement to avoid failing imperative scroll on mount.
-            // https://github.com/inokawa/virtua/issues/450
-            if (isInitialMeasurementDone(store)) {
-                // Cancel when items around scroll destination completely measured
-                timeout(cancelScroll, 150);
+    return [
+        async (getTargetOffset, smooth) => {
+            // Wait for element assign. The element may be undefined if scrollRef prop is used and scroll is scheduled on mount.
+            // https://github.com/inokawa/virtua/pull/733
+            // https://github.com/inokawa/virtua/pull/750
+            if (!(await initialized())) {
+                return;
             }
-            return [
-                promise,
-                store.$subscribe(UPDATE_SIZE_EVENT, () => {
-                    resolve(true);
-                }),
-            ];
-        };
-        if (smooth && isSmoothScrollSupported()) {
-            store.$update(ACTION_BEFORE_MANUAL_SMOOTH_SCROLL, getTargetOffset());
-            // https://github.com/inokawa/virtua/issues/590
-            microtask(async () => {
-                while (true) {
-                    let measuring = false;
-                    for (let [i, end] = store.$getRange(); i <= end; i++) {
-                        if (store.$isUnmeasuredItem(i)) {
-                            measuring = true;
+            if (cancelScroll) {
+                // Cancel waiting scrollTo
+                cancelScroll();
+            }
+            const waitForMeasurement = () => {
+                // Wait for the scroll destination items to be measured.
+                // The measurement will be done asynchronously and the timing is not predictable so we use promise.
+                const [promise, resolve] = createPromise();
+                cancelScroll = () => {
+                    resolve(false);
+                };
+                // Resize event may not happen when the window/tab is not visible, or during browser back in Safari.
+                // We have to wait for the initial measurement to avoid failing imperative scroll on mount.
+                // https://github.com/inokawa/virtua/issues/450
+                if (store.$getViewportSize()) {
+                    // Cancel when items around scroll destination completely measured
+                    timeout(cancelScroll, 150);
+                }
+                return [
+                    promise,
+                    store.$subscribe(UPDATE_SIZE_EVENT, () => {
+                        resolve(true);
+                    }),
+                ];
+            };
+            if (smooth && isSmoothScrollSupported()) {
+                store.$update(ACTION_BEFORE_MANUAL_SMOOTH_SCROLL, getTargetOffset());
+                // https://github.com/inokawa/virtua/issues/590
+                microtask(async () => {
+                    while (true) {
+                        let done = true;
+                        for (let [i, end] = store.$getRange(); i <= end; i++) {
+                            if (store.$isUnmeasuredItem(i)) {
+                                done = false;
+                                break;
+                            }
+                        }
+                        if (done) {
                             break;
                         }
+                        const [promise, unsubscribe] = waitForMeasurement();
+                        try {
+                            if (!(await promise)) {
+                                // canceled
+                                return;
+                            }
+                        }
+                        finally {
+                            unsubscribe();
+                        }
                     }
-                    if (!measuring) {
-                        break;
-                    }
+                    store.$update(ACTION_MANUAL_SCROLL);
+                    scroll(getTargetOffset(), smooth);
+                });
+            }
+            else {
+                while (true) {
                     const [promise, unsubscribe] = waitForMeasurement();
                     try {
+                        store.$update(ACTION_MANUAL_SCROLL);
+                        scroll(getTargetOffset());
                         if (!(await promise)) {
-                            // canceled
+                            // canceled or finished
                             return;
                         }
                     }
@@ -756,30 +762,34 @@ const createScroller = (store, isHorizontal) => {
                         unsubscribe();
                     }
                 }
-                store.$update(ACTION_MANUAL_SCROLL);
-                viewportElement.scrollTo({
-                    [isHorizontal ? "left" : "top"]: normalizeOffset(getTargetOffset(), isHorizontal),
-                    behavior: "smooth",
-                });
+            }
+        },
+        () => {
+            cancelScroll && cancelScroll();
+        },
+    ];
+};
+/**
+ * @internal
+ */
+const createScroller = (store, isHorizontal) => {
+    let viewportElement;
+    let scrollObserver;
+    let initialized = createPromise();
+    const scrollOffsetKey = isHorizontal ? "scrollLeft" : "scrollTop";
+    const overflowKey = isHorizontal ? "overflowX" : "overflowY";
+    const [scheduleScroll, cancelScroll] = createScrollScheduler(store, () => initialized[0], (offset, smooth) => {
+        offset = normalizeOffset(offset, isHorizontal);
+        if (smooth) {
+            viewportElement.scrollTo({
+                [isHorizontal ? "left" : "top"]: offset,
+                behavior: "smooth",
             });
         }
         else {
-            while (true) {
-                const [promise, unsubscribe] = waitForMeasurement();
-                try {
-                    store.$update(ACTION_MANUAL_SCROLL);
-                    viewportElement[scrollOffsetKey] = normalizeOffset(getTargetOffset(), isHorizontal);
-                    if (!(await promise)) {
-                        // canceled or finished
-                        return;
-                    }
-                }
-                finally {
-                    unsubscribe();
-                }
-            }
+            viewportElement[scrollOffsetKey] = offset;
         }
-    };
+    });
     return {
         $observe(viewport) {
             viewportElement = viewport;
@@ -801,7 +811,7 @@ const createScroller = (store, isHorizontal) => {
                 viewport[scrollOffsetKey] = store.$getScrollOffset() + jump;
                 if (shift) {
                     // https://github.com/inokawa/virtua/issues/357
-                    cancelScroll && cancelScroll();
+                    cancelScroll();
                 }
             });
             initialized[1](true);
@@ -813,11 +823,11 @@ const createScroller = (store, isHorizontal) => {
             initialized = createPromise();
         },
         $scrollTo(offset) {
-            scheduleImperativeScroll(() => offset);
+            scheduleScroll(() => offset);
         },
         $scrollBy(offset) {
             offset += store.$getScrollOffset();
-            scheduleImperativeScroll(() => offset);
+            scheduleScroll(() => offset);
         },
         $scrollToIndex(index, { align, smooth, offset = 0 } = {}) {
             index = clamp(index, 0, store.$getItemsLength() - 1);
@@ -836,7 +846,7 @@ const createScroller = (store, isHorizontal) => {
                     return;
                 }
             }
-            scheduleImperativeScroll(() => {
+            scheduleScroll(() => {
                 return (offset +
                     store.$getStartSpacerSize() +
                     store.$getItemOffset(index) +
@@ -858,8 +868,23 @@ const createScroller = (store, isHorizontal) => {
 const createWindowScroller = (store, isHorizontal) => {
     let containerElement;
     let scrollObserver;
-    let cancelScroll;
     let initialized = createPromise();
+    const scrollToKey = isHorizontal ? "left" : "top";
+    const [scheduleScroll] = createScrollScheduler(store, () => initialized[0], (offset, smooth) => {
+        offset = normalizeOffset(offset, isHorizontal);
+        const window = getCurrentWindow(getCurrentDocument(containerElement));
+        if (smooth) {
+            window.scroll({
+                [scrollToKey]: offset,
+                behavior: "smooth",
+            });
+        }
+        else {
+            window.scroll({
+                [scrollToKey]: offset,
+            });
+        }
+    });
     const calcOffsetToViewport = (node, viewport, window, isHorizontal, offset = 0) => {
         // TODO calc offset only when it changes (maybe impossible)
         const offsetKey = isHorizontal ? "offsetLeft" : "offsetTop";
@@ -873,104 +898,20 @@ const createWindowScroller = (store, isHorizontal) => {
         }
         return calcOffsetToViewport(parent, viewport, window, isHorizontal, offsetSum);
     };
-    const scheduleImperativeScroll = async (getTargetOffset, smooth) => {
-        // Wait for element assign. The element may be undefined if scrollRef prop is used and scroll is scheduled on mount.
-        // https://github.com/inokawa/virtua/pull/733
-        // https://github.com/inokawa/virtua/pull/750
-        if (!(await initialized[0])) {
-            return;
-        }
-        if (cancelScroll) {
-            cancelScroll();
-        }
-        const waitForMeasurement = () => {
-            // Wait for the scroll destination items to be measured.
-            // The measurement will be done asynchronously and the timing is not predictable so we use promise.
-            const [promise, resolve] = createPromise();
-            cancelScroll = () => {
-                resolve(false);
-            };
-            // Resize event may not happen when the window/tab is not visible, or during browser back in Safari.
-            // We have to wait for the initial measurement to avoid failing imperative scroll on mount.
-            // https://github.com/inokawa/virtua/issues/450
-            if (isInitialMeasurementDone(store)) {
-                // Cancel when items around scroll destination completely measured
-                timeout(cancelScroll, 150);
-            }
-            return [
-                promise,
-                store.$subscribe(UPDATE_SIZE_EVENT, () => {
-                    resolve(true);
-                }),
-            ];
-        };
-        const window = getCurrentWindow(getCurrentDocument(containerElement));
-        if (smooth && isSmoothScrollSupported()) {
-            store.$update(ACTION_BEFORE_MANUAL_SMOOTH_SCROLL, getTargetOffset());
-            // https://github.com/inokawa/virtua/issues/590
-            microtask(async () => {
-                while (true) {
-                    let measuring = false;
-                    for (let [i, end] = store.$getRange(); i <= end; i++) {
-                        if (store.$isUnmeasuredItem(i)) {
-                            measuring = true;
-                            break;
-                        }
-                    }
-                    if (!measuring) {
-                        break;
-                    }
-                    const [promise, unsubscribe] = waitForMeasurement();
-                    try {
-                        if (!(await promise)) {
-                            // canceled
-                            return;
-                        }
-                    }
-                    finally {
-                        unsubscribe();
-                    }
-                }
-                store.$update(ACTION_MANUAL_SCROLL);
-                window.scroll({
-                    [isHorizontal ? "left" : "top"]: normalizeOffset(getTargetOffset(), isHorizontal),
-                    behavior: "smooth",
-                });
-            });
-        }
-        else {
-            while (true) {
-                const [promise, unsubscribe] = waitForMeasurement();
-                try {
-                    store.$update(ACTION_MANUAL_SCROLL);
-                    window.scroll({
-                        [isHorizontal ? "left" : "top"]: normalizeOffset(getTargetOffset(), isHorizontal),
-                    });
-                    if (!(await promise)) {
-                        return;
-                    }
-                }
-                finally {
-                    unsubscribe();
-                }
-            }
-        }
-    };
     return {
         $observe(container) {
             containerElement = container;
             const scrollOffsetKey = isHorizontal ? "scrollX" : "scrollY";
             const document = getCurrentDocument(container);
             const window = getCurrentWindow(document);
-            const documentBody = document.body;
             scrollObserver = createScrollObserver(store, window, isHorizontal, () => normalizeOffset(window[scrollOffsetKey], isHorizontal), (jump) => {
                 // Use absolute position not to exceed scrollable bounds
                 // https://github.com/inokawa/virtua/discussions/475
                 // TODO support case two window scrollers exist in the same view
                 window.scroll({
-                    [isHorizontal ? "left" : "top"]: store.$getScrollOffset() + jump,
+                    [scrollToKey]: store.$getScrollOffset() + jump,
                 });
-            }, () => calcOffsetToViewport(container, documentBody, window, isHorizontal));
+            }, () => calcOffsetToViewport(container, document.body, window, isHorizontal));
             initialized[1](true);
         },
         $dispose() {
@@ -1006,7 +947,7 @@ const createWindowScroller = (store, isHorizontal) => {
             const html = document.documentElement;
             const getScrollbarSize = () => store.$getViewportSize() -
                 (isHorizontal ? html.clientWidth : html.clientHeight);
-            scheduleImperativeScroll(() => {
+            scheduleScroll(() => {
                 return (offset +
                     // Calculate target scroll position including container's offset from document
                     calcOffsetToViewport(containerElement, document.body, window, isHorizontal) +
@@ -1458,7 +1399,7 @@ const Virtualizer = (props) => {
         return (<ListItem _as={props.item} _index={index()} _resizer={resizer.$observeItem} _offset={offset()} _hide={hide()} _children={children()} _isHorizontal={horizontal}/>);
     };
     return (<Dynamic component={props.as} ref={containerRef} style={{
-            contain: "strict",
+            contain: "size paint style", // https://github.com/inokawa/virtua/pull/775
             "overflow-anchor": "none", // opt out browser's scroll anchoring because it will conflict to scroll anchoring of virtualizer
             overflow: "clip", // https://github.com/inokawa/virtua/pull/485 https://github.com/inokawa/virtua/issues/717
             flex: "none", // flex style can break layout
@@ -1590,7 +1531,7 @@ const WindowVirtualizer = (props) => {
         return items;
     });
     return (<div ref={containerRef} style={{
-            contain: "strict",
+            contain: "size paint style", // https://github.com/inokawa/virtua/pull/775
             "overflow-anchor": "none", // opt out browser's scroll anchoring because it will conflict to scroll anchoring of virtualizer
             overflow: "clip", // https://github.com/inokawa/virtua/pull/485 https://github.com/inokawa/virtua/issues/717
             flex: "none", // flex style can break layout