perf(core): react-enhancer only returns a function

Author: josepot

packages/core/src/bind/connectFactoryObservable.ts

@@ -30,14 +30,11 @@ export default function connectFactoryObservable<A extends [], O>(
   (...args: A) => Exclude<O, typeof SUSPENSE>,
   (...args: A) => Observable<O>,
 ] {
-  const cache = new NestedMap<
-    A,
-    [BehaviorObservable<O>, BehaviorObservable<O>]
-  >()
+  const cache = new NestedMap<A, [BehaviorObservable<O>, () => O]>()
 
   const getSharedObservables$ = (
     input: A,
-  ): [BehaviorObservable<O>, BehaviorObservable<O>] => {
+  ): [BehaviorObservable<O>, () => O] => {
     for (let i = input.length - 1; input[i] === undefined && i > -1; i--) {
       input.splice(-1)
     }
@@ -68,19 +65,23 @@ export default function connectFactoryObservable<A extends [], O>(
 
       return source$.subscribe(subscriber)
     }) as BehaviorObservable<O>
-    const reactObservable$ = reactEnhancer(publicShared$)
+    publicShared$.getValue = sharedObservable$.getValue
+    const reactGetValue = reactEnhancer(publicShared$)
 
-    const result: [BehaviorObservable<O>, BehaviorObservable<O>] = [
+    const result: [BehaviorObservable<O>, () => O] = [
       publicShared$,
-      reactObservable$,
+      reactGetValue,
     ]
 
     cache.set(keys, result)
     return result
   }
 
   return [
-    (...input: A) => useObservable(getSharedObservables$(input)[1]),
+    (...input: A) => {
+      const [source$, getValue] = getSharedObservables$(input)
+      return useObservable(source$, getValue)
+    },
     (...input: A) => getSharedObservables$(input)[0],
   ]
 }

packages/core/src/bind/connectObservable.ts

@@ -20,7 +20,7 @@ import { useObservable } from "../internal/useObservable"
  */
 export default function connectObservable<T>(observable: Observable<T>) {
   const sharedObservable$ = shareLatest<T>(observable, false)
-  const reactObservable$ = reactEnhancer(sharedObservable$)
-  const useStaticObservable = () => useObservable(reactObservable$)
+  const getValue = reactEnhancer(sharedObservable$)
+  const useStaticObservable = () => useObservable(sharedObservable$, getValue)
   return [useStaticObservable, sharedObservable$] as const
 }

packages/core/src/internal/BehaviorObservable.ts

@@ -1,5 +1,6 @@
 import { Observable } from "rxjs"
+import { SUSPENSE } from "../SUSPENSE"
 
 export interface BehaviorObservable<T> extends Observable<T> {
-  getValue: () => any
+  getValue: () => T | typeof SUSPENSE
 }

packages/core/src/internal/react-enhancer.ts

@@ -1,16 +1,17 @@
-import { Observable } from "rxjs"
 import { SUSPENSE } from "../SUSPENSE"
 import { BehaviorObservable } from "./BehaviorObservable"
 import { EMPTY_VALUE } from "./empty-value"
 
-const reactEnhancer = <T>(source$: Observable<T>): BehaviorObservable<T> => {
-  const result = new Observable<T>((subscriber) =>
-    source$.subscribe(subscriber),
-  ) as BehaviorObservable<T>
-
+const reactEnhancer = <T>(source$: BehaviorObservable<T>): (() => T) => {
   let promise: Promise<T | void> | undefined
   let error: any = EMPTY_VALUE
-  const getValue = (): T => {
+
+  return (): T => {
+    const currentValue = source$.getValue()
+    if (currentValue !== SUSPENSE && currentValue !== EMPTY_VALUE) {
+      return currentValue
+    }
+
     let timeoutToken
     if (error !== EMPTY_VALUE) {
       clearTimeout(timeoutToken)
@@ -20,44 +21,38 @@ const reactEnhancer = <T>(source$: Observable<T>): BehaviorObservable<T> => {
       throw error
     }
 
-    try {
-      return (source$ as BehaviorObservable<T>).getValue()
-    } catch (e) {
-      if (promise) throw promise
-
-      let value: typeof EMPTY_VALUE | T = EMPTY_VALUE
-
-      promise = new Promise<T>((res) => {
-        const subscription = result.subscribe(
-          (v) => {
-            if (v !== (SUSPENSE as any)) {
-              value = v
-              subscription && subscription.unsubscribe()
-              res(v)
-            }
-          },
-          (e) => {
-            error = e
-            timeoutToken = setTimeout(() => {
-              error = EMPTY_VALUE
-            }, 50)
-            res()
-          },
-        )
-        if (value !== EMPTY_VALUE) {
-          subscription.unsubscribe()
-        }
-      }).finally(() => {
-        promise = undefined
-      })
-
-      if (value !== EMPTY_VALUE) return value
-
-      throw error !== EMPTY_VALUE ? error : promise
-    }
+    if (promise) throw promise
+
+    let value: typeof EMPTY_VALUE | T = EMPTY_VALUE
+
+    promise = new Promise<T>((res) => {
+      const subscription = source$.subscribe(
+        (v) => {
+          if (v !== (SUSPENSE as any)) {
+            value = v
+            subscription && subscription.unsubscribe()
+            res(v)
+          }
+        },
+        (e) => {
+          error = e
+          timeoutToken = setTimeout(() => {
+            error = EMPTY_VALUE
+          }, 50)
+          res()
+        },
+      )
+      if (value !== EMPTY_VALUE) {
+        subscription.unsubscribe()
+      }
+    }).finally(() => {
+      promise = undefined
+    })
+
+    if (value !== EMPTY_VALUE) return value
+
+    throw error !== EMPTY_VALUE ? error : promise
   }
-  result.getValue = getValue
-  return result
 }
 
 export default reactEnhancer

packages/core/src/internal/share-latest.ts

@@ -1,5 +1,4 @@
 import { Observable, Subscription, Subject, noop } from "rxjs"
-import { SUSPENSE } from "../SUSPENSE"
 import { BehaviorObservable } from "./BehaviorObservable"
 import { EMPTY_VALUE } from "./empty-value"
 
@@ -58,12 +57,7 @@ const shareLatest = <T>(
     }
   }) as BehaviorObservable<T>
 
-  result.getValue = () => {
-    if (currentValue === EMPTY_VALUE || currentValue === (SUSPENSE as any)) {
-      throw currentValue
-    }
-    return currentValue
-  }
+  result.getValue = () => currentValue
 
   return result
 }

packages/core/src/internal/useObservable.ts

@@ -1,20 +1,21 @@
 import { useEffect, useState } from "react"
-import { BehaviorObservable } from "./BehaviorObservable"
 import { SUSPENSE } from "../SUSPENSE"
 import { EMPTY_VALUE } from "./empty-value"
+import { Observable } from "rxjs"
 
 export const useObservable = <O>(
-  source$: BehaviorObservable<O>,
+  source$: Observable<O>,
+  getValue: () => O,
 ): Exclude<O, typeof SUSPENSE> => {
-  const [state, setState] = useState(source$.getValue)
+  const [state, setState] = useState(getValue)
 
   useEffect(() => {
     let prevVal: O | typeof SUSPENSE = EMPTY_VALUE
     let err: any = EMPTY_VALUE
 
     const onNext = (value: O | typeof SUSPENSE) => {
       if (value === SUSPENSE) {
-        setState(source$.getValue)
+        setState(getValue)
       } else if (!Object.is(value, prevVal)) {
         setState(value)
       }
@@ -37,5 +38,5 @@ export const useObservable = <O>(
     return () => subscription.unsubscribe()
   }, [source$])
 
-  return state
+  return state as Exclude<O, typeof SUSPENSE>
 }