0.1.2 (#4)

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

packages/example/package.json

@@ -11,32 +11,36 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@eslint/js": "^9.18.0",
-    "@tanstack/react-router": "^1.97.3",
-    "@tanstack/router-devtools": "^1.97.3",
-    "@tanstack/router-plugin": "^1.97.3",
+    "@eslint/js": "^9.21.0",
+    "@tanstack/react-router": "^1.111.7",
+    "@tanstack/router-devtools": "^1.111.7",
+    "@tanstack/router-plugin": "^1.111.7",
     "@thilawyn/thilaschema": "^0.1.4",
-    "@types/react": "^19.0.7",
-    "@types/react-dom": "^19.0.3",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
-    "effect": "^3.12.5",
-    "eslint": "^9.18.0",
+    "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.18",
-    "globals": "^15.14.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "reffuse": "workspace:*",
-    "typescript-eslint": "^8.21.0",
-    "vite": "^6.0.11"
+    "typescript-eslint": "^8.25.0",
+    "vite": "^6.2.0"
   },
   "dependencies": {
-    "@effect/platform": "^0.74.0",
-    "@effect/platform-browser": "^0.53.0",
-    "@radix-ui/themes": "^3.1.6",
+    "@effect/platform": "^0.77.2",
+    "@effect/platform-browser": "^0.56.2",
+    "@radix-ui/themes": "^3.2.0",
+    "@reffuse/extension-lazyref": "workspace:*",
     "@typed/id": "^0.17.1",
     "@typed/lazy-ref": "^0.3.3",
-    "lucide-react": "^0.473.0",
-    "mobx": "^6.13.5"
+    "effect": "^3.13.2",
+    "lucide-react": "^0.476.0",
+    "mobx": "^6.13.6",
+    "reffuse": "workspace:*"
+  },
+  "overrides": {
+    "effect": "^3.13.2"
   }
 }

packages/example/src/reffuse.ts

@@ -1,5 +1,6 @@
 import { HttpClient } from "@effect/platform"
 import { Clipboard, Geolocation, Permissions } from "@effect/platform-browser"
+import { LazyRefExtension } from "@reffuse/extension-lazyref"
 import { Reffuse, ReffuseContext } from "reffuse"
 
 
@@ -10,4 +11,9 @@ export const GlobalContext = ReffuseContext.make<
     | HttpClient.HttpClient
 >()
 
-export const R = Reffuse.make(GlobalContext)
+export class GlobalReffuse extends Reffuse.Reffuse.pipe(
+    Reffuse.withExtension(LazyRefExtension),
+    Reffuse.withContexts(GlobalContext),
+) {}
+
+export const R = new GlobalReffuse()

packages/example/src/routeTree.gen.ts

@@ -13,6 +13,8 @@
 import { Route as rootRoute } from './routes/__root'
 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 CountImport } from './routes/count'
 import { Route as BlankImport } from './routes/blank'
 import { Route as IndexImport } from './routes/index'
@@ -31,6 +33,18 @@ const TestsRoute = TestsImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const PromiseRoute = PromiseImport.update({
+  id: '/promise',
+  path: '/promise',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const LazyrefRoute = LazyrefImport.update({
+  id: '/lazyref',
+  path: '/lazyref',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const CountRoute = CountImport.update({
   id: '/count',
   path: '/count',
@@ -74,6 +88,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof CountImport
       parentRoute: typeof rootRoute
     }
+    '/lazyref': {
+      id: '/lazyref'
+      path: '/lazyref'
+      fullPath: '/lazyref'
+      preLoaderRoute: typeof LazyrefImport
+      parentRoute: typeof rootRoute
+    }
+    '/promise': {
+      id: '/promise'
+      path: '/promise'
+      fullPath: '/promise'
+      preLoaderRoute: typeof PromiseImport
+      parentRoute: typeof rootRoute
+    }
     '/tests': {
       id: '/tests'
       path: '/tests'
@@ -97,6 +125,8 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/blank': typeof BlankRoute
   '/count': typeof CountRoute
+  '/lazyref': typeof LazyrefRoute
+  '/promise': typeof PromiseRoute
   '/tests': typeof TestsRoute
   '/time': typeof TimeRoute
 }
@@ -105,6 +135,8 @@ export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/blank': typeof BlankRoute
   '/count': typeof CountRoute
+  '/lazyref': typeof LazyrefRoute
+  '/promise': typeof PromiseRoute
   '/tests': typeof TestsRoute
   '/time': typeof TimeRoute
 }
@@ -114,16 +146,33 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/blank': typeof BlankRoute
   '/count': typeof CountRoute
+  '/lazyref': typeof LazyrefRoute
+  '/promise': typeof PromiseRoute
   '/tests': typeof TestsRoute
   '/time': typeof TimeRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/blank' | '/count' | '/tests' | '/time'
+  fullPaths:
+    | '/'
+    | '/blank'
+    | '/count'
+    | '/lazyref'
+    | '/promise'
+    | '/tests'
+    | '/time'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/blank' | '/count' | '/tests' | '/time'
-  id: '__root__' | '/' | '/blank' | '/count' | '/tests' | '/time'
+  to: '/' | '/blank' | '/count' | '/lazyref' | '/promise' | '/tests' | '/time'
+  id:
+    | '__root__'
+    | '/'
+    | '/blank'
+    | '/count'
+    | '/lazyref'
+    | '/promise'
+    | '/tests'
+    | '/time'
   fileRoutesById: FileRoutesById
 }
 
@@ -131,6 +180,8 @@ export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   BlankRoute: typeof BlankRoute
   CountRoute: typeof CountRoute
+  LazyrefRoute: typeof LazyrefRoute
+  PromiseRoute: typeof PromiseRoute
   TestsRoute: typeof TestsRoute
   TimeRoute: typeof TimeRoute
 }
@@ -139,6 +190,8 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   BlankRoute: BlankRoute,
   CountRoute: CountRoute,
+  LazyrefRoute: LazyrefRoute,
+  PromiseRoute: PromiseRoute,
   TestsRoute: TestsRoute,
   TimeRoute: TimeRoute,
 }
@@ -156,6 +209,8 @@ export const routeTree = rootRoute
         "/",
         "/blank",
         "/count",
+        "/lazyref",
+        "/promise",
         "/tests",
         "/time"
       ]
@@ -169,6 +224,12 @@ export const routeTree = rootRoute
     "/count": {
       "filePath": "count.tsx"
     },
+    "/lazyref": {
+      "filePath": "lazyref.tsx"
+    },
+    "/promise": {
+      "filePath": "promise.tsx"
+    },
     "/tests": {
       "filePath": "tests.tsx"
     },

packages/example/src/routes/__root.tsx

@@ -19,6 +19,7 @@ function Root() {
                     <Link to="/time">Time</Link>
                     <Link to="/count">Count</Link>
                     <Link to="/tests">Tests</Link>
+                    <Link to="/promise">Promise</Link>
                     <Link to="/blank">Blank</Link>
                 </Flex>
             </Container>

packages/example/src/routes/lazyref.tsx

@@ -0,0 +1,31 @@
+import { R } from "@/reffuse"
+import { Button, Text } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import * as LazyRef from "@typed/lazy-ref"
+import { Suspense, use } from "react"
+
+
+export const Route = createFileRoute("/lazyref")({
+    component: RouteComponent
+})
+
+function RouteComponent() {
+    const promise = R.usePromise(() => LazyRef.of(0), [])
+
+    return (
+        <Suspense fallback={<Text>Loading...</Text>}>
+            <LazyRefComponent promise={promise} />
+        </Suspense>
+    )
+}
+
+function LazyRefComponent({ promise }: { readonly promise: Promise<LazyRef.LazyRef<number>> }) {
+    const ref = use(promise)
+    const [value, setValue] = R.useLazyRefState(ref)
+
+    return (
+        <Button onClick={() => setValue(prev => prev + 1)}>
+            {value}
+        </Button>
+    )
+}

packages/example/src/routes/promise.tsx

@@ -0,0 +1,35 @@
+import { R } from "@/reffuse"
+import { HttpClient } from "@effect/platform"
+import { Text } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { Console, Effect, Schema } from "effect"
+import { Suspense, use } from "react"
+
+
+export const Route = createFileRoute("/promise")({
+    component: RouteComponent
+})
+
+
+const Result = Schema.Tuple(Schema.String)
+type Result = typeof Result.Type
+
+function RouteComponent() {
+    const promise = R.usePromise(() => Effect.addFinalizer(() => Console.log("Cleanup")).pipe(
+        Effect.andThen(HttpClient.get("https://www.uuidtools.com/api/generate/v4")),
+        HttpClient.withTracerPropagation(false),
+        Effect.flatMap(res => res.json),
+        Effect.flatMap(Schema.decodeUnknown(Result)),
+    ), [])
+
+    return (
+        <Suspense fallback={<Text>Loading...</Text>}>
+            <AsyncComponent promise={promise} />
+        </Suspense>
+    )
+}
+
+function AsyncComponent({ promise }: { readonly promise: Promise<Result> }) {
+    const [uuid] = use(promise)
+    return <Text>{uuid}</Text>
+}

packages/example/src/routes/tests.tsx

@@ -1,6 +1,6 @@
 import { R } from "@/reffuse"
+import { Button } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
-import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Console, Effect } from "effect"
 
 
@@ -9,15 +9,23 @@ export const Route = createFileRoute("/tests")({
 })
 
 function RouteComponent() {
-    // R.useMemo(Effect.addFinalizer(() => Console.log("Cleanup!")).pipe(
-    //     Effect.map(() => "test")
-    // ))
+    // const value = R.useMemoScoped(Effect.addFinalizer(() => Console.log("cleanup")).pipe(
+    //     Effect.andThen(makeUuid4),
+    //     Effect.provide(GetRandomValues.CryptoRandom),
+    // ), [])
+    // console.log(value)
 
-    const value = R.useMemoScoped(Effect.addFinalizer(() => Console.log("cleanup")).pipe(
-        Effect.andThen(makeUuid4),
-        Effect.provide(GetRandomValues.CryptoRandom),
+    R.useFork(() => Effect.addFinalizer(() => Console.log("cleanup")).pipe(
+        Effect.andThen(Console.log("ouient")),
+        Effect.delay("1 second"),
     ), [])
-    console.log(value)
 
-    return <div>Hello "/tests"!</div>
+    const logValue = R.useCallbackSync(Effect.fn(function*(value: string) {
+        yield* Effect.log(value)
+    }), [])
+
+
+    return (
+        <Button onClick={() => logValue("test")}>Log value</Button>
+    )
 }

packages/example/src/routes/time.tsx

@@ -1,6 +1,6 @@
 import { R } from "@/reffuse"
 import { createFileRoute } from "@tanstack/react-router"
-import { DateTime, Ref, Schedule, Stream } from "effect"
+import { Console, DateTime, Effect, Ref, Schedule, Stream, SubscriptionRef } from "effect"
 
 
 const timeEverySecond = Stream.repeatEffectWithSchedule(
@@ -15,8 +15,12 @@ export const Route = createFileRoute("/time")({
 
 function Time() {
 
-    const timeRef = R.useRefFromEffect(DateTime.now)
-    R.useFork(Stream.runForEach(timeEverySecond, v => Ref.set(timeRef, v)), [timeRef])
+    const timeRef = R.useMemo(() => DateTime.now.pipe(Effect.flatMap(SubscriptionRef.make)), [])
+
+    R.useFork(() => Effect.addFinalizer(() => Console.log("Cleanup")).pipe(
+        Effect.andThen(Stream.runForEach(timeEverySecond, v => Ref.set(timeRef, v)))
+    ), [timeRef])
+
     const [time] = R.useRefState(timeRef)
 
 

packages/example/src/todos/reffuse.ts

@@ -1,7 +1,10 @@
-import { GlobalContext } from "@/reffuse"
+import { GlobalReffuse } from "@/reffuse"
 import { Reffuse, ReffuseContext } from "reffuse"
 import { TodosState } from "./services"
 
 
 export const TodosContext = ReffuseContext.make<TodosState.TodosState>()
-export const R = Reffuse.make(GlobalContext, TodosContext)
+
+export const R = new class TodosReffuse extends GlobalReffuse.pipe(
+    Reffuse.withContexts(TodosContext)
+) {}

packages/example/src/todos/views/VNewTodo.tsx

@@ -1,23 +1,24 @@
 import { Todo } from "@/domain"
 import { Box, Button, Card, Flex, TextArea } from "@radix-ui/themes"
-import { Effect, Option } from "effect"
+import { Effect, Option, SubscriptionRef } from "effect"
 import { R } from "../reffuse"
 import { TodosState } from "../services"
 
 
+const createEmptyTodo = Todo.generateUniqueID.pipe(
+    Effect.map(id => Todo.Todo.make({
+        id,
+        content: "",
+        completedAt: Option.none(),
+    }, true))
+)
+
+
 export function VNewTodo() {
 
     const runSync = R.useRunSync()
 
-    const createEmptyTodo = Todo.generateUniqueID.pipe(
-        Effect.map(id => Todo.Todo.make({
-            id,
-            content: "",
-            completedAt: Option.none(),
-        }, true))
-    )
-
-    const todoRef = R.useRefFromEffect(createEmptyTodo)
+    const todoRef = R.useMemo(() => createEmptyTodo.pipe(Effect.flatMap(SubscriptionRef.make)), [])
     const [todo, setTodo] = R.useRefState(todoRef)
 
 
@@ -36,7 +37,7 @@ export function VNewTodo() {
                         <Button
                             onClick={() => TodosState.TodosState.pipe(
                                 Effect.flatMap(state => state.prepend(todo)),
-                                Effect.flatMap(() => createEmptyTodo),
+                                Effect.andThen(createEmptyTodo),
                                 Effect.map(setTodo),
                                 runSync,
                             )}

packages/example/src/todos/views/VTodos.tsx

@@ -9,13 +9,13 @@ import { VTodo } from "./VTodo"
 export function VTodos() {
 
     // Sync changes to the todos with the local storage
-    R.useFork(TodosState.TodosState.pipe(
+    R.useFork(() => TodosState.TodosState.pipe(
         Effect.flatMap(state =>
             Stream.runForEach(state.todos.changes, () => state.saveToLocalStorage)
         )
-    ))
+    ), [])
 
-    const todosRef = R.useMemo(TodosState.TodosState.pipe(Effect.map(state => state.todos)))
+    const todosRef = R.useMemo(() => TodosState.TodosState.pipe(Effect.map(state => state.todos)), [])
     const [todos] = R.useRefState(todosRef)
 
 

packages/extension-lazyref/README.md

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

packages/extension-lazyref/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@reffuse/extension-lazyref",
+  "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",
+    "publish": "npm publish --access public",
+    "clean:cache": "rm -f tsconfig.tsbuildinfo",
+    "clean:dist": "rm -rf dist",
+    "clean:node": "rm -rf node_modules"
+  },
+  "devDependencies": {
+    "reffuse": "workspace:*"
+  },
+  "peerDependencies": {
+    "@typed/lazy-ref": "^0.3.3",
+    "@types/react": "^19.0.0",
+    "effect": "^3.13.0",
+    "react": "^19.0.0",
+    "reffuse": "^0.1.2"
+  }
+}

packages/extension-lazyref/src/index.ts

@@ -0,0 +1,29 @@
+import * as LazyRef from "@typed/lazy-ref"
+import { Effect, Stream } from "effect"
+import * as React from "react"
+import { ReffuseExtension, type ReffuseHelpers, SetStateAction } from "reffuse"
+
+
+export const LazyRefExtension = ReffuseExtension.make(() => ({
+    useLazyRefState<A, E, R>(
+        this: ReffuseHelpers.ReffuseHelpers<R>,
+        ref: LazyRef.LazyRef<A, E, R>,
+    ): [A, React.Dispatch<React.SetStateAction<A>>] {
+        const runSync = this.useRunSync()
+
+        const initialState = React.useMemo(() => runSync(ref), [])
+        const [reactStateValue, setReactStateValue] = React.useState(initialState)
+
+        this.useFork(() => Stream.runForEach(ref.changes, v => Effect.sync(() =>
+            setReactStateValue(v)
+        )), [ref])
+
+        const setValue = React.useCallback((setStateAction: React.SetStateAction<A>) =>
+            runSync(LazyRef.update(ref, prevState =>
+                SetStateAction.value(setStateAction, prevState)
+            )),
+        [ref])
+
+        return [reactStateValue, setValue]
+    },
+}))

packages/extension-lazyref/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/reffuse/README.md

@@ -6,7 +6,6 @@ This library is in early development. While it is (almost) feature complete and
 
 Documentation is currently being written. In the meantime, you can take a look at the `packages/example` directory.
 
-## Dependencies
-(needs to be manually installed)
-- `effect`
-- `react` 19+
+## Peer dependencies
+- `effect` 3.13+
+- `react` & `@types/react` 19+

packages/reffuse/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reffuse",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "files": [
     "./README.md",
@@ -24,14 +24,15 @@
   "scripts": {
     "build": "tsc",
     "lint:tsc": "tsc --noEmit",
+    "pack": "npm pack",
+    "publish": "npm publish --access public",
     "clean:cache": "rm -f tsconfig.tsbuildinfo",
     "clean:dist": "rm -rf dist",
     "clean:node": "rm -rf node_modules"
   },
-  "devDependencies": {
-    "@typed/lazy-ref": "^0.3.3",
-    "@types/react": "^19.0.7",
-    "effect": "^3.12.5",
+  "peerDependencies": {
+    "@types/react": "^19.0.0",
+    "effect": "^3.13.0",
     "react": "^19.0.0"
   }
 }

packages/reffuse/src/Reffuse.ts

@@ -1,411 +1,47 @@
-import * as LazyRef from "@typed/lazy-ref"
-import { Context, Effect, ExecutionStrategy, Exit, Fiber, Ref, Runtime, Scope, Stream, SubscriptionRef } from "effect"
-import React from "react"
-import * as ReffuseContext from "./ReffuseContext.js"
-import * as ReffuseRuntime from "./ReffuseRuntime.js"
-import * as SetStateAction from "./SetStateAction.js"
+import type * as ReffuseContext from "./ReffuseContext.js"
+import type * as ReffuseExtension from "./ReffuseExtension.js"
+import * as ReffuseHelpers from "./ReffuseHelpers.js"
+import type { Merge, StaticType } from "./types.js"
 
 
-export class Reffuse<R> {
-
-    constructor(
-        readonly contexts: readonly ReffuseContext.ReffuseContext<R>[]
-    ) {}
+export class Reffuse extends ReffuseHelpers.make() {}
 
 
-    useContext(): Context.Context<R> {
-        return ReffuseContext.useMergeAll(...this.contexts)
+export const withContexts = <R2 extends Array<unknown>>(
+    ...contexts: [...{ [K in keyof R2]: ReffuseContext.ReffuseContext<R2[K]> }]
+) =>
+    <
+        BaseClass extends ReffuseHelpers.ReffuseHelpersClass<R1>,
+        R1
+    >(
+        self: BaseClass & ReffuseHelpers.ReffuseHelpersClass<R1>
+    ): (
+        {
+            new(): Merge<
+                InstanceType<BaseClass>,
+                { constructor: ReffuseHelpers.ReffuseHelpersClass<R1 | R2[number]> }
+            >
+        } &
+        Merge<
+            StaticType<BaseClass>,
+            StaticType<ReffuseHelpers.ReffuseHelpersClass<R1 | R2[number]>>
+        >
+    ) => class extends self {
+        static readonly contexts = [...self.contexts, ...contexts]
+    } as any
+
+
+export const withExtension = <A extends object>(extension: ReffuseExtension.ReffuseExtension<A>) =>
+    <
+        BaseClass extends ReffuseHelpers.ReffuseHelpersClass<R>,
+        R
+    >(
+        self: BaseClass & ReffuseHelpers.ReffuseHelpersClass<R>
+    ): (
+        { new(): Merge<InstanceType<BaseClass>, A> } &
+        StaticType<BaseClass>
+    ) => {
+        const class_ = class extends self {}
+        Object.assign(class_.prototype, extension())
+        return class_ as any
     }
-
-
-    useRunSync() {
-        const runtime = ReffuseRuntime.useRuntime()
-        const context = this.useContext()
-
-        return React.useCallback(<A, E>(
-            effect: Effect.Effect<A, E, R>
-        ): A => effect.pipe(
-            Effect.provide(context),
-            Runtime.runSync(runtime),
-        ), [runtime, context])
-    }
-
-    useRunPromise() {
-        const runtime = ReffuseRuntime.useRuntime()
-        const context = this.useContext()
-
-        return React.useCallback(<A, E>(
-            effect: Effect.Effect<A, E, R>,
-            options?: { readonly signal?: AbortSignal },
-        ): Promise<A> => effect.pipe(
-            Effect.provide(context),
-            effect => Runtime.runPromise(runtime)(effect, options),
-        ), [runtime, context])
-    }
-
-    useRunFork() {
-        const runtime = ReffuseRuntime.useRuntime()
-        const context = this.useContext()
-
-        return React.useCallback(<A, E>(
-            effect: Effect.Effect<A, E, R>,
-            options?: Runtime.RunForkOptions,
-        ): Fiber.RuntimeFiber<A, E> => effect.pipe(
-            Effect.provide(context),
-            effect => Runtime.runFork(runtime)(effect, options),
-        ), [runtime, context])
-    }
-
-    useRunCallback() {
-        const runtime = ReffuseRuntime.useRuntime()
-        const context = this.useContext()
-
-        return React.useCallback(<A, E>(
-            effect: Effect.Effect<A, E, R>,
-            options?: Runtime.RunCallbackOptions<A, E>,
-        ): Runtime.Cancel<A, E> => effect.pipe(
-            Effect.provide(context),
-            effect => Runtime.runCallback(runtime)(effect, options),
-        ), [runtime, context])
-    }
-
-
-    /**
-     * Reffuse equivalent to `React.useMemo`.
-     *
-     * `useMemo` will only recompute the memoized value by running the given synchronous effect when one of the deps has changed. \
-     * Trying to run an asynchronous effect will throw.
-     *
-     * Changes to the Reffuse runtime or context will recompute the value in addition to the deps.
-     * You can disable this behavior by setting `doNotReExecuteOnRuntimeOrContextChange` to `true` in `options`.
-     */
-    useMemo<A, E>(
-        effect: Effect.Effect<A, E, R>,
-        deps?: React.DependencyList,
-        options?: RenderOptions,
-    ): A {
-        const runSync = this.useRunSync()
-
-        return React.useMemo(() => runSync(effect), [
-            ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync],
-            ...(deps ?? []),
-        ])
-    }
-
-    useMemoScoped<A, E>(
-        effect: Effect.Effect<A, E, R | Scope.Scope>,
-        deps?: React.DependencyList,
-        options?: RenderOptions & ScopeOptions,
-    ): A {
-        const runSync = this.useRunSync()
-
-        // Calculate an initial version of the value so that it can be accessed during the first render
-        const [initialScope, initialValue] = React.useMemo(() => Scope.make(options?.finalizerExecutionStrategy).pipe(
-            Effect.flatMap(scope => effect.pipe(
-                Effect.provideService(Scope.Scope, scope),
-                Effect.map(value => [scope, value] as const),
-            )),
-
-            runSync,
-        ), [])
-
-        // Keep track of the state of the initial scope
-        const initialScopeClosed = React.useRef(false)
-
-        const [value, setValue] = React.useState(initialValue)
-
-        React.useEffect(() => {
-            const closeInitialScope = Scope.close(initialScope, Exit.void).pipe(
-                Effect.andThen(Effect.sync(() => { initialScopeClosed.current = true })),
-                Effect.when(() => !initialScopeClosed.current),
-            )
-
-            const [scope, value] = closeInitialScope.pipe(
-                Effect.andThen(Scope.make(options?.finalizerExecutionStrategy).pipe(
-                    Effect.flatMap(scope => effect.pipe(
-                        Effect.provideService(Scope.Scope, scope),
-                        Effect.map(value => [scope, value] as const),
-                    ))
-                )),
-
-                runSync,
-            )
-
-            setValue(value)
-            return () => { runSync(Scope.close(scope, Exit.void)) }
-        }, [
-            ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync],
-            ...(deps ?? []),
-        ])
-
-        return value
-    }
-
-    /**
-     * Reffuse equivalent to `React.useEffect`.
-     *
-     * Executes a synchronous effect wrapped into a Scope when one of the deps has changed. Trying to run an asynchronous effect will throw.
-     *
-     * The Scope is closed on every cleanup, i.e. when one of the deps has changed and the effect needs to be re-executed. \
-     * Add finalizers to the Scope to handle cleanup logic.
-     *
-     * Changes to the Reffuse runtime or context will re-execute the effect in addition to the deps.
-     * You can disable this behavior by setting `doNotReExecuteOnRuntimeOrContextChange` to `true` in `options`.
-     *
-     * ### Example
-     * ```
-     * useEffect(Effect.addFinalizer(() => Console.log("Component unmounted")).pipe(
-     *     Effect.flatMap(() => Console.log("Component mounted"))
-     * ))
-     * ```
-     *
-     * Plain React equivalent:
-     * ```
-     * React.useEffect(() => {
-     *     console.log("Component mounted")
-     *     return () => { console.log("Component unmounted") }
-     * })
-     * ```
-     */
-    useEffect<A, E>(
-        effect: Effect.Effect<A, E, R | Scope.Scope>,
-        deps?: React.DependencyList,
-        options?: RenderOptions & ScopeOptions,
-    ): void {
-        const runSync = this.useRunSync()
-
-        return React.useEffect(() => {
-            const scope = Scope.make(options?.finalizerExecutionStrategy).pipe(
-                Effect.tap(scope => Effect.provideService(effect, Scope.Scope, scope)),
-                runSync,
-            )
-
-            return () => { runSync(Scope.close(scope, Exit.void)) }
-        }, [
-            ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync],
-            ...(deps ?? []),
-        ])
-    }
-
-    /**
-     * Reffuse equivalent to `React.useLayoutEffect`.
-     *
-     * Executes a synchronous effect wrapped into a Scope when one of the deps has changed. Fires synchronously after all DOM mutations. \
-     * Trying to run an asynchronous effect will throw.
-     *
-     * The Scope is closed on every cleanup, i.e. when one of the deps has changed and the effect needs to be re-executed. \
-     * Add finalizers to the Scope to handle cleanup logic.
-     *
-     * Changes to the Reffuse runtime or context will re-execute the effect in addition to the deps.
-     * You can disable this behavior by setting `doNotReExecuteOnRuntimeOrContextChange` to `true` in `options`.
-     *
-     * ### Example
-     * ```
-     * useLayoutEffect(Effect.addFinalizer(() => Console.log("Component unmounted")).pipe(
-     *     Effect.flatMap(() => Console.log("Component mounted"))
-     * ))
-     * ```
-     *
-     * Plain React equivalent:
-     * ```
-     * React.useLayoutEffect(() => {
-     *     console.log("Component mounted")
-     *     return () => { console.log("Component unmounted") }
-     * })
-     * ```
-     */
-    useLayoutEffect<A, E>(
-        effect: Effect.Effect<A, E, R | Scope.Scope>,
-        deps?: React.DependencyList,
-        options?: RenderOptions & ScopeOptions,
-    ): void {
-        const runSync = this.useRunSync()
-
-        return React.useLayoutEffect(() => {
-            const scope = Scope.make(options?.finalizerExecutionStrategy).pipe(
-                Effect.tap(scope => Effect.provideService(effect, Scope.Scope, scope)),
-                runSync,
-            )
-
-            return () => { runSync(Scope.close(scope, Exit.void)) }
-        }, [
-            ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync],
-            ...(deps ?? []),
-        ])
-    }
-
-    /**
-     * An asynchronous and non-blocking alternative to `React.useEffect`.
-     *
-     * Forks an effect wrapped into a Scope in the background when one of the deps has changed.
-     *
-     * The Scope is closed on every cleanup, i.e. when one of the deps has changed and the effect needs to be re-executed. \
-     * Add finalizers to the Scope to handle cleanup logic.
-     *
-     * Changes to the Reffuse runtime or context will re-execute the effect in addition to the deps.
-     * You can disable this behavior by setting `doNotReExecuteOnRuntimeOrContextChange` to `true` in `options`.
-     *
-     * ### Example
-     * ```
-     * const timeRef = useRefFromEffect(DateTime.now)
-     *
-     * useFork(Effect.addFinalizer(() => Console.log("Cleanup")).pipe(
-     *     Effect.map(() => Stream.repeatEffectWithSchedule(
-     *         DateTime.now,
-     *         Schedule.intersect(Schedule.forever, Schedule.spaced("1 second")),
-     *     )),
-     *
-     *     Effect.flatMap(Stream.runForEach(time => Ref.set(timeRef, time)),
-     * )), [timeRef])
-     *
-     * const [time] = useRefState(timeRef)
-     * ```
-     */
-    useFork<A, E>(
-        effect: Effect.Effect<A, E, R | Scope.Scope>,
-        deps?: React.DependencyList,
-        options?: Runtime.RunForkOptions & RenderOptions & ScopeOptions,
-    ): void {
-        const runSync = this.useRunSync()
-        const runFork = this.useRunFork()
-
-        return React.useEffect(() => {
-            const scope = runSync(Scope.make(options?.finalizerExecutionStrategy))
-            const fiber = runFork(Effect.provideService(effect, Scope.Scope, scope), options)
-
-            return () => {
-                Fiber.interrupt(fiber).pipe(
-                    Effect.andThen(Scope.close(scope, Exit.void)),
-                    runFork,
-                )
-            }
-        }, [
-            ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync, runFork],
-            ...(deps ?? []),
-        ])
-    }
-
-    // useSuspense<A, E>(
-    //     effect: Effect.Effect<A, E, R>,
-    //     deps?: React.DependencyList,
-    //     options?: { readonly signal?: AbortSignal } & RenderOptions,
-    // ): A {
-    //     const runPromise = this.useRunPromise()
-
-    //     const promise = React.useMemo(() => runPromise(effect, options), [
-    //         ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runPromise],
-    //         ...(deps ?? []),
-    //     ])
-    //     return React.use(promise)
-    // }
-
-    // useSuspenseScoped<A, E>(
-    //     effect: Effect.Effect<A, E, R | Scope.Scope>,
-    //     deps?: React.DependencyList,
-    //     options?: { readonly signal?: AbortSignal } & RenderOptions & ScopeOptions,
-    // ): A {
-    //     const runSync = this.useRunSync()
-    //     const runPromise = this.useRunPromise()
-
-    //     const initialPromise = React.useMemo(() => runPromise(Effect.scoped(effect)), [])
-    //     const [promise, setPromise] = React.useState(initialPromise)
-
-    //     React.useEffect(() => {
-    //         const scope = runSync(Scope.make())
-    //         setPromise(runPromise(Effect.provideService(effect, Scope.Scope, scope), options))
-
-    //         return () => { runPromise(Scope.close(scope, Exit.void)) }
-    //     }, [
-    //         ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync, runPromise],
-    //         ...(deps ?? []),
-    //     ])
-
-    //     return React.use(promise)
-    // }
-
-
-    useRef<A>(value: A): SubscriptionRef.SubscriptionRef<A> {
-        return this.useMemo(
-            SubscriptionRef.make(value),
-            [],
-            { doNotReExecuteOnRuntimeOrContextChange: false }, // Do not recreate the ref when the context changes
-        )
-    }
-
-    useRefFromEffect<A, E>(effect: Effect.Effect<A, E, R>): SubscriptionRef.SubscriptionRef<A> {
-        return this.useMemo(
-            effect.pipe(Effect.flatMap(SubscriptionRef.make)),
-            [],
-            { doNotReExecuteOnRuntimeOrContextChange: false }, // Do not recreate the ref when the context changes
-        )
-    }
-
-    /**
-     * Binds the state of a `SubscriptionRef` to the state of the React component.
-     *
-     * Returns a [value, setter] tuple just like `React.useState` and triggers a re-render everytime the value held by the ref changes.
-     *
-     * Note that the rules of React's immutable state still apply: updating a ref with the same value will not trigger a re-render.
-     */
-    useRefState<A>(ref: SubscriptionRef.SubscriptionRef<A>): [A, React.Dispatch<React.SetStateAction<A>>] {
-        const runSync = this.useRunSync()
-
-        const initialState = React.useMemo(() => runSync(ref), [])
-        const [reactStateValue, setReactStateValue] = React.useState(initialState)
-
-        this.useFork(Stream.runForEach(ref.changes, v => Effect.sync(() =>
-            setReactStateValue(v)
-        )), [ref])
-
-        const setValue = React.useCallback((setStateAction: React.SetStateAction<A>) =>
-            runSync(Ref.update(ref, prevState =>
-                SetStateAction.value(setStateAction, prevState)
-            )),
-        [ref])
-
-        return [reactStateValue, setValue]
-    }
-
-    /**
-     * Binds the state of a `LazyRef` from the `@typed/lazy-ref` package to the state of the React component.
-     *
-     * Returns a [value, setter] tuple just like `React.useState` and triggers a re-render everytime the value held by the ref changes.
-     *
-     * Note that the rules of React's immutable state still apply: updating a ref with the same value will not trigger a re-render.
-     */
-    useLazyRefState<A, E>(ref: LazyRef.LazyRef<A, E, R>): [A, React.Dispatch<React.SetStateAction<A>>] {
-        const runSync = this.useRunSync()
-
-        const initialState = React.useMemo(() => runSync(ref), [])
-        const [reactStateValue, setReactStateValue] = React.useState(initialState)
-
-        this.useFork(Stream.runForEach(ref.changes, v => Effect.sync(() =>
-            setReactStateValue(v)
-        )), [ref])
-
-        const setValue = React.useCallback((setStateAction: React.SetStateAction<A>) =>
-            runSync(LazyRef.update(ref, prevState =>
-                SetStateAction.value(setStateAction, prevState)
-            )),
-        [ref])
-
-        return [reactStateValue, setValue]
-    }
-
-}
-
-
-export interface RenderOptions {
-    /** Prevents re-executing the effect when the Effect runtime or context changes. Defaults to `false`. */
-    readonly doNotReExecuteOnRuntimeOrContextChange?: boolean
-}
-
-export interface ScopeOptions {
-    readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
-}
-
-
-export const make = <T extends Array<unknown>>(
-    ...contexts: [...{ [K in keyof T]: ReffuseContext.ReffuseContext<T[K]> }]
-): Reffuse<T[number]> =>
-    new Reffuse(contexts)

packages/reffuse/src/ReffuseContext.tsx

@@ -1,32 +1,12 @@
 import { Array, Context, Effect, Layer, Runtime } from "effect"
-import React from "react"
+import * as React from "react"
 import * as ReffuseRuntime from "./ReffuseRuntime.js"
 
 
 export class ReffuseContext<R> {
-
     readonly Context = React.createContext<Context.Context<R>>(null!)
-    readonly Provider: ReffuseContextReactProvider<R>
-
-    constructor() {
-        // TODO: scope the layer creation
-        this.Provider = (props) => {
-            const runtime = ReffuseRuntime.useRuntime()
-
-            const value = React.useMemo(() => Effect.context<R>().pipe(
-                Effect.provide(props.layer),
-                Runtime.runSync(runtime),
-            ), [props.layer, runtime])
-
-            return (
-                <this.Context
-                    {...props}
-                    value={value}
-                />
-            )
-        }
-        this.Provider.displayName = "ReffuseContextReactProvider"
-    }
+    readonly Provider = makeProvider(this.Context)
+    readonly AsyncProvider = makeAsyncProvider(this.Context)
 
 
     useContext(): Context.Context<R> {
@@ -37,15 +17,73 @@ export class ReffuseContext<R> {
         const context = this.useContext()
         return React.useMemo(() => Layer.effectContext(Effect.succeed(context)), [context])
     }
-
 }
 
-export type ReffuseContextReactProvider<R> = React.FC<{
+export type R<T> = T extends ReffuseContext<infer R> ? R : never
+
+
+export type ReactProvider<R> = React.FC<{
     readonly layer: Layer.Layer<R, unknown>
     readonly children?: React.ReactNode
 }>
 
-export type R<T> = T extends ReffuseContext<infer R> ? R : never
+function makeProvider<R>(Context: React.Context<Context.Context<R>>): ReactProvider<R> {
+    return function ReffuseContextReactProvider(props) {
+        const runtime = ReffuseRuntime.useRuntime()
+
+        const value = React.useMemo(() => Effect.context<R>().pipe(
+            Effect.provide(props.layer),
+            Runtime.runSync(runtime),
+        ), [props.layer, runtime])
+
+        return (
+            <Context
+                {...props}
+                value={value}
+            />
+        )
+    }
+}
+
+export type AsyncReactProvider<R> = React.FC<{
+    readonly layer: Layer.Layer<R, unknown>
+    readonly fallback?: React.ReactNode
+    readonly children?: React.ReactNode
+}>
+
+function makeAsyncProvider<R>(Context: React.Context<Context.Context<R>>): AsyncReactProvider<R> {
+    function Inner({ promise, children }: {
+        readonly promise: Promise<Context.Context<R>>
+        readonly children?: React.ReactNode
+    }) {
+        const value = React.use(promise)
+
+        return (
+            <Context
+                value={value}
+                children={children}
+            />
+        )
+    }
+
+    return function ReffuseContextAsyncReactProvider(props) {
+        const runtime = ReffuseRuntime.useRuntime()
+
+        const promise = React.useMemo(() => Effect.context<R>().pipe(
+            Effect.provide(props.layer),
+            Runtime.runPromise(runtime),
+        ), [props.layer, runtime])
+
+        return (
+            <React.Suspense fallback={props.fallback}>
+                <Inner
+                    {...props}
+                    promise={promise}
+                />
+            </React.Suspense>
+        )
+    }
+}
 
 
 export function make<R = never>() {

packages/reffuse/src/ReffuseExtension.ts

@@ -0,0 +1,7 @@
+export interface ReffuseExtension<A extends object> {
+    (): A
+    readonly Type: A
+}
+
+export const make = <A extends object>(extension: () => A): ReffuseExtension<A> =>
+    extension as ReffuseExtension<A>

packages/reffuse/src/ReffuseHelpers.ts

@@ -0,0 +1,431 @@
+import { type Context, Effect, ExecutionStrategy, Exit, type Fiber, Pipeable, 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"
+
+
+export interface RenderOptions {
+    /** Prevents re-executing the effect when the Effect runtime or context changes. Defaults to `false`. */
+    readonly doNotReExecuteOnRuntimeOrContextChange?: boolean
+}
+
+export interface ScopeOptions {
+    readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
+}
+
+
+export abstract class ReffuseHelpers<R> {
+    declare ["constructor"]: ReffuseHelpersClass<R>
+
+
+    useContext<R>(this: ReffuseHelpers<R>): Context.Context<R> {
+        return ReffuseContext.useMergeAll(...this.constructor.contexts)
+    }
+
+
+    useRunSync<R>(this: ReffuseHelpers<R>): <A, E>(effect: Effect.Effect<A, E, R>) => A {
+        const runtime = ReffuseRuntime.useRuntime()
+        const context = this.useContext()
+
+        return React.useCallback(effect => effect.pipe(
+            Effect.provide(context),
+            Runtime.runSync(runtime),
+        ), [runtime, context])
+    }
+
+    useRunPromise<R>(this: ReffuseHelpers<R>): <A, E>(
+        effect: Effect.Effect<A, E, R>,
+        options?: { readonly signal?: AbortSignal },
+    ) => Promise<A> {
+        const runtime = ReffuseRuntime.useRuntime()
+        const context = this.useContext()
+
+        return React.useCallback((effect, options) => effect.pipe(
+            Effect.provide(context),
+            effect => Runtime.runPromise(runtime)(effect, options),
+        ), [runtime, context])
+    }
+
+    useRunFork<R>(this: ReffuseHelpers<R>): <A, E>(
+        effect: Effect.Effect<A, E, R>,
+        options?: Runtime.RunForkOptions,
+    ) => Fiber.RuntimeFiber<A, E> {
+        const runtime = ReffuseRuntime.useRuntime()
+        const context = this.useContext()
+
+        return React.useCallback((effect, options) => effect.pipe(
+            Effect.provide(context),
+            effect => Runtime.runFork(runtime)(effect, options),
+        ), [runtime, context])
+    }
+
+    useRunCallback<R>(this: ReffuseHelpers<R>): <A, E>(
+        effect: Effect.Effect<A, E, R>,
+        options?: Runtime.RunCallbackOptions<A, E>,
+    ) => Runtime.Cancel<A, E> {
+        const runtime = ReffuseRuntime.useRuntime()
+        const context = this.useContext()
+
+        return React.useCallback((effect, options) => effect.pipe(
+            Effect.provide(context),
+            effect => Runtime.runCallback(runtime)(effect, options),
+        ), [runtime, context])
+    }
+
+    /**
+     * Reffuse equivalent to `React.useMemo`.
+     *
+     * `useMemo` will only recompute the memoized value by running the given synchronous effect when one of the deps has changed. \
+     * Trying to run an asynchronous effect will throw.
+     *
+     * Changes to the Reffuse runtime or context will recompute the value in addition to the deps.
+     * You can disable this behavior by setting `doNotReExecuteOnRuntimeOrContextChange` to `true` in `options`.
+     */
+    useMemo<A, E, R>(
+        this: ReffuseHelpers<R>,
+        effect: () => Effect.Effect<A, E, R>,
+        deps: React.DependencyList,
+        options?: RenderOptions,
+    ): A {
+        const runSync = this.useRunSync()
+
+        return React.useMemo(() => runSync(effect()), [
+            ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync],
+            ...deps,
+        ])
+    }
+
+    useMemoScoped<A, E, R>(
+        this: ReffuseHelpers<R>,
+        effect: () => Effect.Effect<A, E, R | Scope.Scope>,
+        deps: React.DependencyList,
+        options?: RenderOptions & ScopeOptions,
+    ): A {
+        const runSync = this.useRunSync()
+
+        // Calculate an initial version of the value so that it can be accessed during the first render
+        const [initialScope, initialValue] = React.useMemo(() => Scope.make(options?.finalizerExecutionStrategy).pipe(
+            Effect.flatMap(scope => effect().pipe(
+                Effect.provideService(Scope.Scope, scope),
+                Effect.map(value => [scope, value] as const),
+            )),
+
+            runSync,
+        ), [])
+
+        // Keep track of the state of the initial scope
+        const initialScopeClosed = React.useRef(false)
+
+        const [value, setValue] = React.useState(initialValue)
+
+        React.useEffect(() => {
+            const closeInitialScopeIfNeeded = Scope.close(initialScope, Exit.void).pipe(
+                Effect.andThen(Effect.sync(() => { initialScopeClosed.current = true })),
+                Effect.when(() => !initialScopeClosed.current),
+            )
+
+            const [scope, value] = closeInitialScopeIfNeeded.pipe(
+                Effect.andThen(Scope.make(options?.finalizerExecutionStrategy).pipe(
+                    Effect.flatMap(scope => effect().pipe(
+                        Effect.provideService(Scope.Scope, scope),
+                        Effect.map(value => [scope, value] as const),
+                    ))
+                )),
+
+                runSync,
+            )
+
+            setValue(value)
+            return () => { runSync(Scope.close(scope, Exit.void)) }
+        }, [
+            ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync],
+            ...deps,
+        ])
+
+        return value
+    }
+
+    /**
+     * Reffuse equivalent to `React.useEffect`.
+     *
+     * Executes a synchronous effect wrapped into a Scope when one of the deps has changed. Trying to run an asynchronous effect will throw.
+     *
+     * The Scope is closed on every cleanup, i.e. when one of the deps has changed and the effect needs to be re-executed. \
+     * Add finalizers to the Scope to handle cleanup logic.
+     *
+     * Changes to the Reffuse runtime or context will re-execute the effect in addition to the deps.
+     * You can disable this behavior by setting `doNotReExecuteOnRuntimeOrContextChange` to `true` in `options`.
+     *
+     * ### Example
+     * ```
+     * useEffect(() => Effect.addFinalizer(() => Console.log("Component unmounted")).pipe(
+     *     Effect.flatMap(() => Console.log("Component mounted"))
+     * ))
+     * ```
+     *
+     * Plain React equivalent:
+     * ```
+     * React.useEffect(() => {
+     *     console.log("Component mounted")
+     *     return () => { console.log("Component unmounted") }
+     * }, [])
+     * ```
+     */
+    useEffect<A, E, R>(
+        this: ReffuseHelpers<R>,
+        effect: () => Effect.Effect<A, E, R | Scope.Scope>,
+        deps?: React.DependencyList,
+        options?: RenderOptions & ScopeOptions,
+    ): void {
+        const runSync = this.useRunSync()
+
+        React.useEffect(() => {
+            const scope = Scope.make(options?.finalizerExecutionStrategy).pipe(
+                Effect.tap(scope => Effect.provideService(effect(), Scope.Scope, scope)),
+                runSync,
+            )
+
+            return () => { runSync(Scope.close(scope, Exit.void)) }
+        }, deps && [
+            ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync],
+            ...deps,
+        ])
+    }
+
+    /**
+     * Reffuse equivalent to `React.useLayoutEffect`.
+     *
+     * Executes a synchronous effect wrapped into a Scope when one of the deps has changed. Fires synchronously after all DOM mutations. \
+     * Trying to run an asynchronous effect will throw.
+     *
+     * The Scope is closed on every cleanup, i.e. when one of the deps has changed and the effect needs to be re-executed. \
+     * Add finalizers to the Scope to handle cleanup logic.
+     *
+     * Changes to the Reffuse runtime or context will re-execute the effect in addition to the deps.
+     * You can disable this behavior by setting `doNotReExecuteOnRuntimeOrContextChange` to `true` in `options`.
+     *
+     * ### Example
+     * ```
+     * useLayoutEffect(() => Effect.addFinalizer(() => Console.log("Component unmounted")).pipe(
+     *     Effect.flatMap(() => Console.log("Component mounted"))
+     * ))
+     * ```
+     *
+     * Plain React equivalent:
+     * ```
+     * React.useLayoutEffect(() => {
+     *     console.log("Component mounted")
+     *     return () => { console.log("Component unmounted") }
+     * }, [])
+     * ```
+     */
+    useLayoutEffect<A, E, R>(
+        this: ReffuseHelpers<R>,
+        effect: () => Effect.Effect<A, E, R | Scope.Scope>,
+        deps?: React.DependencyList,
+        options?: RenderOptions & ScopeOptions,
+    ): void {
+        const runSync = this.useRunSync()
+
+        React.useLayoutEffect(() => {
+            const scope = Scope.make(options?.finalizerExecutionStrategy).pipe(
+                Effect.tap(scope => Effect.provideService(effect(), Scope.Scope, scope)),
+                runSync,
+            )
+
+            return () => { runSync(Scope.close(scope, Exit.void)) }
+        }, deps && [
+            ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync],
+            ...deps,
+        ])
+    }
+
+    /**
+     * An asynchronous and non-blocking alternative to `React.useEffect`.
+     *
+     * Forks an effect wrapped into a Scope in the background when one of the deps has changed.
+     *
+     * The Scope is closed on every cleanup, i.e. when one of the deps has changed and the effect needs to be re-executed. \
+     * Add finalizers to the Scope to handle cleanup logic.
+     *
+     * Changes to the Reffuse runtime or context will re-execute the effect in addition to the deps.
+     * You can disable this behavior by setting `doNotReExecuteOnRuntimeOrContextChange` to `true` in `options`.
+     *
+     * ### Example
+     * ```
+     * const timeRef = useRefFromEffect(DateTime.now)
+     *
+     * useFork(() => Effect.addFinalizer(() => Console.log("Cleanup")).pipe(
+     *     Effect.map(() => Stream.repeatEffectWithSchedule(
+     *         DateTime.now,
+     *         Schedule.intersect(Schedule.forever, Schedule.spaced("1 second")),
+     *     )),
+     *
+     *     Effect.flatMap(Stream.runForEach(time => Ref.set(timeRef, time)),
+     * )), [timeRef])
+     *
+     * const [time] = useRefState(timeRef)
+     * ```
+     */
+    useFork<A, E, R>(
+        this: ReffuseHelpers<R>,
+        effect: () => Effect.Effect<A, E, R | Scope.Scope>,
+        deps?: React.DependencyList,
+        options?: Runtime.RunForkOptions & RenderOptions & ScopeOptions,
+    ): void {
+        const runSync = this.useRunSync()
+        const runFork = this.useRunFork()
+
+        React.useEffect(() => {
+            const scope = runSync(options?.scope
+                ? Scope.fork(options.scope, options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)
+                : Scope.make(options?.finalizerExecutionStrategy)
+            )
+            runFork(Effect.provideService(effect(), Scope.Scope, scope), { ...options, scope })
+
+            return () => { runFork(Scope.close(scope, Exit.void)) }
+        }, deps && [
+            ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync],
+            ...deps,
+        ])
+    }
+
+    usePromise<A, E, R>(
+        this: ReffuseHelpers<R>,
+        effect: () => Effect.Effect<A, E, R | Scope.Scope>,
+        deps?: React.DependencyList,
+        options?: { readonly signal?: AbortSignal } & Runtime.RunForkOptions & RenderOptions & ScopeOptions,
+    ): Promise<A> {
+        const runSync = this.useRunSync()
+        const runFork = this.useRunFork()
+
+        const [value, setValue] = React.useState(Promise.withResolvers<A>().promise)
+
+        React.useEffect(() => {
+            const { promise, resolve, reject } = Promise.withResolvers<A>()
+            setValue(promise)
+
+            const scope = runSync(options?.scope
+                ? Scope.fork(options.scope, options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)
+                : Scope.make(options?.finalizerExecutionStrategy)
+            )
+
+            const cleanup = () => { runFork(Scope.close(scope, Exit.void)) }
+            if (options?.signal)
+                options.signal.addEventListener("abort", cleanup)
+
+            effect().pipe(
+                Effect.provideService(Scope.Scope, scope),
+                Effect.match({
+                    onSuccess: resolve,
+                    onFailure: reject,
+                }),
+                effect => runFork(effect, { ...options, scope }),
+            )
+
+            return () => {
+                if (options?.signal)
+                    options.signal.removeEventListener("abort", cleanup)
+
+                cleanup()
+            }
+        }, deps && [
+            ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync],
+            ...deps,
+        ])
+
+        return value
+    }
+
+    useCallbackSync<Args extends unknown[], A, E, R>(
+        this: ReffuseHelpers<R>,
+        callback: (...args: Args) => Effect.Effect<A, E, R>,
+        deps: React.DependencyList,
+        options?: RenderOptions,
+    ): (...args: Args) => A {
+        const runSync = this.useRunSync()
+
+        return React.useCallback((...args) => runSync(callback(...args)), [
+            ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync],
+            ...deps,
+        ])
+    }
+
+    useCallbackPromise<Args extends unknown[], A, E, R>(
+        this: ReffuseHelpers<R>,
+        callback: (...args: Args) => Effect.Effect<A, E, R>,
+        deps: React.DependencyList,
+        options?: { readonly signal?: AbortSignal } & RenderOptions,
+    ): (...args: Args) => Promise<A> {
+        const runPromise = this.useRunPromise()
+
+        return React.useCallback((...args) => runPromise(callback(...args), options), [
+            ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runPromise],
+            ...deps,
+        ])
+    }
+
+    useRef<A, R>(
+        this: ReffuseHelpers<R>,
+        value: A,
+    ): SubscriptionRef.SubscriptionRef<A> {
+        return this.useMemo(
+            () => SubscriptionRef.make(value),
+            [],
+            { doNotReExecuteOnRuntimeOrContextChange: true }, // Do not recreate the ref when the context changes
+        )
+    }
+
+    /**
+     * Binds the state of a `SubscriptionRef` to the state of the React component.
+     *
+     * Returns a [value, setter] tuple just like `React.useState` and triggers a re-render everytime the value held by the ref changes.
+     *
+     * Note that the rules of React's immutable state still apply: updating a ref with the same value will not trigger a re-render.
+     */
+    useRefState<A, R>(
+        this: ReffuseHelpers<R>,
+        ref: SubscriptionRef.SubscriptionRef<A>,
+    ): [A, React.Dispatch<React.SetStateAction<A>>] {
+        const runSync = this.useRunSync()
+
+        const initialState = React.useMemo(() => runSync(ref), [])
+        const [reactStateValue, setReactStateValue] = React.useState(initialState)
+
+        this.useFork(() => Stream.runForEach(ref.changes, v => Effect.sync(() =>
+            setReactStateValue(v)
+        )), [ref])
+
+        const setValue = React.useCallback((setStateAction: React.SetStateAction<A>) =>
+            runSync(Ref.update(ref, prevState =>
+                SetStateAction.value(setStateAction, prevState)
+            )),
+        [ref])
+
+        return [reactStateValue, setValue]
+    }
+}
+
+
+export interface ReffuseHelpers<R> extends Pipeable.Pipeable {}
+
+ReffuseHelpers.prototype.pipe = function pipe() {
+    return Pipeable.pipeArguments(this, arguments)
+}
+
+
+export interface ReffuseHelpersClass<R> extends Pipeable.Pipeable {
+    new(): ReffuseHelpers<R>
+    readonly contexts: readonly ReffuseContext.ReffuseContext<R>[]
+}
+
+(ReffuseHelpers as ReffuseHelpersClass<any>).pipe = function pipe() {
+    return Pipeable.pipeArguments(this, arguments)
+}
+
+
+export const make = (): ReffuseHelpersClass<never> =>
+    class extends (ReffuseHelpers<never> as ReffuseHelpersClass<never>) {
+        static readonly contexts = []
+    }

packages/reffuse/src/ReffuseRuntime.tsx

@@ -1,5 +1,5 @@
 import { Runtime } from "effect"
-import React from "react"
+import * as React from "react"
 
 
 export const Context = React.createContext<Runtime.Runtime<never>>(null!)

packages/reffuse/src/SetStateAction.ts

@@ -1,5 +1,5 @@
 import { Function } from "effect"
-import type React from "react"
+import type * as React from "react"
 
 
 export const value: {

packages/reffuse/src/index.ts

@@ -1,4 +1,6 @@
 export * as Reffuse from "./Reffuse.js"
 export * as ReffuseContext from "./ReffuseContext.js"
+export * as ReffuseExtension from "./ReffuseExtension.js"
+export * as ReffuseHelpers from "./ReffuseHelpers.js"
 export * as ReffuseRuntime from "./ReffuseRuntime.js"
 export * as SetStateAction from "./SetStateAction.js"

packages/reffuse/src/types.ts

@@ -0,0 +1,21 @@
+/**
+ * Extracts the common keys between two types
+ */
+export type CommonKeys<A, B> = Extract<keyof A, keyof B>
+
+/**
+ * Obtain the static members type of a constructor function type
+ */
+export type StaticType<T extends abstract new (...args: any) => any> = Omit<T, "prototype">
+
+export type Extend<Super, Self> =
+    Extendable<Super, Self> extends true
+        ? Omit<Super, CommonKeys<Self, Super>> & Self
+        : never
+
+export type Extendable<Super, Self> =
+    Pick<Self, CommonKeys<Self, Super>> extends Pick<Super, CommonKeys<Self, Super>>
+        ? true
+        : false
+
+export type Merge<Super, Self> = Omit<Super, CommonKeys<Self, Super>> & Self