@vercel/microfrontends 1.0.1-canary.0 → 1.0.1-canary.2

package/dist/bin/cli.cjs

@@ -29,7 +29,7 @@ var import_commander = require("commander");
 // package.json
 var package_default = {
   name: "@vercel/microfrontends",
-  version: "1.0.1-canary.0",
+  version: "1.0.1-canary.2",
   private: false,
   description: "Defines configuration and utilities for microfrontends development",
   keywords: [
@@ -54,6 +54,14 @@ var package_default = {
       import: "./dist/config.js",
       require: "./dist/config.cjs"
     },
+    "./experimental/sveltekit": {
+      import: "./dist/experimental/sveltekit.js",
+      require: "./dist/experimental/sveltekit.cjs"
+    },
+    "./experimental/vite": {
+      import: "./dist/experimental/vite.js",
+      require: "./dist/experimental/vite.cjs"
+    },
     "./microfrontends": {
       import: "./dist/microfrontends.js",
       require: "./dist/microfrontends.cjs"
@@ -94,10 +102,6 @@ var package_default = {
       import: "./dist/next/testing.js",
       require: "./dist/next/testing.cjs"
     },
-    "./sveltekit": {
-      import: "./dist/sveltekit.js",
-      require: "./dist/sveltekit.cjs"
-    },
     "./next/client": {
       import: "./dist/next/client.js",
       require: "./dist/next/client.cjs"
@@ -115,6 +119,12 @@ var package_default = {
       config: [
         "./dist/config.d.ts"
       ],
+      "experimental/sveltekit": [
+        "./dist/experimental/sveltekit.d.ts"
+      ],
+      "experimental/vite": [
+        "./dist/experimental/vite.d.ts"
+      ],
       microfrontends: [
         "./dist/microfrontends.d.ts"
       ],
@@ -145,9 +155,6 @@ var package_default = {
       "next/testing": [
         "./dist/next/testing.d.ts"
       ],
-      sveltekit: [
-        "./dist/sveltekit.d.ts"
-      ],
       "next/client": [
         "./dist/next/client.d.ts"
       ],
@@ -182,6 +189,7 @@ var package_default = {
     "fast-glob": "^3.3.2",
     "http-proxy": "^1.18.1",
     "jsonc-parser": "^3.3.1",
+    nanoid: "^5.1.2",
     "path-to-regexp": "6.2.1"
   },
   devDependencies: {
@@ -208,6 +216,7 @@ var package_default = {
     tsup: "^6.6.2",
     tsx: "^4.6.2",
     typescript: "5.7.3",
+    vite: "^5.1.6",
     webpack: "5"
   },
   peerDependencies: {
@@ -216,7 +225,8 @@ var package_default = {
     "@vercel/speed-insights": ">=1.2.0",
     next: ">=13",
     react: ">=17.0.0",
-    "react-dom": ">=17.0.0"
+    "react-dom": ">=17.0.0",
+    vite: ">=5"
   },
   peerDependenciesMeta: {
     "@sveltejs/kit": {
@@ -236,6 +246,9 @@ var package_default = {
     },
     "react-dom": {
       optional: true
+    },
+    vite: {
+      optional: true
     }
   }
 };
@@ -363,16 +376,17 @@ var validateConfigPaths = (applicationConfigsById) => {
         const maybeError = validatePathExpression(path6);
         if (maybeError) {
           errors.push(maybeError);
-        }
-        const existing = pathsByApplicationId.get(path6);
-        if (existing) {
-          existing.applications.push(id);
         } else {
-          pathsByApplicationId.set(path6, {
-            applications: [id],
-            matcher: (0, import_path_to_regexp.pathToRegexp)(path6),
-            applicationId: id
-          });
+          const existing = pathsByApplicationId.get(path6);
+          if (existing) {
+            existing.applications.push(id);
+          } else {
+            pathsByApplicationId.set(path6, {
+              applications: [id],
+              matcher: (0, import_path_to_regexp.pathToRegexp)(path6),
+              applicationId: id
+            });
+          }
         }
       }
     }
@@ -412,26 +426,38 @@ var validateConfigPaths = (applicationConfigsById) => {
 };
 var PATH_DEFAULT_PATTERN = "[^\\/#\\?]+?";
 function validatePathExpression(path6) {
-  const tokens = (0, import_path_to_regexp.parse)(path6);
-  for (let i = 0; i < tokens.length; i++) {
-    const token = tokens[i];
-    if (token === void 0) {
-      return `token ${i} in ${path6} is undefined, this shouldn't happen`;
-    }
-    if (typeof token !== "string") {
-      if (token.pattern !== PATH_DEFAULT_PATTERN) {
-        return `Path ${path6} cannot use a regular expression wildcard`;
-      }
-      if (token.prefix !== "/") {
-        return `Wildcard :${token.name} must be immediately after a / in ${path6}`;
-      }
-      if (token.suffix) {
-        return `Wildcard suffix on :${token.name} is not allowed. Suffixes are not supported`;
+  try {
+    const tokens = (0, import_path_to_regexp.parse)(path6);
+    if (/(?<!\\)\{/.test(path6)) {
+      return `Optional paths are not supported: ${path6}`;
+    }
+    if (/(?<!\\|\()\?/.test(path6)) {
+      return `Optional paths are not supported: ${path6}`;
+    }
+    if (/\/[^/]*(?<!\\):[^/]*(?<!\\):[^/]*/.test(path6)) {
+      return `Only one wildcard is allowed per path segment: ${path6}`;
+    }
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i];
+      if (token === void 0) {
+        return `token ${i} in ${path6} is undefined, this shouldn't happen`;
       }
-      if (token.modifier && i !== tokens.length - 1) {
-        return `Modifier ${token.modifier} is not allowed on wildcard :${token.name} in ${path6}. Modifiers are only allowed in the last path component`;
+      if (typeof token !== "string") {
+        if (token.pattern !== PATH_DEFAULT_PATTERN && // Allows (a|b|c) and ((?!a|b|c).*) regex
+        // Only limited regex is supported for now, due to performance considerations
+        !/^(?<allowed>[\w]+(?:\|[^|()]+)+)$|^\(\?!(?<disallowed>[\w]+(?:\|[^|()]+)+)\)\.\*$/.test(
+          token.pattern
+        )) {
+          return `Path ${path6} cannot use unsupported regular expression wildcard`;
+        }
+        if (token.modifier && i !== tokens.length - 1) {
+          return `Modifier ${token.modifier} is not allowed on wildcard :${token.name} in ${path6}. Modifiers are only allowed in the last path component`;
+        }
       }
     }
+  } catch (e) {
+    const message = e instanceof Error ? e.message : String(e);
+    return `Path ${path6} could not be parsed into regexp: ${message}`;
   }
   return void 0;
 }
@@ -1888,6 +1914,8 @@ var MicrofrontendsServer = class extends Microfrontends {
 
 // src/bin/local-proxy.ts
 var MFE_LOCAL_PROXY_HEADER = "x-vercel-mfe-local-proxy-origin";
+var MFE_FLAG_VALUE = "vercel-mfe-flag-value";
+var MFE_FLAG_VALUE_HEADER = `x-${MFE_FLAG_VALUE}`;
 var MFE_DEBUG = process.env.MFE_DEBUG;
 var mfeDebug = (message) => {
   if (MFE_DEBUG === "true" || MFE_DEBUG === "1") {
@@ -1979,10 +2007,10 @@ var ProxyRequestRouter = class {
   getTarget(request2) {
     const cookies = (0, import_cookie.parse)(request2.headers.cookie || "");
     const config = this.getConfigWithOverrides(cookies);
-    const path6 = request2.url;
-    if (!path6) {
+    if (!request2.url) {
       return this.getDefaultHost(config);
     }
+    const { path: path6, mfeFlagValue } = extractMfeFlagValue(request2.url);
     const authTarget = this.getAuthTarget(request2, config);
     if (authTarget) {
       return authTarget;
@@ -1992,7 +2020,14 @@ var ProxyRequestRouter = class {
       path: path6,
       url,
       applications: config.getChildApplications(),
-      referer: request2.headers.referer
+      referer: request2.headers.referer,
+      // If a request already has the local proxy header, then the request has
+      // already gone through the local proxy.
+      // This should only happen if middleware indicates that a flagged route
+      // is enabled, so we treat this as enabling all flagged routes for this request.
+      middlewareMfeZone: request2.headers["x-vercel-mfe-zone"],
+      // Value to use when encountering any flagged paths instead of checking middleware
+      mfeFlagValue
     });
     if (target)
       return target;
@@ -2006,10 +2041,21 @@ var ProxyRequestRouter = class {
     path: path6,
     url,
     applications,
-    referer = void 0
+    referer = void 0,
+    middlewareMfeZone = void 0,
+    mfeFlagValue = void 0
   }) {
     for (const application of Object.values(applications)) {
       const target = this.getApplicationTarget(application);
+      if (middlewareMfeZone) {
+        if (middlewareMfeZone === application.name) {
+          mfeDebug(
+            `routing ${path6} to '${target.application}' at ${target.hostname} according to 'x-vercel-mfe-zone' header`
+          );
+          return { path: path6, ...target };
+        }
+        continue;
+      }
       const builtInRewrite = this.checkBuiltinAssetPrefix({
         rewrites: ["/:path*"],
         path: path6,
@@ -2026,11 +2072,33 @@ var ProxyRequestRouter = class {
             mfeDebug(
               `routing ${path6} to '${target.application}' at ${target.hostname}`
             );
+            if (group.flag) {
+              if (mfeFlagValue === true) {
+              } else if (mfeFlagValue === false) {
+                continue;
+              } else {
+                mfeDebug(
+                  "Routing group is behind flag. Routing to default app to check flag via middleware."
+                );
+                if (!this.isDefaultAppLocal()) {
+                  const defaultApp = this.getDefaultHost(this.config);
+                  console.error(
+                    `'${path6}' is a flagged path, but the default application is not running locally. Using '${defaultApp.hostname}' to handle this request.`
+                  );
+                }
+                return null;
+              }
+            }
             return { path: path6, ...target };
           }
         }
       }
     }
+    if (middlewareMfeZone) {
+      console.error(
+        `A request contained 'x-vercel-mfe-zone: ${middlewareMfeZone}', but no application was found with that name.`
+      );
+    }
     return null;
   }
   checkBuiltinAssetPrefix({
@@ -2079,6 +2147,9 @@ var ProxyRequestRouter = class {
       path: `${url.pathname}${url.search}`
     } : null;
   }
+  isDefaultAppLocal() {
+    return this.localApps.includes(this.config.getDefaultApplication().name);
+  }
 };
 var LocalProxy = class {
   constructor(config, {
@@ -2141,16 +2212,14 @@ var LocalProxy = class {
       return;
     }
     const target = this.router.getTarget(req);
+    const { req: strippedReq, mfeFlagValue } = removeMfeFlagQuery(req);
     if (target.protocol === "https") {
       const { hostname, port, path: path6 } = target;
       const requestOptions = {
         hostname,
         path: path6,
         method: req.method,
-        headers: {
-          ...req.headers,
-          host: hostname
-        },
+        headers: { ...req.headers, host: hostname },
         port
       };
       const localhost = `http://localhost:${this.proxyPort}`;
@@ -2179,7 +2248,10 @@ var LocalProxy = class {
     } else {
       const headers = {};
       headers[MFE_LOCAL_PROXY_HEADER] = "1";
-      this.proxy.web(req, res, {
+      if (mfeFlagValue !== void 0) {
+        headers[MFE_FLAG_VALUE_HEADER] = mfeFlagValue.toString();
+      }
+      this.proxy.web(strippedReq, res, {
         target: target.url,
         headers
       });
@@ -2214,6 +2286,33 @@ var LocalProxy = class {
     return false;
   }
 };
+function extractMfeFlagValue(path6) {
+  const host = "http://example.com";
+  const url = new import_node_url.URL(`${host}${path6}`);
+  const mfeFlagValue = stringAsBoolean(url.searchParams.get(MFE_FLAG_VALUE));
+  url.searchParams.delete(MFE_FLAG_VALUE);
+  const pathWithoutMfe = mfeFlagValue === void 0 ? path6 : url.toString().substring(host.length);
+  return { path: pathWithoutMfe, mfeFlagValue };
+}
+function stringAsBoolean(value) {
+  if (value === "true") {
+    return true;
+  } else if (value === "false") {
+    return false;
+  }
+  return void 0;
+}
+function removeMfeFlagQuery(req) {
+  if (!req.url) {
+    return { req };
+  }
+  const { path: path6, mfeFlagValue } = extractMfeFlagValue(req.url);
+  if (mfeFlagValue === void 0) {
+    return { req };
+  }
+  req.url = path6;
+  return { req, mfeFlagValue };
+}
 
 // src/bin/port.ts
 var import_node_process = require("process");

package/dist/config.cjs

@@ -256,16 +256,17 @@ var validateConfigPaths = (applicationConfigsById) => {
         const maybeError = validatePathExpression(path);
         if (maybeError) {
           errors.push(maybeError);
-        }
-        const existing = pathsByApplicationId.get(path);
-        if (existing) {
-          existing.applications.push(id);
         } else {
-          pathsByApplicationId.set(path, {
-            applications: [id],
-            matcher: (0, import_path_to_regexp2.pathToRegexp)(path),
-            applicationId: id
-          });
+          const existing = pathsByApplicationId.get(path);
+          if (existing) {
+            existing.applications.push(id);
+          } else {
+            pathsByApplicationId.set(path, {
+              applications: [id],
+              matcher: (0, import_path_to_regexp2.pathToRegexp)(path),
+              applicationId: id
+            });
+          }
         }
       }
     }
@@ -305,26 +306,38 @@ var validateConfigPaths = (applicationConfigsById) => {
 };
 var PATH_DEFAULT_PATTERN = "[^\\/#\\?]+?";
 function validatePathExpression(path) {
-  const tokens = (0, import_path_to_regexp2.parse)(path);
-  for (let i = 0; i < tokens.length; i++) {
-    const token = tokens[i];
-    if (token === void 0) {
-      return `token ${i} in ${path} is undefined, this shouldn't happen`;
-    }
-    if (typeof token !== "string") {
-      if (token.pattern !== PATH_DEFAULT_PATTERN) {
-        return `Path ${path} cannot use a regular expression wildcard`;
-      }
-      if (token.prefix !== "/") {
-        return `Wildcard :${token.name} must be immediately after a / in ${path}`;
-      }
-      if (token.suffix) {
-        return `Wildcard suffix on :${token.name} is not allowed. Suffixes are not supported`;
+  try {
+    const tokens = (0, import_path_to_regexp2.parse)(path);
+    if (/(?<!\\)\{/.test(path)) {
+      return `Optional paths are not supported: ${path}`;
+    }
+    if (/(?<!\\|\()\?/.test(path)) {
+      return `Optional paths are not supported: ${path}`;
+    }
+    if (/\/[^/]*(?<!\\):[^/]*(?<!\\):[^/]*/.test(path)) {
+      return `Only one wildcard is allowed per path segment: ${path}`;
+    }
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i];
+      if (token === void 0) {
+        return `token ${i} in ${path} is undefined, this shouldn't happen`;
       }
-      if (token.modifier && i !== tokens.length - 1) {
-        return `Modifier ${token.modifier} is not allowed on wildcard :${token.name} in ${path}. Modifiers are only allowed in the last path component`;
+      if (typeof token !== "string") {
+        if (token.pattern !== PATH_DEFAULT_PATTERN && // Allows (a|b|c) and ((?!a|b|c).*) regex
+        // Only limited regex is supported for now, due to performance considerations
+        !/^(?<allowed>[\w]+(?:\|[^|()]+)+)$|^\(\?!(?<disallowed>[\w]+(?:\|[^|()]+)+)\)\.\*$/.test(
+          token.pattern
+        )) {
+          return `Path ${path} cannot use unsupported regular expression wildcard`;
+        }
+        if (token.modifier && i !== tokens.length - 1) {
+          return `Modifier ${token.modifier} is not allowed on wildcard :${token.name} in ${path}. Modifiers are only allowed in the last path component`;
+        }
       }
     }
+  } catch (e) {
+    const message = e instanceof Error ? e.message : String(e);
+    return `Path ${path} could not be parsed into regexp: ${message}`;
   }
   return void 0;
 }