effect-view/packages/effect-fc/src/Component.ts

import { Context, Effect, ExecutionStrategy, Function, Pipeable, Runtime, Scope, String, Tracer, type Types, type Utils } from "effect"
import * as React from "react"
import * as Hook from "./Hook.js"


export interface Component<E, R, P extends {}> extends Pipeable.Pipeable {
    (props: P): Effect.Effect<React.ReactNode, E, R>
    readonly displayName?: string
    readonly options: Options
}

export interface Options {
    readonly finalizerExecutionMode: "sync" | "fork"
    readonly finalizerExecutionStrategy: ExecutionStrategy.ExecutionStrategy
}

export type Error<T> = T extends Component<infer E, infer _R, infer _P> ? E : never
export type Context<T> = T extends Component<infer _E, infer R, infer _P> ? R : never
export type Props<T> = T extends Component<infer _E, infer _R, infer P> ? P : never

export const nonReactiveTags = [Tracer.ParentSpan] as const


export interface MakeOptions {
    readonly traced?: boolean
    readonly finalizerExecutionMode?: "sync" | "fork"
    readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
}

export const make = <
    Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>,
    P extends {} = {},
>(
    body: (props: P) => Generator<Eff, React.ReactNode, never>,
    options?: MakeOptions,
): Component<
    [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 Component<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 = {
        finalizerExecutionMode: options?.finalizerExecutionMode ?? "sync",
        finalizerExecutionStrategy: options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential,
    }

    return f
}


export const useFC: {
    <E, R, P extends {}>(
        self: Component<E, R, P>
    ): Effect.Effect<React.FC<P>, never, Exclude<R, Scope.Scope>>
} = Effect.fn("useFC")(function* <E, R, P extends {}>(
    self: Component<E, R, P>
) {
    const runtimeRef = React.useRef<Runtime.Runtime<Exclude<R, Scope.Scope>>>(null!)
    runtimeRef.current = yield* Effect.runtime<Exclude<R, Scope.Scope>>()

    return React.useCallback(function ScopeProvider(props: P) {
        const scope = Runtime.runSync(runtimeRef.current)(Hook.useScope(
            Array.from(
                Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
            ),
            self.options,
        ))

        const FC = React.useMemo(() => {
            const f = (props: P) => Runtime.runSync(runtimeRef.current)(
                Effect.provideService(self(props), Scope.Scope, scope)
            )
            f.displayName = self.displayName ?? "Anonymous"
            return f
        }, [scope])

        return React.createElement(FC, props)
    }, [])
})

export const useSuspenseFC: {
    <E, R, P extends {}>(
        self: Component<E, R, P>
    ): Effect.Effect<React.FC<P>, never, Exclude<R, Scope.Scope>>
} = Effect.fn("useSuspenseFC")(function* <E, R, P extends {}>(
    self: Component<E, R, P>
) {
    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 = Runtime.runSync(runtimeRef.current)(Hook.useScope([], self.options))

        const FC = React.useMemo(() => {
            const inner = (props: { readonly promise: Promise<React.ReactNode> }) => React.use(props.promise)

            const f = (props: P) => {
                const promise = Runtime.runPromise(runtimeRef.current)(
                    Effect.provideService(self(props), Scope.Scope, scope)
                )
                return React.createElement(
                    React.Suspense,
                    { fallback: "Loading..." },
                    React.createElement(inner, { promise }),
                )
            }
            f.displayName = self.displayName ?? "Anonymous"
            return f
        }, [scope])

        return React.createElement(FC, props)
    }, Array.from(
        Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
    ))
})

export const use: {
    <E, R, P extends {}>(
        self: Component<E, R, P>,
        fn: (Component: React.FC<P>) => React.ReactNode,
    ): Effect.Effect<React.ReactNode, never, Exclude<R, Scope.Scope>>
} = Effect.fn("use")(function*(self, fn) {
    return fn(yield* useFC(self))
})

export const withRuntime: {
    <E, R, P extends {}>(
        context: React.Context<Runtime.Runtime<R>>,
    ): (self: Component<E, R | Scope.Scope, P>) => React.FC<P>
    <E, R, P extends {}>(
        self: Component<E, R | Scope.Scope, P>,
        context: React.Context<Runtime.Runtime<R>>,
    ): React.FC<P>
} = Function.dual(2, <E, R, P extends {}>(
    self: Component<E, R | Scope.Scope, P>,
    context: React.Context<Runtime.Runtime<R>>,
): React.FC<P> => function WithRuntime(props) {
    const runtime = React.useContext(context)
    return React.createElement(Runtime.runSync(runtime)(useFC(self)), props)
})