Support "auto" render mode (#11)

* Switch component discovery based on "auto". Lots of nasty hacks in here.

* Determine server/webassembly based on whether wasm files are loaded already

* Simplify sample

Author: SteveSandersonMS

src/Components/Samples/BlazorUnitedApp/Pages/CounterServer.razor renamed to src/Components/Samples/BlazorUnitedApp/Pages/CounterInteractive.razor

@@ -1,7 +1,7 @@
-@page "/counter-server"
+@page "/counter-interactive"
 
 <PageTitle>Counter</PageTitle>
 
-<h1>Counter (interactive on server)</h1>
+<h1>Counter</h1>
 
-<CounterUI InitialCount="100" rendermode="@WebComponentRenderMode.Server" />
+<CounterUI InitialCount="100" rendermode="@WebComponentRenderMode.Auto" />

src/Components/Samples/BlazorUnitedApp/Pages/CounterWebAssembly.razor

@@ -18,13 +18,8 @@
             </NavLink>
         </li>
         <li class="nav-item px-3">
-            <NavLink class="nav-link" href="counter-server">
-                <span class="oi oi-plus" aria-hidden="true"></span> Counter (server)
-            </NavLink>
-        </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="counter-webassembly">
-                <span class="oi oi-plus" aria-hidden="true"></span> Counter (wasm)
+            <NavLink class="nav-link" href="counter-interactive">
+                <span class="oi oi-plus" aria-hidden="true"></span> Counter (interactive)
             </NavLink>
         </li>
         <li class="nav-item px-3">

src/Components/Samples/BlazorUnitedApp/Shared/NavMenu.razor

@@ -20,7 +20,7 @@ import { fetchAndInvokeInitializers } from './JSInitializers/JSInitializers.Serv
 let renderingFailed = false;
 let connection: HubConnection;
 
-export async function startCircuit(userOptions?: Partial<CircuitStartOptions>): Promise<void> {
+export async function startCircuit(userOptions?: Partial<CircuitStartOptions>, components?: ServerComponentDescriptor[]): Promise<void> {
   // Establish options to be used
   const options = resolveOptions(userOptions);
   const jsInitializer = await fetchAndInvokeInitializers(options);
@@ -48,9 +48,8 @@ export async function startCircuit(userOptions?: Partial<CircuitStartOptions>):
   options.reconnectionHandler = options.reconnectionHandler || Blazor.defaultReconnectionHandler;
   logger.log(LogLevel.Information, 'Starting up Blazor server-side application.');
 
-  const components = discoverComponents(document, 'server') as ServerComponentDescriptor[];
   const appState = discoverPersistedState(document);
-  const circuit = new CircuitDescriptor(components, appState || '');
+  const circuit = new CircuitDescriptor(components || [], appState || '');
 
   // Configure navigation via SignalR
   Blazor._internal.navigationManager.listenForNavigationEvents((uri: string, state: string | undefined, intercepted: boolean): Promise<void> => {

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

@@ -5,8 +5,9 @@ import { Blazor } from './GlobalExports';
 import { shouldAutoStart } from './BootCommon';
 import { UnitedStartOptions } from './Platform/Circuits/UnitedStartOptions';
 import { startCircuit } from './Boot.Server.Common';
-import { discoverComponents, ServerComponentDescriptor, WebAssemblyComponentDescriptor } from './Services/ComponentDescriptorDiscovery';
-import { startWebAssembly } from './Boot.WebAssembly.Common';
+import { AutoComponentDescriptor, discoverComponents, ServerComponentDescriptor, WebAssemblyComponentDescriptor } from './Services/ComponentDescriptorDiscovery';
+import { beginLoadingDotNetRuntime, loadBootConfig, startWebAssembly } from './Boot.WebAssembly.Common';
+import { loadWebAssemblyResources } from './Platform/Mono/MonoPlatform';
 
 let started = false;
 
@@ -16,9 +17,30 @@ async function boot(options?: Partial<UnitedStartOptions>): Promise<void> {
   }
   started = true;
 
+  const autoComponents = discoverComponents(document, 'auto') as AutoComponentDescriptor[];
   const serverComponents = discoverComponents(document, 'server') as ServerComponentDescriptor[];
   const webAssemblyComponents = discoverComponents(document, 'webassembly') as WebAssemblyComponentDescriptor[];
 
+  // Decide out what to do about any 'auto' components. Having any of them is a trigger to start fetching the WebAssembly
+  // runtime files if they aren't already cached. If they are already cached, we'll use WebAssembly, and if not, Server.
+  if (autoComponents.length) {
+    // Because there is at least one 'auto' component, start loading the WebAssembly runtime
+    const webAssemblyBootConfigResult = await loadBootConfig(options?.webAssembly);
+    const webAssemblyResourceLoader = await beginLoadingDotNetRuntime(options?.webAssembly ?? {}, webAssemblyBootConfigResult);
+    const { assembliesBeingLoaded, pdbsBeingLoaded, wasmBeingLoaded } = loadWebAssemblyResources(webAssemblyResourceLoader);
+    const totalResources = assembliesBeingLoaded.concat(pdbsBeingLoaded, wasmBeingLoaded);
+    let finishedCount = 0;
+    totalResources.map(r => r.response.then(() => finishedCount++));
+    await new Promise(r => setTimeout(r, 50)); // This is obviously not correct. Need a robust way to know how much is cached instead of just waiting a while.
+
+    const runAutoOnServer = finishedCount < totalResources.length;
+    if (runAutoOnServer) {
+      serverComponents.push(...autoComponents.map(c => c.serverDescriptor));
+    } else {
+      webAssemblyComponents.push(...autoComponents.map(c => c.webAssemblyDescriptor));
+    }
+  }
+
   if (serverComponents.length && webAssemblyComponents.length) {
     throw new Error('TODO: Support having both Server and WebAssembly components at the same time. Not doing that currently as it overlaps with a different prototype.');
   }
@@ -27,11 +49,11 @@ async function boot(options?: Partial<UnitedStartOptions>): Promise<void> {
   // Later on, when we add progressive enhancement to navigation, we will also want to
   // auto-close circuits when the last root component is removed.
   if (serverComponents.length) {
-    await startCircuit(options?.circuit);
+    await startCircuit(options?.circuit, serverComponents);
   }
 
   if (webAssemblyComponents.length) {
-    await startWebAssembly(options?.webAssembly);
+    await startWebAssembly(options?.webAssembly, webAssemblyComponents);
   }
 }
 

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

@@ -14,11 +14,11 @@ import { BootConfigResult } from './Platform/BootConfig';
 import { Pointer, System_Array, System_Boolean, System_Byte, System_Int, System_Object, System_String } from './Platform/Platform';
 import { WebAssemblyStartOptions } from './Platform/WebAssemblyStartOptions';
 import { WebAssemblyComponentAttacher } from './Platform/WebAssemblyComponentAttacher';
-import { discoverComponents, discoverPersistedState, WebAssemblyComponentDescriptor } from './Services/ComponentDescriptorDiscovery';
+import { discoverPersistedState, WebAssemblyComponentDescriptor } from './Services/ComponentDescriptorDiscovery';
 import { setDispatchEventMiddleware } from './Rendering/WebRendererInteropMethods';
 import { fetchAndInvokeInitializers } from './JSInitializers/JSInitializers.WebAssembly';
 
-export async function startWebAssembly(options?: Partial<WebAssemblyStartOptions>): Promise<void> {
+export async function startWebAssembly(options?: Partial<WebAssemblyStartOptions>, components?: WebAssemblyComponentDescriptor[]): Promise<void> {
   if (inAuthRedirectIframe()) {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     await new Promise(() => {}); // See inAuthRedirectIframe for explanation
@@ -90,18 +90,9 @@ export async function startWebAssembly(options?: Partial<WebAssemblyStartOptions
     Blazor._internal.navigationManager.endLocationChanging(callId, shouldContinueNavigation);
   });
 
-  const candidateOptions = options ?? {};
-
-  // Get the custom environment setting and blazorBootJson loader if defined
-  const environment = candidateOptions.environment;
-
-  // Fetch the resources and prepare the Mono runtime
-  const bootConfigPromise = BootConfigResult.initAsync(candidateOptions.loadBootResource, environment);
-
   // Leverage the time while we are loading boot.config.json from the network to discover any potentially registered component on
   // the document.
-  const discoveredComponents = discoverComponents(document, 'webassembly') as WebAssemblyComponentDescriptor[];
-  const componentAttacher = new WebAssemblyComponentAttacher(discoveredComponents);
+  const componentAttacher = new WebAssemblyComponentAttacher(components || []);
   Blazor._internal.registeredComponents = {
     getRegisteredComponentsCount: () => componentAttacher.getCount(),
     getId: (index) => componentAttacher.getId(index),
@@ -122,13 +113,9 @@ export async function startWebAssembly(options?: Partial<WebAssemblyStartOptions
     }
   };
 
-  const bootConfigResult: BootConfigResult = await bootConfigPromise;
-  const jsInitializer = await fetchAndInvokeInitializers(bootConfigResult.bootConfig, candidateOptions);
-
-  const [resourceLoader] = await Promise.all([
-    WebAssemblyResourceLoader.initAsync(bootConfigResult.bootConfig, candidateOptions || {}),
-    WebAssemblyConfigLoader.initAsync(bootConfigResult),
-  ]);
+  const bootConfigResult: BootConfigResult = await loadBootConfig(options);
+  const jsInitializer = await fetchAndInvokeInitializers(bootConfigResult.bootConfig, options ?? {});
+  const resourceLoader = await beginLoadingDotNetRuntime(options ?? {}, bootConfigResult);
 
   try {
     await platform.start(resourceLoader);
@@ -143,6 +130,25 @@ export async function startWebAssembly(options?: Partial<WebAssemblyStartOptions
   jsInitializer.invokeAfterStartedCallbacks(Blazor);
 }
 
+export async function loadBootConfig(options?: Partial<WebAssemblyStartOptions>) {
+  return BootConfigResult.initAsync(options?.loadBootResource, options?.environment);
+}
+
+export async function beginLoadingDotNetRuntime(options: Partial<WebAssemblyStartOptions>, bootConfigResult: BootConfigResult): Promise<WebAssemblyResourceLoader> {
+  const candidateOptions = options ?? {};
+
+  // Get the custom environment setting and blazorBootJson loader if defined
+  const environment = candidateOptions.environment;
+
+  // Fetch the resources and prepare the Mono runtime
+  const [resourceLoader] = await Promise.all([
+    WebAssemblyResourceLoader.initAsync(bootConfigResult.bootConfig, candidateOptions || {}),
+    WebAssemblyConfigLoader.initAsync(bootConfigResult),
+  ]);
+
+  return resourceLoader;
+}
+
 // obsolete, legacy, don't use for new code!
 function invokeJSFromDotNet(callInfo: Pointer, arg0: any, arg1: any, arg2: any): any {
   const functionIdentifier = monoPlatform.readStringField(callInfo, 0)!;

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

@@ -224,6 +224,21 @@ async function importDotnetJs(resourceLoader: WebAssemblyResourceLoader): Promis
   return await cjsExport;
 }
 
+export function loadWebAssemblyResources(resourceLoader: WebAssemblyResourceLoader) {
+  const resources = resourceLoader.bootConfig.resources;
+  const dotnetWasmResourceName = 'dotnet.wasm';
+  const assembliesBeingLoaded = resourceLoader.loadResources(resources.assembly, filename => `_framework/${filename}`, 'assembly');
+  const pdbsBeingLoaded = resourceLoader.loadResources(resources.pdb || {}, filename => `_framework/${filename}`, 'pdb');
+  const wasmBeingLoaded = resourceLoader.loadResource(
+    /* name */ dotnetWasmResourceName,
+    /* url */ `_framework/${dotnetWasmResourceName}`,
+    /* hash */ resourceLoader.bootConfig.resources.runtime[dotnetWasmResourceName],
+    /* type */ 'dotnetwasm'
+  );
+
+  return { assembliesBeingLoaded, pdbsBeingLoaded, wasmBeingLoaded };
+}
+
 async function createEmscriptenModuleInstance(resourceLoader: WebAssemblyResourceLoader): Promise<DotnetPublicAPI> {
   let runtimeReadyResolve: (data: DotnetPublicAPI) => void = undefined as any;
   let runtimeReadyReject: (reason?: any) => void = undefined as any;
@@ -233,7 +248,6 @@ async function createEmscriptenModuleInstance(resourceLoader: WebAssemblyResourc
   });
 
   const dotnetJsBeingLoaded = importDotnetJs(resourceLoader);
-  const resources = resourceLoader.bootConfig.resources;
   const moduleConfig = (window['Module'] || {}) as typeof Module;
   const suppressMessages = ['DEBUGGING ENABLED'];
 
@@ -259,15 +273,7 @@ async function createEmscriptenModuleInstance(resourceLoader: WebAssemblyResourc
     }
 
   // Begin loading the .dll/.pdb/.wasm files, but don't block here. Let other loading processes run in parallel.
-  const dotnetWasmResourceName = 'dotnet.wasm';
-  const assembliesBeingLoaded = resourceLoader.loadResources(resources.assembly, filename => `_framework/${filename}`, 'assembly');
-  const pdbsBeingLoaded = resourceLoader.loadResources(resources.pdb || {}, filename => `_framework/${filename}`, 'pdb');
-  const wasmBeingLoaded = resourceLoader.loadResource(
-    /* name */ dotnetWasmResourceName,
-    /* url */ `_framework/${dotnetWasmResourceName}`,
-    /* hash */ resourceLoader.bootConfig.resources.runtime[dotnetWasmResourceName],
-    /* type */ 'dotnetwasm'
-  );
+  const { assembliesBeingLoaded, pdbsBeingLoaded, wasmBeingLoaded } = loadWebAssemblyResources(resourceLoader);
   const totalResources = assembliesBeingLoaded.concat(pdbsBeingLoaded, wasmBeingLoaded);
   totalResources.forEach(loadingResource => loadingResource.response.then(_ => setProgress()));
 
@@ -672,7 +678,7 @@ async function compileWasmModule(wasmResource: LoadingResource, imports: any): P
     // Fall back on ArrayBuffer instantiation.
     const arrayBuffer = await wasmResourceResponse.arrayBuffer();
     const arrayBufferResult = await WebAssembly.instantiate(arrayBuffer, imports);
-    return arrayBufferResult.instance;  
+    return arrayBufferResult.instance;
   }
 }