diff --git a/README.md b/README.md index 6100cdd..fef15ab 100644 --- a/README.md +++ b/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. diff --git a/packages/core/README.md b/packages/core/README.md index f28dd89..1bb7230 100644 --- a/packages/core/README.md +++ b/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. diff --git a/packages/utils/src/Subscribe.test.tsx b/packages/core/src/Subscribe.test.tsx similarity index 62% rename from packages/utils/src/Subscribe.test.tsx rename to packages/core/src/Subscribe.test.tsx index d086259..67efa48 100644 --- a/packages/utils/src/Subscribe.test.tsx +++ b/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 = () => ( - - ) - - expect(nSubscriptions).toBe(0) - - const { unmount } = render() - - expect(nSubscriptions).toBe(1) - - unmount() - expect(nSubscriptions).toBe(0) - }) }) diff --git a/packages/utils/src/Subscribe.tsx b/packages/core/src/Subscribe.tsx similarity index 100% rename from packages/utils/src/Subscribe.tsx rename to packages/core/src/Subscribe.tsx diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx index df8b054..3fba874 100644 --- a/packages/core/src/index.tsx +++ b/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" diff --git a/packages/utils/src/useSubscribe.test.ts b/packages/core/src/useSubscribe.test.ts similarity index 59% rename from packages/utils/src/useSubscribe.test.ts rename to packages/core/src/useSubscribe.test.ts index ba03784..e68ecf2 100644 --- a/packages/utils/src/useSubscribe.test.ts +++ b/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) - }) }) diff --git a/packages/utils/src/useSubscribe.ts b/packages/core/src/useSubscribe.ts similarity index 80% rename from packages/utils/src/useSubscribe.ts rename to packages/core/src/useSubscribe.ts index 4f367f2..7e449ef 100644 --- a/packages/utils/src/useSubscribe.ts +++ b/packages/core/src/useSubscribe.ts @@ -19,12 +19,11 @@ export const useSubscribe = ( 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]) } diff --git a/packages/utils/README.md b/packages/utils/README.md index 5033f26..faf5af9 100644 --- a/packages/utils/README.md +++ b/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 diff --git a/packages/utils/src/index.tsx b/packages/utils/src/index.tsx index 1b2e01d..a913abf 100644 --- a/packages/utils/src/index.tsx +++ b/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"