Subscribable

packages/example/src/todo/Todo.tsx

@@ -54,7 +54,7 @@ export class Todo extends Component.makeUntraced(function* Todo(props: TodoProps
     // eslint-disable-next-line react-hooks/exhaustive-deps
     ), [props._tag, props._tag === "edit" ? props.id : undefined])
 
-    const [index, size] = yield* useSubscribe(indexRef, state.sizeRef)
+    const [index, size] = yield* useSubscribe(indexRef, state.sizeSubscribable)
 
     const StringTextAreaInputFC = yield* StringTextAreaInput
     const OptionalDateTimeInputFC = yield* OptionalDateTimeInput

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

@@ -2,7 +2,7 @@ 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"
+import { Subscribable } from "effect-fc/types"
 
 
 export class TodosState extends Effect.Service<TodosState>()("TodosState", {
@@ -32,7 +32,11 @@ export class TodosState extends Effect.Service<TodosState>()("TodosState", {
         )
 
         const ref = yield* SubscriptionRef.make(yield* readFromLocalStorage)
-        const sizeRef = SubscriptionSubRef.makeFromPath(ref, ["length"])
+
+        const sizeSubscribable = Subscribable.make({
+            get: Effect.andThen(ref, Chunk.size),
+            get changes() { return Stream.map(ref.changes, Chunk.size) },
+        })
 
         yield* Effect.forkScoped(ref.changes.pipe(
             Stream.debounce("500 millis"),
@@ -43,7 +47,7 @@ export class TodosState extends Effect.Service<TodosState>()("TodosState", {
             Effect.ignore,
         ))
 
-        return { ref, sizeRef } as const
+        return { ref, sizeSubscribable } as const
     }),
 
     dependencies: [BrowserKeyValueStore.layerLocalStorage],