@vercel/microfrontends 1.0.1-canary.0 → 1.0.1-canary.2

package/dist/next/config.d.ts

@@ -1,6 +1,6 @@
 import { NextConfig } from 'next';
 
-type TransformKeys = 'assetPrefix' | 'draftMode' | 'redirects' | 'rewrites' | 'serverActions' | 'webpack';
+type TransformKeys = 'assetPrefix' | 'buildId' | 'draftMode' | 'redirects' | 'rewrites' | 'serverActions' | 'webpack';
 
 interface WithMicrofrontendsOptions {
     /**
@@ -10,6 +10,12 @@ interface WithMicrofrontendsOptions {
     isProduction?: () => boolean;
     debug?: boolean;
     skipTransforms?: TransformKeys[];
+    /**
+     * True to enable support for Next.js pages router. This is disabled by
+     * default since it modifies Webpack chunking behavior, so it should only be
+     * enabled when necessary.
+     */
+    supportPagesRouter?: boolean;
     configPath?: string;
 }
 

package/dist/next/config.js

@@ -245,16 +245,17 @@ var validateConfigPaths = (applicationConfigsById) => {
         const maybeError = validatePathExpression(path5);
         if (maybeError) {
           errors.push(maybeError);
-        }
-        const existing = pathsByApplicationId.get(path5);
-        if (existing) {
-          existing.applications.push(id);
         } else {
-          pathsByApplicationId.set(path5, {
-            applications: [id],
-            matcher: pathToRegexp2(path5),
-            applicationId: id
-          });
+          const existing = pathsByApplicationId.get(path5);
+          if (existing) {
+            existing.applications.push(id);
+          } else {
+            pathsByApplicationId.set(path5, {
+              applications: [id],
+              matcher: pathToRegexp2(path5),
+              applicationId: id
+            });
+          }
         }
       }
     }
@@ -294,26 +295,38 @@ var validateConfigPaths = (applicationConfigsById) => {
 };
 var PATH_DEFAULT_PATTERN = "[^\\/#\\?]+?";
 function validatePathExpression(path5) {
-  const tokens = parsePathRegexp(path5);
-  for (let i = 0; i < tokens.length; i++) {
-    const token = tokens[i];
-    if (token === void 0) {
-      return `token ${i} in ${path5} is undefined, this shouldn't happen`;
-    }
-    if (typeof token !== "string") {
-      if (token.pattern !== PATH_DEFAULT_PATTERN) {
-        return `Path ${path5} cannot use a regular expression wildcard`;
-      }
-      if (token.prefix !== "/") {
-        return `Wildcard :${token.name} must be immediately after a / in ${path5}`;
-      }
-      if (token.suffix) {
-        return `Wildcard suffix on :${token.name} is not allowed. Suffixes are not supported`;
+  try {
+    const tokens = parsePathRegexp(path5);
+    if (/(?<!\\)\{/.test(path5)) {
+      return `Optional paths are not supported: ${path5}`;
+    }
+    if (/(?<!\\|\()\?/.test(path5)) {
+      return `Optional paths are not supported: ${path5}`;
+    }
+    if (/\/[^/]*(?<!\\):[^/]*(?<!\\):[^/]*/.test(path5)) {
+      return `Only one wildcard is allowed per path segment: ${path5}`;
+    }
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i];
+      if (token === void 0) {
+        return `token ${i} in ${path5} is undefined, this shouldn't happen`;
       }
-      if (token.modifier && i !== tokens.length - 1) {
-        return `Modifier ${token.modifier} is not allowed on wildcard :${token.name} in ${path5}. Modifiers are only allowed in the last path component`;
+      if (typeof token !== "string") {
+        if (token.pattern !== PATH_DEFAULT_PATTERN && // Allows (a|b|c) and ((?!a|b|c).*) regex
+        // Only limited regex is supported for now, due to performance considerations
+        !/^(?<allowed>[\w]+(?:\|[^|()]+)+)$|^\(\?!(?<disallowed>[\w]+(?:\|[^|()]+)+)\)\.\*$/.test(
+          token.pattern
+        )) {
+          return `Path ${path5} cannot use unsupported regular expression wildcard`;
+        }
+        if (token.modifier && i !== tokens.length - 1) {
+          return `Modifier ${token.modifier} is not allowed on wildcard :${token.name} in ${path5}. Modifiers are only allowed in the last path component`;
+        }
       }
     }
+  } catch (e) {
+    const message = e instanceof Error ? e.message : String(e);
+    return `Path ${path5} could not be parsed into regexp: ${message}`;
   }
   return void 0;
 }
@@ -1687,8 +1700,30 @@ function transform(args) {
   };
 }
 
-// src/next/config/transforms/draft-mode.ts
+// src/next/config/transforms/build-id.ts
+import { nanoid } from "nanoid";
 function transform2(args) {
+  const { app, next, opts } = args;
+  if (!opts?.supportPagesRouter) {
+    return { next };
+  }
+  if (next.generateBuildId !== void 0) {
+    throw new Error(
+      '"generateBuildId" must not already be set in next.config.js when using microfrontends with "supportPagesRouter"'
+    );
+  }
+  if (!app.isDefault()) {
+    next.generateBuildId = () => {
+      return `${app.getAssetPrefix()}-${nanoid()}`;
+    };
+  }
+  return {
+    next
+  };
+}
+
+// src/next/config/transforms/draft-mode.ts
+function transform3(args) {
   const { next } = args;
   if (next.experimental?.multiZoneDraftMode !== void 0) {
     return {
@@ -1702,35 +1737,125 @@ function transform2(args) {
   };
 }
 
+// src/next/utils/route-to-local-proxy.ts
+function routeToLocalProxy() {
+  const isDevEnv = (process.env.VERCEL_ENV ?? "development") === "development";
+  return isDevEnv && Boolean(process.env.TURBO_TASK_HAS_MFE_PROXY);
+}
+
 // src/next/config/transforms/redirects.ts
-function transform3(args) {
+function transform4(args) {
   const { next, microfrontend, opts } = args;
   const isProduction2 = opts?.isProduction ?? false;
-  const isDevEnv = (process.env.VERCEL_ENV ?? "development") === "development";
-  const requireLocalProxyHeader = !isProduction2 && isDevEnv && Boolean(process.env.TURBO_TASK_HAS_MFE_PROXY) && !process.env.MFE_DISABLE_LOCAL_PROXY_REWRITE;
+  const requireLocalProxyHeader = routeToLocalProxy() && !isProduction2 && !process.env.MFE_DISABLE_LOCAL_PROXY_REWRITE;
   if (requireLocalProxyHeader) {
-    const proxyRedirect = {
-      source: "/:path*",
-      destination: `http://localhost:${microfrontend.getLocalProxyPort()}/:path*`,
-      permanent: false,
-      missing: [{ type: "header", key: "x-vercel-mfe-local-proxy-origin" }]
-    };
+    const proxyRedirects = [
+      {
+        source: "/:path*",
+        destination: `http://localhost:${microfrontend.getLocalProxyPort()}/:path*`,
+        permanent: false,
+        missing: [{ type: "header", key: "x-vercel-mfe-local-proxy-origin" }]
+      }
+    ];
     if (next.redirects && typeof next.redirects === "function") {
       const originalRedirectsFn = next.redirects;
       next.redirects = async () => {
         const originalRedirects = await originalRedirectsFn();
-        return [proxyRedirect, ...originalRedirects];
+        return [...proxyRedirects, ...originalRedirects];
       };
     } else {
-      next.redirects = async () => [proxyRedirect];
+      next.redirects = async () => proxyRedirects;
     }
   }
   return { next };
 }
 
+// src/routing/get-domain-from-environment.ts
+function getDomainFromEnvironment({
+  app,
+  target
+}) {
+  const mfeProjects = JSON.parse(
+    process.env.VERCEL_MICROFRONTENDS_PROJECTS ?? "[]"
+  );
+  if (mfeProjects.length === 0) {
+    throw new Error("Missing related microfrontends project information");
+  }
+  if (!app.projectId) {
+    throw new Error(`Missing applications[${app.name}].vercel.projectId`);
+  }
+  const vercelProject = mfeProjects.find((p) => p.project.id === app.projectId);
+  if (!vercelProject) {
+    throw new Error(
+      `Missing related microfrontends project information for application "${app.name}"`
+    );
+  }
+  const domain = target === "preview" && vercelProject.preview.branch ? vercelProject.preview.branch : vercelProject.production.alias ?? vercelProject.production.url;
+  if (!domain) {
+    throw new Error(
+      `Missing domain for target "${target}" in application "${app.name}"`
+    );
+  }
+  return domain.startsWith("https://") ? domain : `https://${domain}`;
+}
+
+// src/routing/get-domain-for-current-environment.ts
+function debugDomains(zone, env, domain) {
+  if (process.env.MFE_DEBUG === "true") {
+    const indent = " ".repeat(4);
+    const header = "domains (zone (env) -> domain)";
+    const separator = "\u23AF".repeat(header.length);
+    const line = `${indent} 1. ${zone} (${env}) -> ${domain}`;
+    console.log(`${indent}${header}
+${indent}${separator}
+${line}
+`);
+  }
+}
+function getCurrentEnvironment() {
+  const isDevelopment = !process.env.VERCEL_ENV || process.env.VERCEL_ENV === "development";
+  const isPreview = process.env.VERCEL_ENV === "preview";
+  const isProduction2 = process.env.VERCEL_ENV === "production";
+  if (isDevelopment) {
+    return { group: "development" };
+  }
+  if (isProduction2) {
+    return { group: "production" };
+  }
+  if (isPreview) {
+    return { group: "preview" };
+  }
+  return { group: "custom", name: process.env.VERCEL_ENV };
+}
+function getDomainForCurrentEnvironment(config, appName, opts = {}) {
+  const app = config.getApplication(appName);
+  if (!opts.ignoreOverride && app.overrides?.environment) {
+    return app.overrides.environment.toString();
+  }
+  const { group } = getCurrentEnvironment();
+  const fallbackHost = config.getDefaultApplication().fallback.toString();
+  switch (group) {
+    case "development": {
+      const domain = ["test", "development"].includes(process.env.NODE_ENV) ? app.development.local.toString() : fallbackHost;
+      debugDomains(appName, "development", domain);
+      return domain;
+    }
+    case "preview": {
+      return getDomainFromEnvironment({ app, target: "preview" });
+    }
+    case "production": {
+      return getDomainFromEnvironment({ app, target: "production" });
+    }
+    case "custom":
+      throw new Error(
+        "Custom environments are not supported in getDomainForCurrentEnvironment"
+      );
+  }
+}
+
 // src/next/config/transforms/rewrites.ts
 function debugRewrites(rewrites) {
-  if (process.env.MFE_DEBUG === "true") {
+  if (process.env.MFE_DEBUG === "true" || process.env.MFE_DEBUG === "1") {
     const indent = " ".repeat(4);
     const header = "rewrites (source \u2192 destination)";
     const separator = "\u23AF".repeat(header.length);
@@ -1760,8 +1885,8 @@ function rewritesMapToArr(rewrites) {
     ];
   });
 }
-function transform4(args) {
-  const { next, app } = args;
+function transform5(args) {
+  const { app, microfrontend, next, opts } = args;
   const buildBeforeFiles = () => {
     const rewrites = /* @__PURE__ */ new Map();
     if (!app.isDefault()) {
@@ -1780,6 +1905,15 @@ function transform4(args) {
           pathname: "/_vercel/:path*"
         }
       });
+    } else if (opts?.supportPagesRouter && !(microfrontend instanceof MicrofrontendChildConfig)) {
+      for (const child of microfrontend.getChildApplications()) {
+        rewrites.set(`/_next/data/${child.getAssetPrefix()}-:buildId/:path*`, {
+          destination: {
+            domain: getDomainForCurrentEnvironment(microfrontend, child.name),
+            pathname: `/_next/data/${child.getAssetPrefix()}-:buildId/:path*`
+          }
+        });
+      }
     }
     return rewritesMapToArr(rewrites);
   };
@@ -1815,89 +1949,6 @@ function transform4(args) {
   };
 }
 
-// src/routing/get-domain-from-environment.ts
-function getDomainFromEnvironment({
-  app,
-  target
-}) {
-  const mfeProjects = JSON.parse(
-    process.env.VERCEL_MICROFRONTENDS_PROJECTS ?? "[]"
-  );
-  if (mfeProjects.length === 0) {
-    throw new Error("Missing related microfrontends project information");
-  }
-  if (!app.projectId) {
-    throw new Error(`Missing applications[${app.name}].vercel.projectId`);
-  }
-  const vercelProject = mfeProjects.find((p) => p.project.id === app.projectId);
-  if (!vercelProject) {
-    throw new Error(
-      `Missing related microfrontends project information for application "${app.name}"`
-    );
-  }
-  const domain = target === "preview" && vercelProject.preview.branch ? vercelProject.preview.branch : vercelProject.production.alias ?? vercelProject.production.url;
-  if (!domain) {
-    throw new Error(
-      `Missing domain for target "${target}" in application "${app.name}"`
-    );
-  }
-  return domain.startsWith("https://") ? domain : `https://${domain}`;
-}
-
-// src/routing/get-domain-for-current-environment.ts
-function debugDomains(zone, env, domain) {
-  if (process.env.MFE_DEBUG === "true") {
-    const indent = " ".repeat(4);
-    const header = "domains (zone (env) -> domain)";
-    const separator = "\u23AF".repeat(header.length);
-    const line = `${indent} 1. ${zone} (${env}) -> ${domain}`;
-    console.log(`${indent}${header}
-${indent}${separator}
-${line}
-`);
-  }
-}
-function getCurrentEnvironment() {
-  const isDevelopment = !process.env.VERCEL_ENV || process.env.VERCEL_ENV === "development";
-  const isPreview = process.env.VERCEL_ENV === "preview";
-  const isProduction2 = process.env.VERCEL_ENV === "production";
-  if (isDevelopment) {
-    return { group: "development" };
-  }
-  if (isProduction2) {
-    return { group: "production" };
-  }
-  if (isPreview) {
-    return { group: "preview" };
-  }
-  return { group: "custom", name: process.env.VERCEL_ENV };
-}
-function getDomainForCurrentEnvironment(config, appName, opts = {}) {
-  const app = config.getApplication(appName);
-  if (!opts.ignoreOverride && app.overrides?.environment) {
-    return app.overrides.environment.toString();
-  }
-  const { group } = getCurrentEnvironment();
-  const fallbackHost = config.getDefaultApplication().fallback.toString();
-  switch (group) {
-    case "development": {
-      const domain = ["test", "development"].includes(process.env.NODE_ENV) ? app.development.local.toString() : fallbackHost;
-      debugDomains(appName, "development", domain);
-      return domain;
-    }
-    case "preview": {
-      return getDomainFromEnvironment({ app, target: "preview" });
-    }
-    case "production": {
-      return getDomainFromEnvironment({ app, target: "production" });
-    }
-    case "custom":
-      throw new Error(
-        "Custom environments are not supported in getDomainForCurrentEnvironment"
-      );
-  }
-}
-
 // src/next/config/transforms/server-actions.ts
 function debugRewrites2(allowedOrigins) {
   if (process.env.MFE_DEBUG === "true" && allowedOrigins) {
@@ -1918,7 +1969,7 @@ ${table}
   }
 }
 var formatDomainForServerAction = (domain) => domain.replace(/https?:\/\//, "");
-function transform5(args) {
+function transform6(args) {
   const { next, app, microfrontend } = args;
   if (microfrontend instanceof MicrofrontendChildConfig) {
     console.warn(
@@ -1975,8 +2026,8 @@ function transform5(args) {
 }
 
 // src/next/config/transforms/webpack.ts
-function transform6(args) {
-  const { next, microfrontend } = args;
+function transform7(args) {
+  const { next, microfrontend, opts } = args;
   const configWithWebpack = {
     ...next,
     webpack(cfg, context) {
@@ -2007,6 +2058,38 @@ function transform6(args) {
           ...config.resolve.fallback
         };
       }
+      if (opts?.supportPagesRouter) {
+        config.optimization.moduleIds = "deterministic";
+        config.optimization.chunkIds = "deterministic";
+        config.plugins.push({
+          apply: (compiler) => {
+            compiler.hooks.compilation.tap(
+              "SortChunksPlugin",
+              (compilation) => {
+                compilation.hooks.optimizeChunks.tap(
+                  "SortChunksPlugin",
+                  (chunks) => {
+                    const sortedChunks = Array.from(chunks).sort((a, b) => {
+                      if (a.name && b.name) {
+                        return a.name.localeCompare(b.name);
+                      }
+                      return (String(a.id) || "").localeCompare(
+                        String(b.id) || ""
+                      );
+                    });
+                    Array.from(chunks).forEach((chunk) => {
+                      compilation.chunks.delete(chunk);
+                    });
+                    sortedChunks.forEach((chunk) => {
+                      compilation.chunks.add(chunk);
+                    });
+                  }
+                );
+              }
+            );
+          }
+        });
+      }
       return config;
     }
   };
@@ -2018,11 +2101,12 @@ function transform6(args) {
 // src/next/config/transforms/index.ts
 var transforms = {
   assetPrefix: transform,
-  draftMode: transform2,
-  redirects: transform3,
-  rewrites: transform4,
-  serverActions: transform5,
-  webpack: transform6
+  buildId: transform2,
+  draftMode: transform3,
+  redirects: transform4,
+  rewrites: transform5,
+  serverActions: transform6,
+  webpack: transform7
 };
 
 // src/next/config/env.ts
@@ -2090,18 +2174,19 @@ function withMicrofrontends(nextConfig, opts) {
   const app = microfrontends.config.getApplication(fromApp);
   setEnvironment({ app, microfrontends });
   let next = { ...nextConfig };
-  for (const [key, transform7] of typedEntries(transforms)) {
+  for (const [key, transform8] of typedEntries(transforms)) {
     if (opts?.skipTransforms?.includes(key)) {
       console.log(`Skipping ${key} transform`);
       continue;
     }
     try {
-      const transformedConfig = transform7({
+      const transformedConfig = transform8({
         app,
         next,
         microfrontend: microfrontends.config,
         opts: {
-          isProduction: isProduction(opts)
+          isProduction: isProduction(opts),
+          supportPagesRouter: opts?.supportPagesRouter
         }
       });
       next = transformedConfig.next;