From 9cfc7072dffafedc496f85e03a92ba6570c82e51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Thu, 7 Aug 2025 03:05:18 +0200
Subject: [PATCH] Component refactoring

---
 packages/effect-fc/src/Component.ts | 346 +++++-----------------------
 1 file changed, 58 insertions(+), 288 deletions(-)

diff --git a/packages/effect-fc/src/Component.ts b/packages/effect-fc/src/Component.ts
index 36205bf..9843bb8 100644
--- a/packages/effect-fc/src/Component.ts
+++ b/packages/effect-fc/src/Component.ts
@@ -1,4 +1,4 @@
-import { Context, Effect, Effectable, ExecutionStrategy, Function, Predicate, Runtime, Scope, String, Tracer, type Utils } from "effect"
+import { Context, Effect, Effectable, ExecutionStrategy, Function, identity, Predicate, Runtime, Scope, String, Tracer, type Types } from "effect"
 import * as React from "react"
 import { Hooks } from "./hooks/index.js"
 import * as Memoized from "./Memoized.js"
@@ -7,20 +7,35 @@ import * as Memoized from "./Memoized.js"
 export const TypeId: unique symbol = Symbol.for("effect-fc/Component")
 export type TypeId = typeof TypeId
 
-export interface Component<P extends {} = {}, E = never, R = never>
-extends Effect.Effect<React.FC<P>, never, Exclude<R, Scope.Scope>>, Component.Options {
+export interface Component<F extends FunctionComponent, E, R>
+extends
+    Effect.Effect<F, never, Exclude<R, Scope.Scope>>,
+    Component.Options
+{
     new(_: never): {}
     readonly [TypeId]: TypeId
+    readonly ["~FunctionComponent"]: F
+    readonly ["~Props"]: FunctionComponent.Props<F>
+    readonly ["~Success"]: FunctionComponent.Success<F>
+    readonly ["~Error"]: E
+    readonly ["~Context"]: R
+
     /** @internal */
-    makeFunctionComponent(runtimeRef: React.Ref<Runtime.Runtime<Exclude<R, Scope.Scope>>>, scope: Scope.Scope): React.FC<P>
+    readonly body: (props: FunctionComponent.Props<F>) => Effect.Effect<FunctionComponent.Success<F>, E, R>
+
     /** @internal */
-    readonly body: (props: P) => Effect.Effect<React.ReactNode, E, R>
+    makeFunctionComponent(
+        runtimeRef: React.Ref<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
+        scope: Scope.Scope,
+    ): F
 }
 
 export namespace Component {
-    export type Props<T> = T extends Component<infer P, infer _E, infer _R> ? P : never
-    export type Error<T> = T extends Component<infer _P, infer E, infer _R> ? E : never
-    export type Context<T> = T extends Component<infer _P, infer _E, infer R> ? R : never
+    export type FunctionComponent<T extends Component<any, any, any>> = T extends Component<infer F, infer _E, infer _R> ? F : never
+    export type Error<T extends Component<any, any, any>> = T extends Component<infer _F, infer E, infer _R> ? E : never
+    export type Context<T extends Component<any, any, any>> = T extends Component<infer _F, infer _E, infer R> ? R : never
+
+    export type AsComponent<T extends Component<any, any, any>> = Component<FunctionComponent<T>, Error<T>, Context<T>>
 
     export interface Options {
         readonly displayName?: string
@@ -29,17 +44,26 @@ export namespace Component {
     }
 }
 
+export type FunctionComponent = (...args: readonly any[]) => React.ReactNode
+
+export namespace FunctionComponent {
+    export type Props<T extends FunctionComponent> = T extends (...args: readonly [infer P, ...any[]]) => infer _A ? P : never
+    export type Success<T extends FunctionComponent> = T extends (...args: infer _Args) => infer A ? A : never
+}
+
 
 const ComponentProto = Object.freeze({
     ...Effectable.CommitPrototype,
     [TypeId]: TypeId,
 
-    commit: Effect.fnUntraced(function* <P extends {}, E, R>(this: Component<P, E, R>) {
+    commit: Effect.fnUntraced(function* <F extends FunctionComponent, E, R>(
+        this: Component<F, E, R>
+    ) {
         const self = this
         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) {
+        return React.useCallback(function ScopeProvider(props: FunctionComponent.Props<F>) {
             const scope = Runtime.runSync(runtimeRef.current)(Hooks.useScope(
                 Array.from(
                     Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
@@ -48,7 +72,7 @@ const ComponentProto = Object.freeze({
             ))
 
             const FC = React.useMemo(() => {
-                const f = self.makeFunctionComponent(runtimeRef, scope)
+                const f: React.FC<FunctionComponent.Props<F>> = self.makeFunctionComponent(runtimeRef, scope)
                 f.displayName = self.displayName ?? "Anonymous"
                 return Memoized.isMemoized(self)
                     ? React.memo(f, self.propsAreEqual)
@@ -59,12 +83,12 @@ const ComponentProto = Object.freeze({
         }, [])
     }),
 
-    makeFunctionComponent <P extends {}, E, R>(
-        this: Component<P, E, R>,
+    makeFunctionComponent<F extends FunctionComponent, E, R>(
+        this: Component<F, E, R>,
         runtimeRef: React.RefObject<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
         scope: Scope.Scope,
-    ): React.FC<P> {
-        return (props: P) => Runtime.runSync(runtimeRef.current)(
+    ) {
+        return (props: FunctionComponent.Props<F>) => Runtime.runSync(runtimeRef.current)(
             Effect.provideService(this.body(props), Scope.Scope, scope)
         )
     },
@@ -78,277 +102,23 @@ const defaultOptions = {
 const nonReactiveTags = [Tracer.ParentSpan] as const
 
 
-export const isComponent = (u: unknown): u is Component<{}, unknown, unknown> => Predicate.hasProperty(u, TypeId)
+export const isComponent = (u: unknown): u is Component<FunctionComponent, unknown, unknown> => Predicate.hasProperty(u, TypeId)
 
-export namespace make {
-    export type Gen = {
-        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, P extends {} = {}>(
-            body: (props: P) => Generator<Eff, React.ReactNode, never>,
-        ): Component<
-            P,
-            [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
-        >
-        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
-            body: (props: P) => Generator<Eff, A, never>,
-            a: (
-                _: Effect.Effect<
-                    A,
-                    [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
-                >,
-                props: NoInfer<P>,
-            ) => B
-        ): Component<P, Effect.Effect.Error<B>, Effect.Effect.Context<B>>
-        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
-            body: (props: P) => Generator<Eff, A, never>,
-            a: (
-                _: Effect.Effect<
-                    A,
-                    [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
-                >,
-                props: NoInfer<P>,
-            ) => B,
-            b: (_: B, props: NoInfer<P>) => C,
-        ): Component<P, Effect.Effect.Error<C>, Effect.Effect.Context<C>>
-        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
-            body: (props: P) => Generator<Eff, A, never>,
-            a: (
-                _: Effect.Effect<
-                    A,
-                    [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
-                >,
-                props: NoInfer<P>,
-            ) => B,
-            b: (_: B, props: NoInfer<P>) => C,
-            c: (_: C, props: NoInfer<P>) => D,
-        ): Component<P, Effect.Effect.Error<D>, Effect.Effect.Context<D>>
-        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
-            body: (props: P) => Generator<Eff, A, never>,
-            a: (
-                _: Effect.Effect<
-                    A,
-                    [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
-                >,
-                props: NoInfer<P>,
-            ) => B,
-            b: (_: B, props: NoInfer<P>) => C,
-            c: (_: C, props: NoInfer<P>) => D,
-            d: (_: D, props: NoInfer<P>) => E,
-        ): Component<P, Effect.Effect.Error<E>, Effect.Effect.Context<E>>
-        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
-            body: (props: P) => Generator<Eff, A, never>,
-            a: (
-                _: Effect.Effect<
-                    A,
-                    [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
-                >,
-                props: NoInfer<P>,
-            ) => B,
-            b: (_: B, props: NoInfer<P>) => C,
-            c: (_: C, props: NoInfer<P>) => D,
-            d: (_: D, props: NoInfer<P>) => E,
-            e: (_: E, props: NoInfer<P>) => F,
-        ): Component<P, Effect.Effect.Error<F>, Effect.Effect.Context<F>>
-        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F, G extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
-            body: (props: P) => Generator<Eff, A, never>,
-            a: (
-                _: Effect.Effect<
-                    A,
-                    [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
-                >,
-                props: NoInfer<P>,
-            ) => B,
-            b: (_: B, props: NoInfer<P>) => C,
-            c: (_: C, props: NoInfer<P>) => D,
-            d: (_: D, props: NoInfer<P>) => E,
-            e: (_: E, props: NoInfer<P>) => F,
-            f: (_: F, props: NoInfer<P>) => G,
-        ): Component<P, Effect.Effect.Error<G>, Effect.Effect.Context<G>>
-        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F, G, H extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
-            body: (props: P) => Generator<Eff, A, never>,
-            a: (
-                _: Effect.Effect<
-                    A,
-                    [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
-                >,
-                props: NoInfer<P>,
-            ) => B,
-            b: (_: B, props: NoInfer<P>) => C,
-            c: (_: C, props: NoInfer<P>) => D,
-            d: (_: D, props: NoInfer<P>) => E,
-            e: (_: E, props: NoInfer<P>) => F,
-            f: (_: F, props: NoInfer<P>) => G,
-            g: (_: G, props: NoInfer<P>) => H,
-        ): Component<P, Effect.Effect.Error<H>, Effect.Effect.Context<H>>
-        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F, G, H, I extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
-            body: (props: P) => Generator<Eff, A, never>,
-            a: (
-                _: Effect.Effect<
-                    A,
-                    [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
-                >,
-                props: NoInfer<P>,
-            ) => B,
-            b: (_: B, props: NoInfer<P>) => C,
-            c: (_: C, props: NoInfer<P>) => D,
-            d: (_: D, props: NoInfer<P>) => E,
-            e: (_: E, props: NoInfer<P>) => F,
-            f: (_: F, props: NoInfer<P>) => G,
-            g: (_: G, props: NoInfer<P>) => H,
-            h: (_: H, props: NoInfer<P>) => I,
-        ): Component<P, Effect.Effect.Error<I>, Effect.Effect.Context<I>>
-        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F, G, H, I, J extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
-            body: (props: P) => Generator<Eff, A, never>,
-            a: (
-                _: Effect.Effect<
-                    A,
-                    [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
-                >,
-                props: NoInfer<P>,
-            ) => B,
-            b: (_: B, props: NoInfer<P>) => C,
-            c: (_: C, props: NoInfer<P>) => D,
-            d: (_: D, props: NoInfer<P>) => E,
-            e: (_: E, props: NoInfer<P>) => F,
-            f: (_: F, props: NoInfer<P>) => G,
-            g: (_: G, props: NoInfer<P>) => H,
-            h: (_: H, props: NoInfer<P>) => I,
-            i: (_: I, props: NoInfer<P>) => J,
-        ): Component<P, Effect.Effect.Error<J>, Effect.Effect.Context<J>>
-    }
-
-    export type NonGen = {
-        <Eff extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
-            body: (props: P) => Eff
-        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
-        <Eff extends Effect.Effect<React.ReactNode, any, any>, A, P extends {} = {}>(
-            body: (props: P) => A,
-            a: (_: A, props: NoInfer<P>) => Eff,
-        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
-        <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, P extends {} = {}>(
-            body: (props: P) => A,
-            a: (_: A, props: NoInfer<P>) => B,
-            b: (_: B, props: NoInfer<P>) => Eff,
-        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
-        <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, P extends {} = {}>(
-            body: (props: P) => A,
-            a: (_: A, props: NoInfer<P>) => B,
-            b: (_: B, props: NoInfer<P>) => C,
-            c: (_: C, props: NoInfer<P>) => Eff,
-        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
-        <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, P extends {} = {}>(
-            body: (props: P) => A,
-            a: (_: A, props: NoInfer<P>) => B,
-            b: (_: B, props: NoInfer<P>) => C,
-            c: (_: C, props: NoInfer<P>) => D,
-            d: (_: D, props: NoInfer<P>) => Eff,
-        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
-        <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, P extends {} = {}>(
-            body: (props: P) => A,
-            a: (_: A, props: NoInfer<P>) => B,
-            b: (_: B, props: NoInfer<P>) => C,
-            c: (_: C, props: NoInfer<P>) => D,
-            d: (_: D, props: NoInfer<P>) => E,
-            e: (_: E, props: NoInfer<P>) => Eff,
-        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
-        <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, F, P extends {} = {}>(
-            body: (props: P) => A,
-            a: (_: A, props: NoInfer<P>) => B,
-            b: (_: B, props: NoInfer<P>) => C,
-            c: (_: C, props: NoInfer<P>) => D,
-            d: (_: D, props: NoInfer<P>) => E,
-            e: (_: E, props: NoInfer<P>) => F,
-            f: (_: F, props: NoInfer<P>) => Eff,
-        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
-        <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, F, G, P extends {} = {}>(
-            body: (props: P) => A,
-            a: (_: A, props: NoInfer<P>) => B,
-            b: (_: B, props: NoInfer<P>) => C,
-            c: (_: C, props: NoInfer<P>) => D,
-            d: (_: D, props: NoInfer<P>) => E,
-            e: (_: E, props: NoInfer<P>) => F,
-            f: (_: F, props: NoInfer<P>) => G,
-            g: (_: G, props: NoInfer<P>) => Eff,
-        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
-        <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, F, G, H, P extends {} = {}>(
-            body: (props: P) => A,
-            a: (_: A, props: NoInfer<P>) => B,
-            b: (_: B, props: NoInfer<P>) => C,
-            c: (_: C, props: NoInfer<P>) => D,
-            d: (_: D, props: NoInfer<P>) => E,
-            e: (_: E, props: NoInfer<P>) => F,
-            f: (_: F, props: NoInfer<P>) => G,
-            g: (_: G, props: NoInfer<P>) => H,
-            h: (_: H, props: NoInfer<P>) => Eff,
-        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
-        <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, F, G, H, I, P extends {} = {}>(
-            body: (props: P) => A,
-            a: (_: A, props: NoInfer<P>) => B,
-            b: (_: B, props: NoInfer<P>) => C,
-            c: (_: C, props: NoInfer<P>) => D,
-            d: (_: D, props: NoInfer<P>) => E,
-            e: (_: E, props: NoInfer<P>) => F,
-            f: (_: F, props: NoInfer<P>) => G,
-            g: (_: G, props: NoInfer<P>) => H,
-            h: (_: H, props: NoInfer<P>) => I,
-            i: (_: I, props: NoInfer<P>) => Eff,
-        ): Component<P, Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>>
-    }
-}
-
-export const make: (
-    & make.Gen
-    & make.NonGen
-    & ((
-        spanName: string,
-        spanOptions?: Tracer.SpanOptions,
-    ) => make.Gen & make.NonGen)
-) = (spanNameOrBody: Function | string, ...pipeables: any[]): any => {
-    if (typeof spanNameOrBody !== "string") {
-        const displayName = displayNameFromBody(spanNameOrBody)
-        return Object.setPrototypeOf(
-            Object.assign(function() {}, defaultOptions, {
-                body: displayName
-                    ? Effect.fn(displayName)(spanNameOrBody as any, ...pipeables as [])
-                    : Effect.fn(spanNameOrBody as any, ...pipeables),
-                displayName,
-            }),
-            ComponentProto,
-        )
-    }
-    else {
-        const spanOptions = pipeables[0]
-        return (body: any, ...pipeables: any[]) => Object.setPrototypeOf(
-            Object.assign(function() {}, defaultOptions, {
-                body: Effect.fn(spanNameOrBody, spanOptions)(body, ...pipeables as []),
-                displayName: displayNameFromBody(body) ?? spanNameOrBody,
-            }),
-            ComponentProto,
-        )
-    }
-}
-
-export const makeUntraced: make.Gen & make.NonGen = (
-    body: Function,
-    ...pipeables: any[]
-) => Object.setPrototypeOf(
+export const make = <Args extends readonly any[], A extends React.ReactNode, E, R>(
+    body: (...args: Args) => Effect.Effect<A, E, R>
+): Component<(...args: Args) => A, E, R> => Object.setPrototypeOf(
     Object.assign(function() {}, defaultOptions, {
-        body: Effect.fnUntraced(body as any, ...pipeables as []),
-        displayName: displayNameFromBody(body),
+        body,
+        displayName: !String.isEmpty(body.name) ? body.name : undefined,
     }),
     ComponentProto,
 )
 
-const displayNameFromBody = (body: Function) => !String.isEmpty(body.name) ? body.name : undefined
+export const withFunctionComponentSignature: {
+    <F extends FunctionComponent>(): <T extends Component<F, any, any>>(self: T) =>
+        & Omit<T, keyof Component.AsComponent<T>>
+        & Component<F, Component.Error<T>, Component.Context<T>>
+} = () => identity
 
 export const withOptions: {
     <T extends Component<any, any, any>>(
@@ -367,17 +137,17 @@ export const withOptions: {
 ))
 
 export const withRuntime: {
-    <P extends {}, E, R>(
+    <F extends FunctionComponent, E, R>(
         context: React.Context<Runtime.Runtime<R>>,
-    ): (self: Component<P, E, R>) => React.FC<P>
-    <P extends {}, E, R>(
-        self: Component<P, E, R>,
+    ): (self: Component<F, E, Types.NoInfer<R>>) => F
+    <F extends FunctionComponent, E, R>(
+        self: Component<F, E, Types.NoInfer<R>>,
         context: React.Context<Runtime.Runtime<R>>,
-    ): React.FC<P>
-} = Function.dual(2, <P extends {}, E, R>(
-    self: Component<P, E, R>,
+    ): F
+} = Function.dual(2, <F extends FunctionComponent, E, R>(
+    self: Component<F, E, R>,
     context: React.Context<Runtime.Runtime<R>>,
-): React.FC<P> => function WithRuntime(props) {
+) => function WithRuntime(props: FunctionComponent.Props<F>) {
     return React.createElement(
         Runtime.runSync(React.useContext(context))(self),
         props,