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)