Update enhancednavigationstart event

Author: MackinnonBuck

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

@@ -51,8 +51,8 @@ function boot(options?: Partial<WebStartOptions>) : Promise<void> {
   const jsEventRegistry = JSEventRegistry.create(Blazor);
 
   const navigationEnhancementCallbacks: NavigationEnhancementCallbacks = {
-    enhancedNavigationStarted: (method) => {
-      jsEventRegistry.dispatchEvent('enhancednavigationstart', { method });
+    enhancedNavigationStarted: (resource, options) => {
+      jsEventRegistry.dispatchEvent('enhancednavigationstart', { resource, options });
     },
     documentUpdated: () => {
       rootComponentManager.onDocumentUpdated();

src/Components/Web.JS/src/Rendering/FocusOnNavigate.ts

@@ -32,7 +32,7 @@ function afterInitialPageLoad() {
 
 function onEnhancedNavigationStart(ev: EnhancedNavigationStartEvent) {
   // Only focus on enhanced load if the enhanced navigation is not a form post.
-  allowFocusOnEnhancedLoad = ev.method !== 'post';
+  allowFocusOnEnhancedLoad = ev.options.method !== 'post';
 }
 
 function onEnhancedLoad() {

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

@@ -10,7 +10,8 @@ interface BlazorEvent {
 }
 
 export interface EnhancedNavigationStartEvent extends BlazorEvent {
-  method: string;
+  resource: string | URL | Request;
+  options: RequestInit;
 }
 
 // Maps Blazor event names to the argument type passed to registered listeners.

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

@@ -2,7 +2,7 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 
 import { synchronizeDomContent } from '../Rendering/DomMerging/DomSync';
-import { attachProgrammaticEnhancedNavigationHandler, handleClickForNavigationInterception, hasInteractiveRouter, isSamePageWithHash, notifyEnhancedNavigationListners, performScrollToElementOnTheSamePage } from './NavigationUtils';
+import { attachProgrammaticEnhancedNavigationHandler, handleClickForNavigationInterception, hasInteractiveRouter, isSamePageWithHash, notifyEnhancedNavigationListeners, performScrollToElementOnTheSamePage } from './NavigationUtils';
 
 /*
 In effect, we have two separate client-side navigation mechanisms:
@@ -42,7 +42,7 @@ let performingEnhancedPageLoad: boolean;
 let currentContentUrl = location.href;
 
 export interface NavigationEnhancementCallbacks {
-  enhancedNavigationStarted: (method: string) => void;
+  enhancedNavigationStarted: (resource: string | URL | Request, options: RequestInit) => void;
   documentUpdated: () => void;
   enhancedNavigationCompleted: () => void;
 }
@@ -184,29 +184,30 @@ export async function performEnhancedPageLoad(internalDestinationHref: string, i
   currentEnhancedNavigationAbortController?.abort();
 
   // Notify any interactive runtimes that an enhanced navigation is starting
-  notifyEnhancedNavigationListners(internalDestinationHref, interceptedLink);
-
-  // Invoke other enhanced navigation handlers
-  const requestMethod = fetchOptions?.method ?? 'get';
-  navigationEnhancementCallbacks.enhancedNavigationStarted(requestMethod);
+  notifyEnhancedNavigationListeners(internalDestinationHref, interceptedLink);
 
   // Now request the new page via fetch, and a special header that tells the server we want it to inject
   // framing boundaries to distinguish the initial document and each subsequent streaming SSR update.
   currentEnhancedNavigationAbortController = new AbortController();
   const abortSignal = currentEnhancedNavigationAbortController.signal;
-  const responsePromise = fetch(internalDestinationHref, Object.assign(<RequestInit>{
+  const requestInit = Object.assign(<RequestInit>{
     signal: abortSignal,
     mode: 'no-cors', // If there's a redirection to an external origin, even if it enables CORS, we don't want to receive its content and patch it into our DOM on this origin
     headers: {
       // Because of no-cors, we can only send CORS-safelisted headers, so communicate the info about
       // enhanced nav as a MIME type parameter
       'accept': acceptHeader,
     },
-  }, fetchOptions));
+  }, fetchOptions);
+  const responsePromise = fetch(internalDestinationHref, requestInit);
+
+  // Notify handlers that enhanced navigation has started
+  navigationEnhancementCallbacks.enhancedNavigationStarted(internalDestinationHref, requestInit);
+
   let isNonRedirectedPostToADifferentUrlMessage: string | null = null;
   await getResponsePartsWithFraming(responsePromise, abortSignal,
     (response, initialContent) => {
-      const isGetRequest = requestMethod === 'get';
+      const isGetRequest = !fetchOptions?.method || fetchOptions.method === 'get';
       const isSuccessResponse = response.status >= 200 && response.status < 300;
 
       // For true 301/302/etc redirections to external URLs, we'll receive an opaque response
@@ -306,7 +307,7 @@ export async function performEnhancedPageLoad(internalDestinationHref: string, i
           retryEnhancedNavAsFullPageLoad(internalDestinationHref);
         } else {
           // For non-get requests, we can't safely re-request, so just treat it as an error
-          replaceDocumentWithPlainText(`Error: ${requestMethod} request to ${internalDestinationHref} returned non-HTML content of type ${responseContentType || 'unspecified'}.`);
+          replaceDocumentWithPlainText(`Error: ${fetchOptions.method} request to ${internalDestinationHref} returned non-HTML content of type ${responseContentType || 'unspecified'}.`);
         }
       }
     },

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

@@ -5,7 +5,7 @@ import { WebRendererId } from '../Rendering/WebRendererId';
 
 let interactiveRouterRendererId: WebRendererId | undefined = undefined;
 let programmaticEnhancedNavigationHandler: typeof performProgrammaticEnhancedNavigation | undefined;
-let enhancedNavigationListener: typeof notifyEnhancedNavigationListners | undefined;
+let enhancedNavigationListener: typeof notifyEnhancedNavigationListeners | undefined;
 
 /**
  * Checks if a click event corresponds to an <a> tag referencing a URL within the base href, and that interception
@@ -70,7 +70,7 @@ export function attachEnhancedNavigationListener(listener: typeof enhancedNaviga
   enhancedNavigationListener = listener;
 }
 
-export function notifyEnhancedNavigationListners(internalDestinationHref: string, interceptedLink: boolean) {
+export function notifyEnhancedNavigationListeners(internalDestinationHref: string, interceptedLink: boolean) {
   enhancedNavigationListener?.(internalDestinationHref, interceptedLink);
 }