From 130614c4c38729a8ad40f172ea96e06cd4459f1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Mon, 4 May 2026 01:36:10 +0200
Subject: [PATCH] Add Component.withSignature

---
 packages/effect-fc/src/Component.ts           | 23 +++++++++++++++++++
 .../src/lib/form/TextFieldFormInputView.tsx   | 16 +++++++++----
 .../form/TextFieldOptionalFormInputView.tsx   | 16 +++++++++----
 3 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/packages/effect-fc/src/Component.ts b/packages/effect-fc/src/Component.ts
index 8c61e08..c773716 100644
--- a/packages/effect-fc/src/Component.ts
+++ b/packages/effect-fc/src/Component.ts
@@ -500,6 +500,29 @@ export const makeUntraced: (
         )
 )
 
+export declare namespace withSignature {
+    export type Signature = (props: any) => React.ReactNode
+
+    export type Result<
+        T extends Component<any, any, any, any>,
+        F extends React.FC,
+    > = Omit<T, "use" | "asFunctionComponent"> & {
+        readonly use: Effect.Effect<F, never, Exclude<Component.Context<T>, Scope.Scope>>
+        asFunctionComponent(
+            runtimeRef: React.Ref<Runtime.Runtime<Exclude<Component.Context<T>, Scope.Scope>>>
+        ): F
+    }
+}
+
+export const withSignature: {
+    <F extends withSignature.Signature>(): <T extends Component<any, any, any, any>>(
+        self: T
+    ) => withSignature.Result<T, F>
+    <F extends withSignature.Signature, T extends Component<any, any, any, any>>(
+        self: T
+    ): withSignature.Result<T, F>
+} = Function.dual(1, identity)
+
 /**
  * Creates a new component with modified configuration options while preserving all original behavior.
  *
diff --git a/packages/example/src/lib/form/TextFieldFormInputView.tsx b/packages/example/src/lib/form/TextFieldFormInputView.tsx
index 94b0b1f..ca4f843 100644
--- a/packages/example/src/lib/form/TextFieldFormInputView.tsx
+++ b/packages/example/src/lib/form/TextFieldFormInputView.tsx
@@ -1,16 +1,20 @@
 import { Callout, Flex, Spinner, TextField } from "@radix-ui/themes"
 import { Array, Option, Struct } from "effect"
 import { Component, Form, Subscribable } from "effect-fc"
+import type * as React from "react"
 
 
 export declare namespace TextFieldFormInputView {
-    export interface Props extends Omit<TextField.RootProps, "form">, Form.useInput.Options {
-        readonly form: Form.Form<readonly PropertyKey[], any, string>
+    export interface Props<out P extends readonly PropertyKey[], A, ER, EW>
+    extends Omit<TextField.RootProps, "form">, Form.useInput.Options {
+        readonly form: Form.Form<P, A, string, ER, EW>
     }
+
+    export type Signature = <P extends readonly PropertyKey[], A, ER, EW>(props: Props<P, A, ER, EW>) => React.ReactNode
 }
 
-export class TextFieldFormInputView extends Component.make("TextFieldFormInputView")(function*(
-    props: TextFieldFormInputView.Props
+export const TextFieldFormInputView = Component.make("TextFieldFormInputView")(function*(
+    props: TextFieldFormInputView.Props<readonly PropertyKey[], any, any, any>
 ) {
     const input = yield* Form.useInput(props.form, props)
     const [issues, isValidating, isCommitting] = yield* Subscribable.useAll([
@@ -47,4 +51,6 @@ export class TextFieldFormInputView extends Component.make("TextFieldFormInputVi
             })}
         </Flex>
     )
-}) {}
+}).pipe(
+    Component.withSignature<TextFieldFormInputView.Signature>()
+)
diff --git a/packages/example/src/lib/form/TextFieldOptionalFormInputView.tsx b/packages/example/src/lib/form/TextFieldOptionalFormInputView.tsx
index ea5a0c0..68693ea 100644
--- a/packages/example/src/lib/form/TextFieldOptionalFormInputView.tsx
+++ b/packages/example/src/lib/form/TextFieldOptionalFormInputView.tsx
@@ -1,16 +1,20 @@
 import { Callout, Flex, Spinner, Switch, TextField } from "@radix-ui/themes"
 import { Array, Option, Struct } from "effect"
 import { Component, Form, Subscribable } from "effect-fc"
+import type * as React from "react"
 
 
 export declare namespace TextFieldOptionalFormInputView {
-    export interface Props extends Omit<TextField.RootProps, "form" | "defaultValue">, Form.useOptionalInput.Options<string> {
-        readonly form: Form.Form<readonly PropertyKey[], any, Option.Option<string>>
+    export interface Props<out P extends readonly PropertyKey[], A, ER, EW>
+    extends Omit<TextField.RootProps, "form" | "defaultValue">, Form.useOptionalInput.Options<string> {
+        readonly form: Form.Form<P, A, Option.Option<string>, ER, EW>
     }
+
+    export type Signature = <P extends readonly PropertyKey[], A, ER, EW>(props: Props<P, A, ER, EW>) => React.ReactNode
 }
 
-export class TextFieldOptionalFormInputView extends Component.make("TextFieldOptionalFormInputView")(function*(
-    props: TextFieldOptionalFormInputView.Props
+export const TextFieldOptionalFormInputView = Component.make("TextFieldOptionalFormInputView")(function*(
+    props: TextFieldOptionalFormInputView.Props<readonly PropertyKey[], any, any, any>
 ) {
     const input = yield* Form.useOptionalInput(props.form, props)
     const [issues, isValidating, isCommitting] = yield* Subscribable.useAll([
@@ -55,4 +59,6 @@ export class TextFieldOptionalFormInputView extends Component.make("TextFieldOpt
             })}
         </Flex>
     )
-}) {}
+}).pipe(
+    Component.withSignature<TextFieldOptionalFormInputView.Signature>()
+)