ascua

import { signal, memo, effect, mount, hydrate } from "ascua";
import { renderToString } from "ascua/servidor";

2,23 kB gzip, sin dependencias. Con hydrate e island, 2,99 kB; si no se importan, el tree-shaking se los lleva. ascua/servidor no cuenta: no llega al navegador.

#Reactividad

#signal

function signal<T>(inicial: T): Signal<T>;

interface Signal<T> {
  (): T;                              // leer y suscribirse
  set(valor: T): void;
  update(fn: (actual: T) => T): void;
  peek(): T;                          // leer sin suscribirse
}

Escribir un valor igual al actual (Object.is) no avisa a nadie.

#memo

function memo<T>(calcular: () => T, iguales?: (a: T, b: T) => boolean): () => T;

Perezoso: no calcula hasta que alguien lo lee. Si al recalcular obtiene un valor igual —Object.is o iguales—, sus observadores no se enteran.

#effect

function effect(fn: () => void): void;

Se ejecuta al crearse y tras cada cambio que le afecte. Pertenece al scope actual y se libera con él.

#batch

function batch<T>(fn: () => T): T;

Las escrituras de dentro producen como mucho una ejecución por efecto afectado.

#untrack

function untrack<T>(fn: () => T): T;

Ejecuta fn sin suscribir al cómputo actual a lo que lea.

#selector

function selector<T>(fuente: () => T): (clave: T) => boolean;

esLaElegida(clave) vale true para la clave que devuelve fuente. Cada lector se suscribe solo a su clave: un cambio avisa a la que deja de estar elegida y a la que pasa a estarlo.

#onCleanup

function onCleanup(fn: () => void): void;

Corre antes de cada reejecución del scope actual y al liberarlo. Fuera de todo scope no hace nada.

#onError

function onError(manejador: (error: unknown) => void): void;

Se hace cargo de los errores de este scope y de los de debajo. El manejador corre en su propio scope. Ver Errores.

#root

function root<T>(fn: () => T): [T, () => void];

Una raíz reactiva propia: devuelve el resultado y cómo liberarla entera.

#currentScope, withScope

function currentScope(): Scope;
function withScope<T>(scope: Scope, fn: () => T): T;

Capturar el scope actual y volver a él más tarde; sirve tras un await.

#DOM

Las llamadas que emite el compilador. Se pueden escribir a mano.

#show

function show<T>(
  padre: Node,
  elegir: () => T,
  construir: (valor: T) => Node | readonly Node[] | null,
): void;

La región de un <Show>. construir corre dentro de un scope propio y sin rastrear; se vuelve a llamar solo cuando elegir devuelve otro valor.

#list

function list<T, K>(
  padre: Node,
  items: () => readonly T[],
  clave: (item: T) => K,
  construir: (item: T) => Node,
): void;

La lista de un <For>. construir se ejecuta una vez por clave; los nodos se conservan y se mueven lo mínimo.

#mount

function mount(padre: Node, construir: () => Node): () => void;

Construye dentro de una raíz reactiva, lo añade a padre y devuelve cómo desmontarlo.

#SSR e hidratación

#island

function island(nombre: string, construir: () => Node, props?: string): HTMLElement;

Envuelve el contenido en <ascua-island>. En el servidor numera lo de dentro; en el cliente, si se está hidratando, lo adopta.

#hydrate

function hydrate(
  islas: Record<string, (props: string) => Node>,
  raiz?: ParentNode,
): { adoptados: number; creados: number; desmontar: () => void };

Activa las islas de raiz —el documento, por defecto— adoptando los nodos del servidor. Las islas sin constructor se dejan intactas.

#renderToString

import { renderToString } from "ascua/servidor";

function renderToString(construir: () => Node): string;

Renderiza a HTML sobre un documento en memoria, sin navegador. Los efectos corren una vez y se liberan al terminar.

#collectStyles

import { collectStyles } from "ascua/servidor";

function collectStyles(html: string): string;

El CSS con scope de los componentes que aparecen en un HTML ya renderizado. Las hojas las registra el plugin de Vite al cargar cada módulo en el servidor, con registerStyle, que no hace falta llamar a mano.

#Tipos

type Children = (padre: Node) => void;
type ValorAtributo = string | number | boolean | null | undefined;
type Memo<T> = () => T;

Y dos globales, para que el editor conozca las plantillas sin importarlas:

declare global {
  function view(plantilla: TemplateStringsArray, ...valores: unknown[]): HTMLElement;
  function html(plantilla: TemplateStringsArray, ...valores: unknown[]): HTMLElement;
}