Update dependency @vitejs/plugin-react to v6

packages/effect-fc/src/Async.ts

@@ -1,5 +1,5 @@
 /** biome-ignore-all lint/complexity/useArrowFunction: necessary for class prototypes */
-import { Effect, Function, Predicate, Runtime, Scope } from "effect"
+import { Effect, type Equivalence, Function, Predicate, Runtime, Scope } from "effect"
 import * as React from "react"
 import * as Component from "./Component.js"
 
@@ -7,16 +7,30 @@ import * as Component from "./Component.js"
 export const AsyncTypeId: unique symbol = Symbol.for("@effect-fc/Async/Async")
 export type AsyncTypeId = typeof AsyncTypeId
 
+
+/**
+ * A trait for `Component`'s that allows them running asynchronous effects.
+ */
 export interface Async extends AsyncPrototype, AsyncOptions {}
 
 export interface AsyncPrototype {
     readonly [AsyncTypeId]: AsyncTypeId
 }
 
+/**
+ * Configuration options for `Async` components.
+ */
 export interface AsyncOptions {
+    /**
+     * The default fallback React node to display while the async operation is pending.
+     * Used if no fallback is provided to the component when rendering.
+     */
     readonly defaultFallback?: React.ReactNode
 }
 
+/**
+ * Props for `Async` components.
+ */
 export type AsyncProps = Omit<React.SuspenseProps, "children">
 
 
@@ -46,9 +60,52 @@ export const AsyncPrototype: AsyncPrototype = Object.freeze({
     },
 } as const)
 
+/**
+ * An equivalence function for comparing `AsyncProps` that ignores the `fallback` property.
+ * Used by default by async components with `Memoized.memoized` applied.
+ */
+export const defaultPropsEquivalence: Equivalence.Equivalence<AsyncProps> = (
+    self: Record<string, unknown>,
+    that: Record<string, unknown>,
+) => {
+    if (self === that)
+        return true
+
+    for (const key in self) {
+        if (key === "fallback")
+            continue
+        if (!(key in that) || !Object.is(self[key], that[key]))
+            return false
+    }
+
+    for (const key in that) {
+        if (key === "fallback")
+            continue
+        if (!(key in self))
+            return false
+    }
+
+    return true
+}
+
 
 export const isAsync = (u: unknown): u is Async => Predicate.hasProperty(u, AsyncTypeId)
 
+/**
+ * Converts a Component into an `Async` component that supports running asynchronous effects.
+ *
+ * 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
+ *
+ * @example
+ * ```ts
+ * const MyAsyncComponent = MyComponent.pipe(
+ *   Async.async,
+ * )
+ * ```
+ */
 export const async = <T extends Component.Component<any, any, any, any>>(
     self: T & (
         "promise" extends keyof Component.Component.Props<T>
@@ -65,13 +122,37 @@ export const async = <T extends Component.Component<any, any, any, any>>(
     >
     & Async
 ) => Object.setPrototypeOf(
-    Object.assign(function() {}, self),
+    Object.assign(function() {}, self, { propsEquivalence: defaultPropsEquivalence }),
     Object.freeze(Object.setPrototypeOf(
         Object.assign({}, AsyncPrototype),
         Object.getPrototypeOf(self),
     )),
 )
 
+/**
+ * Applies options to an Async component, returning a new Async component with the updated configuration.
+ *
+ * Supports both curried and uncurried application styles.
+ *
+ * @param self - The Async component to apply options to (in uncurried form)
+ * @param options - The options to apply to the component
+ * @returns An Async component with the applied options
+ *
+ * @example
+ * ```ts
+ * // Curried
+ * const MyAsyncComponent = MyComponent.pipe(
+ *   Async.async,
+ *   Async.withOptions({ defaultFallback: <p>Loading...</p> }),
+ * )
+ *
+ * // Uncurried
+ * const MyAsyncComponent = Async.withOptions(
+ *   Async.async(MyComponent),
+ *   { defaultFallback: <p>Loading...</p> },
+ * )
+ * ```
+ */
 export const withOptions: {
     <T extends Component.Component<any, any, any, any> & Async>(
         options: Partial<AsyncOptions>

packages/effect-fc/src/Component.ts

@@ -4,8 +4,8 @@ import { Context, type Duration, Effect, Equivalence, ExecutionStrategy, Exit, F
 import * as React from "react"
 
 
-export const TypeId: unique symbol = Symbol.for("@effect-fc/Component/Component")
+export const ComponentTypeId: unique symbol = Symbol.for("@effect-fc/Component/Component")
-export type TypeId = typeof TypeId
+export type ComponentTypeId = typeof ComponentTypeId
 
 /**
  * Represents an Effect-based React Component that integrates the Effect system with React.
@@ -13,7 +13,7 @@ export type TypeId = typeof TypeId
 export interface Component<P extends {}, A extends React.ReactNode, E, R>
 extends ComponentPrototype<P, A, R>, ComponentOptions {
     new(_: never): Record<string, never>
-    readonly [TypeId]: TypeId
+    readonly [ComponentTypeId]: ComponentTypeId
     readonly "~Props": P
     readonly "~Success": A
     readonly "~Error": E
@@ -34,7 +34,7 @@ export declare namespace Component {
 
 export interface ComponentPrototype<P extends {}, A extends React.ReactNode, R>
 extends Pipeable.Pipeable {
-    readonly [TypeId]: TypeId
+    readonly [ComponentTypeId]: ComponentTypeId
     readonly use: Effect.Effect<(props: P) => A, never, Exclude<R, Scope.Scope>>
 
     asFunctionComponent(
@@ -46,7 +46,7 @@ extends Pipeable.Pipeable {
 }
 
 export const ComponentPrototype: ComponentPrototype<any, any, any> = Object.freeze({
-    [TypeId]: TypeId,
+    [ComponentTypeId]: ComponentTypeId,
     ...Pipeable.Prototype,
 
     get use() { return use(this) },
@@ -88,7 +88,7 @@ const use = Effect.fnUntraced(function* <P extends {}, A extends React.ReactNode
         }),
         Equivalence.array(Equivalence.strict()),
     )))[0](Array.from(
-        Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
+        Context.omit(...self.nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
     ))
 })
 
@@ -96,10 +96,16 @@ const use = Effect.fnUntraced(function* <P extends {}, A extends React.ReactNode
 export interface ComponentOptions {
     /**
      * Custom display name for the component in React DevTools and debugging utilities.
-     * Improves developer experience by providing meaningful component identification.
      */
     readonly displayName?: string
 
+    /**
+     * Context tags that should not trigger component remount when their values change.
+     *
+     * @default [Tracer.ParentSpan]
+     */
+    readonly nonReactiveTags: readonly Context.Tag<any, any>[]
+
     /**
      * Specifies the execution strategy for finalizers when the component unmounts or its scope closes.
      * Determines whether finalizers execute sequentially or in parallel.
@@ -119,15 +125,13 @@ export interface ComponentOptions {
 }
 
 export const defaultOptions: ComponentOptions = {
+    nonReactiveTags: [Tracer.ParentSpan],
     finalizerExecutionStrategy: ExecutionStrategy.sequential,
     finalizerExecutionDebounce: "100 millis",
 }
 
 
-export const nonReactiveTags = [Tracer.ParentSpan] as const
+export const isComponent = (u: unknown): u is Component<{}, React.ReactNode, unknown, unknown> => Predicate.hasProperty(u, ComponentTypeId)
-
-
-export const isComponent = (u: unknown): u is Component<{}, React.ReactNode, unknown, unknown> => Predicate.hasProperty(u, TypeId)
 
 export declare namespace make {
     export type Gen = {
@@ -507,7 +511,7 @@ export const makeUntraced: (
  * const MyComponentWithCustomOptions = MyComponent.pipe(
  *   Component.withOptions({
  *     finalizerExecutionStrategy: ExecutionStrategy.parallel,
- *     finalizerExecutionDebounce: "50 millis"
+ *     finalizerExecutionDebounce: "50 millis",
  *   })
  * )
  * ```

packages/effect-fc/src/ErrorObserver.ts

@@ -1,20 +1,20 @@
 import { type Cause, Context, Effect, Exit, Layer, Option, Pipeable, Predicate, PubSub, type Queue, type Scope, Supervisor } from "effect"
 
 
-export const TypeId: unique symbol = Symbol.for("@effect-fc/ErrorObserver/ErrorObserver")
+export const ErrorObserverTypeId: unique symbol = Symbol.for("@effect-fc/ErrorObserver/ErrorObserver")
-export type TypeId = typeof TypeId
+export type ErrorObserverTypeId = typeof ErrorObserverTypeId
 
 export interface ErrorObserver<in out E = never> extends Pipeable.Pipeable {
-    readonly [TypeId]: TypeId
+    readonly [ErrorObserverTypeId]: ErrorObserverTypeId
     handle<A, E, R>(effect: Effect.Effect<A, E, R>): Effect.Effect<A, E, R>
     readonly subscribe: Effect.Effect<Queue.Dequeue<Cause.Cause<E>>, never, Scope.Scope>
 }
 
 export const ErrorObserver = <E = never>(): Context.Tag<ErrorObserver, ErrorObserver<E>> => Context.GenericTag("@effect-fc/ErrorObserver/ErrorObserver")
 
-class ErrorObserverImpl<in out E = never>
+export class ErrorObserverImpl<in out E = never>
 extends Pipeable.Class() implements ErrorObserver<E> {
-    readonly [TypeId]: TypeId = TypeId
+    readonly [ErrorObserverTypeId]: ErrorObserverTypeId = ErrorObserverTypeId
     readonly subscribe: Effect.Effect<Queue.Dequeue<Cause.Cause<E>>, never, Scope.Scope>
 
     constructor(
@@ -29,7 +29,7 @@ extends Pipeable.Class() implements ErrorObserver<E> {
     }
 }
 
-class ErrorObserverSupervisorImpl extends Supervisor.AbstractSupervisor<void> {
+export class ErrorObserverSupervisorImpl extends Supervisor.AbstractSupervisor<void> {
     readonly value = Effect.void
     constructor(readonly pubsub: PubSub.PubSub<Cause.Cause<never>>) {
         super()
@@ -43,7 +43,7 @@ class ErrorObserverSupervisorImpl extends Supervisor.AbstractSupervisor<void> {
 }
 
 
-export const isErrorObserver = (u: unknown): u is ErrorObserver<unknown> => Predicate.hasProperty(u, TypeId)
+export const isErrorObserver = (u: unknown): u is ErrorObserver<unknown> => Predicate.hasProperty(u, ErrorObserverTypeId)
 
 export const layer: Layer.Layer<ErrorObserver> = Layer.unwrapEffect(Effect.map(
     PubSub.unbounded<Cause.Cause<never>>(),

packages/effect-fc/src/Memoized.ts

@@ -4,20 +4,38 @@ import * as React from "react"
 import type * as Component from "./Component.js"
 
 
-export const TypeId: unique symbol = Symbol.for("@effect-fc/Memoized/Memoized")
+export const MemoizedTypeId: unique symbol = Symbol.for("@effect-fc/Memoized/Memoized")
-export type TypeId = typeof TypeId
+export type MemoizedTypeId = typeof MemoizedTypeId
 
-export interface Memoized<P> extends MemoizedOptions<P> {
+
-    readonly [TypeId]: TypeId
+/**
+ * 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
+ */
+export interface Memoized<P> extends MemoizedPrototype, MemoizedOptions<P> {}
+
+export interface MemoizedPrototype {
+    readonly [MemoizedTypeId]: MemoizedTypeId
 }
 
+/**
+ * Configuration options for Memoized components.
+ *
+ * @template P The props type of the component
+ */
 export interface MemoizedOptions<P> {
+    /**
+     * An optional equivalence function for comparing component props.
+     * If provided, this function is used by React.memo to determine if props have changed.
+     * Returns `true` if props are equivalent (no re-render), `false` if they differ (re-render).
+     */
     readonly propsEquivalence?: Equivalence.Equivalence<P>
 }
 
 
-export const MemoizedPrototype = Object.freeze({
+export const MemoizedPrototype: MemoizedPrototype = Object.freeze({
-    [TypeId]: TypeId,
+    [MemoizedTypeId]: MemoizedTypeId,
 
     transformFunctionComponent<P extends {}>(
         this: Memoized<P>,
@@ -28,8 +46,21 @@ export const MemoizedPrototype = Object.freeze({
 } as const)
 
 
-export const isMemoized = (u: unknown): u is Memoized<unknown> => Predicate.hasProperty(u, TypeId)
+export const isMemoized = (u: unknown): u is Memoized<unknown> => Predicate.hasProperty(u, MemoizedTypeId)
 
+/**
+ * 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 new `Memoized` component with the same body, error, and context types as the input
+ *
+ * @example
+ * ```ts
+ * const MyMemoizedComponent = MyComponent.pipe(
+ *   Memoized.memoized,
+ * )
+ * ```
+ */
 export const memoized = <T extends Component.Component<any, any, any, any>>(
     self: T
 ): T & Memoized<Component.Component.Props<T>> => Object.setPrototypeOf(
@@ -40,6 +71,30 @@ export const memoized = <T extends Component.Component<any, any, any, any>>(
     )),
 )
 
+/**
+ * Applies options to a Memoized component, returning a new Memoized component with the updated configuration.
+ *
+ * Supports both curried and uncurried application styles.
+ *
+ * @param self - The Memoized component to apply options to (in uncurried form)
+ * @param options - The options to apply to the component
+ * @returns A Memoized component with the applied options
+ *
+ * @example
+ * ```ts
+ * // Curried
+ * const MyMemoizedComponent = MyComponent.pipe(
+ *   Memoized.memoized,
+ *   Memoized.withOptions({ propsEquivalence: (a, b) => a.id === b.id }),
+ * )
+ *
+ * // Uncurried
+ * const MyMemoizedComponent = Memoized.withOptions(
+ *   Memoized.memoized(MyComponent),
+ *   { propsEquivalence: (a, b) => a.id === b.id },
+ * )
+ * ```
+ */
 export const withOptions: {
     <T extends Component.Component<any, any, any, any> & Memoized<any>>(
         options: Partial<MemoizedOptions<Component.Component.Props<T>>>

packages/example/package.json

@@ -18,7 +18,7 @@
     "@tanstack/router-plugin": "^1.154.12",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
+    "@vitejs/plugin-react": "^6.0.0",
     "globals": "^17.0.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",

packages/example/src/routes/async.tsx

@@ -1,5 +1,5 @@
 import { HttpClient } from "@effect/platform"
-import { Container, Flex, Heading, Slider, Text } from "@radix-ui/themes"
+import { Container, Flex, Heading, Slider, Text, TextField } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { Array, Effect, flow, Option, Schema } from "effect"
 import { Async, Component, Memoized } from "effect-fc"
@@ -34,24 +34,31 @@ class AsyncFetchPostView extends Component.make("AsyncFetchPostView")(function*(
     )
 }).pipe(
     Async.async,
-    Async.withOptions({ defaultFallback: <Text>Loading post...</Text> }),
+    Async.withOptions({ defaultFallback: <Text>Default fallback</Text> }),
     Memoized.memoized,
 ) {}
 
 
 const AsyncRouteComponent = Component.make("AsyncRouteView")(function*() {
+    const [text, setText] = React.useState("Typing here should not trigger a refetch of the post")
     const [id, setId] = React.useState(1)
+
     const AsyncFetchPost = yield* AsyncFetchPostView.use
 
     return (
         <Container>
-            <Flex direction="column" align="center" gap="2">
+            <Flex direction="column" align="stretch" gap="2">
+                <TextField.Root
+                    value={text}
+                    onChange={e => setText(e.currentTarget.value)}
+                />
+
                 <Slider
                     value={[id]}
                     onValueChange={flow(Array.head, Option.getOrThrow, setId)}
                 />
 
-                <AsyncFetchPost id={id} />
+                <AsyncFetchPost id={id} fallback={<Text>Loading post...</Text>} />
             </Flex>
         </Container>
     )