refactor: remove @vueuse/rxjs

Author: rocwang

package-lock.json

@@ -40,7 +40,6 @@
   },
   "dependencies": {
     "@vueuse/core": "^5.0.1",
-    "@vueuse/rxjs": "^5.0.1",
     "ramda": "^0.27.1",
     "rxjs": "^7.1.0",
     "vue": "^3.0.5"

package.json

@@ -41,8 +41,12 @@
 
 <script lang="ts">
 import { defineComponent, PropType, ref } from "vue";
-import { useObservable } from "@vueuse/rxjs";
-import { fromProp, fromResizeObserver, fromWindowScroll } from "./utilites";
+import {
+  fromProp,
+  fromResizeObserver,
+  fromWindowScroll,
+  useObservable,
+} from "./utilites";
 import { PageProvider, pipeline } from "./pipeline";
 
 export default defineComponent({

src/Grid.vue

@@ -1,11 +1,12 @@
 import { fromEvent, fromEventPattern, Observable } from "rxjs";
-import { watchEffect } from "vue";
+import { watchEffect, Ref, ref } from "vue";
 import { partial, pipe, unary } from "ramda";
 import {
   MaybeElementRef,
   ResizeObserverEntry,
   unrefElement,
   useResizeObserver,
+  tryOnUnmounted,
 } from "@vueuse/core";
 import { filter, map, mergeAll, pluck } from "rxjs/operators";
 
@@ -38,3 +39,12 @@ export function fromWindowScroll(elRef: MaybeElementRef): Observable<Element> {
     )
   );
 }
+
+export function useObservable<H>(observable: Observable<H>): Readonly<Ref<H>> {
+  const valueRef = ref<H>();
+  const subscription = observable.subscribe((val) => (valueRef.value = val));
+
+  tryOnUnmounted(() => subscription.unsubscribe());
+
+  return valueRef as Readonly<Ref<H>>;
+}