From 0904270073fd7a21acf08053f8e230729e4ae38e Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 10 Dec 2024 13:22:28 -0800
Subject: [PATCH 1/3] Fix cart route

---
 .changeset/nervous-poets-fly.md        | 5 +++++
 templates/skeleton/app/routes/cart.tsx | 3 ---
 2 files changed, 5 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/nervous-poets-fly.md

diff --git a/.changeset/nervous-poets-fly.md b/.changeset/nervous-poets-fly.md
new file mode 100644
index 000000000..036d21e16
--- /dev/null
+++ b/.changeset/nervous-poets-fly.md
@@ -0,0 +1,5 @@
+---
+'skeleton': patch
+---
+
+Fix cart route so that it works with no-js
diff --git a/templates/skeleton/app/routes/cart.tsx b/templates/skeleton/app/routes/cart.tsx
index 61d0a0ea0..0e1c95390 100644
--- a/templates/skeleton/app/routes/cart.tsx
+++ b/templates/skeleton/app/routes/cart.tsx
@@ -1,5 +1,4 @@
 import {Await, type MetaFunction, useRouteLoaderData} from '@remix-run/react';
-import {Suspense} from 'react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
 import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
@@ -102,7 +101,6 @@ export default function Cart() {
   return (
     <div className="cart">
       <h1>Cart</h1>
-      <Suspense fallback={<p>Loading cart ...</p>}>
         <Await
           resolve={rootData.cart}
           errorElement={<div>An error occurred</div>}
@@ -111,7 +109,6 @@ export default function Cart() {
             return <CartMain layout="page" cart={cart} />;
           }}
         </Await>
-      </Suspense>
     </div>
   );
 }

From 39e3ea2666a5b1aefa752054e5df9575aa5ccbeb Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 10 Dec 2024 13:28:22 -0800
Subject: [PATCH 2/3] update examples

---
 .../analytics-setup/js/app/routes/cart.jsx    | 19 ++++++++-----------
 .../analytics-setup/ts/app/routes/cart.tsx    | 19 ++++++++-----------
 .../custom-cart-method/app/routes/cart.tsx    | 19 ++++++++-----------
 .../app/routes/cart.tsx                       | 19 ++++++++-----------
 examples/multipass/app/routes/cart.tsx        | 19 ++++++++-----------
 5 files changed, 40 insertions(+), 55 deletions(-)

diff --git a/docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx b/docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx
index 4ba492c21..7a262f7ac 100644
--- a/docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx
+++ b/docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx
@@ -1,5 +1,4 @@
 import {Await, useRouteLoaderData} from '@remix-run/react';
-import {Suspense} from 'react';
 import {CartForm, Analytics} from '@shopify/hydrogen';
 import {json} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/CartMain';
@@ -103,16 +102,14 @@ export default function Cart() {
   return (
     <div className="cart">
       <h1>Cart</h1>
-      <Suspense fallback={<p>Loading cart ...</p>}>
-        <Await
-          resolve={rootData.cart}
-          errorElement={<div>An error occurred</div>}
-        >
-          {(cart) => {
-            return <CartMain layout="page" cart={cart} />;
-          }}
-        </Await>
-      </Suspense>
+      <Await
+        resolve={rootData.cart}
+        errorElement={<div>An error occurred</div>}
+      >
+        {(cart) => {
+          return <CartMain layout="page" cart={cart} />;
+        }}
+      </Await>
       {/* [START cart] */}
       <Analytics.CartView />
       {/* [END cart] */}
diff --git a/docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx b/docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx
index bde1a1764..83d6e06f0 100644
--- a/docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx
+++ b/docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx
@@ -1,5 +1,4 @@
 import {Await, type MetaFunction, useRouteLoaderData} from '@remix-run/react';
-import {Suspense} from 'react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm, Analytics} from '@shopify/hydrogen';
 import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
@@ -102,16 +101,14 @@ export default function Cart() {
   return (
     <div className="cart">
       <h1>Cart</h1>
-      <Suspense fallback={<p>Loading cart ...</p>}>
-        <Await
-          resolve={rootData.cart}
-          errorElement={<div>An error occurred</div>}
-        >
-          {(cart) => {
-            return <CartMain layout="page" cart={cart} />;
-          }}
-        </Await>
-      </Suspense>
+      <Await
+        resolve={rootData.cart}
+        errorElement={<div>An error occurred</div>}
+      >
+        {(cart) => {
+          return <CartMain layout="page" cart={cart} />;
+        }}
+      </Await>
       {/* [START cart] */}
       <Analytics.CartView />
       {/* [END cart] */}
diff --git a/examples/custom-cart-method/app/routes/cart.tsx b/examples/custom-cart-method/app/routes/cart.tsx
index 70399a4f8..25e7ffed0 100644
--- a/examples/custom-cart-method/app/routes/cart.tsx
+++ b/examples/custom-cart-method/app/routes/cart.tsx
@@ -1,5 +1,4 @@
 import {Await, type MetaFunction, useRouteLoaderData} from '@remix-run/react';
-import {Suspense} from 'react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
 import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
@@ -123,16 +122,14 @@ export default function Cart() {
   return (
     <div className="cart">
       <h1>Cart</h1>
-      <Suspense fallback={<p>Loading cart ...</p>}>
-        <Await
-          resolve={rootData.cart}
-          errorElement={<div>An error occurred</div>}
-        >
-          {(cart) => {
-            return <CartMain layout="page" cart={cart} />;
-          }}
-        </Await>
-      </Suspense>
+      <Await
+        resolve={rootData.cart}
+        errorElement={<div>An error occurred</div>}
+      >
+        {(cart) => {
+          return <CartMain layout="page" cart={cart} />;
+        }}
+      </Await>
     </div>
   );
 }
diff --git a/examples/legacy-customer-account-flow/app/routes/cart.tsx b/examples/legacy-customer-account-flow/app/routes/cart.tsx
index 875827f6c..47b88250f 100644
--- a/examples/legacy-customer-account-flow/app/routes/cart.tsx
+++ b/examples/legacy-customer-account-flow/app/routes/cart.tsx
@@ -1,5 +1,4 @@
 import {Await, type MetaFunction, useRouteLoaderData} from '@remix-run/react';
-import {Suspense} from 'react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
 import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
@@ -113,16 +112,14 @@ export default function Cart() {
   return (
     <div className="cart">
       <h1>Cart</h1>
-      <Suspense fallback={<p>Loading cart ...</p>}>
-        <Await
-          resolve={rootData.cart}
-          errorElement={<div>An error occurred</div>}
-        >
-          {(cart) => {
-            return <CartMain layout="page" cart={cart} />;
-          }}
-        </Await>
-      </Suspense>
+      <Await
+        resolve={rootData.cart}
+        errorElement={<div>An error occurred</div>}
+      >
+        {(cart) => {
+          return <CartMain layout="page" cart={cart} />;
+        }}
+      </Await>
     </div>
   );
 }
diff --git a/examples/multipass/app/routes/cart.tsx b/examples/multipass/app/routes/cart.tsx
index aa1ddcda8..e034cf00b 100644
--- a/examples/multipass/app/routes/cart.tsx
+++ b/examples/multipass/app/routes/cart.tsx
@@ -1,5 +1,4 @@
 import {Await, type MetaFunction, useRouteLoaderData} from '@remix-run/react';
-import {Suspense} from 'react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
 import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
@@ -113,16 +112,14 @@ export default function Cart() {
   return (
     <div className="cart">
       <h1>Cart</h1>
-      <Suspense fallback={<p>Loading cart ...</p>}>
-        <Await
-          resolve={rootData.cart}
-          errorElement={<div>An error occurred</div>}
-        >
-          {(cart) => {
-            return <CartMain layout="page" cart={cart} />;
-          }}
-        </Await>
-      </Suspense>
+      <Await
+        resolve={rootData.cart}
+        errorElement={<div>An error occurred</div>}
+      >
+        {(cart) => {
+          return <CartMain layout="page" cart={cart} />;
+        }}
+      </Await>
     </div>
   );
 }

From a0bca702ccfbe068ad1d427ecc6b37e8af32a500 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 10 Dec 2024 14:25:57 -0800
Subject: [PATCH 3/3] update to use loader data

---
 .../analytics-setup/js/app/routes/cart.jsx    | 34 +++++++++----------
 .../analytics-setup/ts/app/routes/cart.tsx    | 22 +++++-------
 .../custom-cart-method/app/routes/cart.tsx    | 21 +++++-------
 .../app/routes/cart.tsx                       | 21 +++++-------
 examples/multipass/app/routes/cart.tsx        | 22 +++++-------
 templates/skeleton/app/routes/cart.tsx        | 22 +++++-------
 6 files changed, 62 insertions(+), 80 deletions(-)

diff --git a/docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx b/docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx
index 7a262f7ac..c7381487d 100644
--- a/docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx
+++ b/docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx
@@ -1,4 +1,4 @@
-import {Await, useRouteLoaderData} from '@remix-run/react';
+import {useLoaderData} from '@remix-run/react';
 import {CartForm, Analytics} from '@shopify/hydrogen';
 import {json} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/CartMain';
@@ -94,31 +94,31 @@ export async function action({request, context}) {
   );
 }
 
+/**
+ * @param {LoaderFunctionArgs} args
+ */
+export async function loader({context}) {
+  const {cart} = context;
+  return json(await cart.get());
+}
+
 export default function Cart() {
-  /** @type {RootLoader} */
-  const rootData = useRouteLoaderData('root');
-  if (!rootData) return null;
+  /** @type {LoaderFunctionArgs} */
+  const cart = useLoaderData();
 
   return (
     <div className="cart">
       <h1>Cart</h1>
-      <Await
-        resolve={rootData.cart}
-        errorElement={<div>An error occurred</div>}
-      >
-        {(cart) => {
-          return <CartMain layout="page" cart={cart} />;
-        }}
-      </Await>
-      {/* [START cart] */}
-      <Analytics.CartView />
-      {/* [END cart] */}
+        <CartMain layout="page" cart={cart} />
+        {/* [START cart] */}
+        <Analytics.CartView />
+        {/* [END cart] */}
     </div>
   );
 }
 
 /** @template T @typedef {import('@remix-run/react').MetaFunction<T>} MetaFunction */
 /** @typedef {import('@shopify/hydrogen').CartQueryDataReturn} CartQueryDataReturn */
-/** @typedef {import('@shopify/remix-oxygen').ActionFunctionArgs} ActionFunctionArgs */
-/** @typedef {import('~/root').RootLoader} RootLoader */
+/** @typedef {import('@shopify/remix-oxygen').LoaderFunctionArgs} LoaderFunctionArgs */
 /** @typedef {import('@shopify/remix-oxygen').SerializeFrom<typeof action>} ActionReturnData */
+/** @typedef {import('@shopify/remix-oxygen').SerializeFrom<typeof loader>} LoaderReturnData */
diff --git a/docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx b/docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx
index 83d6e06f0..0789789ad 100644
--- a/docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx
+++ b/docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx
@@ -1,9 +1,8 @@
-import {Await, type MetaFunction, useRouteLoaderData} from '@remix-run/react';
+import {type MetaFunction, useLoaderData} from '@remix-run/react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm, Analytics} from '@shopify/hydrogen';
-import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+import {json, type LoaderFunctionArgs, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/CartMain';
-import type {RootLoader} from '~/root';
 
 export const meta: MetaFunction = () => {
   return [{title: `Hydrogen | Cart`}];
@@ -94,21 +93,18 @@ export async function action({request, context}: ActionFunctionArgs) {
   );
 }
 
+export async function loader({context}: LoaderFunctionArgs) {
+  const {cart} = context;
+  return json(await cart.get());
+}
+
 export default function Cart() {
-  const rootData = useRouteLoaderData<RootLoader>('root');
-  if (!rootData) return null;
+  const cart = useLoaderData<typeof loader>();
 
   return (
     <div className="cart">
       <h1>Cart</h1>
-      <Await
-        resolve={rootData.cart}
-        errorElement={<div>An error occurred</div>}
-      >
-        {(cart) => {
-          return <CartMain layout="page" cart={cart} />;
-        }}
-      </Await>
+      <CartMain layout="page" cart={cart} />
       {/* [START cart] */}
       <Analytics.CartView />
       {/* [END cart] */}
diff --git a/examples/custom-cart-method/app/routes/cart.tsx b/examples/custom-cart-method/app/routes/cart.tsx
index 25e7ffed0..ed003875b 100644
--- a/examples/custom-cart-method/app/routes/cart.tsx
+++ b/examples/custom-cart-method/app/routes/cart.tsx
@@ -1,7 +1,7 @@
-import {Await, type MetaFunction, useRouteLoaderData} from '@remix-run/react';
+import {type MetaFunction, useLoaderData} from '@remix-run/react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
-import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+import {json, type LoaderFunctionArgs, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 import type {
   SelectedOptionInput,
   CartLineUpdateInput,
@@ -115,21 +115,18 @@ export async function action({request, context}: ActionFunctionArgs) {
   );
 }
 
+export async function loader({context}: LoaderFunctionArgs) {
+  const {cart} = context;
+  return json(await cart.get());
+}
+
 export default function Cart() {
-  const rootData = useRouteLoaderData<RootLoader>('root');
-  if (!rootData) return null;
+  const cart = useLoaderData<typeof loader>();
 
   return (
     <div className="cart">
       <h1>Cart</h1>
-      <Await
-        resolve={rootData.cart}
-        errorElement={<div>An error occurred</div>}
-      >
-        {(cart) => {
-          return <CartMain layout="page" cart={cart} />;
-        }}
-      </Await>
+      <CartMain layout="page" cart={cart} />
     </div>
   );
 }
diff --git a/examples/legacy-customer-account-flow/app/routes/cart.tsx b/examples/legacy-customer-account-flow/app/routes/cart.tsx
index 47b88250f..afc7cc057 100644
--- a/examples/legacy-customer-account-flow/app/routes/cart.tsx
+++ b/examples/legacy-customer-account-flow/app/routes/cart.tsx
@@ -1,7 +1,7 @@
-import {Await, type MetaFunction, useRouteLoaderData} from '@remix-run/react';
+import {type MetaFunction, useLoaderData} from '@remix-run/react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
-import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+import {json, type LoaderFunctionArgs, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/CartMain';
 import type {RootLoader} from '~/root';
 
@@ -105,21 +105,18 @@ export async function action({request, context}: ActionFunctionArgs) {
   );
 }
 
+export async function loader({context}: LoaderFunctionArgs) {
+  const {cart} = context;
+  return json(await cart.get());
+}
+
 export default function Cart() {
-  const rootData = useRouteLoaderData<RootLoader>('root');
-  if (!rootData) return null;
+  const cart = useLoaderData<typeof loader>();
 
   return (
     <div className="cart">
       <h1>Cart</h1>
-      <Await
-        resolve={rootData.cart}
-        errorElement={<div>An error occurred</div>}
-      >
-        {(cart) => {
-          return <CartMain layout="page" cart={cart} />;
-        }}
-      </Await>
+      <CartMain layout="page" cart={cart} />
     </div>
   );
 }
diff --git a/examples/multipass/app/routes/cart.tsx b/examples/multipass/app/routes/cart.tsx
index e034cf00b..ecbc71dcf 100644
--- a/examples/multipass/app/routes/cart.tsx
+++ b/examples/multipass/app/routes/cart.tsx
@@ -1,9 +1,8 @@
-import {Await, type MetaFunction, useRouteLoaderData} from '@remix-run/react';
+import {type MetaFunction, useLoaderData} from '@remix-run/react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
-import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+import {json, type LoaderFunctionArgs, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/Cart';
-import type {RootLoader} from '~/root';
 
 export const meta: MetaFunction = () => {
   return [{title: `Hydrogen | Cart`}];
@@ -105,21 +104,18 @@ export async function action({request, context}: ActionFunctionArgs) {
   );
 }
 
+export async function loader({context}: LoaderFunctionArgs) {
+  const {cart} = context;
+  return json(await cart.get());
+}
+
 export default function Cart() {
-  const rootData = useRouteLoaderData<RootLoader>('root');
-  if (!rootData) return null;
+  const cart = useLoaderData<typeof loader>();
 
   return (
     <div className="cart">
       <h1>Cart</h1>
-      <Await
-        resolve={rootData.cart}
-        errorElement={<div>An error occurred</div>}
-      >
-        {(cart) => {
-          return <CartMain layout="page" cart={cart} />;
-        }}
-      </Await>
+      <CartMain layout="page" cart={cart} />
     </div>
   );
 }
diff --git a/templates/skeleton/app/routes/cart.tsx b/templates/skeleton/app/routes/cart.tsx
index 0e1c95390..f47780222 100644
--- a/templates/skeleton/app/routes/cart.tsx
+++ b/templates/skeleton/app/routes/cart.tsx
@@ -1,9 +1,8 @@
-import {Await, type MetaFunction, useRouteLoaderData} from '@remix-run/react';
+import {type MetaFunction, useLoaderData} from '@remix-run/react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
-import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+import {json, type LoaderFunctionArgs, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/CartMain';
-import type {RootLoader} from '~/root';
 
 export const meta: MetaFunction = () => {
   return [{title: `Hydrogen | Cart`}];
@@ -94,21 +93,18 @@ export async function action({request, context}: ActionFunctionArgs) {
   );
 }
 
+export async function loader({context}: LoaderFunctionArgs) {
+  const {cart} = context;
+  return json(await cart.get());
+}
+
 export default function Cart() {
-  const rootData = useRouteLoaderData<RootLoader>('root');
-  if (!rootData) return null;
+  const cart = useLoaderData<typeof loader>();
 
   return (
     <div className="cart">
       <h1>Cart</h1>
-        <Await
-          resolve={rootData.cart}
-          errorElement={<div>An error occurred</div>}
-        >
-          {(cart) => {
-            return <CartMain layout="page" cart={cart} />;
-          }}
-        </Await>
+      <CartMain layout="page" cart={cart} />
     </div>
   );
 }