[Blazor] Javascript bundler friendly (#62417)

Author: maraf

src/Components/Web.JS/rollup.config.mjs

@@ -14,6 +14,16 @@ export default createBaseConfig({
   },
   dir: __dirname,
   updateConfig: (config, environment, _, input) => {
+    config.plugins.push({
+      name: 'Resolve dotnet.js dynamic import',
+      resolveDynamicImport(source, importer) {
+        if (source === './dotnet.js') {
+          return { id: './dotnet.js', moduleSideEffects: false, external: 'relative' };
+        }
+        return null;
+      }
+    });
+
     if (input.includes("WebView")) {
       config.output.sourcemap = 'inline';
     } else {

src/Components/Web.JS/src/JSInitializers/JSInitializers.Server.ts

@@ -3,7 +3,7 @@
 
 import { CircuitStartOptions } from '../Platform/Circuits/CircuitStartOptions';
 import { WebRendererId } from '../Rendering/WebRendererId';
-import { JSInitializer } from './JSInitializers';
+import { JSAsset, JSInitializer } from './JSInitializers';
 
 export async function fetchAndInvokeInitializers(options: Partial<CircuitStartOptions>) : Promise<JSInitializer> {
   if (options.initializers) {
@@ -19,7 +19,9 @@ export async function fetchAndInvokeInitializers(options: Partial<CircuitStartOp
     cache: 'no-cache',
   });
 
-  const initializers: string[] = await jsInitializersResponse.json();
+  const initializers = (await jsInitializersResponse.json()).map(name => ({
+    name,
+  })) as JSAsset[];
   const jsInitializer = new JSInitializer(/* singleRuntime: */ true, undefined, undefined, WebRendererId.Server);
   await jsInitializer.importInitializersAsync(initializers, [options]);
   return jsInitializer;

src/Components/Web.JS/src/JSInitializers/JSInitializers.Web.ts

@@ -4,14 +4,16 @@
 import { Logger } from '../Platform/Logging/Logger';
 import { WebStartOptions } from '../Platform/WebStartOptions';
 import { discoverWebInitializers } from '../Services/ComponentDescriptorDiscovery';
-import { JSInitializer } from './JSInitializers';
+import { JSAsset, JSInitializer } from './JSInitializers';
 
 export async function fetchAndInvokeInitializers(options: Partial<WebStartOptions>, logger: Logger) : Promise<JSInitializer> {
   const initializersElement = discoverWebInitializers(document);
   if (!initializersElement) {
     return new JSInitializer(false, logger);
   }
-  const initializers: string[] = JSON.parse(atob(initializersElement)) as string[] ?? [];
+  const initializers = (JSON.parse(atob(initializersElement)) as string[] ?? []).map(name => ({
+    name,
+  })) as JSAsset[];
   const jsInitializer = new JSInitializer(false, logger);
   await jsInitializer.importInitializersAsync(initializers, [options]);
   return jsInitializer;

src/Components/Web.JS/src/JSInitializers/JSInitializers.WebAssembly.ts

@@ -4,7 +4,7 @@
 import { MonoConfig } from '@microsoft/dotnet-runtime';
 import { WebAssemblyStartOptions } from '../Platform/WebAssemblyStartOptions';
 import { WebRendererId } from '../Rendering/WebRendererId';
-import { JSInitializer } from './JSInitializers';
+import { JSAsset, JSInitializer } from './JSInitializers';
 
 export async function fetchAndInvokeInitializers(options: Partial<WebAssemblyStartOptions>, loadedConfig: MonoConfig): Promise<JSInitializer> {
   if (options.initializers) {
@@ -20,7 +20,22 @@ export async function fetchAndInvokeInitializers(options: Partial<WebAssemblySta
       undefined,
       WebRendererId.WebAssembly
     );
-    const initializers = Object.keys((loadedConfig?.resources?.['libraryInitializers']) || {});
+
+    const configInitializers = loadedConfig?.resources?.['libraryInitializers'];
+    let initializers : JSAsset[];
+    if (!configInitializers) {
+      initializers = [];
+    }
+    else if ("length" in configInitializers) {
+      // New boot config schema.
+      initializers = configInitializers;
+    } else {
+      // Old boot config schema.
+      initializers = Object.keys(configInitializers).map(name => ({
+        name,
+      })) as JSAsset[];
+    }
+
     await jsInitializer.importInitializersAsync(initializers, initializerArguments);
     return jsInitializer;
   }

src/Components/Web.JS/src/JSInitializers/JSInitializers.WebView.ts

@@ -1,7 +1,7 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
-import { JSInitializer } from './JSInitializers';
+import { JSAsset, JSInitializer } from './JSInitializers';
 
 export async function fetchAndInvokeInitializers() : Promise<JSInitializer> {
   const jsInitializersResponse = await fetch('_framework/blazor.modules.json', {
@@ -10,7 +10,9 @@ export async function fetchAndInvokeInitializers() : Promise<JSInitializer> {
     cache: 'no-cache',
   });
 
-  const initializers: string[] = await jsInitializersResponse.json();
+  const initializers = (await jsInitializersResponse.json()).map(name => ({
+    name,
+  })) as JSAsset[];
   const jsInitializer = new JSInitializer();
   await jsInitializer.importInitializersAsync(initializers, []);
   return jsInitializer;

src/Components/Web.JS/src/JSInitializers/JSInitializers.ts

@@ -24,6 +24,11 @@ export type BlazorInitializer = {
   afterServerStarted: AfterBlazorServerStartedCallback,
 };
 
+export type JSAsset = {
+    moduleExports?: any | Promise<any>,
+    name?: string; // actually URL
+}
+
 export class JSInitializer {
   private afterStartedCallbacks: AfterBlazorStartedCallback[] = [];
 
@@ -38,7 +43,7 @@ export class JSInitializer {
     }
   }
 
-  async importInitializersAsync(initializerFiles: string[], initializerArguments: unknown[]): Promise<void> {
+  async importInitializersAsync(initializerFiles: JSAsset[], initializerArguments: unknown[]): Promise<void> {
     // This code is not called on WASM, because library intializers are imported by runtime.
 
     await Promise.all(initializerFiles.map(f => importAndInvokeInitializer(this, f)));
@@ -50,9 +55,14 @@ export class JSInitializer {
       return path;
     }
 
-    async function importAndInvokeInitializer(jsInitializer: JSInitializer, path: string): Promise<void> {
-      const adjustedPath = adjustPath(path);
-      const initializer = await import(/* webpackIgnore: true */ adjustedPath) as Partial<BlazorInitializer>;
+    async function importAndInvokeInitializer(jsInitializer: JSInitializer, asset: JSAsset): Promise<void> {
+      let adjustedPath;
+      if (!asset.moduleExports) {
+        adjustedPath = adjustPath(asset.name!);
+        asset.moduleExports = await import(/* webpackIgnore: true */ adjustedPath);
+      }
+
+      const initializer = asset.moduleExports as Partial<BlazorInitializer>;
       if (initializer === undefined) {
         return;
       }

src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts

@@ -116,22 +116,22 @@ async function importDotnetJs(startOptions: Partial<WebAssemblyStartOptions>): P
     throw new Error('This browser does not support WebAssembly.');
   }
 
-  let src = '_framework/dotnet.js';
 
   // Allow overriding the URI from which the dotnet.*.js file is loaded
   if (startOptions.loadBootResource) {
     const resourceType: WebAssemblyBootResourceType = 'dotnetjs';
-    const customSrc = startOptions.loadBootResource(resourceType, 'dotnet.js', src, '', 'js-module-dotnet');
+    const customSrc = startOptions.loadBootResource(resourceType, 'dotnet.js', '_framework/dotnet.js', '', 'js-module-dotnet');
     if (typeof (customSrc) === 'string') {
-      src = customSrc;
+      const absoluteSrc = (new URL(customSrc, document.baseURI)).toString();
+      return await import(/* webpackIgnore: true */ absoluteSrc);
     } else if (customSrc) {
       // Since we must load this via a import, it's only valid to supply a URI (and not a Request, say)
       throw new Error(`For a ${resourceType} resource, custom loaders must supply a URI string.`);
     }
   }
 
-  const absoluteSrc = (new URL(src, document.baseURI)).toString();
-  return await import(/* webpackIgnore: true */ absoluteSrc);
+  // @ts-ignore: This dynamic import is handled at runtime and does not need a type declaration.
+  return await import(/* webpackIgnore: true */ "./dotnet.js");
 }
 
 function prepareRuntimeConfig(options: Partial<WebAssemblyStartOptions>, onConfigLoadedCallback?: (loadedConfig: MonoConfig) => void): DotnetModuleConfig {