@shopify/cli-hydrogen 8.1.0 → 8.2.0

package/dist/assets/hydrogen/starter/app/components/ProductPrice.tsx

@@ -0,0 +1,27 @@
+import {Money} from '@shopify/hydrogen';
+import type {MoneyV2} from '@shopify/hydrogen/storefront-api-types';
+
+export function ProductPrice({
+  price,
+  compareAtPrice,
+}: {
+  price?: MoneyV2;
+  compareAtPrice?: MoneyV2 | null;
+}) {
+  return (
+    <div className="product-price">
+      {compareAtPrice ? (
+        <div className="product-price-on-sale">
+          {price ? <Money data={price} /> : null}
+          <s>
+            <Money data={compareAtPrice} />
+          </s>
+        </div>
+      ) : price ? (
+        <Money data={price} />
+      ) : (
+        <span>&nbsp;</span>
+      )}
+    </div>
+  );
+}

package/dist/assets/hydrogen/starter/app/lib/session.ts

@@ -11,6 +11,8 @@ import {
  * swap out the cookie-based implementation with something else!
  */
 export class AppSession implements HydrogenSession {
+  public isPending = false;
+
   #sessionStorage;
   #session;
 
@@ -50,10 +52,12 @@ export class AppSession implements HydrogenSession {
   }
 
   get unset() {
+    this.isPending = true;
     return this.#session.unset;
   }
 
   get set() {
+    this.isPending = true;
     return this.#session.set;
   }
 
@@ -62,6 +66,7 @@ export class AppSession implements HydrogenSession {
   }
 
   commit() {
+    this.isPending = false;
     return this.#sessionStorage.commitSession(this.#session);
   }
 }

package/dist/assets/hydrogen/starter/app/root.tsx

@@ -65,26 +65,19 @@ export async function loader(args: LoaderFunctionArgs) {
 
   const {storefront, env} = args.context;
 
-  return defer(
-    {
-      ...deferredData,
-      ...criticalData,
-      publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
-      shop: getShopAnalytics({
-        storefront,
-        publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
-      }),
-      consent: {
-        checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
-        storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
-      },
-    },
-    {
-      headers: {
-        'Set-Cookie': await args.context.session.commit(),
-      },
+  return defer({
+    ...deferredData,
+    ...criticalData,
+    publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
+    shop: getShopAnalytics({
+      storefront,
+      publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
+    }),
+    consent: {
+      checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
+      storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
     },
-  );
+  });
 }
 
 /**
@@ -137,7 +130,7 @@ function loadDeferredData({context}: LoaderFunctionArgs) {
   };
 }
 
-function Layout({children}: {children?: React.ReactNode}) {
+export function Layout({children}: {children?: React.ReactNode}) {
   const nonce = useNonce();
   const data = useRouteLoaderData<RootLoader>('root');
 
@@ -169,11 +162,7 @@ function Layout({children}: {children?: React.ReactNode}) {
 }
 
 export default function App() {
-  return (
-    <Layout>
-      <Outlet />
-    </Layout>
-  );
+  return <Outlet />;
 }
 
 export function ErrorBoundary() {
@@ -189,16 +178,14 @@ export function ErrorBoundary() {
   }
 
   return (
-    <Layout>
-      <div className="route-error">
-        <h1>Oops</h1>
-        <h2>{errorStatus}</h2>
-        {errorMessage && (
-          <fieldset>
-            <pre>{errorMessage}</pre>
-          </fieldset>
-        )}
-      </div>
-    </Layout>
+    <div className="route-error">
+      <h1>Oops</h1>
+      <h2>{errorStatus}</h2>
+      {errorMessage && (
+        <fieldset>
+          <pre>{errorMessage}</pre>
+        </fieldset>
+      )}
+    </div>
   );
 }

package/dist/assets/hydrogen/starter/app/routes/account.$.tsx

@@ -4,9 +4,5 @@ import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 export async function loader({context}: LoaderFunctionArgs) {
   await context.customerAccount.handleAuthStatus();
 
-  return redirect('/account', {
-    headers: {
-      'Set-Cookie': await context.session.commit(),
-    },
-  });
+  return redirect('/account');
 }

package/dist/assets/hydrogen/starter/app/routes/account.addresses.tsx

@@ -37,14 +37,7 @@ export const meta: MetaFunction = () => {
 export async function loader({context}: LoaderFunctionArgs) {
   await context.customerAccount.handleAuthStatus();
 
-  return json(
-    {},
-    {
-      headers: {
-        'Set-Cookie': await context.session.commit(),
-      },
-    },
-  );
+  return json({});
 }
 
 export async function action({request, context}: ActionFunctionArgs) {
@@ -67,9 +60,6 @@ export async function action({request, context}: ActionFunctionArgs) {
         {error: {[addressId]: 'Unauthorized'}},
         {
           status: 401,
-          headers: {
-            'Set-Cookie': await context.session.commit(),
-          },
         },
       );
     }
@@ -121,27 +111,17 @@ export async function action({request, context}: ActionFunctionArgs) {
             throw new Error('Customer address create failed.');
           }
 
-          return json(
-            {
-              error: null,
-              createdAddress: data?.customerAddressCreate?.customerAddress,
-              defaultAddress,
-            },
-            {
-              headers: {
-                'Set-Cookie': await context.session.commit(),
-              },
-            },
-          );
+          return json({
+            error: null,
+            createdAddress: data?.customerAddressCreate?.customerAddress,
+            defaultAddress,
+          });
         } catch (error: unknown) {
           if (error instanceof Error) {
             return json(
               {error: {[addressId]: error.message}},
               {
                 status: 400,
-                headers: {
-                  'Set-Cookie': await context.session.commit(),
-                },
               },
             );
           }
@@ -149,9 +129,6 @@ export async function action({request, context}: ActionFunctionArgs) {
             {error: {[addressId]: error}},
             {
               status: 400,
-              headers: {
-                'Set-Cookie': await context.session.commit(),
-              },
             },
           );
         }
@@ -183,27 +160,17 @@ export async function action({request, context}: ActionFunctionArgs) {
             throw new Error('Customer address update failed.');
           }
 
-          return json(
-            {
-              error: null,
-              updatedAddress: address,
-              defaultAddress,
-            },
-            {
-              headers: {
-                'Set-Cookie': await context.session.commit(),
-              },
-            },
-          );
+          return json({
+            error: null,
+            updatedAddress: address,
+            defaultAddress,
+          });
         } catch (error: unknown) {
           if (error instanceof Error) {
             return json(
               {error: {[addressId]: error.message}},
               {
                 status: 400,
-                headers: {
-                  'Set-Cookie': await context.session.commit(),
-                },
               },
             );
           }
@@ -211,9 +178,6 @@ export async function action({request, context}: ActionFunctionArgs) {
             {error: {[addressId]: error}},
             {
               status: 400,
-              headers: {
-                'Set-Cookie': await context.session.commit(),
-              },
             },
           );
         }
@@ -241,23 +205,13 @@ export async function action({request, context}: ActionFunctionArgs) {
             throw new Error('Customer address delete failed.');
           }
 
-          return json(
-            {error: null, deletedAddress: addressId},
-            {
-              headers: {
-                'Set-Cookie': await context.session.commit(),
-              },
-            },
-          );
+          return json({error: null, deletedAddress: addressId});
         } catch (error: unknown) {
           if (error instanceof Error) {
             return json(
               {error: {[addressId]: error.message}},
               {
                 status: 400,
-                headers: {
-                  'Set-Cookie': await context.session.commit(),
-                },
               },
             );
           }
@@ -265,9 +219,6 @@ export async function action({request, context}: ActionFunctionArgs) {
             {error: {[addressId]: error}},
             {
               status: 400,
-              headers: {
-                'Set-Cookie': await context.session.commit(),
-              },
             },
           );
         }
@@ -278,9 +229,6 @@ export async function action({request, context}: ActionFunctionArgs) {
           {error: {[addressId]: 'Method not allowed'}},
           {
             status: 405,
-            headers: {
-              'Set-Cookie': await context.session.commit(),
-            },
           },
         );
       }
@@ -291,9 +239,6 @@ export async function action({request, context}: ActionFunctionArgs) {
         {error: error.message},
         {
           status: 400,
-          headers: {
-            'Set-Cookie': await context.session.commit(),
-          },
         },
       );
     }
@@ -301,9 +246,6 @@ export async function action({request, context}: ActionFunctionArgs) {
       {error},
       {
         status: 400,
-        headers: {
-          'Set-Cookie': await context.session.commit(),
-        },
       },
     );
   }

package/dist/assets/hydrogen/starter/app/routes/account.orders.$id.tsx

@@ -40,20 +40,13 @@ export async function loader({params, context}: LoaderFunctionArgs) {
     firstDiscount?.__typename === 'PricingPercentageValue' &&
     firstDiscount?.percentage;
 
-  return json(
-    {
-      order,
-      lineItems,
-      discountValue,
-      discountPercentage,
-      fulfillmentStatus,
-    },
-    {
-      headers: {
-        'Set-Cookie': await context.session.commit(),
-      },
-    },
-  );
+  return json({
+    order,
+    lineItems,
+    discountValue,
+    discountPercentage,
+    fulfillmentStatus,
+  });
 }
 
 export default function OrderRoute() {

package/dist/assets/hydrogen/starter/app/routes/account.orders._index.tsx

@@ -34,14 +34,7 @@ export async function loader({request, context}: LoaderFunctionArgs) {
     throw Error('Customer orders not found');
   }
 
-  return json(
-    {customer: data.customer},
-    {
-      headers: {
-        'Set-Cookie': await context.session.commit(),
-      },
-    },
-  );
+  return json({customer: data.customer});
 }
 
 export default function Orders() {

package/dist/assets/hydrogen/starter/app/routes/account.profile.tsx

@@ -26,14 +26,7 @@ export const meta: MetaFunction = () => {
 export async function loader({context}: LoaderFunctionArgs) {
   await context.customerAccount.handleAuthStatus();
 
-  return json(
-    {},
-    {
-      headers: {
-        'Set-Cookie': await context.session.commit(),
-      },
-    },
-  );
+  return json({});
 }
 
 export async function action({request, context}: ActionFunctionArgs) {
@@ -75,25 +68,15 @@ export async function action({request, context}: ActionFunctionArgs) {
       throw new Error('Customer profile update failed.');
     }
 
-    return json(
-      {
-        error: null,
-        customer: data?.customerUpdate?.customer,
-      },
-      {
-        headers: {
-          'Set-Cookie': await context.session.commit(),
-        },
-      },
-    );
+    return json({
+      error: null,
+      customer: data?.customerUpdate?.customer,
+    });
   } catch (error: any) {
     return json(
       {error: error.message, customer: null},
       {
         status: 400,
-        headers: {
-          'Set-Cookie': await context.session.commit(),
-        },
       },
     );
   }

package/dist/assets/hydrogen/starter/app/routes/account.tsx

@@ -20,7 +20,6 @@ export async function loader({context}: LoaderFunctionArgs) {
     {
       headers: {
         'Cache-Control': 'no-cache, no-store, must-revalidate',
-        'Set-Cookie': await context.session.commit(),
       },
     },
   );

package/dist/assets/hydrogen/starter/app/routes/cart.tsx

@@ -3,7 +3,7 @@ import {Suspense} from 'react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
 import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
-import {CartMain} from '~/components/Cart';
+import {CartMain} from '~/components/CartMain';
 import type {RootLoader} from '~/root';
 
 export const meta: MetaFunction = () => {
@@ -68,8 +68,6 @@ export async function action({request, context}: ActionFunctionArgs) {
     headers.set('Location', redirectTo);
   }
 
-  headers.append('Set-Cookie', await context.session.commit());
-
   return json(
     {
       cart: cartResult,