refactor: fromWindowScroll()

Author: rocwang

src/Grid.vue

@@ -68,8 +68,8 @@ export default defineComponent({
   },
   setup(props) {
     // template refs
-    const rootRef = ref<Element>(document.createElement("div"));
-    const probeRef = ref<Element>(document.createElement("div"));
+    const rootRef = ref<Element>();
+    const probeRef = ref<Element>();
 
     // data to render
     const {
@@ -85,7 +85,7 @@ export default defineComponent({
       // a stream of root elements when it is resized
       rootResize$: fromResizeObserver(rootRef, "target"),
       // a stream of root elements when scrolling
-      scroll$: fromWindowScroll(() => rootRef.value),
+      scroll$: fromWindowScroll(rootRef),
     });
 
     return {

src/utilites.ts

@@ -1,8 +1,13 @@
 import { fromEvent, fromEventPattern, Observable } from "rxjs";
-import { Ref, watchEffect } from "vue";
+import { watchEffect } from "vue";
 import { partial, pipe, unary } from "ramda";
-import { ResizeObserverEntry, useResizeObserver } from "@vueuse/core";
-import { mergeAll, pluck } from "rxjs/operators";
+import {
+  MaybeElementRef,
+  ResizeObserverEntry,
+  unrefElement,
+  useResizeObserver,
+} from "@vueuse/core";
+import { filter, map, mergeAll, pluck } from "rxjs/operators";
 
 export function fromProp<T, U extends keyof T>(
   props: T,
@@ -14,24 +19,22 @@ export function fromProp<T, U extends keyof T>(
 }
 
 export function fromResizeObserver<T extends keyof ResizeObserverEntry>(
-  elRef: Ref<Element>,
+  elRef: MaybeElementRef,
   pluckTarget: T
 ): Observable<ResizeObserverEntry[T]> {
   return fromEventPattern<ResizeObserverEntry[]>(
     pipe(unary, partial(useResizeObserver, [elRef]))
   ).pipe(mergeAll(), pluck<ResizeObserverEntry, T>(pluckTarget));
 }
 
-export function fromWindowScroll<T>(
-  resultSelector: (e: Event) => T
-): Observable<T> {
-  // @ts-expect-error Rxjs has a typing bug on fromEvent() with resultSelector,
-  // which is fixed in https://github.com/ReactiveX/rxjs/pull/6447.
-  // TODO: Remove this comment when the PR above is merged.
-  return fromEvent(
-    window,
-    "scroll",
-    { passive: true, capture: true },
-    resultSelector
+export function fromWindowScroll(elRef: MaybeElementRef): Observable<Element> {
+  return fromEvent(window, "scroll", {
+    passive: true,
+    capture: true,
+  }).pipe(
+    map(() => unrefElement(elRef)),
+    filter<Element | undefined | null, Element>((el): el is Element =>
+      Boolean(el)
+    )
   );
 }