[Blazor] Render Blazor Webassembly components from MVC (#25203)

* Server pieces

* Changes for prerendering

* Discover client components

* tmp

* Cleanup

* Cleanups

* Undo changes

* Remove unwanted changes

* Move interop class to its own file

* Cleanup unwanted changes

* Add test rendering multiple client-side components

* Unit tests and E2E tests

* Cleanups

* Addressed feedback

* Rename Client to WebAssembly in RenderMode

* Update generated js files

* Cleaned up JS and addressed feedback

* Client->WebAssembly and other feedback

* Unify component discovery code and use webassembly instead of 'client'

* Update js files

* Fix tests

Author: javiercn

src/Components/Server/src/Circuits/ServerComponentDeserializer.cs

@@ -59,13 +59,13 @@ internal class ServerComponentDeserializer
     {
         private readonly IDataProtector _dataProtector;
         private readonly ILogger<ServerComponentDeserializer> _logger;
-        private readonly ServerComponentTypeCache _rootComponentTypeCache;
+        private readonly RootComponentTypeCache _rootComponentTypeCache;
         private readonly ComponentParameterDeserializer _parametersDeserializer;
 
         public ServerComponentDeserializer(
             IDataProtectionProvider dataProtectionProvider,
             ILogger<ServerComponentDeserializer> logger,
-            ServerComponentTypeCache rootComponentTypeCache,
+            RootComponentTypeCache rootComponentTypeCache,
             ComponentParameterDeserializer parametersDeserializer)
         {
             // When we protect the data we use a time-limited data protector with the

src/Components/Server/src/DependencyInjection/ComponentServiceCollectionExtensions.cs

@@ -57,7 +57,7 @@ public static IServerSideBlazorBuilder AddServerSideBlazor(this IServiceCollecti
             services.TryAddEnumerable(ServiceDescriptor.Singleton<IPostConfigureOptions<StaticFileOptions>, ConfigureStaticFilesOptions>());
             services.TryAddSingleton<CircuitFactory>();
             services.TryAddSingleton<ServerComponentDeserializer>();
-            services.TryAddSingleton<ServerComponentTypeCache>();
+            services.TryAddSingleton<RootComponentTypeCache>();
             services.TryAddSingleton<ComponentParameterDeserializer>();
             services.TryAddSingleton<ComponentParametersTypeCache>();
             services.TryAddSingleton<CircuitIdFactory>();

src/Components/Server/src/Microsoft.AspNetCore.Components.Server.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
   <PropertyGroup>
     <TargetFramework>$(DefaultNetCoreTargetFramework)</TargetFramework>
     <Description>Runtime server features for ASP.NET Core Components.</Description>
@@ -54,6 +54,8 @@
     <Compile Include="$(ComponentsSharedSourceRoot)src\CacheHeaderSettings.cs" Link="Shared\CacheHeaderSettings.cs" />
     <Compile Include="$(ComponentsSharedSourceRoot)src\ArrayBuilder.cs" LinkBase="Circuits" />
     <Compile Include="$(ComponentsSharedSourceRoot)src\ElementReferenceJsonConverter.cs" />
+    <Compile Include="$(ComponentsSharedSourceRoot)src\ComponentParametersTypeCache.cs" />
+    <Compile Include="$(ComponentsSharedSourceRoot)src\RootComponentTypeCache.cs" />
 
     <Compile Include="..\..\Shared\src\BrowserNavigationManagerInterop.cs" />
     <Compile Include="..\..\Shared\src\JsonSerializerOptionsProvider.cs" />

src/Components/Server/test/Circuits/ServerComponentDeserializerTest.cs

@@ -320,7 +320,7 @@ private ServerComponentDeserializer CreateServerComponentDeserializer()
             return new ServerComponentDeserializer(
                 _ephemeralDataProtectionProvider,
                 NullLogger<ServerComponentDeserializer>.Instance,
-                new ServerComponentTypeCache(),
+                new RootComponentTypeCache(),
                 new ComponentParameterDeserializer(NullLogger<ComponentParameterDeserializer>.Instance, new ComponentParametersTypeCache()));
         }
 

src/Components/Server/src/Circuits/ComponentParametersTypeCache.cs renamed to src/Components/Shared/src/ComponentParametersTypeCache.cs

@@ -9,7 +9,7 @@
 namespace Microsoft.AspNetCore.Components
 {
     // A cache for root component types
-    internal class ServerComponentTypeCache
+    internal class RootComponentTypeCache
     {
         private readonly ConcurrentDictionary<Key, Type> _typeToKeyLookUp = new ConcurrentDictionary<Key, Type>();
 
@@ -39,14 +39,14 @@ private static Type ResolveType(Key key, Assembly[] assemblies)
             return assembly.GetType(key.Type, throwOnError: false, ignoreCase: false);
         }
 
-        private struct Key : IEquatable<Key>
+        private readonly struct Key : IEquatable<Key>
         {
             public Key(string assembly, string type) =>
                 (Assembly, Type) = (assembly, type);
 
-            public string Assembly { get; set; }
+            public string Assembly { get; }
 
-            public string Type { get; set; }
+            public string Type { get; }
 
             public override bool Equals(object obj) => Equals((Key)obj);
 

src/Components/Server/src/Circuits/ServerComponentTypeCache.cs renamed to src/Components/Shared/src/RootComponentTypeCache.cs

@@ -7,11 +7,12 @@ import { shouldAutoStart } from './BootCommon';
 import { RenderQueue } from './Platform/Circuits/RenderQueue';
 import { ConsoleLogger } from './Platform/Logging/Loggers';
 import { LogLevel, Logger } from './Platform/Logging/Logger';
-import { discoverComponents, CircuitDescriptor } from './Platform/Circuits/CircuitManager';
+import { CircuitDescriptor } from './Platform/Circuits/CircuitManager';
 import { setEventDispatcher } from './Rendering/RendererEventDispatcher';
 import { resolveOptions, CircuitStartOptions } from './Platform/Circuits/CircuitStartOptions';
 import { DefaultReconnectionHandler } from './Platform/Circuits/DefaultReconnectionHandler';
 import { attachRootComponentToLogicalElement } from './Rendering/Renderer';
+import { discoverComponents, ServerComponentDescriptor } from './Services/ComponentDescriptorDiscovery';
 
 let renderingFailed = false;
 let started = false;
@@ -29,7 +30,7 @@ async function boot(userOptions?: Partial<CircuitStartOptions>): Promise<void> {
   options.reconnectionHandler = options.reconnectionHandler || window['Blazor'].defaultReconnectionHandler;
   logger.log(LogLevel.Information, 'Starting up blazor server-side application.');
 
-  const components = discoverComponents(document);
+  const components = discoverComponents(document, 'server') as ServerComponentDescriptor[];
   const circuit = new CircuitDescriptor(components);
 
   const initialConnection = await initializeConnection(options, logger, circuit);

src/Components/Web.JS/dist/Release/blazor.server.js

@@ -2,7 +2,7 @@ import { DotNet } from '@microsoft/dotnet-js-interop';
 import './GlobalExports';
 import * as Environment from './Environment';
 import { monoPlatform } from './Platform/Mono/MonoPlatform';
-import { renderBatch, getRendererer } from './Rendering/Renderer';
+import { renderBatch, getRendererer, attachRootComponentToElement, attachRootComponentToLogicalElement } from './Rendering/Renderer';
 import { SharedMemoryRenderBatch } from './Rendering/RenderBatch/SharedMemoryRenderBatch';
 import { shouldAutoStart } from './BootCommon';
 import { setEventDispatcher } from './Rendering/RendererEventDispatcher';
@@ -11,6 +11,8 @@ import { WebAssemblyConfigLoader } from './Platform/WebAssemblyConfigLoader';
 import { BootConfigResult } from './Platform/BootConfig';
 import { Pointer } from './Platform/Platform';
 import { WebAssemblyStartOptions } from './Platform/WebAssemblyStartOptions';
+import { WebAssemblyComponentAttacher } from './Platform/WebAssemblyComponentAttacher';
+import { discoverComponents, WebAssemblyComponentDescriptor } from './Services/ComponentDescriptorDiscovery';
 
 let started = false;
 
@@ -71,8 +73,31 @@ async function boot(options?: Partial<WebAssemblyStartOptions>): Promise<void> {
   const environment = options?.environment;
 
   // Fetch the resources and prepare the Mono runtime
-  const bootConfigResult = await BootConfigResult.initAsync(environment);
+  const bootConfigPromise = BootConfigResult.initAsync(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);
+  window['Blazor']._internal.registeredComponents = {
+    getRegisteredComponentsCount: () => componentAttacher.getCount(),
+    getId: (index) => componentAttacher.getId(index),
+    getAssembly: (id) => BINDING.js_string_to_mono_string(componentAttacher.getAssembly(id)),
+    getTypeName: (id) => BINDING.js_string_to_mono_string(componentAttacher.getTypeName(id)),
+    getParameterDefinitions: (id) => BINDING.js_string_to_mono_string(componentAttacher.getParameterDefinitions(id) || ''),
+    getParameterValues: (id) => BINDING.js_string_to_mono_string(componentAttacher.getParameterValues(id) || ''),
+  };
+
+  window['Blazor']._internal.attachRootComponentToElement = (selector, componentId, rendererId) => {
+    const element = componentAttacher.resolveRegisteredElement(selector);
+    if (!element) {
+      attachRootComponentToElement(selector, componentId, rendererId);
+    } else {
+      attachRootComponentToLogicalElement(rendererId, element, componentId);
+    }
+  };
 
+  const bootConfigResult = await bootConfigPromise;
   const [resourceLoader] = await Promise.all([
     WebAssemblyResourceLoader.initAsync(bootConfigResult.bootConfig, options || {}),
     WebAssemblyConfigLoader.initAsync(bootConfigResult)]);