Avoid circular imports for HMR

[frandiox]

Related #1998

useRootLoaderData used to work well in the Remix Classic Compiler. However, in Vite it creates issues in development because of circular imports.

I'm moving this function to a separate file to avoid that, and ensuring that JSDoc for JS projects still works.

I'm moving it to lib/root-data.ts for now but we could also move it to hooks/useRootLoaderData.ts. We do this in the demo-store but not in skeleton -- we have a hook in lib/variants.ts so I'm just placing the new one in lib as well.

With these changes we reduce the number of files that need to be refreshed when we change anything in the app. For example, when changing something in root.tsx:

Before	After

This is much more noticeable in apps like the demo-store.

[shopify[bot]]

Oxygen deployed a preview of your fd-avoid-circular-imports branch. Details:	Storefront	Status	Preview link	Deployment details	Last update (UTC)
vite	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 17, 2024 3:42 PM
third-party-queries-caching	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 17, 2024 3:42 PM
custom-cart-method	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 17, 2024 3:42 PM
skeleton	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 17, 2024 3:42 PM
subscriptions	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 17, 2024 3:42 PM
optimistic-cart-ui	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 17, 2024 3:42 PM

Learn more about Hydrogen's GitHub integration.