Hooks

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

bun.lock

@@ -10,6 +10,18 @@
         "typescript": "^5.8.3",
       },
     },
+    "packages/effect-components": {
+      "name": "effect-components",
+      "version": "0.1.0",
+      "devDependencies": {
+        "@effect/language-service": "^0.23.3",
+      },
+      "peerDependencies": {
+        "@types/react": "^19.0.0",
+        "effect": "^3.15.0",
+        "react": "^19.0.0",
+      },
+    },
     "packages/example": {
       "name": "@reffuse/example",
       "version": "0.0.0",
@@ -62,7 +74,7 @@
     },
     "packages/extension-query": {
       "name": "@reffuse/extension-query",
-      "version": "0.1.3",
+      "version": "0.1.5",
       "devDependencies": {
         "reffuse": "workspace:*",
       },
@@ -78,7 +90,7 @@
     },
     "packages/reffuse": {
       "name": "reffuse",
-      "version": "0.1.11",
+      "version": "0.1.13",
       "peerDependencies": {
         "@types/react": "^19.0.0",
         "effect": "^3.15.0",
@@ -129,6 +141,8 @@
 
     "@babel/types": ["@babel/types@7.27.1", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1" } }, "sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q=="],
 
+    "@effect/language-service": ["@effect/language-service@0.23.3", "", {}, "sha512-yurF+FHd1HwM/3Mh7kQCea+z4wvbs2/NLPyk6FiEWA2sppRKv4Kp4luwfUqWqyd9/uyScWJcHX7WK1caLpx4Pw=="],
+
     "@effect/platform": ["@effect/platform@0.82.1", "", { "dependencies": { "find-my-way-ts": "^0.1.5", "msgpackr": "^1.11.2", "multipasta": "^0.2.5" }, "peerDependencies": { "effect": "^3.15.1" } }, "sha512-fX5Lu//VkLXPegouxT1AdSyuRkxF55k70YaLV0vIzjgK97/u3Mow0ux8fYglm2dWDXWTLBkNprlhheGm/5/bvQ=="],
 
     "@effect/platform-browser": ["@effect/platform-browser@0.62.1", "", { "dependencies": { "multipasta": "^0.2.5" }, "peerDependencies": { "@effect/platform": "^0.82.1", "effect": "^3.15.1" } }, "sha512-+aioMY5OsD9SQc7S88yv6tlWpkKhbA5Dv3lDs4CXQbRL5TWuHjzzDGpFNRhCBdv5ouAjoBAzu2Zi4+HIaWYqHQ=="],
@@ -573,6 +587,8 @@
 
     "effect": ["effect@3.15.1", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "fast-check": "^3.23.1" } }, "sha512-n3bDF6K3R+FSVuH+dSVU3ya2pI4Wt/tnKzum3DC/3b5e0E9HfhrhbkonOkYU3AVJJOzCA6zZE2/y6EUgQNAY4g=="],
 
+    "effect-components": ["effect-components@workspace:packages/effect-components"],
+
     "electron-to-chromium": ["electron-to-chromium@1.5.152", "", {}, "sha512-xBOfg/EBaIlVsHipHl2VdTPJRSvErNUaqW8ejTq5OlOlIYx1wOllCHsAvAIrr55jD1IYEfdR86miUEt8H5IeJg=="],
 
     "encodeurl": ["encodeurl@2.0.0", "", {}, "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="],

packages/effect-components/README.md

@@ -0,0 +1,11 @@
+# Reffuse
+
+[Effect-TS](https://effect.website/) integration for React 19+ with the aim of integrating the Effect context system within React's component hierarchy, while avoiding touching React's internals.
+
+This library is in early development. While it is (almost) feature complete and mostly usable, expect bugs and quirks. Things are still being ironed out, so ideas and criticisms are more than welcome.
+
+Documentation is currently being written. In the meantime, you can take a look at the `packages/example` directory.
+
+## Peer dependencies
+- `effect` 3.13+
+- `react` & `@types/react` 19+

packages/effect-components/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "effect-components",
+  "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": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/types/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"
+  },
+  "peerDependencies": {
+    "@types/react": "^19.0.0",
+    "effect": "^3.15.0",
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@effect/language-service": "^0.23.3"
+  }
+}

packages/effect-components/src/ReactComponent.ts

@@ -0,0 +1,72 @@
+import { Context, Effect, Function, Runtime, Scope, Tracer } from "effect"
+import type { Mutable } from "effect/Types"
+import * as React from "react"
+import * as ReactHook from "./ReactHook.js"
+
+
+export interface ReactComponent<E, R, P> {
+    (props: P): Effect.Effect<React.ReactNode, E, R>
+    readonly displayName?: string
+}
+
+export const nonReactiveTags = [Tracer.ParentSpan] as const
+
+export const withDisplayName: {
+    <C extends ReactComponent<any, any, any>>(displayName: string): (self: C) => C
+    <C extends ReactComponent<any, any, any>>(self: C, displayName: string): C
+} = Function.dual(2, <C extends ReactComponent<any, any, any>>(
+    self: C,
+    displayName: string,
+): C => {
+    (self as Mutable<C>).displayName = displayName
+    return self
+})
+
+export const useFC: {
+    <E, R, P extends {} = {}>(
+        self: ReactComponent<E, R, P>,
+        options?: ReactHook.ScopeOptions,
+    ): Effect.Effect<React.FC<P>, never, Exclude<R, Scope.Scope>>
+} = Effect.fnUntraced(function* <E, R, P extends {}>(
+    self: ReactComponent<E, R, P>,
+    options?: ReactHook.ScopeOptions,
+) {
+    const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
+
+    return React.useMemo(() => function ScopeProvider(props: P) {
+        const scope = Runtime.runSync(runtime)(ReactHook.useScope(options))
+
+        const FC = React.useMemo(() => {
+            const f = (props: P) => Runtime.runSync(runtime)(
+                Effect.provideService(self(props), Scope.Scope, scope)
+            )
+            if (self.displayName) f.displayName = self.displayName
+            return f
+        }, [scope])
+
+        return React.createElement(FC, props)
+    }, Array.from(
+        Context.omit(...nonReactiveTags)(runtime.context).unsafeMap.values()
+    ))
+})
+
+export const use: {
+    <E, R, P extends {} = {}>(
+        self: ReactComponent<E, R, P>,
+        fn: (Component: React.FC<P>) => React.ReactNode,
+        options?: ReactHook.ScopeOptions,
+    ): Effect.Effect<React.ReactNode, never, Exclude<R, Scope.Scope>>
+} = Effect.fnUntraced(function*(self, fn, options) {
+    return fn(yield* useFC(self, options))
+})
+
+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>
+} = Function.dual(2, <E, R, P extends {}>(
+    self: ReactComponent<E, R, P>,
+    context: React.Context<Runtime.Runtime<R>>,
+): React.FC<P> => function WithRuntime(props) {
+    const runtime = React.useContext(context)
+    return React.createElement(Runtime.runSync(runtime)(useFC(self)), props)
+})

packages/effect-components/src/ReactHook.ts

@@ -0,0 +1,317 @@
+import { type Context, Effect, ExecutionStrategy, Exit, type Layer, Option, pipe, PubSub, Ref, Runtime, Scope, Stream, SubscriptionRef } from "effect"
+import * as React from "react"
+import { SetStateAction } from "./types/index.js"
+
+
+export interface ScopeOptions {
+    readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
+    readonly finalizerExecutionMode?: "sync" | "fork"
+}
+
+
+export const useScope: {
+    (options?: ScopeOptions): Effect.Effect<Scope.Scope>
+} = Effect.fnUntraced(function* (options?: ScopeOptions) {
+    const runtime = yield* Effect.runtime()
+
+    const [isInitialRun, initialScope] = React.useMemo(() => Runtime.runSync(runtime)(
+        Effect.all([Ref.make(true), makeScope(options)])
+    ), [])
+    const [scope, setScope] = React.useState(initialScope)
+
+    React.useEffect(() => Runtime.runSync(runtime)(
+        Effect.if(isInitialRun, {
+            onTrue: () => Effect.as(
+                Ref.set(isInitialRun, false),
+                () => closeScope(scope, runtime, options),
+            ),
+
+            onFalse: () => makeScope(options).pipe(
+                Effect.tap(scope => Effect.sync(() => setScope(scope))),
+                Effect.map(scope => () => closeScope(scope, runtime, options)),
+            ),
+        })
+    ), [])
+
+    return scope
+})
+
+const makeScope = (options?: ScopeOptions) => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)
+const closeScope = (
+    scope: Scope.CloseableScope,
+    runtime: Runtime.Runtime<never>,
+    options?: ScopeOptions,
+) => {
+    switch (options?.finalizerExecutionMode ?? "sync") {
+        case "sync":
+            Runtime.runSync(runtime)(Scope.close(scope, Exit.void))
+            break
+        case "fork":
+            Runtime.runFork(runtime)(Scope.close(scope, Exit.void))
+            break
+    }
+}
+
+
+export const useMemo: {
+    <A, E, R>(
+        factory: () => Effect.Effect<A, E, R>,
+        deps: React.DependencyList,
+    ): Effect.Effect<A, E, R>
+} = Effect.fnUntraced(function* <A, E, R>(
+    factory: () => Effect.Effect<A, E, R>,
+    deps: React.DependencyList,
+) {
+    const runtime = yield* Effect.runtime()
+    return yield* React.useMemo(() => Runtime.runSync(runtime)(Effect.cached(factory())), deps)
+})
+
+export const useOnce: {
+    <A, E, R>(factory: () => Effect.Effect<A, E, R>): Effect.Effect<A, E, R>
+} = Effect.fnUntraced(function* <A, E, R>(
+    factory: () => Effect.Effect<A, E, R>
+) {
+    return yield* useMemo(factory, [])
+})
+
+export const useMemoLayer: {
+    <ROut, E, RIn>(
+        layer: Layer.Layer<ROut, E, RIn>
+    ): Effect.Effect<Context.Context<ROut>, E, RIn>
+} = Effect.fnUntraced(function* <ROut, E, RIn>(
+    layer: Layer.Layer<ROut, E, RIn>
+) {
+    return yield* useMemo(() => Effect.provide(Effect.context<ROut>(), layer), [layer])
+})
+
+
+export const useCallbackSync: {
+    <Args extends unknown[], A, E, R>(
+        callback: (...args: Args) => Effect.Effect<A, E, R>,
+        deps: React.DependencyList,
+    ): Effect.Effect<(...args: Args) => A, never, R>
+} = Effect.fnUntraced(function* <Args extends unknown[], A, E, R>(
+    callback: (...args: Args) => Effect.Effect<A, E, R>,
+    deps: React.DependencyList,
+) {
+    const runtime = yield* Effect.runtime<R>()
+    return React.useCallback((...args: Args) => Runtime.runSync(runtime)(callback(...args)), deps)
+})
+
+export const useCallbackPromise: {
+    <Args extends unknown[], A, E, R>(
+        callback: (...args: Args) => Effect.Effect<A, E, R>,
+        deps: React.DependencyList,
+    ): Effect.Effect<(...args: Args) => Promise<A>, never, R>
+} = Effect.fnUntraced(function* <Args extends unknown[], A, E, R>(
+    callback: (...args: Args) => Effect.Effect<A, E, R>,
+    deps: React.DependencyList,
+) {
+    const runtime = yield* Effect.runtime<R>()
+    return React.useCallback((...args: Args) => Runtime.runPromise(runtime)(callback(...args)), deps)
+})
+
+
+export const useEffect: {
+    <E, R>(
+        effect: () => Effect.Effect<void, E, R>,
+        deps?: React.DependencyList,
+        options?: ScopeOptions,
+    ): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
+} = Effect.fnUntraced(function* <E, R>(
+    effect: () => Effect.Effect<void, E, R>,
+    deps?: React.DependencyList,
+    options?: ScopeOptions,
+) {
+    const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
+
+    React.useEffect(() => {
+        const { scope, exit } = Effect.Do.pipe(
+            Effect.bind("scope", () => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)),
+            Effect.bind("exit", ({ scope }) => Effect.exit(Effect.provideService(effect(), Scope.Scope, scope))),
+            Runtime.runSync(runtime),
+        )
+
+        return () => {
+            switch (options?.finalizerExecutionMode ?? "sync") {
+                case "sync":
+                    Runtime.runSync(runtime)(Scope.close(scope, exit))
+                    break
+                case "fork":
+                    Runtime.runFork(runtime)(Scope.close(scope, exit))
+                    break
+            }
+        }
+    }, deps)
+})
+
+export const useLayoutEffect: {
+    <E, R>(
+        effect: () => Effect.Effect<void, E, R>,
+        deps?: React.DependencyList,
+        options?: ScopeOptions,
+    ): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
+} = Effect.fnUntraced(function* <E, R>(
+    effect: () => Effect.Effect<void, E, R>,
+    deps?: React.DependencyList,
+    options?: ScopeOptions,
+) {
+    const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
+
+    React.useLayoutEffect(() => {
+        const { scope, exit } = Effect.Do.pipe(
+            Effect.bind("scope", () => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)),
+            Effect.bind("exit", ({ scope }) => Effect.exit(Effect.provideService(effect(), Scope.Scope, scope))),
+            Runtime.runSync(runtime),
+        )
+
+        return () => {
+            switch (options?.finalizerExecutionMode ?? "sync") {
+                case "sync":
+                    Runtime.runSync(runtime)(Scope.close(scope, exit))
+                    break
+                case "fork":
+                    Runtime.runFork(runtime)(Scope.close(scope, exit))
+                    break
+            }
+        }
+    }, 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 useRefFromReactiveValue: {
+    <A>(value: A): Effect.Effect<SubscriptionRef.SubscriptionRef<A>>
+} = Effect.fnUntraced(function*(value) {
+    const ref = yield* useOnce(() => SubscriptionRef.make(value))
+    yield* useEffect(() => Ref.set(ref, value), [value])
+    return ref
+})
+
+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
+})
+
+export const useRefState: {
+    <A>(
+        ref: SubscriptionRef.SubscriptionRef<A>
+    ): Effect.Effect<readonly [A, React.Dispatch<React.SetStateAction<A>>]>
+} = Effect.fnUntraced(function* <A>(ref: SubscriptionRef.SubscriptionRef<A>) {
+    const [reactStateValue, setReactStateValue] = React.useState(yield* useOnce(() => ref))
+
+    yield* useFork(() => Stream.runForEach(
+        Stream.changesWith(ref.changes, (x, y) => x === y),
+        v => Effect.sync(() => setReactStateValue(v)),
+    ), [ref])
+
+    const setValue = yield* useCallbackSync((setStateAction: React.SetStateAction<A>) =>
+        Ref.update(ref, prevState =>
+            SetStateAction.value(setStateAction, prevState)
+        ),
+    [ref])
+
+    return [reactStateValue, setValue]
+})
+
+
+export const useStreamFromReactiveValues: {
+    <const A extends React.DependencyList>(
+        values: A
+    ): Effect.Effect<Stream.Stream<A>, never, Scope.Scope>
+} = Effect.fnUntraced(function* <const A extends React.DependencyList>(values: A) {
+    const { latest, pubsub, stream } = yield* useOnce(() => Effect.Do.pipe(
+        Effect.bind("latest", () => Ref.make(values)),
+        Effect.bind("pubsub", () => Effect.acquireRelease(PubSub.unbounded<A>(), PubSub.shutdown)),
+        Effect.let("stream", ({ latest, pubsub }) => latest.pipe(
+            Effect.flatMap(a => Effect.map(
+                Stream.fromPubSub(pubsub, { scoped: true }),
+                s => Stream.concat(Stream.make(a), s),
+            )),
+            Stream.unwrapScoped,
+        )),
+    ))
+
+    yield* useEffect(() => Ref.set(latest, values).pipe(
+        Effect.andThen(PubSub.publish(pubsub, values)),
+        Effect.unlessEffect(PubSub.isShutdown(pubsub)),
+    ), values)
+
+    return stream
+})
+
+export const useSubscribeStream: {
+    <A, E, R>(
+        stream: Stream.Stream<A, E, R>
+    ): Effect.Effect<Option.Option<A>, never, R>
+    <A extends NonNullable<unknown>, E, R>(
+        stream: Stream.Stream<A, E, R>,
+        initialValue: A,
+    ): Effect.Effect<Option.Some<A>, never, R>
+} = Effect.fnUntraced(function* <A extends NonNullable<unknown>, E, R>(
+    stream: Stream.Stream<A, E, R>,
+    initialValue?: A,
+) {
+    const [reactStateValue, setReactStateValue] = React.useState(
+        React.useMemo(() => initialValue
+            ? Option.some(initialValue)
+            : Option.none(),
+        [])
+    )
+
+    yield* useFork(() => Stream.runForEach(
+        Stream.changesWith(stream, (x, y) => x === y),
+        v => Effect.sync(() => setReactStateValue(Option.some(v))),
+    ), [stream])
+
+    return reactStateValue as Option.Some<A>
+})

packages/effect-components/src/ReactManagedRuntime.ts

@@ -0,0 +1,47 @@
+import { Effect, type Layer, ManagedRuntime, type Runtime } from "effect"
+import * as React from "react"
+
+
+export interface ReactManagedRuntime<R, ER> {
+    readonly runtime: ManagedRuntime.ManagedRuntime<R, ER>
+    readonly context: React.Context<Runtime.Runtime<R>>
+}
+
+export const make = <R, ER>(
+    layer: Layer.Layer<R, ER>,
+    memoMap?: Layer.MemoMap,
+): ReactManagedRuntime<R, ER> => ({
+    runtime: ManagedRuntime.make(layer, memoMap),
+    context: React.createContext<Runtime.Runtime<R>>(null!),
+})
+
+
+export interface AsyncProviderProps<R, ER> extends React.SuspenseProps {
+    readonly runtime: ReactManagedRuntime<R, ER>
+    readonly children?: React.ReactNode
+}
+
+export function AsyncProvider<R, ER>(
+    { runtime, children, ...suspenseProps }: AsyncProviderProps<R, ER>
+): React.ReactNode {
+    const promise = React.useMemo(() => Effect.runPromise(runtime.runtime.runtimeEffect), [runtime])
+
+    return React.createElement(
+        React.Suspense,
+        suspenseProps,
+        React.createElement(AsyncProviderInner<R, ER>, { runtime, promise, children }),
+    )
+}
+
+interface AsyncProviderInnerProps<R, ER> {
+    readonly runtime: ReactManagedRuntime<R, ER>
+    readonly promise: Promise<Runtime.Runtime<R>>
+    readonly children?: React.ReactNode
+}
+
+function AsyncProviderInner<R, ER>(
+    { runtime, promise, children }: AsyncProviderInnerProps<R, ER>
+): React.ReactNode {
+    const value = React.use(promise)
+    return React.createElement(runtime.context, { value }, children)
+}

packages/effect-components/src/index.ts

@@ -0,0 +1,3 @@
+export * as ReactComponent from "./ReactComponent.js"
+export * as ReactHook from "./ReactHook.js"
+export * as ReactManagedRuntime from "./ReactManagedRuntime.js"

packages/effect-components/src/types/PropertyPath.ts

@@ -0,0 +1,99 @@
+import { Array, Function, Option, Predicate } from "effect"
+
+
+type Prev = readonly [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+
+export type Paths<T, D extends number = 5, Seen = never> = [] | (
+    D extends never ? [] :
+    T extends Seen ? [] :
+    T extends readonly any[] ? ArrayPaths<T, D, Seen | T> :
+    T extends object ? ObjectPaths<T, D, Seen | T> :
+    never
+)
+
+export type ArrayPaths<T extends readonly any[], D extends number, Seen> = {
+    [K in keyof T as K extends number ? K : never]:
+        | [K]
+        | [K, ...Paths<T[K], Prev[D], Seen>]
+} extends infer O
+    ? O[keyof O]
+    : never
+
+export type ObjectPaths<T extends object, D extends number, Seen> = {
+    [K in keyof T as K extends string | number | symbol ? K : never]-?:
+        NonNullable<T[K]> extends infer V
+            ? [K] | [K, ...Paths<V, Prev[D], Seen>]
+            : never
+} 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/effect-components/src/types/SetStateAction.ts

@@ -0,0 +1,12 @@
+import { Function } from "effect"
+import type * as React from "react"
+
+
+export const value: {
+    <S>(prevState: S): (self: React.SetStateAction<S>) => S
+    <S>(self: React.SetStateAction<S>, prevState: S): S
+} = Function.dual(2, <S>(self: React.SetStateAction<S>, prevState: S): S =>
+    typeof self === "function"
+        ? (self as (prevState: S) => S)(prevState)
+        : self
+)

packages/effect-components/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 = Effect.map(Ref.get(this.parent), 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/effect-components/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"

packages/effect-components/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "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/example/src/routeTree.gen.ts

@@ -16,6 +16,7 @@ import { Route as TimeImport } from './routes/time'
 import { Route as TestsImport } from './routes/tests'
 import { Route as PromiseImport } from './routes/promise'
 import { Route as LazyrefImport } from './routes/lazyref'
+import { Route as EffectComponentTestsImport } from './routes/effect-component-tests'
 import { Route as CountImport } from './routes/count'
 import { Route as BlankImport } from './routes/blank'
 import { Route as IndexImport } from './routes/index'
@@ -56,6 +57,12 @@ const LazyrefRoute = LazyrefImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const EffectComponentTestsRoute = EffectComponentTestsImport.update({
+  id: '/effect-component-tests',
+  path: '/effect-component-tests',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const CountRoute = CountImport.update({
   id: '/count',
   path: '/count',
@@ -123,6 +130,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof CountImport
       parentRoute: typeof rootRoute
     }
+    '/effect-component-tests': {
+      id: '/effect-component-tests'
+      path: '/effect-component-tests'
+      fullPath: '/effect-component-tests'
+      preLoaderRoute: typeof EffectComponentTestsImport
+      parentRoute: typeof rootRoute
+    }
     '/lazyref': {
       id: '/lazyref'
       path: '/lazyref'
@@ -195,6 +209,7 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/blank': typeof BlankRoute
   '/count': typeof CountRoute
+  '/effect-component-tests': typeof EffectComponentTestsRoute
   '/lazyref': typeof LazyrefRoute
   '/promise': typeof PromiseRoute
   '/tests': typeof TestsRoute
@@ -210,6 +225,7 @@ export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/blank': typeof BlankRoute
   '/count': typeof CountRoute
+  '/effect-component-tests': typeof EffectComponentTestsRoute
   '/lazyref': typeof LazyrefRoute
   '/promise': typeof PromiseRoute
   '/tests': typeof TestsRoute
@@ -226,6 +242,7 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/blank': typeof BlankRoute
   '/count': typeof CountRoute
+  '/effect-component-tests': typeof EffectComponentTestsRoute
   '/lazyref': typeof LazyrefRoute
   '/promise': typeof PromiseRoute
   '/tests': typeof TestsRoute
@@ -243,6 +260,7 @@ export interface FileRouteTypes {
     | '/'
     | '/blank'
     | '/count'
+    | '/effect-component-tests'
     | '/lazyref'
     | '/promise'
     | '/tests'
@@ -257,6 +275,7 @@ export interface FileRouteTypes {
     | '/'
     | '/blank'
     | '/count'
+    | '/effect-component-tests'
     | '/lazyref'
     | '/promise'
     | '/tests'
@@ -271,6 +290,7 @@ export interface FileRouteTypes {
     | '/'
     | '/blank'
     | '/count'
+    | '/effect-component-tests'
     | '/lazyref'
     | '/promise'
     | '/tests'
@@ -287,6 +307,7 @@ export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   BlankRoute: typeof BlankRoute
   CountRoute: typeof CountRoute
+  EffectComponentTestsRoute: typeof EffectComponentTestsRoute
   LazyrefRoute: typeof LazyrefRoute
   PromiseRoute: typeof PromiseRoute
   TestsRoute: typeof TestsRoute
@@ -302,6 +323,7 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   BlankRoute: BlankRoute,
   CountRoute: CountRoute,
+  EffectComponentTestsRoute: EffectComponentTestsRoute,
   LazyrefRoute: LazyrefRoute,
   PromiseRoute: PromiseRoute,
   TestsRoute: TestsRoute,
@@ -326,6 +348,7 @@ export const routeTree = rootRoute
         "/",
         "/blank",
         "/count",
+        "/effect-component-tests",
         "/lazyref",
         "/promise",
         "/tests",
@@ -346,6 +369,9 @@ export const routeTree = rootRoute
     "/count": {
       "filePath": "count.tsx"
     },
+    "/effect-component-tests": {
+      "filePath": "effect-component-tests.tsx"
+    },
     "/lazyref": {
       "filePath": "lazyref.tsx"
     },

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

@@ -0,0 +1,105 @@
+import { Box, TextField } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { Array, Console, Effect, Layer, pipe, Ref, Runtime, SubscriptionRef } from "effect"
+import { ReactComponent, ReactHook, ReactManagedRuntime } from "effect-components"
+
+
+const LogLive = Layer.scopedDiscard(Effect.acquireRelease(
+    Console.log("Runtime built."),
+    () => Console.log("Runtime destroyed."),
+))
+
+class TestService extends Effect.Service<TestService>()("TestService", {
+    effect: Effect.bind(Effect.Do, "ref", () => SubscriptionRef.make("value")),
+}) {}
+
+class SubService extends Effect.Service<SubService>()("SubService", {
+    effect: Effect.bind(Effect.Do, "ref", () => SubscriptionRef.make("subvalue")),
+}) {}
+
+const runtime = ReactManagedRuntime.make(Layer.empty.pipe(
+    Layer.provideMerge(LogLive),
+    Layer.provideMerge(TestService.Default),
+))
+
+
+export const Route = createFileRoute("/effect-component-tests")({
+    component: RouteComponent,
+})
+
+function RouteComponent() {
+    return (
+        <ReactManagedRuntime.AsyncProvider runtime={runtime}>
+            <MyRoute />
+        </ReactManagedRuntime.AsyncProvider>
+    )
+}
+
+const MyRoute = pipe(
+    Effect.fn(function*() {
+        const runtime = yield* Effect.runtime()
+
+        const service = yield* TestService
+        const [value] = yield* ReactHook.useSubscribeRefs(service.ref)
+
+        // const MyTestComponentFC = yield* Effect.provide(
+        //     ReactComponent.useFC(MyTestComponent),
+        //     yield* ReactHook.useMemoLayer(SubService.Default),
+        // )
+
+        return <>
+            <Box>
+                <TextField.Root
+                    value={value}
+                    onChange={e => Runtime.runSync(runtime)(Ref.set(service.ref, e.target.value))}
+                />
+            </Box>
+
+            {/* {yield* ReactComponent.use(MyTestComponent, C => <C />).pipe(
+                Effect.provide(yield* ReactHook.useMemoLayer(SubService.Default))
+            )} */}
+
+            {/* {Array.range(0, 3).map(k =>
+                <MyTestComponentFC key={k} />
+            )} */}
+
+            {yield* pipe(
+                Array.range(0, 3),
+                Array.map(k => ReactComponent.use(MyTestComponent, FC =>
+                    <FC key={k} />
+                )),
+                Effect.all,
+                Effect.provide(yield* ReactHook.useMemoLayer(SubService.Default)),
+            )}
+        </>
+    }),
+
+    ReactComponent.withDisplayName("MyRoute"),
+    ReactComponent.withRuntime(runtime.context),
+)
+
+
+const MyTestComponent = pipe(
+    Effect.fn(function*() {
+        const runtime = yield* Effect.runtime()
+
+        const service = yield* SubService
+        const [value] = yield* ReactHook.useSubscribeRefs(service.ref)
+
+        // yield* ReactHook.useMemo(() => Effect.andThen(
+        //     Effect.addFinalizer(() => Console.log("MyTestComponent umounted")),
+        //     Console.log("MyTestComponent mounted"),
+        // ), [])
+
+        return <>
+            <Box>
+                <TextField.Root
+                    value={value}
+                    onChange={e => Runtime.runSync(runtime)(Ref.set(service.ref, e.target.value))}
+                />
+            </Box>
+        </>
+    }),
+
+    ReactComponent.withDisplayName("MyTestComponent"),
+)

packages/reffuse/src/ReffuseNamespace.ts

@@ -426,7 +426,7 @@ export abstract class ReffuseNamespace<R> {
     ): SubscriptionSubRef.SubscriptionSubRef<PropertyPath.ValueFromPath<B, P>, B> {
         return React.useMemo(
             () => SubscriptionSubRef.makeFromPath(parent, path),
-            [parent],
+            [parent, ...path],
         )
     }
 

packages/reffuse/tsconfig.json

@@ -26,7 +26,13 @@
 
     // Build
     "outDir": "./dist",
-    "declaration": true
+    "declaration": true,
+
+    "plugins": [
+      {
+        "name": "@effect/language-service"
+      }
+    ]
   },
 
   "include": ["./src"]