Fix

packages/effect-fc/src/Component.ts

@@ -11,7 +11,7 @@ export type ComponentTypeId = typeof ComponentTypeId
  * Represents an Effect-based React Component that integrates the Effect system with React.
  */
 export interface Component<P extends {}, A extends React.ReactNode, E, R, F extends Component.Signature>
-extends ComponentPrototype<P, R, F>, ComponentOptions {
+extends ComponentPrototype<R, F>, ComponentOptions {
     new(_: never): Record<string, never>
     readonly [ComponentTypeId]: ComponentTypeId
     readonly "~Props": P
@@ -40,27 +40,22 @@ export declare namespace Component {
 }
 
 
-export interface ComponentPrototype<P extends {}, R, F extends Component.Signature>
-extends Pipeable.Pipeable {
-    readonly [ComponentTypeId]: ComponentTypeId
+export interface ComponentImpl<P extends {}, A extends React.ReactNode, E, R, F extends Component.Signature>
+extends Component<P, A, E, R, F>, ComponentImplPrototype<R, F> {}
+
+export interface ComponentImplPrototype<R, F extends Component.Signature> {
     readonly use: Effect.Effect<F, never, Exclude<R, Scope.Scope>>
 
-    asFunctionComponent(
-        runtimeRef: React.Ref<Runtime.Runtime<Exclude<R, Scope.Scope>>>
-    ): F
-
-    setFunctionComponentName(f: React.FC<P>): void
-    transformFunctionComponent(f: React.FC<P>): React.FC<P>
+    asFunctionComponent(runtimeRef: React.Ref<Runtime.Runtime<Exclude<R, Scope.Scope>>>): F
+    setFunctionComponentName(f: F): void
+    transformFunctionComponent(f: F): F
 }
 
-export const ComponentPrototype: ComponentPrototype<any, any, any> = Object.freeze({
-    [ComponentTypeId]: ComponentTypeId,
-    ...Pipeable.Prototype,
-
+export const ComponentImplPrototype: ComponentImplPrototype<any, any> = Object.freeze({
     get use() { return use(this) },
 
     asFunctionComponent<P extends {}, A extends React.ReactNode, E, R, F extends Component.Signature>(
-        this: Component<P, A, E, R, F>,
+        this: ComponentImpl<P, A, E, R, F>,
         runtimeRef: React.RefObject<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
     ) {
         return (props: P) => Runtime.runSync(runtimeRef.current)(
@@ -72,7 +67,7 @@ export const ComponentPrototype: ComponentPrototype<any, any, any> = Object.free
     },
 
     setFunctionComponentName<P extends {}, A extends React.ReactNode, E, R, F extends Component.Signature>(
-        this: Component<P, A, E, R, F>,
+        this: ComponentImpl<P, A, E, R, F>,
         f: React.FC<P>,
     ) {
         f.displayName = this.displayName ?? "Anonymous"
@@ -82,7 +77,7 @@ export const ComponentPrototype: ComponentPrototype<any, any, any> = Object.free
 } as const)
 
 const use = Effect.fnUntraced(function* <P extends {}, A extends React.ReactNode, E, R, F extends Component.Signature>(
-    self: Component<P, A, E, R, F>
+    self: ComponentImpl<P, A, E, R, F>
 ) {
     // biome-ignore lint/style/noNonNullAssertion: React ref initialization
     const runtimeRef = React.useRef<Runtime.Runtime<Exclude<R, Scope.Scope>>>(null!)
@@ -101,6 +96,19 @@ const use = Effect.fnUntraced(function* <P extends {}, A extends React.ReactNode
 })
 
 
+export interface ComponentPrototype<R, F extends Component.Signature>
+extends Pipeable.Pipeable {
+    readonly [ComponentTypeId]: ComponentTypeId
+    readonly use: Effect.Effect<F, never, Exclude<R, Scope.Scope>>
+}
+
+export const ComponentPrototype: ComponentPrototype<any, any> = Object.freeze({
+    [ComponentTypeId]: ComponentTypeId,
+    ...Pipeable.Prototype,
+    ...ComponentImplPrototype,
+} as const)
+
+
 export interface ComponentOptions {
     /**
      * Custom display name for the component in React DevTools and debugging utilities.