Interactivity API: Only add proxies to plain objects inside the store (…

…#59039)

* Only proxify plain objects

* Do not support objects without prototypes

* Rename store-tag to interactivity-data

* Add test for non-plain objects in state

* Update `isObject` implementation

* Update changelog

---------

Co-authored-by: c4rl0sbr4v0 <cbravobernal@git.wordpress.org>
Co-authored-by: DAreRodz <darerodz@git.wordpress.org>

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

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

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

@@ -0,0 +1,17 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-bind`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+wp_enqueue_script_module( 'store-view' );
+?>
+
+<div data-wp-interactive="test/store">
+	<div
+		data-testid="non-plain object"
+		data-wp-text="state.isNotProxified"
+		data-wp-init="callbacks.init"
+	></div>
+</div>

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

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getElement } from '@wordpress/interactivity';
+
+
+const { state } = store( 'test/store', {
+	state: {
+		get isNotProxified() {
+			const { ref } = getElement();
+			return state.elementRef === ref;
+		}
+	},
+	callbacks: {
+		init() {
+			const { ref } = getElement();
+			state.elementRef = ref; // HTMLElement
+		}
+	}
+} )

packages/interactivity/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   Only add proxies to plain objects inside the store. ([#59039](https://github.com/WordPress/gutenberg/pull/59039))
+
 ## 5.0.0 (2024-02-09)
 
 ### New Features

packages/interactivity/src/store.ts

@@ -16,8 +16,8 @@ import {
 	resetNamespace,
 } from './hooks';
 
-const isObject = ( item: unknown ): boolean =>
-	!! item && typeof item === 'object' && ! Array.isArray( item );
+const isObject = ( item: unknown ): item is Record< string, unknown > =>
+	item && typeof item === 'object' && item.constructor === Object;
 
 const deepMerge = ( target: any, source: any ) => {
 	if ( isObject( target ) && isObject( source ) ) {

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

@@ -0,0 +1,25 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-bind', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/store' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/store' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'non-plain objects are not proxified', async ( { page } ) => {
+		const el = page.getByTestId( 'non-plain object' );
+		await expect( el ).toHaveText( 'true' );
+	} );
+} );