vitral 0.2.0 → 0.4.0

package/dist/vue.d.ts

@@ -1,8 +1,9 @@
 import * as vue from 'vue';
 import { PropType, App, ShallowRef, WritableComputedRef, ComputedRef, Component } from 'vue';
-import { P as Props, I as Isolation, R as RemoteContext, S as Shared, a as RemoteModule } from './types-BV-hUrms.js';
-export { e as events } from './events-DUdjhfps.js';
+import { P as Props, I as Isolation, R as RemoteContext, S as Shared, a as RemoteModule } from './types-CA2p9KHC.js';
+export { e as events } from './events-Dkpkw_Sv.js';
 import { L as Loading, P as Prefetch } from './host-slot-Cz6EiGsB.js';
+import './errors-kjBv6IH_.js';
 
 interface VueRemoteOptions {
     /** Instale plugins (router, pinia, i18n…) no app do remote. */
@@ -12,6 +13,12 @@ interface VueRemoteOptions {
 declare function vueRemote<P extends Props>(component: Component, options?: VueRemoteOptions): RemoteModule<P>;
 /** Dentro de um remote: dá acesso ao contexto (nome, eventos, baseUrl). */
 declare function useVitral(): RemoteContext | null;
+/**
+ * Dentro de um remote: onde renderizar portais. No Shadow DOM é um elemento
+ * dentro do shadow root (com os estilos do remote); senão, `'body'`. Use em
+ * `<Teleport :to="portal">`.
+ */
+declare function usePortalContainer(): HTMLElement | 'body';
 /** Assina um evento do barramento global enquanto o componente existir. */
 declare function useEvent<T = unknown>(type: string, handler: (payload: T) => void): void;
 /** Ref com o último valor emitido em `type`. */
@@ -120,8 +127,8 @@ declare const VitralRemote: vue.DefineComponent<vue.ExtractPropTypes<{
     onError?: ((...args: any[]) => any) | undefined;
     onReady?: ((...args: any[]) => any) | undefined;
 }>, {
-    isolate: Isolation;
     name: string;
+    isolate: Isolation;
     priority: RequestPriority;
     loading: Loading;
     src: string;
@@ -130,4 +137,4 @@ declare const VitralRemote: vue.DefineComponent<vue.ExtractPropTypes<{
     keepAlive: number | boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { VitralRemote, type VueRemoteOptions, useEvent, useEventValue, useShared, useVitral, vueRemote };
+export { VitralRemote, type VueRemoteOptions, useEvent, useEventValue, usePortalContainer, useShared, useVitral, vueRemote };

package/dist/vue.js

@@ -1,19 +1,20 @@
 import {
   hostSlot,
   timings
-} from "./chunk-UTYAX6MU.js";
+} from "./chunk-W6322KGP.js";
 import {
   defineRemote,
   events,
   memoSelect,
   same,
   shared
-} from "./chunk-NCONW6WS.js";
-import "./chunk-2XF5BKV3.js";
-import "./chunk-SFL6LTP3.js";
+} from "./chunk-WD4CDGDZ.js";
+import "./chunk-EMSB2NVX.js";
+import "./chunk-6EX5KYT5.js";
 import {
   absolute
-} from "./chunk-PX7PBCCT.js";
+} from "./chunk-TW7KYJQ6.js";
+import "./chunk-463H6B56.js";
 import "./chunk-GNPFWISJ.js";
 
 // src/vue.ts
@@ -55,6 +56,9 @@ function vueRemote(component, options = {}) {
 function useVitral() {
   return inject(VitralKey, null);
 }
+function usePortalContainer() {
+  return useVitral()?.portalContainer ?? "body";
+}
 function useEvent(type, handler) {
   let off;
   onMounted(() => off = events.on(type, handler));
@@ -142,6 +146,7 @@ export {
   events,
   useEvent,
   useEventValue,
+  usePortalContainer,
   useShared,
   useVitral,
   vueRemote

package/package.json

@@ -1,23 +1,33 @@
 {
   "name": "vitral",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Micro-frontends sem burocracia: um contrato mount/unmount, carregamento em runtime e adaptadores para React, Next, Vue, Nuxt, Angular, Svelte, Solid, Preact, Lit e JS/TS puro.",
   "keywords": [
     "micro-frontend",
+    "micro-frontends",
+    "microfrontend",
     "microfrontends",
+    "mfe",
     "module-federation",
     "single-spa",
+    "vite",
+    "vite-plugin",
+    "runtime",
+    "shadow-dom",
     "react",
     "nextjs",
     "vue",
     "nuxt",
     "angular",
     "svelte",
+    "sveltekit",
     "solid",
+    "solidjs",
     "preact",
+    "astro",
     "lit",
     "web-components",
-    "vite"
+    "typescript"
   ],
   "homepage": "https://github.com/joaogabriel15/vitral#readme",
   "bugs": {
@@ -101,6 +111,22 @@
     "./testing": {
       "types": "./dist/testing.d.ts",
       "import": "./dist/testing.js"
+    },
+    "./sentry": {
+      "types": "./dist/sentry.d.ts",
+      "import": "./dist/sentry.js"
+    },
+    "./otel": {
+      "types": "./dist/otel.d.ts",
+      "import": "./dist/otel.js"
+    },
+    "./single-spa": {
+      "types": "./dist/single-spa.d.ts",
+      "import": "./dist/single-spa.js"
+    },
+    "./federation": {
+      "types": "./dist/federation.d.ts",
+      "import": "./dist/federation.js"
     }
   },
   "publishConfig": {
@@ -194,9 +220,12 @@
         "./overrides-*",
         "./sri-*",
         "./dedupe-*",
-        "./expose-*"
+        "./contract-*",
+        "./expose-*",
+        "./capture-*",
+        "./channel-*"
       ],
-      "limit": "4.3 kB"
+      "limit": "4.65 kB"
     },
     {
       "name": "núcleo",
@@ -204,21 +233,38 @@
       "import": "{ RemoteError, __reset, component, configure, createEventBus, createSlot, defineRemote, events, html, loadRemote, mountRemote, navigate, preload, register, render, unsafeHTML }",
       "ignore": [
         "./shadow-*",
+        "./overrides-*",
         "./sri-*",
         "./dedupe-*",
-        "./expose-*"
+        "./contract-*",
+        "./expose-*",
+        "./capture-*",
+        "./channel-*"
       ],
-      "limit": "5.4 kB"
+      "limit": "5.78 kB"
     },
     {
       "name": "SRI e dedupe (sob demanda, com as dependências)",
       "path": "dist/sri-*.js",
-      "limit": "2.4 kB"
+      "limit": "2.59 kB"
     },
     {
       "name": "dedupe (sob demanda, para hosts que oferecem dependências)",
       "path": "dist/dedupe-*.js",
-      "limit": "0.65 kB"
+      "limit": "0.67 kB"
+    },
+    {
+      "name": "overrides (sob demanda)",
+      "path": "dist/overrides-*.js",
+      "limit": "1.29 kB"
+    },
+    {
+      "name": "canal: canary e rollback (sob demanda)",
+      "path": "dist/channel-*.js",
+      "ignore": [
+        "./chunk-*"
+      ],
+      "limit": "1.02 kB"
     },
     {
       "name": "host mínimo + store",
@@ -229,9 +275,12 @@
         "./overrides-*",
         "./sri-*",
         "./dedupe-*",
-        "./expose-*"
+        "./contract-*",
+        "./expose-*",
+        "./capture-*",
+        "./channel-*"
       ],
-      "limit": "5 kB"
+      "limit": "5.34 kB"
     },
     {
       "name": "host mínimo + store + persist + syncTabs",
@@ -242,9 +291,12 @@
         "./overrides-*",
         "./sri-*",
         "./dedupe-*",
-        "./expose-*"
+        "./contract-*",
+        "./expose-*",
+        "./capture-*",
+        "./channel-*"
       ],
-      "limit": "5.2 kB"
+      "limit": "5.57 kB"
     },
     {
       "name": "estilos do Shadow DOM (além do núcleo)",
@@ -252,7 +304,7 @@
       "ignore": [
         "./chunk-*"
       ],
-      "limit": "1 kB"
+      "limit": "1.72 kB"
     },
     {
       "name": "react",
@@ -262,9 +314,13 @@
         "react",
         "react-dom",
         "./shadow-*",
+        "./overrides-*",
         "./sri-*",
         "./dedupe-*",
-        "./expose-*"
+        "./contract-*",
+        "./expose-*",
+        "./capture-*",
+        "./channel-*"
       ],
       "limit": "6.2 kB"
     },
@@ -275,11 +331,15 @@
       "ignore": [
         "vue",
         "./shadow-*",
+        "./overrides-*",
         "./sri-*",
         "./dedupe-*",
-        "./expose-*"
+        "./contract-*",
+        "./expose-*",
+        "./capture-*",
+        "./channel-*"
       ],
-      "limit": "6 kB"
+      "limit": "6.12 kB"
     },
     {
       "name": "element",
@@ -287,41 +347,73 @@
       "import": "{ defineVitralElement }",
       "ignore": [
         "./shadow-*",
+        "./overrides-*",
         "./sri-*",
         "./dedupe-*",
-        "./expose-*"
+        "./contract-*",
+        "./expose-*",
+        "./capture-*",
+        "./channel-*"
       ],
-      "limit": "6.1 kB"
+      "limit": "6.33 kB"
     },
     {
       "name": "devtools",
       "path": "dist/devtools.js",
       "import": "{ devtools }",
-      "limit": "2 kB"
+      "limit": "2.05 kB"
     },
     {
       "name": "auto",
       "path": "dist/auto.js",
-      "limit": "6 kB",
+      "limit": "6.12 kB",
       "ignore": [
         "./shadow-*",
         "./overrides-*",
         "./sri-*",
         "./dedupe-*",
-        "./expose-*"
+        "./contract-*",
+        "./expose-*",
+        "./capture-*",
+        "./channel-*"
       ]
     },
     {
       "name": "routes",
       "path": "dist/routes.js",
       "import": "{ routes }",
-      "limit": "7.9 kB"
+      "limit": "9.12 kB",
+      "ignore": [
+        "./overrides-*",
+        "./channel-*"
+      ]
+    },
+    {
+      "name": "single-spa",
+      "path": "dist/single-spa.js",
+      "import": "{ singleSpaRemote }",
+      "limit": "0.5 kB"
+    },
+    {
+      "name": "federation",
+      "path": "dist/federation.js",
+      "import": "{ federationRemote }",
+      "limit": "1.25 kB"
     },
     {
       "name": "iframe",
       "path": "dist/iframe.js",
       "import": "{ enableIframe }",
-      "limit": "6 kB"
+      "limit": "6 kB",
+      "ignore": [
+        "./overrides-*",
+        "./channel-*"
+      ]
+    },
+    {
+      "name": "embed (loader de sites de terceiros, arquivo único com Shadow DOM, SRI e canal)",
+      "path": "dist/embed.js",
+      "limit": "11.95 kB"
     }
   ],
   "scripts": {

package/dist/chunk-DXORSF4X.js

@@ -1,42 +0,0 @@
-import {
-  protocol
-} from "./chunk-GNPFWISJ.js";
-
-// src/core/overrides.ts
-var OVERRIDES_KEY = "vitral:overrides";
-function overridesEnabled() {
-  return !!protocol().settings().devOverrides || typeof location !== "undefined" && /^(localhost|127\.0\.0\.1|\[::1\])$/.test(location.hostname);
-}
-var manifestUrl = (url) => /\.(json|m?js)(\?|$)/.test(url) ? url : url.replace(/\/?$/, "/vitral.json");
-function storedOverrides() {
-  try {
-    return JSON.parse(localStorage.getItem(OVERRIDES_KEY) ?? "{}") ?? {};
-  } catch {
-    return {};
-  }
-}
-var warned = /* @__PURE__ */ new Set();
-function overrideFor(name) {
-  if (!overridesEnabled()) return;
-  const all = storedOverrides();
-  for (const pair of new URLSearchParams(location.search).getAll("vitral").join(",").split(",")) {
-    const at = pair.indexOf("@");
-    if (at > 0) all[pair.slice(0, at)] = pair.slice(at + 1);
-  }
-  if (!all[name]) return;
-  const url = new URL(manifestUrl(all[name]), location.href).href;
-  const p = protocol();
-  const trusted = p.settings().trusted ?? [];
-  const origin = new URL(url).origin;
-  if (!trusted.includes(origin)) p.configure({ trusted: [...trusted, origin] });
-  if (!warned.has(name)) console.warn(`[vitral] override ativo: ${name} \u2192 ${url}`), warned.add(name);
-  return { url };
-}
-
-export {
-  OVERRIDES_KEY,
-  overridesEnabled,
-  manifestUrl,
-  storedOverrides,
-  overrideFor
-};

package/dist/chunk-SFL6LTP3.js

@@ -1,56 +0,0 @@
-import {
-  addLink
-} from "./chunk-PX7PBCCT.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) {
-  let p = cssText.get(href);
-  if (!p) {
-    p = fetch(href, { credentials: "omit", integrity, priority }).then((r) => r.ok ? r.text() : "").catch(() => "");
-    cssText.set(href, p);
-  }
-  return p;
-}
-function prefetchCss(urls, shadow, sri = {}, priority = "auto") {
-  for (const href of urls) {
-    if (shadow && adopts()) void fetchCssText(href, sri[href], priority);
-    else if (!document.querySelector(`link[href="${href}"]`)) addLink("preload", href, { as: "style", integrity: sri[href] ?? "", fetchPriority: priority });
-  }
-}
-function injectStyles(urls, root, el, styles, sri = {}) {
-  return root ? import("./shadow-MYRJQLLY.js").then((m) => m.attachStyles(root, el, urls, protocol().settings().styles, styles, sri)) : injectCss(urls, null, 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;
-  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);
-          link.onload = link.onerror = () => resolve();
-        });
-        seen.set(href, p);
-      }
-      return p;
-    })
-  );
-}
-
-export {
-  fetchCssText,
-  prefetchCss,
-  injectStyles,
-  injectCss
-};

package/dist/expose-53BEJB34.js

@@ -1,14 +0,0 @@
-import {
-  resolveModule,
-  resolveTarget,
-  splitName
-} from "./chunk-HP6QWU6K.js";
-import "./chunk-2XF5BKV3.js";
-import "./chunk-SFL6LTP3.js";
-import "./chunk-PX7PBCCT.js";
-import "./chunk-GNPFWISJ.js";
-export {
-  resolveModule,
-  resolveTarget,
-  splitName
-};

package/dist/overrides-NZAIUGK5.js

@@ -1,15 +0,0 @@
-import {
-  OVERRIDES_KEY,
-  manifestUrl,
-  overrideFor,
-  overridesEnabled,
-  storedOverrides
-} from "./chunk-DXORSF4X.js";
-import "./chunk-GNPFWISJ.js";
-export {
-  OVERRIDES_KEY,
-  manifestUrl,
-  overrideFor,
-  overridesEnabled,
-  storedOverrides
-};

package/dist/shadow-MYRJQLLY.js

@@ -1,72 +0,0 @@
-import {
-  fetchCssText,
-  injectCss
-} from "./chunk-SFL6LTP3.js";
-import "./chunk-PX7PBCCT.js";
-import "./chunk-GNPFWISJ.js";
-
-// src/core/shadow.ts
-var sheets = /* @__PURE__ */ new Map();
-var hoisted = /* @__PURE__ */ new Set();
-var RELATIVE_URL = /url\(\s*(['"]?)(?![a-z]+:|\/\/|#)([^'")]+)\1\s*\)/gi;
-var GLOBAL_RULES = /@property\s+(--[\w-]+)\s*\{[^}]*\}|@font-face\s*\{[^}]*\}|@import\s+(?:url\(\s*)?(?:(['"])(.*?)\2|([^'"\s);]+))\s*\)?[^;]*;/gi;
-async function attachStyles(root, el, css, global = {}, local = {}, sri = {}) {
-  const urls = [...global.inherit ?? [], ...local.inherit ?? []].map((u) => new URL(u, document.baseURI).href).concat(css);
-  if (typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype) {
-    const loaded = await Promise.all(urls.map((u) => loadSheet(u, [], sri[u])));
-    root.adoptedStyleSheets = [.../* @__PURE__ */ new Set([...root.adoptedStyleSheets, ...loaded.flat()])];
-  } else {
-    await injectCss(urls, root, sri);
-  }
-  return (local.mirrorTheme ?? global.mirrorTheme) === false ? () => {
-  } : mirrorTheme(el);
-}
-function loadSheet(href, chain, integrity) {
-  let p = sheets.get(href);
-  if (!p) {
-    p = fetchCssText(href, integrity).then((text) => {
-      const up = [];
-      const imports = [];
-      const rest = text.replace(RELATIVE_URL, (_, q, u) => `url(${q}${new URL(u, href).href}${q})`).replace(GLOBAL_RULES, (rule, prop, _q, quoted, bare) => {
-        const url = quoted ?? bare;
-        if (url) imports.push(new URL(url, href).href);
-        else if (!hoisted.has(prop ?? rule)) {
-          hoisted.add(prop ?? rule);
-          up.push(rule);
-        }
-        return "";
-      });
-      if (up.length) {
-        const style = document.createElement("style");
-        style.setAttribute("data-vitral-properties", "");
-        style.textContent = up.join("\n");
-        document.head.appendChild(style);
-      }
-      const sheet = new CSSStyleSheet();
-      sheet.replaceSync(rest);
-      const next = [...chain, href];
-      return Promise.all(imports.filter((u) => !next.includes(u)).map((u) => loadSheet(u, next))).then((found) => [...found.flat(), sheet]);
-    }).catch(() => []);
-    sheets.set(href, p);
-  }
-  return p;
-}
-function mirrorTheme(el) {
-  const html = document.documentElement;
-  let added = [];
-  const sync = () => {
-    el.classList.remove(...added);
-    added = [...html.classList].filter((c) => !el.classList.contains(c));
-    el.classList.add(...added);
-    const theme = html.getAttribute("data-theme");
-    if (theme === null) el.removeAttribute("data-theme");
-    else el.setAttribute("data-theme", theme);
-  };
-  sync();
-  const observer = new MutationObserver(sync);
-  observer.observe(html, { attributeFilter: ["class", "data-theme"] });
-  return () => observer.disconnect();
-}
-export {
-  attachStyles
-};