Search documentation

Search by topic, API name, or import path.

GitHub ↗

namespace / @typed/ui/index

component

Type-level contracts used by the component constructor.

Learn this UI primitive →

Package version
1.0.0-beta.7
Category
Component construction
Since
1.0.0

Import

import { component } from "@typed/ui/index";

Signatures

export declare namespace component {
    type Gen = {
        <Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any>(body: () => Generator<Yield, Result, any>): ComponentFx<Yield, Result>;
        <Args extends readonly [
            any,
            ...ReadonlyArray<any>
        ], Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any>(body: (...args: Args) => Generator<Yield, Result, any>): (...args: Args) => ComponentFx<Yield, Result>;
        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A): ComponentResult<Args, A>;
        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A, B>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A, b: (_: A, ...args: Args) => B): ComponentResult<Args, B>;
        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A, B, C>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A, b: (_: A, ...args: Args) => B, c: (_: B, ...args: Args) => C): ComponentResult<Args, C>;
        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A, B, C, D>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A, b: (_: A, ...args: Args) => B, c: (_: B, ...args: Args) => C, d: (_: C, ...args: Args) => D): ComponentResult<Args, D>;
        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A, B, C, D, E>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A, b: (_: A, ...args: Args) => B, c: (_: B, ...args: Args) => C, d: (_: C, ...args: Args) => D, e: (_: D, ...args: Args) => E): ComponentResult<Args, E>;
        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A, B, C, D, E, F>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A, b: (_: A, ...args: Args) => B, c: (_: B, ...args: Args) => C, d: (_: C, ...args: Args) => D, e: (_: D, ...args: Args) => E, f: (_: E, ...args: Args) => F): ComponentResult<Args, F>;
        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A, B, C, D, E, F, G>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A, b: (_: A, ...args: Args) => B, c: (_: B, ...args: Args) => C, d: (_: C, ...args: Args) => D, e: (_: D, ...args: Args) => E, f: (_: E, ...args: Args) => F, g: (_: F, ...args: Args) => G): ComponentResult<Args, G>;
        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A, B, C, D, E, F, G, H>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A, b: (_: A, ...args: Args) => B, c: (_: B, ...args: Args) => C, d: (_: C, ...args: Args) => D, e: (_: D, ...args: Args) => E, f: (_: E, ...args: Args) => F, g: (_: F, ...args: Args) => G, h: (_: G, ...args: Args) => H): ComponentResult<Args, H>;
        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A, B, C, D, E, F, G, H, I>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A, b: (_: A, ...args: Args) => B, c: (_: B, ...args: Args) => C, d: (_: C, ...args: Args) => D, e: (_: D, ...args: Args) => E, f: (_: E, ...args: Args) => F, g: (_: F, ...args: Args) => G, h: (_: G, ...args: Args) => H, i: (_: H, ...args: Args) => I): ComponentResult<Args, I>;
        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A, B, C, D, E, F, G, H, I, J>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A, b: (_: A, ...args: Args) => B, c: (_: B, ...args: Args) => C, d: (_: C, ...args: Args) => D, e: (_: D, ...args: Args) => E, f: (_: E, ...args: Args) => F, g: (_: F, ...args: Args) => G, h: (_: G, ...args: Args) => H, i: (_: H, ...args: Args) => I, j: (_: I, ...args: Args) => J): ComponentResult<Args, J>;
    };
}
export declare const component: component.Gen;

Why

The namespace keeps the overload-rich generator contract attached to the callable constructor while still making it available to library authors who wrap component.

Ownership and lifetime

These types acquire nothing. The Fx produced by component is lazy; each run forks its parent Scope for yielded effects, subscriptions, and cleanup.

Examples

import { component } from "@typed/ui/Component"
import { html } from "@typed/template"
import { Effect } from "effect"

const Greeting = component(function* (name: string) {
  const greeting = yield* Effect.succeed("Hello")
  return html`<p>${greeting} ${name}</p>`
})

Members

Other public imports

These import paths expose the same declaration. Each page retains its own public name and signature.

Source