Interactivity API: Fix non stable context reference on client side navigation

packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php

@@ -128,6 +128,7 @@
 	<div data-testid="navigation text" data-wp-text="context.text"></div>
 	<div data-testid="navigation new text" data-wp-text="context.newText"></div>
 	<button data-testid="toggle text" data-wp-on--click="actions.toggleText">Toggle Text</button>
-	<button data-testid="add new text" data-wp-on--click="actions.addNewText">Add new text</button>
+	<button data-testid="add new text" data-wp-on--click="actions.addNewText">Add New Text</button>
 	<button data-testid="navigate" data-wp-on--click="actions.navigate">Navigate</button>
+	<button data-testid="async navigate" data-wp-on--click="actions.asyncNavigate">Async Navigate</button>
 </div>

packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js

@@ -12,6 +12,7 @@
 			<button data-testid="toggle text" data-wp-on--click="actions.toggleText">Toggle Text</button>
 			<button data-testid="add new text" data-wp-on--click="actions.addNewText">Add new text</button>
 			<button data-testid="navigate" data-wp-on--click="actions.navigate">Navigate</button>
+			<button data-testid="async navigate" data-wp-on--click="actions.asyncNavigate">Async Navigate</button>
 		</div>`;
 
 	store( {
@@ -41,6 +42,13 @@
 					force: true,
 					html,
 				} );
+			},
+			asyncNavigate: async ({ context }) => {
+				await navigate( window.location, {
+					force: true,
+					html,
+				} );
+				context.newText = 'changed from async action';
 			}
 		},
 	} );

packages/interactivity/src/directives.js

@@ -14,18 +14,16 @@ import { directive } from './hooks';
 const isObject = ( item ) =>
 	item && typeof item === 'object' && ! Array.isArray( item );
 
-const mergeDeepSignals = ( target, source ) => {
+const mergeDeepSignals = ( target, source, overwrite ) => {
 	for ( const k in source ) {
-		if ( typeof peek( target, k ) === 'undefined' ) {
-			target[ `$${ k }` ] = source[ `$${ k }` ];
-		} else if (
-			isObject( peek( target, k ) ) &&
-			isObject( peek( source, k ) )
-		) {
+		if ( isObject( peek( target, k ) ) && isObject( peek( source, k ) ) ) {
 			mergeDeepSignals(
 				target[ `$${ k }` ].peek(),
-				source[ `$${ k }` ].peek()
+				source[ `$${ k }` ].peek(),
+				overwrite
 			);
+		} else if ( overwrite || typeof peek( target, k ) === 'undefined' ) {
+			target[ `$${ k }` ] = source[ `$${ k }` ];
 		}
 	}
 };
@@ -46,9 +44,9 @@ export default () => {
 			const currentValue = useRef( deepSignal( {} ) );
 			currentValue.current = useMemo( () => {
 				const newValue = deepSignal( newContext );
-				mergeDeepSignals( newValue, currentValue.current );
 				mergeDeepSignals( newValue, inheritedValue );
-				return newValue;
+				mergeDeepSignals( currentValue.current, newValue, true );
+				return currentValue.current;
 			}, [ newContext, inheritedValue ] );
 
 			return (

test/e2e/specs/interactivity/directives-context.spec.ts

@@ -180,4 +180,13 @@ test.describe( 'data-wp-context', () => {
 		await page.getByTestId( 'navigate' ).click();
 		await expect( element ).toHaveText( 'some new text' );
 	} );
+
+	test( 'should maintain the same context reference on async actions', async ( {
+		page,
+	} ) => {
+		const element = page.getByTestId( 'navigation new text' );
+		await expect( element ).toHaveText( '' );
+		await page.getByTestId( 'async navigate' ).click();
+		await expect( element ).toHaveText( 'changed from async action' );
+	} );
 } );