Refactoring

packages/effect-fc/src/Component.ts

@@ -1,4 +1,4 @@
-import { Context, Effect, type Equivalence, ExecutionStrategy, Function, Pipeable, Predicate, Runtime, Scope, String, Tracer, type Utils } from "effect"
+import { Context, Effect, type Equivalence, ExecutionStrategy, Function, pipe, Pipeable, Predicate, Runtime, Scope, String, Tracer, type Utils } from "effect"
 import * as React from "react"
 import * as Hook from "./Hook.js"
 import type { ExcludeKeys } from "./utils.js"
@@ -121,6 +121,9 @@ export const suspense = <T extends Component<any, any, P>, P extends {}>(
 
 
 export const useFC: {
+    <E, R, P extends {}>(
+        self: Component<E, R, P> & Suspense
+    ): Effect.Effect<React.FC<P & SuspenseProps>, never, Exclude<R, Scope.Scope>>
     <E, R, P extends {}>(
         self: Component<E, R, P>
     ): Effect.Effect<React.FC<P>, never, Exclude<R, Scope.Scope>>
@@ -139,9 +142,28 @@ export const useFC: {
         ))
 
         const FC = React.useMemo(() => {
-            const f = (props: P) => Runtime.runSync(runtimeRef.current)(
+            const f: React.FC<P> = Predicate.hasProperty(self, "suspense")
+                ? pipe(
+                    function SuspenseInner(props: { readonly promise: Promise<React.ReactNode> }) {
+                        return React.use(props.promise)
+                    },
+
+                    SuspenseInner => ({ fallback, name, ...props }: P & SuspenseProps) => {
+                        const promise = Runtime.runPromise(runtimeRef.current)(
+                            Effect.provideService(self.body(props as P), Scope.Scope, scope)
+                        )
+
+                        return React.createElement(
+                            React.Suspense,
+                            { fallback, name },
+                            React.createElement(SuspenseInner, { promise }),
+                        )
+                    },
+                )
+                : (props: P) => Runtime.runSync(runtimeRef.current)(
                     Effect.provideService(self.body(props), Scope.Scope, scope)
                 )
+
             f.displayName = self.displayName ?? "Anonymous"
             return Predicate.hasProperty(self, "memo")
                 ? React.memo(f, self.propsAreEqual)
@@ -152,51 +174,11 @@ export const useFC: {
     }, [])
 })
 
-export const useSuspenseFC: {
-    <E, R, P extends ExcludeKeys<{}, "suspenseProps">>(
-        self: Component<E, R, P>
-    ): Effect.Effect<
-        React.FC<P & { readonly suspenseProps: React.SuspenseProps }>,
-        never,
-        Exclude<R, Scope.Scope>
-    >
-} = Effect.fn("useSuspenseFC")(function* <E, R, P extends ExcludeKeys<{}, "suspenseProps">>(
-    self: Component<E, R, P>
-) {
-    const runtimeRef = React.useRef<Runtime.Runtime<Exclude<R, Scope.Scope>>>(null!)
-    runtimeRef.current = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
-
-    return React.useCallback(function ScopeProvider(props: P & { readonly suspenseProps: React.SuspenseProps }) {
-        const scope = Runtime.runSync(runtimeRef.current)(Hook.useScope(
-            Array.from(
-                Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
-            ),
-            self.options,
-        ))
-
-        const FC = React.useMemo(() => {
-            const SuspenseInner = (props: { readonly promise: Promise<React.ReactNode> }) => React.use(props.promise)
-
-            const f = ({ suspenseProps, ...props }: P & { readonly suspenseProps: React.SuspenseProps }) => {
-                const promise = Runtime.runPromise(runtimeRef.current)(
-                    Effect.provideService(self.body(props as any as P), Scope.Scope, scope)
-                )
-
-                return React.createElement(
-                    React.Suspense,
-                    suspenseProps,
-                    React.createElement(SuspenseInner, { promise }),
-                )
-            }
-            f.displayName = self.displayName ?? "Anonymous"
-            return f
-        }, [scope])
-
-        return React.createElement(FC, props)
-    }, [])
-})
-
 export const use: {
+    <E, R, P extends {}>(
+        self: Component<E, R, P> & Suspense,
+        fn: (Component: React.FC<P & SuspenseProps>) => React.ReactNode,
+    ): Effect.Effect<React.ReactNode, never, Exclude<R, Scope.Scope>>
     <E, R, P extends {}>(
         self: Component<E, R, P>,
         fn: (Component: React.FC<P>) => React.ReactNode,