feat: added selector

Author: mbret

src/lib/binding/useObserve.compare.test.tsx

@@ -0,0 +1,120 @@
+import { renderHook } from "@testing-library/react"
+import { act, useEffect } from "react"
+import { BehaviorSubject } from "rxjs"
+import { describe, expect, it } from "vitest"
+import { isShallowEqual } from "../utils/shallowEqual"
+import { useObserve } from "./useObserve"
+
+it("should not re-render when the value is same reference", async () => {
+  const values: Array<undefined> = []
+  const source$ = new BehaviorSubject(undefined)
+
+  renderHook(() => {
+    const value = useObserve(source$)
+
+    useEffect(() => {
+      values.push(value)
+    }, [value])
+  }, {})
+
+  expect(values[0]).toEqual(undefined)
+
+  act(() => {
+    source$.next(undefined)
+  })
+
+  expect(values.length).toBe(1)
+})
+
+it("should re-render when the object is same but new reference", async () => {
+  const values: Array<{ a: string } | undefined> = []
+  const source$ = new BehaviorSubject({ a: "a" })
+
+  renderHook(() => {
+    const value = useObserve(source$)
+
+    useEffect(() => {
+      values.push(value)
+    }, [value])
+  }, {})
+
+  expect(values[0]).toEqual({ a: "a" })
+
+  act(() => {
+    source$.next({ a: "a" })
+  })
+
+  expect(values[1]).toEqual({ a: "a" })
+  expect(values.length).toBe(2)
+})
+
+it("should not return new value when the hook re-render but the value is the same", async () => {
+  const values: Array<{ a: string } | undefined> = []
+  const source$ = new BehaviorSubject({ a: "a" })
+
+  const { rerender } = renderHook(() => {
+    const value = useObserve(source$)
+
+    useEffect(() => {
+      values.push(value)
+    }, [value])
+  }, {})
+
+  expect(values[0]).toEqual({ a: "a" })
+
+  rerender()
+  rerender()
+
+  expect(values.length).toBe(1)
+})
+
+describe("given a custom compareFn", () => {
+  it("should re-render when the object is same but new reference", async () => {
+    const values: Array<{ a: string } | undefined> = []
+    const source$ = new BehaviorSubject({ a: "a" })
+
+    renderHook(() => {
+      const value = useObserve(source$, {
+        compareFn: isShallowEqual,
+      })
+
+      useEffect(() => {
+        values.push(value)
+      }, [value])
+    }, {})
+
+    expect(values[0]).toEqual({ a: "a" })
+
+    act(() => {
+      source$.next({ a: "a" })
+    })
+
+    expect(values.length).toBe(1)
+  })
+
+  it("should not return new value when the hook re-render but the value is the same shallow equal", async () => {
+    const values: Array<{ a: string } | undefined> = []
+    const source$ = new BehaviorSubject({ a: "a" })
+
+    const { rerender } = renderHook(() => {
+      const value = useObserve(source$, {
+        compareFn: isShallowEqual,
+      })
+
+      useEffect(() => {
+        values.push(value)
+      }, [value])
+    }, {})
+
+    expect(values[0]).toEqual({ a: "a" })
+
+    act(() => {
+      source$.next({ a: "a" })
+    })
+
+    rerender()
+    rerender()
+
+    expect(values.length).toBe(1)
+  })
+})

src/lib/binding/useObserve.selector.test.tsx

@@ -0,0 +1,62 @@
+import { renderHook } from "@testing-library/react"
+import { act, useEffect } from "react"
+import { BehaviorSubject, of } from "rxjs"
+import { expect, it } from "vitest"
+import { useObserve } from "./useObserve"
+
+it("should return the selected keys", async () => {
+  const values: Array<{ foo: string } | undefined> = []
+  const source$ = of({ foo: "foo" })
+
+  renderHook(() => {
+    const value = useObserve(source$, ["foo"])
+
+    values.push(value)
+  }, {})
+
+  expect(values[0]).toEqual({ foo: "foo" })
+  expect(values.length).toBe(1)
+})
+
+it("should not re-render when the selected keys don't change", async () => {
+  const values: Array<{ a: string } | undefined> = []
+  const source$ = new BehaviorSubject({ a: "a", b: "b" })
+
+  renderHook(() => {
+    const value = useObserve(source$, ["a"])
+
+    useEffect(() => {
+      values.push(value)
+    }, [value])
+  }, {})
+
+  expect(values[0]).toEqual({ a: "a" })
+
+  act(() => {
+    source$.next({ a: "a", b: "c" })
+  })
+
+  expect(values.length).toBe(1)
+})
+
+it("should re-render when the selected keys change", async () => {
+  const values: Array<{ a: string } | undefined> = []
+  const source$ = new BehaviorSubject({ a: "a", b: "b" })
+
+  renderHook(() => {
+    const value = useObserve(source$, ["a"])
+
+    useEffect(() => {
+      values.push(value)
+    }, [value])
+  }, {})
+
+  expect(values[0]).toEqual({ a: "a" })
+
+  act(() => {
+    source$.next({ a: "b", b: "c" })
+  })
+
+  expect(values[1]).toEqual({ a: "b" })
+  expect(values.length).toBe(2)
+})

src/lib/binding/useObserve.ts

@@ -11,14 +11,17 @@ import {
   distinctUntilChanged,
   EMPTY,
   identity,
+  map,
   type Observable,
   type Subscription,
   shareReplay,
   startWith,
   tap,
 } from "rxjs"
+import { filterObjectByKey } from "../utils/filterObjectByKey"
 import { makeObservable } from "../utils/makeObservable"
 import { useLiveRef } from "../utils/react/useLiveRef"
+import { isShallowEqual } from "../utils/shallowEqual"
 
 interface Option<R = undefined> {
   defaultValue: R
@@ -27,8 +30,20 @@ interface Option<R = undefined> {
 }
 
 export function useObserve<T>(source: BehaviorSubject<T>): T
+export function useObserve<T extends object, SelectorKeys extends keyof T>(
+  source: BehaviorSubject<T>,
+  selector: SelectorKeys[],
+): { [K in SelectorKeys]: T[K] }
+export function useObserve<T>(
+  source: BehaviorSubject<T>,
+  options: Omit<Option<T>, "defaultValue">,
+): T
 
 export function useObserve<T>(source: Observable<T>): T | undefined
+export function useObserve<T extends object, SelectorKeys extends keyof T>(
+  source: Observable<T>,
+  selector: SelectorKeys[],
+): { [K in SelectorKeys]: T[K] } | undefined
 
 export function useObserve<T>(
   source: () => Observable<T>,
@@ -48,19 +63,19 @@ export function useObserve<T>(
   deps: DependencyList,
 ): T
 
-export function useObserve<T>(
+export function useObserve<T, SelectorKeys extends keyof T>(
   source$: Observable<T> | (() => Observable<T> | undefined),
-  optionsOrDeps?: Option<T> | DependencyList,
+  optionsOrDeps?: Partial<Option<T>> | DependencyList | SelectorKeys[],
   maybeDeps?: DependencyList,
 ): T {
   const options =
     optionsOrDeps != null && !Array.isArray(optionsOrDeps)
-      ? (optionsOrDeps as Option<T>)
+      ? (optionsOrDeps as Partial<Option<T>>)
       : ({
           defaultValue: undefined,
           unsubscribeOnUnmount: true,
           compareFn: undefined,
-        } satisfies Option<undefined>)
+        } satisfies Partial<Option<T>>)
   const deps =
     !maybeDeps && Array.isArray(optionsOrDeps)
       ? optionsOrDeps
@@ -70,18 +85,54 @@ export function useObserve<T>(
   const valueRef = useRef<{ value: T | undefined } | undefined>(undefined)
   const sourceRef = useLiveRef(source$)
   const optionsRef = useLiveRef(options)
+  const selectorKey =
+    typeof source$ !== "function" && Array.isArray(optionsOrDeps)
+      ? JSON.stringify(optionsOrDeps)
+      : undefined
+  const selectorRef = useLiveRef(
+    typeof source$ !== "function" && Array.isArray(optionsOrDeps)
+      ? (optionsOrDeps as SelectorKeys[])
+      : undefined,
+  )
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: TODO
-  const observable = useMemo(
-    () => ({
-      observable: makeObservable(sourceRef.current)().pipe(
+  const observable = useMemo(() => {
+    void selectorKey
+
+    const selectorOption = selectorRef.current
+    const compareFnOption = optionsRef.current.compareFn
+    const compareFn = compareFnOption
+      ? compareFnOption
+      : selectorOption
+        ? isShallowEqual
+        : undefined
+    const observable$ = makeObservable(sourceRef.current)()
+
+    return {
+      observable: observable$.pipe(
+        // Maybe selector
+        map((v) => {
+          if (selectorOption && typeof v === "object" && v !== null) {
+            return filterObjectByKey(v, selectorOption) as T | undefined
+          }
+
+          return v
+        }),
+        // Maybe compareFn
+        distinctUntilChanged((a, b) => {
+          if (a === undefined || b === undefined) return false
+
+          if (compareFn) {
+            return compareFn(a as T, b as T)
+          }
+
+          return a === b
+        }),
         shareReplay({ refCount: true, bufferSize: 1 }),
       ),
       subscribed: false,
       snapshotSub: undefined as Subscription | undefined,
-    }),
-    [...deps],
-  )
+    }
+  }, [...deps, selectorKey, selectorRef, sourceRef, optionsRef])
 
   const getSnapshot = useCallback(() => {
     /**
@@ -92,8 +143,8 @@ export function useObserve<T>(
     if (!observable.subscribed) {
       observable.subscribed = true
 
-      const sub = observable.observable.subscribe((v) => {
-        valueRef.current = { value: v }
+      const sub = observable.observable.subscribe((value) => {
+        valueRef.current = { value: value as T }
       })
 
       observable.snapshotSub = sub
@@ -114,21 +165,8 @@ export function useObserve<T>(
           optionsRef.current.defaultValue
             ? startWith(optionsRef.current.defaultValue)
             : identity,
-          /**
-           * @important there is already a Object.is comparison in place from react
-           * so we only add a custom compareFn if provided
-           */
-          distinctUntilChanged((a, b) => {
-            if (optionsRef.current.compareFn) {
-              if (a === undefined || b === undefined) return false
-
-              return optionsRef.current.compareFn(a, b)
-            }
-
-            return false
-          }),
           tap((value) => {
-            valueRef.current = { value }
+            valueRef.current = { value: value as T }
           }),
           catchError((error) => {
             console.error(error)