npm - @vercel/microfrontends - Versions diffs - 2.1.0 → 2.1.2 - Mend

@vercel/microfrontends 2.1.0 → 2.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,19 @@
 # @vercel/microfrontends
+## 2.1.2
+### Patch Changes
+- 0606811: Fix local Next.js Image Optimization
+## 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

package/dist/bin/cli.cjs CHANGED Viewed

@@ -30,7 +30,7 @@ var import_env = require("@next/env");
 // package.json
 var package_default = {
   name: "@vercel/microfrontends",
-  version: "2.1.0",
+  version: "2.1.2",
   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();
@@ -1840,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>
@@ -1887,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
 		  }
@@ -1942,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 {
@@ -1974,7 +2005,7 @@ var localAuthHtml = ({
 			padding: 2rem;
 			display: flex;
 			flex-direction: column;
-			margin-bottom: 32px
+			margin: 0px;
 		  }
 		  .error-code {
@@ -2121,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>
@@ -2567,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,
@@ -2574,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
@@ -2590,7 +2642,8 @@ var LocalProxy = class {
               hostname,
               defaultApp: defaultApp.packageName || defaultApp.name,
               automationBypassEnvVarName: app.getAutomationBypassEnvVarName(),
-              automationBypass
+              automationBypass,
+              override: cookies[overrideCookieName]
             })
           );
         }

package/dist/next/config.cjs CHANGED Viewed

@@ -1694,16 +1694,19 @@ function routeToLocalProxy() {
 // src/next/config/transforms/redirects.ts
 function transform4(args) {
-  const { next, microfrontend, opts } = args;
+  const { next, microfrontend, opts, app } = args;
   const isProduction2 = opts?.isProduction ?? false;
   const requireLocalProxyHeader = routeToLocalProxy() && !isProduction2 && !process.env.MFE_DISABLE_LOCAL_PROXY_REWRITE;
   if (requireLocalProxyHeader) {
+    const assetPrefix = app.getAssetPrefix();
     const proxyRedirects = [
       {
-        source: "/:path*",
+        source: `/((?!${assetPrefix ? `${assetPrefix}/` : ""}_next/static).*)`,
         destination: `http://localhost:${microfrontend.getLocalProxyPort()}/:path*`,
         permanent: false,
-        missing: [{ type: "header", key: "x-vercel-mfe-local-proxy-origin" }]
+        missing: [
+          { type: "header", key: "x-vercel-mfe-local-proxy-origin" }
+        ]
       }
     ];
     if (next.redirects && typeof next.redirects === "function") {