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)
+            const f = self.makeFunctionComponent(runtimeRef, scope)
-                ? 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)
-                )
-
             f.displayName = self.displayName ?? "Anonymous"
             return Memoized.isMemoized(self)
                 ? React.memo(f, self.propsAreEqual)

packages/effect-fc/src/Memoized.ts

@@ -6,7 +6,7 @@ export const TypeId: unique symbol = Symbol.for("effect-fc/Memoized")
 export type TypeId = typeof TypeId
 
 export interface Memoized<P> extends Memoized.Options<P> {
-    readonly [TypeId]: true
+    readonly [TypeId]: TypeId
 }
 
 export namespace Memoized {
@@ -16,12 +16,17 @@ export namespace Memoized {
 }
 
 
+const MemoizedProto = Object.freeze({
+    [TypeId]: TypeId
+} as const)
+
+
 export const isMemoized = (u: unknown): u is Memoized<any> => Predicate.hasProperty(u, TypeId)
 
 export const memo = <T extends Component.Component<any, any, any>>(
     self: T
 ): T & Memoized<Component.Component.Props<T>> => Object.setPrototypeOf(
-    { ...self, [TypeId]: true },
+    { ...self, ...MemoizedProto },
     Object.getPrototypeOf(self),
 )
 

packages/effect-fc/src/Suspense.ts

@@ -1,4 +1,5 @@
-import { Function, Predicate } from "effect"
+import { Effect, Function, Predicate, Runtime, Scope } from "effect"
+import * as React from "react"
 import type * as Component from "./Component.js"
 import type { ExcludeKeys } from "./utils.js"
 
@@ -7,7 +8,7 @@ export const TypeId: unique symbol = Symbol.for("effect-fc/Suspense")
 export type TypeId = typeof TypeId
 
 export interface Suspense extends Suspense.Options {
-    readonly [TypeId]: true
+    readonly [TypeId]: TypeId
 }
 
 export namespace Suspense {
@@ -19,6 +20,30 @@ export namespace Suspense {
 }
 
 
+const SuspenseProto = Object.freeze({
+    [TypeId]: TypeId,
+    makeFunctionComponent(
+        this: Component.Component<any, any, any> & Suspense,
+        runtimeRef: React.RefObject<Runtime.Runtime<any>>,
+        scope: Scope.Scope,
+    ): React.FC<any> {
+        const SuspenseInner = (props: { readonly promise: Promise<React.ReactNode> }) => React.use(props.promise)
+
+        return ({ fallback, name, ...props }: Suspense.Props) => {
+            const promise = Runtime.runPromise(runtimeRef.current)(
+                Effect.provideService(this.body(props), Scope.Scope, scope)
+            )
+
+            return React.createElement(
+                React.Suspense,
+                { fallback: fallback ?? this.defaultFallback, name },
+                React.createElement(SuspenseInner, { promise }),
+            )
+        }
+    },
+} as const)
+
+
 export const isSuspense = (u: unknown): u is Suspense => Predicate.hasProperty(u, TypeId)
 
 export const suspense = <T extends Component.Component<any, any, P>, P extends {}>(
@@ -28,7 +53,7 @@ export const suspense = <T extends Component.Component<any, any, P>, P extends {
     & Component.Component<Component.Component.Error<T>, Component.Component.Context<T>, P & Suspense.Props>
     & Suspense
 ) => Object.setPrototypeOf(
-    { ...self, [TypeId]: true },
+    { ...self, ...SuspenseProto },
     Object.getPrototypeOf(self),
 )