@vercel/microfrontends 2.0.0-canary.1 → 2.0.0

package/CHANGELOG.md

@@ -1,22 +1,24 @@
 # @vercel/microfrontends
 
-## 2.0.0-canary.1
+## 2.0.0
 
-### Patch Changes
-
-- Support old and new asset prefixes in local development proxy.
-
-## 2.0.0-canary.0
-
-> **Check out our [Public Beta](https://vercel.com/changelog/microfrontends-are-now-in-public-beta) changelog to learn more about this release.**
+> **Check out our [Public Beta](https://vercel.com/changelog/microfrontends-support-is-now-in-public-beta) changelog to learn more about this release.**
 
 ### Major Changes
 
 - This release removes the project name and flag names from being visible to client side code.
   - Modify the auto-generated asset prefix to use a hash of the project name instead of the project name itself.
-  - Allow users to specify a custom asset prefix in the `microfrontends.json`
+  - Allow users to specify a custom asset prefix in `microfrontends.json`.
   - Remove project names and flag names from the Microfrontends client configuration.
 
+### Minor Changes
+
+- Use user-provided appName when inferring the location of microfrontends.json.
+
+### Patch Changes
+
+- Improve error messages when the name in `package.json` does not match the Vercel project name.
+
 ## 1.5.0
 
 ### Minor Changes

package/README.md

@@ -1,9 +1,26 @@
 <picture>
-  <source srcset="https://assets.vercel.com/image/upload/v1689795055/docs-assets/static/docs/microfrontends/mfe-banner-dark.png" media="(prefers-color-scheme: dark)">
-  <source srcset="https://assets.vercel.com/image/upload/v1689795055/docs-assets/static/docs/microfrontends/mfe-banner-light.png" media="(prefers-color-scheme: light)">
-  <img src="https://assets.vercel.com/image/upload/v1689795055/docs-assets/static/docs/microfrontends/mfe-banner-light.png" alt="hero banner">
+  <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>
 
 # @vercel/microfrontends
 
-📚 [Documentation](https://vercel.com/docs/microfrontends)
+Split apart large applications and develop faster with microfrontends. This package contains library code to be used with Vercel's [microfrontends support](https://vercel.com/docs/microfrontends).
+
+- **Improved developer velocity**: Build and test just the application that you are developing. Independent applications allow each team to choose their own technology stack.
+- **Incremental migrations**: Gradually migrate systems to modern frameworks without rewriting everything at once.
+
+See the [full documentation](https://vercel.com/docs/microfrontends) and [examples](https://vercel.com/templates/microfrontends) to learn more.
+
+## Getting Started
+
+Follow the [quickstart](https://vercel.com/docs/microfrontends/quickstart) documentation to get started.
+
+## Frameworks support
+
+You can use the frameworks and microfrontends frameworks of your choice. `@vercel/microfrontends` supports Next.js, SvelteKit, React Router, Vite, and React.
+
+## Need help?
+
+Reach out for help in the [Vercel Community](https://community.vercel.com).

package/dist/bin/cli.cjs

@@ -30,12 +30,17 @@ var import_env = require("@next/env");
 // package.json
 var package_default = {
   name: "@vercel/microfrontends",
-  version: "2.0.0-canary.1",
+  version: "2.0.0",
   private: false,
   description: "Defines configuration and utilities for microfrontends development",
   keywords: [
     "microfrontends",
-    "Next.js"
+    "micro-frontends",
+    "micro frontends",
+    "microservices",
+    "Vercel",
+    "Next.js",
+    "React"
   ],
   homepage: "https://vercel.com/docs/microfrontends",
   repository: {
@@ -244,7 +249,7 @@ var http = __toESM(require("http"), 1);
 var https = __toESM(require("https"), 1);
 var import_node_url = require("url");
 var import_cookie = require("cookie");
-var import_path_to_regexp2 = require("path-to-regexp");
+var import_path_to_regexp3 = require("path-to-regexp");
 var import_http_proxy = __toESM(require("http-proxy"), 1);
 
 // src/config/microfrontends-config/isomorphic/index.ts
@@ -392,8 +397,106 @@ function parseOverrides(cookies) {
   return overridesConfig;
 }
 
-// src/config/microfrontends-config/isomorphic/validation.ts
+// src/config/microfrontends-config/client/index.ts
 var import_path_to_regexp = require("path-to-regexp");
+var regexpCache = /* @__PURE__ */ new Map();
+var getRegexp = (path7) => {
+  const existing = regexpCache.get(path7);
+  if (existing) {
+    return existing;
+  }
+  const regexp = (0, import_path_to_regexp.pathToRegexp)(path7);
+  regexpCache.set(path7, regexp);
+  return regexp;
+};
+var MicrofrontendConfigClient = class {
+  constructor(config, opts) {
+    this.pathCache = {};
+    this.hasFlaggedPaths = config.hasFlaggedPaths ?? false;
+    for (const app of Object.values(config.applications)) {
+      if (app.routing) {
+        if (app.routing.some((match) => match.flag)) {
+          this.hasFlaggedPaths = true;
+        }
+        const newRouting = [];
+        const pathsWithoutFlags = [];
+        for (const group of app.routing) {
+          if (group.flag) {
+            if (opts?.removeFlaggedPaths) {
+              continue;
+            }
+            if (group.group) {
+              delete group.group;
+            }
+            newRouting.push(group);
+          } else {
+            pathsWithoutFlags.push(...group.paths);
+          }
+        }
+        if (pathsWithoutFlags.length > 0) {
+          newRouting.push({ paths: pathsWithoutFlags });
+        }
+        app.routing = newRouting;
+      }
+    }
+    this.serialized = config;
+    if (this.hasFlaggedPaths) {
+      this.serialized.hasFlaggedPaths = this.hasFlaggedPaths;
+    }
+    this.applications = config.applications;
+  }
+  /**
+   * Create a new `MicrofrontendConfigClient` from a JSON string.
+   * Config must be passed in to remain framework agnostic
+   */
+  static fromEnv(config) {
+    if (!config) {
+      throw new Error(
+        "Could not construct MicrofrontendConfigClient: configuration is empty or undefined. Did you set up your application with `withMicrofrontends`?"
+      );
+    }
+    return new MicrofrontendConfigClient(JSON.parse(config));
+  }
+  isEqual(other) {
+    return this === other || JSON.stringify(this.applications) === JSON.stringify(other.applications);
+  }
+  getApplicationNameForPath(path7) {
+    if (!path7.startsWith("/")) {
+      throw new Error(`Path must start with a /`);
+    }
+    if (this.pathCache[path7]) {
+      return this.pathCache[path7];
+    }
+    const pathname = new URL(path7, "https://example.com").pathname;
+    for (const [name, application] of Object.entries(this.applications)) {
+      if (application.routing) {
+        for (const group of application.routing) {
+          for (const childPath of group.paths) {
+            const regexp = getRegexp(childPath);
+            if (regexp.test(pathname)) {
+              this.pathCache[path7] = name;
+              return name;
+            }
+          }
+        }
+      }
+    }
+    const defaultApplication = Object.entries(this.applications).find(
+      ([, application]) => application.default
+    );
+    if (!defaultApplication) {
+      return null;
+    }
+    this.pathCache[path7] = defaultApplication[0];
+    return defaultApplication[0];
+  }
+  serialize() {
+    return this.serialized;
+  }
+};
+
+// src/config/microfrontends-config/isomorphic/validation.ts
+var import_path_to_regexp2 = require("path-to-regexp");
 var LIST_FORMATTER = new Intl.ListFormat("en", {
   style: "long",
   type: "conjunction"
@@ -421,7 +524,7 @@ var validateConfigPaths = (applicationConfigsById) => {
           } else {
             pathsByApplicationId.set(path7, {
               applications: [id],
-              matcher: (0, import_path_to_regexp.pathToRegexp)(path7),
+              matcher: (0, import_path_to_regexp2.pathToRegexp)(path7),
               applicationId: id
             });
           }
@@ -468,7 +571,7 @@ var validateConfigPaths = (applicationConfigsById) => {
 var PATH_DEFAULT_PATTERN = "[^\\/#\\?]+?";
 function validatePathExpression(path7) {
   try {
-    const tokens = (0, import_path_to_regexp.parse)(path7);
+    const tokens = (0, import_path_to_regexp2.parse)(path7);
     if (/(?<!\\)\{/.test(path7)) {
       return `Optional paths are not supported: ${path7}`;
     }
@@ -926,6 +1029,28 @@ var MicrofrontendConfigIsomorphic = class {
   getLocalProxyPort() {
     return this.config.options?.localProxyPort ?? DEFAULT_LOCAL_PROXY_PORT;
   }
+  toClientConfig(options) {
+    const applications = Object.fromEntries(
+      Object.entries(this.childApplications).map(([name, application]) => [
+        hashApplicationName(name),
+        {
+          default: false,
+          routing: application.routing
+        }
+      ])
+    );
+    applications[hashApplicationName(this.defaultApplication.name)] = {
+      default: true
+    };
+    return new MicrofrontendConfigClient(
+      {
+        applications
+      },
+      {
+        removeFlaggedPaths: options?.removeFlaggedPaths
+      }
+    );
+  }
   /**
    * Serializes the class back to the Schema type.
    *
@@ -1553,6 +1678,7 @@ var MicrofrontendsServer = class {
    * This can return either a Child or Main configuration.
    */
   static infer({
+    appName,
     directory,
     filePath,
     cookies
@@ -1565,7 +1691,10 @@ var MicrofrontendsServer = class {
     }
     try {
       const packageRoot = findPackageRoot(directory);
-      const applicationContext = getApplicationContext({ packageRoot });
+      const applicationContext = getApplicationContext({
+        appName,
+        packageRoot
+      });
       const maybeConfig = findConfig({ dir: packageRoot });
       if (maybeConfig) {
         return MicrofrontendsServer.fromFile({
@@ -2131,7 +2260,7 @@ var ProxyRequestRouter = class {
       }
       for (const group of application.routing) {
         for (const childPath of group.paths) {
-          const regexp = (0, import_path_to_regexp2.pathToRegexp)(childPath);
+          const regexp = (0, import_path_to_regexp3.pathToRegexp)(childPath);
           if (regexp.test(url.pathname)) {
             mfeDebug(
               `routing ${path7} to '${target.application}' at ${target.hostname}`
@@ -2180,7 +2309,7 @@ var ProxyRequestRouter = class {
     ]);
     for (const rewrite of rewrites) {
       for (const assetPrefix of assetPrefixes) {
-        if ((0, import_path_to_regexp2.pathToRegexp)(`/${assetPrefix}${rewrite}`).test(pathname)) {
+        if ((0, import_path_to_regexp3.pathToRegexp)(`/${assetPrefix}${rewrite}`).test(pathname)) {
           mfeDebug(
             `routing ${pathname} to '${target.application}' at ${target.hostname}`
           );
@@ -2198,8 +2327,8 @@ var ProxyRequestRouter = class {
     referer = void 0,
     applications
   }) {
-    const isStackFrame = (0, import_path_to_regexp2.pathToRegexp)("/__nextjs_original-stack-frame").test(url.pathname) || // Plural form was introduced in https://github.com/vercel/next.js/pull/75557
-    (0, import_path_to_regexp2.pathToRegexp)("/__nextjs_original-stack-frames").test(url.pathname);
+    const isStackFrame = (0, import_path_to_regexp3.pathToRegexp)("/__nextjs_original-stack-frame").test(url.pathname) || // Plural form was introduced in https://github.com/vercel/next.js/pull/75557
+    (0, import_path_to_regexp3.pathToRegexp)("/__nextjs_original-stack-frames").test(url.pathname);
     if (!referer || !isStackFrame) {
       return null;
     }
@@ -2219,7 +2348,7 @@ var ProxyRequestRouter = class {
     } : null;
   }
   checkNextSourceMap({ url }) {
-    const isSourceMap = (0, import_path_to_regexp2.pathToRegexp)("/__nextjs_source-map").test(url.pathname);
+    const isSourceMap = (0, import_path_to_regexp3.pathToRegexp)("/__nextjs_source-map").test(url.pathname);
     if (!isSourceMap) {
       return null;
     }
@@ -2239,7 +2368,7 @@ var ProxyRequestRouter = class {
     url,
     applications
   }) {
-    const isNextImage = (0, import_path_to_regexp2.pathToRegexp)("/_next/image").test(url.pathname);
+    const isNextImage = (0, import_path_to_regexp3.pathToRegexp)("/_next/image").test(url.pathname);
     if (!isNextImage) {
       return null;
     }

package/dist/config.cjs

@@ -177,8 +177,106 @@ function parseOverrides(cookies) {
   return overridesConfig;
 }
 
-// src/config/microfrontends-config/isomorphic/validation.ts
+// src/config/microfrontends-config/client/index.ts
 var import_path_to_regexp = require("path-to-regexp");
+var regexpCache = /* @__PURE__ */ new Map();
+var getRegexp = (path) => {
+  const existing = regexpCache.get(path);
+  if (existing) {
+    return existing;
+  }
+  const regexp = (0, import_path_to_regexp.pathToRegexp)(path);
+  regexpCache.set(path, regexp);
+  return regexp;
+};
+var MicrofrontendConfigClient = class {
+  constructor(config, opts) {
+    this.pathCache = {};
+    this.hasFlaggedPaths = config.hasFlaggedPaths ?? false;
+    for (const app of Object.values(config.applications)) {
+      if (app.routing) {
+        if (app.routing.some((match) => match.flag)) {
+          this.hasFlaggedPaths = true;
+        }
+        const newRouting = [];
+        const pathsWithoutFlags = [];
+        for (const group of app.routing) {
+          if (group.flag) {
+            if (opts?.removeFlaggedPaths) {
+              continue;
+            }
+            if (group.group) {
+              delete group.group;
+            }
+            newRouting.push(group);
+          } else {
+            pathsWithoutFlags.push(...group.paths);
+          }
+        }
+        if (pathsWithoutFlags.length > 0) {
+          newRouting.push({ paths: pathsWithoutFlags });
+        }
+        app.routing = newRouting;
+      }
+    }
+    this.serialized = config;
+    if (this.hasFlaggedPaths) {
+      this.serialized.hasFlaggedPaths = this.hasFlaggedPaths;
+    }
+    this.applications = config.applications;
+  }
+  /**
+   * Create a new `MicrofrontendConfigClient` from a JSON string.
+   * Config must be passed in to remain framework agnostic
+   */
+  static fromEnv(config) {
+    if (!config) {
+      throw new Error(
+        "Could not construct MicrofrontendConfigClient: configuration is empty or undefined. Did you set up your application with `withMicrofrontends`?"
+      );
+    }
+    return new MicrofrontendConfigClient(JSON.parse(config));
+  }
+  isEqual(other) {
+    return this === other || JSON.stringify(this.applications) === JSON.stringify(other.applications);
+  }
+  getApplicationNameForPath(path) {
+    if (!path.startsWith("/")) {
+      throw new Error(`Path must start with a /`);
+    }
+    if (this.pathCache[path]) {
+      return this.pathCache[path];
+    }
+    const pathname = new URL(path, "https://example.com").pathname;
+    for (const [name, application] of Object.entries(this.applications)) {
+      if (application.routing) {
+        for (const group of application.routing) {
+          for (const childPath of group.paths) {
+            const regexp = getRegexp(childPath);
+            if (regexp.test(pathname)) {
+              this.pathCache[path] = name;
+              return name;
+            }
+          }
+        }
+      }
+    }
+    const defaultApplication = Object.entries(this.applications).find(
+      ([, application]) => application.default
+    );
+    if (!defaultApplication) {
+      return null;
+    }
+    this.pathCache[path] = defaultApplication[0];
+    return defaultApplication[0];
+  }
+  serialize() {
+    return this.serialized;
+  }
+};
+
+// src/config/microfrontends-config/isomorphic/validation.ts
+var import_path_to_regexp2 = require("path-to-regexp");
 var LIST_FORMATTER = new Intl.ListFormat("en", {
   style: "long",
   type: "conjunction"
@@ -206,7 +304,7 @@ var validateConfigPaths = (applicationConfigsById) => {
           } else {
             pathsByApplicationId.set(path, {
               applications: [id],
-              matcher: (0, import_path_to_regexp.pathToRegexp)(path),
+              matcher: (0, import_path_to_regexp2.pathToRegexp)(path),
               applicationId: id
             });
           }
@@ -253,7 +351,7 @@ var validateConfigPaths = (applicationConfigsById) => {
 var PATH_DEFAULT_PATTERN = "[^\\/#\\?]+?";
 function validatePathExpression(path) {
   try {
-    const tokens = (0, import_path_to_regexp.parse)(path);
+    const tokens = (0, import_path_to_regexp2.parse)(path);
     if (/(?<!\\)\{/.test(path)) {
       return `Optional paths are not supported: ${path}`;
     }
@@ -711,6 +809,28 @@ var MicrofrontendConfigIsomorphic = class {
   getLocalProxyPort() {
     return this.config.options?.localProxyPort ?? DEFAULT_LOCAL_PROXY_PORT;
   }
+  toClientConfig(options) {
+    const applications = Object.fromEntries(
+      Object.entries(this.childApplications).map(([name, application]) => [
+        hashApplicationName(name),
+        {
+          default: false,
+          routing: application.routing
+        }
+      ])
+    );
+    applications[hashApplicationName(this.defaultApplication.name)] = {
+      default: true
+    };
+    return new MicrofrontendConfigClient(
+      {
+        applications
+      },
+      {
+        removeFlaggedPaths: options?.removeFlaggedPaths
+      }
+    );
+  }
   /**
    * Serializes the class back to the Schema type.
    *