feat: RemoveSubscribe component (#261)

Author: voliva

packages/core/src/Subscribe.test.tsx

@@ -1,9 +1,10 @@
 import { state } from "@rxstate/core"
 import { render, screen } from "@testing-library/react"
 import React, { StrictMode, useState } from "react"
-import { defer, EMPTY, Observable, of, startWith } from "rxjs"
+import { defer, EMPTY, NEVER, Observable, of, startWith } from "rxjs"
+import { bind, RemoveSubscribe, Subscribe as OriginalSubscribe } from "./"
+import { TestErrorBoundary } from "./test-helpers/TestErrorBoundary"
 import { useStateObservable } from "./useStateObservable"
-import { bind, Subscribe as OriginalSubscribe } from "./"
 
 const Subscribe = (props: any) => {
   return (
@@ -267,3 +268,27 @@ describe("Subscribe", () => {
     })
   })
 })
+
+describe("RemoveSubscribe", () => {
+  it("prevents its children from using the parent Subscribe boundary", () => {
+    const [useValue] = bind(NEVER)
+
+    const ChildrenComponent = () => {
+      const value = useValue()
+      return <>{value}</>
+    }
+
+    const errorCallback = jest.fn()
+    render(
+      <TestErrorBoundary onError={(e) => errorCallback(e.message)}>
+        <Subscribe>
+          <RemoveSubscribe>
+            <ChildrenComponent />
+          </RemoveSubscribe>
+        </Subscribe>
+      </TestErrorBoundary>,
+    )
+
+    expect(errorCallback).toHaveBeenCalledWith("Missing Subscribe!")
+  })
+})

packages/core/src/Subscribe.tsx

@@ -95,3 +95,11 @@ export const Subscribe: React.FC<{
     <Suspense fallback={fallback}>{actualChildren}</Suspense>
   )
 }
+
+/**
+ * Component that prevents its children from using the parent `Subscribe` boundary
+ * to manage their subscriptions.
+ */
+export const RemoveSubscribe: React.FC<{
+  children?: React.ReactNode | undefined
+}> = ({ children }) => <Provider value={null}>{children}</Provider>

packages/core/src/index.tsx

@@ -3,4 +3,4 @@ export { shareLatest } from "./shareLatest"
 export { useStateObservable } from "./useStateObservable"
 export { bind } from "./bind"
 export { SUSPENSE } from "./SUSPENSE"
-export { Subscribe } from "./Subscribe"
+export { Subscribe, RemoveSubscribe } from "./Subscribe"