Migrate to Hydrogen 3 (storefront-kit working version, Remix → React Router 7)

.gitignore

@@ -10,4 +10,5 @@ node_modules
 .shopify
 /test-results/
 /playwright-report/
-/playwright/.cache/
+/playwright/.cache/
+app/*-graphql-env.d.ts

.npmrc

@@ -1,5 +1,6 @@
 @shopify:registry=https://registry.npmjs.com
 progress=false
+legacy-peer-deps=true
 
 # Ensure Vite can optimize these deps in PNPM
 public-hoist-pattern[]=cookie

.nvmrc

@@ -1 +1 @@
-v18
+v22.18.0

app/components/AccountAddressBook.tsx

@@ -1,7 +1,9 @@
-import {Form} from '@remix-run/react';
-import type {CustomerAddress} from '@shopify/hydrogen/customer-account-api-types';
+import {Form} from 'react-router';
 
-import type {CustomerDetailsFragment} from 'customer-accountapi.generated';
+import type {
+  CustomerAddress,
+  CustomerDetailsFragment,
+} from '~/graphql/customer-account/types';
 import {Button} from '~/components/Button';
 import {Text} from '~/components/Text';
 import {Link} from '~/components/Link';

app/components/AccountDetails.tsx

@@ -1,4 +1,4 @@
-import type {CustomerDetailsFragment} from 'customer-accountapi.generated';
+import type {CustomerDetailsFragment} from '~/graphql/customer-account/types';
 import {Link} from '~/components/Link';
 
 export function AccountDetails({

app/components/AddToCartButton.tsx

@@ -1,7 +1,8 @@
-import {CartForm, type OptimisticCartLineInput} from '@shopify/hydrogen';
-import type {FetcherWithComponents} from '@remix-run/react';
-
 import {Button} from '~/components/Button';
+import {useCartForm} from '~/lib/cart';
+import {useIsHydrated} from '~/hooks/useIsHydrated';
+
+type LineInput = {merchandiseId: string; quantity: number};
 
 export function AddToCartButton({
   children,
@@ -13,38 +14,33 @@ export function AddToCartButton({
   ...props
 }: {
   children: React.ReactNode;
-  lines: Array<OptimisticCartLineInput>;
+  lines: Array<LineInput>;
   className?: string;
   variant?: 'primary' | 'secondary' | 'inline';
   width?: 'auto' | 'full';
   disabled?: boolean;
   [key: string]: any;
 }) {
+  const {formProps, register} = useCartForm();
+  const isHydrated = useIsHydrated();
+  const [line] = lines;
+
   return (
-    <CartForm
-      route="/cart"
-      inputs={{
-        lines,
-      }}
-      action={CartForm.ACTIONS.LinesAdd}
-    >
-      {(fetcher: FetcherWithComponents<any>) => {
-        return (
-          <>
-            <Button
-              as="button"
-              type="submit"
-              width={width}
-              variant={variant}
-              className={className}
-              disabled={disabled ?? fetcher.state !== 'idle'}
-              {...props}
-            >
-              {children}
-            </Button>
-          </>
-        );
-      }}
-    </CartForm>
+    <form {...formProps()}>
+      <input type="hidden" {...register('merchandiseId', {value: line?.merchandiseId})} />
+      <input type="hidden" {...register('quantity', {value: line?.quantity ?? 1})} />
+      <Button
+        as="button"
+        type="submit"
+        width={width}
+        variant={variant}
+        className={className}
+        disabled={disabled ?? !isHydrated}
+        {...register('add')}
+        {...props}
+      >
+        {children}
+      </Button>
+    </form>
   );
 }

app/components/AnalyticsTracker.tsx

@@ -0,0 +1,34 @@
+import {useEffect} from 'react';
+import {useLocation} from 'react-router';
+
+import {
+  AnalyticsEvent,
+  configureAnalytics,
+  getAnalytics,
+  type ConsentConfig,
+  type ShopAnalytics,
+} from '~/lib/analytics';
+
+export function AnalyticsTracker({
+  shop,
+  consent,
+}: {
+  shop: ShopAnalytics;
+  consent: ConsentConfig;
+}) {
+  const location = useLocation();
+  const pageKey = `${location.pathname}${location.search}`;
+
+  useEffect(() => {
+    configureAnalytics(shop, consent);
+    const analytics = getAnalytics();
+    if (!analytics) return;
+
+    analytics.publish(AnalyticsEvent.PAGE_VIEWED, {
+      url: window.location.href,
+      shop,
+    });
+  }, [pageKey, shop, consent]);
+
+  return null;
+}

app/components/Button.tsx

@@ -1,5 +1,5 @@
 import {forwardRef} from 'react';
-import {Link} from '@remix-run/react';
+import {Link} from 'react-router';
 import clsx from 'clsx';
 
 import {missingClass} from '~/lib/utils';