Interactivity: Ensure stores are initialized on client (#59842)

If a store call happens after interactivity has hydrated, subscriptions may not be made correctly which means that when a store is later added, the subscriptions do not exist and the client will not update. This is undesirable.

We fix this by creating empty stores during directive resolution, ensuring subscriptions can be made so that subsequent store changes will update the client.

packages/e2e-tests/plugins/interactive-blocks/deferred-store/block.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/deferred-store",
+	"title": "E2E Interactivity tests - deferred store",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}

packages/e2e-tests/plugins/interactive-blocks/deferred-store/render.php

@@ -0,0 +1,15 @@
+<?php
+/**
+ * HTML for testing scope restoration with generators.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div
+	data-wp-interactive="test/deferred-store"
+	<?php echo wp_interactivity_data_wp_context( array( 'text' => '!dlrow ,olleH' ) ); ?>
+>
+	<span data-wp-text="state.reversedText" data-testid="result"></span>
+	<span data-wp-text="state.reversedTextGetter" data-testid="result-getter"></span>
+</div>

packages/e2e-tests/plugins/interactive-blocks/deferred-store/view.asset.php

@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );

packages/e2e-tests/plugins/interactive-blocks/deferred-store/view.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+document.addEventListener( 'DOMContentLoaded', () => {
+	setTimeout( () => {
+		store( 'test/deferred-store', {
+			state: {
+				reversedText() {
+					return [ ...getContext().text ].reverse().join( '' );
+				},
+
+				get reversedTextGetter() {
+					return [ ...getContext().text ].reverse().join( '' );
+				},
+			},
+		} );
+	}, 50 );
+} );

packages/interactivity/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Bug Fixes
 
+-   Ensure that stores are available for subscription before hydration. ([#59842](https://github.com/WordPress/gutenberg/pull/59842))
 -   Ensure scope is restored when catching exceptions thrown in async generator actions. ([#59708](https://github.com/WordPress/gutenberg/pull/59708))
 
 ## 5.2.0 (2024-03-06)

packages/interactivity/src/hooks.tsx

@@ -15,7 +15,7 @@ import type { VNode, Context, RefObject } from 'preact';
 /**
  * Internal dependencies
  */
-import { stores } from './store';
+import { store, stores, universalUnlock } from './store';
 interface DirectiveEntry {
 	value: string | Object;
 	namespace: string;
@@ -259,8 +259,14 @@ export const directive = (
 
 // Resolve the path to some property of the store object.
 const resolve = ( path, namespace ) => {
+	let resolvedStore = stores.get( namespace );
+	if ( typeof resolvedStore === 'undefined' ) {
+		resolvedStore = store( namespace, undefined, {
+			lock: universalUnlock,
+		} );
+	}
 	let current = {
-		...stores.get( namespace ),
+		...resolvedStore,
 		context: getScope().context[ namespace ],
 	};
 	path.split( '.' ).forEach( ( p ) => ( current = current[ p ] ) );

packages/interactivity/src/store.ts

@@ -202,7 +202,7 @@ interface StoreOptions {
 	lock?: boolean | string;
 }
 
-const universalUnlock =
+export const universalUnlock =
 	'I acknowledge that using a private store means my plugin will inevitably break on the next store release.';
 
 /**

test/e2e/specs/interactivity/deferred-store.spec.ts

@@ -0,0 +1,36 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'deferred store', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/deferred-store' );
+	} );
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/deferred-store' ) );
+	} );
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'Ensure that a store can be subscribed to before it is initialized', async ( {
+		page,
+	} ) => {
+		const resultInput = page.getByTestId( 'result' );
+		await expect( resultInput ).toHaveText( '' );
+		await expect( resultInput ).toHaveText( 'Hello, world!' );
+	} );
+
+	// There is a known issue for deferred getters right now.
+	// eslint-disable-next-line playwright/no-skipped-test
+	test.skip( 'Ensure that a state getter can be subscribed to before it is initialized', async ( {
+		page,
+	} ) => {
+		const resultInput = page.getByTestId( 'result-getter' );
+		await expect( resultInput ).toHaveText( '' );
+		await expect( resultInput ).toHaveText( 'Hello, world!' );
+	} );
+} );