clear-virtualizer 0.1.1 → 0.1.3

package/README.md

@@ -232,11 +232,14 @@ If the row is far away and its neighbors were never measured, the hook first jum
 
 `estimateSize` is only a starting guess until real measurements arrive. The closer it is to reality, the less rows visually shift on fast scroll through unmeasured regions: underestimated rows overlap until measured, overestimated ones leave temporary gaps. Pass a value near your average row height.
 
+## SSR
+
+Server-side rendering is supported: on the server the hook renders an empty container (`virtualItems: []`, `scrollHeight: 0`) without touching browser APIs. Rows appear after hydration once the scroll container is attached and `ResizeObserver` reports real heights.
+
 ## Limitations
 
 -   Vertical scrolling only — no horizontal virtualization, no sticky columns.
 -   The internal offset tree keeps one `float64` per row (~8 MB per million rows).
--   Server-side rendering is not covered by tests.
 
 ## License
 

package/lib/index.cjs

@@ -111,6 +111,7 @@ function useVirtualizer({ count, estimateSize, overscan = DEFAULT_OVERSCAN }) {
   const [scrollOffset, setScrollOffset] = react.useState({ value: 0 });
   const [forcedRange, setForcedRange] = react.useState(null);
   const scrollElementRef = react.useRef(null);
+  const [scrollElement, setScrollElement] = react.useState(null);
   const rafRef = react.useRef(null);
   const observersRef = react.useRef(/* @__PURE__ */ new Map());
   const containerObserverRef = react.useRef(null);
@@ -188,22 +189,9 @@ function useVirtualizer({ count, estimateSize, overscan = DEFAULT_OVERSCAN }) {
     },
     [count, forcedRange, overscan]
   );
-  const measureElement = react.useCallback((element, index) => {
-    if (!element) {
-      const entry = observersRef.current.get(index);
-      if (entry) {
-        entry.observer.disconnect();
-        observersRef.current.delete(index);
-      }
-      return;
-    }
-    const existing = observersRef.current.get(index);
-    if (existing && existing.element === element)
+  const observeItem = react.useCallback((index, element) => {
+    if (typeof ResizeObserver === "undefined")
       return;
-    if (existing) {
-      existing.observer.disconnect();
-      observersRef.current.delete(index);
-    }
     const observer = new ResizeObserver(([entry]) => {
       const height = entry?.borderBoxSize[0]?.blockSize;
       if (height == null || !fenwickRef.current)
@@ -221,6 +209,27 @@ function useVirtualizer({ count, estimateSize, overscan = DEFAULT_OVERSCAN }) {
     observer.observe(element);
     observersRef.current.set(index, { observer, element });
   }, []);
+  const measureElement = react.useCallback(
+    (element, index) => {
+      if (!element) {
+        const entry = observersRef.current.get(index);
+        if (entry) {
+          entry.observer.disconnect();
+          observersRef.current.delete(index);
+        }
+        return;
+      }
+      const existing = observersRef.current.get(index);
+      if (existing && existing.element === element)
+        return;
+      if (existing) {
+        existing.observer.disconnect();
+        observersRef.current.delete(index);
+      }
+      observeItem(index, element);
+    },
+    [observeItem]
+  );
   const getMeasureRef = react.useCallback(
     (index) => {
       let fn = refCacheRef.current.get(index);
@@ -350,27 +359,37 @@ function useVirtualizer({ count, estimateSize, overscan = DEFAULT_OVERSCAN }) {
       setScrollOffset({ value: el.scrollTop });
     });
   }, [releaseSettle, countRef]);
-  const scrollRef = react.useCallback(
-    (element) => {
-      if (scrollElementRef.current)
-        scrollElementRef.current.removeEventListener("scroll", handleScroll);
+  const scrollRef = react.useCallback((element) => {
+    scrollElementRef.current = element;
+    setScrollElement(element);
+    setScrollOffset(element ? { value: element.scrollTop } : { value: 0 });
+  }, []);
+  react.useEffect(() => {
+    const el = scrollElement;
+    const itemObservers = observersRef.current;
+    if (el) {
+      el.addEventListener("scroll", handleScroll, { passive: true });
+      if (typeof ResizeObserver !== "undefined") {
+        const observer = new ResizeObserver(() => {
+          setScrollOffset((prevState) => ({ ...prevState }));
+        });
+        observer.observe(el);
+        containerObserverRef.current = observer;
+      }
+    }
+    for (const [index, { element }] of Array.from(itemObservers))
+      observeItem(index, element);
+    return () => {
+      if (rafRef.current !== null)
+        cancelAnimationFrame(rafRef.current);
+      if (tickRafRef.current !== null)
+        cancelAnimationFrame(tickRafRef.current);
+      el?.removeEventListener("scroll", handleScroll);
       containerObserverRef.current?.disconnect();
       containerObserverRef.current = null;
-      scrollElementRef.current = element;
-      if (element) {
-        element.addEventListener("scroll", handleScroll, { passive: true });
-        if (typeof ResizeObserver !== "undefined") {
-          const observer = new ResizeObserver(() => {
-            setScrollOffset((prevState) => ({ ...prevState }));
-          });
-          observer.observe(element);
-          containerObserverRef.current = observer;
-        }
-      }
-      setScrollOffset(element ? { value: element?.scrollTop } : { value: 0 });
-    },
-    [handleScroll]
-  );
+      itemObservers.forEach((entry) => entry.observer.disconnect());
+    };
+  }, [scrollElement, handleScroll, observeItem]);
   const { virtualItems, scrollHeight } = react.useMemo(
     () => computeItems(scrollOffset.value),
     [computeItems, scrollOffset]

package/lib/index.js

@@ -109,6 +109,7 @@ function useVirtualizer({ count, estimateSize, overscan = DEFAULT_OVERSCAN }) {
   const [scrollOffset, setScrollOffset] = useState({ value: 0 });
   const [forcedRange, setForcedRange] = useState(null);
   const scrollElementRef = useRef(null);
+  const [scrollElement, setScrollElement] = useState(null);
   const rafRef = useRef(null);
   const observersRef = useRef(/* @__PURE__ */ new Map());
   const containerObserverRef = useRef(null);
@@ -186,22 +187,9 @@ function useVirtualizer({ count, estimateSize, overscan = DEFAULT_OVERSCAN }) {
     },
     [count, forcedRange, overscan]
   );
-  const measureElement = useCallback((element, index) => {
-    if (!element) {
-      const entry = observersRef.current.get(index);
-      if (entry) {
-        entry.observer.disconnect();
-        observersRef.current.delete(index);
-      }
-      return;
-    }
-    const existing = observersRef.current.get(index);
-    if (existing && existing.element === element)
+  const observeItem = useCallback((index, element) => {
+    if (typeof ResizeObserver === "undefined")
       return;
-    if (existing) {
-      existing.observer.disconnect();
-      observersRef.current.delete(index);
-    }
     const observer = new ResizeObserver(([entry]) => {
       const height = entry?.borderBoxSize[0]?.blockSize;
       if (height == null || !fenwickRef.current)
@@ -219,6 +207,27 @@ function useVirtualizer({ count, estimateSize, overscan = DEFAULT_OVERSCAN }) {
     observer.observe(element);
     observersRef.current.set(index, { observer, element });
   }, []);
+  const measureElement = useCallback(
+    (element, index) => {
+      if (!element) {
+        const entry = observersRef.current.get(index);
+        if (entry) {
+          entry.observer.disconnect();
+          observersRef.current.delete(index);
+        }
+        return;
+      }
+      const existing = observersRef.current.get(index);
+      if (existing && existing.element === element)
+        return;
+      if (existing) {
+        existing.observer.disconnect();
+        observersRef.current.delete(index);
+      }
+      observeItem(index, element);
+    },
+    [observeItem]
+  );
   const getMeasureRef = useCallback(
     (index) => {
       let fn = refCacheRef.current.get(index);
@@ -348,27 +357,37 @@ function useVirtualizer({ count, estimateSize, overscan = DEFAULT_OVERSCAN }) {
       setScrollOffset({ value: el.scrollTop });
     });
   }, [releaseSettle, countRef]);
-  const scrollRef = useCallback(
-    (element) => {
-      if (scrollElementRef.current)
-        scrollElementRef.current.removeEventListener("scroll", handleScroll);
+  const scrollRef = useCallback((element) => {
+    scrollElementRef.current = element;
+    setScrollElement(element);
+    setScrollOffset(element ? { value: element.scrollTop } : { value: 0 });
+  }, []);
+  useEffect(() => {
+    const el = scrollElement;
+    const itemObservers = observersRef.current;
+    if (el) {
+      el.addEventListener("scroll", handleScroll, { passive: true });
+      if (typeof ResizeObserver !== "undefined") {
+        const observer = new ResizeObserver(() => {
+          setScrollOffset((prevState) => ({ ...prevState }));
+        });
+        observer.observe(el);
+        containerObserverRef.current = observer;
+      }
+    }
+    for (const [index, { element }] of Array.from(itemObservers))
+      observeItem(index, element);
+    return () => {
+      if (rafRef.current !== null)
+        cancelAnimationFrame(rafRef.current);
+      if (tickRafRef.current !== null)
+        cancelAnimationFrame(tickRafRef.current);
+      el?.removeEventListener("scroll", handleScroll);
       containerObserverRef.current?.disconnect();
       containerObserverRef.current = null;
-      scrollElementRef.current = element;
-      if (element) {
-        element.addEventListener("scroll", handleScroll, { passive: true });
-        if (typeof ResizeObserver !== "undefined") {
-          const observer = new ResizeObserver(() => {
-            setScrollOffset((prevState) => ({ ...prevState }));
-          });
-          observer.observe(element);
-          containerObserverRef.current = observer;
-        }
-      }
-      setScrollOffset(element ? { value: element?.scrollTop } : { value: 0 });
-    },
-    [handleScroll]
-  );
+      itemObservers.forEach((entry) => entry.observer.disconnect());
+    };
+  }, [scrollElement, handleScroll, observeItem]);
   const { virtualItems, scrollHeight } = useMemo(
     () => computeItems(scrollOffset.value),
     [computeItems, scrollOffset]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clear-virtualizer",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "A lightweight React hook for virtualized lists and tables with dynamic row heights, measured automatically",
   "type": "module",
   "main": "./lib/index.cjs",