refactor: switch use-resize-observer for a custom hook

.changeset/seven-berries-check.md

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Removed `use-resize-observer` third-party dependency and replaced it with a custom useResizeObserver hook using native browser APIs.

e2e/specs/smoke/account.spec.ts

@@ -16,9 +16,7 @@ test.describe('Account route with MSW Customer Account mocks', () => {
     await expect(
       page.getByRole('heading', {level: 1, name: 'Welcome, Taylor'}),
     ).toBeVisible();
-    await expect(
-      page.getByRole('form', {name: 'Search orders'}),
-    ).toBeVisible();
+    await expect(page.getByRole('form', {name: 'Search orders'})).toBeVisible();
     await expect(
       page.getByText("You haven't placed any orders yet."),
     ).toBeVisible();

packages/cli/package.json

@@ -58,8 +58,7 @@
     "source-map-support": "^0.5.21",
     "tar-fs": "^2.1.1",
     "tempy": "3.0.0",
-    "ts-morph": "20.0.0",
-    "use-resize-observer": "^9.1.0"
+    "ts-morph": "20.0.0"
   },
   "peerDependencies": {
     "@graphql-codegen/cli": "^5.0.2",

packages/cli/scripts/build-check.mjs

@@ -16,7 +16,7 @@ for (const srcEntry of srcEntries) {
   // skip .DS_Store files
   if (srcEntry.endsWith('.DS_Store')) continue;
 
-  const distEntry = srcEntry.replace('src', 'dist').replace('.tsx', '.jsx');
+  const distEntry = srcEntry.replace(/\.tsx?$/, '.jsx');
   if (!distEntries.includes(distEntry)) {
     throw new Error('CLI build check failed! Missing: ' + distEntry);
   }

packages/cli/tsup.config.ts

@@ -72,7 +72,7 @@ export default defineConfig([
   {
     ...commonConfig,
     // TODO remove virtual routes copy when deprecating classic compiler
-    entry: ['../hydrogen/src/vite/virtual-routes/**/*.tsx'],
+    entry: ['../hydrogen/src/vite/virtual-routes/**/*.{ts,tsx}'],
     outDir: `${outDir}/${ASSETS_DIR_PREFIX}/virtual-routes`,
     outExtension: () => ({js: '.jsx'}),
     dts: false,

packages/hydrogen/package.json

@@ -83,32 +83,31 @@
     "dist"
   ],
   "dependencies": {
+    "@shopify/graphql-client": "1.4.1",
     "@shopify/hydrogen-react": "workspace:*",
     "content-security-policy-builder": "^2.2.0",
     "flame-chart-js": "2.3.1",
     "isbot": "^5.1.21",
     "source-map-support": "^0.5.21",
     "type-fest": "^4.33.0",
-    "use-resize-observer": "^9.1.0",
-    "worktop": "^0.7.3",
-    "@shopify/graphql-client": "1.4.1"
+    "worktop": "^0.7.3"
   },
   "devDependencies": {
-    "react-router": "7.12.0",
     "@react-router/dev": "7.12.0",
     "@shopify/generate-docs": "0.16.4",
     "@shopify/hydrogen-codegen": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^14.0.0",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "@testing-library/react": "^14.0.0",
     "@types/source-map-support": "^0.5.10",
     "formdata-polyfill": "^4.0.10",
     "graphql": "^16.12.0",
     "happy-dom": "^20.8.9",
     "react": "catalog:",
     "react-dom": "catalog:",
+    "react-router": "7.12.0",
     "schema-dts": "^1.1.2",
     "vitest": "^3.2.4"
   },

packages/hydrogen/src/vite/plugin.ts

@@ -89,7 +89,6 @@ export function hydrogen(pluginOptions: HydrogenPluginOptions = {}): Plugin[] {
                   'content-security-policy-builder',
                   'worktop/cookie',
                   '@shopify/hydrogen > @shopify/graphql-client',
-                  'use-resize-observer',
                 ]
               : [
                   // In production projects, optimize Hydrogen and critical deps

packages/hydrogen/src/vite/virtual-routes/components/FlameChartWrapper.tsx

@@ -11,11 +11,7 @@ import type {
   Timeseries,
   FlameChart,
 } from 'flame-chart-js';
-
-// Type is broken in use-resize-observer
-import _useResizeObserver from 'use-resize-observer';
-const useResizeObserver =
-  _useResizeObserver as unknown as typeof import('use-resize-observer').default;
+import {useResizeObserver} from './useResizeObserver.jsx';
 
 declare global {
   // Downloaded via CDN

packages/hydrogen/src/vite/virtual-routes/components/RequestDetails.tsx

@@ -2,11 +2,7 @@ import {useState, useRef, useEffect} from 'react';
 import {type ServerEvents} from '../lib/useDebugNetworkServer.js';
 import {Link} from 'react-router';
 import {IconClose} from './IconClose.jsx';
-
-// Type is broken in use-resize-observer
-import _useResizeObserver from 'use-resize-observer';
-const useResizeObserver =
-  _useResizeObserver as unknown as typeof import('use-resize-observer').default;
+import {useResizeObserver} from './useResizeObserver.jsx';
 
 const TABS: Record<number, string> = {
   1: 'General',

packages/hydrogen/src/vite/virtual-routes/components/useResizeObserver.ts

@@ -0,0 +1,50 @@
+import {useEffect, useRef, type RefObject} from 'react';
+
+type ResizeObserverSize = {
+  width?: number;
+  height?: number;
+};
+
+type UseResizeObserverOptions<T extends Element> = {
+  ref: RefObject<T | null>;
+  onResize: (size: ResizeObserverSize) => void;
+};
+
+/**
+ * A hook that observes the resize of an element and calls a callback with the new size.
+ * @param ref - The ref to the element to observe
+ * @param onResize - The callback to call when the element is resized
+ */
+export function useResizeObserver<T extends Element>({
+  ref,
+  onResize,
+}: UseResizeObserverOptions<T>) {
+  const frameID = useRef(0);
+  const onResizeRef = useRef(onResize);
+  onResizeRef.current = onResize;
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+
+      cancelAnimationFrame(frameID.current);
+
+      frameID.current = requestAnimationFrame(() => {
+        const {width, height} = entry.contentRect;
+        onResizeRef.current?.({width, height});
+      });
+    });
+
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+
+      if (frameID.current) {
+        cancelAnimationFrame(frameID.current);
+      }
+    };
+  }, [ref]);
+}

packages/hydrogen/tsup.config.ts

@@ -110,7 +110,7 @@ export default defineConfig([
     dts: true,
   },
   {
-    entry: ['src/vite/virtual-routes/**/*.tsx'],
+    entry: ['src/vite/virtual-routes/**/*.{ts,tsx}'],
     outDir: `${outDir}/vite/virtual-routes`,
     outExtension: () => ({js: '.jsx'}),
     format: 'esm',