diff --git a/packages/effect-fc/src/Component.ts b/packages/effect-fc/src/Component.ts
index d773fc3..ee0d0a5 100644
--- a/packages/effect-fc/src/Component.ts
+++ b/packages/effect-fc/src/Component.ts
@@ -8,6 +8,13 @@ import { Memoized } from "./index.js"
export const TypeId: unique symbol = Symbol.for("@effect-fc/Component/Component")
export type TypeId = typeof TypeId
+/**
+ * Interface representing an Effect-based React Component.
+ *
+ * This is both:
+ * - an Effect that produces a React function component
+ * - a constructor-like object with component metadata and options
+ */
export interface Component
extends
Effect.Effect<(props: P) => A, never, Exclude>,
@@ -20,7 +27,6 @@ extends
readonly "~Error": E
readonly "~Context": R
- /** @internal */
readonly body: (props: P) => Effect.Effect
/** @internal */
@@ -37,9 +43,22 @@ export declare namespace Component {
export type AsComponent> = Component, Success, Error, Context>
+ /**
+ * 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
}
}
@@ -318,6 +337,11 @@ export declare namespace make {
}
}
+/**
+ * Creates an Effect-based React component.
+ *
+ * Follows the `Effect.fn` API. Supports both generator syntax (recommended) and direct Effect composition.
+ */
export const make: (
& make.Gen
& make.NonGen
@@ -346,6 +370,12 @@ export const make: (
}
}
+/**
+ * Same as `make` but creates an untraced version (no automatic span created).
+ * Useful for very low-level utilities or when you want full control over tracing.
+ *
+ * Follows the `Effect.fnUntraced` API.
+ */
export const makeUntraced: (
& make.Gen
& make.NonGen
@@ -367,6 +397,9 @@ export const makeUntraced: (
)
)
+/**
+ * Creates a new component with modified options while preserving original behavior.
+ */
export const withOptions: {
>(
options: Partial
@@ -383,6 +416,39 @@ export const withOptions: {
Object.getPrototypeOf(self),
))
+/**
+ * Wraps an Effect-FC `Component` and turns it into a regular React function component
+ * that serves as an **entrypoint** into an Effect-FC component hierarchy.
+ *
+ * This is the recommended way to connect Effect-FC components to the rest of your React app,
+ * especially when using routers (TanStack Router, React Router, etc.), lazy-loaded routes,
+ * or any place where a standard React component is expected.
+ *
+ * The runtime is obtained from the provided React Context, allowing you to:
+ * - Provide dependencies once at a high level
+ * - Use the same runtime across an entire route tree or feature
+ *
+ * @example Using TanStack Router
+ * ```tsx
+ * // Main
+ * export const runtime = ReactRuntime.make(Layer.empty)
+ * function App() {
+ * return (
+ *
+ *
+ *
+ * )
+ * }
+ *
+ * // Route
+ * export const Route = createFileRoute("/")({
+ * component: withRuntime(HomePage, runtime.context),
+ * })
+ * ```
+ *
+ * @param self - The Effect-FC Component you want to render as a regular React component.
+ * @param context - React Context that holds the Runtime to use for this component tree. See the `ReactRuntime` module to create one.
+ */
export const withRuntime: {
(
context: React.Context>,