vitral 0.2.0 → 0.3.0

package/dist/vite.js

@@ -1,7 +1,7 @@
 // src/vite.ts
 import { createHash as createHash2 } from "crypto";
-import { readFileSync as readFileSync3, rmSync as rmSync2, writeFileSync as writeFileSync2 } from "fs";
-import { join as join4, resolve as resolve4 } from "path";
+import { readFileSync as readFileSync4, rmSync as rmSync2, writeFileSync as writeFileSync2 } from "fs";
+import { join as join5, resolve as resolve5 } from "path";
 
 // src/vite-exposes.ts
 import { resolve } from "path";
@@ -16,6 +16,7 @@ function exposeKeys(exposes) {
   }
   return out;
 }
+var EXPOSES_IDS = /(^|[\\/])__vitral_exposes__\.js$/;
 function resolveExposesId(id) {
   return id === EXPOSES_ENTRY || id.endsWith("/" + EXPOSES_ENTRY) || id.endsWith("\\" + EXPOSES_ENTRY) ? ID : null;
 }
@@ -99,7 +100,7 @@ ${helper()}${code.slice(at)}`;
 }
 function withSplit(m, outDir, s, groups2 = []) {
   const files = {};
-  for (const f of [m.entry, ...m.css ?? [], ...s?.files ?? []]) files[f] = sri(join(outDir, f));
+  for (const f of [m.entry, ...m.css ?? [], ...m.shadow?.css ?? [], ...m.shadow?.global ?? [], ...s?.files ?? []]) files[f] = sri(join(outDir, f));
   const dedupe = groups2.filter((g) => s?.own[g.name]).map(({ name, range, version }) => ({ name, range, version, ...s.own[name] }));
   return { ...m, files, ...s && { split: { entry: s.entry, chunks: s.chunks } }, ...dedupe.length && { dedupe } };
 }
@@ -152,6 +153,11 @@ async function groups(list, root, entry, resolveId) {
   }
   return out;
 }
+var escape = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&").replace(/\0/g, "\\x00");
+function dedupeIds(list) {
+  const specs = new Set(list.flatMap((s) => groupOf(s) === "react" ? REACT : [s]));
+  return new RegExp(`${escape(BOOT)}$|^(${[DEPS, ...specs].map(escape).join("|")})$|^(${escape(OWN)}|${escape(SHIM)})`);
+}
 function dedupeHooks(entry, getGroups) {
   const keyOf = (id) => getGroups().find((g) => g.keys.includes(id));
   return {
@@ -389,6 +395,26 @@ function transformCss(css, options, scope) {
   if (options.scopeCss !== false) scopeRoot(root, scope);
   return root.toString();
 }
+var RELATIVE_URL = /url\(\s*(['"]?)(?![a-z]+:|\/\/|#)([^'")]+)\1\s*\)/i;
+var IMPORT_URL = /^\s*(?:url\(\s*(['"]?)([^'")]+)\1\s*\)|(['"])(.*?)\3)/i;
+function splitShadowCss(text) {
+  const root = postcss2.parse(text);
+  const global = [];
+  const imports = [];
+  root.walkAtRules((rule) => {
+    const name = rule.name.toLowerCase();
+    if (name === "import" && rule.parent === root) {
+      const m = IMPORT_URL.exec(rule.params);
+      if (m) imports.push(m[2] ?? m[4]);
+      rule.remove();
+    } else if (name === "property" || name === "font-face") {
+      global.push(rule.toString());
+      rule.remove();
+    }
+  });
+  const css = global.length || imports.length ? root.toString() : text;
+  return { css, global: global.join("\n"), imports, rebase: RELATIVE_URL.test(css) };
+}
 
 // src/vite/adapter.ts
 import { existsSync as existsSync2 } from "fs";
@@ -450,28 +476,301 @@ function findEntry(root) {
 }
 
 // src/vite/types.ts
+import { createRequire as createRequire2 } from "module";
+import { join as join4 } from "path";
+
+// src/vite/oxc.ts
+import { existsSync as existsSync3, readFileSync as readFileSync3 } from "fs";
 import { createRequire } from "module";
-import { join as join3 } from "path";
+import { dirname as dirname2, join as join3, resolve as resolve4 } from "path";
+import { pathToFileURL as pathToFileURL2 } from "url";
+async function loadOxc(root) {
+  const req = createRequire(join3(root, "package.json"));
+  const ids = [() => req.resolve("oxc-transform"), () => createRequire(req.resolve("vite/package.json")).resolve("rolldown/experimental")];
+  for (const id of ids) {
+    try {
+      const mod = await import(pathToFileURL2(id()).href);
+      if (typeof mod.isolatedDeclarationSync === "function") return mod;
+    } catch {
+    }
+  }
+  return null;
+}
+var GLOBAL3 = /^(Date|RegExp|Error|Map|Set|WeakMap|WeakSet|Promise|PromiseLike|Record|Partial|Required|Readonly|Pick|Omit|URL|URLSearchParams|Blob|File|FormData|Headers|AbortSignal|EventTarget|Node|Element|Document|DocumentFragment|ShadowRoot|Window|(HTML|SVG)\w*Element|\w*Event)$/;
+var IDENT = /^[A-Za-z_$][\w$]*$/;
+var Unsupported = class extends Error {
+};
+var unsupported = () => {
+  throw new Unsupported();
+};
+function propsFromOxc(ts, oxc, file) {
+  try {
+    const reader = new Reader(ts, oxc);
+    const scope = reader.scope(file);
+    const props = reader.defaultProps(scope);
+    return props ? reader.print(props.node, props.scope, 0, { top: true }) : "Record<string, unknown>";
+  } catch {
+    return null;
+  }
+}
+var Reader = class {
+  constructor(ts, oxc) {
+    this.ts = ts;
+    this.oxc = oxc;
+    this.scopes = /* @__PURE__ */ new Map();
+    this.seen = /* @__PURE__ */ new Set();
+  }
+  /** Declarações de um arquivo: `.d.ts` como está, o resto pelo Oxc. */
+  scope(file) {
+    const cached = this.scopes.get(file);
+    if (cached) return cached;
+    const { ts } = this;
+    let code = readFileSync3(file, "utf8");
+    if (!/\.d\.[cm]?ts$/.test(file)) {
+      const out = this.oxc.isolatedDeclarationSync(file, code, {});
+      if (out.errors.length) unsupported();
+      code = out.code;
+    }
+    const source = ts.createSourceFile(file + ".d.ts", code, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    const scope = { file, types: /* @__PURE__ */ new Map(), values: /* @__PURE__ */ new Map(), imports: /* @__PURE__ */ new Map() };
+    const isDefault = (n) => ts.canHaveModifiers(n) && !!ts.getModifiers(n)?.some((m) => m.kind === ts.SyntaxKind.DefaultKeyword);
+    let defaultName;
+    for (const st of source.statements) {
+      if (ts.isInterfaceDeclaration(st) || ts.isTypeAliasDeclaration(st)) {
+        if (scope.types.has(st.name.text)) unsupported();
+        scope.types.set(st.name.text, st);
+      } else if (ts.isImportDeclaration(st) && ts.isStringLiteral(st.moduleSpecifier)) {
+        const from = st.moduleSpecifier.text;
+        const clause = st.importClause;
+        if (clause?.name) scope.imports.set(clause.name.text, { from, name: "default" });
+        const bindings = clause?.namedBindings;
+        if (bindings && ts.isNamespaceImport(bindings)) scope.imports.set(bindings.name.text, { from, name: "*" });
+        if (bindings && ts.isNamedImports(bindings)) for (const el of bindings.elements) scope.imports.set(el.name.text, { from, name: (el.propertyName ?? el.name).text });
+      } else if (ts.isFunctionDeclaration(st) || ts.isClassDeclaration(st)) {
+        if (isDefault(st)) scope.default ??= st;
+        else if (st.name && !scope.values.has(st.name.text)) scope.values.set(st.name.text, st);
+      } else if (ts.isVariableStatement(st)) {
+        for (const d of st.declarationList.declarations) if (ts.isIdentifier(d.name)) scope.values.set(d.name.text, d);
+      } else if (ts.isExportAssignment(st) && !st.isExportEquals) {
+        defaultName = ts.isIdentifier(st.expression) ? st.expression.text : unsupported();
+      } else if (ts.isExportDeclaration(st) && !st.moduleSpecifier && st.exportClause && ts.isNamedExports(st.exportClause)) {
+        const el = st.exportClause.elements.find((e) => e.name.text === "default");
+        if (el) defaultName = (el.propertyName ?? el.name).text;
+      }
+    }
+    if (defaultName) scope.default = scope.values.get(defaultName);
+    this.scopes.set(file, scope);
+    return scope;
+  }
+  /** `mount(el, props)`, componente-função `(props)` ou classe com `props`. `undefined`: sem props. */
+  defaultProps(scope) {
+    const { ts } = this;
+    const node = scope.default ?? unsupported();
+    const param = (params, i) => {
+      const p = params[i];
+      return p && { node: p.type ?? unsupported(), scope };
+    };
+    if (ts.isFunctionDeclaration(node)) return param(node.parameters, 0);
+    if (ts.isClassDeclaration(node)) {
+      if (node.heritageClauses?.length) unsupported();
+      const props = node.members.find((m) => ts.isPropertyDeclaration(m) && m.name.getText() === "props");
+      return props && { node: props.type ?? unsupported(), scope };
+    }
+    if (ts.isVariableDeclaration(node)) return this.propsOfType(node.type ?? unsupported(), scope);
+    return unsupported();
+  }
+  propsOfType(node, scope) {
+    const { ts } = this;
+    const param = (params, i, at2) => {
+      const p = params[i];
+      return p && { node: p.type ?? unsupported(), scope: at2 };
+    };
+    if (ts.isParenthesizedTypeNode(node)) return this.propsOfType(node.type, scope);
+    if (ts.isFunctionTypeNode(node)) return param(node.parameters, 0, scope);
+    let members;
+    let at = scope;
+    if (ts.isTypeLiteralNode(node)) members = node.members;
+    else if (ts.isTypeReferenceNode(node) && ts.isIdentifier(node.typeName) && !node.typeArguments) {
+      const found = this.lookup(node.typeName.text, scope);
+      if (!found || found === "package" || found.decl.typeParameters) return unsupported();
+      if (ts.isTypeAliasDeclaration(found.decl)) return this.propsOfType(found.decl.type, found.scope);
+      if (found.decl.heritageClauses?.length) unsupported();
+      members = found.decl.members;
+      at = found.scope;
+    } else return unsupported();
+    const mount = members.find((m) => m.name?.getText() === "mount");
+    if (mount) {
+      if (ts.isMethodSignature(mount)) return param(mount.parameters, 1, at);
+      if (ts.isPropertySignature(mount) && mount.type) return this.mountProps(mount.type, at);
+      return unsupported();
+    }
+    const call = members.find(ts.isCallSignatureDeclaration);
+    if (call) return param(call.parameters, 0, at);
+    if (members.some(ts.isConstructSignatureDeclaration)) unsupported();
+    return void 0;
+  }
+  mountProps(node, scope) {
+    const { ts } = this;
+    if (ts.isParenthesizedTypeNode(node)) return this.mountProps(node.type, scope);
+    if (!ts.isFunctionTypeNode(node)) return unsupported();
+    const p = node.parameters[1];
+    return p && { node: p.type ?? unsupported(), scope };
+  }
+  /** Acha um tipo pelo nome: no arquivo, num import relativo ou num pacote. */
+  lookup(name, scope) {
+    const decl = scope.types.get(name);
+    if (decl) return { decl, scope };
+    const imp = scope.imports.get(name);
+    if (!imp) return void 0;
+    if (!imp.from.startsWith(".")) return "package";
+    if (imp.name === "default" || imp.name === "*") return unsupported();
+    const found = this.lookup(imp.name, this.scope(resolveFile(scope.file, imp.from)));
+    return found ?? unsupported();
+  }
+  print(node, scope, depth, opts = {}) {
+    const { ts } = this;
+    const K = ts.SyntaxKind;
+    switch (node.kind) {
+      case K.AnyKeyword:
+      case K.UnknownKeyword:
+        return "unknown";
+      case K.StringKeyword:
+      case K.NumberKeyword:
+      case K.BooleanKeyword:
+      case K.BigIntKeyword:
+      case K.SymbolKeyword:
+      case K.UndefinedKeyword:
+      case K.VoidKeyword:
+      case K.NeverKeyword:
+        return node.getText();
+    }
+    if (ts.isLiteralTypeNode(node)) {
+      const lit = node.literal;
+      if (ts.isStringLiteral(lit)) return JSON.stringify(lit.text);
+      if (lit.kind === K.NullKeyword || lit.kind === K.TrueKeyword || lit.kind === K.FalseKeyword || ts.isNumericLiteral(lit) || ts.isPrefixUnaryExpression(lit)) return lit.getText();
+      return unsupported();
+    }
+    if (ts.isParenthesizedTypeNode(node)) return this.print(node.type, scope, depth, opts);
+    if (ts.isUnionTypeNode(node)) {
+      const types = opts.nonNull ? node.types.filter((t) => t.kind !== K.UndefinedKeyword && !(ts.isLiteralTypeNode(t) && t.literal.kind === K.NullKeyword)) : node.types;
+      const parts = [...new Set(types.map((t) => this.print(t, scope, depth)))];
+      if (parts.includes("true") && parts.includes("false")) parts.splice(parts.indexOf("true"), 1, "boolean"), parts.splice(parts.indexOf("false"), 1);
+      return parts.join(" | ");
+    }
+    if (ts.isIntersectionTypeNode(node)) {
+      return node.types.map((t) => {
+        const s = this.print(t, scope, depth);
+        return ts.isUnionTypeNode(t) ? `(${s})` : s;
+      }).join(" & ");
+    }
+    if (depth > 6) return "unknown";
+    if (ts.isArrayTypeNode(node)) return `Array<${this.print(node.elementType, scope, depth + 1)}>`;
+    if (ts.isTypeOperatorNode(node) && node.operator === K.ReadonlyKeyword && (ts.isArrayTypeNode(node.type) || ts.isTupleTypeNode(node.type))) return this.print(node.type, scope, depth);
+    if (ts.isTupleTypeNode(node)) {
+      if (node.elements.some((e) => ts.isNamedTupleMember(e) || ts.isOptionalTypeNode(e) || ts.isRestTypeNode(e))) unsupported();
+      return `[${node.elements.map((e) => this.print(e, scope, depth + 1)).join(", ")}]`;
+    }
+    if (ts.isTypeLiteralNode(node)) return this.object(node.members, scope, depth, !!opts.top);
+    if (ts.isFunctionTypeNode(node)) return this.signature(node, scope, depth);
+    if (ts.isTypeReferenceNode(node)) return this.reference(node, scope, depth, opts);
+    return unsupported();
+  }
+  reference(node, scope, depth, opts) {
+    const { ts } = this;
+    if (!ts.isIdentifier(node.typeName)) return unsupported();
+    const name = node.typeName.text;
+    const args = node.typeArguments ?? [];
+    const found = this.lookup(name, scope);
+    if (found === "package") return "unknown";
+    if (found) {
+      if (args.length || found.decl.typeParameters) unsupported();
+      if (this.seen.has(found.decl)) return "unknown";
+      this.seen.add(found.decl);
+      try {
+        const decl = found.decl;
+        if (ts.isTypeAliasDeclaration(decl)) return this.print(decl.type, found.scope, depth, opts);
+        if (decl.heritageClauses?.length) unsupported();
+        return this.object(decl.members, found.scope, depth, !!opts.top);
+      } finally {
+        this.seen.delete(found.decl);
+      }
+    }
+    if ((name === "Array" || name === "ReadonlyArray") && args.length === 1) return `Array<${this.print(args[0], scope, depth + 1)}>`;
+    if (!GLOBAL3.test(name)) return unsupported();
+    return args.length ? `${name}<${args.map((t) => this.print(t, scope, depth + 1)).join(", ")}>` : name;
+  }
+  object(members, scope, depth, top) {
+    const { ts } = this;
+    const fields = [];
+    const calls = [];
+    let index;
+    for (const m of members) {
+      if (ts.isPropertySignature(m) || ts.isMethodSignature(m)) {
+        const name = ts.isIdentifier(m.name) || ts.isStringLiteral(m.name) || ts.isNumericLiteral(m.name) ? m.name.text : unsupported();
+        if (top && name === "vitral") continue;
+        const optional = m.questionToken ? "?" : "";
+        const key = IDENT.test(name) ? name : JSON.stringify(name);
+        const type = ts.isMethodSignature(m) ? this.signature(m, scope, depth + 1) : m.type ? this.print(m.type, scope, depth + 1, { nonNull: !!optional }) : "unknown";
+        fields.push(`${key}${optional}: ${type}`);
+      } else if (ts.isIndexSignatureDeclaration(m)) {
+        const key = m.parameters[0]?.type;
+        if (!key || key.kind !== ts.SyntaxKind.StringKeyword) unsupported();
+        index = `[key: string]: ${this.print(m.type, scope, depth + 1)}`;
+      } else if (ts.isCallSignatureDeclaration(m)) {
+        calls.push(this.signature(m, scope, depth));
+      } else unsupported();
+    }
+    if (calls.length && !fields.length) return calls[0];
+    if (index) fields.push(index);
+    for (const c of calls) fields.push(c.replace(" =>", ":"));
+    return fields.length ? `{ ${fields.join("; ")} }` : "{}";
+  }
+  signature(sig, scope, depth) {
+    const { ts } = this;
+    if (sig.typeParameters?.length || !sig.type) unsupported();
+    const params = sig.parameters.map((p, i) => {
+      if (p.dotDotDotToken || ts.isIdentifier(p.name) && p.name.text === "this") unsupported();
+      const name = ts.isIdentifier(p.name) && IDENT.test(p.name.text) ? p.name.text : `a${i}`;
+      const type = p.type ? this.print(p.type, scope, depth + 1) : "unknown";
+      return `${name}: ${p.questionToken || p.initializer ? `${type} | undefined` : type}`;
+    });
+    return `(${params.join(", ")}) => ${this.print(sig.type, scope, depth + 1)}`;
+  }
+};
+function resolveFile(from, spec) {
+  const base = resolve4(dirname2(from), spec);
+  const stem = base.replace(/\.[cm]?jsx?$/, "");
+  const candidates = [base, ...[".ts", ".tsx", ".mts", ".cts", ".d.ts"].map((ext) => stem + ext), ...["index.ts", "index.tsx", "index.d.ts"].map((f) => join3(base, f))];
+  const file = candidates.find((f) => /\.[cm]?tsx?$/.test(f) && existsSync3(f));
+  return file ?? unsupported();
+}
+
+// src/vite/types.ts
 function typesFile(name, props) {
   return `// Props do remote ${JSON.stringify(name)}, geradas pelo vitral. N\xE3o edite.
 export type Props = ${props}
 `;
 }
 async function loadTs(root) {
+  const api = (ts) => typeof ts?.createProgram === "function" ? ts : null;
   try {
-    return createRequire(join3(root, "package.json"))("typescript");
+    const ts = api(createRequire2(join4(root, "package.json"))("typescript"));
+    if (ts) return ts;
   } catch {
-    try {
-      return (await import("typescript")).default;
-    } catch {
-      return null;
-    }
+  }
+  try {
+    return api((await import("typescript")).default);
+  } catch {
+    return null;
   }
 }
 async function extractProps(root, file) {
   if (!/\.[cm]?[jt]sx?$/.test(file)) return null;
   const ts = await loadTs(root);
   if (!ts) return null;
+  const oxc = /\.[cm]?tsx?$/.test(file) ? await loadOxc(root) : null;
+  const fast = oxc && propsFromOxc(ts, oxc, file);
+  if (fast) return fast;
   const configPath = ts.findConfigFile(root, ts.sys.fileExists);
   const base = configPath ? ts.parseJsonConfigFileContent(ts.readConfigFile(configPath, ts.sys.readFile).config, ts.sys, root).options : {};
   const options = {
@@ -623,6 +922,7 @@ if (import.meta.hot) {
 }
 `;
 }
+var DEV_IDS = /^virtual:vitral-react-preamble$|\/@vitral\/entry\.js$/;
 function resolveDevId(id) {
   if (id === PREAMBLE_ID) return "\0" + PREAMBLE_ID;
   if (id.endsWith("/" + DEV_ENTRY)) return VIRTUAL_DEV_ENTRY;
@@ -633,8 +933,9 @@ function loadPreamble(id) {
 function devManifest(name, scope) {
   return { name, entry: DEV_ENTRY, css: [], ...scope ? { scope } : {} };
 }
+var DEV_CSS = { include: /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(\?|$)/, exclude: /[?&](raw|url|inline)\b/ };
 function scopeDevCss(code, id, scope) {
-  if (!/\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(\?|$)/.test(id) || /[?&](raw|url|inline)\b/.test(id)) return;
+  if (!DEV_CSS.include.test(id) || DEV_CSS.exclude.test(id)) return;
   return scopeCss(code, scope);
 }
 function serveDevManifest(server, manifest) {
@@ -673,7 +974,7 @@ function vitral(options = {}) {
   let entry = options.entry;
   let adapter = "element";
   let framework = "element";
-  const entryFile = () => resolve4(root, entry);
+  const entryFile = () => resolve5(root, entry);
   let serve = false;
   let shared = [];
   const dedupe = !!options.dedupe?.length;
@@ -682,7 +983,7 @@ function vitral(options = {}) {
   return {
     name: "vitral",
     config(user, { mode, command }) {
-      entry ??= findEntry(resolve4(user.root ?? process.cwd()));
+      entry ??= findEntry(resolve5(user.root ?? process.cwd()));
       if (!entry) throw new Error("[vitral] n\xE3o achei a entrada do remote (src/remote.* ou src/App.*). Use vitral({ entry }).");
       const rolldown = "rolldownVersion" in this.meta;
       return {
@@ -708,9 +1009,9 @@ function vitral(options = {}) {
       framework = detectAdapter(c.plugins);
       adapter = options.adapter || framework;
       serve = c.command === "serve";
-      outDir = resolve4(c.root, c.build.outDir);
+      outDir = resolve5(c.root, c.build.outDir);
       try {
-        pkg = JSON.parse(readFileSync3(join4(root, "package.json"), "utf8"));
+        pkg = JSON.parse(readFileSync4(join5(root, "package.json"), "utf8"));
       } catch {
       }
     },
@@ -722,8 +1023,11 @@ function vitral(options = {}) {
       const scope = options.scopeCss === false ? void 0 : scopeName();
       serveDevManifest(server, () => devManifest(options.name ?? pkg.name ?? "remote", scope));
     },
+    // Filtros de hook (Rolldown, Vite 6.3+): os módulos que não são do vitral
+    // nem chegam ao JS. As checagens nos handlers continuam para Vite 5 e 6.0-6.2.
     resolveId: {
       order: "pre",
+      filter: { id: [...dedupe ? [dedupeIds(options.dedupe)] : [], ...options.exposes ? [EXPOSES_IDS] : [], /__vitral_entry__\.js$/, DEV_IDS] },
       handler(id, importer) {
         const own = dedupe && !serve ? hooks.resolveId.handler(id, importer) : null;
         if (own) return own;
@@ -732,54 +1036,79 @@ function vitral(options = {}) {
         return resolveDevId(id);
       }
     },
-    load(id) {
-      const own = dedupe && !serve ? hooks.load(id) : null;
-      if (own != null) return own;
-      const exposed = options.exposes ? loadExposes(id, root, entry, options.exposes, options.adapter === false ? void 0 : ENTRY_ID) : null;
-      if (exposed != null) return exposed;
-      if (id === VIRTUAL_ENTRY) return entryCode(resolve4(root, entry), adapter, scopeName());
-      if (id === VIRTUAL_DEV_ENTRY) return devEntryCode(framework, options.adapter === false ? resolve4(root, entry) : void 0);
-      return loadPreamble(id);
+    load: {
+      // Todos os módulos virtuais do vitral: \0vitral... e \0virtual:vitral...
+      filter: { id: /^\x00(virtual:)?vitral/ },
+      handler(id) {
+        const own = dedupe && !serve ? hooks.load(id) : null;
+        if (own != null) return own;
+        const exposed = options.exposes ? loadExposes(id, root, entry, options.exposes, options.adapter === false ? void 0 : ENTRY_ID) : null;
+        if (exposed != null) return exposed;
+        if (id === VIRTUAL_ENTRY) return entryCode(resolve5(root, entry), adapter, scopeName());
+        if (id === VIRTUAL_DEV_ENTRY) return devEntryCode(framework, options.adapter === false ? resolve5(root, entry) : void 0);
+        return loadPreamble(id);
+      }
     },
-    transform(code, id) {
-      if (serve && options.scopeCss !== false) return scopeDevCss(code, id, scopeName());
+    transform: {
+      filter: { id: DEV_CSS },
+      handler(code, id) {
+        if (serve && options.scopeCss !== false) return scopeDevCss(code, id, scopeName());
+      }
     },
     writeBundle(_, bundle) {
       if (isSplit(bundle)) return void (split = collect(outDir, bundle));
       const files = Object.values(bundle);
       const entry2 = files.find((f) => f.type === "chunk" && f.isEntry);
       if (!entry2) return;
-      const css = files.filter((f) => f.type === "asset" && f.fileName.endsWith(".css")).map((f) => {
-        const from = join4(outDir, f.fileName);
-        let text = readFileSync3(from, "utf8");
-        text = transformCss(text, options, scopeName());
+      const emit = (file, text, kind = "") => {
         const hash = createHash2("sha256").update(text).digest("base64url").slice(0, 8);
-        const name = f.fileName.replace(/\.css$/, `-${hash}.css`);
-        writeFileSync2(join4(outDir, name), text);
+        const name = file.replace(/\.css$/, `${kind}-${hash}.css`);
+        writeFileSync2(join5(outDir, name), text);
+        return name;
+      };
+      const shadow = { css: [] };
+      const css = files.filter((f) => f.type === "asset" && f.fileName.endsWith(".css")).map((f) => {
+        const from = join5(outDir, f.fileName);
+        const text = transformCss(readFileSync4(from, "utf8"), options, scopeName());
+        const name = emit(f.fileName, text);
         if (name !== f.fileName) rmSync2(from);
+        const split2 = splitShadowCss(text);
+        shadow.css.push(split2.css === text ? name : emit(f.fileName, split2.css, "-shadow"));
+        if (split2.global) (shadow.global ??= []).push(emit(f.fileName, split2.global, "-global"));
+        if (split2.imports.length) (shadow.imports ??= []).push(...split2.imports);
+        if (split2.rebase) shadow.rebase = true;
         return name;
       });
-      const code = readFileSync3(join4(outDir, entry2.fileName));
+      const code = readFileSync4(join5(outDir, entry2.fileName));
       manifest = {
         name: options.name ?? pkg.name ?? "remote",
         version: options.version ?? pkg.version,
         entry: entry2.fileName,
         css,
+        ...css.length ? { shadow } : {},
         integrity: "sha384-" + createHash2("sha384").update(code).digest("base64"),
         ...options.scopeCss === false ? {} : { scope: scopeName() },
-        ...options.exposes ? { exposes: Object.keys(exposeKeys(options.exposes)) } : {}
+        ...options.exposes ? { exposes: Object.keys(exposeKeys(options.exposes)) } : {},
+        ...contractOf(options.contract?.version, shared)
       };
     },
     async closeBundle() {
       if (!manifest) return;
       const done = withSplit(manifest, outDir, split, shared);
       manifest = split = void 0;
-      writeFileSync2(join4(outDir, "vitral.json"), JSON.stringify(done, null, 2) + "\n");
+      writeFileSync2(join5(outDir, "vitral.json"), JSON.stringify(done, null, 2) + "\n");
       const props = options.types === false ? null : await extractProps(root, entryFile());
-      if (props) writeFileSync2(join4(outDir, "vitral.d.ts"), typesFile(done.name, props));
+      if (props) writeFileSync2(join5(outDir, "vitral.d.ts"), typesFile(done.name, props));
     }
   };
 }
+function contractOf(version, groups2) {
+  const contract = {
+    ...version && { version },
+    ...groups2.length && { peers: Object.fromEntries(groups2.map((g) => [g.name, g.range])) }
+  };
+  return Object.keys(contract).length ? { contract } : {};
+}
 export {
   vitral as default,
   vitral

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-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. */
@@ -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`. */
@@ -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-IHTUM6LT.js";
 import {
   defineRemote,
   events,
   memoSelect,
   same,
   shared
-} from "./chunk-NCONW6WS.js";
-import "./chunk-2XF5BKV3.js";
-import "./chunk-SFL6LTP3.js";
+} from "./chunk-I3VSKSAZ.js";
+import "./chunk-TD4S3IHA.js";
+import "./chunk-ZAC6QQI6.js";
 import {
   absolute
-} from "./chunk-PX7PBCCT.js";
+} from "./chunk-GNHCZRQP.js";
+import "./chunk-AKNNHQ2H.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