vitral 0.2.0 → 0.3.0

package/README.md

@@ -187,7 +187,7 @@ Para isolar por completo, use Shadow DOM:
 <Remote name="carrinho" isolate="shadow" />
 ```
 
-Com Shadow DOM, as regras `@property` e `@font-face` sobem para o documento, então sombras, rings, gradientes e fontes do Tailwind v4 funcionam.
+Com Shadow DOM, as regras `@property` e `@font-face` sobem para o documento, então sombras, rings, gradientes e fontes do Tailwind v4 funcionam. O plugin já faz essa separação no build (campo `shadow` do `vitral.json`): a página só adota o CSS pronto. Manifestos antigos continuam funcionando, com a separação feita no navegador.
 
 O remote também pode usar o tema do host:
 

package/dist/angular.d.ts

@@ -1,7 +1,8 @@
 import { InjectionToken, Type, ApplicationConfig, Signal, Provider, EnvironmentProviders } from '@angular/core';
-import { R as RemoteContext, P as Props, a as RemoteModule, S as Shared, V as VitralConfig } from './types-BV-hUrms.js';
-export { e as events } from './events-DUdjhfps.js';
+import { R as RemoteContext, P as Props, a as RemoteModule, S as Shared, V as VitralConfig } from './types-Czvm-siZ.js';
+export { e as events } from './events-D5gs7rff.js';
 export { n as navigate } from './navigate-BRG1WJUM.js';
+import './errors-kjBv6IH_.js';
 
 /**
  * Adaptador Angular (standalone, zoneless ou com zone.js).

package/dist/angular.js

@@ -1,7 +1,7 @@
 import {
   defineVitralElement
-} from "./chunk-6Y3VMWHH.js";
-import "./chunk-UTYAX6MU.js";
+} from "./chunk-3YXI3G34.js";
+import "./chunk-IHTUM6LT.js";
 import {
   defineRemote,
   events,
@@ -9,12 +9,13 @@ import {
   navigate,
   same,
   shared
-} from "./chunk-NCONW6WS.js";
+} from "./chunk-I3VSKSAZ.js";
 import {
   configure
-} from "./chunk-2XF5BKV3.js";
-import "./chunk-SFL6LTP3.js";
-import "./chunk-PX7PBCCT.js";
+} from "./chunk-TD4S3IHA.js";
+import "./chunk-ZAC6QQI6.js";
+import "./chunk-GNHCZRQP.js";
+import "./chunk-AKNNHQ2H.js";
 import "./chunk-GNPFWISJ.js";
 
 // src/angular.ts

package/dist/auto.js

@@ -1,11 +1,12 @@
 import {
   defineVitralElement
-} from "./chunk-6Y3VMWHH.js";
-import "./chunk-UTYAX6MU.js";
-import "./chunk-NCONW6WS.js";
-import "./chunk-2XF5BKV3.js";
-import "./chunk-SFL6LTP3.js";
-import "./chunk-PX7PBCCT.js";
+} from "./chunk-3YXI3G34.js";
+import "./chunk-IHTUM6LT.js";
+import "./chunk-I3VSKSAZ.js";
+import "./chunk-TD4S3IHA.js";
+import "./chunk-ZAC6QQI6.js";
+import "./chunk-GNHCZRQP.js";
+import "./chunk-AKNNHQ2H.js";
 import "./chunk-GNPFWISJ.js";
 
 // src/auto.ts

package/dist/capture-JYFERAPL.js

@@ -0,0 +1,42 @@
+import {
+  RemoteError,
+  isRemoteError,
+  mounted,
+  report,
+  reported
+} from "./chunk-AKNNHQ2H.js";
+import {
+  protocol
+} from "./chunk-GNPFWISJ.js";
+
+// src/core/capture.ts
+var on = false;
+function capture() {
+  if (on || typeof addEventListener == "undefined") return;
+  on = true;
+  addEventListener("error", (e) => attribute(e.error, e.filename));
+  addEventListener("unhandledrejection", (e) => attribute(e.reason));
+}
+function owner(error, file) {
+  const url = file || String(error?.stack ?? "").match(/(?:https?|file):\/\/[^\s)'"]+/)?.[0];
+  if (!url) return;
+  const host = [...document.querySelectorAll("script[src],link[rel=modulepreload]")].map(
+    (el) => el.src || el.href
+  );
+  let best;
+  let size = 0;
+  for (const [name, { entry }] of mounted) {
+    const dir = new URL(".", entry).href;
+    if (dir.length > size && url.startsWith(dir) && !host.some((u) => u.startsWith(dir))) best = name, size = dir.length;
+  }
+  return best;
+}
+function attribute(error, file) {
+  if (!protocol().settings().captureGlobalErrors || isRemoteError(error) || error instanceof Object && reported.has(error)) return;
+  const name = owner(error, file);
+  if (name) report(new RemoteError("RENDER_FAILED", name, String(error?.message ?? error), error), mounted.get(name));
+}
+export {
+  capture,
+  owner
+};

package/dist/{chunk-6Y3VMWHH.js → chunk-3YXI3G34.js}

@@ -1,16 +1,16 @@
 import {
   hostSlot,
   timings
-} from "./chunk-UTYAX6MU.js";
+} from "./chunk-IHTUM6LT.js";
 import {
   defineRemote,
   memoSelect,
   same,
   shared
-} from "./chunk-NCONW6WS.js";
+} from "./chunk-I3VSKSAZ.js";
 import {
   registerSrc
-} from "./chunk-2XF5BKV3.js";
+} from "./chunk-TD4S3IHA.js";
 
 // src/element.ts
 var Base = typeof HTMLElement === "undefined" ? class {

package/dist/{chunk-S5MZT5IT.js → chunk-AH7KNMBW.js}

@@ -1,6 +1,6 @@
 import {
   RemoteError
-} from "./chunk-PX7PBCCT.js";
+} from "./chunk-AKNNHQ2H.js";
 
 // src/core/integrity.ts
 var clean = (b64) => b64.replace(/-/g, "+").replace(/_/g, "/").replace(/=/g, "");

package/dist/chunk-AKNNHQ2H.js

@@ -0,0 +1,45 @@
+import {
+  protocol
+} from "./chunk-GNPFWISJ.js";
+
+// src/core/errors.ts
+var ERROR_DOCS = "https://joaogabriel15.github.io/vitral/erros/";
+var RemoteError = class extends Error {
+  constructor(code, remote, message, cause) {
+    super(`[vitral] ${remote}: ${message} (${ERROR_DOCS}${code})`);
+    this.code = code;
+    this.remote = remote;
+    this.cause = cause;
+    this.name = "RemoteError";
+    this.docs = `${ERROR_DOCS}${code}`;
+    if (typeof location != "undefined") this.route = location.pathname;
+  }
+};
+var isRemoteError = (e) => e?.name === "RemoteError";
+var mounted = /* @__PURE__ */ new Map();
+var reported = /* @__PURE__ */ new WeakSet();
+function report(e, from) {
+  if (isRemoteError(e) && !reported.has(e)) {
+    reported.add(e);
+    if (e.cause instanceof Object) reported.add(e.cause);
+    e.entry ??= from?.entry ?? protocol().entry(e.remote)?.url;
+    e.version ??= from?.version;
+    try {
+      protocol().settings().onError?.(e);
+    } catch {
+    }
+  }
+  return e;
+}
+var fail = (e) => {
+  throw report(e);
+};
+
+export {
+  RemoteError,
+  isRemoteError,
+  mounted,
+  reported,
+  report,
+  fail
+};

package/dist/{chunk-PX7PBCCT.js → chunk-GNHCZRQP.js}

@@ -1,21 +1,11 @@
+import {
+  RemoteError,
+  isRemoteError
+} from "./chunk-AKNNHQ2H.js";
 import {
   protocol
 } from "./chunk-GNPFWISJ.js";
 
-// src/core/errors.ts
-var ERROR_DOCS = "https://joaogabriel15.github.io/vitral/erros/";
-var RemoteError = class extends Error {
-  constructor(code, remote, message, cause) {
-    super(`[vitral] ${remote}: ${message} (${ERROR_DOCS}${code})`);
-    this.code = code;
-    this.remote = remote;
-    this.cause = cause;
-    this.name = "RemoteError";
-    this.docs = `${ERROR_DOCS}${code}`;
-  }
-};
-var isRemoteError = (e) => e?.name === "RemoteError";
-
 // src/core/util.ts
 function pageOrigin() {
   return typeof location !== "undefined" ? location.origin : null;
@@ -69,15 +59,15 @@ function addLink(rel, href, props = {}, parent = document.head) {
 }
 function metric(name, stage, start) {
   try {
-    performance.measure(`vitral:${name}:${stage}`, { start });
+    const label = `vitral:${name}:${stage}`;
+    performance.clearMeasures(label);
+    performance.measure(label, { start });
     protocol().settings().onMetric?.({ name, stage, start, duration: performance.now() - start });
   } catch {
   }
 }
 
 export {
-  RemoteError,
-  isRemoteError,
   pageOrigin,
   absolute,
   withRetry,

package/dist/{chunk-NCONW6WS.js → chunk-I3VSKSAZ.js}

@@ -3,15 +3,20 @@ import {
   loadFile,
   registerSrc,
   resolveEntry
-} from "./chunk-2XF5BKV3.js";
+} from "./chunk-TD4S3IHA.js";
 import {
   injectStyles
-} from "./chunk-SFL6LTP3.js";
+} from "./chunk-ZAC6QQI6.js";
+import {
+  metric
+} from "./chunk-GNHCZRQP.js";
 import {
   RemoteError,
+  fail,
   isRemoteError,
-  metric
-} from "./chunk-PX7PBCCT.js";
+  mounted,
+  report
+} from "./chunk-AKNNHQ2H.js";
 import {
   protocol
 } from "./chunk-GNPFWISJ.js";
@@ -60,27 +65,44 @@ function navigate(url, options = {}) {
 
 // src/core/updates.ts
 var versions = /* @__PURE__ */ new Map();
-function track(name, entry) {
-  versions.set(name, entry);
+var live = /* @__PURE__ */ new Map();
+function track(name, loaded) {
+  versions.set(name, loaded.entry);
+  mounted.set(name, loaded);
+  live.set(name, (live.get(name) ?? 0) + 1);
+  return () => {
+    const n = live.get(name) - 1;
+    if (n) live.set(name, n);
+    else live.delete(name), versions.delete(name), mounted.delete(name);
+  };
 }
+var swaps = null;
 async function refresh(name) {
   const p = protocol();
   await p.pending();
   const entry = p.entry(name);
   if (entry) p.register(name, entry);
   await loadFile(name);
+  const started = swaps = [];
   events.emit("vitral:refresh", name);
+  swaps = null;
+  await Promise.all(started);
 }
 function refreshable(current, name, props, remount) {
+  let gen = 0;
   const off = events.on("vitral:refresh", (n) => {
-    if (n === name || name.startsWith(n + "/")) {
-      remount(props).then((next) => {
-        const old = current;
-        if (old.unmount === noop) return next.unmount();
-        current = next;
-        old.unmount();
-      }, console.error);
-    }
+    if (n !== name && !name.startsWith(n + "/")) return;
+    const mine = ++gen;
+    const used = props;
+    const swap = remount(used).then((next) => {
+      if (current.unmount === noop || mine !== gen) return next.unmount();
+      const old = current;
+      current = next;
+      old.unmount();
+      if (props !== used) next.update?.(props);
+    });
+    if (swaps) swaps.push(swap);
+    else swap.catch(console.error);
   });
   return {
     update(next) {
@@ -99,10 +121,13 @@ var noop = () => {
 async function checkUpdates() {
   const p = protocol();
   const found = [];
-  const { splitName } = await import("./expose-53BEJB34.js");
+  const { splitName } = await import("./expose-JUOUN5N5.js");
   const remotes = /* @__PURE__ */ new Map();
-  for (const [name, entry] of versions) remotes.set(splitName(name)[0], entry);
-  versions.clear();
+  for (const name of live.keys()) {
+    const root = splitName(name)[0];
+    const entry = versions.get(root) ?? versions.get(name);
+    if (entry) remotes.set(root, entry);
+  }
   for (const [name, entry] of remotes) versions.set(name, entry);
   await Promise.all(
     [...remotes].map(
@@ -141,11 +166,11 @@ async function mountOnce(target, name, props, options) {
   const p = protocol();
   await p.pending();
   if ((options.isolate ?? registered(name)?.isolate ?? p.settings().isolate) === "iframe") {
-    if (!frames) throw new RemoteError("MOUNT_FAILED", name, 'isolate="iframe" precisa de enableIframe(), de vitral/iframe');
-    return frames(target, name, props, options);
+    if (!frames) throw report(new RemoteError("MOUNT_FAILED", name, 'isolate="iframe" precisa de enableIframe(), de vitral/iframe'));
+    return frames(target, name, props, options).catch(fail);
   }
   const { module: mod, ...resolved } = await load(name, options.isolate, options.priority);
-  track(name, resolved.entry);
+  const untrack = track(name, resolved);
   const isolate = options.isolate ?? resolved.isolate ?? protocol().settings().isolate;
   const label = resolved.name ?? name;
   let shadowRoot = null;
@@ -160,7 +185,7 @@ async function mountOnce(target, name, props, options) {
     target.appendChild(el);
   }
   let t = performance.now();
-  const release = await injectStyles(resolved.css, shadowRoot, el, options.styles, resolved.sri);
+  const [release, portal = document.body] = await injectStyles(resolved, shadowRoot, el, options.styles);
   metric(name, "css", t);
   t = performance.now();
   const scoped = scopedEvents();
@@ -170,8 +195,9 @@ async function mountOnce(target, name, props, options) {
     baseUrl: new URL(".", resolved.entry).href,
     events: scoped.bus,
     shadowRoot,
+    portalContainer: portal,
     reportError(e) {
-      const err = isRemoteError(e) ? e : new RemoteError("RENDER_FAILED", label, String(e?.message ?? e), e);
+      const err = report(isRemoteError(e) ? e : new RemoteError("RENDER_FAILED", label, String(e?.message ?? e), e), resolved);
       if (options.onError) options.onError(err);
       else console.error(err);
     },
@@ -181,27 +207,29 @@ async function mountOnce(target, name, props, options) {
     onDeactivate: on("vitral:deactivate")
   };
   if (ctxHooks.shared) ctx.shared = ctxHooks.shared(name, scoped.track);
-  let mounted;
+  let mounted2;
   try {
-    mounted = await mod.mount(el, props, ctx);
+    mounted2 = await mod.mount(el, props, ctx);
     metric(name, "mount", t);
   } catch (e) {
+    untrack();
     scoped.dispose();
     release();
     el.remove();
-    throw new RemoteError("MOUNT_FAILED", label, "erro ao montar", e);
+    throw report(new RemoteError("MOUNT_FAILED", label, "erro ao montar", e), resolved);
   }
   let alive = true;
   return {
     update(next) {
-      if (alive) mounted.update?.(next);
+      if (alive) mounted2.update?.(next);
     },
     unmount() {
       if (!alive) return;
       alive = false;
       try {
-        mounted.unmount();
+        mounted2.unmount();
       } finally {
+        untrack();
         scoped.dispose();
         release();
         el.remove();
@@ -244,17 +272,17 @@ function createSlot(target, options) {
     holder.setAttribute("data-vitral-slot", name);
     target.appendChild(holder);
     setStatus("loading");
-    const fail = (e) => {
+    const fail2 = (e) => {
       if (my !== token) return;
       setStatus("error", isRemoteError(e) ? e : new RemoteError("MOUNT_FAILED", name, String(e), e));
     };
     const initial = props;
-    mountRemote(holder, name, props, { isolate, priority: options.priority, styles: options.styles, onError: fail }).then((h) => {
+    mountRemote(holder, name, props, { isolate, priority: options.priority, styles: options.styles, onError: fail2 }).then((h) => {
       if (my !== token) return h.unmount();
       handle2 = h;
       if (props !== initial) h.update?.(props);
       setStatus("ready");
-    }, fail);
+    }, fail2);
   };
   mount();
   return {

package/dist/{chunk-UTYAX6MU.js → chunk-IHTUM6LT.js}

@@ -1,10 +1,10 @@
 import {
   createSlot
-} from "./chunk-NCONW6WS.js";
+} from "./chunk-I3VSKSAZ.js";
 import {
   preload,
   registerSrc
-} from "./chunk-2XF5BKV3.js";
+} from "./chunk-TD4S3IHA.js";
 
 // src/core/host-slot.ts
 var noop = () => {

package/dist/{chunk-HP6QWU6K.js → chunk-SDB5AZEI.js}

@@ -1,9 +1,9 @@
 import {
   mountable
-} from "./chunk-2XF5BKV3.js";
+} from "./chunk-TD4S3IHA.js";
 import {
   RemoteError
-} from "./chunk-PX7PBCCT.js";
+} from "./chunk-AKNNHQ2H.js";
 import {
   protocol
 } from "./chunk-GNPFWISJ.js";

package/dist/{chunk-2XF5BKV3.js → chunk-TD4S3IHA.js}

@@ -1,17 +1,21 @@
 import {
   prefetchCss
-} from "./chunk-SFL6LTP3.js";
+} from "./chunk-ZAC6QQI6.js";
 import {
-  RemoteError,
   absolute,
   addLink,
   fetchJson,
-  isRemoteError,
   metric,
   pageOrigin,
   withRetry,
   withTimeout
-} from "./chunk-PX7PBCCT.js";
+} from "./chunk-GNHCZRQP.js";
+import {
+  RemoteError,
+  fail,
+  isRemoteError,
+  report
+} from "./chunk-AKNNHQ2H.js";
 import {
   protocol
 } from "./chunk-GNPFWISJ.js";
@@ -21,7 +25,8 @@ function configure(config) {
   const p = protocol();
   const { remotes, dedupe, ...rest } = config;
   p.configure(rest);
-  if (dedupe) p.pending(import("./dedupe-IWFIXRWG.js").then((m) => m.offer(p, dedupe)).catch(() => {
+  if (rest.captureGlobalErrors) import("./capture-JYFERAPL.js").then((m) => m.capture());
+  if (dedupe) p.pending(import("./dedupe-S7BHQMOZ.js").then((m) => m.offer(p, dedupe)).catch(() => {
   }));
   if (typeof remotes === "string") {
     const url = absolute(remotes);
@@ -74,7 +79,7 @@ function loadRemote(name) {
   return load(name).then((r) => r.module);
 }
 function loadModule(name) {
-  return import("./expose-53BEJB34.js").then((m) => m.resolveModule(name, (n) => loadFile(n)));
+  return import("./expose-JUOUN5N5.js").then((m) => m.resolveModule(name, (n) => loadFile(n))).catch(fail);
 }
 function preload(name) {
   load(name).catch(() => {
@@ -83,13 +88,13 @@ function preload(name) {
 var paths;
 function load(name, isolate, priority) {
   const file = (n) => loadFile(n, isolate, priority);
-  if (protocol().entry(name) || !name.includes("/")) return file(name).then((r) => mountable(name, r));
-  return import("./expose-53BEJB34.js").then((m) => m.resolveTarget(name, file));
+  return (protocol().entry(name) || !name.includes("/") ? file(name).then((r) => mountable(name, r)) : import("./expose-JUOUN5N5.js").then((m) => m.resolveTarget(name, file))).catch(fail);
 }
 function loadFile(name, isolate, priority) {
   const p = protocol();
   return p.load(name, async () => {
-    paths ??= import("./sri-BVKZNX5Q.js").catch(() => null);
+    paths ??= import("./sri-JMX6JLQP.js").catch(() => null);
+    let resolved;
     try {
       await p.pending();
       const override = await devOverride(name);
@@ -97,15 +102,15 @@ function loadFile(name, isolate, priority) {
       if (!entry) throw new RemoteError("NOT_REGISTERED", name, "remote n\xE3o registrado. Use configure({ remotes }).");
       if (entry.module) return await loadLocal(name, entry);
       let t = performance.now();
-      const resolved = await resolveEntry(name, entry, priority);
+      resolved = await resolveEntry(name, entry, priority);
       metric(name, "manifest", t);
-      prefetchCss(resolved.css, (isolate ?? resolved.isolate ?? p.settings().isolate) === "shadow", resolved.sri, priority);
+      prefetchCss(resolved, (isolate ?? resolved.isolate ?? p.settings().isolate) === "shadow", priority);
       t = performance.now();
       const ns = await withRetry(p.settings().retries, () => importModule(name, resolved));
       metric(name, "js", t);
       return { ...resolved, module: ns?.default ?? ns, exports: ns };
     } catch (e) {
-      throw isRemoteError(e) ? e : new RemoteError("LOAD_FAILED", name, String(e?.message ?? e), e);
+      throw report(isRemoteError(e) ? e : new RemoteError("LOAD_FAILED", name, String(e?.message ?? e), e), resolved);
     }
   });
 }
@@ -124,17 +129,23 @@ async function resolveEntry(name, entry, priority) {
   checkOrigin(name, entry.url);
   const m = entry.manifest ?? (new URL(entry.url).pathname.endsWith(".json") ? await fetchJson(entry.url, protocol().settings().timeout, name, { cache: "no-cache", priority }) : { name, entry: entry.url });
   if (typeof m?.entry !== "string") throw new RemoteError("INVALID_MODULE", name, `manifesto inv\xE1lido em ${entry.url}`);
+  if (m.contract && (entry.contract || protocol().settings().contract)) {
+    const why = await (await import("./contract-46EZFQPQ.js")).checkContract(m.contract, entry.contract);
+    if (why) throw new RemoteError("CONTRACT_MISMATCH", name, why);
+  }
   const abs = (u) => absolute(u, entry.url);
   const sri = {};
   for (const file in m.files ?? {}) sri[abs(file)] = m.files[file];
   const resolved = {
     entry: abs(m.entry),
     css: [...m.css ?? [], ...entry.css ?? []].map(abs),
+    shadow: m.shadow,
     // A integridade declarada pelo host vence a do manifesto, e aí só o
     // arquivo único (o que ela descreve) é usado.
     integrity: entry.integrity ?? m.integrity,
     isolate: entry.isolate,
     scope: m.scope,
+    version: m.version,
     sri,
     priority,
     split: m.split && !entry.integrity ? {

package/dist/chunk-ZAC6QQI6.js

@@ -0,0 +1,64 @@
+import {
+  addLink,
+  fetchBytes
+} from "./chunk-GNHCZRQP.js";
+import {
+  protocol
+} from "./chunk-GNPFWISJ.js";
+
+// src/core/css.ts
+var loadedCss = /* @__PURE__ */ new WeakMap();
+var cssText = /* @__PURE__ */ new Map();
+var noop = () => {
+};
+var adopts = () => typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype;
+function fetchCssText(href, integrity, priority) {
+  const key = `${href} ${integrity ?? ""}`;
+  let p = cssText.get(key);
+  if (!p) {
+    p = fetchBytes(href, protocol().settings().timeout, href, { integrity, priority }).then((b) => new TextDecoder().decode(b));
+    p.catch(() => cssText.delete(key));
+    cssText.set(key, p);
+  }
+  return p;
+}
+function prefetchCss(r, shadow, priority = "auto") {
+  if (shadow && adopts()) import("./shadow-6HELCHCJ.js").then((m) => m.prefetch(r, priority), noop);
+  else for (const href of r.css) if (!document.querySelector(`link[href="${href}"]`)) addLink("preload", href, { as: "style", integrity: r.sri?.[href] ?? "", fetchPriority: priority });
+}
+function injectStyles(r, root, el, styles) {
+  return root ? import("./shadow-6HELCHCJ.js").then((m) => m.attachStyles(root, el, r, protocol().settings().styles, styles)) : injectCss(r.css, null, r.sri).then(() => [noop]);
+}
+function injectCss(urls, root, sri = {}) {
+  const owner = root ?? document;
+  let seen = loadedCss.get(owner);
+  if (!seen) loadedCss.set(owner, seen = /* @__PURE__ */ new Map());
+  const parent = root ?? document.head;
+  const timeout = protocol().settings().timeout;
+  return Promise.all(
+    urls.map((href) => {
+      let p = seen.get(href);
+      if (!p) {
+        p = new Promise((resolve) => {
+          const link = addLink("stylesheet", href, { integrity: sri[href] ?? "" }, parent);
+          setTimeout(resolve, timeout);
+          link.onload = () => resolve();
+          link.onerror = () => {
+            link.remove();
+            seen.delete(href);
+            resolve();
+          };
+        });
+        seen.set(href, p);
+      }
+      return p;
+    })
+  );
+}
+
+export {
+  fetchCssText,
+  prefetchCss,
+  injectStyles,
+  injectCss
+};