fix: pipeState also enhanced as a React element (#282)

Author: voliva

package-lock.json

@@ -50,7 +50,7 @@
     "Victor Oliva (https://github.com/voliva)"
   ],
   "dependencies": {
-    "@rx-state/core": "0.1.0",
+    "@rx-state/core": "0.1.1",
     "use-sync-external-store": "^1.0.0"
   },
   "devDependencies": {

packages/core/package.json

@@ -44,4 +44,32 @@ describe("stateJsx", () => {
     expect(screen.queryByText("Waiting")).toBeNull()
     subscription.unsubscribe()
   })
+
+  it("enhances the result of a pipeState to be used as a JSX element", async () => {
+    const subject = new Subject<string>()
+    const state$ = state(subject)
+
+    const derivedState$ = state$.pipeState(map((v) => `derived ${v}`))
+    const derivedTwiceState$ = derivedState$.pipeState(map((v) => `${v} again`))
+    const subscription = derivedTwiceState$.subscribe()
+
+    render(
+      <Suspense fallback="Waiting">
+        {derivedState$}, {derivedTwiceState$}
+      </Suspense>,
+    )
+
+    expect(screen.queryByText("Waiting")).not.toBeNull()
+
+    await act(() => {
+      subject.next("Result")
+      return Promise.resolve()
+    })
+
+    expect(
+      screen.queryByText("derived Result, derived Result again"),
+    ).not.toBeNull()
+    expect(screen.queryByText("Waiting")).toBeNull()
+    subscription.unsubscribe()
+  })
 })

packages/core/src/stateJsx.test.tsx

@@ -23,5 +23,9 @@ function enhanceState<T>(state$: StateObservable<T>) {
       createElement(() => useStateObservable(state$) as any, {}),
     )
 
-  return Object.assign(state$, cache.get(state$)!)
+  const originalPipeState = state$.pipeState.bind(state$)
+  return Object.assign(state$, cache.get(state$)!, {
+    pipeState: (...operators: any[]) =>
+      enhanceState((originalPipeState as any)(...operators)),
+  })
 }