From 3cb3f6d10309b3d0f1e73f9a68b11757dd35c694 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Valverd=C3=A9?= Date: Wed, 11 Mar 2026 21:20:20 +0100 Subject: [PATCH] Update docs --- packages/effect-fc/src/Async.ts | 14 ++--- packages/effect-fc/src/Component.ts | 2 +- packages/effect-fc/src/Memoized.ts | 88 +++++------------------------ 3 files changed, 22 insertions(+), 82 deletions(-) diff --git a/packages/effect-fc/src/Async.ts b/packages/effect-fc/src/Async.ts index 527d1af..03b158d 100644 --- a/packages/effect-fc/src/Async.ts +++ b/packages/effect-fc/src/Async.ts @@ -97,11 +97,11 @@ export const isAsync = (u: unknown): u is Async => Predicate.hasProperty(u, Asyn * Note: The component cannot have a prop named "promise" as it's reserved for internal use. * * @param self - The component to convert to an Async component - * @returns A new Async component with the same body, error, and context types as the input + * @returns A new `Async` component with the same body, error, and context types as the input * * @example * ```ts - * const MyAsyncComponent = Component.make("MyComponent")(function*() { ... }).pipe( + * const MyAsyncComponent = MyComponent.pipe( * Async.async, * ) * ``` @@ -141,18 +141,16 @@ export const async = >( * @example * ```ts * // Curried - * const MyAsyncComponent = Component.make("MyComponent")(function*() { ... }).pipe( + * const MyAsyncComponent = MyComponent.pipe( * Async.async, * Async.withOptions({ defaultFallback:

Loading...

}), * ) * * // Uncurried - * const MyAsyncComponent = Component.make("MyComponent")(function*() { ... }).pipe( - * Async.async, + * const MyAsyncComponent = Async.withOptions( + * Async.async(MyComponent), + * { defaultFallback:

Loading...

}, * ) - * const MyAsyncComponentWithOptions = Async.withOptions(MyAsyncComponent, { - * defaultFallback:

Loading...

, - * }) * ``` */ export const withOptions: { diff --git a/packages/effect-fc/src/Component.ts b/packages/effect-fc/src/Component.ts index 3b76676..8c61e08 100644 --- a/packages/effect-fc/src/Component.ts +++ b/packages/effect-fc/src/Component.ts @@ -511,7 +511,7 @@ export const makeUntraced: ( * const MyComponentWithCustomOptions = MyComponent.pipe( * Component.withOptions({ * finalizerExecutionStrategy: ExecutionStrategy.parallel, - * finalizerExecutionDebounce: "50 millis" + * finalizerExecutionDebounce: "50 millis", * }) * ) * ``` diff --git a/packages/effect-fc/src/Memoized.ts b/packages/effect-fc/src/Memoized.ts index 1e3edca..804d59f 100644 --- a/packages/effect-fc/src/Memoized.ts +++ b/packages/effect-fc/src/Memoized.ts @@ -4,41 +4,18 @@ import * as React from "react" import type * as Component from "./Component.js" -/** - * A unique symbol representing the Memoized component type. - * Used as a type brand to identify Memoized components. - * - * @experimental - */ export const MemoizedTypeId: unique symbol = Symbol.for("@effect-fc/Memoized/Memoized") - -/** - * The type of the Memoized type ID symbol. - */ export type MemoizedTypeId = typeof MemoizedTypeId /** - * A Memoized component that uses React.memo to optimize re-renders based on prop equality. - * Combines Component behavior with Memoized-specific options. + * A trait for `Component`'s that uses `React.memo` to optimize re-renders based on prop equality. * * @template P The props type of the component - * - * @example - * ```ts - * const MyComponent = component({ ... }) - * const MemoizedComponent = memoized(MyComponent) - * ``` */ export interface Memoized

extends MemoizedPrototype, MemoizedOptions

{} -/** - * The prototype object for Memoized components containing their methods and behaviors. - */ export interface MemoizedPrototype { - /** - * The Memoized type ID brand. - */ readonly [MemoizedTypeId]: MemoizedTypeId } @@ -57,27 +34,9 @@ export interface MemoizedOptions

{ } -/** - * The prototype object for Memoized components. - * Provides the `transformFunctionComponent` method for memoizing React function components. - * - * @internal Use the `memoized` function to create Memoized components instead of accessing this directly. - */ export const MemoizedPrototype: MemoizedPrototype = Object.freeze({ [MemoizedTypeId]: MemoizedTypeId, - /** - * Transforms a React function component by wrapping it with React.memo. - * - * @param f - The React function component to memoize - * @returns A memoized version of the component that uses the configured propsEquivalence function - * - * @example - * ```ts - * const MemoizedComponent = memoized(MyComponent) - * const Fn = MemoizedComponent.transformFunctionComponent((props) =>

{props.x}
) - * ``` - */ transformFunctionComponent

( this: Memoized

, f: React.FC

, @@ -87,37 +46,19 @@ export const MemoizedPrototype: MemoizedPrototype = Object.freeze({ } as const) -/** - * A type guard to check if a value is a Memoized component. - * - * @param u - The value to check - * @returns `true` if the value is a Memoized component, `false` otherwise - * - * @example - * ```ts - * if (isMemoized(component)) { - * // component is a Memoized component - * } - * ``` - */ export const isMemoized = (u: unknown): u is Memoized => Predicate.hasProperty(u, MemoizedTypeId) /** - * Converts a Component into a Memoized component that optimizes re-renders using React.memo. - * - * The resulting component will use React.memo to skip re-renders when props haven't changed, - * based on the configured equivalence function (or the default equality check). + * Converts a Component into a `Memoized` component that optimizes re-renders using `React.memo`. * * @param self - The component to convert to a Memoized component - * @returns A Memoized component with the same body, error, and context types as the input + * @returns A new `Memoized` component with the same body, error, and context types as the input * * @example * ```ts - * const MyComponent = component({ - * body: (props) => // ... - * }) - * - * const MemoizedComponent = memoized(MyComponent) + * const MyMemoizedComponent = MyComponent.pipe( + * Memoized.memoized, + * ) * ``` */ export const memoized = >( @@ -141,16 +82,17 @@ export const memoized = >( * * @example * ```ts - * const MemoizedComponent = memoized(MyComponent) + * // Curried + * const MyMemoizedComponent = MyComponent.pipe( + * Memoized.memoized, + * Memoized.withOptions({ propsEquivalence: (a, b) => a.id === b.id }), + * ) * * // Uncurried - * const configured = withOptions(MemoizedComponent, { - * propsEquivalence: (a, b) => a.id === b.id - * }) - * - * // Curried - * const configurer = withOptions({ propsEquivalence: (a, b) => a.id === b.id }) - * const configured = configurer(MemoizedComponent) + * const MyMemoizedComponent = Memoized.withOptions( + * Memoized.memoized(MyComponent), + * { propsEquivalence: (a, b) => a.id === b.id }, + * ) * ``` */ export const withOptions: {