Refactor Component

2026-02-25 03:09:51 +01:00
parent 0ae55bd02c
commit d0bc4e4903
10 changed files with 118 additions and 102 deletions
--- a/packages/effect-fc/src/Async.ts
+++ b/packages/effect-fc/src/Async.ts
@@ -7,29 +7,27 @@ import * as Component from "./Component.js"
 export const TypeId: unique symbol = Symbol.for("@effect-fc/Async/Async")
 export type TypeId = typeof TypeId

-export interface Async extends Async.Options {
+export interface Async extends AsyncOptions {
    readonly [TypeId]: TypeId
 }

-export namespace Async {
-    export interface Options {
-        readonly defaultFallback?: React.ReactNode
-    }
-
-    export type Props = Omit<React.SuspenseProps, "children">
+export interface AsyncOptions {
+    readonly defaultFallback?: React.ReactNode
 }

+export type AsyncProps = Omit<React.SuspenseProps, "children">

-const AsyncProto = Object.freeze({
+
+export const AsyncPrototype = Object.freeze({
    [TypeId]: TypeId,

-    makeFunctionComponent<P extends {}, A extends React.ReactNode, E, R>(
+    asFunctionComponent<P extends {}, A extends React.ReactNode, E, R>(
        this: Component.Component<P, A, E, R> & Async,
        runtimeRef: React.RefObject<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
    ) {
        const SuspenseInner = (props: { readonly promise: Promise<React.ReactNode> }) => React.use(props.promise)

-        return ({ fallback, name, ...props }: Async.Props) => {
+        return ({ fallback, name, ...props }: AsyncProps) => {
            const promise = Runtime.runPromise(runtimeRef.current)(
                Effect.andThen(
                    Component.useScope([], this),
@@ -54,7 +52,7 @@ export const async = <T extends Component.Component<any, any, any, any>>(
 ): (
    & Omit<T, keyof Component.Component.AsComponent<T>>
    & Component.Component<
-        Component.Component.Props<T> & Async.Props,
+        Component.Component.Props<T> & AsyncProps,
        Component.Component.Success<T>,
        Component.Component.Error<T>,
        Component.Component.Context<T>
@@ -63,22 +61,22 @@ export const async = <T extends Component.Component<any, any, any, any>>(
 ) => Object.setPrototypeOf(
    Object.assign(function() {}, self),
    Object.freeze(Object.setPrototypeOf(
-        Object.assign({}, AsyncProto),
+        Object.assign({}, AsyncPrototype),
        Object.getPrototypeOf(self),
    )),
 )

 export const withOptions: {
    <T extends Component.Component<any, any, any, any> & Async>(
-        options: Partial<Async.Options>
+        options: Partial<AsyncOptions>
    ): (self: T) => T
    <T extends Component.Component<any, any, any, any> & Async>(
        self: T,
-        options: Partial<Async.Options>,
+        options: Partial<AsyncOptions>,
    ): T
 } = Function.dual(2, <T extends Component.Component<any, any, any, any> & Async>(
    self: T,
-    options: Partial<Async.Options>,
+    options: Partial<AsyncOptions>,
 ): T => Object.setPrototypeOf(
    Object.assign(function() {}, self, options),
    Object.getPrototypeOf(self),
--- a/packages/effect-fc/src/Component.ts
+++ b/packages/effect-fc/src/Component.ts
@@ -1,8 +1,7 @@
 /** biome-ignore-all lint/complexity/noBannedTypes: {} is the default type for React props */
 /** biome-ignore-all lint/complexity/useArrowFunction: necessary for class prototypes */
-import { Context, type Duration, Effect, Effectable, Equivalence, ExecutionStrategy, Exit, Fiber, Function, HashMap, Layer, ManagedRuntime, Option, Predicate, Ref, Runtime, Scope, Tracer, type Utils } from "effect"
+import { Context, type Duration, Effect, Equivalence, ExecutionStrategy, Exit, Fiber, Function, HashMap, identity, Layer, ManagedRuntime, Option, Pipeable, Predicate, Ref, Runtime, Scope, Tracer, type Utils } from "effect"
 import * as React from "react"
-import { Memoized } from "./index.js"


 export const TypeId: unique symbol = Symbol.for("@effect-fc/Component/Component")
@@ -16,10 +15,7 @@ export type TypeId = typeof TypeId
 * - a constructor-like object with component metadata and options
 */
 export interface Component<P extends {}, A extends React.ReactNode, E, R>
-extends
-    Effect.Effect<(props: P) => A, never, Exclude<R, Scope.Scope>>,
-    Component.Options
-{
+extends ComponentPrototype<P, A, R>, ComponentOptions {
    new(_: never): Record<string, never>
    readonly [TypeId]: TypeId
    readonly "~Props": P
@@ -28,11 +24,6 @@ extends
    readonly "~Context": R

    readonly body: (props: P) => Effect.Effect<A, E, R>
-
-    /** @internal */
-    makeFunctionComponent(
-        runtimeRef: React.Ref<Runtime.Runtime<Exclude<R, Scope.Scope>>>
-    ): (props: P) => A
 }

 export declare namespace Component {
@@ -42,56 +33,29 @@ export declare namespace Component {
    export type Context<T extends Component<any, any, any, any>> = [T] extends [Component<infer _P, infer _A, infer _E, infer R>] ? R : never

    export type AsComponent<T extends Component<any, any, any, any>> = Component<Props<T>, Success<T>, Error<T>, Context<T>>
-
-    /**
-     * Options that can be set on the component
-     */
-    export interface Options {
-        /** Custom displayName for React DevTools and debugging. */
-        readonly displayName?: string
-
-        /**
-         * Strategy used when executing finalizers on unmount/scope close.
-         * @default ExecutionStrategy.sequential
-         */
-        readonly finalizerExecutionStrategy: ExecutionStrategy.ExecutionStrategy
-
-        /**
-         * Debounce time before executing finalizers after component unmount.
-         * Helps avoid unnecessary work during fast remount/remount cycles.
-         * @default "100 millis"
-         */
-        readonly finalizerExecutionDebounce: Duration.DurationInput
-    }
 }


-const ComponentProto = Object.freeze({
-    ...Effectable.CommitPrototype,
+export interface ComponentPrototype<P extends {}, A extends React.ReactNode, R>
+extends Pipeable.Pipeable {
+    readonly [TypeId]: TypeId
+    readonly use: Effect.Effect<(props: P) => A, never, Exclude<R, Scope.Scope>>
+
+    asFunctionComponent(
+        runtimeRef: React.Ref<Runtime.Runtime<Exclude<R, Scope.Scope>>>
+    ): (props: P) => A
+
+    setFunctionComponentName(f: React.FC<P>): void
+    transformFunctionComponent(f: React.FC<P>): React.FC<P>
+}
+
+export const ComponentPrototype: ComponentPrototype<any, any, any> = Object.freeze({
    [TypeId]: TypeId,
+    ...Pipeable.Prototype,

-    commit: Effect.fnUntraced(function* <P extends {}, A extends React.ReactNode, E, R>(
-        this: Component<P, A, E, R>
-    ) {
-        // biome-ignore lint/style/noNonNullAssertion: React ref initialization
-        const runtimeRef = React.useRef<Runtime.Runtime<Exclude<R, Scope.Scope>>>(null!)
-        runtimeRef.current = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
+    get use() { return use(this) },

-        return yield* React.useState(() => Runtime.runSync(runtimeRef.current)(Effect.cachedFunction(
-            (_services: readonly any[]) => Effect.sync(() => {
-                const f: React.FC<P> = this.makeFunctionComponent(runtimeRef)
-                f.displayName = this.displayName ?? "Anonymous"
-                return Memoized.isMemoized(this)
-                    ? React.memo(f, this.propsAreEqual)
-                    : f
-            }),
-            Equivalence.array(Equivalence.strict()),
-        )))[0](Array.from(
-            Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
-        ))
-    }),
-
-    makeFunctionComponent<P extends {}, A extends React.ReactNode, E, R>(
+    asFunctionComponent<P extends {}, A extends React.ReactNode, E, R>(
        this: Component<P, A, E, R>,
        runtimeRef: React.RefObject<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
    ) {
@@ -102,14 +66,62 @@ const ComponentProto = Object.freeze({
            )
        )
    },
+
+    setFunctionComponentName<P extends {}, A extends React.ReactNode, E, R>(
+        this: Component<P, A, E, R>,
+        f: React.FC<P>,
+    ) {
+        f.displayName = this.displayName ?? "Anonymous"
+    },
+
+    transformFunctionComponent: identity,
 } as const)

-const defaultOptions: Component.Options = {
+const use = Effect.fnUntraced(function* <P extends {}, A extends React.ReactNode, E, R>(
+    self: Component<P, A, E, R>
+) {
+    // biome-ignore lint/style/noNonNullAssertion: React ref initialization
+    const runtimeRef = React.useRef<Runtime.Runtime<Exclude<R, Scope.Scope>>>(null!)
+    runtimeRef.current = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
+
+    return yield* React.useState(() => Runtime.runSync(runtimeRef.current)(Effect.cachedFunction(
+        (_services: readonly any[]) => Effect.sync(() => {
+            const f: React.FC<P> = self.asFunctionComponent(runtimeRef)
+            self.setFunctionComponentName(f)
+            return self.transformFunctionComponent(f)
+        }),
+        Equivalence.array(Equivalence.strict()),
+    )))[0](Array.from(
+        Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
+    ))
+})
+
+
+export interface ComponentOptions {
+    /** Custom displayName for React DevTools and debugging. */
+    readonly displayName?: string
+
+    /**
+     * Strategy used when executing finalizers on unmount/scope close.
+     * @default ExecutionStrategy.sequential
+     */
+    readonly finalizerExecutionStrategy: ExecutionStrategy.ExecutionStrategy
+
+    /**
+     * Debounce time before executing finalizers after component unmount.
+     * Helps avoid unnecessary work during fast remount/remount cycles.
+     * @default "100 millis"
+     */
+    readonly finalizerExecutionDebounce: Duration.DurationInput
+}
+
+export const defaultOptions: ComponentOptions = {
    finalizerExecutionStrategy: ExecutionStrategy.sequential,
    finalizerExecutionDebounce: "100 millis",
 }

-const nonReactiveTags = [Tracer.ParentSpan] as const
+
+export const nonReactiveTags = [Tracer.ParentSpan] as const


 export const isComponent = (u: unknown): u is Component<{}, React.ReactNode, unknown, unknown> => Predicate.hasProperty(u, TypeId)
@@ -365,7 +377,7 @@ export const make: (
            Object.assign(function() {}, defaultOptions, {
                body: Effect.fn(spanNameOrBody as any, ...pipeables),
            }),
-            ComponentProto,
+            ComponentPrototype,
        )
    }
    else {
@@ -375,7 +387,7 @@ export const make: (
                body: Effect.fn(spanNameOrBody, spanOptions)(body, ...pipeables as []),
                displayName: spanNameOrBody,
            }),
-            ComponentProto,
+            ComponentPrototype,
        )
    }
 }
@@ -401,14 +413,14 @@ export const makeUntraced: (
            Object.assign(function() {}, defaultOptions, {
                body: Effect.fnUntraced(spanNameOrBody as any, ...pipeables as []),
            }),
-            ComponentProto,
+            ComponentPrototype,
        )
        : (body: any, ...pipeables: any[]) => Object.setPrototypeOf(
            Object.assign(function() {}, defaultOptions, {
                body: Effect.fnUntraced(body, ...pipeables as []),
                displayName: spanNameOrBody,
            }),
-            ComponentProto,
+            ComponentPrototype,
        )
 )

@@ -417,15 +429,15 @@ export const makeUntraced: (
 */
 export const withOptions: {
    <T extends Component<any, any, any, any>>(
-        options: Partial<Component.Options>
+        options: Partial<ComponentOptions>
    ): (self: T) => T
    <T extends Component<any, any, any, any>>(
        self: T,
-        options: Partial<Component.Options>,
+        options: Partial<ComponentOptions>,
    ): T
 } = Function.dual(2, <T extends Component<any, any, any, any>>(
    self: T,
-    options: Partial<Component.Options>,
+    options: Partial<ComponentOptions>,
 ): T => Object.setPrototypeOf(
    Object.assign(function() {}, self, options),
    Object.getPrototypeOf(self),
@@ -477,7 +489,7 @@ export const withRuntime: {
    context: React.Context<Runtime.Runtime<R>>,
 ) => function WithRuntime(props: P) {
    return React.createElement(
-        Runtime.runSync(React.useContext(context))(self),
+        Runtime.runSync(React.useContext(context))(self.use),
        props,
    )
 })
--- a/packages/effect-fc/src/Memoized.ts
+++ b/packages/effect-fc/src/Memoized.ts
@@ -1,24 +1,30 @@
 /** biome-ignore-all lint/complexity/useArrowFunction: necessary for class prototypes */
 import { type Equivalence, Function, Predicate } from "effect"
+import * as React from "react"
 import type * as Component from "./Component.js"


 export const TypeId: unique symbol = Symbol.for("@effect-fc/Memoized/Memoized")
 export type TypeId = typeof TypeId

-export interface Memoized<P> extends Memoized.Options<P> {
+export interface Memoized<P> extends MemoizedOptions<P> {
    readonly [TypeId]: TypeId
 }

-export namespace Memoized {
-    export interface Options<P> {
-        readonly propsAreEqual?: Equivalence.Equivalence<P>
-    }
+export interface MemoizedOptions<P> {
+    readonly propsEquivalence?: Equivalence.Equivalence<P>
 }


-const MemoizedProto = Object.freeze({
-    [TypeId]: TypeId
+export const MemoizedPrototype = Object.freeze({
+    [TypeId]: TypeId,
+
+    transformComponent<P extends {}>(
+        this: Memoized<P>,
+        f: React.FC<P>,
+    ) {
+        return React.memo(f, this.propsEquivalence)
+    },
 } as const)


@@ -29,22 +35,22 @@ export const memoized = <T extends Component.Component<any, any, any, any>>(
 ): T & Memoized<Component.Component.Props<T>> => Object.setPrototypeOf(
    Object.assign(function() {}, self),
    Object.freeze(Object.setPrototypeOf(
-        Object.assign({}, MemoizedProto),
+        Object.assign({}, MemoizedPrototype),
        Object.getPrototypeOf(self),
    )),
 )

 export const withOptions: {
    <T extends Component.Component<any, any, any, any> & Memoized<any>>(
-        options: Partial<Memoized.Options<Component.Component.Props<T>>>
+        options: Partial<MemoizedOptions<Component.Component.Props<T>>>
    ): (self: T) => T
    <T extends Component.Component<any, any, any, any> & Memoized<any>>(
        self: T,
-        options: Partial<Memoized.Options<Component.Component.Props<T>>>,
+        options: Partial<MemoizedOptions<Component.Component.Props<T>>>,
    ): T
 } = Function.dual(2, <T extends Component.Component<any, any, any, any> & Memoized<any>>(
    self: T,
-    options: Partial<Memoized.Options<Component.Component.Props<T>>>,
+    options: Partial<MemoizedOptions<Component.Component.Props<T>>>,
 ): T => Object.setPrototypeOf(
    Object.assign(function() {}, self, options),
    Object.getPrototypeOf(self),
--- a/packages/example/src/routes/dev/async-rendering.tsx
+++ b/packages/example/src/routes/dev/async-rendering.tsx
@@ -9,8 +9,8 @@ import { runtime } from "@/runtime"

 // Generator version
 const RouteComponent = Component.makeUntraced(function* AsyncRendering() {
-    const MemoizedAsyncComponentFC = yield* MemoizedAsyncComponent
-    const AsyncComponentFC = yield* AsyncComponent
+    const MemoizedAsyncComponentFC = yield* MemoizedAsyncComponent.use
+    const AsyncComponentFC = yield* AsyncComponent.use
    const [input, setInput] = React.useState("")

    return (
@@ -51,7 +51,7 @@ const RouteComponent = Component.makeUntraced(function* AsyncRendering() {


 class AsyncComponent extends Component.makeUntraced("AsyncComponent")(function*() {
-    const SubComponentFC = yield* SubComponent
+    const SubComponentFC = yield* SubComponent.use

    yield* Effect.sleep("500 millis") // Async operation
    // Cannot use React hooks after the async operation
--- a/packages/example/src/routes/dev/context.tsx
+++ b/packages/example/src/routes/dev/context.tsx
@@ -23,7 +23,7 @@ const SubComponent = Component.makeUntraced("SubComponent")(function*() {
 const ContextView = Component.makeUntraced("ContextView")(function*() {
    const [serviceValue, setServiceValue] = React.useState("test")
    const SubServiceLayer = React.useMemo(() => SubService.Default(serviceValue), [serviceValue])
-    const SubComponentFC = yield* Effect.provide(SubComponent, yield* Component.useContext(SubServiceLayer))
+    const SubComponentFC = yield* Effect.provide(SubComponent.use, yield* Component.useContext(SubServiceLayer))

    return (
        <Container>
--- a/packages/example/src/routes/dev/memo.tsx
+++ b/packages/example/src/routes/dev/memo.tsx
@@ -17,8 +17,8 @@ const RouteComponent = Component.makeUntraced("RouteComponent")(function*() {
                onChange={e => setValue(e.target.value)}
            />

-            {yield* Effect.map(SubComponent, FC => <FC />)}
-            {yield* Effect.map(MemoizedSubComponent, FC => <FC />)}
+            {yield* Effect.map(SubComponent.use, FC => <FC />)}
+            {yield* Effect.map(MemoizedSubComponent.use, FC => <FC />)}
        </Flex>
    )
 }).pipe(
--- a/packages/example/src/routes/form.tsx
+++ b/packages/example/src/routes/form.tsx
@@ -70,7 +70,7 @@ class RegisterFormView extends Component.makeUntraced("RegisterFormView")(functi
    ])

    const runPromise = yield* Component.useRunPromise()
-    const TextFieldFormInputFC = yield* TextFieldFormInput
+    const TextFieldFormInputFC = yield* TextFieldFormInput.use

    yield* Component.useOnMount(() => Effect.gen(function*() {
        yield* Effect.addFinalizer(() => Console.log("RegisterFormView unmounted"))
@@ -117,7 +117,7 @@ class RegisterFormView extends Component.makeUntraced("RegisterFormView")(functi

 const RegisterPage = Component.makeUntraced("RegisterPage")(function*() {
    const RegisterFormViewFC = yield* Effect.provide(
-        RegisterFormView,
+        RegisterFormView.use,
        yield* Component.useContext(RegisterForm.Default),
    )

--- a/packages/example/src/routes/index.tsx
+++ b/packages/example/src/routes/index.tsx
@@ -10,7 +10,7 @@ const TodosStateLive = TodosState.Default("todos")

 const Index = Component.makeUntraced("Index")(function*() {
    const TodosFC = yield* Effect.provide(
-        Todos,
+        Todos.use,
        yield* Component.useContext(TodosStateLive),
    )

--- a/packages/example/src/todo/Todo.tsx
+++ b/packages/example/src/todo/Todo.tsx
@@ -83,7 +83,7 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr

    const runSync = yield* Component.useRunSync()
    const runPromise = yield* Component.useRunPromise<DateTime.CurrentTimeZone>()
-    const TextFieldFormInputFC = yield* TextFieldFormInput
+    const TextFieldFormInputFC = yield* TextFieldFormInput.use


    return (
--- a/packages/example/src/todo/Todos.tsx
+++ b/packages/example/src/todo/Todos.tsx
@@ -14,7 +14,7 @@ export class Todos extends Component.makeUntraced("Todos")(function*() {
        Effect.addFinalizer(() => Console.log("Todos unmounted")),
    ))

-    const TodoFC = yield* Todo
+    const TodoFC = yield* Todo.use

    return (
        <Container>