feat: add publicPath option (#332)

Author: pcfreak30

src/plugins/pluginMFManifest.ts

@@ -17,6 +17,7 @@ import {
   processModuleAssets,
   trackAsset,
 } from '../utils/cssModuleHelpers';
+import { resolvePublicPath } from '../utils/publicPath';
 
 // Helper to build share key map with proper context typing
 interface BuildFileToShareKeyMapContext {
@@ -138,8 +139,7 @@ const Manifest = (): Plugin[] => {
         if (_command === 'serve') {
           base = (config.server.origin || '') + config.base;
         }
-        publicPath =
-          _originalConfigBase === '' ? 'auto' : base ? base.replace(/\/?$/, '/') : 'auto';
+        publicPath = resolvePublicPath(mfOptions, base, _originalConfigBase);
       },
       /**
        * Generates the module federation manifest file

src/plugins/pluginProxyRemoteEntry.ts

@@ -9,6 +9,7 @@ import {
   VIRTUAL_EXPOSES,
 } from '../virtualModules';
 import { parsePromise } from './pluginModuleParseEnd';
+import { resolvePublicPath } from '../utils/publicPath';
 
 const filter: (id: string) => boolean = createFilter();
 
@@ -60,10 +61,13 @@ export default function (): Plugin {
             typeof viteConfig.server?.host === 'string' && viteConfig.server.host !== '0.0.0.0'
               ? viteConfig.server.host
               : 'localhost';
+          const publicPath = JSON.stringify(
+            resolvePublicPath(options, viteConfig.base) + options.filename
+          );
           return `
           const origin = (window && ${!options.ignoreOrigin}) ? window.origin : "//${host}:${viteConfig.server?.port}"
-          const remoteEntryPromise = await import(origin + "${viteConfig.base + options.filename}")
-          // __tla only serves as a hack for vite-plugin-top-level-await. 
+          const remoteEntryPromise = await import(origin + ${publicPath})
+          // __tla only serves as a hack for vite-plugin-top-level-await.
           Promise.resolve(remoteEntryPromise)
           .then(remoteEntry => {
             return Promise.resolve(remoteEntry.__tla)

src/utils/__tests__/helpers.ts

@@ -0,0 +1,22 @@
+import type { NormalizedModuleFederationOptions } from '../normalizeModuleFederationOptions';
+
+export function getDefaultMockOptions(
+  overrides: Partial<NormalizedModuleFederationOptions> = {}
+): NormalizedModuleFederationOptions {
+  return {
+    exposes: {},
+    filename: 'remoteEntry.js',
+    library: {},
+    name: 'test',
+    remotes: {},
+    runtime: {},
+    shareScope: 'default',
+    shared: {},
+    runtimePlugins: [],
+    implementation: require.resolve('@module-federation/runtime'),
+    manifest: false,
+    shareStrategy: 'loaded-first',
+    virtualModuleDir: '__mf__virtual',
+    ...overrides,
+  };
+}

src/utils/__tests__/publicPath.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest';
+import { resolvePublicPath } from '../publicPath';
+import { getDefaultMockOptions } from './helpers';
+
+describe('resolvePublicPath', () => {
+  const mockOptions = getDefaultMockOptions();
+
+  it('should return explicitly set publicPath when provided', () => {
+    const options = {
+      ...mockOptions,
+      publicPath: 'https://cdn.example.com/',
+    };
+    expect(resolvePublicPath(options, '/vite/')).toBe('https://cdn.example.com/');
+  });
+
+  it('should return "auto" when originalBase is empty string', () => {
+    expect(resolvePublicPath(mockOptions, '/vite/', '')).toBe('auto');
+  });
+
+  it('should return viteBase with trailing slash when provided', () => {
+    expect(resolvePublicPath(mockOptions, '/vite')).toBe('/vite/');
+    expect(resolvePublicPath(mockOptions, '/vite/')).toBe('/vite/');
+  });
+
+  it('should return "auto" when no base is specified', () => {
+    expect(resolvePublicPath(mockOptions, '')).toBe('auto');
+  });
+
+  it('should return "auto" when base is undefined', () => {
+    expect(resolvePublicPath(mockOptions, undefined as unknown as string)).toBe('auto');
+  });
+
+  it('should prioritize publicPath over viteBase when both are provided', () => {
+    const options = {
+      ...mockOptions,
+      publicPath: 'https://custom.example/',
+    };
+    expect(resolvePublicPath(options, '/vite/')).toBe('https://custom.example/');
+  });
+});

src/utils/normalizeModuleFederationOptions.ts

@@ -277,6 +277,11 @@ export type ModuleFederationOptions = {
   remotes?: Record<string, string | RemoteObjectConfig> | undefined;
   runtime?: any;
   shareScope?: string;
+  /**
+   * Override the public path used for remote entries
+   * Defaults to Vite's base config or "auto" if base is empty
+   */
+  publicPath?: string;
   shared?:
     | string[]
     | Record<
@@ -320,6 +325,7 @@ export interface NormalizedModuleFederationOptions {
   dts?: boolean | PluginDtsOptions;
   shareStrategy: ShareStrategy;
   getPublicPath?: string;
+  publicPath?: string;
   ignoreOrigin?: boolean;
   virtualModuleDir: string;
 }
@@ -406,6 +412,7 @@ export function normalizeModuleFederationOptions(
     dev: options.dev,
     dts: options.dts,
     getPublicPath: options.getPublicPath,
+    publicPath: options.publicPath,
     shareStrategy: options.shareStrategy || 'version-first',
     ignoreOrigin: options.ignoreOrigin || false,
     virtualModuleDir: options.virtualModuleDir || '__mf__virtual',

src/utils/publicPath.ts

@@ -0,0 +1,32 @@
+import { NormalizedModuleFederationOptions } from './normalizeModuleFederationOptions';
+
+/**
+ * Resolves the public path for remote entries
+ * @param options - Module Federation options
+ * @param viteBase - Vite's base config value
+ * @param originalBase - Original base config before any transformations
+ * @returns The resolved public path
+ */
+export function resolvePublicPath(
+  options: NormalizedModuleFederationOptions,
+  viteBase: string,
+  originalBase?: string
+): string {
+  // Use explicitly set publicPath if provided
+  if (options.publicPath) {
+    return options.publicPath;
+  }
+
+  // Handle empty original base case
+  if (originalBase === '') {
+    return 'auto';
+  }
+
+  // Use viteBase if available, ensuring it ends with a slash
+  if (viteBase) {
+    return viteBase.replace(/\/?$/, '/');
+  }
+
+  // Fallback to auto if no base is specified
+  return 'auto';
+}