vitral 0.0.0-stage → 0.1.0

package/dist/vite.d.ts

@@ -0,0 +1,24 @@
+import { Plugin } from 'vite';
+
+interface VitralViteOptions {
+    /** Arquivo que exporta o remote (default export de reactRemote/vueRemote/defineRemote). */
+    entry: string;
+    /** Nome do remote no manifesto. Padrão: `name` do package.json. */
+    name?: string;
+    /** Versão no manifesto. Padrão: `version` do package.json. */
+    version?: string;
+    /**
+     * Dependências que NÃO entram no bundle e vêm do import map do host
+     * (ex.: ['react', 'react-dom', 'react-dom/client']). Padrão: nenhuma, cada
+     * remote leva suas dependências e nunca há conflito de versão.
+     */
+    shared?: string[];
+    /**
+     * Prefixa todo o CSS do remote para valer só dentro dele (inclusive o
+     * preflight/tema do Tailwind). Padrão: true.
+     */
+    scopeCss?: boolean;
+}
+declare function vitral(options: VitralViteOptions): Plugin;
+
+export { type VitralViteOptions, vitral as default, vitral };

package/dist/vite.js

@@ -0,0 +1,96 @@
+// src/vite.ts
+import { createHash } from "crypto";
+import { readFileSync, rmSync, writeFileSync } from "fs";
+import { join, resolve } from "path";
+
+// src/css-scope.ts
+import postcss from "postcss";
+var GLOBAL = /^(?::root|:host(?:\([^)]*\))?|html|body)(?![\w-])/;
+function scopeSelector(selector, scope) {
+  const s = selector.trim();
+  const m = s.match(GLOBAL);
+  if (m) {
+    return scope + s.slice(m[0].length);
+  }
+  if (s === "*") return `${scope}, ${scope} *`;
+  return `${scope} ${s}`;
+}
+function scopeCss(css, scopeName) {
+  const scope = `[data-vitral-scope="${scopeName}"]`;
+  const root = postcss.parse(css);
+  root.walkRules((rule) => {
+    let p = rule.parent;
+    while (p && p.type !== "root") {
+      if (p.type === "atrule" && /keyframes$/i.test(p.name)) return;
+      if (p.type === "rule") return;
+      p = p.parent;
+    }
+    rule.selectors = rule.selectors.map((sel) => scopeSelector(sel, scope));
+  });
+  return root.toString();
+}
+
+// src/vite.ts
+function vitral(options) {
+  let outDir = "dist";
+  let root = process.cwd();
+  let pkg = {};
+  const scopeName = () => (options.name ?? pkg.name ?? "remote").replace(/[^a-zA-Z0-9_-]/g, "-");
+  return {
+    name: "vitral",
+    config(_, { mode }) {
+      const rolldown = "rolldownVersion" in this.meta;
+      const output = rolldown ? { codeSplitting: false } : { inlineDynamicImports: true };
+      return {
+        // Código de biblioteca não tem process.env; React e Vue precisam disso.
+        define: { "process.env.NODE_ENV": JSON.stringify(mode === "development" ? "development" : "production") },
+        server: { cors: true },
+        preview: { cors: true },
+        build: {
+          // Nomes com hash: cache eterno no CDN. Só o vitral.json muda a cada deploy.
+          lib: { entry: options.entry, formats: ["es"], fileName: () => "remote-[hash].js", cssFileName: "remote" },
+          // Um arquivo só: necessário para verificar o hash SRI no host.
+          rollupOptions: { external: options.shared ?? [], output },
+          cssCodeSplit: false
+        }
+      };
+    },
+    configResolved(c) {
+      root = c.root;
+      outDir = resolve(c.root, c.build.outDir);
+      try {
+        pkg = JSON.parse(readFileSync(join(root, "package.json"), "utf8"));
+      } catch {
+      }
+    },
+    writeBundle(_, bundle) {
+      const files = Object.values(bundle);
+      const entry = files.find((f) => f.type === "chunk" && f.isEntry);
+      if (!entry) return;
+      const css = files.filter((f) => f.type === "asset" && f.fileName.endsWith(".css")).map((f) => {
+        const from = join(outDir, f.fileName);
+        let text = readFileSync(from, "utf8");
+        if (options.scopeCss !== false) text = scopeCss(text, scopeName());
+        const hash = createHash("sha256").update(text).digest("base64url").slice(0, 8);
+        const name = f.fileName.replace(/\.css$/, `-${hash}.css`);
+        writeFileSync(join(outDir, name), text);
+        if (name !== f.fileName) rmSync(from);
+        return name;
+      });
+      const code = readFileSync(join(outDir, entry.fileName));
+      const manifest = {
+        name: options.name ?? pkg.name ?? "remote",
+        version: options.version ?? pkg.version,
+        entry: entry.fileName,
+        css,
+        integrity: "sha384-" + createHash("sha384").update(code).digest("base64"),
+        ...options.scopeCss === false ? {} : { scope: scopeName() }
+      };
+      writeFileSync(join(outDir, "vitral.json"), JSON.stringify(manifest, null, 2) + "\n");
+    }
+  };
+}
+export {
+  vitral as default,
+  vitral
+};

package/dist/vue.d.ts

@@ -0,0 +1,61 @@
+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';
+
+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>;
+
+/**
+ * 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<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    props: {
+        type: PropType<Props>;
+        default: () => {};
+    };
+    isolate: {
+        type: PropType<Isolation>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("error" | "ready")[], "error" | "ready", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    props: {
+        type: PropType<Props>;
+        default: () => {};
+    };
+    isolate: {
+        type: PropType<Isolation>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onError?: ((...args: any[]) => any) | undefined;
+    onReady?: ((...args: any[]) => any) | undefined;
+}>, {
+    props: Props;
+    isolate: Isolation;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { VitralRemote, type VueRemoteOptions, useEvent, useEventValue, useVitral, vueRemote };

package/dist/vue.js

@@ -0,0 +1,125 @@
+import {
+  defineRemote,
+  events,
+  mountRemote
+} from "./chunk-TTL52BF2.js";
+
+// src/vue.ts
+import {
+  createApp,
+  defineComponent,
+  h,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  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;
+}
+var VitralRemote = defineComponent({
+  name: "VitralRemote",
+  props: {
+    name: { type: String, required: true },
+    props: { type: Object, default: () => ({}) },
+    isolate: { type: String, default: void 0 }
+  },
+  emits: ["error", "ready"],
+  setup(p, { slots, emit }) {
+    const slot = 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" });
+    watch(
+      () => p.props,
+      (next) => handle?.update?.({ ...next }),
+      { deep: true }
+    );
+    onBeforeUnmount(() => {
+      token++;
+      handle?.unmount();
+      handle = null;
+    });
+    const retry = () => attempt.value++;
+    return () => h("div", { "data-vitral": p.name, "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
+      })
+    ]);
+  }
+});
+export {
+  VitralRemote,
+  events,
+  useEvent,
+  useEventValue,
+  useVitral,
+  vueRemote
+};

package/package.json

@@ -1,6 +1,198 @@
 {
   "name": "vitral",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.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",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./element": {
+      "types": "./dist/element.d.ts",
+      "import": "./dist/element.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",
+    "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
+    }
+  },
+  "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",
+    "@testing-library/dom": "^10.4.2",
+    "@types/node": "^22.20.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "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",
+    "tsup": "^8.5.0",
+    "typescript": "~5.9.0",
+    "vite": "^8.0.0",
+    "vitest": "^4.0.0",
+    "vue": "^3.5.0"
+  },
+  "size-limit": [
+    {
+      "name": "núcleo",
+      "path": "dist/index.js",
+      "limit": "5 kB"
+    },
+    {
+      "name": "react",
+      "path": "dist/react.js",
+      "import": "{ Remote, reactRemote }",
+      "ignore": [
+        "react",
+        "react-dom"
+      ],
+      "limit": "6 kB"
+    },
+    {
+      "name": "vue",
+      "path": "dist/vue.js",
+      "import": "{ VitralRemote, vueRemote }",
+      "ignore": [
+        "vue"
+      ],
+      "limit": "6 kB"
+    },
+    {
+      "name": "element",
+      "path": "dist/element.js",
+      "import": "{ defineVitralElement }",
+      "limit": "6 kB"
+    }
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "lint:pkg": "publint --strict && attw --pack --profile esm-only",
+    "size": "size-limit"
+  }
 }