Refactor interactivity-router plugin to improve URL formatting and state management. Introduced a helper function for URL construction in render.php, enhancing navigation link handling. Updated view.js to utilize the new URL formatting logic and added console logs for better state tracking. Incremented asset version in view.asset.php for consistency.

Author: juanmaguitar

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

@@ -12,22 +12,50 @@
  */
 
 $base_url = get_site_url();
+$state    = array(
+	'base_url'    => $base_url,
+	'currentSlug' => get_post_field( 'post_name', get_post() ),
+	'slugs'       => array(
+		'paul-mccartney|Paul',
+		'john-lennon|John',
+		'george-harrison|George',
+		'ringo-starr|Ringo',
+	),
+);
+
+if ( ! function_exists( 'format_url' ) ) {
+	// Helper function to properly format URLs.
+	$format_url = function ( $base, $path ) {
+		// Ensures base URL ends with / .
+		// Example: "https://example.com" → "https://example.com/" .
+		$base_with_slash = trailingslashit( $base );
+
+		// Removes trailing slashes from path.
+		// Example: "john-lennon/" → "john-lennon" .
+		$path_no_trailing = untrailingslashit( $path );
+
+		// Removes leading slashes from path.
+		// Example: "/john-lennon" → "john-lennon" .
+		$path_clean = ltrim( $path_no_trailing, '/' );
+
+		// Combine base URL with cleaned path.
+		// Result: "https://example.com/" + "john-lennon" = "https://example.com/john-lennon" .
+		return $base_with_slash . $path_clean;
+	};
+}
+if ( $attributes['prev'] ) {
+	$state['prev'] = $format_url( $base_url, $attributes['prev'] );
+}
+if ( $attributes['next'] ) {
+	$state['next'] = $format_url( $base_url, $attributes['next'] );
+}
+
 wp_interactivity_state(
 	'router-2f43f8',
-	array(
-		'prev'        => $attributes['prev'],
-		'next'        => $attributes['next'],
-		'base_url'    => $base_url,
-		'currentSlug' => get_post_field( 'post_name', get_post() ),
-		'slugs'       => array(
-			'paul-mccartney|Paul',
-			'john-lennon|John',
-			'george-harrison|George',
-			'ringo-starr|Ringo',
-		),
-	)
+	$state,
 );
 ?>
+
 <div
 	<?php echo wp_kses_data( get_block_wrapper_attributes() ); ?>
 	data-wp-interactive="router-2f43f8"

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' => 'f490aadf565df2afd7b2', 'type' => 'module');
+<?php return array('dependencies' => array('@wordpress/interactivity', array('id' => '@wordpress/interactivity-router', 'import' => 'dynamic')), 'version' => 'a1597cc18fa5c131cccd', 'type' => 'module');

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

@@ -12,22 +12,50 @@
  */
 
 $base_url = get_site_url();
+$state    = array(
+	'base_url'    => $base_url,
+	'currentSlug' => get_post_field( 'post_name', get_post() ),
+	'slugs'       => array(
+		'paul-mccartney|Paul',
+		'john-lennon|John',
+		'george-harrison|George',
+		'ringo-starr|Ringo',
+	),
+);
+
+if ( ! function_exists( 'format_url' ) ) {
+	// Helper function to properly format URLs.
+	$format_url = function ( $base, $path ) {
+		// Ensures base URL ends with / .
+		// Example: "https://example.com" → "https://example.com/" .
+		$base_with_slash = trailingslashit( $base );
+
+		// Removes trailing slashes from path.
+		// Example: "john-lennon/" → "john-lennon" .
+		$path_no_trailing = untrailingslashit( $path );
+
+		// Removes leading slashes from path.
+		// Example: "/john-lennon" → "john-lennon" .
+		$path_clean = ltrim( $path_no_trailing, '/' );
+
+		// Combine base URL with cleaned path.
+		// Result: "https://example.com/" + "john-lennon" = "https://example.com/john-lennon" .
+		return $base_with_slash . $path_clean;
+	};
+}
+if ( $attributes['prev'] ) {
+	$state['prev'] = $format_url( $base_url, $attributes['prev'] );
+}
+if ( $attributes['next'] ) {
+	$state['next'] = $format_url( $base_url, $attributes['next'] );
+}
+
 wp_interactivity_state(
 	'router-2f43f8',
-	array(
-		'prev'        => $attributes['prev'],
-		'next'        => $attributes['next'],
-		'base_url'    => $base_url,
-		'currentSlug' => get_post_field( 'post_name', get_post() ),
-		'slugs'       => array(
-			'paul-mccartney|Paul',
-			'john-lennon|John',
-			'george-harrison|George',
-			'ringo-starr|Ringo',
-		),
-	)
+	$state,
 );
 ?>
+
 <div
 	<?php echo wp_kses_data( get_block_wrapper_attributes() ); ?>
 	data-wp-interactive="router-2f43f8"

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

@@ -20,6 +20,8 @@ const prefetchLink = function* ( ref ) {
 	}
 };
 
+const removeSlashes = ( str ) => str.replace( /^\/+|\/+$/g, '' );
+
 const { state } = store( 'router-2f43f8', {
 	state: {
 		urlRegionDisplay: window.location.href,
@@ -28,7 +30,8 @@ const { state } = store( 'router-2f43f8', {
 		},
 		get itemSlug() {
 			const ctx = getContext();
-			return ctx.item.split( '|' )[ 0 ];
+			const slug = ctx.item.split( '|' )[ 0 ];
+			return new URL( removeSlashes( slug ), state.base_url ).href;
 		},
 		get itemName() {
 			const ctx = getContext();
@@ -60,6 +63,8 @@ const { state } = store( 'router-2f43f8', {
 			state.prev = serverState.prev;
 			state.next = serverState.next;
 			state.currentSlug = serverState.currentSlug;
+			console.log( 'Server state: ', serverState );
+			console.log( 'Client state: ', state );
 		},
 		*prefetch() {
 			const { ref } = getElement();