vitral 0.1.0 → 0.2.0

package/dist/vue.d.ts

@@ -1,7 +1,8 @@
 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-BV-hUrms.js';
+export { e as events } from './events-DUdjhfps.js';
+import { L as Loading, P as Prefetch } from './host-slot-Cz6EiGsB.js';
 
 interface VueRemoteOptions {
     /** Instale plugins (router, pinia, i18n…) no app do remote. */
@@ -15,6 +16,19 @@ declare function useVitral(): RemoteContext | null;
 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 +37,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 +55,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 +96,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, useShared, useVitral, vueRemote };

package/dist/vue.js

@@ -1,17 +1,32 @@
+import {
+  hostSlot,
+  timings
+} from "./chunk-UTYAX6MU.js";
 import {
   defineRemote,
   events,
-  mountRemote
-} from "./chunk-TTL52BF2.js";
+  memoSelect,
+  same,
+  shared
+} from "./chunk-NCONW6WS.js";
+import "./chunk-2XF5BKV3.js";
+import "./chunk-SFL6LTP3.js";
+import {
+  absolute
+} from "./chunk-PX7PBCCT.js";
+import "./chunk-GNPFWISJ.js";
 
 // src/vue.ts
 import {
+  computed,
   createApp,
   defineComponent,
+  getCurrentScope,
   h,
   inject,
   onBeforeUnmount,
   onMounted,
+  onScopeDispose,
   ref,
   shallowReactive,
   shallowRef,
@@ -50,68 +65,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 +142,7 @@ export {
   events,
   useEvent,
   useEventValue,
+  useShared,
   useVitral,
   vueRemote
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitral",
-  "version": "0.1.0",
+  "version": "0.2.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",
@@ -31,9 +31,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 +50,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"
@@ -97,6 +118,7 @@
     "react-dom": ">=18",
     "solid-js": ">=1.8",
     "svelte": ">=5",
+    "typescript": ">=5",
     "vite": ">=5",
     "vue": ">=3.3"
   },
@@ -127,6 +149,9 @@
     },
     "vite": {
       "optional": true
+    },
+    "typescript": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -137,10 +162,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 +177,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,27 +185,99 @@
     "vue": "^3.5.0"
   },
   "size-limit": [
+    {
+      "name": "host mínimo",
+      "path": "dist/index.js",
+      "import": "{ configure, createSlot }",
+      "ignore": [
+        "./shadow-*",
+        "./overrides-*",
+        "./sri-*",
+        "./dedupe-*",
+        "./expose-*"
+      ],
+      "limit": "4.3 kB"
+    },
     {
       "name": "núcleo",
       "path": "dist/index.js",
+      "import": "{ RemoteError, __reset, component, configure, createEventBus, createSlot, defineRemote, events, html, loadRemote, mountRemote, navigate, preload, register, render, unsafeHTML }",
+      "ignore": [
+        "./shadow-*",
+        "./sri-*",
+        "./dedupe-*",
+        "./expose-*"
+      ],
+      "limit": "5.4 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.65 kB"
+    },
+    {
+      "name": "host mínimo + store",
+      "path": "dist/index.js",
+      "import": "{ configure, createSlot, provide, shared, batch }",
+      "ignore": [
+        "./shadow-*",
+        "./overrides-*",
+        "./sri-*",
+        "./dedupe-*",
+        "./expose-*"
+      ],
       "limit": "5 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-*",
+        "./expose-*"
+      ],
+      "limit": "5.2 kB"
+    },
+    {
+      "name": "estilos do Shadow DOM (além do núcleo)",
+      "path": "dist/shadow-*.js",
+      "ignore": [
+        "./chunk-*"
+      ],
+      "limit": "1 kB"
+    },
     {
       "name": "react",
       "path": "dist/react.js",
       "import": "{ Remote, reactRemote }",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./shadow-*",
+        "./sri-*",
+        "./dedupe-*",
+        "./expose-*"
       ],
-      "limit": "6 kB"
+      "limit": "6.2 kB"
     },
     {
       "name": "vue",
       "path": "dist/vue.js",
       "import": "{ VitralRemote, vueRemote }",
       "ignore": [
-        "vue"
+        "vue",
+        "./shadow-*",
+        "./sri-*",
+        "./dedupe-*",
+        "./expose-*"
       ],
       "limit": "6 kB"
     },
@@ -185,13 +285,49 @@
       "name": "element",
       "path": "dist/element.js",
       "import": "{ defineVitralElement }",
+      "ignore": [
+        "./shadow-*",
+        "./sri-*",
+        "./dedupe-*",
+        "./expose-*"
+      ],
+      "limit": "6.1 kB"
+    },
+    {
+      "name": "devtools",
+      "path": "dist/devtools.js",
+      "import": "{ devtools }",
+      "limit": "2 kB"
+    },
+    {
+      "name": "auto",
+      "path": "dist/auto.js",
+      "limit": "6 kB",
+      "ignore": [
+        "./shadow-*",
+        "./overrides-*",
+        "./sri-*",
+        "./dedupe-*",
+        "./expose-*"
+      ]
+    },
+    {
+      "name": "routes",
+      "path": "dist/routes.js",
+      "import": "{ routes }",
+      "limit": "7.9 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"
   }

package/dist/chunk-IZK6ITIJ.js

@@ -1,96 +0,0 @@
-import {
-  createSlot,
-  defineRemote
-} from "./chunk-TTL52BF2.js";
-
-// src/element.ts
-var Base = typeof HTMLElement === "undefined" ? class {
-} : HTMLElement;
-var VitralRemoteElement = class extends Base {
-  static {
-    this.observedAttributes = ["name", "props", "isolate"];
-  }
-  #slot = null;
-  #props = {};
-  get props() {
-    return this.#props;
-  }
-  set props(value) {
-    this.#props = value ?? {};
-    this.#slot?.update(this.#props);
-  }
-  get status() {
-    return this.#slot?.status ?? "loading";
-  }
-  retry() {
-    this.#slot?.retry();
-  }
-  connectedCallback() {
-    if (this.#slot) return;
-    const name = this.getAttribute("name");
-    if (!name) return;
-    if (this.hasAttribute("props") && !Object.keys(this.#props).length) this.#props = parseProps(this.getAttribute("props"));
-    this.#slot = createSlot(this, {
-      name,
-      props: this.#props,
-      isolate: this.getAttribute("isolate") || void 0,
-      onStatus: (status, error) => {
-        this.setAttribute("data-vitral-status", status);
-        for (const el of this.querySelectorAll(':scope > [slot="fallback"]')) el.hidden = status !== "loading";
-        for (const el of this.querySelectorAll(':scope > [slot="error"]')) el.hidden = status !== "error";
-        if (status === "ready") this.dispatchEvent(new CustomEvent("vitral-ready", { bubbles: true }));
-        if (status === "error") this.dispatchEvent(new CustomEvent("vitral-error", { bubbles: true, detail: { error } }));
-      }
-    });
-  }
-  disconnectedCallback() {
-    queueMicrotask(() => {
-      if (!this.isConnected) {
-        this.#slot?.destroy();
-        this.#slot = null;
-      }
-    });
-  }
-  attributeChangedCallback(attr, _old, value) {
-    if (attr === "props") return void (this.props = parseProps(value));
-    if (!this.#slot) return void (this.isConnected && this.connectedCallback());
-    if (attr === "name" && value) this.#slot.set({ name: value });
-    if (attr === "isolate") this.#slot.set({ isolate: value || void 0 });
-  }
-};
-function parseProps(value) {
-  if (!value) return {};
-  try {
-    return JSON.parse(value);
-  } catch {
-    console.error("[vitral] atributo props n\xE3o \xE9 JSON v\xE1lido:", value);
-    return {};
-  }
-}
-function defineVitralElement(tag = "vitral-remote") {
-  if (typeof customElements !== "undefined" && !customElements.get(tag)) {
-    customElements.define(tag, class extends VitralRemoteElement {
-    });
-  }
-}
-function elementRemote(tag, setup) {
-  return defineRemote({
-    mount(el, props, ctx) {
-      setup?.();
-      const node = document.createElement(tag);
-      node.vitral = ctx;
-      Object.assign(node, props);
-      el.appendChild(node);
-      return {
-        update: (next) => Object.assign(node, next),
-        unmount: () => node.remove()
-      };
-    }
-  });
-}
-
-export {
-  VitralRemoteElement,
-  defineVitralElement,
-  elementRemote
-};