Interactivity API: Refactor internal proxy and signals system

packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php

@@ -220,14 +220,14 @@
 <div
 	data-wp-interactive="directive-each"
 	data-wp-router-region="navigation-updated list"
-	data-wp-context='{ "list": [ "beta", "gamma", "delta" ] }'
+	data-wp-context='{ "b": 2, "c": 3, "d": 4 }'
 	data-testid="navigation-updated list"
 >
 	<button
 		data-testid="navigate"
 		data-wp-on--click="actions.navigate"
 	>Navigate</button>
-	<template data-wp-each="context.list">
+	<template data-wp-each="state.list">
 		<p data-wp-text="context.item" data-testid="item"></p>
 	</template>
 	<p data-testid="item" data-wp-each-child>beta</p>

packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js

@@ -169,14 +169,14 @@ const html = `
 <div
 	data-wp-interactive="directive-each"
 	data-wp-router-region="navigation-updated list"
-	data-wp-context='{ "list": [ "alpha", "beta", "gamma", "delta" ] }'
+	data-wp-context='{ "a": 1, "b": 2, "c": 3, "d": 4 }'
 	data-testid="navigation-updated list"
 >
 	<button
 		data-testid="navigate"
 		data-wp-on--click="actions.navigate"
 	>Navigate</button>
-	<template data-wp-each="context.list">
+	<template data-wp-each="state.list">
 		<p data-wp-text="context.item" data-testid="item"></p>
 	</template>
 	<p data-testid="item" data-wp-each-child>alpha</p>
@@ -187,6 +187,12 @@ const html = `
 `;
 
 store( 'directive-each', {
+	state: {
+		get list() {
+			const ctx = getContext();
+			return Object.keys( ctx ).sort();
+		},
+	},
 	actions: {
 		*navigate() {
 			const { actions } = yield import(

packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js

@@ -8,7 +8,7 @@ import {
 	privateApis,
 } from '@wordpress/interactivity';
 
-const { directive, deepSignal, h } = privateApis(
+const { directive, proxifyState, h } = privateApis(
 	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
 );
 
@@ -41,12 +41,12 @@ directive(
 	'test-context',
 	( { context: { Provider }, props: { children } } ) => {
 		executionProof( 'context' );
-		const value = deepSignal( {
-			[ namespace ]: {
+		const value = {
+			[ namespace ]: proxifyState( namespace, {
 				attribute: 'from context',
 				text: 'from context',
-			},
-		} );
+			} ),
+		};
 		return h( Provider, { value }, children );
 	},
 	{ priority: 8 }

packages/interactivity-router/src/index.ts

@@ -14,8 +14,8 @@ const {
 	initialVdom,
 	toVdom,
 	render,
-	parseInitialData,
-	populateInitialData,
+	parseServerData,
+	populateServerData,
 	batch,
 } = privateApis(
 	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
@@ -103,7 +103,7 @@ const regionsToVdom: RegionsToVdom = async ( dom, { vdom } = {} ) => {
 		} );
 	}
 	const title = dom.querySelector( 'title' )?.innerText;
-	const initialData = parseInitialData( dom );
+	const initialData = parseServerData( dom );
 	return { regions, head, title, initialData };
 };
 
@@ -119,7 +119,7 @@ const renderRegions = ( page: Page ) => {
 			}
 		}
 		if ( navigationMode === 'regionBased' ) {
-			populateInitialData( page.initialData );
+			populateServerData( page.initialData );
 			const attrName = `data-${ directivePrefix }-router-region`;
 			document
 				.querySelectorAll( `[${ attrName }]` )

packages/interactivity/package.json

@@ -28,7 +28,6 @@
 	"types": "build-types",
 	"dependencies": {
 		"@preact/signals": "^1.2.2",
-		"deepsignal": "^1.4.0",
 		"preact": "^10.19.3"
 	},
 	"publishConfig": {

packages/interactivity/src/directives.tsx

@@ -6,14 +6,24 @@
  */
 import { h as createElement, type RefObject } from 'preact';
 import { useContext, useMemo, useRef } from 'preact/hooks';
-import { deepSignal, peek, type DeepSignal } from 'deepsignal';
+/**
+ * Internal dependencies
+ */
+import { proxifyState, peek } from './proxies';
 
 /**
  * Internal dependencies
  */
-import { useWatch, useInit, kebabToCamelCase, warn, splitTask } from './utils';
-import type { DirectiveEntry } from './hooks';
-import { directive, getScope, getEvaluate } from './hooks';
+import {
+	useWatch,
+	useInit,
+	kebabToCamelCase,
+	warn,
+	splitTask,
+	isPlainObject,
+} from './utils';
+import { directive, getEvaluate, type DirectiveEntry } from './hooks';
+import { getScope } from './scopes';
 
 // Assigned objects should be ignored during proxification.
 const contextAssignedObjects = new WeakMap();
@@ -23,9 +33,6 @@ const contextObjectToProxy = new WeakMap();
 const contextProxyToObject = new WeakMap();
 const contextObjectToFallback = new WeakMap();
 
-const isPlainObject = ( item: unknown ): boolean =>
-	Boolean( item && typeof item === 'object' && item.constructor === Object );
-
 const descriptor = Reflect.getOwnPropertyDescriptor;
 
 /**
@@ -47,7 +54,7 @@ const proxifyContext = ( current: object, inherited: object = {} ): object => {
 	contextObjectToFallback.set( current, inherited );
 	if ( ! contextObjectToProxy.has( current ) ) {
 		const proxy = new Proxy( current, {
-			get: ( target: DeepSignal< any >, k ) => {
+			get: ( target: object, k: string ) => {
 				const fallback = contextObjectToFallback.get( current );
 				// Always subscribe to prop changes in the current context.
 				const currentProp = target[ k ];
@@ -61,9 +68,9 @@ const proxifyContext = ( current: object, inherited: object = {} ): object => {
 				if (
 					k in target &&
 					! contextAssignedObjects.get( target )?.has( k ) &&
-					isPlainObject( peek( target, k ) )
+					isPlainObject( currentProp )
 				) {
-					return proxifyContext( currentProp, fallback[ k ] );
+					return proxifyContext( currentProp );
 				}
 
 				// Return the stored proxy for `currentProp` when it exists.
@@ -125,22 +132,19 @@ const proxifyContext = ( current: object, inherited: object = {} ): object => {
 };
 
 /**
- * Recursively update values within a deepSignal object.
+ * Recursively update values within a context object.
  *
- * @param target A deepSignal instance.
+ * @param target A context instance.
  * @param source Object with properties to update in `target`.
  */
-const updateSignals = (
-	target: DeepSignal< any >,
-	source: DeepSignal< any >
-) => {
+const updateContext = ( target: any, source: any ) => {
 	for ( const k in source ) {
 		if (
 			isPlainObject( peek( target, k ) ) &&
-			isPlainObject( peek( source, k ) )
+			isPlainObject( source[ k ] )
 		) {
-			updateSignals( target[ `$${ k }` ].peek(), source[ k ] );
-		} else {
+			updateContext( peek( target, k ) as object, source[ k ] );
+		} else if ( ! ( k in target ) ) {
 			target[ k ] = source[ k ];
 		}
 	}
@@ -257,18 +261,21 @@ export default () => {
 	// data-wp-context
 	directive(
 		'context',
-		// @ts-ignore-next-line
 		( {
 			directives: { context },
 			props: { children },
 			context: inheritedContext,
 		} ) => {
 			const { Provider } = inheritedContext;
-			const inheritedValue = useContext( inheritedContext );
-			const currentValue = useRef( deepSignal( {} ) );
 			const defaultEntry = context.find(
 				( { suffix } ) => suffix === 'default'
 			);
+			const inheritedValue = useContext( inheritedContext );
+
+			const ns = defaultEntry!.namespace;
+			const currentValue = useRef( {
+				[ ns ]: proxifyState( ns, {} ),
+			} );
 
 			// No change should be made if `defaultEntry` does not exist.
 			const contextStack = useMemo( () => {
@@ -280,11 +287,16 @@ export default () => {
 							`The value of data-wp-context in "${ namespace }" store must be a valid stringified JSON object.`
 						);
 					}
-					updateSignals( currentValue.current, {
-						[ namespace ]: deepClone( value ),
-					} );
+					updateContext(
+						currentValue.current[ namespace ],
+						deepClone( value ) as object
+					);
+					currentValue.current[ namespace ] = proxifyContext(
+						currentValue.current[ namespace ],
+						inheritedValue[ namespace ]
+					);
 				}
-				return proxifyContext( currentValue.current, inheritedValue );
+				return currentValue.current;
 			}, [ defaultEntry, inheritedValue ] );
 
 			return createElement( Provider, { value: contextStack }, children );
@@ -677,11 +689,14 @@ export default () => {
 			return list.map( ( item ) => {
 				const itemProp =
 					suffix === 'default' ? 'item' : kebabToCamelCase( suffix );
-				const itemContext = deepSignal( { [ namespace ]: {} } );
-				const mergedContext = proxifyContext(
-					itemContext,
-					inheritedValue
+				const itemContext = proxifyContext(
+					proxifyState( namespace, {} ),
+					inheritedValue[ namespace ]
 				);
+				const mergedContext = {
+					...inheritedValue,
+					[ namespace ]: itemContext,
+				};
 
 				// Set the item after proxifying the context.
 				mergedContext[ namespace ][ itemProp ] = item;