Interactivity API: Remove unused state and rename props to `attri…

…butes` in `getElement()` (#57974) * Remove state from getElement() * Refactor props to attributes in getElement() * Update changelog * Update spaces in CHANGELOG * Fix spaces in changelog * Fix duplicate section --------- Co-authored-by: Luis Herranz <luisherranz@gmail.com>
WordPress · Jan 18, 2024 · 3f010e6 · 3f010e6
1 parent 40a2e8f
commit 3f010e6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 14 deletions.
diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
@@ -4,20 +4,18 @@
 
 ### Enhancements
 
-- Prevent the usage of Preact components in `wp-text`. ([#57879](https://github.com/WordPress/gutenberg/pull/57879))
+-   Prevent the usage of Preact components in `wp-text`. ([#57879](https://github.com/WordPress/gutenberg/pull/57879))
+-   Update `preact`, `@preact/signals` and `deepsignal` dependencies. ([57891](https://github.com/WordPress/gutenberg/pull/57891))
 
 ### New Features
 
 -   Add the `data-wp-run` directive along with the `useInit` and `useWatch` hooks. ([57805](https://github.com/WordPress/gutenberg/pull/57805))
 
-### Enhancements
-
--  Update `preact`, `@preact/signals` and `deepsignal` dependencies. ([57891](https://github.com/WordPress/gutenberg/pull/57891))
-
 ### Breaking Changes
 
 -   Remove `data-wp-slot` and `data-wp-fill`. ([#57854](https://github.com/WordPress/gutenberg/pull/57854))
 -   Remove `wp-data-navigation-link` directive. ([#57853](https://github.com/WordPress/gutenberg/pull/57853))
+-   Remove unused `state` and rename `props` to `attributes` in `getElement()`. ([#57974](https://github.com/WordPress/gutenberg/pull/57974))
 
 ### Bug Fix
 

diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx
@@ -3,7 +3,6 @@
  */
 import { h, options, createContext, cloneElement } from 'preact';
 import { useRef, useCallback, useContext } from 'preact/hooks';
-import { deepSignal } from 'deepsignal';
 import type { VNode, Context, RefObject } from 'preact';
 
 /**
@@ -60,8 +59,7 @@ interface Scope {
 	evaluate: Evaluate;
 	context: Context< any >;
 	ref: RefObject< HTMLElement >;
-	state: any;
-	props: any;
+	attributes: h.JSX.HTMLAttributes;
 }
 
 interface Evaluate {
@@ -142,11 +140,10 @@ export const getElement = () => {
 			'Cannot call `getElement()` outside getters and actions used by directives.'
 		);
 	}
-	const { ref, state, props } = getScope();
+	const { ref, attributes } = getScope();
 	return Object.freeze( {
 		ref: ref.current,
-		state,
-		props: deepImmutable( props ),
+		attributes: deepImmutable( attributes ),
 	} );
 };
 
@@ -313,12 +310,12 @@ const Directives = ( {
 	scope.context = useContext( context );
 	/* eslint-disable react-hooks/rules-of-hooks */
 	scope.ref = previousScope?.ref || useRef( null );
-	scope.state = previousScope?.state || useRef( deepSignal( {} ) ).current;
 	/* eslint-enable react-hooks/rules-of-hooks */
 
-	// Create a fresh copy of the vnode element and add the props to the scope.
+	// Create a fresh copy of the vnode element and add the props to the scope,
+	// named as attributes (HTML Attributes).
 	element = cloneElement( element, { ref: scope.ref } );
-	scope.props = element.props;
+	scope.attributes = element.props;
 
 	// Recursively render the wrapper for the next priority level.
 	const children =