Refactoring

packages/effect-fc/src/Component.ts

@@ -1,8 +1,7 @@
-import { Context, Effect, ExecutionStrategy, Function, pipe, Pipeable, Predicate, Runtime, Scope, String, Tracer, type Utils } from "effect"
+import { Context, Effect, ExecutionStrategy, Function, Pipeable, Predicate, Runtime, Scope, String, Tracer, type Utils } from "effect"
 import * as React from "react"
 import * as Hook from "./Hook.js"
 import * as Memoized from "./Memoized.js"
-import * as Suspense from "./Suspense.js"
 
 
 export const TypeId: unique symbol = Symbol.for("effect-fc/Component")
@@ -11,6 +10,7 @@ export type TypeId = typeof TypeId
 export interface Component<E, R, P extends {}> extends Pipeable.Pipeable, Component.Options {
     new(_: never): {}
     readonly [TypeId]: TypeId
+    makeFunctionComponent(runtimeRef: React.Ref<Runtime.Runtime<Exclude<R, Scope.Scope>>>, scope: Scope.Scope): React.FC<P>
     readonly body: (props: P) => Effect.Effect<React.ReactNode, E, R>
 }
 
@@ -27,9 +27,19 @@ export namespace Component {
 }
 
 
-const ComponentProto = Object.seal({
+const ComponentProto = Object.freeze({
     [TypeId]: TypeId,
-    pipe() { return Pipeable.pipeArguments(this, arguments) }
+    pipe() { return Pipeable.pipeArguments(this, arguments) },
+
+    makeFunctionComponent(
+        this: Component<any, any, any>,
+        runtimeRef: React.RefObject<Runtime.Runtime<any>>,
+        scope: Scope.Scope,
+    ): React.FC<any> {
+        return (props: any) => Runtime.runSync(runtimeRef.current)(
+            Effect.provideService(this.body(props), Scope.Scope, scope)
+        )
+    },
 } as const)
 
 const makeWithDefaults = (): Component<any, any, any> => Object.assign(
@@ -341,28 +351,7 @@ export const useFC: {
         ))
 
         const FC = React.useMemo(() => {
-            const f: React.FC<P> = Suspense.isSuspense(self)
-                ? pipe(
-                    function SuspenseInner(props: { readonly promise: Promise<React.ReactNode> }) {
-                        return React.use(props.promise)
-                    },
-
-                    SuspenseInner => ({ fallback, name, ...props }: P & Suspense.Suspense.Props) => {
-                        const promise = Runtime.runPromise(runtimeRef.current)(
-                            Effect.provideService(self.body(props as P), Scope.Scope, scope)
-                        )
-
-                        return React.createElement(
-                            React.Suspense,
-                            { fallback: fallback ?? self.defaultFallback, name },
-                            React.createElement(SuspenseInner, { promise }),
-                        )
-                    },
-                )
-                : (props: P) => Runtime.runSync(runtimeRef.current)(
-                    Effect.provideService(self.body(props), Scope.Scope, scope)
-                )
-
+            const f = self.makeFunctionComponent(runtimeRef, scope)
             f.displayName = self.displayName ?? "Anonymous"
             return Memoized.isMemoized(self)
                 ? React.memo(f, self.propsAreEqual)