vitral 0.7.2 → 0.8.0

package/dist/next-config.d.ts

@@ -0,0 +1,95 @@
+import { ZoneRoute } from './next.js';
+import 'react';
+
+interface NextRemoteConfig {
+    /** URL do `vitral.json`. Num caminho do próprio host (`/x/vitral.json`), ganha os headers de cache. */
+    url: string;
+    /**
+     * Página do host que renderiza o `NextRemote` (`pages/<basePath>/[[...slug]]`),
+     * e o `basePath` que o remote vê, como no `next.config` da zona.
+     */
+    basePath: string;
+    /** Rotas públicas que abrem o remote, como os `rewrites` do Multi-Zones. */
+    routes?: ZoneRoute[];
+    /**
+     * Quando baixar o remote antes de alguém abrir: `'idle'` com o navegador
+     * ocioso, `'route'` só ao abrir uma rota dele. Padrão: `'idle'`.
+     */
+    preload?: 'idle' | 'route' | false;
+    /**
+     * Depois do preload, aquece também os chunks das rotas do remote
+     * (`import()`), com o navegador ocioso: a primeira tela de cada rota abre
+     * sem download. Padrão: false.
+     */
+    warmRoutes?: boolean;
+    /**
+     * `false` dispensa a conferência de hash (SRI) do `vitral.json`. Só para
+     * remote servido pela mesma origem do host.
+     */
+    integrity?: false;
+    /**
+     * Em `next dev`, o dev server do remote (`http://localhost:5173`): o
+     * remote vem dele, com HMR, sem `?vitral=`. A CSP de dev do host precisa
+     * liberar essa origem em `script-src` e em `connect-src` (`ws:` do HMR).
+     */
+    devUrl?: string;
+}
+interface WithVitralOptions {
+    remotes: Record<string, NextRemoteConfig>;
+    /**
+     * Dependências que o host oferece aos remotes com `dedupe`, só baixadas
+     * quando um remote pede. `pacote/*` oferece o pacote e cada subpath do
+     * `exports`. O React o `NextRemote` já oferece.
+     */
+    share?: string[];
+    /** Pasta do app. Padrão: `process.cwd()`. */
+    dir?: string;
+}
+/** Id do módulo gerado; o `vitral/next-host` importa dele. */
+declare const HOST_CONFIG = "vitral-next-host-config";
+type Rewrite = {
+    source: string;
+    destination: string;
+};
+type Rewrites = Rewrite[] | {
+    beforeFiles?: Rewrite[];
+    afterFiles?: Rewrite[];
+    fallback?: Rewrite[];
+};
+type Header = {
+    source: string;
+    headers: {
+        key: string;
+        value: string;
+    }[];
+};
+type NextConfig = Record<string, any> & {
+    distDir?: string;
+    rewrites?: () => Promise<Rewrites> | Rewrites;
+    headers?: () => Promise<Header[]> | Header[];
+    webpack?: (config: any, context: any) => any;
+    turbopack?: {
+        resolveAlias?: Record<string, string>;
+    };
+};
+/** Grupos de `dedupe` do host: versão instalada e especificadores. */
+declare function sharedGroups(dir: string, share: string[]): Record<string, {
+    version: string;
+    specs: string[];
+}>;
+/**
+ * O especificador como o webpack do app vai achar. Um alias do pacote para a
+ * pasta dele (`'@empresa/ui': '/app/node_modules/@empresa/ui'`) faz o webpack
+ * procurar `pasta/subpath` sem olhar o `exports`: aí o subpath vira o arquivo
+ * que o `exports` aponta.
+ */
+declare function throughAlias(spec: string, alias?: Record<string, unknown>): string;
+/** Código do módulo gerado: configuração dos remotes e ofertas que só importam quando pedidas. */
+declare function hostModule(remotes: Record<string, NextRemoteConfig>, groups: ReturnType<typeof sharedGroups>, alias?: Record<string, unknown>, from?: string): string;
+/** Em dev, `devUrl` no lugar de `url` (o manifesto do dev server, em `/vitral.json`). */
+declare function devRemotes(remotes: Record<string, NextRemoteConfig>, dev: boolean): Record<string, NextRemoteConfig>;
+declare function remoteRewrites(remotes: Record<string, NextRemoteConfig>): Rewrite[];
+declare function remoteHeaders(remotes: Record<string, NextRemoteConfig>): Header[];
+declare function withVitral(nextConfig: NextConfig, options: WithVitralOptions): NextConfig;
+
+export { HOST_CONFIG, type NextRemoteConfig, type WithVitralOptions, ZoneRoute, devRemotes, hostModule, remoteHeaders, remoteRewrites, sharedGroups, throughAlias, withVitral };

package/dist/next-config.js

@@ -0,0 +1,149 @@
+import {
+  subpaths
+} from "./chunk-6AFVJCQG.js";
+
+// src/next-config.ts
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "fs";
+import { createRequire } from "module";
+import { dirname, isAbsolute, join, relative, resolve } from "path";
+var HOST_CONFIG = "vitral-next-host-config";
+var pkgOf = (spec) => spec.split("/").slice(0, spec.startsWith("@") ? 2 : 1).join("/");
+var REACT = /^(react|react-dom|scheduler)(\/|$)/;
+function installed(dir, pkg) {
+  const req = createRequire(join(dir, "package.json"));
+  let file;
+  try {
+    file = req.resolve(`${pkg}/package.json`);
+  } catch {
+    file = req.resolve(pkg);
+  }
+  for (let d = dirname(file); d !== dirname(d); d = dirname(d)) {
+    const json = join(d, "package.json");
+    if (!existsSync(json)) continue;
+    const data = JSON.parse(readFileSync(json, "utf8"));
+    if (data.name === pkg) return data;
+  }
+  throw new Error(`[vitral] ${pkg} n\xE3o est\xE1 instalado no app`);
+}
+function sharedGroups(dir, share) {
+  const out = {};
+  for (const spec of share) {
+    const name = pkgOf(spec);
+    if (REACT.test(name)) continue;
+    const data = installed(dir, name);
+    const g = out[name] ??= { version: data.version, specs: [] };
+    for (const s of spec.endsWith("/*") ? subpaths(name, data) : [spec]) if (!g.specs.includes(s)) g.specs.push(s);
+  }
+  return out;
+}
+function throughAlias(spec, alias = {}) {
+  for (const [key, value] of Object.entries(alias)) {
+    if (typeof value !== "string" || key.endsWith("$") || !spec.startsWith(key + "/")) continue;
+    const json = join(value, "package.json");
+    if (!existsSync(json)) continue;
+    const exp = JSON.parse(readFileSync(json, "utf8")).exports;
+    const target = exp?.["." + spec.slice(key.length)];
+    const file = typeof target === "string" ? target : target?.import ?? target?.default;
+    if (typeof file === "string") return resolve(value, file);
+  }
+  return spec;
+}
+function hostModule(remotes, groups, alias, from) {
+  const spec = (s) => {
+    const t = throughAlias(s, alias);
+    if (!from || !isAbsolute(t)) return t;
+    const r = relative(from, t).replace(/\\/g, "/");
+    return r.startsWith(".") ? r : "./" + r;
+  };
+  const shared = Object.entries(groups).map(([name, g]) => {
+    const imports = g.specs.map((s) => `import(${JSON.stringify(spec(s))})`).join(", ");
+    const modules = g.specs.map((s, i) => `${JSON.stringify(s)}: m[${i}]`).join(", ");
+    return `  ${JSON.stringify(name)}: { version: ${JSON.stringify(g.version)}, modules: () => Promise.all([${imports}]).then((m) => ({ ${modules} })) },`;
+  });
+  return `export const remotes = ${JSON.stringify(remotes, null, 2)}
+export const shared = {
+${shared.join("\n")}
+}
+`;
+}
+var localDir = (url) => url.startsWith("/") && !url.startsWith("//") ? url.slice(0, url.lastIndexOf("/") + 1) : void 0;
+function devRemotes(remotes, dev) {
+  if (!dev) return remotes;
+  return Object.fromEntries(
+    Object.entries(remotes).map(([name, r]) => [name, r.devUrl ? { ...r, url: /\.json(\?|$)/.test(r.devUrl) ? r.devUrl : r.devUrl.replace(/\/?$/, "/vitral.json") } : r])
+  );
+}
+function remoteRewrites(remotes) {
+  return Object.values(remotes).flatMap(
+    (r) => (r.routes ?? []).filter((x) => x.public !== x.zone).map((x) => ({ source: `${x.public}/:path*`, destination: `${x.zone}/:path*` }))
+  );
+}
+function remoteHeaders(remotes) {
+  const immutable = [{ key: "Cache-Control", value: "public, max-age=31536000, immutable" }];
+  return Object.values(remotes).flatMap((r) => {
+    const dir = localDir(r.url);
+    if (!dir) return [];
+    return [
+      // O manifesto muda a cada deploy; os arquivos têm hash no nome.
+      { source: r.url, headers: [{ key: "Cache-Control", value: "no-cache" }] },
+      { source: `${dir}:file(remote-.*)`, headers: immutable },
+      { source: `${dir}split/:file*`, headers: immutable }
+    ];
+  });
+}
+function writeChanged(file, text) {
+  try {
+    if (readFileSync(file, "utf8") === text) return;
+  } catch {
+  }
+  writeFileSync(file, text);
+}
+function withVitral(nextConfig, options) {
+  const dir = resolve(options.dir ?? process.cwd());
+  const file = join(dir, ".vitral", "host-config.mjs");
+  const groups = sharedGroups(dir, options.share ?? []);
+  const emit = (alias) => {
+    try {
+      mkdirSync(dirname(file), { recursive: true });
+      writeChanged(join(dirname(file), ".gitignore"), "*\n");
+      writeChanged(file, hostModule(devRemotes(options.remotes, process.env.NODE_ENV === "development"), groups, alias, dirname(file)));
+    } catch (e) {
+      console.warn(`[vitral] n\xE3o consegui gravar ${file} (${e.message}). No build ele \xE9 necess\xE1rio; no next start, n\xE3o.`);
+    }
+  };
+  emit(Object.fromEntries(Object.entries(nextConfig.turbopack?.resolveAlias ?? {}).map(([k, v]) => [k, typeof v === "string" && v.startsWith(".") ? resolve(dir, v) : v])));
+  const ours = remoteRewrites(options.remotes);
+  const headers = remoteHeaders(options.remotes);
+  return {
+    ...nextConfig,
+    // O webpack do app empacota o vitral também no servidor: senão o Node não acha o módulo gerado.
+    transpilePackages: [.../* @__PURE__ */ new Set([...nextConfig.transpilePackages ?? [], "vitral"])],
+    async rewrites() {
+      const user = await nextConfig.rewrites?.() ?? [];
+      return Array.isArray(user) ? { beforeFiles: ours, afterFiles: user, fallback: [] } : { ...user, beforeFiles: [...ours, ...user.beforeFiles ?? []] };
+    },
+    async headers() {
+      return [...headers, ...await nextConfig.headers?.() ?? []];
+    },
+    webpack(config, context) {
+      const out = nextConfig.webpack ? nextConfig.webpack(config, context) : config;
+      if (out.resolve.alias && !Array.isArray(out.resolve.alias)) emit(out.resolve.alias);
+      out.resolve.alias = { ...out.resolve.alias, [`${HOST_CONFIG}$`]: file };
+      return out;
+    },
+    turbopack: {
+      ...nextConfig.turbopack,
+      resolveAlias: { ...nextConfig.turbopack?.resolveAlias, [HOST_CONFIG]: "./" + relative(dir, file).replace(/\\/g, "/") }
+    }
+  };
+}
+export {
+  HOST_CONFIG,
+  devRemotes,
+  hostModule,
+  remoteHeaders,
+  remoteRewrites,
+  sharedGroups,
+  throughAlias,
+  withVitral
+};

package/dist/next-host.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { RemoteProps } from './react.js';
+import './host-slot-Cz6EiGsB.js';
+import 'react/jsx-runtime';
+import './types-wsKR1gfx.js';
+import './errors-kjBv6IH_.js';
+import './loader-BIXjuvvp.js';
+import './events-Cieg_far.js';
+
+/** O remote dono do caminho público `path`, se houver. */
+declare function remoteFor(path: string): string | undefined;
+/** Navegação de página inteira para uma rota de remote vira `Router.push`. Devolve a função que desliga. */
+declare function interceptNavigation(): () => void;
+/** Coloque uma vez, no `_app`. */
+declare function VitralNext(): null;
+type NextRemoteProps = Omit<RemoteProps, 'name' | 'src'> & {
+    name: string;
+};
+/**
+ * O remote na página do host. Passa o roteador do Next ao remote (prop
+ * `__next`, lida pelo plugin no modo `next`): `useRouter`, `<Link>` e
+ * `router.push` do remote usam o do host, com as rotas públicas.
+ */
+declare function NextRemote({ name, props, fallback, ...rest }: NextRemoteProps): ReactNode;
+
+export { NextRemote, type NextRemoteProps, VitralNext, interceptNavigation, remoteFor };

package/dist/next-host.js

@@ -0,0 +1,92 @@
+"use client";
+import {
+  Remote,
+  preload
+} from "./chunk-4IWZIFAL.js";
+import "./chunk-B2MPYF4M.js";
+import "./chunk-ZJ4IM2PZ.js";
+import "./chunk-NTXMEZIZ.js";
+import "./chunk-EQZOJU3B.js";
+import {
+  configure
+} from "./chunk-6T25WKNK.js";
+import "./chunk-KU6HF2EW.js";
+import "./chunk-TW7KYJQ6.js";
+import "./chunk-463H6B56.js";
+import "./chunk-GNPFWISJ.js";
+
+// src/next-host.tsx
+import Router, { useRouter } from "next/router";
+import { createElement, useEffect, useMemo } from "react";
+import { remotes, shared } from "vitral-next-host-config";
+var under = (path, prefix) => path === prefix || path.startsWith(prefix + "/");
+function remoteFor(path) {
+  for (const [name, r] of Object.entries(remotes)) if (under(path, r.basePath) || r.routes?.some((x) => under(path, x.public))) return name;
+}
+var configured = false;
+function setup() {
+  if (configured || typeof window === "undefined") return;
+  configured = true;
+  configure({
+    remotes: Object.fromEntries(Object.entries(remotes).map(([name, r]) => [name, { url: r.url, ...r.integrity === false && { integrity: false } }])),
+    dedupe: shared
+  });
+}
+function interceptNavigation() {
+  const nav = globalThis.navigation;
+  if (!nav) return () => {
+  };
+  let last;
+  const done = () => last = void 0;
+  const on = (e) => {
+    if (e.destination.sameDocument || !e.cancelable || e.hashChange || e.downloadRequest || e.formData) return;
+    if (e.navigationType !== "push" && e.navigationType !== "replace") return;
+    const url = new URL(e.destination.url);
+    const path = url.pathname + url.search + url.hash;
+    if (url.origin !== location.origin || !remoteFor(url.pathname) || last === path) return;
+    e.preventDefault();
+    last = path;
+    void (e.navigationType === "replace" ? Router.replace(path) : Router.push(path));
+  };
+  nav.addEventListener("navigate", on);
+  Router.events.on("routeChangeComplete", done);
+  return () => {
+    nav.removeEventListener("navigate", on);
+    Router.events.off("routeChangeComplete", done);
+  };
+}
+function VitralNext() {
+  setup();
+  useEffect(() => {
+    const here = remoteFor(location.pathname);
+    const go = (name) => preload(name, { routes: !!remotes[name].warmRoutes });
+    if (here) go(here);
+    const idle = [];
+    for (const [name, r] of Object.entries(remotes))
+      if (name !== here && (r.preload ?? "idle") === "idle")
+        idle.push(typeof requestIdleCallback === "function" ? requestIdleCallback(() => go(name), { timeout: 5e3 }) : window.setTimeout(() => go(name), 2e3));
+    const stop = interceptNavigation();
+    return () => {
+      stop();
+      for (const id of idle) typeof cancelIdleCallback === "function" ? cancelIdleCallback(id) : clearTimeout(id);
+    };
+  }, []);
+  return null;
+}
+var push = (url, options) => void Router.push(url, void 0, options);
+var replace = (url, options) => void Router.replace(url, void 0, options);
+function NextRemote({ name, props, fallback = null, ...rest }) {
+  setup();
+  const router = useRouter();
+  const r = remotes[name];
+  const host = useMemo(() => ({ asPath: router.asPath, basePath: r?.basePath, routes: r?.routes, push, replace, events: Router.events }), [router.asPath, r]);
+  const all = useMemo(() => ({ ...props, __next: host }), [props, host]);
+  if (!router.isReady) return fallback;
+  return createElement(Remote, { ...rest, name, fallback, props: all });
+}
+export {
+  NextRemote,
+  VitralNext,
+  interceptNavigation,
+  remoteFor
+};

package/dist/next.d.ts

@@ -0,0 +1,190 @@
+import * as react from 'react';
+import { ReactNode, ImgHTMLAttributes, AnchorHTMLAttributes, ComponentType } from 'react';
+
+/** `basePath` do `next.config`. O plugin chama ao carregar os módulos `next/*`. */
+declare function setBasePath(path?: string): void;
+type Query = Record<string, string | string[] | undefined>;
+type Url = string | {
+    pathname?: string | null;
+    query?: Query | string | null;
+    hash?: string | null;
+};
+interface NextRouter {
+    pathname: string;
+    route: string;
+    asPath: string;
+    query: Query;
+    basePath: string;
+    isReady: boolean;
+    isFallback: boolean;
+    isPreview: boolean;
+    isLocaleDomain: boolean;
+    locale?: string;
+    push(url: Url, as?: Url, options?: {
+        scroll?: boolean;
+    }): Promise<boolean>;
+    replace(url: Url, as?: Url, options?: {
+        scroll?: boolean;
+    }): Promise<boolean>;
+    back(): void;
+    forward(): void;
+    reload(): void;
+    prefetch(url: string): Promise<void>;
+    beforePopState(cb: unknown): void;
+    events: {
+        on(type: string, fn: (...args: any[]) => void): void;
+        off(type: string, fn: (...args: any[]) => void): void;
+        emit(type: string, ...args: any[]): void;
+    };
+    /** Só no roteador do host (`NextRemote`): o `href` que o `<Link>` mostra, já com a rota pública. */
+    hrefOf?(path: string): string;
+}
+/** O contexto que o `useRouter` do Next lê. O host que manda na rota fornece um. */
+declare const RouterContext: react.Context<NextRouter | null>;
+/** `href` do Next (texto ou objeto) como texto. */
+declare function formatUrl(url: Url): string;
+/** `useRouter` de `next/router`: o do `RouterContext`, se houver, senão o da URL. */
+declare function useRouter(): NextRouter;
+/** `Router` (export default de `next/router`): o do host dentro do `NextRemote`, senão o da URL. */
+declare const Router: NextRouter;
+declare function withRouter<P extends object>(Component: ComponentType<P & {
+    router: NextRouter;
+}>): ComponentType<P>;
+interface AppRouter {
+    push(href: string, options?: {
+        scroll?: boolean;
+    }): void;
+    replace(href: string, options?: {
+        scroll?: boolean;
+    }): void;
+    back(): void;
+    forward(): void;
+    refresh(): void;
+    prefetch(href: string): void;
+}
+/** `useRouter` de `next/navigation`. */
+declare function useAppRouter(): AppRouter;
+declare function usePathname(): string;
+declare function useSearchParams(): URLSearchParams;
+declare function useParams<T extends Record<string, string | string[]> = Record<string, string | string[]>>(): T;
+declare function redirect(url: string): never;
+declare function notFound(): never;
+type LinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & {
+    href: Url;
+    as?: Url;
+    replace?: boolean;
+    scroll?: boolean;
+    shallow?: boolean;
+    prefetch?: boolean | null;
+    passHref?: boolean;
+    legacyBehavior?: boolean;
+    locale?: string | false;
+    children?: ReactNode;
+};
+declare const Link: react.ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
+    href: Url;
+    as?: Url;
+    replace?: boolean;
+    scroll?: boolean;
+    shallow?: boolean;
+    prefetch?: boolean | null;
+    passHref?: boolean;
+    legacyBehavior?: boolean;
+    locale?: string | false;
+    children?: ReactNode;
+} & react.RefAttributes<HTMLAnchorElement>>;
+type StaticImage = {
+    src: string;
+    width?: number;
+    height?: number;
+};
+type ImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'height' | 'loading'> & {
+    src: string | StaticImage;
+    alt: string;
+    width?: number | string;
+    height?: number | string;
+    fill?: boolean;
+    priority?: boolean;
+    loading?: 'eager' | 'lazy';
+    quality?: number | string;
+    placeholder?: string;
+    blurDataURL?: string;
+    unoptimized?: boolean;
+    overrideSrc?: string;
+    loader?: (p: {
+        src: string;
+        width: number;
+        quality?: number;
+    }) => string;
+    onLoadingComplete?: (img: HTMLImageElement) => void;
+};
+declare const Image: react.ForwardRefExoticComponent<Omit<ImgHTMLAttributes<HTMLImageElement>, "loading" | "src" | "width" | "height"> & {
+    src: string | StaticImage;
+    alt: string;
+    width?: number | string;
+    height?: number | string;
+    fill?: boolean;
+    priority?: boolean;
+    loading?: "eager" | "lazy";
+    quality?: number | string;
+    placeholder?: string;
+    blurDataURL?: string;
+    unoptimized?: boolean;
+    overrideSrc?: string;
+    loader?: (p: {
+        src: string;
+        width: number;
+        quality?: number;
+    }) => string;
+    onLoadingComplete?: (img: HTMLImageElement) => void;
+} & react.RefAttributes<HTMLImageElement>>;
+/** O React 19 já leva `<title>`, `<meta>` e `<link>` para o `<head>`. */
+declare function Head({ children }: {
+    children?: ReactNode;
+}): react.FunctionComponentElement<react.FragmentProps>;
+type Loader<P> = () => Promise<ComponentType<P> | {
+    default: ComponentType<P>;
+}>;
+declare function dynamic<P extends object = object>(loader: Loader<P> | Promise<ComponentType<P> | {
+    default: ComponentType<P>;
+}>, options?: {
+    loading?: ComponentType<any>;
+    ssr?: boolean;
+}): ComponentType<P>;
+/** Rota pública do host e o caminho dela na zona (como no `rewrites` do Multi-Zones). */
+interface ZoneRoute {
+    public: string;
+    zone: string;
+}
+/** O que o `NextRemote` do host passa ao remote, na prop `__next`. */
+interface HostRouter {
+    /** `asPath` do host: a URL do navegador. */
+    asPath: string;
+    /** `basePath` do remote, como no `next.config` da zona. */
+    basePath?: string;
+    routes?: ZoneRoute[];
+    push(url: string, options?: {
+        scroll?: boolean;
+    }): void;
+    replace(url: string, options?: {
+        scroll?: boolean;
+    }): void;
+    /** `Router.events` do host: `routeChangeStart`, `routeChangeComplete`… chegam ao remote. */
+    events?: NextRouter['events'];
+}
+/**
+ * O roteador que o remote vê dentro do host: caminhos como numa zona com
+ * `basePath` (a URL pública vira o caminho da zona, sem o `basePath`), e
+ * `push` volta pelo roteador do host, com a rota pública.
+ */
+declare function hostRouter(host: HostRouter): NextRouter;
+/**
+ * Embrulha o `export default` do remote no modo `next` do plugin: com a prop
+ * `__next` (vinda do `NextRemote` do host), os componentes leem o roteador do
+ * host; sem ela, o da URL.
+ */
+declare function nextRemote<P extends object>(Component: ComponentType<P>): ComponentType<P & {
+    __next?: HostRouter;
+}>;
+
+export { type AppRouter, Head, type HostRouter, Image, type ImageProps, Link, type LinkProps, type NextRouter, Router, RouterContext, type Url, type ZoneRoute, dynamic, formatUrl, hostRouter, nextRemote, notFound, redirect, setBasePath, useAppRouter, useParams, usePathname, useRouter, useSearchParams, withRouter };