Interactivity API: Improvements to the experimental full-page navigation

packages/interactivity-router/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   Improvements to the experimental full-page navigation ([#64067](https://github.com/WordPress/gutenberg/pull/64067)):
+    -   Remove the `src` attributes from prefetched script tags.
+    -   Use `.textContent` instead of `.innerText` to set `<script>` contents.
+    -   Use `populateInitialData()` with state from the server.
+    -   Wait for the `load` event of the script element before evaluating it.
+
 ## 2.9.0 (2024-10-03)
 
 ## 2.8.0 (2024-09-19)

packages/interactivity-router/src/head.ts

@@ -1,3 +1,11 @@
+/**
+ * The cache of prefetched stylesheets and scripts.
+ */
+export const headElements = new Map<
+	string,
+	{ tag: HTMLElement; text?: string }
+>();
+
 /**
  * Helper to update only the necessary tags in the head.
  *
@@ -29,6 +37,14 @@ export const updateHead = async ( newHead: HTMLHeadElement[] ) => {
 		}
 	}
 
+	await Promise.all(
+		[ ...headElements.entries() ]
+			.filter( ( [ , { tag } ] ) => tag.nodeName === 'SCRIPT' )
+			.map( async ( [ url ] ) => {
+				await import( /* webpackIgnore: true */ url );
+			} )
+	);
+
 	// Prepare new assets.
 	const toAppend = [ ...newHeadMap.values() ];
 
@@ -41,60 +57,66 @@ export const updateHead = async ( newHead: HTMLHeadElement[] ) => {
  * Fetches and processes head assets (stylesheets and scripts) from a specified document.
  *
  * @async
- * @param doc               The document from which to fetch head assets. It should support standard DOM querying methods.
- * @param headElements      A map of head elements to modify tracking the URLs of already processed assets to avoid duplicates.
- * @param headElements.tag
- * @param headElements.text
+ * @param doc The document from which to fetch head assets. It should support standard DOM querying methods.
  *
  * @return Returns an array of HTML elements representing the head assets.
  */
 export const fetchHeadAssets = async (
-	doc: Document,
-	headElements: Map< string, { tag: HTMLElement; text: string } >
+	doc: Document
 ): Promise< HTMLElement[] > => {
 	const headTags = [];
-	const assets = [
-		{
-			tagName: 'style',
-			selector: 'link[rel=stylesheet]',
-			attribute: 'href',
-		},
-		{ tagName: 'script', selector: 'script[src]', attribute: 'src' },
-	];
-	for ( const asset of assets ) {
-		const { tagName, selector, attribute } = asset;
-		const tags = doc.querySelectorAll<
-			HTMLScriptElement | HTMLStyleElement
-		>( selector );
-
-		// Use Promise.all to wait for fetch to complete
-		await Promise.all(
-			Array.from( tags ).map( async ( tag ) => {
-				const attributeValue = tag.getAttribute( attribute );
-				if ( ! headElements.has( attributeValue ) ) {
-					try {
-						const response = await fetch( attributeValue );
-						const text = await response.text();
-						headElements.set( attributeValue, {
-							tag,
-							text,
-						} );
-					} catch ( e ) {
-						// eslint-disable-next-line no-console
-						console.error( e );
-					}
-				}
 
-				const headElement = headElements.get( attributeValue );
-				const element = doc.createElement( tagName );
-				element.innerText = headElement.text;
-				for ( const attr of headElement.tag.attributes ) {
-					element.setAttribute( attr.name, attr.value );
+	// We only want to fetch module scripts because regular scripts (without
+	// `async` or `defer` attributes) can depend on the execution of other scripts.
+	// Scripts found in the head are blocking and must be executed in order.
+	const scripts = doc.querySelectorAll< HTMLScriptElement >(
+		'script[type="module"][src]'
+	);
+
+	scripts.forEach( ( script ) => {
+		const src = script.getAttribute( 'src' );
+		if ( ! headElements.has( src ) ) {
+			// add the <link> elements to prefetch the module scripts
+			const link = doc.createElement( 'link' );
+			link.rel = 'modulepreload';
+			link.href = src;
+			document.head.append( link );
+			headElements.set( src, { tag: script } );
+		}
+	} );
+
+	const stylesheets = doc.querySelectorAll< HTMLLinkElement >(
+		'link[rel=stylesheet]'
+	);
+
+	await Promise.all(
+		Array.from( stylesheets ).map( async ( tag ) => {
+			const href = tag.getAttribute( 'href' );
+			if ( ! href ) {
+				return;
+			}
+
+			if ( ! headElements.has( href ) ) {
+				try {
+					const response = await fetch( href );
+					const text = await response.text();
+					headElements.set( href, {
+						tag,
+						text,
+					} );
+				} catch ( e ) {
+					// eslint-disable-next-line no-console
+					console.error( e );
 				}
-				headTags.push( element );
-			} )
-		);
-	}
+			}
+
+			const headElement = headElements.get( href );
+			const styleElement = doc.createElement( 'style' );
+			styleElement.textContent = headElement.text;
+
+			headTags.push( styleElement );
+		} )
+	);
 
 	return [
 		doc.querySelector( 'title' ),

packages/interactivity-router/src/index.ts

@@ -6,7 +6,7 @@ import { store, privateApis, getConfig } from '@wordpress/interactivity';
 /**
  * Internal dependencies
  */
-import { fetchHeadAssets, updateHead } from './head';
+import { fetchHeadAssets, updateHead, headElements } from './head';
 
 const {
 	directivePrefix,
@@ -54,7 +54,6 @@ const navigationMode: 'regionBased' | 'fullPage' =
 
 // The cache of visited and prefetched pages, stylesheets and scripts.
 const pages = new Map< string, Promise< Page | false > >();
-const headElements = new Map< string, { tag: HTMLElement; text: string } >();
 
 // Helper to remove domain and hash from the URL. We are only interesting in
 // caching the path and the query.
@@ -87,7 +86,7 @@ const regionsToVdom: RegionsToVdom = async ( dom, { vdom } = {} ) => {
 	let head: HTMLElement[];
 	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 		if ( navigationMode === 'fullPage' ) {
-			head = await fetchHeadAssets( dom, headElements );
+			head = await fetchHeadAssets( dom );
 			regions.body = vdom
 				? vdom.get( document.body )
 				: toVdom( dom.body );
@@ -108,31 +107,34 @@ const regionsToVdom: RegionsToVdom = async ( dom, { vdom } = {} ) => {
 };
 
 // Render all interactive regions contained in the given page.
-const renderRegions = ( page: Page ) => {
-	batch( () => {
-		if ( globalThis.IS_GUTENBERG_PLUGIN ) {
-			if ( navigationMode === 'fullPage' ) {
-				// Once this code is tested and more mature, the head should be updated for region based navigation as well.
-				updateHead( page.head );
-				const fragment = getRegionRootFragment( document.body );
+const renderRegions = async ( page: Page ) => {
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+		if ( navigationMode === 'fullPage' ) {
+			// Once this code is tested and more mature, the head should be updated for region based navigation as well.
+			await updateHead( page.head );
+			const fragment = getRegionRootFragment( document.body );
+			batch( () => {
+				populateServerData( page.initialData );
 				render( page.regions.body, fragment );
-			}
+			} );
 		}
-		if ( navigationMode === 'regionBased' ) {
+	}
+	if ( navigationMode === 'regionBased' ) {
+		const attrName = `data-${ directivePrefix }-router-region`;
+		batch( () => {
 			populateServerData( page.initialData );
-			const attrName = `data-${ directivePrefix }-router-region`;
 			document
 				.querySelectorAll( `[${ attrName }]` )
 				.forEach( ( region ) => {
 					const id = region.getAttribute( attrName );
 					const fragment = getRegionRootFragment( region );
 					render( page.regions[ id ], fragment );
 				} );
-		}
-		if ( page.title ) {
-			document.title = page.title;
-		}
-	} );
+		} );
+	}
+	if ( page.title ) {
+		document.title = page.title;
+	}
 };
 
 /**
@@ -156,7 +158,7 @@ window.addEventListener( 'popstate', async () => {
 	const pagePath = getPagePath( window.location.href ); // Remove hash.
 	const page = pages.has( pagePath ) && ( await pages.get( pagePath ) );
 	if ( page ) {
-		renderRegions( page );
+		await renderRegions( page );
 		// Update the URL in the state.
 		state.url = window.location.href;
 	} else {
@@ -170,13 +172,15 @@ window.addEventListener( 'popstate', async () => {
 if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 	if ( navigationMode === 'fullPage' ) {
 		// Cache the scripts. Has to be called before fetching the assets.
-		[].map.call( document.querySelectorAll( 'script[src]' ), ( script ) => {
-			headElements.set( script.getAttribute( 'src' ), {
-				tag: script,
-				text: script.textContent,
-			} );
-		} );
-		await fetchHeadAssets( document, headElements );
+		[].map.call(
+			document.querySelectorAll( 'script[type="module"][src]' ),
+			( script ) => {
+				headElements.set( script.getAttribute( 'src' ), {
+					tag: script,
+				} );
+			}
+		);
+		await fetchHeadAssets( document );
 	}
 }
 pages.set(