diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md index b96dce6ffdcd4b..71ec27e50a87e4 100644 --- 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 index 14f0dc6683b460..0f3bb145b6559c 100644 --- 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 =