Component refactoring

packages/effect-fc/src/Component.ts

@@ -7,17 +7,19 @@ import type { ExcludeKeys } from "./utils.js"
 export interface Component<E, R, P extends {}> extends Pipeable.Pipeable {
     readonly body: (props: P) => Effect.Effect<React.ReactNode, E, R>
     readonly displayName?: string
-    readonly options: Options
+    readonly options: Component.Options
 }
 
-export interface Options {
+export namespace Component {
+    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 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
+}
 
 
 const ComponentProto = {
@@ -27,18 +29,12 @@ const ComponentProto = {
 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,
+    options?: Make.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,
@@ -60,13 +56,16 @@ export const make = <
     }, ComponentProto)
 }
 
-
-export interface Memoized<P extends {}> {
-    readonly memo: true
-    readonly propsAreEqual?: Equivalence.Equivalence<P>
+export namespace Make {
+    export interface MakeOptions {
+        readonly traced?: boolean
+        readonly finalizerExecutionMode?: "sync" | "fork"
+        readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
+    }
 }
 
-export const memo: {
+
+export const withRuntime: {
     <E, R, P extends {}>(
         context: React.Context<Runtime.Runtime<R>>,
     ): (self: Component<E, R | Scope.Scope, P>) => React.FC<P>
@@ -77,11 +76,34 @@ export const memo: {
 } = Function.dual(2, <E, R, P extends {}>(
     self: Component<E, R | Scope.Scope, P>,
     context: React.Context<Runtime.Runtime<R>>,
-): React.FC<P> => {
-
+): React.FC<P> => function WithRuntime(props) {
+    const runtime = React.useContext(context)
+    return React.createElement(Runtime.runSync(runtime)(useFC(self)), props)
 })
 
 
+export interface Memoized<P> {
+    readonly memo: true
+    readonly propsAreEqual?: Equivalence.Equivalence<P>
+}
+
+export const memo: {
+    <T extends Component<any, any, any>>(
+        propsAreEqual?: Equivalence.Equivalence<Component.Props<T>>
+    ): (self: T) => T & Memoized<Component.Props<T>>
+    <T extends Component<any, any, any>>(
+        self: T,
+        propsAreEqual?: Equivalence.Equivalence<Component.Props<T>>,
+    ): T & Memoized<Component.Props<T>>
+} = Function.dual(2, <T extends Component<any, any, any>>(
+    self: T,
+    propsAreEqual?: Equivalence.Equivalence<Component.Props<T>>,
+): T & Memoized<Component.Props<T>> => Object.assign(
+    Object.create(Object.getPrototypeOf(self)),
+    { ...self, memo: true, propsAreEqual },
+))
+
+
 export const useFC: {
     <E, R, P extends {}>(
         self: Component<E, R, P>
@@ -139,7 +161,7 @@ export const useSuspenseFC: {
 
             const f = ({ suspenseProps, ...props }: P & { readonly suspenseProps: React.SuspenseProps }) => {
                 const promise = Runtime.runPromise(runtimeRef.current)(
-                    Effect.provideService(self.body(props as P), Scope.Scope, scope)
+                    Effect.provideService(self.body(props as any as P), Scope.Scope, scope)
                 )
 
                 return React.createElement(
@@ -164,19 +186,3 @@ export const use: {
 } = 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)
-})

packages/example/src/todo/Todo.tsx

@@ -111,3 +111,5 @@ export const Todo = Component.make(function* Todo(props: TodoProps) {
         </Flex>
     )
 })
+
+const MemoizedTodo = Component.memo(Todo)