vitral 0.0.0-stage → 0.2.0

package/dist/vue.d.ts

@@ -0,0 +1,133 @@
+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 { L as Loading, P as Prefetch } from './host-slot-Cz6EiGsB.js';
+
+interface VueRemoteOptions {
+    /** Instale plugins (router, pinia, i18n…) no app do remote. */
+    setup?: (app: App, ctx: RemoteContext) => void;
+}
+/** Transforma um componente Vue em um remote. */
+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;
+/** 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`;
+ * o remote monta no cliente.
+ *
+ * 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;
+        default: undefined;
+    };
+    /** URL do `vitral.json`. Dispensa `configure()`. */
+    src: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    props: {
+        type: PropType<Props>;
+        default: () => {};
+    };
+    isolate: {
+        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;
+        default: undefined;
+    };
+    /** URL do `vitral.json`. Dispensa `configure()`. */
+    src: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    props: {
+        type: PropType<Props>;
+        default: () => {};
+    };
+    isolate: {
+        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;
+}>, {
+    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, useShared, useVitral, vueRemote };

package/dist/vue.js

@@ -0,0 +1,148 @@
+import {
+  hostSlot,
+  timings
+} from "./chunk-UTYAX6MU.js";
+import {
+  defineRemote,
+  events,
+  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,
+  watch
+} from "vue";
+var VitralKey = /* @__PURE__ */ Symbol("vitral");
+function vueRemote(component, options = {}) {
+  return defineRemote({
+    mount(el, props, ctx) {
+      const state = shallowReactive({ ...props });
+      const app = createApp({ render: () => h(component, state) });
+      app.provide(VitralKey, ctx);
+      app.config.errorHandler = (e) => ctx.reportError(e);
+      options.setup?.(app, ctx);
+      app.mount(el);
+      return {
+        update(next) {
+          for (const k of Object.keys(state)) if (!(k in next)) delete state[k];
+          Object.assign(state, next);
+        },
+        unmount: () => app.unmount()
+      };
+    }
+  });
+}
+function useVitral() {
+  return inject(VitralKey, null);
+}
+function useEvent(type, handler) {
+  let off;
+  onMounted(() => off = events.on(type, handler));
+  onBeforeUnmount(() => off?.());
+}
+function useEventValue(type) {
+  const value = shallowRef(events.last(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: {
+    /** 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 },
+    /** `'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 target = ref(null);
+    const status = ref("loading");
+    const error = shallowRef(null);
+    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) => slot?.update({ ...next }),
+      { deep: true }
+    );
+    onBeforeUnmount(() => {
+      slot?.destroy();
+      slot = null;
+    });
+    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", { ref: target })
+    ]);
+  }
+});
+export {
+  VitralRemote,
+  events,
+  useEvent,
+  useEventValue,
+  useShared,
+  useVitral,
+  vueRemote
+};

package/package.json

@@ -1,6 +1,334 @@
 {
   "name": "vitral",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "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",
+    "microfrontends",
+    "module-federation",
+    "single-spa",
+    "react",
+    "nextjs",
+    "vue",
+    "nuxt",
+    "angular",
+    "svelte",
+    "solid",
+    "preact",
+    "lit",
+    "web-components",
+    "vite"
+  ],
+  "homepage": "https://github.com/joaogabriel15/vitral#readme",
+  "bugs": {
+    "url": "https://github.com/joaogabriel15/vitral/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/joaogabriel15/vitral.git",
+    "directory": "packages/vitral"
+  },
+  "license": "MIT",
+  "author": "João (https://github.com/joaogabriel15)",
+  "type": "module",
+  "bin": {
+    "vitral": "./dist/cli.js"
+  },
+  "sideEffects": [
+    "./dist/auto.js"
+  ],
+  "engines": {
+    "node": ">=20.19"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "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"
+    },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "import": "./dist/vue.js"
+    },
+    "./svelte": {
+      "types": "./dist/svelte.d.ts",
+      "import": "./dist/svelte.js"
+    },
+    "./preact": {
+      "types": "./dist/preact.d.ts",
+      "import": "./dist/preact.js"
+    },
+    "./solid": {
+      "types": "./dist/solid.d.ts",
+      "import": "./dist/solid.js"
+    },
+    "./angular": {
+      "types": "./dist/angular.d.ts",
+      "import": "./dist/angular.js"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "import": "./dist/vite.js"
+    },
+    "./testing": {
+      "types": "./dist/testing.d.ts",
+      "import": "./dist/testing.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "postcss": "^8.5.30"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=17",
+    "@angular/platform-browser": ">=17",
+    "preact": ">=10",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "solid-js": ">=1.8",
+    "svelte": ">=5",
+    "typescript": ">=5",
+    "vite": ">=5",
+    "vue": ">=3.3"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "preact": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    },
+    "@angular/platform-browser": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@angular/common": "^22.2.2",
+    "@angular/compiler": "^22.2.2",
+    "@angular/core": "^22.2.2",
+    "@angular/platform-browser": "^22.2.2",
+    "@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",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rxjs": "^7.8.2",
+    "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",
+    "vitest": "^4.0.0",
+    "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",
+        "./shadow-*",
+        "./sri-*",
+        "./dedupe-*",
+        "./expose-*"
+      ],
+      "limit": "6.2 kB"
+    },
+    {
+      "name": "vue",
+      "path": "dist/vue.js",
+      "import": "{ VitralRemote, vueRemote }",
+      "ignore": [
+        "vue",
+        "./shadow-*",
+        "./sri-*",
+        "./dedupe-*",
+        "./expose-*"
+      ],
+      "limit": "6 kB"
+    },
+    {
+      "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 --coverage",
+    "typecheck": "tsc --noEmit && tsc -p test/types",
+    "lint:pkg": "publint --strict && attw --pack --profile esm-only",
+    "size": "size-limit"
+  }
 }