@vercel/microfrontends 1.5.0-canary.2 → 2.0.0-canary.0

package/dist/next/config.d.ts

@@ -1,6 +1,6 @@
 import { NextConfig } from 'next';
 
-type TransformKeys = 'assetPrefix' | 'buildId' | 'draftMode' | 'redirects' | 'rewrites' | 'webpack';
+type TransformKeys = 'assetPrefix' | 'buildId' | 'draftMode' | 'redirects' | 'rewrites' | 'transpilePackages' | 'webpack';
 
 interface WithMicrofrontendsOptions {
     /**

package/dist/next/config.js

@@ -214,8 +214,9 @@ var CONFIGURATION_FILENAMES = [
 var configCache = {};
 function findPackageWithMicrofrontendsConfig({
   repositoryRoot,
-  applicationName
+  applicationContext
 }) {
+  const applicationName = applicationContext.name;
   try {
     const microfrontendsJsonPaths = fg.globSync(
       `**/{${CONFIGURATION_FILENAMES.join(",")}}`,
@@ -257,26 +258,45 @@ ${matchingPaths.join("\n  \u2022 ")}`,
       );
     }
     if (matchingPaths.length === 0) {
+      let additionalErrorMessage = "";
+      if (microfrontendsJsonPaths.length > 0) {
+        if (!applicationContext.projectName) {
+          additionalErrorMessage = `
+
+If the name in package.json (${applicationContext.packageJsonName}) differs from your Vercel Project name, set the \`packageName\` field for the application in \`microfrontends.json\` to ensure that the configuration can be found locally.`;
+        } else {
+          additionalErrorMessage = `
+
+Names of applications in \`microfrontends.json\` must match the Vercel Project name (${applicationContext.projectName}).`;
+        }
+      }
       throw new MicrofrontendError(
-        `Could not find a \`microfrontends.json\` file in the repository that contains "applications.${applicationName}". If your Vercel Microfrontends configuration is not in this repository, you can use the Vercel CLI to pull the Vercel Microfrontends configuration using the "vercel microfrontends pull" command, or you can specify the path manually using the VC_MICROFRONTENDS_CONFIG environment variable. If you suspect this is thrown in error, please reach out to the Vercel team.`,
+        `Could not find a \`microfrontends.json\` file in the repository that contains the "${applicationName}" application.${additionalErrorMessage}
+
+If your Vercel Microfrontends configuration is not in this repository, you can use the Vercel CLI to pull the Vercel Microfrontends configuration using the "vercel microfrontends pull" command, or you can specify the path manually using the VC_MICROFRONTENDS_CONFIG environment variable.
+
+If you suspect this is thrown in error, please reach out to the Vercel team.`,
         { type: "config", subtype: "inference_failed" }
       );
     }
     const [packageJsonPath] = matchingPaths;
     return dirname(packageJsonPath);
   } catch (error) {
+    if (error instanceof MicrofrontendError) {
+      throw error;
+    }
     return null;
   }
 }
 function inferMicrofrontendsLocation(opts) {
-  const cacheKey = `${opts.repositoryRoot}-${opts.applicationName}`;
+  const cacheKey = `${opts.repositoryRoot}-${opts.applicationContext.name}`;
   if (configCache[cacheKey]) {
     return configCache[cacheKey];
   }
   const result = findPackageWithMicrofrontendsConfig(opts);
   if (!result) {
     throw new MicrofrontendError(
-      `Could not infer the location of the \`microfrontends.json\` file for application "${opts.applicationName}" starting in directory "${opts.repositoryRoot}".`,
+      `Could not infer the location of the \`microfrontends.json\` file for application "${opts.applicationContext.name}" starting in directory "${opts.repositoryRoot}".`,
       { type: "config", subtype: "inference_failed" }
     );
   }
@@ -348,90 +368,13 @@ 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.serialized = config;
-    if (opts?.removeFlaggedPaths) {
-      for (const app of Object.values(config.applications)) {
-        if (app.routing) {
-          app.routing = app.routing.filter((match) => !match.flag);
-        }
-      }
-    }
-    this.applications = config.applications;
-  }
-  /**
-   * Create a new `MicrofrontendConfigClient` from a JSON string.
-   * Config must be passed in to remain framework agnostic
-   */
-  static fromEnv(config, opts) {
-    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),
-      opts
-    );
-  }
-  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 as pathToRegexp2, parse as parsePathRegexp } from "path-to-regexp";
+import { pathToRegexp, parse as parsePathRegexp } from "path-to-regexp";
 var LIST_FORMATTER = new Intl.ListFormat("en", {
   style: "long",
   type: "conjunction"
 });
+var VALID_ASSET_PREFIX_REGEXP = /^[a-z](?:[a-z0-9-]*[a-z0-9])?$/;
 var validateConfigPaths = (applicationConfigsById) => {
   if (!applicationConfigsById) {
     return;
@@ -454,7 +397,7 @@ var validateConfigPaths = (applicationConfigsById) => {
           } else {
             pathsByApplicationId.set(path6, {
               applications: [id],
-              matcher: pathToRegexp2(path6),
+              matcher: pathToRegexp(path6),
               applicationId: id
             });
           }
@@ -558,6 +501,22 @@ var validateAppPaths = (name, app) => {
       }
     }
   }
+  if (app.assetPrefix) {
+    if (!VALID_ASSET_PREFIX_REGEXP.test(app.assetPrefix)) {
+      throw new MicrofrontendError(
+        `Invalid asset prefix for application "${name}". ${app.assetPrefix} must start with a lowercase letter and contain only lowercase letters, numbers, and hyphens.`,
+        { type: "application", subtype: "invalid_asset_prefix" }
+      );
+    }
+    if (app.assetPrefix !== `vc-ap-${name}` && !app.routing.some(
+      (group) => group.paths.includes(`/${app.assetPrefix}/:path*`) && !group.flag
+    )) {
+      throw new MicrofrontendError(
+        `When \`assetPrefix\` is specified, \`/${app.assetPrefix}/:path*\` must be added the routing paths for the application. Changing the asset prefix is not a forwards and backwards compatible change, and the custom asset prefix should be added to \`paths\` and deployed before setting the \`assetPrefix\` field.`,
+        { type: "application", subtype: "invalid_asset_prefix" }
+      );
+    }
+  }
 };
 var validateConfigDefaultApplication = (applicationConfigsById) => {
   if (!applicationConfigsById) {
@@ -589,6 +548,15 @@ var validateConfigDefaultApplication = (applicationConfigsById) => {
   }
 };
 
+// src/config/microfrontends-config/isomorphic/utils/hash-application-name.ts
+import md5 from "md5";
+function hashApplicationName(name) {
+  if (!name) {
+    throw new Error("Application name is required to generate hash");
+  }
+  return md5(name).substring(0, 6).padStart(6, "0");
+}
+
 // src/config/microfrontends-config/isomorphic/utils/generate-asset-prefix.ts
 var PREFIX = "vc-ap";
 function generateAssetPrefixFromName({
@@ -597,7 +565,7 @@ function generateAssetPrefixFromName({
   if (!name) {
     throw new Error("Name is required to generate an asset prefix");
   }
-  return `${PREFIX}-${name}`;
+  return `${PREFIX}-${hashApplicationName(name)}`;
 }
 
 // src/config/microfrontends-config/isomorphic/utils/generate-port.ts
@@ -757,7 +725,13 @@ var Application = class {
     return this.default;
   }
   getAssetPrefix() {
-    return generateAssetPrefixFromName({ name: this.name });
+    const generatedAssetPrefix = generateAssetPrefixFromName({
+      name: this.name
+    });
+    if ("assetPrefix" in this.serialized) {
+      return this.serialized.assetPrefix ?? generatedAssetPrefix;
+    }
+    return generatedAssetPrefix;
   }
   getAutomationBypassEnvVarName() {
     return generateAutomationBypassEnvVarName({ name: this.name });
@@ -891,7 +865,7 @@ var MicrofrontendConfigIsomorphic = class {
     );
     if (!app) {
       throw new MicrofrontendError(
-        `Could not find microfrontends configuration for application "${name}"`,
+        `Could not find microfrontends configuration for application "${name}". If the name in package.json differs from your Vercel Project name, set the \`packageName\` field for the application in \`microfrontends.json\` to ensure that the configuration can be found locally.`,
         {
           type: "application",
           subtype: "not_found"
@@ -936,23 +910,6 @@ var MicrofrontendConfigIsomorphic = class {
   toSchemaJson() {
     return this.serialized.config;
   }
-  toClientConfig() {
-    const applications = Object.fromEntries(
-      Object.entries(this.childApplications).map(([name, application]) => [
-        name,
-        {
-          default: false,
-          routing: application.routing
-        }
-      ])
-    );
-    applications[this.defaultApplication.name] = {
-      default: true
-    };
-    return new MicrofrontendConfigClient({
-      applications
-    });
-  }
   serialize() {
     return this.serialized;
   }
@@ -965,8 +922,31 @@ function getApplicationContext(opts) {
   if (opts?.appName) {
     return { name: opts.appName };
   }
+  if (process.env.VERCEL_PROJECT_NAME) {
+    return {
+      name: process.env.VERCEL_PROJECT_NAME,
+      projectName: process.env.VERCEL_PROJECT_NAME
+    };
+  }
   if (process.env.NX_TASK_TARGET_PROJECT) {
-    return { name: process.env.NX_TASK_TARGET_PROJECT };
+    return {
+      name: process.env.NX_TASK_TARGET_PROJECT,
+      packageJsonName: process.env.NX_TASK_TARGET_PROJECT
+    };
+  }
+  try {
+    const vercelProjectJsonPath = fs5.readFileSync(
+      path4.join(opts?.packageRoot || ".", ".vercel", "project.json"),
+      "utf-8"
+    );
+    const projectJson = JSON.parse(vercelProjectJsonPath);
+    if (projectJson.projectName) {
+      return {
+        name: projectJson.projectName,
+        projectName: projectJson.projectName
+      };
+    }
+  } catch (_) {
   }
   try {
     const packageJsonString = fs5.readFileSync(
@@ -984,7 +964,7 @@ function getApplicationContext(opts) {
         }
       );
     }
-    return { name: packageJson.name };
+    return { name: packageJson.name, packageJsonName: packageJson.name };
   } catch (err) {
     throw MicrofrontendError.handle(err, {
       fileName: "package.json"
@@ -1124,6 +1104,10 @@ var schema_default = {
         routing: {
           $ref: "#/definitions/Routing",
           description: "Groups of path expressions that are routed to this application."
+        },
+        assetPrefix: {
+          type: "string",
+          description: "The name of the asset prefix to use instead of the auto-generated name.\n\nThe asset prefix is used to prefix all paths to static assets, such as JS, CSS, or images that are served by a specific application. It is necessary to ensure there are no conflicts with other applications on the same domain.\n\nAn auto-generated asset prefix of the form `vc-ap-<hash>` is used when this field is not provided.\n\nWhen this field is provided, `/${assetPrefix}/:path*` must also be added to the list of paths in the `routing` field. Changing the asset prefix after a microfrontend application has already been deployed is not a forwards and backwards compatible change, and the asset prefix should be added to the `routing` field and deployed before setting the `assetPrefix` field."
         }
       },
       required: [
@@ -1349,7 +1333,7 @@ var MicrofrontendsServer = class {
     }
     try {
       const packageRoot = findPackageRoot(directory);
-      const { name: appName } = getApplicationContext({ packageRoot });
+      const applicationContext = getApplicationContext({ packageRoot });
       const maybeConfig = findConfig({ dir: packageRoot });
       if (maybeConfig) {
         return MicrofrontendsServer.fromFile({
@@ -1383,7 +1367,7 @@ var MicrofrontendsServer = class {
         if (isMonorepo2) {
           const defaultPackage = inferMicrofrontendsLocation({
             repositoryRoot,
-            applicationName: appName
+            applicationContext
           });
           const maybeConfigFromDefault = findConfig({ dir: defaultPackage });
           if (maybeConfigFromDefault) {
@@ -1563,6 +1547,20 @@ ${indent} - Automatically redirecting all requests to local microfrontends proxy
   return { next };
 }
 
+// src/next/config/transforms/transpile-packages.ts
+function transform5(args) {
+  const { next } = args;
+  if (next.transpilePackages === void 0 || !next.transpilePackages.includes("@vercel/microfrontends")) {
+    next.transpilePackages = [
+      ...next.transpilePackages || [],
+      "@vercel/microfrontends"
+    ];
+  }
+  return {
+    next
+  };
+}
+
 // src/next/config/transforms/rewrites.ts
 function debugRewrites(rewrites) {
   if (process.env.MFE_DEBUG) {
@@ -1595,7 +1593,7 @@ function rewritesMapToArr(rewrites) {
     ];
   });
 }
-function transform5(args) {
+function transform6(args) {
   const { app, next } = args;
   const buildBeforeFiles = () => {
     const rewrites = /* @__PURE__ */ new Map();
@@ -1679,7 +1677,7 @@ var SortChunksPlugin = class {
 
 // src/next/config/transforms/webpack.ts
 var nextVersion = getNextJsVersion();
-function transform6(args) {
+function transform7(args) {
   const useDefineServer = args.opts?.preferWebpackEnvironmentPlugin ? false : semver.gte(nextVersion, "15.4.0-canary.41");
   const { next, microfrontend, opts } = args;
   const configWithWebpack = {
@@ -1763,9 +1761,132 @@ var transforms = {
   buildId: transform2,
   draftMode: transform3,
   redirects: transform4,
-  rewrites: transform5,
-  webpack: transform6
+  rewrites: transform6,
+  transpilePackages: transform5,
+  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) {
@@ -1790,8 +1911,11 @@ function setEnvironment({
 }) {
   const clientEnvs = {
     NEXT_PUBLIC_MFE_CURRENT_APPLICATION: app.name,
+    NEXT_PUBLIC_MFE_CURRENT_APPLICATION_HASH: hashApplicationName(app.name),
     NEXT_PUBLIC_MFE_CLIENT_CONFIG: JSON.stringify(
-      microfrontends.config.toClientConfig().serialize()
+      fromIsomorphicConfig(microfrontends.config, {
+        removeFlaggedPaths: true
+      }).serialize()
     ),
     ...process.env.ROUTE_OBSERVABILITY_TO_THIS_PROJECT && app.getAssetPrefix() ? {
       NEXT_PUBLIC_VERCEL_OBSERVABILITY_BASEPATH: `/${app.getAssetPrefix()}/_vercel`
@@ -1799,7 +1923,10 @@ function setEnvironment({
   };
   const serverEnvs = {
     MFE_CURRENT_APPLICATION: app.name,
-    MFE_CONFIG: JSON.stringify(microfrontends.config.getConfig())
+    MFE_CONFIG: JSON.stringify(microfrontends.config.getConfig()),
+    MFE_CLIENT_CONFIG_FULL: JSON.stringify(
+      fromIsomorphicConfig(microfrontends.config).serialize()
+    )
   };
   const allEnvs = { ...clientEnvs, ...serverEnvs };
   for (const [key, value] of Object.entries(allEnvs)) {
@@ -1829,13 +1956,13 @@ function withMicrofrontends(nextConfig, opts) {
   const app = microfrontends.config.getApplication(fromApp);
   setEnvironment({ app, microfrontends });
   let next = { ...nextConfig };
-  for (const [key, transform7] of typedEntries(transforms)) {
+  for (const [key, transform8] of typedEntries(transforms)) {
     if (opts?.skipTransforms?.includes(key)) {
       console.log(`Skipping ${key} transform`);
       continue;
     }
     try {
-      const transformedConfig = transform7({
+      const transformedConfig = transform8({
         app,
         next,
         microfrontend: microfrontends.config,