From 79cf1e5eb75ea085df635a27deb11e83012815aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Wed, 25 Jun 2025 21:51:46 +0200
Subject: [PATCH] API change

---
 .../effect-components/src/ReactComponent.ts   | 24 ++++++-------------
 packages/effect-components/src/index.ts       |  1 +
 .../src/routes/effect-component-tests.tsx     | 12 ++++++----
 3 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/packages/effect-components/src/ReactComponent.ts b/packages/effect-components/src/ReactComponent.ts
index a099a97..a7bf827 100644
--- a/packages/effect-components/src/ReactComponent.ts
+++ b/packages/effect-components/src/ReactComponent.ts
@@ -3,23 +3,13 @@ import type * as React from "react"
 
 
 export interface ReactComponent<P, E, R> {
-    readonly fn: (props: P) => Effect.Effect<React.ReactNode, E, R | Scope.Scope>
-    use(callback: (Component: React.FC<P>) => React.ReactNode): Effect.Effect<React.ReactNode, never, R>
+    (props: P): Effect.Effect<React.ReactNode, E, R | Scope.Scope>
 }
 
-const ReactComponentPrototype: Omit<ReactComponent<any, any, any>, "fn"> = {
-    use(this: ReactComponent<any, any, any>, callback) {
-        return Effect.map(
-            Effect.runtime(),
-            runtime => callback(props => Runtime.runSync(runtime)(this.fn(props))),
-        )
-    }
-}
-
-
-export const make = <P, E, R>(
-    fn: (props: P) => Effect.Effect<React.ReactNode, E, R | Scope.Scope>
-): ReactComponent<P, E, R> => Object.setPrototypeOf(
-    { fn },
-    ReactComponentPrototype,
+export const use = <P, E, R>(
+    self: ReactComponent<P, E, R>,
+    fn: (Component: React.FC<P>) => React.ReactNode
+): Effect.Effect<React.ReactNode, never, R | Scope.Scope> => Effect.map(
+    Effect.runtime(),
+    runtime => fn(props => Runtime.runSync(runtime)(self(props))),
 )
diff --git a/packages/effect-components/src/index.ts b/packages/effect-components/src/index.ts
index 2a7528e..17a9fe1 100644
--- a/packages/effect-components/src/index.ts
+++ b/packages/effect-components/src/index.ts
@@ -1 +1,2 @@
 export * as ReactComponent from "./ReactComponent.js"
+export { use } from "./ReactComponent.js"
diff --git a/packages/example/src/routes/effect-component-tests.tsx b/packages/example/src/routes/effect-component-tests.tsx
index 38a21b2..6a506fd 100644
--- a/packages/example/src/routes/effect-component-tests.tsx
+++ b/packages/example/src/routes/effect-component-tests.tsx
@@ -1,7 +1,7 @@
 import { Box, Text, TextField } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { Console, Effect, Layer, ManagedRuntime, Runtime } from "effect"
-import { ReactComponent } from "effect-components"
+import { use } from "effect-components"
 import * as React from "react"
 
 
@@ -13,14 +13,16 @@ function RouteComponent() {
     const runtime = React.useMemo(() => ManagedRuntime.make(Layer.empty), [])
 
     return <>
-        {runtime.runSync(MyTestComponent.use(Component => (
+        {runtime.runSync(use(MyTestComponent, Component => (
             <Component />
-        )))}
+        )).pipe(
+            Effect.scoped
+        ))}
     </>
 }
 
 
-const MyTestComponent = ReactComponent.make(Effect.fn(function* MyTestComponent(props?: { readonly value?: string }) {
+const MyTestComponent = Effect.fn(function* MyTestComponent(props?: { readonly value?: string }) {
     const [state, setState] = React.useState("value")
     const effectValue = yield* Effect.succeed(`state: ${ state }`)
 
@@ -36,7 +38,7 @@ const MyTestComponent = ReactComponent.make(Effect.fn(function* MyTestComponent(
             />
         </Box>
     </>
-}))
+})
 
 
 const useEffect = <A, E, R>(