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

[NexPB]

WHY are these changes introduced?

(Mostly done to bring awareness to the outstanding issue #3428)

Currently depends on use-resize-observer for dev tooling UI, removed use-resize-observer third-party dependency and replaced it with a custom useResizeObserver hook using native browser APIs.

WHAT is this pull request doing?

• Remove use-resize-observer and replace with custom hook in the @shopify/hydrogen package
• Update RequestDetails and FlameChartWrapper to import new useResizeObserver
• Update the Hydrogen Vite plugin optimizeDeps list to remove use-resize-observer

HOW to test your changes?

• From the repo root, install and build as usual (if needed):
  • pnpm install
• Run the Hydrogen tests:
  • pnpm --filter @shopify/hydrogen test

Post-merge steps

None.

Checklist

• I've read the Contributing Guidelines
• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've added a changeset if this PR contains user-facing or noteworthy changes
• I've added tests to cover my changes
• I've added or updated the documentation

[NexPB]

I did notice comments at usehooks-ts mentioning that the package feels/is "abandoned", maybe its best to not rely on any pkg and just check in our own file (as the code for this is minimal).

[fredericoo]

the CI failure is because the virtual-routes build pipeline assumes all source files are .tsx. your useResizeObserver.ts is the first .ts file in that directory (correctly .ts since there's no JSX), and three places in the build config only handle .tsx:

1. CLI tsup entry glob (packages/cli/tsup.config.ts) - **/*.tsx skips your .ts file
2. Hydrogen tsup entry glob (packages/hydrogen/tsup.config.ts) - same thing
3. Build-check script (packages/cli/scripts/build-check.mjs) - .replace('.tsx', '.jsx') is a no-op on .ts files, so it looks for useResizeObserver.ts in dist which doesn't exist

fix is three one-liners - widen the globs to **/*.{ts,tsx} and use a regex for the extension mapping. I've pushed it to fb-fix-virtual-routes-ts-build if you want to cherry-pick the top commit.

cheers!

[NexPB]

the CI failure is because the virtual-routes build pipeline assumes all source files are .tsx. your useResizeObserver.ts is the first .ts file in that directory (correctly .ts since there's no JSX), and three places in the build config only handle .tsx:

1. CLI tsup entry glob (packages/cli/tsup.config.ts) - **/*.tsx skips your .ts file
2. Hydrogen tsup entry glob (packages/hydrogen/tsup.config.ts) - same thing
3. Build-check script (packages/cli/scripts/build-check.mjs) - .replace('.tsx', '.jsx') is a no-op on .ts files, so it looks for useResizeObserver.ts in dist which doesn't exist

fix is three one-liners - widen the globs to **/*.{ts,tsx} and use a regex for the extension mapping. I've pushed it to fb-fix-virtual-routes-ts-build if you want to cherry-pick the top commit.

cheers!

Cherry picked, thanks!

[fredericoo]

nice work removing the third-party dep - using the native ResizeObserver API directly is much cleaner. couple of things to sort before merging though.

[fredericoo]

non-blocking: use-resize-observer is still listed as a dependency in packages/cli/package.json (line 62). Nothing in the CLI imports it anymore since the virtual routes now use the custom hook, so it's dead weight. Let's remove it while we're here, yeah?