From 160cb5b0a42e7570d7c150d7dad685f673b42dfc Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Tue, 17 Sep 2024 08:52:00 +0200 Subject: [PATCH 1/5] Rename "_legacy" dir to "legacy" --- packages/compose/src/hooks/use-resize-observer/index.ts | 4 ++-- .../use-resize-observer/{_legacy => legacy}/index.native.js | 0 .../hooks/use-resize-observer/{_legacy => legacy}/index.tsx | 0 .../{_legacy => legacy}/test/index.native.js | 0 4 files changed, 2 insertions(+), 2 deletions(-) rename packages/compose/src/hooks/use-resize-observer/{_legacy => legacy}/index.native.js (100%) rename packages/compose/src/hooks/use-resize-observer/{_legacy => legacy}/index.tsx (100%) rename packages/compose/src/hooks/use-resize-observer/{_legacy => legacy}/test/index.native.js (100%) diff --git a/packages/compose/src/hooks/use-resize-observer/index.ts b/packages/compose/src/hooks/use-resize-observer/index.ts index 2a76b2aa6ab59..dab751aaf1023 100644 --- a/packages/compose/src/hooks/use-resize-observer/index.ts +++ b/packages/compose/src/hooks/use-resize-observer/index.ts @@ -6,8 +6,8 @@ import { useRef } from '@wordpress/element'; * Internal dependencies */ import useEvent from '../use-event'; -import type { ObservedSize } from './_legacy'; -import _useLegacyResizeObserver from './_legacy'; +import type { ObservedSize } from './legacy'; +import _useLegacyResizeObserver from './legacy'; /** * External dependencies */ diff --git a/packages/compose/src/hooks/use-resize-observer/_legacy/index.native.js b/packages/compose/src/hooks/use-resize-observer/legacy/index.native.js similarity index 100% rename from packages/compose/src/hooks/use-resize-observer/_legacy/index.native.js rename to packages/compose/src/hooks/use-resize-observer/legacy/index.native.js diff --git a/packages/compose/src/hooks/use-resize-observer/_legacy/index.tsx b/packages/compose/src/hooks/use-resize-observer/legacy/index.tsx similarity index 100% rename from packages/compose/src/hooks/use-resize-observer/_legacy/index.tsx rename to packages/compose/src/hooks/use-resize-observer/legacy/index.tsx diff --git a/packages/compose/src/hooks/use-resize-observer/_legacy/test/index.native.js b/packages/compose/src/hooks/use-resize-observer/legacy/test/index.native.js similarity index 100% rename from packages/compose/src/hooks/use-resize-observer/_legacy/test/index.native.js rename to packages/compose/src/hooks/use-resize-observer/legacy/test/index.native.js From 35153bfb033ed4d147015a13e0867db8e3622ec2 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Tue, 17 Sep 2024 08:55:37 +0200 Subject: [PATCH 2/5] Fix circular dependency issue --- .../src/hooks/use-resize-observer/index.ts | 41 +----------------- .../use-resize-observer/legacy/index.tsx | 2 +- .../use-resize-observer.ts | 43 +++++++++++++++++++ 3 files changed, 45 insertions(+), 41 deletions(-) create mode 100644 packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts diff --git a/packages/compose/src/hooks/use-resize-observer/index.ts b/packages/compose/src/hooks/use-resize-observer/index.ts index dab751aaf1023..1bd0f074cc49f 100644 --- a/packages/compose/src/hooks/use-resize-observer/index.ts +++ b/packages/compose/src/hooks/use-resize-observer/index.ts @@ -1,11 +1,7 @@ -/** - * WordPress dependencies - */ -import { useRef } from '@wordpress/element'; /** * Internal dependencies */ -import useEvent from '../use-event'; +import { useResizeObserver as _useResizeObserver } from './use-resize-observer'; import type { ObservedSize } from './legacy'; import _useLegacyResizeObserver from './legacy'; /** @@ -13,41 +9,6 @@ import _useLegacyResizeObserver from './legacy'; */ import type { ReactElement } from 'react'; -// This is the current implementation of `useResizeObserver`. -// -// The legacy implementation is still supported for backwards compatibility. -// This is achieved by overloading the exported function with both signatures, -// and detecting which API is being used at runtime. -function _useResizeObserver< T extends HTMLElement >( - callback: ResizeObserverCallback, - resizeObserverOptions: ResizeObserverOptions = {} -): ( element?: T | null ) => void { - const callbackEvent = useEvent( callback ); - - const observedElementRef = useRef< T | null >(); - const resizeObserverRef = useRef< ResizeObserver >(); - return useEvent( ( element?: T | null ) => { - if ( element === observedElementRef.current ) { - return; - } - observedElementRef.current = element; - - // Set up `ResizeObserver`. - resizeObserverRef.current ??= new ResizeObserver( callbackEvent ); - const { current: resizeObserver } = resizeObserverRef; - - // Unobserve previous element. - if ( observedElementRef.current ) { - resizeObserver.unobserve( observedElementRef.current ); - } - - // Observe new element. - if ( element ) { - resizeObserver.observe( element, resizeObserverOptions ); - } - } ); -} - /** * Sets up a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API) * for an HTML or SVG element. diff --git a/packages/compose/src/hooks/use-resize-observer/legacy/index.tsx b/packages/compose/src/hooks/use-resize-observer/legacy/index.tsx index b44bd84196416..fe76581098222 100644 --- a/packages/compose/src/hooks/use-resize-observer/legacy/index.tsx +++ b/packages/compose/src/hooks/use-resize-observer/legacy/index.tsx @@ -10,7 +10,7 @@ import { useCallback, useRef, useState } from '@wordpress/element'; /** * Internal dependencies */ -import useResizeObserver from '../index'; +import { useResizeObserver } from '../use-resize-observer'; export type ObservedSize = { width: number | null; diff --git a/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts b/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts new file mode 100644 index 0000000000000..c7dfe29840763 --- /dev/null +++ b/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts @@ -0,0 +1,43 @@ +/** + * WordPress dependencies + */ +import { useRef } from '@wordpress/element'; +/** + * Internal dependencies + */ +import useEvent from '../use-event'; + +// This is the current implementation of `useResizeObserver`. +// +// The legacy implementation is still supported for backwards compatibility. +// This is achieved by overloading the exported function with both signatures, +// and detecting which API is being used at runtime. +export function useResizeObserver< T extends HTMLElement >( + callback: ResizeObserverCallback, + resizeObserverOptions: ResizeObserverOptions = {} +): ( element?: T | null ) => void { + const callbackEvent = useEvent( callback ); + + const observedElementRef = useRef< T | null >(); + const resizeObserverRef = useRef< ResizeObserver >(); + return useEvent( ( element?: T | null ) => { + if ( element === observedElementRef.current ) { + return; + } + observedElementRef.current = element; + + // Set up `ResizeObserver`. + resizeObserverRef.current ??= new ResizeObserver( callbackEvent ); + const { current: resizeObserver } = resizeObserverRef; + + // Unobserve previous element. + if ( observedElementRef.current ) { + resizeObserver.unobserve( observedElementRef.current ); + } + + // Observe new element. + if ( element ) { + resizeObserver.observe( element, resizeObserverOptions ); + } + } ); +} From 008893bc4d97de0cc4dfb8a0d17f1b847868829a Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Tue, 17 Sep 2024 08:57:54 +0200 Subject: [PATCH 3/5] Fix bug that caused elements to not be unobserved. --- .../src/hooks/use-resize-observer/use-resize-observer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts b/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts index c7dfe29840763..4c1031b9839dc 100644 --- a/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts +++ b/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts @@ -24,7 +24,6 @@ export function useResizeObserver< T extends HTMLElement >( if ( element === observedElementRef.current ) { return; } - observedElementRef.current = element; // Set up `ResizeObserver`. resizeObserverRef.current ??= new ResizeObserver( callbackEvent ); @@ -36,6 +35,7 @@ export function useResizeObserver< T extends HTMLElement >( } // Observe new element. + observedElementRef.current = element; if ( element ) { resizeObserver.observe( element, resizeObserverOptions ); } From 776cabf542ad72895eb7d21730036ad72603d37c Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Tue, 17 Sep 2024 09:44:55 +0200 Subject: [PATCH 4/5] Add changelog --- packages/compose/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md index cc0d7ef333f0d..4cafae990f0a8 100644 --- a/packages/compose/CHANGELOG.md +++ b/packages/compose/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Bug Fixes + +- `useResizeObserver`: fixed a bug that caused elements to not be properly unobserved ([#65389](https://github.com/WordPress/gutenberg/pull/65389)). + ### New Features - `useEvent`: a new utility that creates a stable callback function that has access to the latest state and can be used within event handlers and effect callbacks ([#64943](https://github.com/WordPress/gutenberg/pull/64943)). From da96a814c403a9b115c04510512ff885028315f5 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Thu, 19 Sep 2024 06:05:46 +0200 Subject: [PATCH 5/5] Remove changelog entry --- packages/compose/CHANGELOG.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md index 4cafae990f0a8..cc0d7ef333f0d 100644 --- a/packages/compose/CHANGELOG.md +++ b/packages/compose/CHANGELOG.md @@ -2,10 +2,6 @@ ## Unreleased -### Bug Fixes - -- `useResizeObserver`: fixed a bug that caused elements to not be properly unobserved ([#65389](https://github.com/WordPress/gutenberg/pull/65389)). - ### New Features - `useEvent`: a new utility that creates a stable callback function that has access to the latest state and can be used within event handlers and effect callbacks ([#64943](https://github.com/WordPress/gutenberg/pull/64943)).