@vercel/microfrontends 0.17.4 → 0.19.0

package/dist/next/middleware.js

@@ -8,7 +8,7 @@ import { parse } from "jsonc-parser";
 // src/config/errors.ts
 var MicrofrontendError = class extends Error {
   constructor(message, opts) {
-    super(message);
+    super(message, { cause: opts?.cause });
     this.name = "MicrofrontendsError";
     this.source = opts?.source ?? "@vercel/microfrontends";
     this.type = opts?.type ?? "unknown";
@@ -230,7 +230,8 @@ var validateConfigPaths = (applicationConfigsById) => {
     if (isDefaultApp(app)) {
       continue;
     }
-    for (const pathMatch of app.routing) {
+    const childApp = app;
+    for (const pathMatch of childApp.routing) {
       for (const path of pathMatch.paths) {
         const maybeError = validatePathExpression(path);
         if (maybeError) {
@@ -250,33 +251,31 @@ var validateConfigPaths = (applicationConfigsById) => {
     }
   }
   const entries = Array.from(pathsByApplicationId.entries());
-  entries.forEach(([path, { applications: ids, matcher, applicationId }]) => {
+  for (const [path, { applications: ids, matcher, applicationId }] of entries) {
     if (ids.length > 1) {
       errors.push(
         `Duplicate path "${path}" for applications "${ids.join(", ")}"`
       );
     }
-    entries.forEach(
-      ([
-        matchPath,
-        { applications: matchIds, applicationId: matchApplicationId }
-      ]) => {
-        if (path === matchPath) {
-          return;
-        }
-        if (applicationId === matchApplicationId) {
-          return;
-        }
-        if (matcher.test(matchPath)) {
-          const source = `"${path}" of application${ids.length > 0 ? "s" : ""} ${ids.join(", ")}`;
-          const destination = `"${matchPath}" of application${matchIds.length > 0 ? "s" : ""} ${matchIds.join(", ")}`;
-          errors.push(
-            `Overlapping path detected between ${source} and ${destination}`
-          );
-        }
+    for (const [
+      matchPath,
+      { applications: matchIds, applicationId: matchApplicationId }
+    ] of entries) {
+      if (path === matchPath) {
+        continue;
       }
-    );
-  });
+      if (applicationId === matchApplicationId) {
+        continue;
+      }
+      if (matcher.test(matchPath)) {
+        const source = `"${path}" of application${ids.length > 0 ? "s" : ""} ${ids.join(", ")}`;
+        const destination = `"${matchPath}" of application${matchIds.length > 0 ? "s" : ""} ${matchIds.join(", ")}`;
+        errors.push(
+          `Overlapping path detected between ${source} and ${destination}`
+        );
+      }
+    }
+  }
   if (errors.length) {
     throw new MicrofrontendError(`Invalid paths: ${errors.join(", ")}`, {
       type: "config",
@@ -345,7 +344,7 @@ var validateConfigDefaultApplication = (applicationConfigsById) => {
   const numApplicationsWithoutRouting = numApplications - numApplicationsWithRouting;
   if (numApplicationsWithoutRouting === 0) {
     throw new MicrofrontendError(
-      `No default application found. At least one application needs to be the default by omitting routing.`,
+      "No default application found. At least one application needs to be the default by omitting routing.",
       { type: "config", subtype: "no_default_application" }
     );
   }
@@ -391,47 +390,80 @@ function generatePortFromName({
 // src/config/microfrontends-config/isomorphic/host.ts
 var Host = class {
   constructor(hostConfig, options) {
-    const { protocol = "https", host, port } = hostConfig;
-    this.protocol = protocol;
-    this.host = host;
-    this.port = Host.getPort({ port, protocol: this.protocol });
+    if (typeof hostConfig === "string") {
+      ({
+        protocol: this.protocol,
+        host: this.host,
+        port: this.port
+      } = Host.parseUrl(hostConfig));
+    } else {
+      const { protocol = "https", host, port } = hostConfig;
+      this.protocol = protocol;
+      this.host = host;
+      this.port = port;
+    }
     this.local = options?.isLocal;
   }
-  isLocal() {
-    return this.local || this.host === "localhost" || this.host === "127.0.0.1";
-  }
-  static getPort({
-    protocol,
-    port
-  }) {
-    if (!port) {
-      if (protocol === "http") {
-        return 80;
-      }
-      return 443;
+  static parseUrl(url) {
+    let hostToParse = url;
+    if (!/^https?:\/\//.exec(hostToParse)) {
+      hostToParse = `https://${hostToParse}`;
     }
-    return port;
+    const parsed = new URL(hostToParse);
+    if (!parsed.hostname) {
+      throw new Error(Host.getMicrofrontendsError(url, "requires a host"));
+    }
+    if (parsed.hash) {
+      throw new Error(
+        Host.getMicrofrontendsError(url, "cannot have a fragment")
+      );
+    }
+    if (parsed.username || parsed.password) {
+      throw new Error(
+        Host.getMicrofrontendsError(
+          url,
+          "cannot have authentication credentials (username and/or password)"
+        )
+      );
+    }
+    if (parsed.pathname !== "/") {
+      throw new Error(Host.getMicrofrontendsError(url, "cannot have a path"));
+    }
+    if (parsed.search) {
+      throw new Error(
+        Host.getMicrofrontendsError(url, "cannot have query parameters")
+      );
+    }
+    const protocol = parsed.protocol.slice(0, -1);
+    return {
+      protocol,
+      host: parsed.hostname,
+      port: parsed.port ? Number.parseInt(parsed.port) : void 0
+    };
   }
-  isDefaultPort() {
-    return this.port === Host.getPort({ protocol: this.protocol });
+  static getMicrofrontendsError(url, message) {
+    return `Microfrontends configuration error: the URL ${url} in your microfrontends.json ${message}.`;
   }
-  toString(opts = {}) {
-    const url = this.toUrl(opts);
+  isLocal() {
+    return this.local || this.host === "localhost" || this.host === "127.0.0.1";
+  }
+  toString() {
+    const url = this.toUrl();
     return url.toString().replace(/\/$/, "");
   }
-  toUrl(opts = {}) {
-    const { includeDefaultPort } = opts;
-    const url = `${this.protocol}://${this.host}${this.isDefaultPort() && !includeDefaultPort ? "" : `:${this.port}`}`;
+  toUrl() {
+    const url = `${this.protocol}://${this.host}${this.port ? `:${this.port}` : ""}`;
     return new URL(url);
   }
 };
 var LocalHost = class extends Host {
   constructor({
     appName,
+    localPort,
     ...hostConfig
   }) {
     const host = hostConfig.host ?? "localhost";
-    const port = hostConfig.port ?? generatePortFromName({ name: appName });
+    const port = localPort ?? hostConfig.port ?? generatePortFromName({ name: appName });
     const protocol = hostConfig.protocol ?? "http";
     super({ protocol, host, port });
   }
@@ -448,12 +480,17 @@ var Application = class {
     this.development = {
       local: new LocalHost({
         appName: name,
+        localPort: app.development?.localPort,
         ...app.development?.local
       }),
       fallback: app.development?.fallback ? new Host(app.development.fallback) : void 0
     };
-    this.production = app.production ? new Host(app.production) : void 0;
-    this.vercel = app.vercel;
+    if (app.development?.fallback) {
+      this.fallback = new Host(app.development.fallback);
+    } else if (app.production) {
+      this.fallback = new Host(app.production);
+    }
+    this.projectId = app.projectId ?? app.vercel?.projectId;
     this.overrides = overrides?.environment ? {
       environment: new Host(overrides.environment)
     } : void 0;
@@ -481,7 +518,16 @@ var DefaultApplication = class extends Application {
       isDefault: true
     });
     this.default = true;
-    this.production = new Host(app.production);
+    const fallbackHost = app.development?.fallback ?? app.production;
+    if (fallbackHost === void 0) {
+      throw new Error(
+        "`app.production` or `app.development.fallback` must be set in the default application in microfrontends.json."
+      );
+    }
+    this.fallback = new Host(fallbackHost);
+    if (app.production) {
+      this.production = new Host(app.production);
+    }
   }
   getAssetPrefix() {
     return "";
@@ -551,7 +597,7 @@ var MicrofrontendConfigIsomorphic = class {
     }
     if (isMainConfig(config) && !this.defaultApplication) {
       throw new MicrofrontendError(
-        `Could not find default application in microfrontends configuration`,
+        "Could not find default application in microfrontends configuration",
         {
           type: "application",
           subtype: "not_found"
@@ -627,11 +673,11 @@ var MicrofrontendConfigIsomorphic = class {
     return app;
   }
   getApplicationByProjectId(projectId) {
-    if (this.defaultApplication?.vercel?.projectId === projectId) {
+    if (this.defaultApplication?.projectId === projectId) {
       return this.defaultApplication;
     }
     return Object.values(this.childApplications).find(
-      (app) => app.vercel?.projectId === projectId
+      (app) => app.projectId === projectId
     );
   }
   /**
@@ -641,7 +687,7 @@ var MicrofrontendConfigIsomorphic = class {
   getDefaultApplication() {
     if (!this.defaultApplication) {
       throw new MicrofrontendError(
-        `Could not find default application in microfrontends configuration`,
+        "Could not find default application in microfrontends configuration",
         {
           type: "application",
           subtype: "not_found"
@@ -654,7 +700,7 @@ var MicrofrontendConfigIsomorphic = class {
    * Returns the configured port for the local proxy
    */
   getLocalProxyPort() {
-    return this.config.options?.localProxy?.port ?? DEFAULT_LOCAL_PROXY_PORT;
+    return this.config.options?.localProxyPort ?? this.config.options?.localProxy?.port ?? DEFAULT_LOCAL_PROXY_PORT;
   }
   /**
    * Serializes the class back to the Schema type.
@@ -728,7 +774,7 @@ var MicrofrontendMainConfig = class extends MicrofrontendConfigIsomorphic {
     }
     if (!defaultApplication) {
       throw new MicrofrontendError(
-        `Could not find default application in microfrontends configuration`,
+        "Could not find default application in microfrontends configuration",
         {
           type: "application",
           subtype: "not_found"
@@ -778,12 +824,10 @@ function getDomainFromEnvironment({
   if (mfeProjects.length === 0) {
     throw new Error("Missing related microfrontends project information");
   }
-  if (!app.vercel?.projectId) {
+  if (!app.projectId) {
     throw new Error(`Missing applications[${app.name}].vercel.projectId`);
   }
-  const vercelProject = mfeProjects.find(
-    (p) => p.project.id === app.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}"`
@@ -817,9 +861,11 @@ function getCurrentEnvironment() {
   const isProduction = process.env.VERCEL_ENV === "production";
   if (isDevelopment) {
     return { group: "development" };
-  } else if (isProduction) {
+  }
+  if (isProduction) {
     return { group: "production" };
-  } else if (isPreview) {
+  }
+  if (isPreview) {
     return { group: "preview" };
   }
   return { group: "custom", name: process.env.VERCEL_ENV };
@@ -830,10 +876,10 @@ function getDomainForCurrentEnvironment(config, appName, opts = {}) {
     return app.overrides.environment.toString();
   }
   const { group } = getCurrentEnvironment();
-  const productionHost = config.getDefaultApplication().production.toString();
+  const fallbackHost = config.getDefaultApplication().fallback.toString();
   switch (group) {
     case "development": {
-      const domain = ["test", "development"].includes(process.env.NODE_ENV) ? app.development.local.toString() : productionHost;
+      const domain = ["test", "development"].includes(process.env.NODE_ENV) ? app.development.local.toString() : fallbackHost;
       debugDomains(appName, "development", domain);
       return domain;
     }
@@ -844,10 +890,9 @@ function getDomainForCurrentEnvironment(config, appName, opts = {}) {
       return getDomainFromEnvironment({ app, target: "production" });
     }
     case "custom":
-      console.warn(
-        `Custom environments are not supported in getDomainForCurrentEnvironment`
+      throw new Error(
+        "Custom environments are not supported in getDomainForCurrentEnvironment"
       );
-      return productionHost;
   }
 }
 
@@ -875,7 +920,7 @@ function getHandler({
   application,
   flagFn,
   pattern,
-  production
+  fallback
 }) {
   return async (req) => {
     try {
@@ -895,7 +940,7 @@ function getHandler({
         const zoneFallbackCookieName = `__zone_${application.name}_production_fallback`;
         const assetPrefix = application.getAssetPrefix();
         if (assetPrefix && pathname.startsWith(`/${assetPrefix}`) && req.cookies.get(zoneFallbackCookieName)?.value === "1") {
-          rewriteDomain = production.toString();
+          rewriteDomain = fallback.toString();
         } else {
           try {
             let deploymentFound;
@@ -905,7 +950,7 @@ function getHandler({
               deploymentFound = await verifyPreviewDomain(req, rewriteDomain);
             }
             if (!deploymentFound) {
-              rewriteDomain = production.toString();
+              rewriteDomain = fallback.toString();
               responseCallbacks.push((response) => {
                 response.cookies.set(zoneFallbackCookieName, "1", {
                   httpOnly: true,
@@ -920,7 +965,7 @@ function getHandler({
                 if (!existingCookie?.includes("__vercel_toolbar")) {
                   patchedHeaders.set(
                     "cookie",
-                    [`__vercel_toolbar=1`, existingCookie].join("; ")
+                    ["__vercel_toolbar=1", existingCookie].join("; ")
                   );
                   responseCallbacks.push((response) => {
                     response.cookies.set("__vercel_toolbar", "1", {
@@ -956,10 +1001,6 @@ function getHandler({
             NextResponse.next({
               request: {
                 headers
-              },
-              headers: {
-                // temporary, can delete when proxyRouting flag is removed
-                "x-vercel-mfe-middleware-sent-proxy": application.name
               }
             })
           );
@@ -994,7 +1035,7 @@ function getMicrofrontendsMiddleware({
     return middlewares;
   }
   const config = microfrontends.config;
-  const production = config.defaultApplication.production;
+  const fallback = config.defaultApplication.fallback;
   for (const application of config.getChildApplications()) {
     if (application.name === process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION) {
       continue;
@@ -1007,7 +1048,7 @@ function getMicrofrontendsMiddleware({
           config,
           application,
           pattern,
-          production
+          fallback
         })
       });
     }
@@ -1032,7 +1073,7 @@ function getMicrofrontendsMiddleware({
               application,
               flagFn,
               pattern,
-              production
+              fallback
             })
           });
         }