feat: host init inject option parameter (#343)

Author: szebest

README.md

@@ -109,6 +109,11 @@ export default defineConfig({
       },
       filename: "remoteEntry.js",
       shared: ["vue"],
+      // Optional parameter that controls where the host initialization script is injected.
+      // By default, it is injected into the index.html file.
+      // You can set this to "entry" to inject it into the entry script instead.
+      // Useful if your application does not load from index.html.
+      hostInitInjectLocation: "html", // or "entry"
     }),
   ],
   server: {
@@ -124,6 +129,7 @@ export default defineConfig({
 ```
 
 The host app configuration specifies its name, the filename of its exposed remote entry remoteEntry.js, and importantly, the configuration of the remote application to load.
+You can specify the place the host initialization file is injected with the **hostInitInjectLocation** option, which is described in the example code above.
 
 ## Load the Remote App
 

src/index.ts

@@ -25,7 +25,7 @@ import { VIRTUAL_EXPOSES } from './virtualModules/virtualExposes';
 
 function federation(mfUserOptions: ModuleFederationOptions): Plugin[] {
   const options = normalizeModuleFederationOptions(mfUserOptions);
-  const { name, remotes, shared, filename } = options;
+  const { name, remotes, shared, filename, hostInitInjectLocation } = options;
   if (!name) throw new Error('name is required');
 
   return [
@@ -50,7 +50,7 @@ function federation(mfUserOptions: ModuleFederationOptions): Plugin[] {
     ...addEntry({
       entryName: 'hostInit',
       entryPath: getHostAutoInitPath(),
-      inject: 'html',
+      inject: hostInitInjectLocation,
     }),
     ...addEntry({
       entryName: 'virtualExposes',

src/plugins/pluginAddEntry.ts

@@ -3,11 +3,13 @@ import * as path from 'pathe';
 import { Plugin } from 'vite';
 import { mapCodeToCodeWithSourcemap } from '../utils/mapCodeToCodeWithSourcemap';
 
+import { NormalizedModuleFederationOptions } from '../utils/normalizeModuleFederationOptions';
+
 interface AddEntryOptions {
   entryName: string;
   entryPath: string;
   fileName?: string;
-  inject?: 'entry' | 'html';
+  inject?: NormalizedModuleFederationOptions['hostInitInjectLocation'];
 }
 
 function getFirstHtmlEntryFile(entryFiles: string[]): string | undefined {

src/utils/__tests__/helpers.ts

@@ -17,6 +17,7 @@ export function getDefaultMockOptions(
     manifest: false,
     shareStrategy: 'loaded-first',
     virtualModuleDir: '__mf__virtual',
+    hostInitInjectLocation: 'html',
     ...overrides,
   };
 }

src/utils/__tests__/normalizeModuleFederationOption.test.ts

@@ -27,6 +27,7 @@ describe('normalizeModuleFederationOption', () => {
       shareStrategy: 'loaded-first',
       ignoreOrigin: false,
       virtualModuleDir: '__mf__virtual',
+      hostInitInjectLocation: 'html',
     });
   });
 

src/utils/normalizeModuleFederationOptions.ts

@@ -306,6 +306,7 @@ export type ModuleFederationOptions = {
   shareStrategy?: ShareStrategy;
   ignoreOrigin?: boolean;
   virtualModuleDir?: string;
+  hostInitInjectLocation?: HostInitInjectLocationOptions;
 };
 
 export interface NormalizedModuleFederationOptions {
@@ -328,8 +329,11 @@ export interface NormalizedModuleFederationOptions {
   publicPath?: string;
   ignoreOrigin?: boolean;
   virtualModuleDir: string;
+  hostInitInjectLocation: HostInitInjectLocationOptions;
 }
 
+type HostInitInjectLocationOptions = 'entry' | 'html';
+
 interface PluginDevOptions {
   disableLiveReload?: boolean;
   disableHotTypesReload?: boolean;
@@ -416,5 +420,6 @@ export function normalizeModuleFederationOptions(
     shareStrategy: options.shareStrategy || 'version-first',
     ignoreOrigin: options.ignoreOrigin || false,
     virtualModuleDir: options.virtualModuleDir || '__mf__virtual',
+    hostInitInjectLocation: options.hostInitInjectLocation || 'html',
   });
 }