Component as class

packages/effect-fc/src/Component.ts

@@ -5,6 +5,8 @@ import type { ExcludeKeys } from "./utils.js"
 
 
 export interface Component<E, R, P extends {}> extends Pipeable.Pipeable {
+    new(_: never): {}
+
     readonly body: (props: P) => Effect.Effect<React.ReactNode, E, R>
     readonly displayName?: string
     readonly options: Component.Options
@@ -21,10 +23,6 @@ export namespace Component {
     }
 }
 
-export interface ComponentClass<E, R, P extends {}> extends Component<E, R, P> {
-
-}
-
 
 const ComponentProto = Object.seal({
     pipe() { return Pipeable.pipeArguments(this, arguments) }

packages/example/src/routes/dev/memo.tsx

@@ -28,16 +28,16 @@ const RouteComponent = Component.make(function* RouteComponent() {
     Component.withRuntime(runtime.context)
 )
 
-const SubComponent = Component.make(function* SubComponent(props: { readonly value?: string }) {
+class SubComponent extends Component.make(function* SubComponent(props: { readonly value?: string }) {
     const id = yield* makeUuid4.pipe(Effect.provide(GetRandomValues.CryptoRandom))
     return <Text>{id}</Text>
-})
+}) {}
 
-const MemoizedSubComponent = SubComponent.pipe(
+class MemoizedSubComponent extends SubComponent.pipe(
     Component.memo,
     Component.suspense,
     Component.memo,
-)
+) {}
 type T = typeof MemoizedSubComponent extends Component.Memoized<infer P> ? P : never
 
 export const Route = createFileRoute("/dev/memo")({