vitral 0.3.0 → 0.5.0

package/dist/devtools.d.ts

@@ -1,6 +1,36 @@
+/** Remove todos os overrides: os da aba e os do navegador. */
+declare function clearOverrides(): void;
+/** Override ativo. `url` fica vazia quando um apelido não tem modelo para resolver. */
+interface ActiveOverride {
+    name: string;
+    /** Como foi pedido: URL ou apelido (`pr-123`). */
+    value: string;
+    url?: string;
+    /** `'aba'`: veio de `?vitral=` nesta aba. `'navegador'`: do localStorage. */
+    source: 'aba' | 'navegador';
+}
+/** Overrides que valem nesta página. Os da aba têm prioridade sobre os do navegador. */
+declare function activeOverrides(): ActiveOverride[];
+
+/**
+ * Painel de desenvolvimento: troca a URL de um remote por um `vite dev`
+ * local (ou pelo preview de um PR) sem mexer no código do host.
+ *
+ *   import { devtools } from 'vitral/devtools'
+ *   if (import.meta.env.DEV) devtools()
+ *
+ * O painel lista os overrides ativos: os de `?vitral=` desta aba e os
+ * salvos em `localStorage['vitral:overrides']`. Só valem com
+ * `configure({ devOverrides })` ou com a página em localhost.
+ */
+
 /** Overrides salvos neste navegador: `{ nome: url }`. */
 declare function getOverrides(): Record<string, string>;
-/** Salva (ou remove, com `null`) o override de um remote. Vale a partir do próximo carregamento. */
+/**
+ * Salva no navegador o override de um remote: URL ou apelido (`pr-123`).
+ * `null` remove o override (da aba e do navegador). Vale a partir do próximo
+ * carregamento.
+ */
 declare function setOverride(name: string, url: string | null): void;
 interface DevtoolsOptions {
     /** Recarrega a página depois de mudar um override. Padrão: true. */
@@ -9,4 +39,4 @@ interface DevtoolsOptions {
 /** Mostra o painel no canto da página. Devolve uma função que o remove. */
 declare function devtools(options?: DevtoolsOptions): () => void;
 
-export { type DevtoolsOptions, devtools, getOverrides, setOverride };
+export { type ActiveOverride, type DevtoolsOptions, activeOverrides, clearOverrides, devtools, getOverrides, setOverride };

package/dist/devtools.js

@@ -1,9 +1,11 @@
 import {
-  OVERRIDES_KEY,
-  manifestUrl,
+  activeOverrides,
+  clearOverrides,
+  dropOverride,
   overridesEnabled,
+  storeOverride,
   storedOverrides
-} from "./chunk-DXORSF4X.js";
+} from "./chunk-54CBIZES.js";
 import "./chunk-GNPFWISJ.js";
 
 // src/devtools.ts
@@ -11,11 +13,8 @@ function getOverrides() {
   return storedOverrides();
 }
 function setOverride(name, url) {
-  const all = storedOverrides();
-  if (url) all[name] = manifestUrl(url);
-  else delete all[name];
-  if (Object.keys(all).length) localStorage.setItem(OVERRIDES_KEY, JSON.stringify(all));
-  else localStorage.removeItem(OVERRIDES_KEY);
+  if (url) storeOverride(name, url);
+  else dropOverride(name);
 }
 var STYLE = `
 :host { position: fixed; right: 12px; bottom: 12px; z-index: 2147483647; font: 13px/1.4 system-ui, sans-serif; color: #111 }
@@ -27,6 +26,8 @@ li { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; word-brea
 form { display: grid; gap: 4px }
 input { font: inherit; padding: 3px 6px }
 .aviso { color: #a40000; margin: 0 0 8px }
+.ativo { background: #fde68a; border-color: #b45309 }
+.limpar { margin-top: 8px }
 `;
 function devtools(options = {}) {
   const host = document.createElement("div");
@@ -43,9 +44,16 @@ function devtools(options = {}) {
   toggle.textContent = "vitral";
   toggle.onclick = () => panel.hidden = !panel.hidden;
   root.append(style, panel, toggle);
-  const changed = () => options.reload === false ? draw() : location.reload();
+  const changed = () => {
+    const q = new URLSearchParams(location.search);
+    if (q.has("vitral")) q.delete("vitral"), history.replaceState(history.state, "", `${location.pathname}${q.size ? `?${q}` : ""}${location.hash}`);
+    options.reload === false ? draw() : location.reload();
+  };
   function draw() {
     panel.replaceChildren();
+    const active = activeOverrides();
+    toggle.textContent = active.length ? `vitral (${active.length})` : "vitral";
+    toggle.classList.toggle("ativo", active.length > 0);
     if (!overridesEnabled()) {
       const p = document.createElement("p");
       p.className = "aviso";
@@ -53,19 +61,19 @@ function devtools(options = {}) {
       panel.append(p);
     }
     const list = document.createElement("ul");
-    for (const [name2, url2] of Object.entries(storedOverrides())) {
+    for (const { name: name2, value, url: url2, source } of active) {
       const item = document.createElement("li");
       const remove = document.createElement("button");
       remove.type = "button";
       remove.textContent = "remover";
       remove.setAttribute("aria-label", `remover override de ${name2}`);
       remove.onclick = () => (setOverride(name2, null), changed());
-      item.append(`${name2} \u2192 ${url2}`, remove);
+      item.append(`${name2} \u2192 ${url2 ?? `${value} (sem devOverrides.preview)`} [${source}]`, remove);
       list.append(item);
     }
     const form = document.createElement("form");
     const name = Object.assign(document.createElement("input"), { placeholder: "nome (ex.: carrinho)", required: true, name: "name" });
-    const url = Object.assign(document.createElement("input"), { placeholder: "http://localhost:5174", required: true, name: "url" });
+    const url = Object.assign(document.createElement("input"), { placeholder: "http://localhost:5174 ou pr-123", required: true, name: "url" });
     const save = Object.assign(document.createElement("button"), { type: "submit", textContent: "Salvar" });
     form.append(name, url, save);
     form.onsubmit = (e) => {
@@ -74,12 +82,19 @@ function devtools(options = {}) {
       changed();
     };
     panel.append(list, form);
+    if (active.length) {
+      const clear = Object.assign(document.createElement("button"), { type: "button", textContent: "Limpar todos", className: "limpar" });
+      clear.onclick = () => (clearOverrides(), changed());
+      panel.append(clear);
+    }
   }
   draw();
   document.body.append(host);
   return () => host.remove();
 }
 export {
+  activeOverrides,
+  clearOverrides,
   devtools,
   getOverrides,
   setOverride

package/dist/dict.d.ts

@@ -0,0 +1,69 @@
+/**
+ * `vitral/dict`: serve os remotes com dicionários de compressão
+ * (Compression Dictionary Transport, RFC 9842).
+ *
+ * Cada `.js` e `.css` do dist sai com `Use-As-Dictionary`. No deploy seguinte,
+ * o navegador pede o arquivo novo com `Available-Dictionary` (o hash do arquivo
+ * antigo que ele tem em cache) e recebe só a diferença, pré-comprimida por
+ * `vitral dict` em `.dcz` (zstd) ou `.dcb` (brotli).
+ *
+ * Só usa `Request`, `Response` e `Headers` da Web: roda em Node, Deno, Bun,
+ * Cloudflare Workers e outros edges. O navegador descomprime sozinho.
+ */
+/** Variantes pré-comprimidas de um arquivo para um dicionário. Caminhos relativos ao dist. */
+interface DictVariant {
+    dcz?: string;
+    dcb?: string;
+}
+/** Um arquivo do dist no índice. */
+interface DictFile {
+    /** `Content-Type` do arquivo. */
+    type: string;
+    /** Variantes por hash do dicionário, no formato de `Available-Dictionary` (`:base64:`). */
+    deltas: Record<string, DictVariant>;
+}
+/** O `vitral-dict.json` que `vitral dict` grava no dist. */
+interface DictIndex {
+    version: 1;
+    /** Por caminho relativo ao dist (`remote-a1b2c3d4.js`, `split/chunk-x-a1b2c3d4.js`). */
+    files: Record<string, DictFile>;
+}
+type Body = Uint8Array | ArrayBuffer | ReadableStream<Uint8Array> | string;
+interface DictOptions {
+    /** Conteúdo do `vitral-dict.json`. */
+    index: DictIndex;
+    /** Lê um arquivo do dist pelo caminho relativo. `null` se não existir. */
+    read: (path: string) => Body | null | undefined | Promise<Body | null | undefined>;
+    /** Caminho em que o dist é servido. Padrão: `/`. */
+    base?: string;
+    /** `Cache-Control` das respostas com dicionário. Padrão: um ano, `immutable` (os nomes têm hash). */
+    cacheControl?: string;
+}
+/** Request do Node (`http.IncomingMessage`), só o que o middleware usa. */
+interface NodeRequest {
+    method?: string;
+    url?: string;
+    headers: Record<string, string | string[] | undefined>;
+}
+/** Response do Node (`http.ServerResponse`), só o que o middleware usa. */
+interface NodeResponse {
+    setHeader(name: string, value: string): unknown;
+    writeHead(status: number, headers: Record<string, string>): unknown;
+    end(body?: Uint8Array | string): unknown;
+}
+interface Dict {
+    /**
+     * Responde com a variante `dcz`/`dcb` quando o navegador tem o dicionário certo.
+     * `undefined`: sirva o arquivo como sempre, com os cabeçalhos de `headers()`.
+     */
+    fetch(request: Request): Promise<Response | undefined>;
+    /** `Use-As-Dictionary` e `Vary` para a resposta normal de um caminho. `undefined` se o caminho não está no índice. */
+    headers(pathname: string): Record<string, string> | undefined;
+    /** Middleware para Node, Express e Connect: responde a variante ou põe os cabeçalhos e chama `next`. */
+    node(req: NodeRequest, res: NodeResponse, next: (err?: unknown) => void): void;
+}
+/** Padrão de `match` para um caminho: o hash do nome vira `*`. */
+declare function dictMatch(pathname: string): string;
+declare function createDict(o: DictOptions): Dict;
+
+export { type Dict, type DictFile, type DictIndex, type DictOptions, type DictVariant, type NodeRequest, type NodeResponse, createDict, dictMatch };

package/dist/dict.js

@@ -0,0 +1,8 @@
+import {
+  createDict,
+  dictMatch
+} from "./chunk-NZEQGRBL.js";
+export {
+  createDict,
+  dictMatch
+};

package/dist/edge.d.ts

@@ -0,0 +1,118 @@
+import { P as Props } from './types-DUtcF3HO.js';
+import './errors-kjBv6IH_.js';
+
+/**
+ * Rewriter de HTML em streaming, para runtimes sem `HTMLRewriter` (Node, Deno,
+ * Bun). Faz só o que o gateway precisa: acha as tags de abertura de um
+ * elemento (`<vitral-remote>`) e dos filhos diretos dele, deixa ler e trocar
+ * atributos e inserir HTML logo depois da tag. O resto passa como veio.
+ *
+ * Ignora comentários e o conteúdo de `<script>`, `<style>`, `<textarea>` e
+ * `<title>`. Não monta árvore: dentro do elemento, conta a profundidade pelas
+ * tags de abertura e fechamento (elementos vazios, como `<img>`, não contam).
+ */
+/** O subconjunto do `Element` do `HTMLRewriter` que o gateway usa. */
+interface EdgeElement {
+    readonly tagName: string;
+    getAttribute(name: string): string | null;
+    hasAttribute(name: string): boolean;
+    setAttribute(name: string, value: string): void;
+    /** Insere conteúdo logo depois da tag de abertura. */
+    prepend(content: string, options?: {
+        html?: boolean;
+    }): void;
+}
+
+/**
+ * Gateway de edge: host e remotes servidos de uma origem só, com Early Hints
+ * e SSR opcional dos remotes em Declarative Shadow DOM.
+ *
+ *   import { gateway } from 'vitral/edge'
+ *
+ *   const handler = gateway({
+ *     origin: 'https://app.empresa.com',
+ *     remotes: { carrinho: 'https://cdn.empresa.com/carrinho/vitral.json' },
+ *   })
+ *   export default { fetch: handler }            // Cloudflare Workers
+ *
+ * - `/_vitral/<nome>/<caminho>` vira `<pasta do remote>/<caminho>`. O
+ *   `vitral.json` sai com as URLs absolutas do CDN trocadas por caminhos desta
+ *   origem; os hashes de SRI ficam iguais, porque os bytes são os mesmos.
+ * - O resto vai para `origin`. No HTML, `<vitral-remote src>` do CDN passa a
+ *   apontar para cá, e a resposta ganha `Link: rel=modulepreload` (ou
+ *   `preload`) para os remotes que a página usou da última vez.
+ * - Remote com `render` sai renderizado: um `<template shadowrootmode>` com o
+ *   HTML e o CSS dele dentro do `<vitral-remote>`. No cliente, o remote que
+ *   exporta `hydrate` hidrata esse HTML em vez de montar de novo.
+ *
+ * Só usa APIs Web (`fetch`, `Request`, `Response`, streams). Usa o
+ * `HTMLRewriter` quando o runtime tem (Cloudflare Workers); senão, um
+ * rewriter próprio em streaming. No Node, `toNodeListener(handler)`.
+ */
+
+/** HTML do remote para estas props, no servidor. */
+type ServerRender = (props: Props) => string | Promise<string>;
+/** Isolamento do remote na página (o mesmo de `isolate` no cliente). */
+type EdgeIsolation = 'shadow' | 'none';
+interface EdgeRemote {
+    /** URL do `vitral.json` (ou do JS) do remote no CDN. */
+    url: string;
+    /**
+     * SSR: devolve o HTML do remote. O mesmo `render` que o remote exporta
+     * para o servidor (ex.: `import { render } from 'carrinho/server'`).
+     */
+    render?: ServerRender;
+    /** Isolamento usado no SSR quando a tag não tem `isolate`. */
+    isolate?: EdgeIsolation;
+}
+interface GatewayOptions {
+    /** Origem do host (o app que serve as páginas). */
+    origin: string;
+    /** Remotes por nome: a URL do `vitral.json` ou a entrada completa. */
+    remotes: Record<string, string | EdgeRemote>;
+    /** Prefixo dos caminhos dos remotes. Padrão `/_vitral/`. */
+    prefix?: string;
+    /** Isolamento padrão do SSR (o `isolate` do `configure` do host). Padrão `'none'`. */
+    isolate?: EdgeIsolation;
+    /** Remotes que esta URL usa, para os hints da primeira visita. */
+    preload?: (url: URL) => string[];
+    /** `fetch` usado para falar com o host e os CDNs. Padrão: o global. */
+    fetch?: (request: Request) => Promise<Response>;
+    /** Por quanto tempo o gateway guarda manifestos e CSS, em ms. Padrão 60000. */
+    ttl?: number;
+    /** Erro no SSR de um remote (a página sai sem o SSR dele). Padrão: `console.error`. */
+    onError?: (error: unknown, name: string) => void;
+}
+/** Handler do gateway: `(request) => Response`. */
+interface Gateway {
+    (request: Request): Promise<Response>;
+    /** Valores de `Link` para esta requisição (para 103 Early Hints). */
+    hints(request: Request): Promise<string[]>;
+}
+declare function gateway(options: GatewayOptions): Gateway;
+/** O que `toNodeListener` usa do `IncomingMessage`. */
+interface NodeRequestLike extends AsyncIterable<Uint8Array> {
+    method?: string;
+    url?: string;
+    headers: Record<string, string | string[] | undefined>;
+    socket?: {
+        encrypted?: boolean;
+    };
+}
+/** O que `toNodeListener` usa do `ServerResponse`. */
+interface NodeResponseLike {
+    writeHead(status: number, headers: Record<string, string | string[]>): unknown;
+    write(chunk: Uint8Array): unknown;
+    end(chunk?: string): unknown;
+    writeEarlyHints?(hints: Record<string, string | string[]>): void;
+    headersSent?: boolean;
+}
+/**
+ * Listener de `http.createServer` para um handler `(request) => Response`.
+ * Com o gateway, manda 103 Early Hints antes de buscar a página.
+ *
+ *   createServer(toNodeListener(gateway({ origin, remotes }))).listen(8080)
+ */
+declare function toNodeListener(handler: ((request: Request) => Promise<Response>) | Gateway): (req: NodeRequestLike, res: NodeResponseLike) => Promise<void>;
+
+export { type EdgeElement, type EdgeIsolation, type EdgeRemote, type Gateway, type GatewayOptions, type NodeRequestLike, type NodeResponseLike, type ServerRender, gateway, toNodeListener };