@vercel/microfrontends 1.0.0 → 1.0.1-canary.1

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.0",
+  version: "1.0.1-canary.1",
   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"
@@ -111,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"
       ],
@@ -180,6 +194,7 @@ var package_default = {
   devDependencies: {
     "@edge-runtime/jest-environment": "^4.0.0",
     "@edge-runtime/types": "^3.0.2",
+    "@sveltejs/kit": "2.17.2",
     "@testing-library/react": "^15.0.7",
     "@types/cookie": "0.5.1",
     "@types/http-proxy": "^1.17.15",
@@ -200,16 +215,22 @@ var package_default = {
     tsup: "^6.6.2",
     tsx: "^4.6.2",
     typescript: "5.7.3",
+    vite: "^5.1.6",
     webpack: "5"
   },
   peerDependencies: {
+    "@sveltejs/kit": ">=1",
     "@vercel/analytics": ">=1.5.0",
     "@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": {
+      optional: true
+    },
     "@vercel/analytics": {
       optional: true
     },
@@ -224,6 +245,9 @@ var package_default = {
     },
     "react-dom": {
       optional: true
+    },
+    vite: {
+      optional: true
     }
   }
 };
@@ -470,6 +494,48 @@ var validateConfigDefaultApplication = (applicationConfigsById) => {
     );
   }
 };
+var validateDeprecatedFields = (config) => {
+  const errors = [];
+  if (config.options?.vercel) {
+    errors.push(
+      `Configuration cannot contain deprecated field 'options.vercel'. Use 'options.disableOverrides' instead.`
+    );
+  }
+  if (config.options?.localProxy) {
+    errors.push(
+      `Configuration cannot contain deprecated field 'options.localProxy'. Use 'options.localProxyPort' instead.`
+    );
+  }
+  for (const [applicationId, application] of Object.entries(
+    config.applications
+  )) {
+    if (application.vercel) {
+      errors.push(
+        `Application '${applicationId}' cannot contain deprecated field 'vercel'. Use 'projectId' instead.`
+      );
+    }
+    if (application.production) {
+      errors.push(
+        `Application '${applicationId}' cannot contain deprecated field 'production'. Use 'development.fallback' instead.`
+      );
+    }
+    if (application.development?.local) {
+      errors.push(
+        `Application '${applicationId}' cannot contain deprecated field 'development.local'. Use 'developement.localPort' instead.`
+      );
+    }
+  }
+  if (errors.length) {
+    throw new MicrofrontendError(
+      `Microfrontends configuration file errors:
+- ${errors.join("\n- ")}`,
+      {
+        type: "config",
+        subtype: "depcrecated_field"
+      }
+    );
+  }
+};
 
 // src/config/microfrontends-config/isomorphic/utils/generate-asset-prefix.ts
 var PREFIX = "vc-ap";
@@ -799,7 +865,7 @@ var MicrofrontendConfigIsomorphic = class {
   }) {
     this.childApplications = {};
     MicrofrontendConfigIsomorphic.validate(config, opts);
-    const disableOverrides = config.options?.vercel?.disableOverrides ?? false;
+    const disableOverrides = config.options?.disableOverrides ?? config.options?.vercel?.disableOverrides ?? false;
     this.overrides = overrides && !disableOverrides ? overrides : void 0;
     this.isMainConfig = isMainConfig(config);
     if (isMainConfig(config)) {
@@ -856,6 +922,9 @@ var MicrofrontendConfigIsomorphic = class {
       if (!skipValidation.includes("defaultApplication")) {
         validateConfigDefaultApplication(c.applications);
       }
+      if (!skipValidation.includes("deprecatedFields")) {
+        validateDeprecatedFields(c);
+      }
     }
     return c;
   }
@@ -977,7 +1046,7 @@ var MicrofrontendMainConfig = class extends MicrofrontendConfigIsomorphic {
   }) {
     super({ config, overrides, meta });
     this.isMainConfig = true;
-    const disableOverrides = config.options?.vercel?.disableOverrides ?? false;
+    const disableOverrides = config.options?.disableOverrides ?? config.options?.vercel?.disableOverrides ?? false;
     let defaultApplication;
     for (const [appId, appConfig] of Object.entries(config.applications)) {
       const appOverrides = !disableOverrides ? this.overrides?.applications[appId] : void 0;
@@ -1312,7 +1381,9 @@ var schema_default = {
           description: "Mapping of application names to the routes that they host. Only needs to be defined in the application that owns the primary microfrontend domain"
         }
       },
-      required: ["applications"],
+      required: [
+        "applications"
+      ],
       additionalProperties: false
     },
     Options: {
@@ -1407,7 +1478,9 @@ var schema_default = {
           description: "Vercel project ID"
         }
       },
-      required: ["projectId"],
+      required: [
+        "projectId"
+      ],
       additionalProperties: false
     },
     HostConfig: {
@@ -1415,7 +1488,10 @@ var schema_default = {
       properties: {
         protocol: {
           type: "string",
-          enum: ["http", "https"],
+          enum: [
+            "http",
+            "https"
+          ],
           description: "The protocol to be used for the connection.\n- `http`: Hypertext Transfer Protocol (HTTP).\n- `https`: Secure Hypertext Transfer Protocol (HTTPS).\n\n*"
         },
         host: {
@@ -1427,7 +1503,9 @@ var schema_default = {
           description: "The port number to be used for the connection. Common values include `80` for HTTP and `443` for HTTPS."
         }
       },
-      required: ["host"],
+      required: [
+        "host"
+      ],
       additionalProperties: false
     },
     Development: {
@@ -1469,7 +1547,10 @@ var schema_default = {
         },
         protocol: {
           type: "string",
-          enum: ["http", "https"],
+          enum: [
+            "http",
+            "https"
+          ],
           description: "The protocol to be used for the connection.\n- `http`: Hypertext Transfer Protocol (HTTP).\n- `https`: Secure Hypertext Transfer Protocol (HTTPS).\n\n*"
         },
         port: {
@@ -1501,7 +1582,9 @@ var schema_default = {
           description: "Groups of path expressions that are routed to this application."
         }
       },
-      required: ["routing"],
+      required: [
+        "routing"
+      ],
       additionalProperties: false
     },
     Routing: {
@@ -1528,7 +1611,9 @@ var schema_default = {
           }
         }
       },
-      required: ["paths"],
+      required: [
+        "paths"
+      ],
       additionalProperties: false
     },
     ChildConfig: {
@@ -1549,7 +1634,9 @@ var schema_default = {
           description: "Applications that only serve a subset of the microfrontend routes only need to reference the name of the primary application that owns the full microfrontends configuration."
         }
       },
-      required: ["partOf"],
+      required: [
+        "partOf"
+      ],
       additionalProperties: false
     }
   }
@@ -1813,6 +1900,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") {
@@ -1904,10 +1993,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;
@@ -1917,7 +2006,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;
@@ -1931,14 +2027,23 @@ 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*"
-        ],
+        rewrites: ["/:path*"],
         path: path6,
         url,
         app: application
@@ -1953,11 +2058,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({
@@ -1968,15 +2095,13 @@ var ProxyRequestRouter = class {
   }) {
     const pathname = url.pathname;
     const target = this.getApplicationTarget(app);
-    const isTargetDefault = target.application === this.config.getDefaultApplication().name;
     for (const rewrite of rewrites) {
       if ((0, import_path_to_regexp3.pathToRegexp)(`/${app.getAssetPrefix()}${rewrite}`).test(pathname)) {
         mfeDebug(
           `routing ${pathname} to '${target.application}' at ${target.hostname}`
         );
-        const processedPath = isTargetDefault ? path6 : path6.replace(`/${app.getAssetPrefix()}`, "");
         return {
-          path: processedPath,
+          path: path6,
           ...target
         };
       }
@@ -2008,6 +2133,9 @@ var ProxyRequestRouter = class {
       path: `${url.pathname}${url.search}`
     } : null;
   }
+  isDefaultAppLocal() {
+    return this.localApps.includes(this.config.getDefaultApplication().name);
+  }
 };
 var LocalProxy = class {
   constructor(config, {
@@ -2070,16 +2198,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}`;
@@ -2108,7 +2234,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
       });
@@ -2143,6 +2272,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

@@ -375,6 +375,48 @@ var validateConfigDefaultApplication = (applicationConfigsById) => {
     );
   }
 };
+var validateDeprecatedFields = (config) => {
+  const errors = [];
+  if (config.options?.vercel) {
+    errors.push(
+      `Configuration cannot contain deprecated field 'options.vercel'. Use 'options.disableOverrides' instead.`
+    );
+  }
+  if (config.options?.localProxy) {
+    errors.push(
+      `Configuration cannot contain deprecated field 'options.localProxy'. Use 'options.localProxyPort' instead.`
+    );
+  }
+  for (const [applicationId, application] of Object.entries(
+    config.applications
+  )) {
+    if (application.vercel) {
+      errors.push(
+        `Application '${applicationId}' cannot contain deprecated field 'vercel'. Use 'projectId' instead.`
+      );
+    }
+    if (application.production) {
+      errors.push(
+        `Application '${applicationId}' cannot contain deprecated field 'production'. Use 'development.fallback' instead.`
+      );
+    }
+    if (application.development?.local) {
+      errors.push(
+        `Application '${applicationId}' cannot contain deprecated field 'development.local'. Use 'developement.localPort' instead.`
+      );
+    }
+  }
+  if (errors.length) {
+    throw new MicrofrontendError(
+      `Microfrontends configuration file errors:
+- ${errors.join("\n- ")}`,
+      {
+        type: "config",
+        subtype: "depcrecated_field"
+      }
+    );
+  }
+};
 
 // src/config/microfrontends-config/isomorphic/utils/generate-asset-prefix.ts
 var PREFIX = "vc-ap";
@@ -585,7 +627,7 @@ var MicrofrontendConfigIsomorphic = class {
   }) {
     this.childApplications = {};
     MicrofrontendConfigIsomorphic.validate(config, opts);
-    const disableOverrides = config.options?.vercel?.disableOverrides ?? false;
+    const disableOverrides = config.options?.disableOverrides ?? config.options?.vercel?.disableOverrides ?? false;
     this.overrides = overrides && !disableOverrides ? overrides : void 0;
     this.isMainConfig = isMainConfig(config);
     if (isMainConfig(config)) {
@@ -642,6 +684,9 @@ var MicrofrontendConfigIsomorphic = class {
       if (!skipValidation.includes("defaultApplication")) {
         validateConfigDefaultApplication(c.applications);
       }
+      if (!skipValidation.includes("deprecatedFields")) {
+        validateDeprecatedFields(c);
+      }
     }
     return c;
   }