Interactivity: Ensure stores are initialized on 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!' );
+	} );
+} );