Angelitedocs ESEN

Inicio › Referencia

Referencia de la API

Todas las funciones, clases y tipos públicos, con su firma y su descripción.

Generada desde los tipos

Esta referencia se genera a partir de las definiciones de TypeScript del paquete (types/*.d.ts), así que no puede quedarse atrás del código: cada firma de aquí es la que comprueba tsc en el CI. Las descripciones de las firmas están en inglés.

@duvanjamid/angelite#

El núcleo: señales, componentes, inyección de dependencias, router, seguridad, pipes y referencias. import { … } from '@duvanjamid/angelite'

Señales

ReadonlySignal#

export interface ReadonlySignal<T> {
  (): T;
  /** Reads the value without subscribing the running effect. */
  peek(): T;
}

Signal#

export interface Signal<T> extends ReadonlySignal<T> {
  set(value: T): void;
  update(fn: (current: T) => T): void;
}

signal#

export function signal<T>(initial: T): Signal<T>;

signal#

export function signal<T = undefined>(): Signal<T | undefined>;

computed#

export function computed<T>(fn: () => T): ReadonlySignal<T>;

effect#

export function effect(fn: () => void | (() => void), owner?: Array<() => void>): () => void;

untracked#

export function untracked<T>(fn: () => T): T;

Componentes

Type#

export type Type<T = any> = abstract new (...args: any[]) => T;

ClassProvider#

export interface ClassProvider { provide: Type; useClass: Type }

ValueProvider#

export interface ValueProvider { provide: Type; useValue: unknown }

FactoryProvider#

export interface FactoryProvider { provide: Type; useFactory: () => unknown }

Provider#

export type Provider = Type | ClassProvider | ValueProvider | FactoryProvider;

AotTemplate#

export type AotTemplate = (components: Record<string, Type>, kit: object) => object;

ComponentMeta#

export interface ComponentMeta {
  /** Tag name, default `app-root`. */
  selector?: string;
  /** Template source (compiled in the browser). Use `aot` for precompiled templates. */
  template?: string;
  aot?: AotTemplate;
  /** Components used in the template. */
  imports?: Type[];
  /** Services scoped to this component and its descendants. */
  providers?: Provider[];
}

component#

export function component<T extends Type>(Class: T, meta: ComponentMeta): T;

Component#

export function Component(meta: ComponentMeta): <T extends Type>(Class: T) => T;

MountedApp#

export interface MountedApp<T = any> {
  /** The component instance. */
  instance: T;
  destroy(): void;
}

mount#

export function mount<T>(Comp: Type<T>, el: Element, up?: object | null): MountedApp<T>;

input#

export function input<T>(initial: T): Signal<T>;

OutputEmitter#

export interface OutputEmitter<T = void> {
  emit(value: T): void;
  subscribe(fn: (value: T) => void): () => void;
}

output#

export function output<T = void>(): OutputEmitter<T>;

OnInit#

export interface OnInit { ngOnInit(): void }

AfterViewInit#

export interface AfterViewInit { ngAfterViewInit(): void }

OnDestroy#

export interface OnDestroy { ngOnDestroy(): void }

OnError#

export interface OnError { ngOnError(error: unknown, where: string): void }

Inyección de dependencias

inject#

export function inject<T>(Token: Type<T>): T;

provide#

export function provide<T>(Token: Type<T>, value: T): void;

Seguridad

TrustedValue#

export interface TrustedValue { readonly kind: 'html' | 'url'; readonly value: string }

trustHtml#

export function trustHtml(html: string): TrustedValue;

trustUrl#

export function trustUrl(url: string): TrustedValue;

sanitizeUrl#

export function sanitizeUrl(value: unknown, attr: string): string;

Pipes

registerPipe#

export function registerPipe(name: string, fn: (value: any, ...args: any[]) => any): void;

Referencias a la plantilla

viewChild#

Receives the element (or component instance) of `#name` in the template; null while it is not rendered.

export function viewChild<T = Element>(name: string): Signal<T | null>;

Router

RouteContext#

export interface RouteContext {
  path: string;
  params: Record<string, string>;
  query: Record<string, string>;
  route: Route;
}

RouteGuard#

export type RouteGuard = (to: RouteContext) => boolean | string | void | Promise<boolean | string | void>;

Route#

export interface Route {
  /** `users/:id`, `''` for an index route, `**` for anything else. */
  path: string;
  component?: Type;
  /** Code splitting: loaded on the first visit. Resolves to the component or to a module with a default export. */
  load?: () => Promise<Type | { default: Type }>;
  children?: Route[];
  canActivate?: RouteGuard[];
  /** Data loaded before the page renders; read it with `router.data()`. */
  resolve?: Record<string, (to: RouteContext) => unknown | Promise<unknown>>;
  redirectTo?: string;
}

Router#

export interface Router {
  readonly path: Signal<string>;
  /** `?page=2` as `{ page: '2' }`. */
  readonly query: ReadonlySignal<Record<string, string>>;
  /** What the matched routes' `resolve` functions returned. */
  readonly data: Signal<Record<string, any>>;
  readonly current: ReadonlySignal<{ component: Type | undefined; params: Record<string, string> } | null>;
  params(): Record<string, string>;
  navigate(to: string, options?: { replace?: boolean }): void;
}

router#

export const router: Router;

RouterOptions#

export interface RouterOptions {
  /** `hash` (default) works on any static host; `history` uses real paths and needs server support. */
  mode?: 'hash' | 'history';
  /** Path prefix in history mode, e.g. `/app`. */
  base?: string;
}

provideRouter#

export function provideRouter(routes: Route[], options?: RouterOptions): Router;

Desarrollo

enableDevWarnings#

Logs mistakes that are otherwise silent (unknown inputs, duplicate @for keys, unknown elements). Call it in development only.

export function enableDevWarnings(log?: (message: string) => void): void;

@duvanjamid/angelite/forms#

Formularios reactivos sobre señales. import { … } from '@duvanjamid/angelite/forms'

ValidationErrors#

export type ValidationErrors = Record<string, any> | null;

Validator#

export type Validator<T = any> = (value: T) => ValidationErrors;

Validators#

export const Validators: {
  required: Validator;
  minLength(n: number): Validator;
  maxLength(n: number): Validator;
  min(n: number): Validator;
  max(n: number): Validator;
  pattern(re: RegExp): Validator;
  email: Validator;
  /** The value must equal what `other()` returns. */
  matches(other: () => unknown): Validator;
};

FormControl#

export class FormControl<T = any> implements Control<T> {
  constructor(initial?: T, validators?: Validator<T>[]);
  readonly value: Signal<T>;
  readonly errors: ReadonlySignal<ValidationErrors>;
  readonly valid: ReadonlySignal<boolean>;
  readonly touched: Signal<boolean>;
  readonly dirty: ReadonlySignal<boolean>;
  initial: T;
  touch(): void;
  setValue(value: T): void;
  reset(value?: T): void;
}

FormGroup#

export class FormGroup<T extends Record<string, any> = Record<string, any>> implements Control<T> {
  constructor(controls: Record<string, any>, validators?: Validator<T>[]);
  readonly controls: Record<string, any>;
  readonly value: ReadonlySignal<T>;
  readonly errors: ReadonlySignal<ValidationErrors>;
  readonly valid: ReadonlySignal<boolean>;
  readonly touched: ReadonlySignal<boolean>;
  readonly dirty: ReadonlySignal<boolean>;
  /** `get('address.street')` walks nested groups. */
  get(path: string): any;
  touch(): void;
  setValue(value: Partial<T>): void;
  reset(value?: Partial<T>): void;
}

FormArray#

export class FormArray<T = any> implements Control<T[]> {
  constructor(controls?: any[], validators?: Validator<T[]>[]);
  /** Call it to read the current list: `array.controls()`. */
  readonly controls: Signal<any[]>;
  readonly value: ReadonlySignal<T[]>;
  readonly errors: ReadonlySignal<ValidationErrors>;
  readonly valid: ReadonlySignal<boolean>;
  readonly touched: ReadonlySignal<boolean>;
  readonly dirty: ReadonlySignal<boolean>;
  at(index: number): any;
  push(control: any): void;
  removeAt(index: number): void;
  touch(): void;
  setValue(values: T[]): void;
  reset(): void;
}

@duvanjamid/angelite/http#

Cliente HTTP con interceptores y resource(). import { … } from '@duvanjamid/angelite/http'

HttpRequest#

export interface HttpRequest {
  method: string;
  url: string;
  headers: Record<string, string>;
  body?: BodyInit | null;
  responseType: 'json' | 'text' | 'blob' | 'response';
  signal?: AbortSignal;
  /** Milliseconds before the request is aborted. */
  timeout?: number;
  credentials?: RequestCredentials;
}

HttpResponse#

export interface HttpResponse<T = any> {
  status: number;
  statusText: string;
  ok: boolean;
  headers: Headers;
  url: string;
  data: T;
  request: HttpRequest;
}

Interceptor#

export type Interceptor = (request: HttpRequest, next: (request: HttpRequest) => Promise<HttpResponse>) => Promise<HttpResponse>;

HttpError#

export class HttpError extends Error {
  status: number;
  data: any;
  response: HttpResponse;
}

RequestOptions#

export interface RequestOptions {
  params?: Record<string, string | number | boolean | null | undefined>;
  headers?: Record<string, string>;
  responseType?: HttpRequest['responseType'];
  signal?: AbortSignal;
  timeout?: number;
  credentials?: RequestCredentials;
}

HttpClient#

export interface HttpClient {
  request<T = any>(method: string, url: string, options?: RequestOptions & { body?: unknown }): Promise<T>;
  get<T = any>(url: string, options?: RequestOptions): Promise<T>;
  delete<T = any>(url: string, options?: RequestOptions): Promise<T>;
  post<T = any>(url: string, body?: unknown, options?: RequestOptions): Promise<T>;
  put<T = any>(url: string, body?: unknown, options?: RequestOptions): Promise<T>;
  patch<T = any>(url: string, body?: unknown, options?: RequestOptions): Promise<T>;
}

createHttp#

export function createHttp(options?: { baseUrl?: string; headers?: Record<string, string>; interceptors?: Interceptor[]; fetch?: typeof fetch }): HttpClient;

retry#

export function retry(times?: number, delay?: number): Interceptor;

Resource#

export interface Resource<T> {
  readonly data: Signal<T | undefined>;
  readonly error: Signal<unknown>;
  readonly loading: Signal<boolean>;
  reload(): void;
  destroy(): void;
}

resource#

export function resource<T>(loader: () => Promise<T> | T): Resource<T>;

@duvanjamid/angelite/i18n#

Internacionalización con plurales y formatos. import { … } from '@duvanjamid/angelite/i18n'

Messages#

export type Messages = { [key: string]: string | Messages };

I18n#

export interface I18n {
  readonly locale: Signal<string>;
  /** `params.count` selects the plural form when the message is an object (`one`, `other`...). */
  t(key: string, params?: Record<string, string | number>): string;
  setLocale(locale: string): void;
  load(locale: string, source: Messages | (() => Promise<Messages | { default: Messages }>)): Promise<void>;
  number(value: number, options?: Intl.NumberFormatOptions): string;
  date(value: Date | number | string, options?: Intl.DateTimeFormatOptions): string;
  relative(value: number, unit?: Intl.RelativeTimeFormatUnit): string;
  /** Registers the pipes `t`, `num` and `date` bound to this instance. */
  installPipes(): void;
}

createI18n#

export function createI18n(options?: { locale?: string; fallback?: string; messages?: Record<string, Messages> }): I18n;

@duvanjamid/angelite/hydrate#

El lado del cliente del renderizado en servidor. import { … } from '@duvanjamid/angelite/hydrate'

hydrate#

Replaces the server-rendered markup in `el` with the live app.

export function hydrate<T>(Comp: Type<T>, el: Element): MountedApp<T>;

@duvanjamid/angelite/devtools#

Inspector de componentes y señales. import { … } from '@duvanjamid/angelite/devtools'

DevtoolsNode#

export interface DevtoolsNode {
  name: string;
  el: Element;
  instance: any;
  state: Record<string, unknown>;
  children: DevtoolsNode[];
}

DevtoolsApi#

export interface DevtoolsApi {
  tree(root?: Element): DevtoolsNode[];
  inspect(el: Element): any;
  state(instance: any): Record<string, unknown>;
  /** Sets a signal field; returns false if it is not a signal. */
  set(instance: any, key: string, value: unknown): boolean;
  closePanel?: () => void;
}

enableDevtools#

export function enableDevtools(options?: { panel?: boolean }): DevtoolsApi;

@duvanjamid/angelite/testing#

Utilidades para probar componentes. import { … } from '@duvanjamid/angelite/testing'

RenderOptions#

export interface RenderOptions {
  /** Inputs to set (signals get `.set(value)`; other properties are assigned). */
  props?: Record<string, unknown>;
  /** Services visible to the whole tree: `[[Api, fakeApi]]`. */
  provide?: Array<[Type, unknown]>;
  /** Container element. By default a new <div> in document.body. */
  into?: Element;
}

Rendered#

export interface Rendered<T = any> {
  container: Element;
  host: Element | null;
  instance: T;
  $(selector: string): Element | null;
  $$(selector: string): Element[];
  text(target: string | Element): string;
  click(target: string | Element): void;
  /** Types into an input/textarea/select (fires `input` and `change`), or sets a checkbox. */
  type(target: string | Element, value: string | boolean): void;
  fire(target: string | Element, type: string, init?: EventInit): boolean;
  /** Resolves after pending signal updates have reached the DOM. */
  flush(): Promise<void>;
  unmount(): void;
}

render#

export function render<T>(Comp: Type<T>, options?: RenderOptions): Rendered<T>;

fire#

export function fire(el: Element, type: string, init?: EventInit): boolean;

flush#

export function flush(): Promise<void>;

cleanup#

export function cleanup(): void;

@duvanjamid/angelite/tools/ssr.mjs#

Renderizado en servidor (Node). import { … } from '@duvanjamid/angelite/tools/ssr.mjs'

RenderOptions#

export interface RenderOptions {
  /** Request URL (path and query) the router should see. */
  url?: string;
  /** `mount` of the AngeLite runtime your app uses; defaults to the bundled full build. */
  mount?: (Comp: Type, el: Element) => { instance: any; destroy(): void };
  /** HTML shell; `<!--app-->` marks where the app goes (or it needs an element matching `selector`). */
  shell?: string;
  /** Runs before the component is mounted, with the DOM globals in place (set up the router here). */
  setup?: () => unknown;
  /** Called with the component instance; await your data here. */
  ready?: (instance: any) => unknown;
  /** Extra macrotask turns to wait after `ready` (default 2). */
  settle?: number;
  selector?: string;
}

renderToString#

export function renderToString(Comp: Type, options?: RenderOptions): Promise<string>;

renderPage#

export function renderPage(Comp: Type, options: RenderOptions & { shell: string; state?: unknown }): Promise<string>;

serializeState#

export function serializeState(state: unknown): string;

@duvanjamid/angelite/tools/aot.mjs#

Compilador de plantillas para el build y chequeo de plantillas. import { … } from '@duvanjamid/angelite/tools/aot.mjs'

TemplateOptions#

export interface TemplateOptions {
  /** Tags (lowercase) that are components, e.g. ['ui-button']. */
  components?: string[];
  /** The component's fields and methods; enables the "is not a member" check. */
  members?: string[];
  /** Custom pipes registered with registerPipe(). */
  pipes?: string[];
  /** Custom elements (web components) that are not AngeLite components. */
  elements?: string[];
}

CompileOptions#

export interface CompileOptions extends TemplateOptions {
  /** What to do with problems: log them (default), throw, or ignore. */
  check?: 'warn' | 'error' | false;
}

compileTemplate#

export function compileTemplate(source: string, options?: CompileOptions): string;

checkTemplate#

export function checkTemplate(source: string, options?: TemplateOptions): string[];

discoverMembers#

export function discoverMembers(file: string): string[];

PluginOptions#

export interface PluginOptions extends Omit<CompileOptions, 'members'> {
  /** An explicit list, or 'auto' to read it from the class file next to the template. */
  members?: string[] | 'auto';
}

aotPlugin#

export function aotPlugin(options?: PluginOptions): { name: string; setup(build: any): void };

@duvanjamid/angelite/tools/vite.mjs#

Plugin de Vite para plantillas precompiladas. import { … } from '@duvanjamid/angelite/tools/vite.mjs'

Options#

export interface Options {
  components?: string[];
  members?: string[] | 'auto';
  pipes?: string[];
  elements?: string[];
  check?: 'warn' | 'error' | false;
}

@duvanjamid/angelite/tools/check.mjs#

Comprobación de plantillas desde la línea de comandos. import { … } from '@duvanjamid/angelite/tools/check.mjs'

checkFolder#

export function checkFolder(dir: string, options?: { components?: string[]; pipes?: string[]; elements?: string[]; members?: 'auto' }): Array<{ file: string; message: string }>;