@vercel/microfrontends 2.0.1 → 2.1.1

package/CHANGELOG.md

@@ -1,10 +1,26 @@
 # @vercel/microfrontends
 
+## 2.1.1
+
+### Patch Changes
+
+- 96f0ea5:  
+  - Add support for locally overriding to MFE aliases: https://vercel.com/changelog/preview-links-between-microfrontends-projects-now-serve-all-paths
+  - Fix local Next.js image optimization. Next.js released a security fix which removes headers from being passed on image optimization requests. The microfrontends local proxy previously relied on the headers being passed.
+
+## 2.1.0
+
+### Minor Changes
+
+- c856a5d:
+  - Add support for custom `microfrontends.json` file names. This enables a single application to be deployed as multiple different vercel projects / microfrontends.
+  - Strip asset prefix from Vercel Firewall rate limit paths. Support Vercel Firewall rate limit requests when they go to a child application.
+
 ## 2.0.1
 
 ### Patch Changes
 
-- 8c11bdc: 
+- 8c11bdc:
   - Support hyphens and escaped special characters in supported path matching regex https://vercel.com/docs/microfrontends/path-routing#supported-path-expressions
   - Improve error message for when local development proxy can't determine the port
   - Update local proxy double slash routing behaviour to match the production proxy

package/README.md

@@ -1,8 +1,4 @@
-<picture>
-  <source srcset="https://assets.vercel.com/image/upload/v1689795055/docs-assets/static/docs/microfrontends/mfe-package-banner-dark.png" media="(prefers-color-scheme: dark)">
-  <source srcset="https://assets.vercel.com/image/upload/v1689795055/docs-assets/static/docs/microfrontends/mfe-package-banner-light.png" media="(prefers-color-scheme: light)">
-  <img src="https://assets.vercel.com/image/upload/v1689795055/docs-assets/static/docs/microfrontends/mfe-package-banner-dark.png" alt="hero banner">
-</picture>
+![hero banner](./assets/mfe-package-banner-dark.png)
 
 # @vercel/microfrontends
 

package/dist/bin/cli.cjs

@@ -30,7 +30,7 @@ var import_env = require("@next/env");
 // package.json
 var package_default = {
   name: "@vercel/microfrontends",
-  version: "2.0.1",
+  version: "2.1.1",
   private: false,
   description: "Defines configuration and utilities for microfrontends development",
   keywords: [
@@ -397,6 +397,11 @@ function parseOverrides(cookies) {
   return overridesConfig;
 }
 
+// src/config/overrides/get-app-env-override-cookie-name.ts
+function getAppEnvOverrideCookieName(application) {
+  return `${OVERRIDES_ENV_COOKIE_PREFIX}${application}`;
+}
+
 // src/config/microfrontends-config/client/index.ts
 var import_path_to_regexp = require("path-to-regexp");
 var regexpCache = /* @__PURE__ */ new Map();
@@ -1112,22 +1117,38 @@ var import_node_fs2 = require("fs");
 var import_jsonc_parser2 = require("jsonc-parser");
 var import_fast_glob = __toESM(require("fast-glob"), 1);
 
-// src/config/constants.ts
-var CONFIGURATION_FILENAMES = [
+// src/config/microfrontends/utils/get-config-file-name.ts
+var DEFAULT_CONFIGURATION_FILENAMES = [
   "microfrontends.jsonc",
   "microfrontends.json"
 ];
+function getPossibleConfigurationFilenames({
+  customConfigFilename
+}) {
+  if (customConfigFilename) {
+    if (!customConfigFilename.endsWith(".json") && !customConfigFilename.endsWith(".jsonc")) {
+      throw new Error(
+        `The VC_MICROFRONTENDS_CONFIG_FILE_NAME environment variable must end with '.json' or '.jsonc'. Received: ${customConfigFilename}`
+      );
+    }
+    return Array.from(
+      /* @__PURE__ */ new Set([customConfigFilename, ...DEFAULT_CONFIGURATION_FILENAMES])
+    );
+  }
+  return DEFAULT_CONFIGURATION_FILENAMES;
+}
 
 // src/config/microfrontends/utils/infer-microfrontends-location.ts
 var configCache = {};
 function findPackageWithMicrofrontendsConfig({
   repositoryRoot,
-  applicationContext
+  applicationContext,
+  customConfigFilename
 }) {
   const applicationName = applicationContext.name;
   try {
     const microfrontendsJsonPaths = import_fast_glob.default.globSync(
-      `**/{${CONFIGURATION_FILENAMES.join(",")}}`,
+      `**/{${getPossibleConfigurationFilenames({ customConfigFilename }).join(",")}}`,
       {
         cwd: repositoryRoot,
         absolute: true,
@@ -1183,6 +1204,8 @@ Names of applications in \`microfrontends.json\` must match the Vercel Project n
 
 If your Vercel Microfrontends configuration is not in this repository, you can use the Vercel CLI to pull the Vercel Microfrontends configuration using the "vercel microfrontends pull" command, or you can specify the path manually using the VC_MICROFRONTENDS_CONFIG environment variable.
 
+If your Vercel Microfrontends configuration has a custom name, ensure the VC_MICROFRONTENDS_CONFIG_FILE_NAME environment variable is set, you can pull the vercel project environment variables using the "vercel env pull" command.
+
 If you suspect this is thrown in error, please reach out to the Vercel team.`,
         { type: "config", subtype: "inference_failed" }
       );
@@ -1197,7 +1220,7 @@ If you suspect this is thrown in error, please reach out to the Vercel team.`,
   }
 }
 function inferMicrofrontendsLocation(opts) {
-  const cacheKey = `${opts.repositoryRoot}-${opts.applicationContext.name}`;
+  const cacheKey = `${opts.repositoryRoot}-${opts.applicationContext.name}${opts.customConfigFilename ? `-${opts.customConfigFilename}` : ""}`;
   if (configCache[cacheKey]) {
     return configCache[cacheKey];
   }
@@ -1263,8 +1286,13 @@ function findPackageRoot(startDir) {
 // src/config/microfrontends/utils/find-config.ts
 var import_node_fs5 = __toESM(require("fs"), 1);
 var import_node_path5 = require("path");
-function findConfig({ dir }) {
-  for (const filename of CONFIGURATION_FILENAMES) {
+function findConfig({
+  dir,
+  customConfigFilename
+}) {
+  for (const filename of getPossibleConfigurationFilenames({
+    customConfigFilename
+  })) {
     const maybeConfig = (0, import_node_path5.join)(dir, filename);
     if (import_node_fs5.default.existsSync(maybeConfig)) {
       return maybeConfig;
@@ -1696,7 +1724,11 @@ var MicrofrontendsServer = class {
         appName,
         packageRoot
       });
-      const maybeConfig = findConfig({ dir: packageRoot });
+      const customConfigFilename = process.env.VC_MICROFRONTENDS_CONFIG_FILE_NAME;
+      const maybeConfig = findConfig({
+        dir: packageRoot,
+        customConfigFilename
+      });
       if (maybeConfig) {
         return MicrofrontendsServer.fromFile({
           filePath: maybeConfig,
@@ -1705,11 +1737,9 @@ var MicrofrontendsServer = class {
       }
       const repositoryRoot = findRepositoryRoot();
       const isMonorepo2 = isMonorepo({ repositoryRoot });
-      if (typeof process.env.VC_MICROFRONTENDS_CONFIG === "string") {
-        const maybeConfigFromEnv = (0, import_node_path8.resolve)(
-          packageRoot,
-          process.env.VC_MICROFRONTENDS_CONFIG
-        );
+      const configFromEnv = process.env.VC_MICROFRONTENDS_CONFIG;
+      if (typeof configFromEnv === "string") {
+        const maybeConfigFromEnv = (0, import_node_path8.resolve)(packageRoot, configFromEnv);
         if (maybeConfigFromEnv) {
           return MicrofrontendsServer.fromFile({
             filePath: maybeConfigFromEnv,
@@ -1718,7 +1748,8 @@ var MicrofrontendsServer = class {
         }
       } else {
         const maybeConfigFromVercel = findConfig({
-          dir: (0, import_node_path8.join)(packageRoot, ".vercel")
+          dir: (0, import_node_path8.join)(packageRoot, ".vercel"),
+          customConfigFilename
         });
         if (maybeConfigFromVercel) {
           return MicrofrontendsServer.fromFile({
@@ -1729,9 +1760,13 @@ var MicrofrontendsServer = class {
         if (isMonorepo2) {
           const defaultPackage = inferMicrofrontendsLocation({
             repositoryRoot,
-            applicationContext
+            applicationContext,
+            customConfigFilename
+          });
+          const maybeConfigFromDefault = findConfig({
+            dir: defaultPackage,
+            customConfigFilename
           });
-          const maybeConfigFromDefault = findConfig({ dir: defaultPackage });
           if (maybeConfigFromDefault) {
             return MicrofrontendsServer.fromFile({
               filePath: maybeConfigFromDefault,
@@ -1810,9 +1845,12 @@ var localAuthHtml = ({
   hostname,
   defaultApp,
   automationBypassEnvVarName,
-  automationBypass
+  automationBypass,
+  override
 }) => {
+  const intro = override ? `<b><code>${app}</code></b> is overriding to a protected deployment <a target="_blank" href="https://${override}">${override}</a>.` : `<b><code>${app}</code></b> is falling back to a protected deployment <a target="_blank" href="https://${hostname}">${hostname}</a>.`;
   const content = automationBypass ? `<b><code>${automationBypassEnvVarName}</code></b> is set with the value <b><code>${automationBypass}</code></b>, please verify this value equals the <a href="https://vercel.com/docs/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation">Protection Bypass for Automation</a> for the Vercel project hosting the deployment.` : `To access, set a local environment variable <b><code>${automationBypassEnvVarName}</code></b> with the value of the <a href="https://vercel.com/docs/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation">Protection Bypass for Automation</a> for the Vercel project hosting the deployment.`;
+  const action = override ? `<buttton onClick="clearOverride()" class="button">Clear Override</button>` : "";
   return `<!DOCTYPE html>
 	<html lang="en">
 	  <head>
@@ -1857,12 +1895,32 @@ var localAuthHtml = ({
 		  ::-moz-selection {
 			background: #79FFE1;
 		  }
+
+		  .button {
+		    border: 1px solid black;
+		    padding: 10px 20px;
+		    text-align: center;
+		    text-decoration: none;
+		    display: inline-block;
+		    font-size: 16px;
+		    margin: 4px 2px;
+		    cursor: pointer;
+			border-radius: 5px;
+			align-self: flex-end;
+			font-size: 14px;
+			line-height: 1.8;
+		  }	
+
+		  .button:hover {
+		    background-color: #ddd;
+		  }
 	
 		  a {
 			cursor: pointer;
 			color: #0070f3;
 			text-decoration: none;
 			transition: all .2s ease;
+			border-radius: 5px;
 			border-bottom: 1px solid transparent
 		  }
 	
@@ -1912,7 +1970,10 @@ var localAuthHtml = ({
 		  main {
 			max-width: 80rem;
 			padding: 4rem 6rem;
-			margin: auto
+			margin: auto;
+			display: flex;
+			flex-direction: column;
+			row-gap: 32px;
 		  }
 	
 		  ul {
@@ -1944,7 +2005,7 @@ var localAuthHtml = ({
 			padding: 2rem;
 			display: flex;
 			flex-direction: column;
-			margin-bottom: 32px
+			margin: 0px;
 		  }
 	
 		  .error-code {
@@ -2091,18 +2152,26 @@ var localAuthHtml = ({
 		  }
 		</style>
 	  </head>
+	  <script>
+		  function clearOverride() {
+			document.cookie = 'vercel-micro-frontends-override:env:${app}=; expires=Thu, 01 Jan 1970 00:00:00 GMT';
+			window.location.reload();
+		  }
+	  </script>
 	  <body>
 		<div class="container">
 		  <main>
 			<p class="devinfo-container">
-			  <span><b><code>${app}</code></b> is falling back to a protected deployment <a target="_blank" href="https://${hostname}">${hostname}</a>.</span>
-        <br>
-        <span>${content}</span>
-        <br>
-        <span>The environment variable should be set in the default app <b><code>${defaultApp}</code></b>, where the local proxy is running.</span>
+			  	<span>${intro}</span>
+				<br/>
+				<span>${content}</span>
+				<br/>
+				<span>The environment variable should be set in the default app <b><code>${defaultApp}</code></b>, where the local proxy is running.</span>
 			</p>
 		
 			<a href="https://vercel.com/docs/microfrontends/local-development#falling-back-to-protected-deployments"><div class="note">Click here to learn more about setting up the environment variable.</div></a>
+		
+			${action}
 		  </main>	
 		</div>
 	  </body>
@@ -2537,6 +2606,10 @@ var LocalProxy = class {
       const { hostname, port, path: path7 } = target;
       const app = this.router.config.getApplication(target.application);
       const automationBypass = process.env[app.getAutomationBypassEnvVarName()];
+      const cookies = (0, import_cookie.parse)(req.headers.cookie || "");
+      const overrideCookieName = getAppEnvOverrideCookieName(
+        target.application
+      );
       const requestOptions = {
         hostname,
         path: path7,
@@ -2544,6 +2617,15 @@ var LocalProxy = class {
         headers: {
           ...req.headers,
           host: hostname,
+          cookie: Object.entries(cookies).reduce((acc, [name, value]) => {
+            if (value && // strip the override cookie if present, as this causes an auth redirect. The
+            // override is handled by the local proxy.
+            name !== overrideCookieName && // strip the VERCEL_MFE_DEBUG cookie if present, as this causes an auth redirect
+            name !== "VERCEL_MFE_DEBUG") {
+              acc.push((0, import_cookie.serialize)(name, value));
+            }
+            return acc;
+          }, []).join("; "),
           ...automationBypass ? { "x-vercel-protection-bypass": automationBypass } : {}
         },
         port
@@ -2560,7 +2642,8 @@ var LocalProxy = class {
               hostname,
               defaultApp: defaultApp.packageName || defaultApp.name,
               automationBypassEnvVarName: app.getAutomationBypassEnvVarName(),
-              automationBypass
+              automationBypass,
+              override: cookies[overrideCookieName]
             })
           );
         }

package/dist/experimental/sveltekit.cjs

@@ -232,22 +232,38 @@ var import_node_fs2 = require("fs");
 var import_jsonc_parser = require("jsonc-parser");
 var import_fast_glob = __toESM(require("fast-glob"), 1);
 
-// src/config/constants.ts
-var CONFIGURATION_FILENAMES = [
+// src/config/microfrontends/utils/get-config-file-name.ts
+var DEFAULT_CONFIGURATION_FILENAMES = [
   "microfrontends.jsonc",
   "microfrontends.json"
 ];
+function getPossibleConfigurationFilenames({
+  customConfigFilename
+}) {
+  if (customConfigFilename) {
+    if (!customConfigFilename.endsWith(".json") && !customConfigFilename.endsWith(".jsonc")) {
+      throw new Error(
+        `The VC_MICROFRONTENDS_CONFIG_FILE_NAME environment variable must end with '.json' or '.jsonc'. Received: ${customConfigFilename}`
+      );
+    }
+    return Array.from(
+      /* @__PURE__ */ new Set([customConfigFilename, ...DEFAULT_CONFIGURATION_FILENAMES])
+    );
+  }
+  return DEFAULT_CONFIGURATION_FILENAMES;
+}
 
 // src/config/microfrontends/utils/infer-microfrontends-location.ts
 var configCache = {};
 function findPackageWithMicrofrontendsConfig({
   repositoryRoot,
-  applicationContext
+  applicationContext,
+  customConfigFilename
 }) {
   const applicationName = applicationContext.name;
   try {
     const microfrontendsJsonPaths = import_fast_glob.default.globSync(
-      `**/{${CONFIGURATION_FILENAMES.join(",")}}`,
+      `**/{${getPossibleConfigurationFilenames({ customConfigFilename }).join(",")}}`,
       {
         cwd: repositoryRoot,
         absolute: true,
@@ -303,6 +319,8 @@ Names of applications in \`microfrontends.json\` must match the Vercel Project n
 
 If your Vercel Microfrontends configuration is not in this repository, you can use the Vercel CLI to pull the Vercel Microfrontends configuration using the "vercel microfrontends pull" command, or you can specify the path manually using the VC_MICROFRONTENDS_CONFIG environment variable.
 
+If your Vercel Microfrontends configuration has a custom name, ensure the VC_MICROFRONTENDS_CONFIG_FILE_NAME environment variable is set, you can pull the vercel project environment variables using the "vercel env pull" command.
+
 If you suspect this is thrown in error, please reach out to the Vercel team.`,
         { type: "config", subtype: "inference_failed" }
       );
@@ -317,7 +335,7 @@ If you suspect this is thrown in error, please reach out to the Vercel team.`,
   }
 }
 function inferMicrofrontendsLocation(opts) {
-  const cacheKey = `${opts.repositoryRoot}-${opts.applicationContext.name}`;
+  const cacheKey = `${opts.repositoryRoot}-${opts.applicationContext.name}${opts.customConfigFilename ? `-${opts.customConfigFilename}` : ""}`;
   if (configCache[cacheKey]) {
     return configCache[cacheKey];
   }
@@ -383,8 +401,13 @@ function findPackageRoot(startDir) {
 // src/config/microfrontends/utils/find-config.ts
 var import_node_fs5 = __toESM(require("fs"), 1);
 var import_node_path5 = require("path");
-function findConfig({ dir }) {
-  for (const filename of CONFIGURATION_FILENAMES) {
+function findConfig({
+  dir,
+  customConfigFilename
+}) {
+  for (const filename of getPossibleConfigurationFilenames({
+    customConfigFilename
+  })) {
     const maybeConfig = (0, import_node_path5.join)(dir, filename);
     if (import_node_fs5.default.existsSync(maybeConfig)) {
       return maybeConfig;
@@ -1487,7 +1510,11 @@ var MicrofrontendsServer = class {
         appName,
         packageRoot
       });
-      const maybeConfig = findConfig({ dir: packageRoot });
+      const customConfigFilename = process.env.VC_MICROFRONTENDS_CONFIG_FILE_NAME;
+      const maybeConfig = findConfig({
+        dir: packageRoot,
+        customConfigFilename
+      });
       if (maybeConfig) {
         return MicrofrontendsServer.fromFile({
           filePath: maybeConfig,
@@ -1496,11 +1523,9 @@ var MicrofrontendsServer = class {
       }
       const repositoryRoot = findRepositoryRoot();
       const isMonorepo2 = isMonorepo({ repositoryRoot });
-      if (typeof process.env.VC_MICROFRONTENDS_CONFIG === "string") {
-        const maybeConfigFromEnv = (0, import_node_path8.resolve)(
-          packageRoot,
-          process.env.VC_MICROFRONTENDS_CONFIG
-        );
+      const configFromEnv = process.env.VC_MICROFRONTENDS_CONFIG;
+      if (typeof configFromEnv === "string") {
+        const maybeConfigFromEnv = (0, import_node_path8.resolve)(packageRoot, configFromEnv);
         if (maybeConfigFromEnv) {
           return MicrofrontendsServer.fromFile({
             filePath: maybeConfigFromEnv,
@@ -1509,7 +1534,8 @@ var MicrofrontendsServer = class {
         }
       } else {
         const maybeConfigFromVercel = findConfig({
-          dir: (0, import_node_path8.join)(packageRoot, ".vercel")
+          dir: (0, import_node_path8.join)(packageRoot, ".vercel"),
+          customConfigFilename
         });
         if (maybeConfigFromVercel) {
           return MicrofrontendsServer.fromFile({
@@ -1520,9 +1546,13 @@ var MicrofrontendsServer = class {
         if (isMonorepo2) {
           const defaultPackage = inferMicrofrontendsLocation({
             repositoryRoot,
-            applicationContext
+            applicationContext,
+            customConfigFilename
+          });
+          const maybeConfigFromDefault = findConfig({
+            dir: defaultPackage,
+            customConfigFilename
           });
-          const maybeConfigFromDefault = findConfig({ dir: defaultPackage });
           if (maybeConfigFromDefault) {
             return MicrofrontendsServer.fromFile({
               filePath: maybeConfigFromDefault,