Interactivity API: merge new server-side rendered context on client-s…

…ide navigation (#53853)

* Add failing test

* Fix the test

* Add changelog

* Fix lint error

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

@@ -119,3 +119,15 @@
 		</button>
 	</div>
 </div>
+
+<div
+	data-wp-interactive
+	data-wp-navigation-id="navigation"
+	data-wp-context='{ "text": "first page" }'
+>
+	<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="navigate" data-wp-on--click="actions.navigate">Navigate</button>
+</div>

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

@@ -1,5 +1,18 @@
 ( ( { wp } ) => {
-	const { store } = wp.interactivity;
+	const { store, navigate } = wp.interactivity;
+
+	const html = `
+		<div
+			data-wp-interactive
+			data-wp-navigation-id="navigation"
+			data-wp-context='{ "text": "second page" }'
+		>
+			<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="navigate" data-wp-on--click="actions.navigate">Navigate</button>
+		</div>`;
 
 	store( {
 		derived: {
@@ -17,6 +30,18 @@
 			toggleContextText: ( { context } ) => {
 				context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1';
 			},
+			toggleText: ( { context } ) => {
+				context.text = "changed dynamically";
+			},
+			addNewText: ( { context } ) => {
+				context.newText = 'some new text';
+			},
+			navigate: () => {
+				navigate( window.location, {
+					force: true,
+					html,
+				} );
+			}
 		},
 	} );
 } )( window );

packages/interactivity/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   Merge new server-side rendered context on client-side navigation. ([#53853](https://github.com/WordPress/gutenberg/pull/53853))
+
 ## 2.1.0 (2023-08-16)
 
 ### New Features

packages/interactivity/src/directives.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useContext, useMemo, useEffect } from 'preact/hooks';
+import { useContext, useMemo, useEffect, useRef } from 'preact/hooks';
 import { deepSignal, peek } from 'deepsignal';
 
 /**
@@ -36,20 +36,24 @@ export default () => {
 		'context',
 		( {
 			directives: {
-				context: { default: context },
+				context: { default: newContext },
 			},
 			props: { children },
-			context: inherited,
+			context: inheritedContext,
 		} ) => {
-			const { Provider } = inherited;
-			const inheritedValue = useContext( inherited );
-			const value = useMemo( () => {
-				const localValue = deepSignal( context );
-				mergeDeepSignals( localValue, inheritedValue );
-				return localValue;
-			}, [ context, inheritedValue ] );
+			const { Provider } = inheritedContext;
+			const inheritedValue = useContext( inheritedContext );
+			const currentValue = useRef( deepSignal( {} ) );
+			currentValue.current = useMemo( () => {
+				const newValue = deepSignal( newContext );
+				mergeDeepSignals( newValue, currentValue.current );
+				mergeDeepSignals( newValue, inheritedValue );
+				return newValue;
+			}, [ newContext, inheritedValue ] );
 
-			return <Provider value={ value }>{ children }</Provider>;
+			return (
+				<Provider value={ currentValue.current }>{ children }</Provider>
+			);
 		},
 		{ priority: 5 }
 	);

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

@@ -162,4 +162,22 @@ test.describe( 'data-wp-context', () => {
 		await expect( element ).toHaveText( 'Text 1' );
 		await expect( element ).toHaveAttribute( 'value', 'Text 1' );
 	} );
+
+	test( 'should replace values on navigation', async ( { page } ) => {
+		const element = page.getByTestId( 'navigation text' );
+		await expect( element ).toHaveText( 'first page' );
+		await page.getByTestId( 'toggle text' ).click();
+		await expect( element ).toHaveText( 'changed dynamically' );
+		await page.getByTestId( 'navigate' ).click();
+		await expect( element ).toHaveText( 'second page' );
+	} );
+
+	test( 'should preserve the previous context values', async ( { page } ) => {
+		const element = page.getByTestId( 'navigation new text' );
+		await expect( element ).toHaveText( '' );
+		await page.getByTestId( 'add new text' ).click();
+		await expect( element ).toHaveText( 'some new text' );
+		await page.getByTestId( 'navigate' ).click();
+		await expect( element ).toHaveText( 'some new text' );
+	} );
 } );