@vercel/microfrontends 2.0.0-canary.1 → 2.0.0-canary.2

package/dist/next/config.d.ts

@@ -5,6 +5,11 @@ type TransformKeys = 'assetPrefix' | 'buildId' | 'draftMode' | 'redirects' | 're
 interface WithMicrofrontendsOptions {
     /**
      * Explicitly set the name of the application instead of using the name from the package.json.
+     * This option is useful for cases where you are trying to import next.config.js in a different
+     * package, such as for the Storybook Next.js integration.
+     *
+     * NOTE: This option should not be used in most cases. Issues on Vercel may occur
+     * if it differs from the project name.
      */
     appName?: string;
     isProduction?: () => boolean;

package/dist/next/config.js

@@ -368,8 +368,106 @@ function findConfig({ dir }) {
 // src/config/microfrontends-config/isomorphic/index.ts
 import { parse as parse2 } from "jsonc-parser";
 
+// src/config/microfrontends-config/client/index.ts
+import { pathToRegexp } from "path-to-regexp";
+var regexpCache = /* @__PURE__ */ new Map();
+var getRegexp = (path6) => {
+  const existing = regexpCache.get(path6);
+  if (existing) {
+    return existing;
+  }
+  const regexp = pathToRegexp(path6);
+  regexpCache.set(path6, 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(path6) {
+    if (!path6.startsWith("/")) {
+      throw new Error(`Path must start with a /`);
+    }
+    if (this.pathCache[path6]) {
+      return this.pathCache[path6];
+    }
+    const pathname = new URL(path6, "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[path6] = name;
+              return name;
+            }
+          }
+        }
+      }
+    }
+    const defaultApplication = Object.entries(this.applications).find(
+      ([, application]) => application.default
+    );
+    if (!defaultApplication) {
+      return null;
+    }
+    this.pathCache[path6] = defaultApplication[0];
+    return defaultApplication[0];
+  }
+  serialize() {
+    return this.serialized;
+  }
+};
+
 // src/config/microfrontends-config/isomorphic/validation.ts
-import { pathToRegexp, parse as parsePathRegexp } from "path-to-regexp";
+import { pathToRegexp as pathToRegexp2, parse as parsePathRegexp } from "path-to-regexp";
 var LIST_FORMATTER = new Intl.ListFormat("en", {
   style: "long",
   type: "conjunction"
@@ -397,7 +495,7 @@ var validateConfigPaths = (applicationConfigsById) => {
           } else {
             pathsByApplicationId.set(path6, {
               applications: [id],
-              matcher: pathToRegexp(path6),
+              matcher: pathToRegexp2(path6),
               applicationId: id
             });
           }
@@ -902,6 +1000,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.
    *
@@ -1321,6 +1441,7 @@ var MicrofrontendsServer = class {
    * This can return either a Child or Main configuration.
    */
   static infer({
+    appName,
     directory,
     filePath,
     cookies
@@ -1333,7 +1454,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({
@@ -1766,128 +1890,6 @@ var transforms = {
   webpack: transform7
 };
 
-// src/config/microfrontends-config/client/index.ts
-import { pathToRegexp as pathToRegexp2 } from "path-to-regexp";
-var regexpCache = /* @__PURE__ */ new Map();
-var getRegexp = (path6) => {
-  const existing = regexpCache.get(path6);
-  if (existing) {
-    return existing;
-  }
-  const regexp = pathToRegexp2(path6);
-  regexpCache.set(path6, 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(path6) {
-    if (!path6.startsWith("/")) {
-      throw new Error(`Path must start with a /`);
-    }
-    if (this.pathCache[path6]) {
-      return this.pathCache[path6];
-    }
-    const pathname = new URL(path6, "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[path6] = name;
-              return name;
-            }
-          }
-        }
-      }
-    }
-    const defaultApplication = Object.entries(this.applications).find(
-      ([, application]) => application.default
-    );
-    if (!defaultApplication) {
-      return null;
-    }
-    this.pathCache[path6] = defaultApplication[0];
-    return defaultApplication[0];
-  }
-  serialize() {
-    return this.serialized;
-  }
-};
-
-// src/config/microfrontends-config/client/from-isomorphic-config.ts
-function fromIsomorphicConfig(config, options) {
-  const applications = Object.fromEntries(
-    Object.entries(config.childApplications).map(([name, application]) => [
-      hashApplicationName(name),
-      {
-        default: false,
-        routing: application.routing
-      }
-    ])
-  );
-  applications[hashApplicationName(config.defaultApplication.name)] = {
-    default: true
-  };
-  return new MicrofrontendConfigClient(
-    {
-      applications
-    },
-    {
-      removeFlaggedPaths: options?.removeFlaggedPaths
-    }
-  );
-}
-
 // src/next/config/env.ts
 function debugEnv(env) {
   if (process.env.MFE_DEBUG) {
@@ -1913,7 +1915,7 @@ function setEnvironment({
     NEXT_PUBLIC_MFE_CURRENT_APPLICATION: app.name,
     NEXT_PUBLIC_MFE_CURRENT_APPLICATION_HASH: hashApplicationName(app.name),
     NEXT_PUBLIC_MFE_CLIENT_CONFIG: JSON.stringify(
-      fromIsomorphicConfig(microfrontends.config, {
+      microfrontends.config.toClientConfig({
         removeFlaggedPaths: true
       }).serialize()
     ),
@@ -1923,10 +1925,7 @@ function setEnvironment({
   };
   const serverEnvs = {
     MFE_CURRENT_APPLICATION: app.name,
-    MFE_CONFIG: JSON.stringify(microfrontends.config.getConfig()),
-    MFE_CLIENT_CONFIG_FULL: JSON.stringify(
-      fromIsomorphicConfig(microfrontends.config).serialize()
-    )
+    MFE_CONFIG: JSON.stringify(microfrontends.config.getConfig())
   };
   const allEnvs = { ...clientEnvs, ...serverEnvs };
   for (const [key, value] of Object.entries(allEnvs)) {
@@ -1951,6 +1950,7 @@ function withMicrofrontends(nextConfig, opts) {
   }
   const { name: fromApp } = getApplicationContext(opts);
   const microfrontends = MicrofrontendsServer.infer({
+    appName: fromApp,
     filePath: opts?.configPath
   });
   const app = microfrontends.config.getApplication(fromApp);