API change

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(
+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 => 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,
+    runtime => fn(props => Runtime.runSync(runtime)(self(props))),
 )

packages/effect-components/src/index.ts

@@ -1 +1,2 @@
 export * as ReactComponent from "./ReactComponent.js"
+export { use } from "./ReactComponent.js"

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>(