chore(refactor): move subscribe utils to core

README.md

@@ -29,6 +29,8 @@
       - [Factory of Observables overload](#factory-of-observables-overload)
     - [shareLatest](#sharelatest)
     - [SUSPENSE](#suspense)
+    - [useSubscribe](#usesubscribe)
+    - [Subscribe](#subscribe)
 - [Examples](#examples)
 
 ## Installation
@@ -129,6 +131,33 @@ This is a special symbol that can be emitted from our observables to let the rea
 know that there is a value on its way, and that we want to leverage React Suspense
 while we are waiting for that value.
 
+### useSubscribe
+
+A React hook that creates a subscription to the provided observable once the
+component mounts and it unsubscribes when the component unmounts.
+
+Arguments:
+
+- `source$`: Source observable that the hook will subscribe to.
+- `unsubscribeGraceTime`: Amount of time in ms that the hook should wait before
+  unsubscribing from the source observable after it unmounts (default = 200).
+
+Important: This hook doesn't trigger any updates.
+
+### Subscribe
+
+A React Component that creates a subscription to the provided observable once
+the component mounts and it unsubscribes from it when the component unmounts.
+
+Properties:
+
+- `source$`: Source observable that the Component will subscribe to.
+- `graceTime`: an optional property that describes the amount of time in ms
+  that the Component should wait before unsubscribing from the source observable
+  after it unmounts (default = 200).
+
+Important: This Component doesn't trigger any updates.
+
 ## Examples
 
 - [This is a contrived example](https://codesandbox.io/s/crazy-wood-vn7gg?file=/src/fakeApi.js) based on [this example](https://reactjs.org/docs/concurrent-mode-patterns.html#reviewing-the-changes) from the React docs.

packages/core/README.md

@@ -97,3 +97,30 @@ const story$ = selectedStoryId$.pipe(
 This is a special symbol that can be emitted from our observables to let the react hook
 know that there is a value on its way, and that we want to leverage React Suspense
 while we are waiting for that value.
+
+### useSubscribe
+
+A React hook that creates a subscription to the provided observable once the
+component mounts and it unsubscribes when the component unmounts.
+
+Arguments:
+
+- `source$`: Source observable that the hook will subscribe to.
+- `unsubscribeGraceTime`: Amount of time in ms that the hook should wait before
+  unsubscribing from the source observable after it unmounts (default = 200).
+
+Important: This hook doesn't trigger any updates.
+
+### Subscribe
+
+A React Component that creates a subscription to the provided observable once
+the component mounts and it unsubscribes from it when the component unmounts.
+
+Properties:
+
+- `source$`: Source observable that the Component will subscribe to.
+- `graceTime`: an optional property that describes the amount of time in ms
+  that the Component should wait before unsubscribing from the source observable
+  after it unmounts (default = 200).
+
+Important: This Component doesn't trigger any updates.

packages/core/src/Subscribe.test.tsx

@@ -34,30 +34,4 @@ describe("Subscribe", () => {
 
     expect(nSubscriptions).toBe(0)
   })
-
-  it("unsubscribes synchronously if the graceTime is zero", async () => {
-    let nSubscriptions = 0
-    const source$ = defer(() => {
-      nSubscriptions++
-      return new Subject()
-    }).pipe(
-      finalize(() => {
-        nSubscriptions--
-      }),
-      share(),
-    )
-
-    const TestSubscribe: React.FC = () => (
-      <Subscribe source$={source$} graceTime={0} />
-    )
-
-    expect(nSubscriptions).toBe(0)
-
-    const { unmount } = render(<TestSubscribe />)
-
-    expect(nSubscriptions).toBe(1)
-
-    unmount()
-    expect(nSubscriptions).toBe(0)
-  })
 })

packages/core/src/index.tsx

@@ -1,3 +1,5 @@
 export { bind } from "./bind"
 export { shareLatest } from "./shareLatest"
 export { SUSPENSE } from "./SUSPENSE"
+export { useSubscribe } from "./useSubscribe"
+export { Subscribe } from "./Subscribe"

packages/core/src/useSubscribe.test.ts

@@ -20,7 +20,7 @@ describe("useSubscribe", () => {
 
     expect(nSubscriptions).toBe(0)
 
-    const { unmount } = renderHook(() => useSubscribe(source$))
+    const { unmount } = renderHook(() => useSubscribe(source$, 201))
 
     expect(nSubscriptions).toBe(1)
 
@@ -31,26 +31,4 @@ describe("useSubscribe", () => {
 
     expect(nSubscriptions).toBe(0)
   })
-
-  it("unsubscribes synchronously if the graceTime is zero", async () => {
-    let nSubscriptions = 0
-    const source$ = defer(() => {
-      nSubscriptions++
-      return new Subject()
-    }).pipe(
-      finalize(() => {
-        nSubscriptions--
-      }),
-      share(),
-    )
-
-    expect(nSubscriptions).toBe(0)
-
-    const { unmount } = renderHook(() => useSubscribe(source$, 0))
-
-    expect(nSubscriptions).toBe(1)
-
-    unmount()
-    expect(nSubscriptions).toBe(0)
-  })
 })

packages/core/src/useSubscribe.ts

@@ -19,12 +19,11 @@ export const useSubscribe = <T>(
   useEffect(() => {
     const subscription = source$.subscribe()
     return () => {
-      if (unsubscribeGraceTime === 0) {
-        return subscription.unsubscribe()
-      }
-      setTimeout(() => {
-        subscription.unsubscribe()
-      }, unsubscribeGraceTime)
+      /* istanbul ignore else */
+      if (unsubscribeGraceTime !== Infinity)
+        setTimeout(() => {
+          subscription.unsubscribe()
+        }, unsubscribeGraceTime)
     }
   }, [source$, unsubscribeGraceTime])
 }

packages/utils/README.md

@@ -6,33 +6,6 @@
 
 ## API
 
-### useSubscribe
-
-A React hook that creates a subscription to the provided observable once the
-component mounts and it unsubscribes when the component unmounts.
-
-Arguments:
-
-- `source$`: Source observable that the hook will subscribe to.
-- `unsubscribeGraceTime`: Amount of time in ms that the hook should wait before
-  unsubscribing from the source observable after it unmounts (default = 200).
-
-Important: This hook doesn't trigger any updates.
-
-### Subscribe
-
-A React Component that creates a subscription to the provided observable once
-the component mounts and it unsubscribes from it when the component unmounts.
-
-Properties:
-
-- `source$`: Source observable that the Component will subscribe to.
-- `graceTime`: an optional property that describes the amount of time in ms
-  that the Component should wait before unsubscribing from the source observable
-  after it unmounts (default = 200).
-
-Important: This Component doesn't trigger any updates.
-
 ### split
 
 A RxJS operator that groups the items emitted by the source based on the

packages/utils/src/index.tsx

@@ -1,5 +1,3 @@
-export { useSubscribe } from "./useSubscribe"
-export { Subscribe } from "./Subscribe"
 export { collectValues } from "./collectValues"
 export { collect } from "./collect"
 export { mergeWithKey } from "./mergeWithKey"