[WIP] API docs changes for RR7

packages/hydrogen/docs/generated/generated_static_pages.json

@@ -1,7 +1,7 @@
 [
   {
     "title": "Hydrogen",
-    "description": "Hydrogen is Shopify’s opinionated stack for headless commerce, built on [Remix](https://remix.run). It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications.",
+    "description": "Hydrogen is Shopify’s opinionated stack for headless commerce, built on [React Router](https://reactrouter.com/home). It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications.",
     "id": "hydrogen",
     "sections": [
       {
@@ -89,7 +89,7 @@
         "type": "Generic",
         "anchorLink": "hydrogen_react",
         "title": "How Hydrogen works with Hydrogen React",
-        "sectionContent": "Hydrogen is [built on Remix](/docs/custom-storefronts/hydrogen/project-structure). But many of the components, hooks and utilities built into Hydrogen come from [Hydrogen React](/docs/api/hydrogen-react), an underlying package that’s framework-agnostic. For convenience, the Hydrogen package re-exports those resources. This means that if you’re building a Hydrogen app, then you should import modules from the `@shopify/hydrogen` package.",
+        "sectionContent": "Hydrogen is [built on React Router](/docs/custom-storefronts/hydrogen/project-structure). But many of the components, hooks and utilities built into Hydrogen come from [Hydrogen React](/docs/api/hydrogen-react), an underlying package that’s framework-agnostic. For convenience, the Hydrogen package re-exports those resources. This means that if you’re building a Hydrogen app, then you should import modules from the `@shopify/hydrogen` package.",
         "codeblock": {
           "title": "Importing Hydrogen components",
           "tabs": [

packages/hydrogen/docs/staticPages/hydrogen.doc.ts

@@ -3,7 +3,7 @@ import {LandingTemplateSchema} from '@shopify/generate-docs';
 const data: LandingTemplateSchema = {
   title: 'Hydrogen',
   description:
-    'Hydrogen is Shopify’s opinionated stack for headless commerce, built on [Remix](https://remix.run). It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications.',
+    'Hydrogen is Shopify’s opinionated stack for headless commerce, built on [React Router](https://reactrouter.com/home). It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications.',
   id: 'hydrogen',
   sections: [
     {
@@ -97,7 +97,7 @@ const data: LandingTemplateSchema = {
       anchorLink: 'hydrogen_react',
       title: 'How Hydrogen works with Hydrogen React',
       sectionContent:
-        'Hydrogen is [built on Remix](/docs/custom-storefronts/hydrogen/project-structure). But many of the components, hooks and utilities built into Hydrogen come from [Hydrogen React](/docs/api/hydrogen-react), an underlying package that’s framework-agnostic. For convenience, the Hydrogen package re-exports those resources. This means that if you’re building a Hydrogen app, then you should import modules from the `@shopify/hydrogen` package.',
+        'Hydrogen is [built on React Router](/docs/custom-storefronts/hydrogen/project-structure). But many of the components, hooks and utilities built into Hydrogen come from [Hydrogen React](/docs/api/hydrogen-react), an underlying package that’s framework-agnostic. For convenience, the Hydrogen package re-exports those resources. This means that if you’re building a Hydrogen app, then you should import modules from the `@shopify/hydrogen` package.',
       codeblock: {
         title: 'Importing Hydrogen components',
         tabs: [

packages/hydrogen/src/analytics-manager/AnalyticsProvider.collectionView.example.jsx

@@ -1,4 +1,4 @@
-import {useLoaderData} from '@remix-run/react';
+import {useLoaderData} from 'react-router';
 import {Analytics} from '@shopify/hydrogen';
 
 export async function loader() {

packages/hydrogen/src/analytics-manager/AnalyticsProvider.example.jsx

@@ -1,5 +1,5 @@
 import {Analytics, getShopAnalytics} from '@shopify/hydrogen';
-import {Outlet, useLoaderData} from '@remix-run/react';
+import {Outlet, useLoaderData} from 'react-router';
 
 export async function loader({context}) {
   const {cart, env} = context;

packages/hydrogen/src/analytics-manager/AnalyticsProvider.example.tsx

@@ -1,6 +1,6 @@
 import {Analytics, getShopAnalytics} from '@shopify/hydrogen';
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {Outlet, useLoaderData} from '@remix-run/react';
+import {Outlet, useLoaderData} from 'react-router';
 
 export async function loader({context}: LoaderFunctionArgs) {
   const {cart, env} = context;

packages/hydrogen/src/analytics-manager/AnalyticsProvider.productView.example.jsx

@@ -1,4 +1,4 @@
-import {useLoaderData} from '@remix-run/react';
+import {useLoaderData} from 'react-router';
 import {Analytics} from '@shopify/hydrogen';
 
 export async function loader() {

packages/hydrogen/src/analytics-manager/AnalyticsProvider.productView.example.tsx

@@ -1,4 +1,4 @@
-import {useLoaderData} from '@remix-run/react';
+import {useLoaderData} from 'react-router';
 import {Analytics} from '@shopify/hydrogen';
 
 export async function loader() {

packages/hydrogen/src/analytics-manager/AnalyticsProvider.searchView.example.jsx

@@ -1,5 +1,5 @@
 import {Analytics} from '@shopify/hydrogen';
-import {useLoaderData} from '@remix-run/react';
+import {useLoaderData} from 'react-router';
 
 export async function loader({request}) {
   const url = new URL(request.url);

packages/hydrogen/src/analytics-manager/AnalyticsProvider.searchView.example.tsx

@@ -1,6 +1,6 @@
 import {Analytics} from '@shopify/hydrogen';
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData} from '@remix-run/react';
+import {useLoaderData} from 'react-router';
 
 export async function loader({request}: LoaderFunctionArgs) {
   const url = new URL(request.url);

packages/hydrogen/src/analytics-manager/getShopAnalytics.example.jsx

@@ -1,5 +1,5 @@
 import {Analytics, getShopAnalytics} from '@shopify/hydrogen';
-import {Outlet, useLoaderData} from '@remix-run/react';
+import {Outlet, useLoaderData} from 'react-router';
 
 export async function loader({context}) {
   const {cart, env} = context;

packages/hydrogen/src/analytics-manager/getShopAnalytics.example.tsx

@@ -1,6 +1,6 @@
 import {Analytics, getShopAnalytics} from '@shopify/hydrogen';
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {Outlet, useLoaderData} from '@remix-run/react';
+import {Outlet, useLoaderData} from 'react-router';
 
 export async function loader({context}: LoaderFunctionArgs) {
   const {cart, env} = context;

packages/hydrogen/src/cache/InMemoryCache.example.js

@@ -1,6 +1,6 @@
-const {createRequestHandler} = require('@remix-run/express');
+const {createRequestHandler} = require('@remix-router/express');
 const path = require('path');
-const {installGlobals} = require('@remix-run/node');
+const {installGlobals} = require('@remix-router/node');
 const express = require('express');
 const {createStorefrontClient, InMemoryCache} = require('@shopify/hydrogen');
 

packages/hydrogen/src/cache/create-with-cache.example.js

@@ -1,5 +1,5 @@
 // In your app's `server.ts` file:
-import * as remixBuild from '@remix-run/dev/server-build';
+import * as reactRouterBuild from 'virtual:react-router/server-build';
 import {createWithCache, CacheLong} from '@shopify/hydrogen';
 // Use another `createRequestHandler` if deploying off oxygen
 import {createRequestHandler} from '@shopify/remix-oxygen';

packages/hydrogen/src/cache/create-with-cache.example.ts

@@ -1,5 +1,5 @@
 // In your app's `server.ts` file:
-import * as remixBuild from '@remix-run/dev/server-build';
+import * as reactRouterBuild from 'virtual:react-router/server-build';
 import {createWithCache, CacheLong} from '@shopify/hydrogen';
 // Use another `createRequestHandler` if deploying off oxygen
 import {createRequestHandler} from '@shopify/remix-oxygen';

packages/hydrogen/src/cart/CartForm.custom.example.jsx

@@ -1,4 +1,4 @@
-import {data} from '@remix-run/server-runtime';
+import {data} from 'react-router';
 import {CartForm} from '@shopify/hydrogen';
 import invariant from 'tiny-invariant';
 

packages/hydrogen/src/cart/CartForm.custom.example.tsx

@@ -1,4 +1,4 @@
-import {type ActionFunctionArgs, data} from '@remix-run/server-runtime';
+import {type ActionFunctionArgs, data} from 'react-router';
 import {
   type CartQueryDataReturn,
   type HydrogenCart,

packages/hydrogen/src/cart/CartForm.example.jsx

@@ -1,4 +1,4 @@
-import {data} from '@remix-run/server-runtime';
+import {data} from 'react-router';
 import {CartForm} from '@shopify/hydrogen';
 import invariant from 'tiny-invariant';
 

packages/hydrogen/src/cart/CartForm.example.tsx

@@ -1,4 +1,4 @@
-import {type ActionFunctionArgs, data} from '@remix-run/server-runtime';
+import {type ActionFunctionArgs, data} from 'react-router';
 import {
   type CartQueryDataReturn,
   type HydrogenCart,

packages/hydrogen/src/cart/CartForm.fetcher.example.jsx

@@ -1,5 +1,5 @@
-import {useFetcher} from '@remix-run/react';
-import {data} from '@remix-run/server-runtime';
+import {useFetcher} from 'react-router';
+import {data} from 'react-router';
 import {CartForm} from '@shopify/hydrogen';
 import invariant from 'tiny-invariant';
 

packages/hydrogen/src/cart/CartForm.fetcher.example.tsx

@@ -1,5 +1,5 @@
-import {useFetcher} from '@remix-run/react';
-import {type ActionFunctionArgs, data} from '@remix-run/server-runtime';
+import {useFetcher} from 'react-router';
+import {type ActionFunctionArgs, data} from 'react-router';
 import {
   type CartQueryDataReturn,
   type HydrogenCart,

packages/hydrogen/src/cart/CartForm.input-tag.example.jsx

@@ -1,4 +1,4 @@
-import {data} from '@remix-run/server-runtime';
+import {data} from 'react-router';
 import {CartForm} from '@shopify/hydrogen';
 import invariant from 'tiny-invariant';
 

packages/hydrogen/src/cart/CartForm.input-tag.example.tsx

@@ -1,4 +1,4 @@
-import {type ActionFunctionArgs, data} from '@remix-run/server-runtime';
+import {type ActionFunctionArgs, data} from 'react-router';
 import {
   type CartQueryDataReturn,
   type HydrogenCart,

packages/hydrogen/src/cart/cartSetIdDefault.example.js

@@ -1,4 +1,4 @@
-import {data} from '@remix-run/server-runtime';
+import {data} from 'react-router';
 import {cartGetIdDefault, cartSetIdDefault} from '@shopify/hydrogen';
 
 // server.js

packages/hydrogen/src/cart/createCartHandler.example.js

@@ -4,7 +4,7 @@ import {
   cartGetIdDefault,
   cartSetIdDefault,
 } from '@shopify/hydrogen';
-import * as remixBuild from '@remix-run/dev/server-build';
+import * as reactRouterBuild from 'virtual:react-router/server-build';
 import {
   createRequestHandler,
   getStorefrontHeaders,

packages/hydrogen/src/cart/createCartHandler.example.ts

@@ -4,7 +4,7 @@ import {
   cartGetIdDefault,
   cartSetIdDefault,
 } from '@shopify/hydrogen';
-import * as remixBuild from '@remix-run/dev/server-build';
+import * as remixBuild from '@react-router/dev/server-build';
 import {
   createRequestHandler,
   getStorefrontHeaders,

packages/hydrogen/src/cart/optimistic/useOptimisticCart.example.jsx

@@ -1,4 +1,4 @@
-import {Link} from '@remix-run/react';
+import {Link} from 'react-router';
 import {CartForm, useOptimisticCart} from '@shopify/hydrogen';
 
 // Root loader returns the cart data

packages/hydrogen/src/cart/optimistic/useOptimisticCart.example.tsx

@@ -1,5 +1,5 @@
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {Link} from '@remix-run/react';
+import {Link} from 'react-router';
 import {CartForm, useOptimisticCart} from '@shopify/hydrogen';
 import type {Cart} from '@shopify/hydrogen/storefront-api-types';
 

packages/hydrogen/src/createHydrogenContext.example.jsx

@@ -1,5 +1,5 @@
 import {createHydrogenContext} from '@shopify/hydrogen';
-import * as remixBuild from '@remix-run/dev/server-build';
+import * as reactRouterBuild from 'virtual:react-router/server-build';
 import {
   createRequestHandler,
   createCookieSessionStorage,

packages/hydrogen/src/createHydrogenContext.example.tsx

@@ -1,5 +1,5 @@
 import {createHydrogenContext, type HydrogenSession} from '@shopify/hydrogen';
-import * as remixBuild from '@remix-run/dev/server-build';
+import * as remixBuild from '@react-router/dev/server-build';
 import {
   createRequestHandler,
   createCookieSessionStorage,

packages/hydrogen/src/csp/Script.example.jsx

@@ -5,7 +5,7 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
-} from '@remix-run/react';
+} from 'react-router';
 import {useNonce, Script} from '@shopify/hydrogen';
 export default function App() {
   const nonce = useNonce();

packages/hydrogen/src/csp/Script.example.tsx

@@ -5,7 +5,7 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
-} from '@remix-run/react';
+} from 'react-router';
 import {useNonce, Script} from '@shopify/hydrogen';
 export default function App() {
   const nonce = useNonce();

packages/hydrogen/src/csp/createContentSecurityPolicy.example.jsx

@@ -1,4 +1,4 @@
-import {RemixServer} from '@remix-run/react';
+import {ServerRouter} from 'react-router';
 import {isbot} from 'isbot';
 import {renderToReadableStream} from 'react-dom/server';
 import {createContentSecurityPolicy} from '@shopify/hydrogen';

packages/hydrogen/src/csp/createContentSecurityPolicy.example.tsx

@@ -1,5 +1,5 @@
 import type {EntryContext} from '@shopify/remix-oxygen';
-import {RemixServer} from '@remix-run/react';
+import {ServerRouter} from 'react-router';
 import {isbot} from 'isbot';
 import {renderToReadableStream} from 'react-dom/server';
 import {createContentSecurityPolicy} from '@shopify/hydrogen';

packages/hydrogen/src/csp/useNonce.example.jsx

@@ -5,7 +5,7 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
-} from '@remix-run/react';
+} from 'react-router';
 import {useNonce} from '@shopify/hydrogen';
 
 export default function App() {

packages/hydrogen/src/csp/useNonce.example.tsx

@@ -5,7 +5,7 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
-} from '@remix-run/react';
+} from 'react-router';
 import {useNonce} from '@shopify/hydrogen';
 
 export default function App() {

packages/hydrogen/src/customer/customer.auth-handler.example.jsx

@@ -1,5 +1,5 @@
 import {createCustomerAccountClient} from '@shopify/hydrogen';
-import * as remixBuild from '@remix-run/dev/server-build';
+import * as reactRouterBuild from 'virtual:react-router/server-build';
 import {
   createRequestHandler,
   createCookieSessionStorage,

packages/hydrogen/src/customer/customer.auth-handler.example.tsx

@@ -2,7 +2,7 @@ import {
   createCustomerAccountClient,
   type HydrogenSession,
 } from '@shopify/hydrogen';
-import * as remixBuild from '@remix-run/dev/server-build';
+import * as reactRouterBuild from 'virtual:react-router/server-build';
 import {
   createRequestHandler,
   createCookieSessionStorage,

packages/hydrogen/src/customer/customer.example.jsx

@@ -1,5 +1,5 @@
 import {createCustomerAccountClient} from '@shopify/hydrogen';
-import * as remixBuild from '@remix-run/dev/server-build';
+import * as reactRouterBuild from 'virtual:react-router/server-build';
 import {
   createRequestHandler,
   createCookieSessionStorage,

packages/hydrogen/src/customer/customer.example.tsx

@@ -2,7 +2,7 @@ import {
   createCustomerAccountClient,
   type HydrogenSession,
 } from '@shopify/hydrogen';
-import * as remixBuild from '@remix-run/dev/server-build';
+import * as reactRouterBuild from 'virtual:react-router/server-build';
 import {
   createRequestHandler,
   createCookieSessionStorage,

packages/hydrogen/src/customer/customer.opt-out-handler.example.jsx

@@ -1,5 +1,5 @@
 import {createCustomerAccountClient} from '@shopify/hydrogen';
-import * as remixBuild from '@remix-run/dev/server-build';
+import * as reactRouterBuild from 'virtual:react-router/server-build';
 import {
   createRequestHandler,
   createCookieSessionStorage,

packages/hydrogen/src/customer/customer.opt-out-handler.example.tsx

@@ -2,7 +2,7 @@ import {
   createCustomerAccountClient,
   type HydrogenSession,
 } from '@shopify/hydrogen';
-import * as remixBuild from '@remix-run/dev/server-build';
+import * as reactRouterBuild from 'virtual:react-router/server-build';
 import {
   createRequestHandler,
   createCookieSessionStorage,

packages/hydrogen/src/pagination/Pagination.example.jsx

@@ -1,5 +1,5 @@
 import {Pagination, getPaginationVariables} from '@shopify/hydrogen';
-import {useLoaderData, Link} from '@remix-run/react';
+import {useLoaderData, Link} from 'react-router';
 
 export async function loader({request, context: {storefront}}) {
   const variables = getPaginationVariables(request, {pageBy: 8});

packages/hydrogen/src/pagination/Pagination.example.tsx

@@ -1,6 +1,6 @@
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {Pagination, getPaginationVariables} from '@shopify/hydrogen';
-import {useLoaderData, Link} from '@remix-run/react';
+import {useLoaderData, Link} from 'react-router';
 import {ProductConnection} from '@shopify/hydrogen/storefront-api-types';
 
 export async function loader({

packages/hydrogen/src/pagination/Pagination.multiple.example.jsx

@@ -1,4 +1,4 @@
-import {useLoaderData, Link} from '@remix-run/react';
+import {useLoaderData, Link} from 'react-router';
 import {getPaginationVariables, Pagination} from '@shopify/hydrogen';
 
 export async function loader({request, context: {storefront}}) {

packages/hydrogen/src/pagination/Pagination.multiple.example.tsx

@@ -1,5 +1,5 @@
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, Link} from '@remix-run/react';
+import {useLoaderData, Link} from 'react-router';
 import {getPaginationVariables, Pagination} from '@shopify/hydrogen';
 import {type Collection} from '@shopify/hydrogen-react/storefront-api-types';
 

packages/hydrogen/src/product/VariantSelector.example.jsx

@@ -1,5 +1,5 @@
 import {VariantSelector} from '@shopify/hydrogen';
-import {Link} from '@remix-run/react';
+import {Link} from 'react-router';
 
 const ProductForm = ({product}) => {
   return (

packages/hydrogen/src/product/VariantSelector.example.tsx

@@ -1,6 +1,6 @@
 import {VariantSelector} from '@shopify/hydrogen';
 import type {Product} from '@shopify/hydrogen/storefront-api-types';
-import {Link} from '@remix-run/react';
+import {Link} from 'react-router';
 
 const ProductForm = ({product}: {product: Product}) => {
   return (

packages/hydrogen/src/product/useOptimisticVariant.example.jsx

@@ -1,4 +1,4 @@
-import {useLoaderData} from '@remix-run/react';
+import {useLoaderData} from 'react-router';
 import {useOptimisticVariant} from '@shopify/hydrogen';
 
 export async function loader({context}) {

packages/hydrogen/src/product/useOptimisticVariant.example.tsx

@@ -1,5 +1,5 @@
-import {useLoaderData} from '@remix-run/react';
-import {LoaderFunctionArgs} from '@remix-run/server-runtime';
+import {useLoaderData} from 'react-router';
+import {LoaderFunctionArgs} from 'react-router';
 import {useOptimisticVariant} from '@shopify/hydrogen';
 
 export async function loader({context}: LoaderFunctionArgs) {

packages/hydrogen/src/routing/storefrontRedirect.example.js

@@ -1,5 +1,5 @@
 import {storefrontRedirect, createStorefrontClient} from '@shopify/hydrogen';
-import * as remixBuild from '@remix-run/dev/server-build';
+import * as reactRouterBuild from 'virtual:react-router/server-build';
 import {
   createRequestHandler,
   getStorefrontHeaders,

packages/hydrogen/src/routing/storefrontRedirect.example.ts

@@ -1,5 +1,5 @@
 import {storefrontRedirect, createStorefrontClient} from '@shopify/hydrogen';
-import * as remixBuild from '@remix-run/dev/server-build';
+import * as reactRouterBuild from 'virtual:react-router/server-build';
 import {
   createRequestHandler,
   getStorefrontHeaders,

packages/hydrogen/src/seo/getSeoMeta.example.tsx

@@ -1,4 +1,4 @@
-import {MetaFunction} from '@remix-run/react';
+import {MetaFunction} from 'react-router';
 import {LoaderFunctionArgs} from '@remix-run/server-runtime';
 import {getSeoMeta} from '@shopify/hydrogen';