Start up interactive components after enhanced nav. This is not a complete implementation of #48763 but will be OK for preview 6.

Author: SteveSandersonMS

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

@@ -15,33 +15,45 @@ import { shouldAutoStart } from './BootCommon';
 import { Blazor } from './GlobalExports';
 import { WebStartOptions } from './Platform/WebStartOptions';
 import { attachStreamingRenderingListener } from './Rendering/StreamingRendering';
-import { attachProgressivelyEnhancedNavigationListener } from './Services/NavigationEnhancement';
+import { attachProgressivelyEnhancedNavigationListener, detachProgressivelyEnhancedNavigationListener } from './Services/NavigationEnhancement';
 import { WebAssemblyComponentDescriptor } from './Services/ComponentDescriptorDiscovery';
 import { ServerComponentDescriptor, discoverComponents } from './Services/ComponentDescriptorDiscovery';
 
 let started = false;
+let webStartOptions: Partial<WebStartOptions> | undefined;
 
 async function boot(options?: Partial<WebStartOptions>): Promise<void> {
   if (started) {
     throw new Error('Blazor has already started.');
   }
   started = true;
-  await activateInteractiveComponents(options);
+  webStartOptions = options;
 
   attachStreamingRenderingListener(options?.ssr);
-  attachProgressivelyEnhancedNavigationListener();
+  attachProgressivelyEnhancedNavigationListener(activateInteractiveComponents);
+  await activateInteractiveComponents();
 }
 
-async function activateInteractiveComponents(options?: Partial<WebStartOptions>) {
+async function activateInteractiveComponents() {
   const serverComponents = discoverComponents(document, 'server') as ServerComponentDescriptor[];
   const webAssemblyComponents = discoverComponents(document, 'webassembly') as WebAssemblyComponentDescriptor[];
 
   if (serverComponents.length) {
-    await startCircuit(options?.circuit, serverComponents);
+    // TEMPORARY until https://github.com/dotnet/aspnetcore/issues/48763 is implemented
+    // As soon we we see you have interactive components, we'll stop doing enhanced nav even if you don't have an interactive router
+    // This is because, otherwise, we would need a way to add new interactive root components to an existing circuit and that's #48763
+    detachProgressivelyEnhancedNavigationListener();
+
+    await startCircuit(webStartOptions?.circuit, serverComponents);
   }
 
   if (webAssemblyComponents.length) {
-    await startWebAssembly(options?.webAssembly, webAssemblyComponents);
+    // TEMPORARY until https://github.com/dotnet/aspnetcore/issues/48763 is implemented
+    // As soon we we see you have interactive components, we'll stop doing enhanced nav even if you don't have an interactive router
+    // This is because, otherwise, we would need a way to add new interactive root components to an existing WebAssembly runtime and that's #48763
+    detachProgressivelyEnhancedNavigationListener();
+
+    await startWebAssembly(webStartOptions?.webAssembly, webAssemblyComponents);
   }
 }
 

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

@@ -29,12 +29,19 @@ different bundles that only contain minimal content.
 */
 
 let currentEnhancedNavigationAbortController: AbortController | null;
+let onDocumentUpdatedCallback: Function = () => {};
 
-export function attachProgressivelyEnhancedNavigationListener() {
+export function attachProgressivelyEnhancedNavigationListener(onDocumentUpdated: Function) {
+  onDocumentUpdatedCallback = onDocumentUpdated;
   document.body.addEventListener('click', onBodyClicked);
   window.addEventListener('popstate', onPopState);
 }
 
+export function detachProgressivelyEnhancedNavigationListener() {
+  document.body.removeEventListener('click', onBodyClicked);
+  window.removeEventListener('popstate', onPopState);
+}
+
 function onBodyClicked(event: MouseEvent) {
   if (hasInteractiveRouter()) {
     return;
@@ -88,6 +95,13 @@ async function performEnhancedPageLoad(internalDestinationHref: string) {
     });
 
   if (!abortSignal.aborted) {
+    // TEMPORARY until https://github.com/dotnet/aspnetcore/issues/48763 is implemented
+    // We should really be doing this on the `onInitialDocument` callback *and* inside the <blazor-ssr> custom element logic
+    // so we can add interactive components immediately on each update. Until #48763 is implemented, the stopgap implementation
+    // is just to do it when the enhanced nav process completes entirely, and then if we do add any interactive components, we
+    // disable enhanced nav completely.
+    onDocumentUpdatedCallback();
+
     // The whole response including any streaming SSR is now finished, and it was not aborted (no other navigation
     // has since started). So finally, recreate the native "scroll to hash" behavior.
     const hashPosition = internalDestinationHref.indexOf('#');