Enhance interactivity-router plugin by adding prefetch functionality for links and updating the rendering logic. Non-interactive router links are now excluded from click actions, and new prefetch actions are implemented in both the view and render files for improved navigation performance.

Author: juanmaguitar

plugins/interactivity-router-2f43f8/build/render.php

@@ -34,11 +34,10 @@
 	data-wp-watch--newPage="callbacks.newPage"
 >
 	<a href="/">🏠 Start Page</a>
-		<p><small><em>Displaying region "region-example-2f43f8" from <a data-wp-bind--href="state.urlRegionDisplay" data-wp-text="state.urlRegionDisplay"></a></em></small></p>
+		<p><small><em>Displaying region "region-example-2f43f8" from <a class="non-interactive-router-link" data-wp-bind--href="state.urlRegionDisplay" data-wp-text="state.urlRegionDisplay"></a> (non-interactive router link)</em></small></p>
 		<ul class="beatles-links">
 			<template data-wp-each="state.slugs">
 				<li><a 
-				data-wp-on--click="actions.navigate"
 				data-wp-text="state.itemName"
 				data-wp-bind--href="state.itemSlug"
 				data-wp-class--current="state.isCurrentSlug"
@@ -52,13 +51,11 @@
 				<a
 					class="navigation-link-prev"
 					data-wp-bind--hidden="!state.prev"
-					data-wp-on--click="actions.navigate"
 					data-wp-bind--href="state.prev"
 				>&lt; Prev</a>
 				<a
 					class="navigation-link-next"
 					data-wp-bind--hidden="!state.next"
-					data-wp-on--click="actions.navigate"
 					data-wp-bind--href="state.next"
 				>Next &gt;</a>
 		</nav>

plugins/interactivity-router-2f43f8/build/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('@wordpress/interactivity', array('id' => '@wordpress/interactivity-router', 'import' => 'dynamic')), 'version' => 'ddc3aea312f07cd92ede', 'type' => 'module');
+<?php return array('dependencies' => array('@wordpress/interactivity', array('id' => '@wordpress/interactivity-router', 'import' => 'dynamic')), 'version' => 'c7ca229104ca13d76abf', 'type' => 'module');

plugins/interactivity-router-2f43f8/build/view.js

@@ -64,7 +64,11 @@ function bde_2f43f8__render_block_interactivity_router( $block_content ) {
 
 	$p = new WP_HTML_Tag_Processor( $block_content );
 	while ( $p->next_tag( array( 'tag_name' => 'a' ) ) ) {
+		if ( $p->get_attribute( 'class' ) !== 'non-interactive-router-link' ) {
 			$p->set_attribute( 'data-wp-on--click', 'actions.navigate' );
+			$p->set_attribute( 'data-wp-on--mouseenter', 'actions.prefetch' );
+			$p->set_attribute( 'data-wp-watch', 'callbacks.prefetch' );
+		}
 	}
 
 	return $p->get_updated_html();

plugins/interactivity-router-2f43f8/build/view.js.map

@@ -34,11 +34,10 @@
 	data-wp-watch--newPage="callbacks.newPage"
 >
 	<a href="/">🏠 Start Page</a>
-		<p><small><em>Displaying region "region-example-2f43f8" from <a data-wp-bind--href="state.urlRegionDisplay" data-wp-text="state.urlRegionDisplay"></a></em></small></p>
+		<p><small><em>Displaying region "region-example-2f43f8" from <a class="non-interactive-router-link" data-wp-bind--href="state.urlRegionDisplay" data-wp-text="state.urlRegionDisplay"></a> (non-interactive router link)</em></small></p>
 		<ul class="beatles-links">
 			<template data-wp-each="state.slugs">
 				<li><a 
-				data-wp-on--click="actions.navigate"
 				data-wp-text="state.itemName"
 				data-wp-bind--href="state.itemSlug"
 				data-wp-class--current="state.isCurrentSlug"
@@ -52,13 +51,11 @@
 				<a
 					class="navigation-link-prev"
 					data-wp-bind--hidden="!state.prev"
-					data-wp-on--click="actions.navigate"
 					data-wp-bind--href="state.prev"
 				>&lt; Prev</a>
 				<a
 					class="navigation-link-next"
 					data-wp-bind--hidden="!state.next"
-					data-wp-on--click="actions.navigate"
 					data-wp-bind--href="state.next"
 				>Next &gt;</a>
 		</nav>

plugins/interactivity-router-2f43f8/plugin.php

@@ -1,4 +1,24 @@
-import { store, getServerState, getContext } from '@wordpress/interactivity';
+import {
+	store,
+	getServerState,
+	getContext,
+	getElement,
+} from '@wordpress/interactivity';
+
+const isValidLink = ( ref ) =>
+	ref &&
+	ref instanceof window.HTMLAnchorElement &&
+	ref.href &&
+	( ! ref.target || ref.target === '_self' ) &&
+	ref.origin === window.location.origin;
+
+// Shared prefetch logic
+const prefetchLink = function* ( ref ) {
+	if ( isValidLink( ref ) ) {
+		const { actions } = yield import( '@wordpress/interactivity-router' );
+		yield actions.prefetch( ref.href );
+	}
+};
 
 const { state } = store( 'router-2f43f8', {
 	state: {
@@ -27,6 +47,10 @@ const { state } = store( 'router-2f43f8', {
 			state.urlRegionDisplay = e.target.href;
 			yield actions.navigate( e.target.href );
 		},
+		*prefetch() {
+			const { ref } = getElement();
+			yield* prefetchLink( ref );
+		},
 	},
 	callbacks: {
 		newPage() {
@@ -35,5 +59,9 @@ const { state } = store( 'router-2f43f8', {
 			state.next = serverState.next;
 			state.currentSlug = serverState.currentSlug;
 		},
+		*prefetch() {
+			const { ref } = getElement();
+			yield* prefetchLink( ref );
+		},
 	},
 } );