Component refactoring

packages/effect-fc/src/ReactComponent.ts

@@ -1,47 +1,71 @@
-import { Context, Effect, ExecutionStrategy, Exit, Function, Ref, Runtime, Scope, Tracer } from "effect"
+import { Context, Effect, ExecutionStrategy, Exit, Function, Pipeable, Ref, Runtime, Scope, String, Tracer, type Types, type Utils } from "effect"
-import type { Mutable } from "effect/Types"
 import * as React from "react"
-import type * as ReactHook from "./ReactHook.js"
 
 
-export interface ReactComponent<E, R, P> {
+export interface ReactComponent<E, R, P> extends Pipeable.Pipeable {
     (props: P): Effect.Effect<React.ReactNode, E, R>
     readonly displayName?: string
+    readonly options: Options
 }
 
-export type Error<T> = T extends ReactComponent<infer E, any, any> ? E : never
+export interface Options {
-export type Context<T> = T extends ReactComponent<any, infer R, any> ? R : never
+    readonly finalizerExecutionMode: "sync" | "fork"
-export type Props<T> = T extends ReactComponent<any, any, infer P> ? P : never
+    readonly finalizerExecutionStrategy: ExecutionStrategy.ExecutionStrategy
+}
+
+export type Error<T> = T extends ReactComponent<infer E, infer _R, infer _P> ? E : never
+export type Context<T> = T extends ReactComponent<infer _E, infer R, infer _P> ? R : never
+export type Props<T> = T extends ReactComponent<infer _E, infer _R, infer P> ? P : never
 
 export const nonReactiveTags = [Tracer.ParentSpan] as const
 
 
-export const withDisplayName: {
+export interface MakeOptions {
-    <C extends ReactComponent<any, any, any>>(displayName: string): (self: C) => C
+    readonly traced?: boolean
-    <C extends ReactComponent<any, any, any>>(self: C, displayName: string): C
+    readonly finalizerExecutionMode?: "sync" | "fork"
-} = Function.dual(2, <C extends ReactComponent<any, any, any>>(
+    readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
-    self: C,
+}
-    displayName: string,
+
-): C => {
+export const make = <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, P>(
-    (self as Mutable<C>).displayName = displayName
+    body: (props: P) => Generator<Eff, React.ReactNode, never>,
-    return self
+    options?: MakeOptions,
-})
+): ReactComponent<
+    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E : never,
+    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R : never,
+    P
+> => {
+    const displayName = !String.isEmpty(body.name) ? body.name : undefined
+
+    const f = ((options?.traced ?? true)
+        ? displayName
+            ? Effect.fn(displayName)(body)
+            : Effect.fn(body)
+        : Effect.fnUntraced(body)
+    ) as ReactComponent<any, any, any>
+
+    f.pipe = function pipe() { return Pipeable.pipeArguments(this, arguments) };
+    (f as Types.Mutable<typeof f>).displayName = displayName;
+    (f as Types.Mutable<typeof f>).options = {
+        finalizerExecutionStrategy: options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential,
+        finalizerExecutionMode: options?.finalizerExecutionMode ?? "sync",
+    }
+
+    return f
+}
 
 
 export const useFC: {
     <E, R, P extends {} = {}>(
-        self: ReactComponent<E, R, P>,
+        self: ReactComponent<E, R, P>
-        options?: ReactHook.ScopeOptions,
     ): Effect.Effect<React.FC<P>, never, Exclude<R, Scope.Scope>>
 } = Effect.fnUntraced(function* <E, R, P extends {}>(
-    self: ReactComponent<E, R, P>,
+    self: ReactComponent<E, R, P>
-    options?: ReactHook.ScopeOptions,
 ) {
     const runtimeRef = React.useRef<Runtime.Runtime<Exclude<R, Scope.Scope>>>(null!)
     runtimeRef.current = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
 
     return React.useMemo(() => function ScopeProvider(props: P) {
-        const scope = useScope(runtimeRef.current, options)
+        const scope = useScope(runtimeRef.current, self.options)
 
         const FC = React.useMemo(() => {
             const f = (props: P) => Runtime.runSync(runtimeRef.current)(
@@ -59,10 +83,10 @@ export const useFC: {
 
 const useScope = (
     runtime: Runtime.Runtime<never>,
-    options?: ReactHook.ScopeOptions,
+    options: Options,
 ) => {
     const [isInitialRun, initialScope] = React.useMemo(() => Runtime.runSync(runtime)(
-        Effect.all([Ref.make(true), makeScope(options)])
+        Effect.all([Ref.make(true), Scope.make(options.finalizerExecutionStrategy)])
     ), [])
     const [scope, setScope] = React.useState(initialScope)
 
@@ -73,7 +97,7 @@ const useScope = (
                 () => closeScope(scope, runtime, options),
             ),
 
-            onFalse: () => makeScope(options).pipe(
+            onFalse: () => Scope.make(options.finalizerExecutionStrategy).pipe(
                 Effect.tap(scope => Effect.sync(() => setScope(scope))),
                 Effect.map(scope => () => closeScope(scope, runtime, options)),
             ),
@@ -83,13 +107,12 @@ const useScope = (
     return scope
 }
 
-const makeScope = (options?: ReactHook.ScopeOptions) => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)
 const closeScope = (
     scope: Scope.CloseableScope,
     runtime: Runtime.Runtime<never>,
-    options?: ReactHook.ScopeOptions,
+    options: Options,
 ) => {
-    switch (options?.finalizerExecutionMode ?? "sync") {
+    switch (options.finalizerExecutionMode) {
         case "sync":
             Runtime.runSync(runtime)(Scope.close(scope, Exit.void))
             break
@@ -104,27 +127,23 @@ export const use: {
     <E, R, P extends {} = {}>(
         self: ReactComponent<E, R, P>,
         fn: (Component: React.FC<P>) => React.ReactNode,
-        options?: ReactHook.ScopeOptions,
     ): Effect.Effect<React.ReactNode, never, Exclude<R, Scope.Scope>>
-} = Effect.fnUntraced(function*(self, fn, options) {
+} = Effect.fnUntraced(function*(self, fn) {
-    return fn(yield* useFC(self, options))
+    return fn(yield* useFC(self))
 })
 
 export const withRuntime: {
     <E, R, P extends {} = {}>(
         context: React.Context<Runtime.Runtime<R>>,
-        options?: ReactHook.ScopeOptions,
     ): (self: ReactComponent<E, R | Scope.Scope, P>) => React.FC<P>
     <E, R, P extends {} = {}>(
         self: ReactComponent<E, R | Scope.Scope, P>,
         context: React.Context<Runtime.Runtime<R>>,
-        options?: ReactHook.ScopeOptions,
     ): React.FC<P>
-} = Function.dual(3, <E, R, P extends {}>(
+} = Function.dual(2, <E, R, P extends {}>(
     self: ReactComponent<E, R | Scope.Scope, P>,
     context: React.Context<Runtime.Runtime<R>>,
-    options?: ReactHook.ScopeOptions,
 ): React.FC<P> => function WithRuntime(props) {
     const runtime = React.useContext(context)
-    return React.createElement(Runtime.runSync(runtime)(useFC(self, options)), props)
+    return React.createElement(Runtime.runSync(runtime)(useFC(self)), props)
 })

packages/effect-fc/src/ReactHook.ts

@@ -4,8 +4,8 @@ import { SetStateAction } from "./types/index.js"
 
 
 export interface ScopeOptions {
-    readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
     readonly finalizerExecutionMode?: "sync" | "fork"
+    readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
 }
 
 

packages/example/src/routes/index.tsx

@@ -2,20 +2,17 @@ import { runtime } from "@/runtime"
 import { Todos } from "@/todo/Todos"
 import { TodosState } from "@/todo/TodosState.service"
 import { createFileRoute } from "@tanstack/react-router"
-import { Effect, pipe } from "effect"
+import { Effect } from "effect"
 import { ReactComponent, ReactHook } from "effect-fc"
 
 
 export const Route = createFileRoute("/")({
-    component: pipe(
+    component: ReactComponent.make(function* Index() {
-        Effect.fn("Route")(function*() {
         return yield* Effect.provide(
             ReactComponent.use(Todos, Todos => <Todos />),
             yield* ReactHook.useMemoLayer(TodosState.Default("todos")),
         )
-        }),
+    }).pipe(
-
+        ReactComponent.withRuntime(runtime.context),
-        ReactComponent.withDisplayName("Index"),
-        ReactComponent.withRuntime(runtime.context, { finalizerExecutionMode: "fork" }),
     )
 })

packages/example/src/todo/Todo.tsx

@@ -1,7 +1,7 @@
 import * as Domain from "@/domain"
 import { Button, Flex, TextArea } from "@radix-ui/themes"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
-import { Chunk, Effect, Match, Option, pipe, Ref, Runtime, SubscriptionRef } from "effect"
+import { Chunk, Effect, Match, Option, Ref, Runtime, SubscriptionRef } from "effect"
 import { ReactComponent, ReactHook } from "effect-fc"
 import { SubscriptionSubRef } from "effect-fc/types"
 import * as React from "react"
@@ -19,8 +19,7 @@ export type TodoProps = (
     }
 )
 
-export const Todo = pipe(
+export const Todo = ReactComponent.make(function* Todo(props: TodoProps) {
-    Effect.fn(function*(props: TodoProps) {
     const runtime = yield* Effect.runtime()
     const state = yield* TodosState
 
@@ -56,10 +55,7 @@ export const Todo = pipe(
             }
         </Flex>
     )
-    }),
+})
-
-    ReactComponent.withDisplayName("Todo"),
-)
 
 
 const makeTodo = makeUuid4.pipe(

packages/example/src/todo/Todos.tsx

@@ -1,5 +1,5 @@
 import { Container, Flex, Heading } from "@radix-ui/themes"
-import { Chunk, Effect, pipe } from "effect"
+import { Chunk } from "effect"
 import { ReactComponent, ReactHook } from "effect-fc"
 import { SubscriptionSubRef } from "effect-fc/types"
 import * as React from "react"
@@ -7,8 +7,7 @@ import { Todo } from "./Todo"
 import { TodosState } from "./TodosState.service"
 
 
-export const Todos = pipe(
+export const Todos = ReactComponent.make(function* Todos() {
-    Effect.fn(function*() {
     const state = yield* TodosState
     const [todos] = yield* ReactHook.useSubscribeRefs(state.ref)
 
@@ -28,18 +27,14 @@ export const Todos = pipe(
             </Flex>
         </Container>
     )
-    }),
+})
-
-    ReactComponent.withDisplayName("Todos"),
-)
 
 
 interface TodosItemProps {
     readonly index: number
 }
 
-const TodosItem = pipe(
+const TodosItem = ReactComponent.make(function* TodosItem(props: TodosItemProps) {
-    Effect.fn(function*(props: TodosItemProps) {
     const state = yield* TodosState
     const ref = React.useMemo(() => SubscriptionSubRef.makeFromGetSet(state.ref, {
         get: parent => Chunk.unsafeGet(parent, props.index),
@@ -49,7 +44,4 @@ const TodosItem = pipe(
     return yield* ReactComponent.use(Todo, Todo =>
         <Todo _tag="edit" ref={ref} />
     )
-    }),
+})
-
-    ReactComponent.withDisplayName("TodosItem"),
-)