Interactivity API: Fix reactivity of undefined objects and arrays added with deepMerge

packages/interactivity/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   Fix reactivity of undefined objects and arrays added with `deepMerge()` ([#66183](https://github.com/WordPress/gutenberg/pull/66183)).
+
 ## 6.10.0 (2024-10-16)
 
 ### Internal

packages/interactivity/src/proxies/state.ts

@@ -335,7 +335,10 @@ const deepMergeRecursive = (
 			if ( isNew || ( override && ! isPlainObject( target[ key ] ) ) ) {
 				target[ key ] = {};
 				if ( propSignal ) {
-					propSignal.setValue( target[ key ] );
+					const ns = getNamespaceFromProxy( proxy );
+					propSignal.setValue(
+						proxifyState( ns, target[ key ] as Object )
+					);
 				}
 			}
 			if ( isPlainObject( target[ key ] ) ) {
@@ -344,7 +347,11 @@ const deepMergeRecursive = (
 		} else if ( override || isNew ) {
 			Object.defineProperty( target, key, desc );
 			if ( propSignal ) {
-				propSignal.setValue( desc.value );
+				const { value } = desc;
+				const ns = getNamespaceFromProxy( proxy );
+				propSignal.setValue(
+					shouldProxy( value ) ? proxifyState( ns, value ) : value
+				);
 			}
 		}
 	}

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

@@ -379,15 +379,18 @@ describe( 'Interactivity API', () => {
 			const target = proxifyState< any >( 'test', { a: 1, b: 2 } );
 			const source = { a: 1, b: 2, c: 3 };
 
-			const spy = jest.fn( () => Object.keys( target ) );
+			let keys: any;
+			const spy = jest.fn( () => {
+				keys = Object.keys( target );
+			} );
 			effect( spy );
 
 			expect( spy ).toHaveBeenCalledTimes( 1 );
 
 			deepMerge( target, source, false );
 
 			expect( spy ).toHaveBeenCalledTimes( 2 );
-			expect( spy ).toHaveLastReturnedWith( [ 'a', 'b', 'c' ] );
+			expect( keys ).toEqual( [ 'a', 'b', 'c' ] );
 		} );
 
 		it( 'should handle deeply nested properties that are initially undefined', () => {
@@ -462,5 +465,61 @@ describe( 'Interactivity API', () => {
 			expect( target.message.content ).toBeUndefined();
 			expect( target.message.fontStyle ).toBeUndefined();
 		} );
+
+		it( 'should keep reactivity of objects that are initially undefined', () => {
+			const target: any = proxifyState( 'test', {} );
+
+			let deepValue: any;
+			const spy = jest.fn( () => {
+				deepValue = target.obj?.nested;
+			} );
+			effect( spy );
+
+			// Initial call, the deep value is undefined
+			expect( spy ).toHaveBeenCalledTimes( 1 );
+			expect( deepValue ).toBeUndefined();
+
+			// Use deepMerge to add a deeply nested object to the target
+			deepMerge( target, { obj: { nested: 'value 1' } } );
+
+			// The effect should be called again
+			expect( spy ).toHaveBeenCalledTimes( 2 );
+			expect( deepValue ).toBe( 'value 1' );
+
+			// Modify the nested value
+			target.obj.nested = 'value 2';
+
+			// The effect should be called again
+			expect( spy ).toHaveBeenCalledTimes( 3 );
+			expect( deepValue ).toBe( 'value 2' );
+		} );
+
+		it( 'should keep reactivity of arrays that are initially undefined', () => {
+			const target: any = proxifyState( 'test', {} );
+
+			let deepValue: any;
+			const spy = jest.fn( () => {
+				deepValue = target.array?.[ 0 ];
+			} );
+			effect( spy );
+
+			// Initial call, the deep value is undefined
+			expect( spy ).toHaveBeenCalledTimes( 1 );
+			expect( deepValue ).toBeUndefined();
+
+			// Use deepMerge to add an array to the target
+			deepMerge( target, { array: [ 'value 1' ] } );
+
+			// The effect should be called again
+			expect( spy ).toHaveBeenCalledTimes( 2 );
+			expect( deepValue ).toBe( 'value 1' );
+
+			// Modify the array value
+			target.array[ 0 ] = 'value 2';
+
+			// The effect should be called again
+			expect( spy ).toHaveBeenCalledTimes( 3 );
+			expect( deepValue ).toBe( 'value 2' );
+		} );
 	} );
 } );