packages/example/src/routes/tests.tsx

@@ -3,6 +3,8 @@ import { Button, Flex, Text } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Console, Effect, Ref } from "effect"
+import { useMemo } from "react"
+import { SubscriptionSubRef } from "reffuse"
 
 
 export const Route = createFileRoute("/tests")({
@@ -10,6 +12,13 @@ export const Route = createFileRoute("/tests")({
 })
 
 function RouteComponent() {
+    const deepRef = R.useRef({ value: "poulet" })
+    const deepValueRef = useMemo(() => SubscriptionSubRef.make(
+        deepRef,
+        b => b.value,
+        (b, a) => ({ ...b, value: a }),
+    ), [deepRef])
+
     // const value = R.useMemoScoped(Effect.addFinalizer(() => Console.log("cleanup")).pipe(
     //     Effect.andThen(makeUuid4),
     //     Effect.provide(GetRandomValues.CryptoRandom),
@@ -32,7 +41,8 @@ function RouteComponent() {
 
     const generateUuid = R.useCallbackSync(() => makeUuid4.pipe(
         Effect.provide(GetRandomValues.CryptoRandom),
-        Effect.flatMap(v => Ref.set(uuidRef, v)),
+        Effect.tap(v => Ref.set(uuidRef, v)),
+        Effect.tap(v => Ref.set(deepValueRef, v)),
     ), [])
 
 
@@ -42,6 +52,10 @@ function RouteComponent() {
                 {(uuid, anotherRef) => <Text>{uuid} / {anotherRef}</Text>}
             </R.SubscribeRefs>
 
+            <R.SubscribeRefs refs={[deepRef, deepValueRef]}>
+                {(deep, deepValue) => <Text>{JSON.stringify(deep)} / {deepValue}</Text>}
+            </R.SubscribeRefs>
+
             <Button onClick={() => logValue("test")}>Log value</Button>
             <Button onClick={() => generateUuid()}>Generate UUID</Button>
         </Flex>

packages/reffuse/src/SubscriptionSubRef.ts

@@ -27,7 +27,7 @@ class SubscriptionSubRefImpl<in out A, in out B> extends Effectable.Class<A> imp
     constructor(
         readonly ref: SubscriptionRef.SubscriptionRef<B>,
         readonly select: (value: B) => A,
-        readonly setter: (value: A) => B,
+        readonly setter: (value: B, subValue: A) => B,
     ) {
         super()
         this.get = Ref.get(this.ref).pipe(Effect.map(this.select))
@@ -52,11 +52,11 @@ class SubscriptionSubRefImpl<in out A, in out B> extends Effectable.Class<A> imp
     }
 
     modifyEffect<C, E, R>(f: (a: A) => Effect.Effect<readonly [C, A], E, R>): Effect.Effect<C, E, R> {
-        return this.get.pipe(
-            Effect.flatMap(f),
-            Effect.flatMap(([b, a]) => Ref.set(this.ref, this.setter(a)).pipe(
-                Effect.as(b)
-            )),
+        return Effect.Do.pipe(
+            Effect.bind("b", () => Ref.get(this.ref)),
+            Effect.bind("ca", ({ b }) => f(this.select(b))),
+            Effect.tap(({ b, ca: [, a] }) => Ref.set(this.ref, this.setter(b, a))),
+            Effect.map(({ ca: [c] }) => c),
         )
     }
 }
@@ -65,5 +65,5 @@ class SubscriptionSubRefImpl<in out A, in out B> extends Effectable.Class<A> imp
 export const make = <A, B>(
     ref: SubscriptionRef.SubscriptionRef<B>,
     select: (value: B) => A,
-    setter: (value: A) => B,
+    setter: (value: B, subValue: A) => B,
 ): SubscriptionSubRef<A, B> => new SubscriptionSubRefImpl(ref, select, setter)