@vercel/microfrontends 0.18.0 → 0.19.1

package/dist/bin/cli.cjs

@@ -29,7 +29,7 @@ var import_commander = require("commander");
 // package.json
 var package_default = {
   name: "@vercel/microfrontends",
-  version: "0.18.0",
+  version: "0.19.1",
   private: false,
   description: "Defines configuration and utilities for microfrontends development",
   keywords: [
@@ -337,7 +337,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 path6 of pathMatch.paths) {
         const maybeError = validatePathExpression(path6);
         if (maybeError) {
@@ -357,33 +358,31 @@ var validateConfigPaths = (applicationConfigsById) => {
     }
   }
   const entries = Array.from(pathsByApplicationId.entries());
-  entries.forEach(([path6, { applications: ids, matcher, applicationId }]) => {
+  for (const [path6, { applications: ids, matcher, applicationId }] of entries) {
     if (ids.length > 1) {
       errors.push(
         `Duplicate path "${path6}" for applications "${ids.join(", ")}"`
       );
     }
-    entries.forEach(
-      ([
-        matchPath,
-        { applications: matchIds, applicationId: matchApplicationId }
-      ]) => {
-        if (path6 === matchPath) {
-          return;
-        }
-        if (applicationId === matchApplicationId) {
-          return;
-        }
-        if (matcher.test(matchPath)) {
-          const source = `"${path6}" 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 (path6 === matchPath) {
+        continue;
       }
-    );
-  });
+      if (applicationId === matchApplicationId) {
+        continue;
+      }
+      if (matcher.test(matchPath)) {
+        const source = `"${path6}" 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",
@@ -452,7 +451,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" }
     );
   }
@@ -498,47 +497,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")
+      );
     }
-    return port;
+    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}.`;
+  }
+  isLocal() {
+    return this.local || this.host === "localhost" || this.host === "127.0.0.1";
   }
-  toString(opts = {}) {
-    const url = this.toUrl(opts);
+  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 });
   }
@@ -555,12 +587,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;
@@ -588,7 +625,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 "";
@@ -777,7 +823,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"
@@ -853,11 +899,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
     );
   }
   /**
@@ -867,7 +913,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"
@@ -880,7 +926,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.
@@ -941,7 +987,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"
@@ -1263,11 +1309,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
@@ -1315,13 +1371,19 @@ 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"],
@@ -1342,11 +1404,23 @@ var schema_default = {
       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",
@@ -1398,7 +1472,12 @@ 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"
@@ -1408,7 +1487,8 @@ 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"],
@@ -1704,7 +1784,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" }
         );
       }
@@ -1742,13 +1822,13 @@ var ProxyRequestRouter = class {
   getApplicationTarget(application) {
     const useDev = this.localApps.includes(application.name);
     let applicationName = application.name;
-    let host = useDev ? application.development.local : application.production;
+    let host = useDev ? application.development.local : application.fallback;
     if (application.overrides?.environment?.host) {
       host = application.overrides.environment;
     }
     if (!host) {
       const defaultApp = this.config.getDefaultApplication();
-      host = defaultApp.production;
+      host = defaultApp.fallback;
       applicationName = defaultApp.name;
     }
     const protocol = host.protocol;
@@ -2089,7 +2169,7 @@ function loadConfig({
     return void 0;
   }
   const app = config.config.getApplication(appName);
-  const port = app.development.local.port;
+  const port = app.development.local.port ?? (app.development.local.protocol === "https" ? 443 : 80);
   return { port };
 }
 

package/dist/config.cjs

@@ -250,7 +250,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) {
@@ -270,33 +271,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",
@@ -365,7 +364,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" }
     );
   }
@@ -411,47 +410,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"));
+    }
+    if (parsed.search) {
+      throw new Error(
+        Host.getMicrofrontendsError(url, "cannot have query parameters")
+      );
     }
-    return port;
+    const protocol = parsed.protocol.slice(0, -1);
+    return {
+      protocol,
+      host: parsed.hostname,
+      port: parsed.port ? Number.parseInt(parsed.port) : void 0
+    };
+  }
+  static getMicrofrontendsError(url, message) {
+    return `Microfrontends configuration error: the URL ${url} in your microfrontends.json ${message}.`;
   }
-  isDefaultPort() {
-    return this.port === Host.getPort({ protocol: this.protocol });
+  isLocal() {
+    return this.local || this.host === "localhost" || this.host === "127.0.0.1";
   }
-  toString(opts = {}) {
-    const url = this.toUrl(opts);
+  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 });
   }
@@ -468,12 +500,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;
@@ -501,7 +538,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 "";
@@ -571,7 +617,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"
@@ -647,11 +693,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
     );
   }
   /**
@@ -661,7 +707,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"
@@ -674,7 +720,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.