Refactoring

Co-authored-by: Julien Valverdé <julien.valverde@mailo.com>
Reviewed-on: https://gitea:3000/Thilawyn/reffuse/pulls/11

bun.lock

@@ -46,21 +46,9 @@
         "vite": "^6.2.6",
       },
     },
-    "packages/extension-form": {
-      "name": "@reffuse/extension-form",
-      "version": "0.1.0",
-      "devDependencies": {
-        "reffuse": "workspace:*",
-      },
-      "peerDependencies": {
-        "effect": "^3.13.0",
-        "react": "^19.0.0",
-        "reffuse": "^0.1.6",
-      },
-    },
     "packages/extension-lazyref": {
       "name": "@reffuse/extension-lazyref",
-      "version": "0.1.2",
+      "version": "0.1.1",
       "devDependencies": {
         "reffuse": "workspace:*",
       },
@@ -69,12 +57,12 @@
         "@types/react": "^19.0.0",
         "effect": "^3.13.0",
         "react": "^19.0.0",
-        "reffuse": "^0.1.6",
+        "reffuse": "^0.1.4",
       },
     },
     "packages/extension-query": {
       "name": "@reffuse/extension-query",
-      "version": "0.1.3",
+      "version": "0.1.2",
       "devDependencies": {
         "reffuse": "workspace:*",
       },
@@ -85,12 +73,12 @@
         "@types/react": "^19.0.0",
         "effect": "^3.13.0",
         "react": "^19.0.0",
-        "reffuse": "^0.1.6",
+        "reffuse": "^0.1.4",
       },
     },
     "packages/reffuse": {
       "name": "reffuse",
-      "version": "0.1.6",
+      "version": "0.1.5",
       "peerDependencies": {
         "@types/react": "^19.0.0",
         "effect": "^3.13.0",
@@ -375,8 +363,6 @@
 
     "@reffuse/example": ["@reffuse/example@workspace:packages/example"],
 
-    "@reffuse/extension-form": ["@reffuse/extension-form@workspace:packages/extension-form"],
-
     "@reffuse/extension-lazyref": ["@reffuse/extension-lazyref@workspace:packages/extension-lazyref"],
 
     "@reffuse/extension-query": ["@reffuse/extension-query@workspace:packages/extension-query"],

packages/example/src/QueryErrorHandler.tsx

@@ -1,57 +0,0 @@
-import { AlertDialog, Button, Flex, Text } from "@radix-ui/themes"
-import { QueryErrorHandler } from "@reffuse/extension-query"
-import { Cause, Console, Context, Effect, Either, flow, Match, Option, Stream } from "effect"
-import { useState } from "react"
-import { AppQueryErrorHandler } from "./query"
-import { R } from "./reffuse"
-
-
-export function VQueryErrorHandler() {
-    const [failure, setFailure] = useState(Option.none<Cause.Cause<
-        QueryErrorHandler.Error<Context.Tag.Service<AppQueryErrorHandler>>
-    >>())
-
-    R.useFork(() => AppQueryErrorHandler.pipe(Effect.flatMap(handler =>
-        Stream.runForEach(handler.errors, v => Console.error(v).pipe(
-            Effect.andThen(Effect.sync(() => { setFailure(Option.some(v)) }))
-        ))
-    )), [])
-
-    return Option.match(failure, {
-        onSome: v => (
-            <AlertDialog.Root open>
-                <AlertDialog.Content maxWidth="450px">
-                    <AlertDialog.Title>Error</AlertDialog.Title>
-                    <AlertDialog.Description size="2">
-                        {Either.match(Cause.failureOrCause(v), {
-                            onLeft: flow(
-                                Match.value,
-                                Match.tag("RequestError", () => <Text>HTTP request error</Text>),
-                                Match.tag("ResponseError", () => <Text>HTTP response error</Text>),
-                                Match.exhaustive,
-                            ),
-
-                            onRight: flow(
-                                Cause.dieOption,
-                                Option.match({
-                                    onSome: () => <Text>Unrecoverable defect</Text>,
-                                    onNone: () => <Text>Unknown error</Text>,
-                                }),
-                            ),
-                        })}
-                    </AlertDialog.Description>
-
-                    <Flex gap="3" mt="4" justify="end">
-                        <AlertDialog.Action>
-                            <Button variant="solid" color="red" onClick={() => setFailure(Option.none())}>
-                                Ok
-                            </Button>
-                        </AlertDialog.Action>
-                    </Flex>
-                </AlertDialog.Content>
-            </AlertDialog.Root>
-        ),
-
-        onNone: () => <></>,
-    })
-}

packages/example/src/VQueryErrorHandler.tsx

@@ -0,0 +1,57 @@
+import { AlertDialog, Button, Flex, Text } from "@radix-ui/themes"
+import { Cause, Console, Effect, Either, flow, Match, Option, Stream } from "effect"
+import { useState } from "react"
+import { AppQueryErrorHandler } from "./query"
+import { R } from "./reffuse"
+
+
+export function VQueryErrorHandler() {
+    const [open, setOpen] = useState(false)
+
+    const error = R.useSubscribeStream(
+        R.useMemo(() => AppQueryErrorHandler.pipe(
+            Effect.map(handler => handler.errors.pipe(
+                Stream.changes,
+                Stream.tap(Console.error),
+                Stream.tap(() => Effect.sync(() => setOpen(true))),
+            ))
+        ), [])
+    )
+
+    if (Option.isNone(error))
+        return <></>
+
+    return (
+        <AlertDialog.Root open={open}>
+            <AlertDialog.Content maxWidth="450px">
+                <AlertDialog.Title>Error</AlertDialog.Title>
+                <AlertDialog.Description size="2">
+                    {Either.match(Cause.failureOrCause(error.value), {
+                        onLeft: flow(
+                            Match.value,
+                            Match.tag("RequestError", () => <Text>HTTP request error</Text>),
+                            Match.tag("ResponseError", () => <Text>HTTP response error</Text>),
+                            Match.exhaustive,
+                        ),
+
+                        onRight: flow(
+                            Cause.dieOption,
+                            Option.match({
+                                onSome: () => <Text>Unrecoverable defect</Text>,
+                                onNone: () => <Text>Unknown error</Text>,
+                            }),
+                        ),
+                    })}
+                </AlertDialog.Description>
+
+                <Flex gap="3" mt="4" justify="end">
+                    <AlertDialog.Action>
+                        <Button variant="solid" color="red" onClick={() => setOpen(false)}>
+                            Ok
+                        </Button>
+                    </AlertDialog.Action>
+                </Flex>
+            </AlertDialog.Content>
+        </AlertDialog.Root>
+    )
+}

packages/example/src/routes/__root.tsx

@@ -1,4 +1,4 @@
-import { VQueryErrorHandler } from "@/QueryErrorHandler"
+import { VQueryErrorHandler } from "@/VQueryErrorHandler"
 import { Container, Flex, Theme } from "@radix-ui/themes"
 import { createRootRoute, Link, Outlet } from "@tanstack/react-router"
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"

packages/example/src/routes/tests.tsx

@@ -10,6 +10,9 @@ export const Route = createFileRoute("/tests")({
 })
 
 function RouteComponent() {
+    const deepRef = R.useRef({ value: "poulet" })
+    const deepValueRef = R.useSubRef(deepRef, ["value"])
+
     // const value = R.useMemoScoped(Effect.addFinalizer(() => Console.log("cleanup")).pipe(
     //     Effect.andThen(makeUuid4),
     //     Effect.provide(GetRandomValues.CryptoRandom),
@@ -32,7 +35,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 +46,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/extension-form/README.md

@@ -1,9 +0,0 @@
-# LazyRef extension for Reffuse
-
-Extension to integrate `@typed/lazy-ref` with Reffuse.
-
-## Peer dependencies
-- `@typed/lazy-ref`
-- `reffuse` 0.1.3+
-- `effect` 3.13+
-- `react` & `@types/react` 19+

packages/extension-form/package.json

@@ -1,40 +0,0 @@
-{
-  "name": "@reffuse/extension-form",
-  "version": "0.1.0",
-  "type": "module",
-  "files": [
-    "./README.md",
-    "./dist"
-  ],
-  "license": "MIT",
-  "repository": {
-    "url": "git+https://github.com/Thiladev/reffuse.git"
-  },
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./*": {
-      "types": "./dist/*.d.ts",
-      "default": "./dist/*.js"
-    }
-  },
-  "scripts": {
-    "build": "tsc",
-    "lint:tsc": "tsc --noEmit",
-    "pack": "npm pack",
-    "clean:cache": "rm -f tsconfig.tsbuildinfo",
-    "clean:dist": "rm -rf dist",
-    "clean:node": "rm -rf node_modules"
-  },
-  "devDependencies": {
-    "reffuse": "workspace:*"
-  },
-  "peerDependencies": {
-    "effect": "^3.13.0",
-    "react": "^19.0.0",
-    "reffuse": "^0.1.6"
-  }
-}

packages/extension-form/src/FormExtension.ts

@@ -1,9 +0,0 @@
-import { ReffuseExtension, type ReffuseNamespace } from "reffuse"
-
-
-export const FormExtension = ReffuseExtension.make(() => ({
-    useForm<A, E, R>(
-        this: ReffuseNamespace.ReffuseNamespace<R>,
-    ) {
-    },
-}))

packages/extension-form/src/index.ts

@@ -1 +0,0 @@
-export * from "./FormExtension.js"

packages/extension-form/src/internal/Form.ts

@@ -1,6 +0,0 @@
-import type { Schema } from "effect"
-
-
-export interface Form<A, I, R> {
-    readonly schema: Schema.Schema<A, I, R>
-}

packages/extension-form/src/internal/index.ts

@@ -1 +0,0 @@
-export * as Form from "./Form.js"

packages/extension-form/tsconfig.json

@@ -1,33 +0,0 @@
-{
-  "compilerOptions": {
-    // Enable latest features
-    "lib": ["ESNext", "DOM"],
-    "target": "ESNext",
-    "module": "NodeNext",
-    "moduleDetection": "force",
-    "jsx": "react-jsx",
-    // "allowJs": true,
-
-    // Bundler mode
-    "moduleResolution": "NodeNext",
-    // "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    // "noEmit": true,
-
-    // Best practices
-    "strict": true,
-    "skipLibCheck": true,
-    "noFallthroughCasesInSwitch": true,
-
-    // Some stricter flags (disabled by default)
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noPropertyAccessFromIndexSignature": false,
-
-    // Build
-    "outDir": "./dist",
-    "declaration": true
-  },
-
-  "include": ["./src"]
-}

packages/extension-lazyref/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reffuse/extension-lazyref",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "files": [
     "./README.md",
@@ -37,6 +37,6 @@
     "@types/react": "^19.0.0",
     "effect": "^3.13.0",
     "react": "^19.0.0",
-    "reffuse": "^0.1.6"
+    "reffuse": "^0.1.8"
   }
 }

packages/extension-lazyref/src/index.ts

@@ -1,16 +1,44 @@
 import * as LazyRef from "@typed/lazy-ref"
-import { Effect, Stream } from "effect"
+import { Effect, pipe, Stream } from "effect"
 import * as React from "react"
-import { ReffuseExtension, type ReffuseNamespace, SetStateAction } from "reffuse"
+import { ReffuseExtension, type ReffuseNamespace } from "reffuse"
+import { SetStateAction } from "reffuse/types"
 
 
 export const LazyRefExtension = ReffuseExtension.make(() => ({
+    useSubscribeLazyRefs<
+        const Refs extends readonly LazyRef.LazyRef<any>[],
+        R,
+    >(
+        this: ReffuseNamespace.ReffuseNamespace<R>,
+        ...refs: Refs
+    ): [...{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }] {
+        const [reactStateValue, setReactStateValue] = React.useState(this.useMemo(
+            () => Effect.all(refs as readonly LazyRef.LazyRef<any>[]),
+            [],
+            { doNotReExecuteOnRuntimeOrContextChange: true },
+        ) as [...{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }])
+
+        this.useFork(() => pipe(
+            refs.map(ref => Stream.changesWith(ref.changes, (x, y) => x === y)),
+            streams => Stream.zipLatestAll(...streams),
+            Stream.runForEach(v =>
+                Effect.sync(() => setReactStateValue(v as [...{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }]))
+            ),
+        ), refs)
+
+        return reactStateValue
+    },
+
     useLazyRefState<A, E, R>(
         this: ReffuseNamespace.ReffuseNamespace<R>,
         ref: LazyRef.LazyRef<A, E, R>,
     ): [A, React.Dispatch<React.SetStateAction<A>>] {
-        const initialState = this.useMemo(() => ref, [], { doNotReExecuteOnRuntimeOrContextChange: true })
-        const [reactStateValue, setReactStateValue] = React.useState(initialState)
+        const [reactStateValue, setReactStateValue] = React.useState(this.useMemo(
+            () => ref,
+            [],
+            { doNotReExecuteOnRuntimeOrContextChange: true },
+        ))
 
         this.useFork(() => Stream.runForEach(
             Stream.changesWith(ref.changes, (x, y) => x === y),

packages/reffuse/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reffuse",
-  "version": "0.1.6",
+  "version": "0.1.9",
   "type": "module",
   "files": [
     "./README.md",
@@ -16,6 +16,10 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/types/index.js"
+    },
     "./*": {
       "types": "./dist/*.d.ts",
       "default": "./dist/*.js"

packages/reffuse/src/Reffuse.ts

@@ -1,7 +1,7 @@
 import type * as ReffuseContext from "./ReffuseContext.js"
 import type * as ReffuseExtension from "./ReffuseExtension.js"
 import * as ReffuseNamespace from "./ReffuseNamespace.js"
-import type { Merge, StaticType } from "./types.js"
+import type { Merge, StaticType } from "./utils.js"
 
 
 export class Reffuse extends ReffuseNamespace.makeClass() {}

packages/reffuse/src/ReffuseNamespace.ts

@@ -1,8 +1,8 @@
-import { Array, type Context, Effect, ExecutionStrategy, Exit, type Fiber, type Layer, pipe, Pipeable, Queue, Ref, Runtime, Scope, Stream, SubscriptionRef } from "effect"
+import { type Context, Effect, ExecutionStrategy, Exit, type Fiber, type Layer, Option, pipe, Pipeable, Queue, Ref, Runtime, Scope, Stream, SubscriptionRef } from "effect"
 import * as React from "react"
 import * as ReffuseContext from "./ReffuseContext.js"
 import * as ReffuseRuntime from "./ReffuseRuntime.js"
-import * as SetStateAction from "./SetStateAction.js"
+import { type PropertyPath, SetStateAction, SubscriptionSubRef } from "./types/index.js"
 
 
 export interface RenderOptions {
@@ -14,13 +14,19 @@ export interface ScopeOptions {
     readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
 }
 
+export type RefsA<T extends readonly SubscriptionRef.SubscriptionRef<any>[]> = {
+    [K in keyof T]: Effect.Effect.Success<T[K]>
+}
+
 
 export abstract class ReffuseNamespace<R> {
     declare ["constructor"]: ReffuseNamespaceClass<R>
 
     constructor() {
+        this.SubRef = this.SubRef.bind(this as any) as any
         this.SubscribeRefs = this.SubscribeRefs.bind(this as any) as any
         this.RefState = this.RefState.bind(this as any) as any
+        this.SubscribeStream = this.SubscribeStream.bind(this as any) as any
     }
 
 
@@ -383,24 +389,35 @@ export abstract class ReffuseNamespace<R> {
         )
     }
 
+    useSubRef<B, const P extends PropertyPath.Paths<B>, R>(
+        this: ReffuseNamespace<R>,
+        parent: SubscriptionRef.SubscriptionRef<B>,
+        path: P,
+    ): SubscriptionSubRef.SubscriptionSubRef<PropertyPath.ValueFromPath<B, P>, B> {
+        return React.useMemo(
+            () => SubscriptionSubRef.makeFromPath(parent, path),
+            [parent],
+        )
+    }
+
     useSubscribeRefs<
         const Refs extends readonly SubscriptionRef.SubscriptionRef<any>[],
         R,
     >(
         this: ReffuseNamespace<R>,
         ...refs: Refs
-    ): [...{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }] {
+    ): RefsA<Refs> {
         const [reactStateValue, setReactStateValue] = React.useState(this.useMemo(
             () => Effect.all(refs as readonly SubscriptionRef.SubscriptionRef<any>[]),
             [],
             { doNotReExecuteOnRuntimeOrContextChange: true },
-        ) as [...{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }])
+        ) as RefsA<Refs>)
 
-        this.useFork(() => pipe(refs as readonly SubscriptionRef.SubscriptionRef<any>[],
-            Array.map(ref => Stream.changesWith(ref.changes, (x, y) => x === y)),
+        this.useFork(() => pipe(
+            refs.map(ref => Stream.changesWith(ref.changes, (x, y) => x === y)),
             streams => Stream.zipLatestAll(...streams),
             Stream.runForEach(v =>
-                Effect.sync(() => setReactStateValue(v as [...{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }]))
+                Effect.sync(() => setReactStateValue(v as RefsA<Refs>))
             ),
         ), refs)
 
@@ -418,8 +435,11 @@ export abstract class ReffuseNamespace<R> {
         this: ReffuseNamespace<R>,
         ref: SubscriptionRef.SubscriptionRef<A>,
     ): [A, React.Dispatch<React.SetStateAction<A>>] {
-        const initialState = this.useMemo(() => ref, [], { doNotReExecuteOnRuntimeOrContextChange: true })
-        const [reactStateValue, setReactStateValue] = React.useState(initialState)
+        const [reactStateValue, setReactStateValue] = React.useState(this.useMemo(
+            () => ref,
+            [],
+            { doNotReExecuteOnRuntimeOrContextChange: true },
+        ))
 
         this.useFork(() => Stream.runForEach(
             Stream.changesWith(ref.changes, (x, y) => x === y),
@@ -448,6 +468,32 @@ export abstract class ReffuseNamespace<R> {
         return stream
     }
 
+    useSubscribeStream<A, InitialA extends A | undefined, E, R>(
+        this: ReffuseNamespace<R>,
+        stream: Stream.Stream<A, E, R>,
+        initialValue?: InitialA,
+    ): InitialA extends A ? Option.Some<A> : Option.Option<A> {
+        const [reactStateValue, setReactStateValue] = React.useState<Option.Option<A>>(Option.fromNullable(initialValue))
+
+        this.useFork(() => Stream.runForEach(
+            Stream.changesWith(stream, (x, y) => x === y),
+            v => Effect.sync(() => setReactStateValue(Option.some(v))),
+        ), [stream])
+
+        return reactStateValue as InitialA extends A ? Option.Some<A> : Option.Option<A>
+    }
+
+
+    SubRef<B, const P extends PropertyPath.Paths<B>, R>(
+        this: ReffuseNamespace<R>,
+        props: {
+            readonly parent: SubscriptionRef.SubscriptionRef<B>,
+            readonly path: P,
+            readonly children: (subRef: SubscriptionSubRef.SubscriptionSubRef<PropertyPath.ValueFromPath<B, P>, B>) => React.ReactNode
+        },
+    ): React.ReactNode {
+        return props.children(this.useSubRef(props.parent, props.path))
+    }
 
     SubscribeRefs<
         const Refs extends readonly SubscriptionRef.SubscriptionRef<any>[],
@@ -456,7 +502,7 @@ export abstract class ReffuseNamespace<R> {
         this: ReffuseNamespace<R>,
         props: {
             readonly refs: Refs
-            readonly children: (...args: [...{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }]) => React.ReactNode
+            readonly children: (...args: RefsA<Refs>) => React.ReactNode
         },
     ): React.ReactNode {
         return props.children(...this.useSubscribeRefs(...props.refs))
@@ -471,6 +517,17 @@ export abstract class ReffuseNamespace<R> {
     ): React.ReactNode {
         return props.children(this.useRefState(props.ref))
     }
+
+    SubscribeStream<A, InitialA extends A | undefined, E, R>(
+        this: ReffuseNamespace<R>,
+        props: {
+            readonly stream: Stream.Stream<A, E, R>
+            readonly initialValue?: InitialA
+            readonly children: (latestValue: InitialA extends A ? Option.Some<A> : Option.Option<A>) => React.ReactNode
+        },
+    ): React.ReactNode {
+        return props.children(this.useSubscribeStream(props.stream, props.initialValue))
+    }
 }
 
 

packages/reffuse/src/index.ts

@@ -3,4 +3,3 @@ export * as ReffuseContext from "./ReffuseContext.js"
 export * as ReffuseExtension from "./ReffuseExtension.js"
 export * as ReffuseNamespace from "./ReffuseNamespace.js"
 export * as ReffuseRuntime from "./ReffuseRuntime.js"
-export * as SetStateAction from "./SetStateAction.js"

packages/reffuse/src/types/PropertyPath.ts

@@ -0,0 +1,94 @@
+import { Array, Function, Option, Predicate } from "effect"
+
+
+export type Paths<T> = [] | (
+    T extends readonly any[] ? ArrayPaths<T> :
+    T extends object ? ObjectPaths<T> :
+    never
+)
+
+export type ArrayPaths<T extends readonly any[]> = {
+    [K in keyof T as K extends number ? K : never]:
+        | [K]
+        | [K, ...Paths<T[K]>]
+} extends infer O
+    ? O[keyof O]
+    : never
+
+export type ObjectPaths<T extends object> = {
+    [K in keyof T as K extends string | number | symbol ? K : never]:
+        | [K]
+        | [K, ...Paths<T[K]>]
+} extends infer O
+    ? O[keyof O]
+    : never
+
+export type ValueFromPath<T, P extends any[]> = P extends [infer Head, ...infer Tail]
+    ? Head extends keyof T
+        ? ValueFromPath<T[Head], Tail>
+        : T extends readonly any[]
+            ? Head extends number
+                ? ValueFromPath<T[number], Tail>
+                : never
+            : never
+    : T
+
+export type AnyKey = string | number | symbol
+export type AnyPath = readonly AnyKey[]
+
+
+export const unsafeGet: {
+    <T, const P extends Paths<T>>(path: P): (self: T) => ValueFromPath<T, P>
+    <T, const P extends Paths<T>>(self: T, path: P): ValueFromPath<T, P>
+} = Function.dual(2, <T, const P extends Paths<T>>(self: T, path: P): ValueFromPath<T, P> =>
+    path.reduce((acc: any, key: any) => acc?.[key], self)
+)
+
+export const get: {
+    <T, const P extends Paths<T>>(path: P): (self: T) => Option.Option<ValueFromPath<T, P>>
+    <T, const P extends Paths<T>>(self: T, path: P): Option.Option<ValueFromPath<T, P>>
+} = Function.dual(2, <T, const P extends Paths<T>>(self: T, path: P): Option.Option<ValueFromPath<T, P>> =>
+    path.reduce(
+        (acc: Option.Option<any>, key: any): Option.Option<any> => Option.isSome(acc)
+            ? Predicate.hasProperty(acc.value, key)
+                ? Option.some(acc.value[key])
+                : Option.none()
+            : acc,
+
+        Option.some(self),
+    )
+)
+
+export const immutableSet: {
+    <T, const P extends Paths<T>>(path: P, value: ValueFromPath<T, P>): (self: T) => ValueFromPath<T, P>
+    <T, const P extends Paths<T>>(self: T, path: P, value: ValueFromPath<T, P>): Option.Option<T>
+} = Function.dual(3, <T, const P extends Paths<T>>(self: T, path: P, value: ValueFromPath<T, P>): Option.Option<T> => {
+    const key = Array.head(path as AnyPath)
+    if (Option.isNone(key))
+        return Option.some(value as T)
+    if (!Predicate.hasProperty(self, key.value))
+        return Option.none()
+
+    const child = immutableSet<any, any>(self[key.value], Option.getOrThrow(Array.tail(path as AnyPath)), value)
+    if (Option.isNone(child))
+        return child
+
+    if (Array.isArray(self))
+        return typeof key.value === "number"
+            ? Option.some([
+                ...self.slice(0, key.value),
+                child.value,
+                ...self.slice(key.value + 1),
+            ] as T)
+            : Option.none()
+
+    if (typeof self === "object")
+        return Option.some(
+            Object.assign(
+                Object.create(Object.getPrototypeOf(self)),
+                { ...self, [key.value]: child.value },
+            )
+        )
+
+    return Option.none()
+})

packages/reffuse/src/types/SubscriptionSubRef.ts

@@ -0,0 +1,100 @@
+import { Effect, Effectable, Option, Readable, Ref, Stream, Subscribable, SubscriptionRef, SynchronizedRef, type Types, type Unify } from "effect"
+import * as PropertyPath from "./PropertyPath.js"
+
+
+export const SubscriptionSubRefTypeId: unique symbol = Symbol.for("reffuse/types/SubscriptionSubRef")
+export type SubscriptionSubRefTypeId = typeof SubscriptionSubRefTypeId
+
+export interface SubscriptionSubRef<in out A, in out B> extends SubscriptionSubRef.Variance<A, B>, SubscriptionRef.SubscriptionRef<A> {
+    readonly parent: SubscriptionRef.SubscriptionRef<B>
+
+    readonly [Unify.typeSymbol]?: unknown
+    readonly [Unify.unifySymbol]?: SubscriptionSubRefUnify<this>
+    readonly [Unify.ignoreSymbol]?: SubscriptionSubRefUnifyIgnore
+}
+
+export declare namespace SubscriptionSubRef {
+    export interface Variance<in out A, in out B> {
+        readonly [SubscriptionSubRefTypeId]: {
+            readonly _A: Types.Invariant<A>
+            readonly _B: Types.Invariant<B>
+        }
+    }
+}
+
+export interface SubscriptionSubRefUnify<A extends { [Unify.typeSymbol]?: any }> extends SubscriptionRef.SubscriptionRefUnify<A> {
+    SubscriptionSubRef?: () => Extract<A[Unify.typeSymbol], SubscriptionSubRef<any, any>>
+}
+
+export interface SubscriptionSubRefUnifyIgnore extends SubscriptionRef.SubscriptionRefUnifyIgnore {
+    SubscriptionRef?: true
+}
+
+
+const refVariance = { _A: (_: any) => _ }
+const synchronizedRefVariance = { _A: (_: any) => _ }
+const subscriptionRefVariance = { _A: (_: any) => _ }
+const subscriptionSubRefVariance = { _A: (_: any) => _, _B: (_: any) => _ }
+
+class SubscriptionSubRefImpl<in out A, in out B> extends Effectable.Class<A> implements SubscriptionSubRef<A, B> {
+    readonly [Readable.TypeId]: Readable.TypeId = Readable.TypeId
+    readonly [Subscribable.TypeId]: Subscribable.TypeId = Subscribable.TypeId
+    readonly [Ref.RefTypeId] = refVariance
+    readonly [SynchronizedRef.SynchronizedRefTypeId] = synchronizedRefVariance
+    readonly [SubscriptionRef.SubscriptionRefTypeId] = subscriptionRefVariance
+    readonly [SubscriptionSubRefTypeId] = subscriptionSubRefVariance
+
+    readonly get: Effect.Effect<A>
+
+    constructor(
+        readonly parent: SubscriptionRef.SubscriptionRef<B>,
+        readonly getter: (parentValue: B) => A,
+        readonly setter: (parentValue: B, value: A) => B,
+    ) {
+        super()
+        this.get = Ref.get(this.parent).pipe(Effect.map(this.getter))
+    }
+
+    commit() {
+        return this.get
+    }
+
+    get changes(): Stream.Stream<A> {
+        return this.get.pipe(
+            Effect.map(a => this.parent.changes.pipe(
+                Stream.map(this.getter),
+                s => Stream.concat(Stream.make(a), s),
+            )),
+            Stream.unwrap,
+        )
+    }
+
+    modify<C>(f: (a: A) => readonly [C, A]): Effect.Effect<C> {
+        return this.modifyEffect(a => Effect.succeed(f(a)))
+    }
+
+    modifyEffect<C, E, R>(f: (a: A) => Effect.Effect<readonly [C, A], E, R>): Effect.Effect<C, E, R> {
+        return Effect.Do.pipe(
+            Effect.bind("b", () => Ref.get(this.parent)),
+            Effect.bind("ca", ({ b }) => f(this.getter(b))),
+            Effect.tap(({ b, ca: [, a] }) => Ref.set(this.parent, this.setter(b, a))),
+            Effect.map(({ ca: [c] }) => c),
+        )
+    }
+}
+
+
+export const makeFromGetSet = <A, B>(
+    parent: SubscriptionRef.SubscriptionRef<B>,
+    getter: (parentValue: B) => A,
+    setter: (parentValue: B, value: A) => B,
+): SubscriptionSubRef<A, B> => new SubscriptionSubRefImpl(parent, getter, setter)
+
+export const makeFromPath = <B, const P extends PropertyPath.Paths<B>>(
+    parent: SubscriptionRef.SubscriptionRef<B>,
+    path: P,
+): SubscriptionSubRef<PropertyPath.ValueFromPath<B, P>, B> => new SubscriptionSubRefImpl(
+    parent,
+    parentValue => Option.getOrThrow(PropertyPath.get(parentValue, path)),
+    (parentValue, value) => Option.getOrThrow(PropertyPath.immutableSet(parentValue, path, value)),
+)

packages/reffuse/src/types/index.ts

@@ -0,0 +1,3 @@
+export * as PropertyPath from "./PropertyPath.js"
+export * as SetStateAction from "./SetStateAction.js"
+export * as SubscriptionSubRef from "./SubscriptionSubRef.js"