Serialize store in PHP by DAreRodz · Pull Request #147 · WordPress/block-interactivity-experiments

DAreRodz · 2023-02-03T18:35:59Z

What

Adds store serialization and hydration.

Why

The framework requires them. Developers should be able to send the initial state from the server as part of the SSR.

How

Implementing a WP_Directive_Store class that contains the generated state.
Adding a store( $data ) function to define the state on the block's render callback.
Adding a evaluate( $path, $context ) function to access both the state and the context (like in JS)
Serializing and sending the store's content to the client in a <script type="application/json"> tag.
Parsing the serialized store in the client and using it to initialize the store.
Rename wpx to store

ockham · 2023-02-09T15:18:04Z

phpunit/directives/utils/evaluate.php

+				'state' => array(
+					'core' => array(
+						'a'      => 1,
+						'b'      => 2,


How about throwing in a different type value (to make sure evaluate gets the type right)? 😄

Suggested change

'b' => 2,

'b' => true,

(and then assertTrue further down).

ockham · 2023-02-09T15:18:53Z

phpunit/directives/utils/evaluate.php

+			'core' => array(
+				'a'      => 1,
+				'b'      => 2,
+				'nested' => array(
+					'c' => 3,
+				),


Maybe use a value for $context that's different from $state?

ockham · 2023-02-09T15:22:42Z

src/directives/attributes/wp-bind.php

@@ -17,7 +17,7 @@ function process_wp_bind( $tags, $context ) {

 		// TODO: Properly parse $value.


Let's maybe remove the TODO already -- it doesn't make sense to have it in every directive processor's individual code 😄

Suggested change

// TODO: Properly parse $value.

ockham · 2023-02-09T15:22:57Z

src/directives/attributes/wp-class.php

@@ -17,7 +17,7 @@ function process_wp_class( $tags, $context ) {

 		// TODO: Properly parse $value.


Same as https://github.com/WordPress/block-hydration-experiments/pull/147/files#r1101622012

Suggested change

// TODO: Properly parse $value.

ockham · 2023-02-09T15:23:09Z

src/directives/attributes/wp-style.php

@@ -17,7 +17,7 @@ function process_wp_style( $tags, $context ) {

 		// TODO: Properly parse $value.


Same as https://github.com/WordPress/block-hydration-experiments/pull/147/files#r1101622012

Suggested change

// TODO: Properly parse $value.

ockham · 2023-02-09T15:25:40Z

src/directives/utils.php

+	WP_Directive_Store::merge_data( $data );
+}
+
+function evaluate( string $path, array $context = array() ) {


Let's maybe add a TODO here.

Suggested change

function evaluate( string $path, array $context = array() ) {

// TODO: Implement evaluation of complex logical expressions.

function evaluate( string $path, array $context = array() ) {

ockham · 2023-02-09T15:28:08Z

wp-directives.php

+
+// TODO: check if priority 9 is enough.
+// TODO: check if `wp_footer` is the most appropriate hook.
+add_action( 'wp_footer', WP_Directive_Store::render, 9 );


Ah, don't we normally use a different notation for invoking a class method? 🤔

Suggested change

add_action( 'wp_footer', WP_Directive_Store::render, 9 );

add_action( 'wp_footer', array( 'WP_Directive_Store', 'render' ), 9 );

I was sure there was a syntax for that, but I couldn't remember. 😄

ockham · 2023-02-09T15:35:41Z

e2e/store-tag.spec.ts

+		await expect(double).toHaveText('6');
+		await expect(clicks).toHaveText('0');
+
+		page.getByTestId('counter button').click();


Can we also add unit test coverage for this functionality in the future (to test things in a more isolated way)? 😊

I.e. for wp-on:click, we'd likely want to pass a mock function and would check if it's really been called.

Or for wp-bind, we'd probably want to update a state value manually, and verify that the bound attribute is changed accordingly.

Agree. We could do so in a future PR (also for other directives/functionalities). ☝️

ockham · 2023-02-09T15:39:29Z

phpunit/directives/wp-directive-store.php

+		);
+	}
+
+	public function test_store_should_be_correctly_render() {


Grammar nitpick 😊

Suggested change

public function test_store_should_be_correctly_render() {

public function test_store_should_be_correctly_rendered() {

ockham

I left a few minor notes, but LGTM in general! 🚢

luisherranz · 2023-02-16T17:29:10Z

Great work, David 🙂

For context here, we also need to merge the state that comes in the new page during client-side navigations.

I've been talking with David and we think merging both states should be enough. @DAreRodz can you open a new issue for that, and another one to also merge contexts?

SantosGuillamot · 2023-02-17T08:48:02Z

For context here, we also need to merge the state that comes in the new page during client-side navigations.

FYI: I think we will face this issue in the Movies Demo. There will probably be interactive blocks that aren't on the homepage, and after navigating to a movie, they won't work as expected. I'm thinking of a Tabs block to toggle between images and videos, for example.

DAreRodz added 14 commits February 2, 2023 19:16

Remove PHP plugin for Prettier

f60a6bc

Apply format to wp-directives.php

172659c

Create a simple class for the store

4388f15

Implement store and evaluate functions

eabb512

Serialize store

6cdd9b3

Add phpunit folder to phpcs config

8d0a52f

Add tests for evaluate function

f035864

Fix evaluaterelated code

3ce4069

Ignore phpunit.result.cache

6d08fa1

Add reset function for WP_Directive_Store

bfc8c51

Write tests for WP_Directive_Store

3529577

Fix WP_Directive_Store

34017ae

Fix format

ae7664d

Extend evaluate tests

5566061

This was referenced Feb 3, 2023

Tracking issue: WordPress Directives Plugin 🎨 #80

Closed

Tracking issue: Adding directives to WooCommerce blocks woocommerce/woocommerce#42486

Closed

DAreRodz added 3 commits February 7, 2023 18:33

Rename wpx to store

2908cd3

Add e2e tests for store hydration

1fced11

Implement store hydration

f2f1635

DAreRodz self-assigned this Feb 7, 2023

DAreRodz marked this pull request as ready for review February 7, 2023 19:03

DAreRodz requested review from luisherranz, michalczaplinski and ockham February 7, 2023 19:03

DAreRodz added 2 commits February 8, 2023 17:56

Merge branch 'main-wp-directives-plugin' into store-ssr

2ca11a7

Fixed store tag e2e tests

fa1b72f

ockham reviewed Feb 9, 2023

View reviewed changes

ockham approved these changes Feb 9, 2023

View reviewed changes

DAreRodz added 6 commits February 9, 2023 19:04

Add different prop types in evaluate tests

4a3c245

Fix some TODO comments

b74ae16

Fix callback syntax for store rendering

3478853

Fix grammar in a test case name

e8c7fd7

Merge branch 'main-wp-directives-plugin' into store-ssr

91fe3d6

Fix path to wp-html classes

375fd8c

DAreRodz merged commit 4765ff5 into main-wp-directives-plugin Feb 9, 2023

DAreRodz deleted the store-ssr branch February 9, 2023 22:23

SantosGuillamot mentioned this pull request Feb 13, 2023

Create a Movie Search block WordPress/wp-movies-demo#13

Merged

michalczaplinski mentioned this pull request Feb 16, 2023

Work with client side navigation disabled WordPress/wp-movies-demo#15

Closed

		@@ -17,7 +17,7 @@ function process_wp_bind( $tags, $context ) {

		// TODO: Properly parse $value.

		@@ -17,7 +17,7 @@ function process_wp_class( $tags, $context ) {

		// TODO: Properly parse $value.

		@@ -17,7 +17,7 @@ function process_wp_style( $tags, $context ) {

		// TODO: Properly parse $value.

	function evaluate( string $path, array $context = array() ) {
	// TODO: Implement evaluation of complex logical expressions.
	function evaluate( string $path, array $context = array() ) {

	add_action( 'wp_footer', WP_Directive_Store::render, 9 );
	add_action( 'wp_footer', array( 'WP_Directive_Store', 'render' ), 9 );

	public function test_store_should_be_correctly_render() {
	public function test_store_should_be_correctly_rendered() {

Conversation

DAreRodz commented Feb 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Why

How

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ockham left a comment

Choose a reason for hiding this comment

Uh oh!

luisherranz commented Feb 16, 2023

Uh oh!

SantosGuillamot commented Feb 17, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

DAreRodz commented Feb 3, 2023 •

edited

Loading