Interactivity API: Correctly handle lazily added, deeply nested properties in context

[michalczaplinski]

Description

This PR addresses an issue in the Interactivity API where deeply nested properties that are initially undefined and later added to the context were not being properly handled. The change ensures that effects dependent on these properties are correctly triggered when the properties are added, even if they initially undefined.

Changes

• Added a new test case in packages/interactivity/src/proxies/test/context-proxy.ts to demonstrate the desired behavior for deeply nested properties.
• (TODO) Implement the necessary changes in the proxifyContext or deepMerge function to support this behavior.

Testing

A new test case has been added to verify the correct handling of deeply nested properties

TODO

• Implement the necessary changes in the proxifyContext() or deepMerge() function to make the new test pass.

[michalczaplinski]

@DAreRodz both of those assertions fail:

• expect( spy ).toHaveBeenCalledTimes( 2 );

   Expected number of calls: 2
   Received number of calls: 1
  

• expect( deepValue ).toBe( 'test value' );

   Expected: "test value"
   Received: undefined
  

But I'm not 100% sure if those are precisely the failures we wanted to see.

[DAreRodz]

Thanks for the PR, @michalczaplinski. 😁

I'm not 100% sure if those are precisely the failures we wanted to see.

They are. The values received are the same as those returned in the initial call. Basically, the spy function has not been executed again because the signal for context.a has not been updated.

[michalczaplinski]

I had to stare at the test a little longer to convince myself that it was actually the case 😅.

Excellent, I'll add the fix tomorrow 🙂

[michalczaplinski]

@DAreRodz

As we discussed, I was expecting the unit test to fail, but after updating the test cases they are actually passing!

---

Here's what's going on. Let's assume I'm going through an example that follows the newly added unit tests in this PR - meaning I'm trying to follow what's going on when running the following code:

const fallback: any = proxifyContext(
	proxifyState( 'test', {} ),
	{}
);

const context: any = proxifyContext(
	proxifyState( 'test', {} ),
	fallback
);

deepMerge( context, { a: { b: { c: { d: 'test value' } } } } );

When we set a property on the context using deepMerge(), it enters into this code path and tries to set the value:

gutenberg/packages/interactivity/src/proxies/state.ts

Lines 303 to 305 in 3ef1f89

	if ( isNew ) {
	target[ key ] = {};
	}

This triggers the set() trap of the state proxy which calls Reflect.set() here:

gutenberg/packages/interactivity/src/proxies/state.ts

Line 153 in 3ef1f89

return Reflect.set( target, key, value, receiver );

At this point:

• target is a Proxied object ({})
• key is a
• value is {}

Since the key does not exist on target, this further triggers the defineProperty() trap. It is there that the value is finally set:

gutenberg/packages/interactivity/src/proxies/state.ts

Lines 165 to 166 in 3ef1f89

	const result = Reflect.defineProperty( target, key, desc );

However, the defineProperty() trap also creates a signal and proxifies the state!

gutenberg/packages/interactivity/src/proxies/state.ts

Lines 175 to 177 in 3ef1f89

	prop.setValue(
	shouldProxy( value ) ? proxifyState( ns, value ) : value
	);

After that, context.a is proxied. When the defineProperty() trap and subsequently the set() trap returns, we are back here:

gutenberg/packages/interactivity/src/proxies/state.ts

Lines 307 to 308 in 3ef1f89

	deepMergeRecursive( target[ key ], source[ key ], override );
	} else if ( override || isNew ) {

As we call deepMergeRecursive, we'll recurse one level lower and repeat the process until the whole nested object is proxified.