[Blazor] Flow the WebAssembly options from Server to client through SSR marker (#60714)

Author: maraf

src/Components/Endpoints/src/DependencyInjection/RazorComponentsServiceCollectionExtensions.cs

@@ -71,6 +71,7 @@ public static IRazorComponentsBuilder AddRazorComponents(this IServiceCollection
  services.TryAddScoped<AuthenticationStateProvider, ServerAuthenticationStateProvider>();
  services.AddSupplyValueFromQueryProvider();
  services.TryAddCascadingValue(sp => sp.GetRequiredService<EndpointHtmlRenderer>().HttpContext);
+ services.TryAddScoped<WebAssemblySettingsEmitter>();
 
  services.TryAddScoped<ResourceCollectionProvider>();
 

src/Components/Endpoints/src/DependencyInjection/WebAssemblySettingsEmitter.cs

@@ -0,0 +1,53 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using System.Diagnostics.CodeAnalysis;
+using Microsoft.Extensions.Hosting;
+
+namespace Microsoft.AspNetCore.Components.Endpoints;
+
+internal record WebAssemblySettings(string EnvironmentName, Dictionary<string, string> EnvironmentVariables);
+
+internal class WebAssemblySettingsEmitter(IHostEnvironment hostEnvironment)
+{
+ private bool wasEmittedAlready;
+
+ private const string dotnetModifiableAssembliesName = "DOTNET_MODIFIABLE_ASSEMBLIES";
+ private const string aspnetcoreBrowserToolsName = "__ASPNETCORE_BROWSER_TOOLS";
+
+ private static readonly string? s_dotnetModifiableAssemblies = GetNonEmptyEnvironmentVariableValue(dotnetModifiableAssembliesName);
+ private static readonly string? s_aspnetcoreBrowserTools = GetNonEmptyEnvironmentVariableValue(aspnetcoreBrowserToolsName);
+
+ private static string? GetNonEmptyEnvironmentVariableValue(string name)
+ => Environment.GetEnvironmentVariable(name) is { Length: > 0 } value ? value : null;
+
+ public bool TryGetSettingsOnce([NotNullWhen(true)] out WebAssemblySettings? settings)
+ {
+ if (wasEmittedAlready)
+ {
+ settings = default;
+ return false;
+ }
+
+ var environmentVariables = new Dictionary<string, string>();
+
+ // DOTNET_MODIFIABLE_ASSEMBLIES is used by the runtime to initialize hot-reload specific environment variables and is configured
+ // by the launching process (dotnet-watch / Visual Studio).
+ // Always add the header if the environment variable is set, regardless of the kind of environment.
+ if (s_dotnetModifiableAssemblies != null)
+ {
+ environmentVariables[dotnetModifiableAssembliesName] = s_dotnetModifiableAssemblies;
+ }
+
+ // See https://github.com/dotnet/aspnetcore/issues/37357#issuecomment-941237000
+ // Translate the _ASPNETCORE_BROWSER_TOOLS environment configured by the browser tools agent in to a HTTP response header.
+ if (s_aspnetcoreBrowserTools != null)
+ {
+ environmentVariables[aspnetcoreBrowserToolsName] = s_aspnetcoreBrowserTools;
+ }
+
+ wasEmittedAlready = true;
+ settings = new (hostEnvironment.EnvironmentName, environmentVariables);
+ return true;
+ }
+}

src/Components/Endpoints/src/Rendering/EndpointHtmlRenderer.Streaming.cs

@@ -271,6 +271,15 @@ private void WriteComponentHtml(int componentId, TextWriter output, bool allowBo
  _httpContext.Response.Headers.CacheControl = "no-cache, no-store, max-age=0";
  }
 
+ if (marker.Type is ComponentMarker.WebAssemblyMarkerType or ComponentMarker.AutoMarkerType)
+ {
+ if (_httpContext.RequestServices.GetRequiredService<WebAssemblySettingsEmitter>().TryGetSettingsOnce(out var settings))
+ {
+ var settingsJson = JsonSerializer.Serialize(settings, ServerComponentSerializationSettings.JsonSerializationOptions);
+ output.Write($"<!--Blazor-WebAssembly:{settingsJson}-->");
+ }
+ }
+
  var serializedStartRecord = JsonSerializer.Serialize(marker, ServerComponentSerializationSettings.JsonSerializationOptions);
  output.Write("<!--Blazor:");
  output.Write(serializedStartRecord);

src/Components/Endpoints/test/EndpointHtmlRendererTest.cs

@@ -34,6 +34,7 @@ public class EndpointHtmlRendererTest
 {
  private const string MarkerPrefix = "<!--Blazor:";
  private const string PrerenderedComponentPattern = "^<!--Blazor:(?<preamble>.*?)-->(?<content>.+?)<!--Blazor:(?<epilogue>.*?)-->$";
+ private const string WebAssemblyOptionsPattern = "^<!--Blazor-WebAssembly:(.*?)-->";
  private const string ComponentPattern = "^<!--Blazor:(.*?)-->$";
 
  private static readonly IDataProtectionProvider _dataprotectorProvider = new EphemeralDataProtectionProvider();
@@ -57,6 +58,7 @@ public async Task CanRender_ParameterlessComponent_ClientMode()
  var result = await renderer.PrerenderComponentAsync(httpContext, typeof(SimpleComponent), new InteractiveWebAssemblyRenderMode(prerender: false), ParameterView.Empty);
  await renderer.Dispatcher.InvokeAsync(() => result.WriteTo(writer, HtmlEncoder.Default));
  var content = writer.ToString();
+ content = AssertAndStripWebAssemblyOptions(content);
  var match = Regex.Match(content, ComponentPattern);
 
  // Assert
@@ -80,6 +82,7 @@ public async Task CanPrerender_ParameterlessComponent_ClientMode()
  var result = await renderer.PrerenderComponentAsync(httpContext, typeof(SimpleComponent), RenderMode.InteractiveWebAssembly, ParameterView.Empty);
  await renderer.Dispatcher.InvokeAsync(() => result.WriteTo(writer, HtmlEncoder.Default));
  var content = writer.ToString();
+ content = AssertAndStripWebAssemblyOptions(content);
  var match = Regex.Match(content, PrerenderedComponentPattern, RegexOptions.Multiline);
 
  // Assert
@@ -123,6 +126,7 @@ public async Task CanRender_ComponentWithParameters_ClientMode()
  }));
  await renderer.Dispatcher.InvokeAsync(() => result.WriteTo(writer, HtmlEncoder.Default));
  var content = writer.ToString();
+ content = AssertAndStripWebAssemblyOptions(content);
  var match = Regex.Match(content, ComponentPattern);
 
  // Assert
@@ -160,6 +164,7 @@ public async Task CanRender_ComponentWithNullParameters_ClientMode()
  }));
  await renderer.Dispatcher.InvokeAsync(() => result.WriteTo(writer, HtmlEncoder.Default));
  var content = writer.ToString();
+ content = AssertAndStripWebAssemblyOptions(content);
  var match = Regex.Match(content, ComponentPattern);
 
  // Assert
@@ -195,6 +200,7 @@ public async Task CanPrerender_ComponentWithParameters_ClientMode()
  }));
  await renderer.Dispatcher.InvokeAsync(() => result.WriteTo(writer, HtmlEncoder.Default));
  var content = writer.ToString();
+ content = AssertAndStripWebAssemblyOptions(content);
  var match = Regex.Match(content, PrerenderedComponentPattern, RegexOptions.Multiline);
 
  // Assert
@@ -244,6 +250,7 @@ public async Task CanPrerender_ComponentWithNullParameters_ClientMode()
  }));
  await renderer.Dispatcher.InvokeAsync(() => result.WriteTo(writer, HtmlEncoder.Default));
  var content = writer.ToString();
+ content = AssertAndStripWebAssemblyOptions(content);
  var match = Regex.Match(content, PrerenderedComponentPattern, RegexOptions.Multiline);
 
  // Assert
@@ -1063,6 +1070,7 @@ public async Task RenderMode_CanRenderInteractiveComponents()
  var lines = content.Replace("\r\n", "\n").Split('\n');
  var serverMarkerMatch = Regex.Match(lines[0], PrerenderedComponentPattern);
  var serverNonPrerenderedMarkerMatch = Regex.Match(lines[1], ComponentPattern);
+ lines[2] = AssertAndStripWebAssemblyOptions(lines[2]);
  var webAssemblyMarkerMatch = Regex.Match(lines[2], PrerenderedComponentPattern);
  var webAssemblyNonPrerenderedMarkerMatch = Regex.Match(lines[3], ComponentPattern);
 
@@ -1167,6 +1175,8 @@ public async Task DoesNotEmitNestedRenderModeBoundaries()
  var numMarkers = Regex.Matches(content, MarkerPrefix).Count;
  Assert.Equal(2, numMarkers); // A start and an end marker
 
+ content = AssertAndStripWebAssemblyOptions(content);
+
  var match = Regex.Match(content, PrerenderedComponentPattern, RegexOptions.Singleline);
  Assert.True(match.Success);
  var preamble = match.Groups["preamble"].Value;
@@ -1498,6 +1508,14 @@ await renderer.Dispatcher.InvokeAsync(() => renderer.RenderRootComponentAsync(
  }
  }
 
+ private string AssertAndStripWebAssemblyOptions(string content)
+ {
+ var wasmOptionsMatch = Regex.Match(content, WebAssemblyOptionsPattern);
+ Assert.True(wasmOptionsMatch.Success);
+ content = content.Substring(wasmOptionsMatch.Groups[0].Length);
+ return content;
+ }
+
  private class NamedEventHandlerComponent : ComponentBase
  {
  [Parameter]
@@ -1681,6 +1699,7 @@ private static ServiceCollection CreateDefaultServiceCollection()
  services.AddSingleton<AntiforgeryStateProvider, EndpointAntiforgeryStateProvider>();
  services.AddSingleton<ICascadingValueSupplier>(_ => new SupplyParameterFromFormValueProvider(null, ""));
  services.AddScoped<ResourceCollectionProvider>();
+ services.AddSingleton(new WebAssemblySettingsEmitter(new TestEnvironment(Environments.Development)));
  return services;
  }
 

src/Components/Web.JS/src/Boot.WebAssembly.Common.ts

@@ -11,7 +11,7 @@ import { SharedMemoryRenderBatch } from './Rendering/RenderBatch/SharedMemoryRen
 import { Pointer } from './Platform/Platform';
 import { WebAssemblyStartOptions } from './Platform/WebAssemblyStartOptions';
 import { addDispatchEventMiddleware } from './Rendering/WebRendererInteropMethods';
-import { WebAssemblyComponentDescriptor, discoverWebAssemblyPersistedState } from './Services/ComponentDescriptorDiscovery';
+import { WebAssemblyComponentDescriptor, WebAssemblyServerOptions, discoverWebAssemblyPersistedState } from './Services/ComponentDescriptorDiscovery';
 import { receiveDotNetDataStream } from './StreamingInterop';
 import { WebAssemblyComponentAttacher } from './Platform/WebAssemblyComponentAttacher';
 import { MonoConfig } from '@microsoft/dotnet-runtime';
@@ -68,23 +68,23 @@ export function setWebAssemblyOptions(initializersReady: Promise<Partial<WebAsse
  }
 }
 
-export function startWebAssembly(components: RootComponentManager<WebAssemblyComponentDescriptor>): Promise<void> {
+export function startWebAssembly(components: RootComponentManager<WebAssemblyComponentDescriptor>, options: WebAssemblyServerOptions | undefined): Promise<void> {
  if (startPromise !== undefined) {
  throw new Error('Blazor WebAssembly has already started.');
  }
 
- startPromise = new Promise(startCore.bind(null, components));
+ startPromise = new Promise(startCore.bind(null, components, options));
 
  return startPromise;
 }
 
-async function startCore(components: RootComponentManager<WebAssemblyComponentDescriptor>, resolve, _) {
+async function startCore(components: RootComponentManager<WebAssemblyComponentDescriptor>, options: WebAssemblyServerOptions | undefined, resolve, _) {
  if (inAuthRedirectIframe()) {
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  await new Promise(() => { }); // See inAuthRedirectIframe for explanation
  }
 
- const platformLoadPromise = loadWebAssemblyPlatformIfNotStarted();
+ const platformLoadPromise = loadWebAssemblyPlatformIfNotStarted(options);
 
  addDispatchEventMiddleware((browserRendererId, eventHandlerId, continuation) => {
  // It's extremely unusual, but an event can be raised while we're in the middle of synchronously applying a
@@ -206,13 +206,19 @@ export function waitForBootConfigLoaded(): Promise<MonoConfig> {
  return bootConfigPromise;
 }
 
-export function loadWebAssemblyPlatformIfNotStarted(): Promise<void> {
+export function loadWebAssemblyPlatformIfNotStarted(serverOptions: WebAssemblyServerOptions | undefined): Promise<void> {
  platformLoadPromise ??= (async () => {
  await initializersPromise;
  const finalOptions = options ?? {};
+ if (!finalOptions.environment) {
+ finalOptions.environment = serverOptions?.environmentName ?? undefined;
+ }
  const existingConfig = options?.configureRuntime;
  finalOptions.configureRuntime = (config) => {
  existingConfig?.(config);
+ if (serverOptions?.environmentVariables) {
+ config.withEnvironmentVariables(serverOptions.environmentVariables);
+ }
  if (waitForRootComponents) {
  config.withEnvironmentVariable('__BLAZOR_WEBASSEMBLY_WAIT_FOR_ROOT_COMPONENTS', 'true');
  }

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

@@ -6,7 +6,7 @@ import { Blazor } from './GlobalExports';
 import { shouldAutoStart } from './BootCommon';
 import { WebAssemblyStartOptions } from './Platform/WebAssemblyStartOptions';
 import { setWebAssemblyOptions, startWebAssembly } from './Boot.WebAssembly.Common';
-import { WebAssemblyComponentDescriptor, discoverComponents } from './Services/ComponentDescriptorDiscovery';
+import { WebAssemblyComponentDescriptor, discoverComponents, discoverWebAssemblyOptions } from './Services/ComponentDescriptorDiscovery';
 import { DotNet } from '@microsoft/dotnet-js-interop';
 import { InitialRootComponentsList } from './Services/InitialRootComponentsList';
 import { JSEventRegistry } from './Services/JSEventRegistry';
@@ -24,8 +24,10 @@ async function boot(options?: Partial<WebAssemblyStartOptions>): Promise<void> {
 
  JSEventRegistry.create(Blazor);
  const webAssemblyComponents = discoverComponents(document, 'webassembly') as WebAssemblyComponentDescriptor[];
+ const webAssemblyOptions = discoverWebAssemblyOptions(document);
+
  const components = new InitialRootComponentsList(webAssemblyComponents);
- await startWebAssembly(components);
+ await startWebAssembly(components, webAssemblyOptions);
 }
 
 Blazor.start = boot;

src/Components/Web.JS/src/Rendering/DomMerging/DomSync.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 { AutoComponentDescriptor, ComponentDescriptor, ServerComponentDescriptor, WebAssemblyComponentDescriptor, canMergeDescriptors, discoverComponents, mergeDescriptors } from '../../Services/ComponentDescriptorDiscovery';
+import { AutoComponentDescriptor, ComponentDescriptor, ServerComponentDescriptor, WebAssemblyComponentDescriptor, WebAssemblyServerOptions, canMergeDescriptors, discoverComponents, discoverWebAssemblyOptions, mergeDescriptors } from '../../Services/ComponentDescriptorDiscovery';
 import { isInteractiveRootComponentElement } from '../BrowserRenderer';
 import { applyAnyDeferredValue } from '../DomSpecialPropertyUtil';
 import { LogicalElement, getLogicalChildrenArray, getLogicalNextSibling, getLogicalParent, getLogicalRootDescriptor, insertLogicalChild, insertLogicalChildBefore, isLogicalElement, toLogicalElement, toLogicalRootCommentElement } from '../LogicalElements';
@@ -13,6 +13,7 @@ let descriptorHandler: DescriptorHandler | null = null;
 
 export interface DescriptorHandler {
  registerComponent(descriptor: ComponentDescriptor): void;
+ setWebAssemblyOptions(options: WebAssemblyServerOptions | undefined): void;
 }
 
 export function attachComponentDescriptorHandler(handler: DescriptorHandler) {
@@ -21,6 +22,8 @@ export function attachComponentDescriptorHandler(handler: DescriptorHandler) {
 
 export function registerAllComponentDescriptors(root: Node) {
  const descriptors = upgradeComponentCommentsToLogicalRootComments(root);
+ const webAssemblyOptions = discoverWebAssemblyOptions(root);
+ descriptorHandler?.setWebAssemblyOptions(webAssemblyOptions);
 
  for (const descriptor of descriptors) {
  descriptorHandler?.registerComponent(descriptor);
@@ -168,7 +171,7 @@ function treatAsMatch(destination: Node, source: Node) {
  }
 
  if (destinationRootDescriptor) {
- // Update the existing descriptor with hte new descriptor's data
+ // Update the existing descriptor with the new descriptor's data
  mergeDescriptors(destinationRootDescriptor, sourceRootDescriptor);
 
  const isDestinationInteractive = isInteractiveRootComponentElement(destinationAsLogicalElement);

src/Components/Web.JS/src/Services/ComponentDescriptorDiscovery.ts

@@ -15,6 +15,16 @@ export function discoverComponents(root: Node, type: 'webassembly' | 'server' |
 const blazorServerStateCommentRegularExpression = /^\s*Blazor-Server-Component-State:(?<state>[a-zA-Z0-9+/=]+)$/;
 const blazorWebAssemblyStateCommentRegularExpression = /^\s*Blazor-WebAssembly-Component-State:(?<state>[a-zA-Z0-9+/=]+)$/;
 const blazorWebInitializerCommentRegularExpression = /^\s*Blazor-Web-Initializers:(?<initializers>[a-zA-Z0-9+/=]+)$/;
+const blazorWebAssemblyOptionsCommentRegularExpression = /^\s*Blazor-WebAssembly:[^{]*(?<options>.*)$/;
+
+export function discoverWebAssemblyOptions(root: Node): WebAssemblyServerOptions | undefined {
+ const optionsJson = discoverBlazorComment(root, blazorWebAssemblyOptionsCommentRegularExpression, 'options');
+ if (!optionsJson) {
+ return undefined;
+ }
+ const options = JSON.parse(optionsJson);
+ return options;
+}
 
 export function discoverServerPersistedState(node: Node): string | null | undefined {
  return discoverBlazorComment(node, blazorServerStateCommentRegularExpression);
@@ -339,6 +349,11 @@ export type ServerComponentDescriptor = ServerComponentMarker & DescriptorData;
 export type WebAssemblyComponentDescriptor = WebAssemblyComponentMarker & DescriptorData;
 export type AutoComponentDescriptor = AutoComponentMarker & DescriptorData;
 
+export type WebAssemblyServerOptions = {
+ environmentName: string,
+ environmentVariables: { [i: string]: string; }
+};
+
 type DescriptorData = {
  uniqueId: number;
  start: Comment;

src/Components/Web.JS/src/Services/WebRootComponentManager.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 { ComponentDescriptor, ComponentMarker, descriptorToMarker } from './ComponentDescriptorDiscovery';
+import { ComponentDescriptor, ComponentMarker, descriptorToMarker, WebAssemblyServerOptions } from './ComponentDescriptorDiscovery';
 import { isRendererAttached, registerRendererAttachedListener } from '../Rendering/WebRendererInteropMethods';
 import { WebRendererId } from '../Rendering/WebRendererId';
 import { DescriptorHandler } from '../Rendering/DomMerging/DomSync';
@@ -63,6 +63,8 @@ export class WebRootComponentManager implements DescriptorHandler, RootComponent
 
  private _circuitInactivityTimeoutId: any;
 
+ private _webAssemblyOptions: WebAssemblyServerOptions | undefined;
+
  // Implements RootComponentManager.
  // An empty array becuase all root components managed
  // by WebRootComponentManager are added and removed dynamically.
@@ -94,6 +96,10 @@ export class WebRootComponentManager implements DescriptorHandler, RootComponent
  this.rootComponentsMayRequireRefresh();
  }
 
+ public setWebAssemblyOptions(webAssemblyOptions: WebAssemblyServerOptions | undefined): void {
+ this._webAssemblyOptions = webAssemblyOptions;
+ }
+
  public registerComponent(descriptor: ComponentDescriptor) {
  if (this._seenDescriptors.has(descriptor)) {
  return;
@@ -132,7 +138,7 @@ export class WebRootComponentManager implements DescriptorHandler, RootComponent
 
  setWaitForRootComponents();
 
- const loadWebAssemblyPromise = loadWebAssemblyPlatformIfNotStarted();
+ const loadWebAssemblyPromise = loadWebAssemblyPlatformIfNotStarted(this._webAssemblyOptions);
  const bootConfig = await waitForBootConfigLoaded();
 
  if (maxParallelDownloadsOverride !== undefined) {
@@ -182,7 +188,7 @@ export class WebRootComponentManager implements DescriptorHandler, RootComponent
  this.startLoadingWebAssemblyIfNotStarted();
 
  if (!hasStartedWebAssembly()) {
- await startWebAssembly(this);
+ await startWebAssembly(this, this._webAssemblyOptions);
  }
  }
 

src/Components/WebAssembly/Server/src/Builder/WebAssemblyRazorComponentsEndpointConventionBuilderExtensions.cs

@@ -59,7 +59,6 @@ public static RazorComponentsEndpointConventionBuilder AddInteractiveWebAssembly
  var descriptors = StaticAssetsEndpointDataSourceHelper.ResolveStaticAssetDescriptors(endpointBuilder, options.StaticAssetsManifestPath);
  if (descriptors != null && descriptors.Count > 0)
  {
- ComponentWebAssemblyConventions.AddBlazorWebAssemblyConventions(descriptors, environment);
  return builder;
  }