@vercel/microfrontends 0.17.4 → 0.19.0

package/dist/next/config.cjs

@@ -75,7 +75,7 @@ function parseOverrides(cookies) {
 // 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";
@@ -267,7 +267,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 path5 of pathMatch.paths) {
         const maybeError = validatePathExpression(path5);
         if (maybeError) {
@@ -287,33 +288,31 @@ var validateConfigPaths = (applicationConfigsById) => {
     }
   }
   const entries = Array.from(pathsByApplicationId.entries());
-  entries.forEach(([path5, { applications: ids, matcher, applicationId }]) => {
+  for (const [path5, { applications: ids, matcher, applicationId }] of entries) {
     if (ids.length > 1) {
       errors.push(
         `Duplicate path "${path5}" for applications "${ids.join(", ")}"`
       );
     }
-    entries.forEach(
-      ([
-        matchPath,
-        { applications: matchIds, applicationId: matchApplicationId }
-      ]) => {
-        if (path5 === matchPath) {
-          return;
-        }
-        if (applicationId === matchApplicationId) {
-          return;
-        }
-        if (matcher.test(matchPath)) {
-          const source = `"${path5}" 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 (path5 === matchPath) {
+        continue;
       }
-    );
-  });
+      if (applicationId === matchApplicationId) {
+        continue;
+      }
+      if (matcher.test(matchPath)) {
+        const source = `"${path5}" 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",
@@ -382,7 +381,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" }
     );
   }
@@ -428,47 +427,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}`;
+    }
+    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"));
     }
-    return port;
+    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 });
   }
@@ -485,12 +517,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;
@@ -518,7 +555,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 "";
@@ -588,7 +634,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"
@@ -664,11 +710,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
     );
   }
   /**
@@ -678,7 +724,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"
@@ -691,7 +737,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.
@@ -765,7 +811,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"
@@ -1052,24 +1098,12 @@ var schema_default = {
         options: {
           $ref: "#/definitions/Options"
         },
-        remotes: {
-          type: "object",
-          additionalProperties: {
-            $ref: "#/definitions/Application"
-          },
-          propertyNames: {
-            description: "The unique identifier for a Microfrontend Application. Must match the `name` field of the application's `package.json`."
-          },
-          description: "Applications that only serve a subset of the microfrontend routes only need to reference the name of the primary application that owns the full microfrontends configuration."
-        },
         applications: {
           $ref: "#/definitions/ApplicationRouting",
           description: "Mapping of application names to the routes that they host. Only needs to be defined in the application that owns the primary microfrontend domain"
         }
       },
-      required: [
-        "applications"
-      ],
+      required: ["applications"],
       additionalProperties: false
     },
     Options: {
@@ -1077,11 +1111,21 @@ var schema_default = {
       properties: {
         vercel: {
           $ref: "#/definitions/VercelOptions",
-          description: "Micro-Frontends wide options for Vercel."
+          description: "Microfrontends wide options for Vercel.",
+          deprecated: "This is being replaced by the `disableOverrides` field below."
+        },
+        disableOverrides: {
+          type: "boolean",
+          description: "If you want to disable the overrides for the site. For example, if you are managing rewrites between applications externally, you may wish to disable the overrides on the toolbar as they will have no effect."
         },
         localProxy: {
           $ref: "#/definitions/LocalProxyOptions",
-          description: "Options for local proxy."
+          description: "Options for local proxy.",
+          deprecated: "This is being replaced by the `localProxyPort` field below."
+        },
+        localProxyPort: {
+          type: "number",
+          description: "The port number used by the local proxy server.\n\nThe default is `3024`."
         }
       },
       additionalProperties: false
@@ -1089,10 +1133,6 @@ var schema_default = {
     VercelOptions: {
       type: "object",
       properties: {
-        teamSlug: {
-          type: "string",
-          description: "Team slug for the Vercel team"
-        },
         disableOverrides: {
           type: "boolean",
           description: "If you want to disable the overrides for the site. For example, if you are managing rewrites between applications externally, you may wish to disable the overrides on the toolbar as they will have no effect."
@@ -1110,6 +1150,15 @@ var schema_default = {
       },
       additionalProperties: false
     },
+    ApplicationRouting: {
+      type: "object",
+      additionalProperties: {
+        $ref: "#/definitions/Application"
+      },
+      propertyNames: {
+        description: "The unique identifier for a Microfrontend Application. Must match the `name` field of the application's `package.json`."
+      }
+    },
     Application: {
       anyOf: [
         {
@@ -1124,18 +1173,22 @@ var schema_default = {
       type: "object",
       properties: {
         vercel: {
-          $ref: "#/definitions/Vercel"
+          $ref: "#/definitions/Vercel",
+          deprecated: "This is being replaced by the `projectId` field below."
+        },
+        projectId: {
+          type: "string",
+          description: "Vercel project ID"
         },
         development: {
           $ref: "#/definitions/Development"
         },
         production: {
-          $ref: "#/definitions/HostConfig"
+          $ref: "#/definitions/HostConfig",
+          deprecated: "This is a duplicate of the `development.fallback` field and this will be removed soon."
         }
       },
-      required: [
-        "production"
-      ],
+      required: ["production"],
       additionalProperties: false
     },
     Vercel: {
@@ -1146,20 +1199,30 @@ var schema_default = {
           description: "Vercel project ID"
         }
       },
-      required: [
-        "projectId"
-      ],
+      required: ["projectId"],
       additionalProperties: false
     },
     Development: {
       type: "object",
       properties: {
         local: {
-          $ref: "#/definitions/LocalHostConfig"
+          $ref: "#/definitions/LocalHostConfig",
+          deprecated: "This is being replaced by the `localPort` field below."
+        },
+        localPort: {
+          type: "number",
+          description: "The local port number that this application runs on when it is running locally. Common values include `80` for HTTP and `443` for HTTPS."
         },
         fallback: {
-          $ref: "#/definitions/HostConfig",
-          description: "Fallback for local development, could be a host config that points to any environment. If this is not provided, or the application is not running - requests to the application in local development will error."
+          anyOf: [
+            {
+              $ref: "#/definitions/HostConfig"
+            },
+            {
+              type: "string"
+            }
+          ],
+          description: "Fallback for local development, could be a host config that points to any environment. If this is not provided, or the application is not running - requests to the application in local development will error.\n\nIf passing a string, include the protocol (optional), host (required) and port (optional). For example: `https://this.ismyhost:8080`. If omitted, the protocol defaults to HTTPS. If omitted, the port defaults to `80` for HTTP and `443` for HTTPS."
         },
         task: {
           type: "string",
@@ -1178,10 +1241,7 @@ var schema_default = {
         },
         protocol: {
           type: "string",
-          enum: [
-            "http",
-            "https"
-          ],
+          enum: ["http", "https"],
           description: "The protocol to be used for the connection.\n- `http`: Hypertext Transfer Protocol (HTTP).\n- `https`: Secure Hypertext Transfer Protocol (HTTPS).\n\n*"
         },
         port: {
@@ -1195,10 +1255,7 @@ var schema_default = {
       properties: {
         protocol: {
           type: "string",
-          enum: [
-            "http",
-            "https"
-          ],
+          enum: ["http", "https"],
           description: "The protocol to be used for the connection.\n- `http`: Hypertext Transfer Protocol (HTTP).\n- `https`: Secure Hypertext Transfer Protocol (HTTPS).\n\n*"
         },
         host: {
@@ -1210,16 +1267,19 @@ var schema_default = {
           description: "The port number to be used for the connection. Common values include `80` for HTTP and `443` for HTTPS."
         }
       },
-      required: [
-        "host"
-      ],
+      required: ["host"],
       additionalProperties: false
     },
     ChildApplication: {
       type: "object",
       properties: {
         vercel: {
-          $ref: "#/definitions/Vercel"
+          $ref: "#/definitions/Vercel",
+          deprecated: "This is being replaced by the `projectId` field below."
+        },
+        projectId: {
+          type: "string",
+          description: "Vercel project ID"
         },
         development: {
           $ref: "#/definitions/Development"
@@ -1229,12 +1289,11 @@ var schema_default = {
           description: "Groups of path expressions that are routed to this application."
         },
         production: {
-          $ref: "#/definitions/HostConfig"
+          $ref: "#/definitions/HostConfig",
+          deprecated: "This is a duplicate of the `development.fallback` field and this will be removed soon."
         }
       },
-      required: [
-        "routing"
-      ],
+      required: ["routing"],
       additionalProperties: false
     },
     Routing: {
@@ -1261,20 +1320,9 @@ var schema_default = {
           }
         }
       },
-      required: [
-        "paths"
-      ],
+      required: ["paths"],
       additionalProperties: false
     },
-    ApplicationRouting: {
-      type: "object",
-      additionalProperties: {
-        $ref: "#/definitions/Application"
-      },
-      propertyNames: {
-        description: "The unique identifier for a Microfrontend Application. Must match the `name` field of the application's `package.json`."
-      }
-    },
     ChildConfig: {
       type: "object",
       properties: {
@@ -1288,24 +1336,12 @@ var schema_default = {
         options: {
           $ref: "#/definitions/Options"
         },
-        remotes: {
-          type: "object",
-          additionalProperties: {
-            $ref: "#/definitions/Application"
-          },
-          propertyNames: {
-            description: "The unique identifier for a Microfrontend Application. Must match the `name` field of the application's `package.json`."
-          },
-          description: "Applications that only serve a subset of the microfrontend routes only need to reference the name of the primary application that owns the full microfrontends configuration."
-        },
         partOf: {
           type: "string",
           description: "Applications that only serve a subset of the microfrontend routes only need to reference the name of the primary application that owns the full microfrontends configuration."
         }
       },
-      required: [
-        "partOf"
-      ],
+      required: ["partOf"],
       additionalProperties: false
     }
   }
@@ -1315,6 +1351,14 @@ var schema_default = {
 var SCHEMA = schema_default;
 
 // src/config/microfrontends/server/validation.ts
+function filterAjvErrors(errors) {
+  if (!errors) {
+    return [];
+  }
+  return errors.filter((error) => {
+    return error.keyword === "additionalProperties" || error.keyword === "required";
+  });
+}
 function validateSchema(configString) {
   const parsedConfig = (0, import_jsonc_parser3.parse)(configString);
   const ajv = new import_ajv.Ajv();
@@ -1322,7 +1366,10 @@ function validateSchema(configString) {
   const isValid = validate(parsedConfig);
   if (!isValid) {
     throw new MicrofrontendError(
-      `Invalid config: ${ajv.errorsText(validate.errors)}`,
+      `Invalid microfrontends config:
+ - ${ajv.errorsText(filterAjvErrors(validate.errors), { separator: "\n - " })}
+
+See https://openapi.vercel.sh/microfrontends.json for the schema.`,
       { type: "config", subtype: "does_not_match_schema" }
     );
   }
@@ -1462,8 +1509,8 @@ var MicrofrontendsServer = class extends Microfrontends {
       throw new Error("Unable to infer");
     } catch (e) {
       throw new MicrofrontendError(
-        "Unable to infer microfrontends configuration",
-        { type: "config", subtype: "inference_failed" }
+        "Unable to locate and parse microfrontends configuration",
+        { cause: e, type: "config", subtype: "inference_failed" }
       );
     }
   }
@@ -1539,7 +1586,7 @@ var MicrofrontendsServer = class extends Microfrontends {
       const [defaultApplication] = Object.entries(validatedConfig.applications).filter(([, app]) => isDefaultApp(app)).map(([name]) => name);
       if (!defaultApplication) {
         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" }
         );
       }
@@ -1668,12 +1715,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}"`
@@ -1707,9 +1752,11 @@ function getCurrentEnvironment() {
   const isProduction2 = process.env.VERCEL_ENV === "production";
   if (isDevelopment) {
     return { group: "development" };
-  } else if (isProduction2) {
+  }
+  if (isProduction2) {
     return { group: "production" };
-  } else if (isPreview) {
+  }
+  if (isPreview) {
     return { group: "preview" };
   }
   return { group: "custom", name: process.env.VERCEL_ENV };
@@ -1720,10 +1767,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;
     }
@@ -1734,10 +1781,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;
   }
 }
 
@@ -1924,7 +1970,13 @@ function transform5(args) {
           // this deployments host
           ...process.env.VERCEL_URL ? [formatDomainForServerAction(process.env.VERCEL_URL)] : [],
           // default application host
-          formatDomainForServerAction(defaultApplication.production.toString()),
+          formatDomainForServerAction(
+            getDomainFromEnvironment({
+              app: defaultApplication,
+              target: "production"
+            })
+          ),
+          formatDomainForServerAction(defaultApplication.fallback.toString()),
           // environment specific microfrontend hosts
           ...appsToAllow.flatMap((a) => [
             formatDomainForServerAction(