virtua 0.44.3 → 0.45.1

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 done = true;
-                    for (let [i, end] = store.$getRange(); i <= end; i++) {
-                        if (store.$isUnmeasuredItem(i)) {
-                            done = false;
+            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 (done) {
-                        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 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();
-                    }
-                }
-                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) +
@@ -1027,9 +968,9 @@ const createWindowScroller = (store, isHorizontal) => {
 /**
  * @internal
  */
-const createGridScroller = (vStore, hStore) => {
-    const vScroller = createScroller(vStore, false);
-    const hScroller = createScroller(hStore, true);
+const createGridScroller = (rowStore, colStore) => {
+    const vScroller = createScroller(rowStore, false);
+    const hScroller = createScroller(colStore, true);
     return {
         $observe(viewportElement) {
             vScroller.$observe(viewportElement);
@@ -1170,10 +1111,8 @@ const createWindowResizer = (store, isHorizontal) => {
 /**
  * @internal
  */
-const createGridResizer = (vStore, hStore) => {
+const createGridResizer = (rowStore, colStore) => {
     let viewportElement;
-    const heightKey = "height";
-    const widthKey = "width";
     const mountedIndexes = new WeakMap();
     const maybeCachedRowIndexes = new Set();
     const maybeCachedColIndexes = new Set();
@@ -1182,13 +1121,13 @@ const createGridResizer = (vStore, hStore) => {
     const resizeObserver = createResizeObserver((entries) => {
         const resizedRows = new Set();
         const resizedCols = new Set();
-        for (const { target, contentRect } of entries) {
+        for (const { target, contentRect: { width, height }, } of entries) {
             // Skip zero-sized rects that may be observed under `display: none` style
             if (!target.offsetParent)
                 continue;
             if (target === viewportElement) {
-                vStore.$update(ACTION_VIEWPORT_RESIZE, contentRect[heightKey]);
-                hStore.$update(ACTION_VIEWPORT_RESIZE, contentRect[widthKey]);
+                rowStore.$update(ACTION_VIEWPORT_RESIZE, height);
+                colStore.$update(ACTION_VIEWPORT_RESIZE, width);
             }
             else {
                 const cell = mountedIndexes.get(target);
@@ -1196,20 +1135,16 @@ const createGridResizer = (vStore, hStore) => {
                     const [rowIndex, colIndex] = cell;
                     const key = getKey(rowIndex, colIndex);
                     const prevSize = sizeCache.get(key);
-                    const size = [
-                        contentRect[heightKey],
-                        contentRect[widthKey],
-                    ];
                     let rowResized;
                     let colResized;
                     if (!prevSize) {
                         rowResized = colResized = true;
                     }
                     else {
-                        if (prevSize[0] !== size[0]) {
+                        if (prevSize[0] !== height) {
                             rowResized = true;
                         }
-                        if (prevSize[1] !== size[1]) {
+                        if (prevSize[1] !== width) {
                             colResized = true;
                         }
                     }
@@ -1220,7 +1155,7 @@ const createGridResizer = (vStore, hStore) => {
                         resizedCols.add(colIndex);
                     }
                     if (rowResized || colResized) {
-                        sizeCache.set(key, size);
+                        sizeCache.set(key, [height, width]);
                     }
                 }
             }
@@ -1239,7 +1174,7 @@ const createGridResizer = (vStore, hStore) => {
                     heightResizes.push([rowIndex, maxHeight]);
                 }
             });
-            vStore.$update(ACTION_ITEM_RESIZE, heightResizes);
+            rowStore.$update(ACTION_ITEM_RESIZE, heightResizes);
         }
         if (resizedCols.size) {
             const widthResizes = [];
@@ -1255,7 +1190,7 @@ const createGridResizer = (vStore, hStore) => {
                     widthResizes.push([colIndex, maxWidth]);
                 }
             });
-            hStore.$update(ACTION_ITEM_RESIZE, widthResizes);
+            colStore.$update(ACTION_ITEM_RESIZE, widthResizes);
         }
     });
     return {
@@ -1274,19 +1209,19 @@ const createGridResizer = (vStore, hStore) => {
         },
         $resizeCols(cols) {
             for (const [c] of cols) {
-                for (let r = 0; r < vStore.$getItemsLength(); r++) {
+                for (let r = 0; r < rowStore.$getItemsLength(); r++) {
                     sizeCache.delete(getKey(r, c));
                 }
             }
-            hStore.$update(ACTION_ITEM_RESIZE, cols);
+            colStore.$update(ACTION_ITEM_RESIZE, cols);
         },
         $resizeRows(rows) {
             for (const [r] of rows) {
-                for (let c = 0; c < hStore.$getItemsLength(); c++) {
+                for (let c = 0; c < colStore.$getItemsLength(); c++) {
                     sizeCache.delete(getKey(r, c));
                 }
             }
-            vStore.$update(ACTION_ITEM_RESIZE, rows);
+            rowStore.$update(ACTION_ITEM_RESIZE, rows);
         },
         $dispose: resizeObserver._dispose,
     };