Skip to content

[Blazor] Javascript bundler friendly #62417

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jun 20, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/Components/Web.JS/rollup.config.mjs
Original file line number Diff line number Diff line change
@@ -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 {
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -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;
18 changes: 14 additions & 4 deletions src/Components/Web.JS/src/JSInitializers/JSInitializers.ts
Original file line number Diff line number Diff line change
@@ -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;
}
10 changes: 5 additions & 5 deletions src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts
Original file line number Diff line number Diff line change
@@ -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 {