Working ref

packages/effect-components/src/ReactHook.ts

@@ -1,4 +1,4 @@
-import { Effect, ExecutionStrategy, Runtime, Scope } from "effect"
+import { Effect, ExecutionStrategy, Exit, pipe, Runtime, Scope, Stream, SubscriptionRef } from "effect"
 import * as React from "react"
 
 
@@ -94,3 +94,58 @@ export const useLayoutEffect: {
         }
     }, deps)
 })
+
+export const useFork: {
+    <E, R>(
+        effect: () => Effect.Effect<void, E, R>,
+        deps?: React.DependencyList,
+        options?: Runtime.RunForkOptions & ScopeOptions,
+    ): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
+} = Effect.fnUntraced(function* <E, R>(
+    effect: () => Effect.Effect<void, E, R>,
+    deps?: React.DependencyList,
+    options?: Runtime.RunForkOptions & ScopeOptions,
+) {
+    const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
+
+    React.useEffect(() => {
+        const scope = Runtime.runSync(runtime)(options?.scope
+            ? Scope.fork(options.scope, options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)
+            : Scope.make(options?.finalizerExecutionStrategy)
+        )
+        Runtime.runFork(runtime)(Effect.provideService(effect(), Scope.Scope, scope), { ...options, scope })
+
+        return () => {
+            switch (options?.finalizerExecutionMode ?? "fork") {
+                case "sync":
+                    Runtime.runSync(runtime)(Scope.close(scope, Exit.void))
+                    break
+                case "fork":
+                    Runtime.runFork(runtime)(Scope.close(scope, Exit.void))
+                    break
+            }
+        }
+    }, deps)
+})
+
+export const useSubscribeRefs: {
+    <const Refs extends readonly SubscriptionRef.SubscriptionRef<any>[]>(
+        ...refs: Refs
+    ): Effect.Effect<{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }>
+} = Effect.fnUntraced(function* <const Refs extends readonly SubscriptionRef.SubscriptionRef<any>[]>(
+    ...refs: Refs
+) {
+    const [reactStateValue, setReactStateValue] = React.useState(yield* useOnce(() =>
+        Effect.all(refs as readonly SubscriptionRef.SubscriptionRef<any>[])
+    ))
+
+    yield* useFork(() => pipe(
+        refs.map(ref => Stream.changesWith(ref.changes, (x, y) => x === y)),
+        streams => Stream.zipLatestAll(...streams),
+        Stream.runForEach(v =>
+            Effect.sync(() => setReactStateValue(v))
+        ),
+    ), refs)
+
+    return reactStateValue as any
+})

packages/example/src/routes/effect-component-tests.tsx

@@ -1,8 +1,7 @@
 import { Box, TextField } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
-import { Console, Effect, Layer, pipe, SubscriptionRef } from "effect"
+import { Console, Effect, Layer, pipe, Ref, Runtime, SubscriptionRef } from "effect"
 import { ReactComponent, ReactHook, ReactManagedRuntime } from "effect-components"
-import * as React from "react"
 
 
 const LogLive = Layer.scopedDiscard(Effect.acquireRelease(
@@ -43,7 +42,10 @@ const MyRoute = pipe(
 
 const MyTestComponent = pipe(
     Effect.fn(function*() {
-        const [state, setState] = React.useState("value")
+        const runtime = yield* Effect.runtime()
+
+        const testService = yield* TestService
+        const [value] = yield* ReactHook.useSubscribeRefs(testService.ref)
 
         yield* ReactHook.useEffect(() => Effect.andThen(
             Effect.addFinalizer(() => Console.log("MyTestComponent umounted")),
@@ -53,8 +55,8 @@ const MyTestComponent = pipe(
         return <>
             <Box>
                 <TextField.Root
-                    value={state}
+                    value={value}
-                    onChange={e => setState(e.target.value)}
+                    onChange={e => Runtime.runSync(runtime)(Ref.set(testService.ref, e.target.value))}
                 />
             </Box>
         </>