vitral 0.1.0 → 0.3.0

package/dist/vue.d.ts

@@ -1,7 +1,9 @@
 import * as vue from 'vue';
-import { PropType, App, ShallowRef, Component } from 'vue';
-import { Props, Isolation, RemoteContext, RemoteModule } from './index.js';
-export { events } from './index.js';
+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-Czvm-siZ.js';
+export { e as events } from './events-D5gs7rff.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. */
@@ -11,10 +13,29 @@ 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`. */
 declare function useEventValue<T = unknown>(type: string): ShallowRef<T | undefined>;
+/**
+ * Ref de uma chave compartilhada (`provide`/`shared`). Sem seletor, a ref
+ * também escreve (`usuario.value = …` chama `set`, e `v-model` funciona). Com
+ * seletor, é só leitura e só muda quando o resultado muda (`Object.is`). A
+ * assinatura acaba junto com o componente (ou o `effectScope`).
+ *
+ *   const usuario = useShared('usuario')
+ *   const nome = useShared('usuario', (u) => u?.nome)
+ */
+declare function useShared<K extends keyof Shared>(key: K): WritableComputedRef<Shared[K] | undefined>;
+declare function useShared<K extends keyof Shared, S>(key: K, select: (value: Shared[K] | undefined) => S): ComputedRef<S>;
+declare function useShared<T = unknown>(key: string): WritableComputedRef<T | undefined>;
+declare function useShared<T, S>(key: string, select: (value: T | undefined) => S): ComputedRef<S>;
 
 /**
  * Renderiza um remote. No servidor (Nuxt SSR) renderiza só o slot `fallback`;
@@ -23,9 +44,15 @@ declare function useEventValue<T = unknown>(type: string): ShallowRef<T | undefi
  * Slots: `fallback` (carregando) e `error` ({ error, retry }).
  */
 declare const VitralRemote: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Nome registrado. Com `src`, o nome sob o qual a URL é registrada. */
     name: {
         type: StringConstructor;
-        required: true;
+        default: undefined;
+    };
+    /** URL do `vitral.json`. Dispensa `configure()`. */
+    src: {
+        type: StringConstructor;
+        default: undefined;
     };
     props: {
         type: PropType<Props>;
@@ -35,12 +62,38 @@ declare const VitralRemote: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<Isolation>;
         default: undefined;
     };
+    /** `'lazy'`: monta perto de aparecer na tela; `'idle'`: com o navegador ocioso. */
+    loading: {
+        type: PropType<Loading>;
+        default: undefined;
+    };
+    /** Baixa antes de montar: `'hover'`, `'visible'` ou `'idle'`. */
+    prefetch: {
+        type: PropType<Prefetch>;
+        default: undefined;
+    };
+    /** `'high'` para o remote que aparece logo ao abrir a página. */
+    priority: {
+        type: PropType<RequestPriority>;
+        default: undefined;
+    };
+    /** Ao sair da página, guarda o remote montado (LRU, padrão 5) e na volta só atualiza as props. */
+    keepAlive: {
+        type: (NumberConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("error" | "ready")[], "error" | "ready", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Nome registrado. Com `src`, o nome sob o qual a URL é registrada. */
     name: {
         type: StringConstructor;
-        required: true;
+        default: undefined;
+    };
+    /** URL do `vitral.json`. Dispensa `configure()`. */
+    src: {
+        type: StringConstructor;
+        default: undefined;
     };
     props: {
         type: PropType<Props>;
@@ -50,12 +103,38 @@ declare const VitralRemote: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<Isolation>;
         default: undefined;
     };
+    /** `'lazy'`: monta perto de aparecer na tela; `'idle'`: com o navegador ocioso. */
+    loading: {
+        type: PropType<Loading>;
+        default: undefined;
+    };
+    /** Baixa antes de montar: `'hover'`, `'visible'` ou `'idle'`. */
+    prefetch: {
+        type: PropType<Prefetch>;
+        default: undefined;
+    };
+    /** `'high'` para o remote que aparece logo ao abrir a página. */
+    priority: {
+        type: PropType<RequestPriority>;
+        default: undefined;
+    };
+    /** Ao sair da página, guarda o remote montado (LRU, padrão 5) e na volta só atualiza as props. */
+    keepAlive: {
+        type: (NumberConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
 }>> & Readonly<{
     onError?: ((...args: any[]) => any) | undefined;
     onReady?: ((...args: any[]) => any) | undefined;
 }>, {
-    props: Props;
     isolate: Isolation;
+    name: string;
+    priority: RequestPriority;
+    loading: Loading;
+    src: string;
+    props: Props;
+    prefetch: Prefetch;
+    keepAlive: number | boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { VitralRemote, type VueRemoteOptions, useEvent, useEventValue, useVitral, vueRemote };
+export { VitralRemote, type VueRemoteOptions, useEvent, useEventValue, usePortalContainer, useShared, useVitral, vueRemote };

package/dist/vue.js

@@ -1,17 +1,33 @@
+import {
+  hostSlot,
+  timings
+} from "./chunk-IHTUM6LT.js";
 import {
   defineRemote,
   events,
-  mountRemote
-} from "./chunk-TTL52BF2.js";
+  memoSelect,
+  same,
+  shared
+} from "./chunk-I3VSKSAZ.js";
+import "./chunk-TD4S3IHA.js";
+import "./chunk-ZAC6QQI6.js";
+import {
+  absolute
+} from "./chunk-GNHCZRQP.js";
+import "./chunk-AKNNHQ2H.js";
+import "./chunk-GNPFWISJ.js";
 
 // src/vue.ts
 import {
+  computed,
   createApp,
   defineComponent,
+  getCurrentScope,
   h,
   inject,
   onBeforeUnmount,
   onMounted,
+  onScopeDispose,
   ref,
   shallowReactive,
   shallowRef,
@@ -40,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));
@@ -50,68 +69,75 @@ function useEventValue(type) {
   useEvent(type, (v) => value.value = v);
   return value;
 }
+function useShared(key, select) {
+  const handle = shared(key);
+  const pick = memoSelect();
+  const state = shallowRef();
+  const off = handle.subscribe((v) => state.value = pick(v, select ?? same));
+  if (getCurrentScope()) onScopeDispose(off);
+  return select ? computed(() => state.value) : computed({ get: () => state.value, set: handle.set });
+}
 var VitralRemote = defineComponent({
   name: "VitralRemote",
   props: {
-    name: { type: String, required: true },
+    /** Nome registrado. Com `src`, o nome sob o qual a URL é registrada. */
+    name: { type: String, default: void 0 },
+    /** URL do `vitral.json`. Dispensa `configure()`. */
+    src: { type: String, default: void 0 },
     props: { type: Object, default: () => ({}) },
-    isolate: { type: String, default: void 0 }
+    isolate: { type: String, default: void 0 },
+    /** `'lazy'`: monta perto de aparecer na tela; `'idle'`: com o navegador ocioso. */
+    loading: { type: String, default: void 0 },
+    /** Baixa antes de montar: `'hover'`, `'visible'` ou `'idle'`. */
+    prefetch: { type: String, default: void 0 },
+    /** `'high'` para o remote que aparece logo ao abrir a página. */
+    priority: { type: String, default: void 0 },
+    /** Ao sair da página, guarda o remote montado (LRU, padrão 5) e na volta só atualiza as props. */
+    keepAlive: { type: [Boolean, Number], default: false }
   },
   emits: ["error", "ready"],
   setup(p, { slots, emit }) {
-    const slot = ref(null);
+    const target = ref(null);
     const status = ref("loading");
     const error = shallowRef(null);
-    const attempt = ref(0);
-    let handle = null;
-    let token = 0;
-    function fail(e, my) {
-      if (my !== token) return;
-      error.value = e;
-      status.value = "error";
-      emit("error", e);
-      if (!slots.error) console.error(e);
-    }
-    async function mount() {
-      const my = ++token;
-      handle?.unmount();
-      handle = null;
-      status.value = "loading";
-      try {
-        const onError = (e) => fail(e, my);
-        const initial = p.props;
-        const h2 = await mountRemote(slot.value, p.name, { ...initial }, { isolate: p.isolate, onError });
-        if (my !== token) return h2.unmount();
-        handle = h2;
-        if (p.props !== initial) h2.update?.({ ...p.props });
-        status.value = "ready";
-        emit("ready");
-      } catch (e) {
-        fail(e, my);
-      }
-    }
-    onMounted(mount);
-    watch(() => [p.name, p.isolate, attempt.value], mount, { flush: "post" });
+    let slot = null;
+    onMounted(() => {
+      slot = hostSlot(target.value, {
+        name: p.name,
+        src: p.src,
+        props: { ...p.props },
+        isolate: p.isolate,
+        loading: p.loading,
+        prefetch: p.prefetch,
+        priority: p.priority,
+        keepAlive: p.keepAlive,
+        onStatus(s, e) {
+          status.value = s;
+          error.value = e;
+          if (s === "ready") emit("ready", timings(p.name || absolute(p.src ?? "")));
+          if (e) {
+            emit("error", e);
+            if (!slots.error) console.error(e);
+          }
+        }
+      });
+    });
+    watch(() => [p.name, p.src, p.isolate], ([name, src, isolate]) => slot?.set({ name, src, isolate }), { flush: "post" });
     watch(
       () => p.props,
-      (next) => handle?.update?.({ ...next }),
+      (next) => slot?.update({ ...next }),
       { deep: true }
     );
     onBeforeUnmount(() => {
-      token++;
-      handle?.unmount();
-      handle = null;
+      slot?.destroy();
+      slot = null;
     });
-    const retry = () => attempt.value++;
-    return () => h("div", { "data-vitral": p.name, "data-vitral-status": status.value }, [
+    const retry = () => slot?.retry();
+    return () => h("div", { "data-vitral": p.name ?? p.src, "data-vitral-status": status.value }, [
       status.value === "loading" ? slots.fallback?.() : null,
       status.value === "error" ? slots.error?.({ error: error.value, retry }) : null,
       // O Vue nunca coloca filhos neste div: ele pertence ao remote.
-      h("div", {
-        key: `${p.name}:${p.isolate}:${attempt.value}`,
-        ref: slot,
-        style: status.value === "error" ? "display:none" : void 0
-      })
+      h("div", { ref: target })
     ]);
   }
 });
@@ -120,6 +146,8 @@ export {
   events,
   useEvent,
   useEventValue,
+  usePortalContainer,
+  useShared,
   useVitral,
   vueRemote
 };

package/package.json

@@ -1,23 +1,33 @@
 {
   "name": "vitral",
-  "version": "0.1.0",
+  "version": "0.3.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": {
@@ -31,9 +41,14 @@
   "license": "MIT",
   "author": "João (https://github.com/joaogabriel15)",
   "type": "module",
-  "sideEffects": false,
+  "bin": {
+    "vitral": "./dist/cli.js"
+  },
+  "sideEffects": [
+    "./dist/auto.js"
+  ],
   "engines": {
-    "node": ">=18"
+    "node": ">=20.19"
   },
   "files": [
     "dist",
@@ -45,10 +60,26 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./auto": {
+      "types": "./dist/auto.d.ts",
+      "import": "./dist/auto.js"
+    },
+    "./devtools": {
+      "types": "./dist/devtools.d.ts",
+      "import": "./dist/devtools.js"
+    },
     "./element": {
       "types": "./dist/element.d.ts",
       "import": "./dist/element.js"
     },
+    "./routes": {
+      "types": "./dist/routes.d.ts",
+      "import": "./dist/routes.js"
+    },
+    "./iframe": {
+      "types": "./dist/iframe.d.ts",
+      "import": "./dist/iframe.js"
+    },
     "./react": {
       "types": "./dist/react.d.ts",
       "import": "./dist/react.js"
@@ -80,6 +111,14 @@
     "./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"
     }
   },
   "publishConfig": {
@@ -97,6 +136,7 @@
     "react-dom": ">=18",
     "solid-js": ">=1.8",
     "svelte": ">=5",
+    "typescript": ">=5",
     "vite": ">=5",
     "vue": ">=3.3"
   },
@@ -127,6 +167,9 @@
     },
     "vite": {
       "optional": true
+    },
+    "typescript": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -137,10 +180,12 @@
     "@arethetypeswrong/cli": "^0.18.5",
     "@size-limit/preset-small-lib": "^11.2.0",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@tailwindcss/vite": "^4.3.3",
     "@testing-library/dom": "^10.4.2",
     "@types/node": "^22.20.5",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "@vitest/coverage-v8": "4.1.11",
     "happy-dom": "^20.0.0",
     "preact": "^10.29.8",
     "publint": "^0.3.25",
@@ -150,6 +195,7 @@
     "size-limit": "^11.2.0",
     "solid-js": "^1.9.17",
     "svelte": "^5.57.2",
+    "tailwindcss": "^4.3.3",
     "tsup": "^8.5.0",
     "typescript": "~5.9.0",
     "vite": "^8.0.0",
@@ -157,10 +203,82 @@
     "vue": "^3.5.0"
   },
   "size-limit": [
+    {
+      "name": "host mínimo",
+      "path": "dist/index.js",
+      "import": "{ configure, createSlot }",
+      "ignore": [
+        "./shadow-*",
+        "./overrides-*",
+        "./sri-*",
+        "./dedupe-*",
+        "./contract-*",
+        "./expose-*",
+        "./capture-*"
+      ],
+      "limit": "4.6 kB"
+    },
     {
       "name": "núcleo",
       "path": "dist/index.js",
-      "limit": "5 kB"
+      "import": "{ RemoteError, __reset, component, configure, createEventBus, createSlot, defineRemote, events, html, loadRemote, mountRemote, navigate, preload, register, render, unsafeHTML }",
+      "ignore": [
+        "./shadow-*",
+        "./sri-*",
+        "./dedupe-*",
+        "./contract-*",
+        "./expose-*",
+        "./capture-*"
+      ],
+      "limit": "5.73 kB"
+    },
+    {
+      "name": "SRI e dedupe (sob demanda, com as dependências)",
+      "path": "dist/sri-*.js",
+      "limit": "2.4 kB"
+    },
+    {
+      "name": "dedupe (sob demanda, para hosts que oferecem dependências)",
+      "path": "dist/dedupe-*.js",
+      "limit": "0.67 kB"
+    },
+    {
+      "name": "host mínimo + store",
+      "path": "dist/index.js",
+      "import": "{ configure, createSlot, provide, shared, batch }",
+      "ignore": [
+        "./shadow-*",
+        "./overrides-*",
+        "./sri-*",
+        "./dedupe-*",
+        "./contract-*",
+        "./expose-*",
+        "./capture-*"
+      ],
+      "limit": "5.29 kB"
+    },
+    {
+      "name": "host mínimo + store + persist + syncTabs",
+      "path": "dist/index.js",
+      "import": "{ configure, createSlot, provide, shared, batch, persist, syncTabs }",
+      "ignore": [
+        "./shadow-*",
+        "./overrides-*",
+        "./sri-*",
+        "./dedupe-*",
+        "./contract-*",
+        "./expose-*",
+        "./capture-*"
+      ],
+      "limit": "5.51 kB"
+    },
+    {
+      "name": "estilos do Shadow DOM (além do núcleo)",
+      "path": "dist/shadow-*.js",
+      "ignore": [
+        "./chunk-*"
+      ],
+      "limit": "1.22 kB"
     },
     {
       "name": "react",
@@ -168,30 +286,82 @@
       "import": "{ Remote, reactRemote }",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./shadow-*",
+        "./sri-*",
+        "./dedupe-*",
+        "./contract-*",
+        "./expose-*",
+        "./capture-*"
       ],
-      "limit": "6 kB"
+      "limit": "6.2 kB"
     },
     {
       "name": "vue",
       "path": "dist/vue.js",
       "import": "{ VitralRemote, vueRemote }",
       "ignore": [
-        "vue"
+        "vue",
+        "./shadow-*",
+        "./sri-*",
+        "./dedupe-*",
+        "./contract-*",
+        "./expose-*",
+        "./capture-*"
       ],
-      "limit": "6 kB"
+      "limit": "6.08 kB"
     },
     {
       "name": "element",
       "path": "dist/element.js",
       "import": "{ defineVitralElement }",
+      "ignore": [
+        "./shadow-*",
+        "./sri-*",
+        "./dedupe-*",
+        "./contract-*",
+        "./expose-*",
+        "./capture-*"
+      ],
+      "limit": "6.32 kB"
+    },
+    {
+      "name": "devtools",
+      "path": "dist/devtools.js",
+      "import": "{ devtools }",
+      "limit": "2 kB"
+    },
+    {
+      "name": "auto",
+      "path": "dist/auto.js",
+      "limit": "6.07 kB",
+      "ignore": [
+        "./shadow-*",
+        "./overrides-*",
+        "./sri-*",
+        "./dedupe-*",
+        "./contract-*",
+        "./expose-*",
+        "./capture-*"
+      ]
+    },
+    {
+      "name": "routes",
+      "path": "dist/routes.js",
+      "import": "{ routes }",
+      "limit": "8.67 kB"
+    },
+    {
+      "name": "iframe",
+      "path": "dist/iframe.js",
+      "import": "{ enableIframe }",
       "limit": "6 kB"
     }
   ],
   "scripts": {
     "build": "tsup",
-    "test": "vitest run",
-    "typecheck": "tsc --noEmit",
+    "test": "vitest run --coverage",
+    "typecheck": "tsc --noEmit && tsc -p test/types",
     "lint:pkg": "publint --strict && attw --pack --profile esm-only",
     "size": "size-limit"
   }