Interactivity API: Update iterable signals when deepMerge() adds ne…

…w properties (#65135)

* Add failing test

* Fix `deepMerge` implementation

* Update changelog

* Move iterable signal updating outside `for...in` loop

Co-authored-by: DAreRodz <darerodz@git.wordpress.org>
Co-authored-by: michalczaplinski <czapla@git.wordpress.org>
Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org>

packages/interactivity/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Bug Fixes
 
 -   Prevent calling `proxifyContext` over an already-proxified context inside `wp-context` ([#65090](https://github.com/WordPress/gutenberg/pull/65090)).
+-   Update iterable signals when `deepMerge()` adds new properties ([#65135](https://github.com/WordPress/gutenberg/pull/65135)).
 
 ## 6.7.0 (2024-09-05)
 

packages/interactivity/src/proxies/state.ts

@@ -276,13 +276,17 @@ const deepMergeRecursive = (
 	override: boolean = true
 ) => {
 	if ( isPlainObject( target ) && isPlainObject( source ) ) {
+		let hasNewKeys = false;
 		for ( const key in source ) {
+			const isNew = ! ( key in target );
+			hasNewKeys = hasNewKeys || isNew;
+
 			const desc = Object.getOwnPropertyDescriptor( source, key );
 			if (
 				typeof desc?.get === 'function' ||
 				typeof desc?.set === 'function'
 			) {
-				if ( override || ! ( key in target ) ) {
+				if ( override || isNew ) {
 					Object.defineProperty( target, key, {
 						...desc,
 						configurable: true,
@@ -296,12 +300,12 @@ const deepMergeRecursive = (
 					}
 				}
 			} else if ( isPlainObject( source[ key ] ) ) {
-				if ( ! ( key in target ) ) {
+				if ( isNew ) {
 					target[ key ] = {};
 				}
 
 				deepMergeRecursive( target[ key ], source[ key ], override );
-			} else if ( override || ! ( key in target ) ) {
+			} else if ( override || isNew ) {
 				Object.defineProperty( target, key, desc! );
 
 				const proxy = getProxyFromObject( target );
@@ -311,6 +315,10 @@ const deepMergeRecursive = (
 				}
 			}
 		}
+
+		if ( hasNewKeys && objToIterable.has( target ) ) {
+			objToIterable.get( target )!.value++;
+		}
 	}
 };
 

packages/interactivity/src/proxies/test/deep-merge.ts

@@ -374,5 +374,20 @@ describe( 'Interactivity API', () => {
 
 			expect( spy ).toHaveBeenCalledTimes( 3 );
 		} );
+
+		it( 'should update iterable signals when new keys are added', () => {
+			const target = proxifyState< any >( 'test', { a: 1, b: 2 } );
+			const source = { a: 1, b: 2, c: 3 };
+
+			const spy = jest.fn( () => Object.keys( target ) );
+			effect( spy );
+
+			expect( spy ).toHaveBeenCalledTimes( 1 );
+
+			deepMerge( target, source, false );
+
+			expect( spy ).toHaveBeenCalledTimes( 2 );
+			expect( spy ).toHaveLastReturnedWith( [ 'a', 'b', 'c' ] );
+		} );
 	} );
 } );