What?

Closes #70874

Changes the way getters are updated when store() is called. Instead of synchronously, which can cause problems with stores that are loaded after hydration, they are now updated asynchronously in a microtask, ensuring the updates happen before Preact renders.

In the case that a getter is accessed synchronously right after being updated, the pending update is consolidated at that moment to reflect the correct value.

Why?

See #70874.

The store() function of the interactivity API is intended to allow the following syntax:

import { store } from '@wordpress/interactivity';
const { state } = store( 'myPlugin', {
  state: {
    number: 2,
    get double () {
      return state.number * 2;
    },
  },
} );

See how the returned state is used inside the state.double getter. When the store() function runs before hydration, it works just fine. But if it happens after hydration, and the state.double was already accessed, meaning that a computed was already created for that prop, the getter is evaluated before store() returns, and the execution fails with the following error:

ReferenceError: Cannot access 'state'  before initialization

This happens because of the Preact's computed() implementation, which updates all computeds synchronously when any of their sources change.

How?

Instead of creating a custom computed() implementation, this PR adds a setGetterAsync method to PropSignal (the internal class that handles prop updates). That method makes PropSignal getters to be updated in a microtask. As microtasks run right at the end of the current task, the update is ensured to happen before the next Preact render (scheduled for the next task).

In addition, if the getComputed() function of the PropSignal class is called and a pending getter update exists, the update is performed synchronously at that moment.

Testing Instructions

Apart from the added unit tests and e2e tests, you can test the fix manually following these steps:

1. In a page or template with interactive blocks, add a Custom HTML block with this content:

   Custom HTML

   <div data-wp-interactive="myPlugin">
     <button data-wp-on--click="actions.inc">+</button>
     <p>Count: <span data-wp-text="state.count"></span></p>
     <p>Double: <span data-wp-text="state.double"></span></p>
   </div>
   <script type=module>
   /**
    * WordPress dependencies
    */
   import { store } from '@wordpress/interactivity';
   // Simulate state serialized from the server.
   store('myPlugin', {
     state: {
       count: 1,
       double: 2,
     },
   });
   // Simulate lazy loaded store.
   setTimeout(() => {
     const { state } = store('myPlugin', {
       state: {
         get double() {
           return state.count * 2;
         },
       },
       actions: {
         inc: () => {
           state.count++;
         },
       },
     });
   });
   </script>

2. Save and visit the page with the Custom HTML block.

3. A button with the symbol + should be rendered, along with the words "Count" and "Double", each with its corresponding value.

4. Press the button + a couple of times.

5. Ensure the value of "Double" is consistent with the value of "Count".