feat(bind): factory with nested keys

Author: josepot

packages/core/src/bind/connectFactoryObservable.ts

@@ -6,6 +6,53 @@ import { useObservable } from "../internal/useObservable"
 import { SUSPENSE } from "../SUSPENSE"
 import { takeUntilComplete } from "../internal/take-until-complete"
 
+class NestedMap<K extends [], V extends Object> {
+  private root: Map<K, any>
+  constructor() {
+    this.root = new Map()
+  }
+
+  get(keys: K[]): V | undefined {
+    let current: any = this.root
+    for (let i = 0; i < keys.length; i++) {
+      current = current.get(keys[i])
+      if (!current) return undefined
+    }
+    return current
+  }
+
+  set(keys: K[], value: V): void {
+    let current: Map<K, any> = this.root
+    let i
+    for (i = 0; i < keys.length - 1; i++) {
+      const key = keys[i]
+      let nextCurrent = current.get(key)
+      if (!nextCurrent) {
+        nextCurrent = new Map<K, any>()
+        current.set(key, nextCurrent)
+      }
+      current = nextCurrent
+    }
+    current.set(keys[i], value)
+  }
+
+  delete(keys: K[]): void {
+    const maps: Map<K, any>[] = [this.root]
+    let current: Map<K, any> = this.root
+
+    for (let i = 0; i < keys.length - 1; i++) {
+      maps.push((current = current.get(keys[i])))
+    }
+
+    let mapIdx = maps.length - 1
+    maps[mapIdx].delete(keys[mapIdx])
+
+    while (--mapIdx > -1 && maps[mapIdx].get(keys[mapIdx]).size === 0) {
+      maps[mapIdx].delete(keys[mapIdx])
+    }
+  }
+}
+
 /**
  * Accepts: A factory function that returns an Observable.
  *
@@ -28,30 +75,28 @@ import { takeUntilComplete } from "../internal/take-until-complete"
  * subscription, then the hook will leverage React Suspense while it's waiting
  * for the first value.
  */
-export default function connectFactoryObservable<
-  A extends (number | string | boolean | null)[],
-  O
->(
+const emptyInput = [0]
+export default function connectFactoryObservable<A extends [], O>(
   getObservable: (...args: A) => Observable<O>,
   unsubscribeGraceTime: number,
 ): [
   (...args: A) => Exclude<O, typeof SUSPENSE>,
   (...args: A) => Observable<O>,
 ] {
-  const cache = new Map<string, [Observable<O>, BehaviorObservable<O>]>()
+  const cache = new NestedMap<A, [Observable<O>, BehaviorObservable<O>]>()
 
   const getSharedObservables$ = (
-    ...input: A
+    input: A,
   ): [Observable<O>, BehaviorObservable<O>] => {
-    const key = JSON.stringify(input)
-    const cachedVal = cache.get(key)
+    const keys = input.length > 0 ? input : (emptyInput as A)
+    const cachedVal = cache.get(keys)
 
     if (cachedVal !== undefined) {
       return cachedVal
     }
 
     const sharedObservable$ = shareLatest(getObservable(...input), () => {
-      cache.delete(key)
+      cache.delete(keys)
     })
 
     const reactObservable$ = reactEnhancer(
@@ -64,12 +109,12 @@ export default function connectFactoryObservable<
       reactObservable$,
     ]
 
-    cache.set(key, result)
+    cache.set(keys, result)
     return result
   }
 
   return [
-    (...input: A) => useObservable(getSharedObservables$(...input)[1]),
-    (...input: A) => getSharedObservables$(...input)[0],
+    (...input: A) => useObservable(getSharedObservables$(input)[1]),
+    (...input: A) => getSharedObservables$(input)[0],
   ]
 }

packages/core/src/bind/index.ts

@@ -46,12 +46,18 @@ export function bind<T>(
  * subscription, then the hook will leverage React Suspense while it's waiting
  * for the first value.
  */
-export function bind<A extends (number | string | boolean | null)[], O>(
+export function bind<
+  A extends (number | string | boolean | null | Object | Symbol)[],
+  O
+>(
   getObservable: (...args: A) => Observable<O>,
   unsubscribeGraceTime?: number,
 ): [(...args: A) => Exclude<O, typeof SUSPENSE>, (...args: A) => Observable<O>]
 
-export function bind<A extends (number | string | boolean | null)[], O>(
+export function bind<
+  A extends (number | string | boolean | null | Object | Symbol)[],
+  O
+>(
   obs: ((...args: A) => Observable<O>) | Observable<O>,
   unsubscribeGraceTime = 200,
 ) {