fix: corrected usePipe impleemntation

Author: Duke

bun.lockb

@@ -2,8 +2,8 @@
   "name": "react",
   "version": "0.0.0",
   "dependencies": {
-    "@submodule/core": "^9.3.2",
-    "@submodule/react": "^1.0.5",
+    "@submodule/core": "^9.3.3",
+    "@submodule/react": "^1.0.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

examples/react/bun.lockb

@@ -1,6 +1,13 @@
-import React, { Suspense } from "react";
-import { ScopeProvider, useController, useObservable } from "@submodule/react";
-import { counter, config } from "../subs/counter";
+import React, { Suspense, useCallback, useState } from "react";
+import {
+	ScopeProvider,
+	useController,
+	useObservable,
+	useObservableN,
+	usePipe,
+	type PipeDispatcher,
+} from "@submodule/react";
+import { counter, config, onlyOddStream } from "../subs/counter";
 
 export default function App() {
 	return (
@@ -14,11 +21,20 @@ export default function App() {
 	);
 }
 
+const includeEven: PipeDispatcher<number, number> = (value, set) => {
+	if (value % 2 === 0) {
+		set(value);
+	}
+};
+
 function Counter() {
 	const counterValue = useObservable(config);
 	const controller = useController(config);
 	const counterApp = useObservable(counter);
 
+	const onlyOdd = useObservableN(onlyOddStream, 1);
+	const onlyEven = usePipe(counter, includeEven, 0);
+
 	return (
 		<>
 			<div>
@@ -62,6 +78,8 @@ function Counter() {
 			<div>
 				<h2>Counter</h2>
 				<div>{counterApp}</div>
+				<div>only odd: {onlyOdd}</div>
+				<div>only even: {onlyEven}</div>
 			</div>
 		</>
 	);

examples/react/package.json

@@ -75,4 +75,10 @@ export const counter = flatMap(config, config => {
     }
   })
 
+})
+
+export const onlyOddStream = pipe<number, number>(counter, (v, set) => {
+  if (v % 2 !== 0) {
+    set(v)
+  }
 })

examples/react/src/App.tsx

@@ -3,7 +3,7 @@
   "version": "1.1.0",
   "description": "make use of @submodule/core in react",
   "dependencies": {
-    "@submodule/core": "^9.3.2"
+    "@submodule/core": "^9.3.3"
   },
   "peerDependencies": {
     "react": "*"

examples/react/subs/counter.ts

@@ -176,7 +176,9 @@ export function useObservableN<P>(
 		[resource],
 	);
 
-	return useSyncExternalStore(subs, () => resource.get() || defaultValue);
+	return useSyncExternalStore(subs, () => {
+		return resource.get() || defaultValue;
+	});
 }
 
 /**
@@ -198,8 +200,25 @@ export function usePipe<Value, Upstream>(
 	ppipe: PipeDispatcher<Value, Upstream>,
 	defaultValue: Value,
 ): Value {
-	const piped = useMemo(() => pipe(upstream, ppipe), [upstream, ppipe]);
-	return useObservableN(piped, defaultValue);
+	const [value, setValue] = useState(defaultValue);
+	const u = useResolve(upstream);
+
+	useEffect(() => {
+		let mounted = true;
+
+		const cleanup = u.pipe(ppipe, (next) => {
+			if (mounted) {
+				setValue(next);
+			}
+		});
+
+		return () => {
+			mounted = false;
+			cleanup();
+		};
+	}, [ppipe, u]);
+
+	return value;
 }
 
 export type { PipeDispatcher } from "@submodule/core";