Update dependency @vitejs/plugin-react to v6

packages/effect-fc/src/Async.ts

@@ -1,31 +1,47 @@
 /** 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"
 
 
-export const TypeId: unique symbol = Symbol.for("@effect-fc/Async/Async")
-export type TypeId = typeof TypeId
+export const AsyncTypeId: unique symbol = Symbol.for("@effect-fc/Async/Async")
+export type AsyncTypeId = typeof AsyncTypeId
 
-export interface Async extends AsyncOptions {
-    readonly [TypeId]: TypeId
+
+/**
+ * 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">
 
 
-export const AsyncPrototype = Object.freeze({
-    [TypeId]: TypeId,
+export const AsyncPrototype: AsyncPrototype = Object.freeze({
+    [AsyncTypeId]: AsyncTypeId,
 
     asFunctionComponent<P extends {}, A extends React.ReactNode, E, R>(
         this: Component.Component<P, A, E, R> & Async,
         runtimeRef: React.RefObject<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
     ) {
-        const SuspenseInner = (props: { readonly promise: Promise<React.ReactNode> }) => React.use(props.promise)
+        const Inner = (props: { readonly promise: Promise<React.ReactNode> }) => React.use(props.promise)
 
         return ({ fallback, name, ...props }: AsyncProps) => {
             const promise = Runtime.runPromise(runtimeRef.current)(
@@ -38,17 +54,64 @@ export const AsyncPrototype = Object.freeze({
             return React.createElement(
                 React.Suspense,
                 { fallback: fallback ?? this.defaultFallback, name },
-                React.createElement(SuspenseInner, { promise }),
+                React.createElement(Inner, { promise }),
             )
         }
     },
 } 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
 
-export const isAsync = (u: unknown): u is Async => Predicate.hasProperty(u, TypeId)
+    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
+    self: T & (
+        "promise" extends keyof Component.Component.Props<T>
+            ? "The 'promise' prop name is restricted for Async components. Please rename the 'promise' prop to something else."
+            : T
+    )
 ): (
     & Omit<T, keyof Component.Component.AsComponent<T>>
     & Component.Component<
@@ -59,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 type TypeId = typeof TypeId
+export const ComponentTypeId: unique symbol = Symbol.for("@effect-fc/Component/Component")
+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, TypeId)
+export const isComponent = (u: unknown): u is Component<{}, React.ReactNode, unknown, unknown> => Predicate.hasProperty(u, ComponentTypeId)
 
 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 type TypeId = typeof TypeId
+export const ErrorObserverTypeId: unique symbol = Symbol.for("@effect-fc/ErrorObserver/ErrorObserver")
+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 type TypeId = typeof TypeId
+export const MemoizedTypeId: unique symbol = Symbol.for("@effect-fc/Memoized/Memoized")
+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({
-    [TypeId]: TypeId,
+export const MemoizedPrototype: MemoizedPrototype = Object.freeze({
+    [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/effect-fc/src/Query.ts

@@ -6,12 +6,12 @@ import * as Result from "./Result.js"
 export const QueryTypeId: unique symbol = Symbol.for("@effect-fc/Query/Query")
 export type QueryTypeId = typeof QueryTypeId
 
-export interface Query<in out K extends Query.AnyKey, in out A, in out E = never, in out R = never, in out P = never>
+export interface Query<in out K extends Query.AnyKey, in out A, in out KE = never, in out KR = never, in out E = never, in out R = never, in out P = never>
 extends Pipeable.Pipeable {
     readonly [QueryTypeId]: QueryTypeId
 
-    readonly context: Context.Context<Scope.Scope | QueryClient.QueryClient | R>
-    readonly key: Stream.Stream<K>
+    readonly context: Context.Context<Scope.Scope | QueryClient.QueryClient | KR | R>
+    readonly key: Stream.Stream<K, KE, KR>
     readonly f: (key: K) => Effect.Effect<A, E, R>
     readonly initialProgress: P
 
@@ -37,13 +37,13 @@ export declare namespace Query {
     export type AnyKey = readonly any[]
 }
 
-export class QueryImpl<in out K extends Query.AnyKey, in out A, in out E = never, in out R = never, in out P = never>
-extends Pipeable.Class() implements Query<K, A, E, R, P> {
+export class QueryImpl<in out K extends Query.AnyKey, in out A, in out KE = never, in out KR = never, in out E = never, in out R = never, in out P = never>
+extends Pipeable.Class() implements Query<K, A, KE, KR, E, R, P> {
     readonly [QueryTypeId]: QueryTypeId = QueryTypeId
 
     constructor(
-        readonly context: Context.Context<Scope.Scope | QueryClient.QueryClient | R>,
-        readonly key: Stream.Stream<K>,
+        readonly context: Context.Context<Scope.Scope | QueryClient.QueryClient | KR | R>,
+        readonly key: Stream.Stream<K, KE, KR>,
         readonly f: (key: K) => Effect.Effect<A, E, R>,
         readonly initialProgress: P,
 
@@ -77,6 +77,7 @@ extends Pipeable.Class() implements Query<K, A, E, R, P> {
         ], { concurrency: "unbounded" }).pipe(
             Effect.ignore,
             this.runSemaphore.withPermits(1),
+            Effect.provide(this.context),
         )
     }
 
@@ -265,11 +266,11 @@ extends Pipeable.Class() implements Query<K, A, E, R, P> {
     }
 }
 
-export const isQuery = (u: unknown): u is Query<readonly unknown[], unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, QueryTypeId)
+export const isQuery = (u: unknown): u is Query<readonly unknown[], unknown> => Predicate.hasProperty(u, QueryTypeId)
 
 export declare namespace make {
-    export interface Options<K extends Query.AnyKey, A, E = never, R = never, P = never> {
-        readonly key: Stream.Stream<K>
+    export interface Options<K extends Query.AnyKey, A, KE = never, KR = never, E = never, R = never, P = never> {
+        readonly key: Stream.Stream<K, KE, KR>
         readonly f: (key: NoInfer<K>) => Effect.Effect<A, E, Result.forkEffect.InputContext<R, NoInfer<P>>>
         readonly initialProgress?: P
         readonly staleTime?: Duration.DurationInput
@@ -277,17 +278,17 @@ export declare namespace make {
     }
 }
 
-export const make = Effect.fnUntraced(function* <K extends Query.AnyKey, A, E = never, R = never, P = never>(
-    options: make.Options<K, A, E, R, P>
+export const make = Effect.fnUntraced(function* <K extends Query.AnyKey, A, KE = never, KR = never, E = never, R = never, P = never>(
+    options: make.Options<K, A, KE, KR, E, R, P>
 ): Effect.fn.Return<
-    Query<K, A, E, Result.forkEffect.OutputContext<A, E, R, P>, P>,
+    Query<K, A, KE, KR, E, Result.forkEffect.OutputContext<A, E, R, P>, P>,
     never,
-    Scope.Scope | QueryClient.QueryClient | Result.forkEffect.OutputContext<A, E, R, P>
+    Scope.Scope | QueryClient.QueryClient | KR | Result.forkEffect.OutputContext<A, E, R, P>
 > {
     const client = yield* QueryClient.QueryClient
 
-    return new QueryImpl(
-        yield* Effect.context<Scope.Scope | QueryClient.QueryClient | Result.forkEffect.OutputContext<A, E, R, P>>(),
+    return new QueryImpl<K, A, KE, KR, E, Result.forkEffect.OutputContext<A, E, R, P>, P>(
+        yield* Effect.context<Scope.Scope | QueryClient.QueryClient | KR | Result.forkEffect.OutputContext<A, E, R, P>>(),
         options.key,
         options.f as any,
         options.initialProgress as P,
@@ -304,12 +305,12 @@ export const make = Effect.fnUntraced(function* <K extends Query.AnyKey, A, E =
     )
 })
 
-export const service = <K extends Query.AnyKey, A, E = never, R = never, P = never>(
-    options: make.Options<K, A, E, R, P>
+export const service = <K extends Query.AnyKey, A, KE = never, KR = never, E = never, R = never, P = never>(
+    options: make.Options<K, A, KE, KR, E, R, P>
 ): Effect.Effect<
-    Query<K, A, E, Result.forkEffect.OutputContext<A, E, R, P>, P>,
+    Query<K, A, KE, KR, E, Result.forkEffect.OutputContext<A, E, R, P>, P>,
     never,
-    Scope.Scope | QueryClient.QueryClient | Result.forkEffect.OutputContext<A, E, R, P>
+    Scope.Scope | QueryClient.QueryClient | KR | Result.forkEffect.OutputContext<A, E, R, P>
 > => Effect.tap(
     make(options),
     query => Effect.forkScoped(query.run),

packages/effect-fc/src/Result.ts

@@ -240,16 +240,16 @@ export const unsafeForkEffect = <A, E, R, P = never>(
         Effect.provide(Layer.empty.pipe(
             Layer.provideMerge(makeProgressLayer<A, E, P>()),
             Layer.provideMerge(Layer.succeed(State<A, E, P>(), {
-                get: ref,
+                get: Ref.get(ref),
                 set: v => Effect.andThen(Ref.set(ref, v), PubSub.publish(pubsub, v))
             })),
         )),
     ))),
     Effect.map(({ ref, pubsub, fiber }) => [
         Subscribable.make({
-            get: ref,
+            get: Ref.get(ref),
             changes: Stream.unwrapScoped(Effect.map(
-                Effect.all([ref, Stream.fromPubSub(pubsub, { scoped: true })]),
+                Effect.all([Ref.get(ref), Stream.fromPubSub(pubsub, { scoped: true })]),
                 ([latest, stream]) => Stream.concat(Stream.make(latest), stream),
             )),
         }),

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/lib/form/TextFieldFormInputView.tsx

@@ -18,7 +18,7 @@ extends Omit<TextField.RootProps, "optional" | "defaultValue">, Form.useOptional
 export type TextFieldFormInputProps = Props | OptionalProps
 
 
-export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInput")(function*(props: TextFieldFormInputProps) {
+export class TextFieldFormInputView extends Component.make("TextFieldFormInputView")(function*(props: TextFieldFormInputProps) {
     const input: (
         | { readonly optional: true } & Form.useOptionalInput.Success<string>
         | { readonly optional: false } & Form.useInput.Success<string>

packages/example/src/routeTree.gen.ts

@@ -13,10 +13,10 @@ import { Route as ResultRouteImport } from './routes/result'
 import { Route as QueryRouteImport } from './routes/query'
 import { Route as FormRouteImport } from './routes/form'
 import { Route as BlankRouteImport } from './routes/blank'
+import { Route as AsyncRouteImport } from './routes/async'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as DevMemoRouteImport } from './routes/dev/memo'
 import { Route as DevContextRouteImport } from './routes/dev/context'
-import { Route as DevAsyncRenderingRouteImport } from './routes/dev/async-rendering'
 
 const ResultRoute = ResultRouteImport.update({
   id: '/result',
@@ -38,6 +38,11 @@ const BlankRoute = BlankRouteImport.update({
   path: '/blank',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AsyncRoute = AsyncRouteImport.update({
+  id: '/async',
+  path: '/async',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -53,40 +58,35 @@ const DevContextRoute = DevContextRouteImport.update({
   path: '/dev/context',
   getParentRoute: () => rootRouteImport,
 } as any)
-const DevAsyncRenderingRoute = DevAsyncRenderingRouteImport.update({
-  id: '/dev/async-rendering',
-  path: '/dev/async-rendering',
-  getParentRoute: () => rootRouteImport,
-} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/async': typeof AsyncRoute
   '/blank': typeof BlankRoute
   '/form': typeof FormRoute
   '/query': typeof QueryRoute
   '/result': typeof ResultRoute
-  '/dev/async-rendering': typeof DevAsyncRenderingRoute
   '/dev/context': typeof DevContextRoute
   '/dev/memo': typeof DevMemoRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/async': typeof AsyncRoute
   '/blank': typeof BlankRoute
   '/form': typeof FormRoute
   '/query': typeof QueryRoute
   '/result': typeof ResultRoute
-  '/dev/async-rendering': typeof DevAsyncRenderingRoute
   '/dev/context': typeof DevContextRoute
   '/dev/memo': typeof DevMemoRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/async': typeof AsyncRoute
   '/blank': typeof BlankRoute
   '/form': typeof FormRoute
   '/query': typeof QueryRoute
   '/result': typeof ResultRoute
-  '/dev/async-rendering': typeof DevAsyncRenderingRoute
   '/dev/context': typeof DevContextRoute
   '/dev/memo': typeof DevMemoRoute
 }
@@ -94,42 +94,42 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
+    | '/async'
     | '/blank'
     | '/form'
     | '/query'
     | '/result'
-    | '/dev/async-rendering'
     | '/dev/context'
     | '/dev/memo'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
+    | '/async'
     | '/blank'
     | '/form'
     | '/query'
     | '/result'
-    | '/dev/async-rendering'
     | '/dev/context'
     | '/dev/memo'
   id:
     | '__root__'
     | '/'
+    | '/async'
     | '/blank'
     | '/form'
     | '/query'
     | '/result'
-    | '/dev/async-rendering'
     | '/dev/context'
     | '/dev/memo'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  AsyncRoute: typeof AsyncRoute
   BlankRoute: typeof BlankRoute
   FormRoute: typeof FormRoute
   QueryRoute: typeof QueryRoute
   ResultRoute: typeof ResultRoute
-  DevAsyncRenderingRoute: typeof DevAsyncRenderingRoute
   DevContextRoute: typeof DevContextRoute
   DevMemoRoute: typeof DevMemoRoute
 }
@@ -164,6 +164,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof BlankRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/async': {
+      id: '/async'
+      path: '/async'
+      fullPath: '/async'
+      preLoaderRoute: typeof AsyncRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -185,23 +192,16 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DevContextRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/dev/async-rendering': {
-      id: '/dev/async-rendering'
-      path: '/dev/async-rendering'
-      fullPath: '/dev/async-rendering'
-      preLoaderRoute: typeof DevAsyncRenderingRouteImport
-      parentRoute: typeof rootRouteImport
-    }
   }
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  AsyncRoute: AsyncRoute,
   BlankRoute: BlankRoute,
   FormRoute: FormRoute,
   QueryRoute: QueryRoute,
   ResultRoute: ResultRoute,
-  DevAsyncRenderingRoute: DevAsyncRenderingRoute,
   DevContextRoute: DevContextRoute,
   DevMemoRoute: DevMemoRoute,
 }

packages/example/src/routes/async.tsx

@@ -0,0 +1,71 @@
+import { HttpClient } from "@effect/platform"
+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"
+import * as React from "react"
+import { runtime } from "@/runtime"
+
+
+const Post = Schema.Struct({
+    userId: Schema.Int,
+    id: Schema.Int,
+    title: Schema.String,
+    body: Schema.String,
+})
+
+interface AsyncFetchPostViewProps {
+    readonly id: number
+}
+
+class AsyncFetchPostView extends Component.make("AsyncFetchPostView")(function*(props: AsyncFetchPostViewProps) {
+    const post = yield* Component.useOnChange(() => HttpClient.HttpClient.pipe(
+        Effect.tap(Effect.sleep("500 millis")),
+        Effect.andThen(client => client.get(`https://jsonplaceholder.typicode.com/posts/${ props.id }`)),
+        Effect.andThen(response => response.json),
+        Effect.andThen(Schema.decodeUnknown(Post)),
+    ), [props.id])
+
+    return (
+        <div>
+            <Heading>{post.title}</Heading>
+            <Text>{post.body}</Text>
+        </div>
+    )
+}).pipe(
+    Async.async,
+    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="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} fallback={<Text>Loading post...</Text>} />
+            </Flex>
+        </Container>
+    )
+}).pipe(
+    Component.withRuntime(runtime.context)
+)
+
+export const Route = createFileRoute("/async")({
+    component: AsyncRouteComponent,
+})

packages/example/src/routes/dev/async-rendering.tsx

@@ -1,78 +0,0 @@
-import { Flex, Text, TextField } from "@radix-ui/themes"
-import { createFileRoute } from "@tanstack/react-router"
-import { GetRandomValues, makeUuid4 } from "@typed/id"
-import { Effect } from "effect"
-import { Async, Component, Memoized } from "effect-fc"
-import * as React from "react"
-import { runtime } from "@/runtime"
-
-
-// Generator version
-const RouteComponent = Component.makeUntraced(function* AsyncRendering() {
-    const MemoizedAsyncComponentFC = yield* MemoizedAsyncComponent.use
-    const AsyncComponentFC = yield* AsyncComponent.use
-    const [input, setInput] = React.useState("")
-
-    return (
-        <Flex direction="column" align="stretch" gap="2">
-            <TextField.Root
-                value={input}
-                onChange={e => setInput(e.target.value)}
-            />
-
-            <MemoizedAsyncComponentFC fallback={React.useMemo(() => <p>Loading memoized...</p>, [])} />
-            <AsyncComponentFC />
-        </Flex>
-    )
-}).pipe(
-    Component.withRuntime(runtime.context)
-)
-
-// Pipeline version
-// const RouteComponent = Component.make("RouteComponent")(() => Effect.Do,
-//     Effect.bind("VMemoizedAsyncComponent", () => Component.useFC(MemoizedAsyncComponent)),
-//     Effect.bind("VAsyncComponent", () => Component.useFC(AsyncComponent)),
-//     Effect.let("input", () => React.useState("")),
-
-//     Effect.map(({ input: [input, setInput], VAsyncComponent, VMemoizedAsyncComponent }) =>
-//         <Flex direction="column" align="stretch" gap="2">
-//             <TextField.Root
-//                 value={input}
-//                 onChange={e => setInput(e.target.value)}
-//             />
-
-//             <VMemoizedAsyncComponent />
-//             <VAsyncComponent />
-//         </Flex>
-//     ),
-// ).pipe(
-//     Component.withRuntime(runtime.context)
-// )
-
-
-class AsyncComponent extends Component.makeUntraced("AsyncComponent")(function*() {
-    const SubComponentFC = yield* SubComponent.use
-
-    yield* Effect.sleep("500 millis") // Async operation
-    // Cannot use React hooks after the async operation
-
-    return (
-        <Flex direction="column" align="stretch">
-            <Text>Rendered!</Text>
-            <SubComponentFC />
-        </Flex>
-    )
-}).pipe(
-    Async.async,
-    Async.withOptions({ defaultFallback: <p>Loading...</p> }),
-) {}
-class MemoizedAsyncComponent extends Memoized.memoized(AsyncComponent) {}
-
-class SubComponent extends Component.makeUntraced("SubComponent")(function*() {
-    const [state] = React.useState(yield* Component.useOnMount(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
-    return <Text>{state}</Text>
-}) {}
-
-export const Route = createFileRoute("/dev/async-rendering")({
-    component: RouteComponent
-})

packages/example/src/routes/form.tsx

@@ -2,7 +2,7 @@ import { Button, Container, Flex, Text } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { Console, Effect, Match, Option, ParseResult, Schema } from "effect"
 import { Component, Form, Subscribable } from "effect-fc"
-import { TextFieldFormInput } from "@/lib/form/TextFieldFormInput"
+import { TextFieldFormInputView } from "@/lib/form/TextFieldFormInputView"
 import { DateTimeUtcFromZonedInput } from "@/lib/schema"
 import { runtime } from "@/runtime"
 
@@ -38,7 +38,7 @@ const RegisterFormSubmitSchema = Schema.Struct({
     birth: Schema.OptionFromSelf(Schema.DateTimeUtcFromSelf),
 })
 
-class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
+class RegisterFormService extends Effect.Service<RegisterFormService>()("RegisterFormService", {
     scoped: Form.service({
         schema: RegisterFormSchema.pipe(
             Schema.compose(
@@ -62,15 +62,15 @@ class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
     })
 }) {}
 
-class RegisterFormView extends Component.makeUntraced("RegisterFormView")(function*() {
-    const form = yield* RegisterForm
+class RegisterFormView extends Component.make("RegisterFormView")(function*() {
+    const form = yield* RegisterFormService
     const [canSubmit, submitResult] = yield* Subscribable.useSubscribables([
         form.canSubmit,
         form.mutation.result,
     ])
 
     const runPromise = yield* Component.useRunPromise()
-    const TextFieldFormInputFC = yield* TextFieldFormInput.use
+    const TextFieldFormInput = yield* TextFieldFormInputView.use
 
     yield* Component.useOnMount(() => Effect.gen(function*() {
         yield* Effect.addFinalizer(() => Console.log("RegisterFormView unmounted"))
@@ -85,15 +85,15 @@ class RegisterFormView extends Component.makeUntraced("RegisterFormView")(functi
                 void runPromise(form.submit)
             }}>
                 <Flex direction="column" gap="2">
-                    <TextFieldFormInputFC
+                    <TextFieldFormInput
                         field={yield* form.field(["email"])}
                     />
 
-                    <TextFieldFormInputFC
+                    <TextFieldFormInput
                         field={yield* form.field(["password"])}
                     />
 
-                    <TextFieldFormInputFC
+                    <TextFieldFormInput
                         optional
                         type="datetime-local"
                         field={yield* form.field(["birth"])}
@@ -115,13 +115,13 @@ class RegisterFormView extends Component.makeUntraced("RegisterFormView")(functi
     )
 }) {}
 
-const RegisterPage = Component.makeUntraced("RegisterPage")(function*() {
-    const RegisterFormViewFC = yield* Effect.provide(
+const RegisterPage = Component.make("RegisterPageView")(function*() {
+    const RegisterForm = yield* Effect.provide(
         RegisterFormView.use,
-        yield* Component.useContextFromLayer(RegisterForm.Default),
+        yield* Component.useContextFromLayer(RegisterFormService.Default),
     )
 
-    return <RegisterFormViewFC />
+    return <RegisterForm />
 }).pipe(
     Component.withRuntime(runtime.context)
 )

packages/example/src/routes/index.tsx

@@ -2,19 +2,19 @@ import { createFileRoute } from "@tanstack/react-router"
 import { Effect } from "effect"
 import { Component } from "effect-fc"
 import { runtime } from "@/runtime"
-import { Todos } from "@/todo/Todos"
-import { TodosState } from "@/todo/TodosState.service"
+import { TodosState } from "@/todo/TodosState"
+import { TodosView } from "@/todo/TodosView"
 
 
 const TodosStateLive = TodosState.Default("todos")
 
-const Index = Component.makeUntraced("Index")(function*() {
-    const TodosFC = yield* Effect.provide(
-        Todos.use,
+const Index = Component.make("IndexView")(function*() {
+    const Todos = yield* Effect.provide(
+        TodosView.use,
         yield* Component.useContextFromLayer(TodosStateLive),
     )
 
-    return <TodosFC />
+    return <Todos />
 }).pipe(
     Component.withRuntime(runtime.context)
 )

packages/example/src/routes/query.tsx

@@ -13,15 +13,16 @@ const Post = Schema.Struct({
     body: Schema.String,
 })
 
-const ResultView = Component.makeUntraced("Result")(function*() {
+const ResultView = Component.make("ResultView")(function*() {
     const runPromise = yield* Component.useRunPromise()
 
     const [idRef, query, mutation] = yield* Component.useOnMount(() => Effect.gen(function*() {
         const idRef = yield* SubscriptionRef.make(1)
+        const key = Stream.map(idRef.changes, id => [id] as const)
 
         const query = yield* Query.service({
-            key: Stream.zipLatest(Stream.make("posts" as const), idRef.changes),
-            f: ([, id]) => HttpClient.HttpClient.pipe(
+            key,
+            f: ([id]) => HttpClient.HttpClient.pipe(
                 Effect.tap(Effect.sleep("500 millis")),
                 Effect.andThen(client => client.get(`https://jsonplaceholder.typicode.com/posts/${ id }`)),
                 Effect.andThen(response => response.json),

packages/example/src/todo/TodoView.tsx

@@ -5,9 +5,9 @@ import { Component, Form, Subscribable } from "effect-fc"
 import { FaArrowDown, FaArrowUp } from "react-icons/fa"
 import { FaDeleteLeft } from "react-icons/fa6"
 import * as Domain from "@/domain"
-import { TextFieldFormInput } from "@/lib/form/TextFieldFormInput"
+import { TextFieldFormInputView } from "@/lib/form/TextFieldFormInputView"
 import { DateTimeUtcFromZonedInput } from "@/lib/schema"
-import { TodosState } from "./TodosState.service"
+import { TodosState } from "./TodosState"
 
 
 const TodoFormSchema = Schema.compose(Schema.Struct({
@@ -30,7 +30,7 @@ export type TodoProps = (
     | { readonly _tag: "edit", readonly id: string }
 )
 
-export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoProps) {
+export class TodoView extends Component.make("TodoView")(function*(props: TodoProps) {
     const state = yield* TodosState
 
     const [
@@ -83,17 +83,17 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
 
     const runSync = yield* Component.useRunSync()
     const runPromise = yield* Component.useRunPromise<DateTime.CurrentTimeZone>()
-    const TextFieldFormInputFC = yield* TextFieldFormInput.use
+    const TextFieldFormInput = yield* TextFieldFormInputView.use
 
 
     return (
         <Flex direction="row" align="center" gap="2">
             <Box flexGrow="1">
                 <Flex direction="column" align="stretch" gap="2">
-                    <TextFieldFormInputFC field={contentField} />
+                    <TextFieldFormInput field={contentField} />
 
                     <Flex direction="row" justify="center" align="center" gap="2">
-                        <TextFieldFormInputFC
+                        <TextFieldFormInput
                             optional
                             field={completedAtField}
                             type="datetime-local"

packages/example/src/todo/TodosView.tsx

@@ -1,11 +1,11 @@
 import { Container, Flex, Heading } from "@radix-ui/themes"
 import { Chunk, Console, Effect } from "effect"
 import { Component, Subscribable } from "effect-fc"
-import { Todo } from "./Todo"
-import { TodosState } from "./TodosState.service"
+import { TodosState } from "./TodosState"
+import { TodoView } from "./TodoView"
 
 
-export class Todos extends Component.makeUntraced("Todos")(function*() {
+export class TodosView extends Component.make("TodosView")(function*() {
     const state = yield* TodosState
     const [todos] = yield* Subscribable.useSubscribables([state.ref])
 
@@ -14,17 +14,17 @@ export class Todos extends Component.makeUntraced("Todos")(function*() {
         Effect.addFinalizer(() => Console.log("Todos unmounted")),
     ))
 
-    const TodoFC = yield* Todo.use
+    const Todo = yield* TodoView.use
 
     return (
         <Container>
             <Heading align="center">Todos</Heading>
 
             <Flex direction="column" align="stretch" gap="2" mt="2">
-                <TodoFC _tag="new" />
+                <Todo _tag="new" />
 
                 {Chunk.map(todos, todo =>
-                    <TodoFC key={todo.id} _tag="edit" id={todo.id} />
+                    <Todo key={todo.id} _tag="edit" id={todo.id} />
                 )}
             </Flex>
         </Container>