useSuspense attempt

packages/example/src/routes/tests.tsx

@@ -1,6 +1,6 @@
 import { R } from "@/reffuse"
 import { createFileRoute } from "@tanstack/react-router"
-import { Console, Effect } from "effect"
+import { Effect } from "effect"
 
 
 export const Route = createFileRoute("/tests")({
@@ -8,9 +8,12 @@ export const Route = createFileRoute("/tests")({
 })
 
 function RouteComponent() {
-    R.useMemo(Effect.addFinalizer(() => Console.log("Cleanup!")).pipe(
-        Effect.map(() => "test")
-    ))
+    // R.useMemo(Effect.addFinalizer(() => Console.log("Cleanup!")).pipe(
+    //     Effect.map(() => "test")
+    // ))
+
+    const value = R.useSuspense(Effect.succeed("test"))
+    console.log(value)
 
     return <div>Hello "/tests"!</div>
 }

packages/reffuse/src/Reffuse.ts

@@ -55,6 +55,19 @@ export class Reffuse<R> {
         ), [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])
+    }
+
 
     /**
      * ⚠️ Scope closing on cleanup is currently broken when using React strict mode! ⚠️
@@ -213,18 +226,44 @@ export class Reffuse<R> {
         ])
     }
 
+    // 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)
+    // }
+
     useSuspense<A, E>(
         effect: Effect.Effect<A, E, R>,
         deps?: React.DependencyList,
-        options?: { readonly signal?: AbortSignal } & RenderOptions,
+        options?: RenderOptions,
     ): A {
-        const runPromise = this.useRunPromise()
+        const runSync = this.useRunPromise()
+        const runCallback = this.useRunCallback()
 
-        const promise = React.useMemo(() => runPromise(effect, options), [
-            ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runPromise],
-            ...(deps ?? []),
-        ])
-        return React.use(promise)
+        const promiseRef = React.useRef(Promise.withResolvers<A>().promise)
+
+        React.useEffect(() => {
+            const { promise, resolve, reject } = Promise.withResolvers<A>()
+            promiseRef.current = promise
+
+            runCallback(effect, {
+                onExit: Exit.mapBoth({
+                    onSuccess: resolve,
+                    onFailure: reject,
+                })
+            })
+        }, deps)
+
+        console.log(promiseRef.current)
+        return React.use(promiseRef.current)
     }
 
     /**