@vercel/microfrontends 1.1.0 → 1.1.1-canary.0

package/dist/next/config.js

@@ -287,10 +287,13 @@ var validateConfigPaths = (applicationConfigsById) => {
     }
   }
   if (errors.length) {
-    throw new MicrofrontendError(`Invalid paths: ${errors.join(", ")}`, {
-      type: "config",
-      subtype: "conflicting_paths"
-    });
+    throw new MicrofrontendError(
+      `Invalid paths: ${errors.join(", ")}. See supported paths in the documentation https://vercel.com/docs/microfrontends/path-routing#supported-path-expressions.`,
+      {
+        type: "config",
+        subtype: "conflicting_paths"
+      }
+    );
   }
 };
 var PATH_DEFAULT_PATTERN = "[^\\/#\\?]+?";
@@ -405,9 +408,40 @@ var validateDeprecatedFields = (config) => {
         `Application '${applicationId}' cannot contain deprecated field 'production'. Use 'development.fallback' instead.`
       );
     }
-    if (application.development?.local) {
+    if (application.development?.localPort) {
+      errors.push(
+        `Application '${applicationId}' cannot contain deprecated field 'development.localPort'. Use 'developement.local' instead.`
+      );
+    }
+    if (application.development?.fallback && typeof application.development.fallback !== "string") {
+      const fallback = application.development.fallback;
+      let asString = fallback.host;
+      if (fallback.protocol) {
+        asString = `${fallback.protocol}://${asString}`;
+      }
+      if (fallback.port) {
+        asString = `${asString}:${fallback.port}`;
+      }
+      errors.push(
+        `Application '${applicationId}' requires a string (not an object) for the 'development.fallback' field. Please set 'development.fallback' to '${asString}'.`
+      );
+    }
+    if (application.development?.local && typeof application.development.local !== "string" && typeof application.development.local !== "number") {
+      const local = application.development.local;
+      let asString;
+      if (local.port && !local.protocol && !local.host) {
+        asString = String(local.port);
+      } else {
+        asString = local.host ?? "localhost";
+        if (local.protocol) {
+          asString = `${local.protocol}://${asString}`;
+        }
+        if (local.port) {
+          asString = `${asString}:${local.port}`;
+        }
+      }
       errors.push(
-        `Application '${applicationId}' cannot contain deprecated field 'development.local'. Use 'developement.localPort' instead.`
+        `Application '${applicationId}' requires a string or number (not an object) for the 'development.local' field. Please set 'development.local' to '${asString}'.`
       );
     }
   }
@@ -471,10 +505,10 @@ var Host = class {
     }
     this.local = options?.isLocal;
   }
-  static parseUrl(url) {
+  static parseUrl(url, defaultProtocol = "https") {
     let hostToParse = url;
     if (!/^https?:\/\//.exec(hostToParse)) {
-      hostToParse = `https://${hostToParse}`;
+      hostToParse = `${defaultProtocol}://${hostToParse}`;
     }
     const parsed = new URL(hostToParse);
     if (!parsed.hostname) {
@@ -527,12 +561,39 @@ var LocalHost = class extends Host {
   constructor({
     appName,
     localPort,
-    ...hostConfig
+    local
   }) {
-    const host = hostConfig.host ?? "localhost";
-    const port = localPort ?? hostConfig.port ?? generatePortFromName({ name: appName });
-    const protocol = hostConfig.protocol ?? "http";
-    super({ protocol, host, port });
+    if (localPort && local) {
+      throw new Error(
+        `Microfrontends configuration error: '${appName}' has both the 'development.local' and 'development.localPort' fields set. Please remove the 'development.localPort' field and ensure the 'development.local' field has the correct port.`
+      );
+    }
+    let protocol;
+    let host;
+    let port;
+    if (localPort) {
+      port = localPort;
+    } else if (typeof local === "number") {
+      port = local;
+    } else if (typeof local === "string") {
+      if (/^\d+$/.test(local)) {
+        port = Number.parseInt(local);
+      } else {
+        const parsed = Host.parseUrl(local, "http");
+        protocol = parsed.protocol;
+        host = parsed.host;
+        port = parsed.port;
+      }
+    } else if (local) {
+      protocol = local.protocol;
+      host = local.host;
+      port = local.port;
+    }
+    super({
+      protocol: protocol ?? "http",
+      host: host ?? "localhost",
+      port: port ?? generatePortFromName({ name: appName })
+    });
   }
 };
 
@@ -548,7 +609,7 @@ var Application = class {
       local: new LocalHost({
         appName: name,
         localPort: app.development?.localPort,
-        ...app.development?.local
+        local: app.development?.local
       }),
       fallback: app.development?.fallback ? new Host(app.development.fallback) : void 0
     };
@@ -558,6 +619,7 @@ var Application = class {
       this.fallback = new Host(app.production);
     }
     this.projectId = app.projectId ?? app.vercel?.projectId;
+    this.packageName = app.packageName;
     this.overrides = overrides?.environment ? {
       environment: new Host(overrides.environment)
     } : void 0;
@@ -723,10 +785,12 @@ var MicrofrontendConfigIsomorphic = class {
     ].filter(Boolean);
   }
   getApplication(name) {
-    if (this.defaultApplication?.name === name) {
+    if (this.defaultApplication?.name === name || this.defaultApplication?.packageName === name) {
       return this.defaultApplication;
     }
-    const app = this.childApplications[name];
+    const app = this.childApplications[name] || Object.values(this.childApplications).find(
+      (child) => child.packageName === name
+    );
     if (!app) {
       throw new MicrofrontendError(
         `Could not find microfrontends configuration for application "${name}"`,
@@ -1228,7 +1292,7 @@ var schema_default = {
         $ref: "#/definitions/Application"
       },
       propertyNames: {
-        description: "The unique identifier for a Microfrontend Application. Must match the `name` field of the application's `package.json`."
+        description: "The unique identifier for a Microfrontend Application.\n\nMust match the Vercel project name.\n\nNote: If this name does not also match the name used to run the application, (e.g. the `name` from the `package.json`), then the `packageName` field should be set."
       }
     },
     Application: {
@@ -1250,7 +1314,12 @@ var schema_default = {
         },
         projectId: {
           type: "string",
-          description: "Vercel project ID"
+          description: "Vercel project ID, only required if the application name / id is different to the Vercel project name.",
+          deprecated: "Instead, the application id should match the Vercel project name."
+        },
+        packageName: {
+          type: "string",
+          description: "The name used to run the application, e.g. the `name` field in the `package.json`.\n\nThis is used by the local proxy to map the application config to the locally running app.\n\nThis is only necessary when the application name does not match the `name` used in `package.json`."
         },
         production: {
           $ref: "#/definitions/HostConfig",
@@ -1297,12 +1366,23 @@ var schema_default = {
       type: "object",
       properties: {
         local: {
-          $ref: "#/definitions/LocalHostConfig",
-          deprecated: "This is being replaced by the `localPort` field below."
+          anyOf: [
+            {
+              type: "number"
+            },
+            {
+              type: "string"
+            },
+            {
+              $ref: "#/definitions/LocalHostConfig"
+            }
+          ],
+          description: "A local port number or host string that this application runs on when it is running locally. If passing a string, include the protocol (optional), host (required) and port (optional). For example: `https://this.ismyhost:8080`. If omitted, the protocol defaults to HTTP. If omitted, the port defaults to a unique, but stable (based on the application name) number.\n\nExamples of valid values:\n- 8080\n- my.localhost.me\n- my.localhost.me:8080\n- https://my.localhost.me\n- https://my.localhost.me:8080\n\nPassing a LocalHostConfig is deprecated and will go away soon, please pass a number or string."
         },
         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."
+          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. If omitted, the port defaults to a unique, but stable (based on the application name) number.",
+          deprecated: "Please set the port with the 'local' field instead."
         },
         fallback: {
           anyOf: [
@@ -1313,7 +1393,7 @@ var schema_default = {
               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."
+          description: "Fallback for local development, could point 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.\n\nPassing a HostConfig is deprecated and will go away soon, please pass a string."
         },
         task: {
           type: "string",
@@ -1350,7 +1430,12 @@ var schema_default = {
         },
         projectId: {
           type: "string",
-          description: "Vercel project ID"
+          description: "Vercel project ID, only required if the application name / id is different to the Vercel project name.",
+          deprecated: "Instead, the application id should match the Vercel project name."
+        },
+        packageName: {
+          type: "string",
+          description: "The name used to run the application, e.g. the `name` field in the `package.json`.\n\nThis is used by the local proxy to map the application config to the locally running app.\n\nThis is only necessary when the application name does not match the `name` used in `package.json`."
         },
         production: {
           $ref: "#/definitions/HostConfig",
@@ -1754,6 +1839,17 @@ function transform4(args) {
     } else {
       next.redirects = async () => proxyRedirects;
     }
+    if (process.env.MFE_DEBUG) {
+      const indent = " ".repeat(4);
+      const header = "redirects";
+      const separator = "\u23AF".repeat(header.length);
+      console.log(
+        `${indent}${header}
+${indent}${separator}
+${indent} - Automatically redirecting all requests to local microfrontends proxy
+`
+      );
+    }
   }
   return { next };
 }
@@ -1769,13 +1865,12 @@ function getDomainFromEnvironment({
   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);
+  const vercelProject = mfeProjects.find(
+    (p) => p.project.name === app.name || p.project.id === app.projectId
+  );
   if (!vercelProject) {
     throw new Error(
-      `Missing related microfrontends project information for application "${app.name}"`
+      `Could not find the Vercel project for application "${app.name}". If the name does not match the Vercel project name, set the \`projectId\` field in the application config.`
     );
   }
   const domain = target === "preview" && vercelProject.preview.branch ? vercelProject.preview.branch : vercelProject.production.alias ?? vercelProject.production.url;
@@ -1843,7 +1938,7 @@ function getDomainForCurrentEnvironment(config, appName, opts = {}) {
 
 // src/next/config/transforms/rewrites.ts
 function debugRewrites(rewrites) {
-  if (process.env.MFE_DEBUG === "true" || process.env.MFE_DEBUG === "1") {
+  if (process.env.MFE_DEBUG) {
     const indent = " ".repeat(4);
     const header = "rewrites (source \u2192 destination)";
     const separator = "\u23AF".repeat(header.length);
@@ -2099,7 +2194,7 @@ var transforms = {
 
 // src/next/config/env.ts
 function debugEnv(env) {
-  if (process.env.MFE_DEBUG === "true") {
+  if (process.env.MFE_DEBUG) {
     const indent = " ".repeat(4);
     const header = "env (key \u2192 val)";
     const separator = "\u23AF".repeat(header.length);