packages/effect-fc/src/ReactComponent.ts

@@ -61,10 +61,10 @@ export const use: {
 })
 
 export const withRuntime: {
-    <E, R, P extends {} = {}>(context: React.Context<Runtime.Runtime<R>>): (self: ReactComponent<E, R, P>) => React.FC<P>
-    <E, R, P extends {} = {}>(self: ReactComponent<E, R, P>, context: React.Context<Runtime.Runtime<R>>): React.FC<P>
+    <E, R, P extends {} = {}>(context: React.Context<Runtime.Runtime<R>>): (self: ReactComponent<E, R | Scope.Scope, P>) => React.FC<P>
+    <E, R, P extends {} = {}>(self: ReactComponent<E, R | Scope.Scope, P>, context: React.Context<Runtime.Runtime<R>>): React.FC<P>
 } = Function.dual(2, <E, R, P extends {}>(
-    self: ReactComponent<E, R, P>,
+    self: ReactComponent<E, R | Scope.Scope, P>,
     context: React.Context<Runtime.Runtime<R>>,
 ): React.FC<P> => function WithRuntime(props) {
     const runtime = React.useContext(context)

packages/example/src/routes/index.tsx

@@ -1,20 +1,18 @@
 import { runtime } from "@/runtime"
+import { TodosState } from "@/todo/TodosState.service"
 import { createFileRoute } from "@tanstack/react-router"
 import { Effect, pipe } from "effect"
-import { ReactComponent } from "effect-fc"
+import { ReactComponent, ReactHook } from "effect-fc"
 
 
-const RouteComponent = pipe(
+export const Route = createFileRoute("/")({
+    component: pipe(
         Effect.fn(function*() {
-        yield* Effect.succeed("ouient")
+            const context = yield* ReactHook.useMemoLayer(TodosState.Default("todos"))
             return <div>Hello "/"!</div>
         }),
 
         ReactComponent.withDisplayName("Index"),
         ReactComponent.withRuntime(runtime.context),
     )
-
-
-export const Route = createFileRoute("/")({
-    component: RouteComponent
 })

packages/example/src/todo/TodosState.service.ts

@@ -1,5 +1,6 @@
 import { Todo } from "@/domain"
 import { KeyValueStore } from "@effect/platform"
+import { BrowserKeyValueStore } from "@effect/platform-browser"
 import { Chunk, Console, Effect, Option, Schema, Stream, SubscriptionRef } from "effect"
 import { SubscriptionSubRef } from "effect-fc/types"
 
@@ -41,8 +42,13 @@ export class TodosState extends Effect.Service<TodosState>()("TodosState", {
             Stream.debounce("500 millis"),
             Stream.runForEach(saveToLocalStorage),
         ))
-        yield* Effect.addFinalizer(() => Effect.flatMap(ref, saveToLocalStorage))
+        yield* Effect.addFinalizer(() => ref.pipe(
+            Effect.flatMap(saveToLocalStorage),
+            Effect.ignore,
+        ))
 
         return { ref, makeSubRef } as const
-    })
+    }),
+
+    dependencies: [BrowserKeyValueStore.layerLocalStorage],
 }) {}