@shopify/cli 3.61.0 → 3.61.2

package/dist/assets/hydrogen/starter/app/routes/pages.$handle.tsx

@@ -1,26 +1,54 @@
-import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, type MetaFunction} from '@remix-run/react';
 
 export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.page.title ?? ''}`}];
 };
 
-export async function loader({params, context}: LoaderFunctionArgs) {
+export async function loader(args: LoaderFunctionArgs) {
+  // Start fetching non-critical data without blocking time to first byte
+  const deferredData = loadDeferredData(args);
+
+  // Await the critical data required to render initial state of the page
+  const criticalData = await loadCriticalData(args);
+
+  return defer({...deferredData, ...criticalData});
+}
+
+/**
+ * Load data necessary for rendering content above the fold. This is the critical data
+ * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
+ */
+async function loadCriticalData({context, params}: LoaderFunctionArgs) {
   if (!params.handle) {
     throw new Error('Missing page handle');
   }
 
-  const {page} = await context.storefront.query(PAGE_QUERY, {
-    variables: {
-      handle: params.handle,
-    },
-  });
+  const [{page}] = await Promise.all([
+    context.storefront.query(PAGE_QUERY, {
+      variables: {
+        handle: params.handle,
+      },
+    }),
+    // Add other queries here, so that they are loaded in parallel
+  ]);
 
   if (!page) {
     throw new Response('Not Found', {status: 404});
   }
 
-  return json({page});
+  return {
+    page,
+  };
+}
+
+/**
+ * Load data for rendering content below the fold. This data is deferred and will be
+ * fetched after the initial page load. If it's unavailable, the page should still 200.
+ * Make sure to not throw any errors here, as it will cause the page to 500.
+ */
+function loadDeferredData({context}: LoaderFunctionArgs) {
+  return {};
 }
 
 export default function Page() {

package/dist/assets/hydrogen/starter/app/routes/products.$handle.tsx

@@ -32,7 +32,25 @@ export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.product.title ?? ''}`}];
 };
 
-export async function loader({params, request, context}: LoaderFunctionArgs) {
+export async function loader(args: LoaderFunctionArgs) {
+  // Start fetching non-critical data without blocking time to first byte
+  const deferredData = loadDeferredData(args);
+
+  // Await the critical data required to render initial state of the page
+  const criticalData = await loadCriticalData(args);
+
+  return defer({...deferredData, ...criticalData});
+}
+
+/**
+ * Load data necessary for rendering content above the fold. This is the critical data
+ * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
+ */
+async function loadCriticalData({
+  context,
+  params,
+  request,
+}: LoaderFunctionArgs) {
   const {handle} = params;
   const {storefront} = context;
 
@@ -40,10 +58,12 @@ export async function loader({params, request, context}: LoaderFunctionArgs) {
     throw new Error('Expected product handle to be defined');
   }
 
-  // await the query for the critical product data
-  const {product} = await storefront.query(PRODUCT_QUERY, {
-    variables: {handle, selectedOptions: getSelectedProductOptions(request)},
-  });
+  const [{product}] = await Promise.all([
+    storefront.query(PRODUCT_QUERY, {
+      variables: {handle, selectedOptions: getSelectedProductOptions(request)},
+    }),
+    // Add other queries here, so that they are loaded in parallel
+  ]);
 
   if (!product?.id) {
     throw new Response(null, {status: 404});
@@ -67,16 +87,35 @@ export async function loader({params, request, context}: LoaderFunctionArgs) {
     }
   }
 
+  return {
+    product,
+  };
+}
+
+/**
+ * Load data for rendering content below the fold. This data is deferred and will be
+ * fetched after the initial page load. If it's unavailable, the page should still 200.
+ * Make sure to not throw any errors here, as it will cause the page to 500.
+ */
+function loadDeferredData({context, params}: LoaderFunctionArgs) {
   // In order to show which variants are available in the UI, we need to query
   // all of them. But there might be a *lot*, so instead separate the variants
   // into it's own separate query that is deferred. So there's a brief moment
   // where variant options might show as available when they're not, but after
   // this deffered query resolves, the UI will update.
-  const variants = storefront.query(VARIANTS_QUERY, {
-    variables: {handle},
-  });
+  const variants = context.storefront
+    .query(VARIANTS_QUERY, {
+      variables: {handle: params.handle!},
+    })
+    .catch((error) => {
+      // Log query errors, but don't throw them so the page can still render
+      console.error(error);
+      return null;
+    });
 
-  return defer({product, variants});
+  return {
+    variants,
+  };
 }
 
 function redirectToFirstVariant({
@@ -156,7 +195,7 @@ function ProductMain({
 }: {
   product: ProductFragment;
   selectedVariant: ProductFragment['selectedVariant'];
-  variants: Promise<ProductVariantsQuery>;
+  variants: Promise<ProductVariantsQuery | null>;
 }) {
   const {title, descriptionHtml} = product;
   return (
@@ -181,7 +220,7 @@ function ProductMain({
             <ProductForm
               product={product}
               selectedVariant={selectedVariant}
-              variants={data.product?.variants.nodes || []}
+              variants={data?.product?.variants.nodes || []}
             />
           )}
         </Await>

package/dist/assets/hydrogen/starter/package.json

@@ -2,7 +2,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "0.0.0-next-ca7f288-20240530103543",
+  "version": "0.0.0-next-9eb60d7-20240607102913",
   "type": "module",
   "scripts": {
     "build": "shopify hydrogen build --codegen",
@@ -16,10 +16,9 @@
   "dependencies": {
     "@remix-run/react": "^2.9.2",
     "@remix-run/server-runtime": "^2.9.2",
-    "@shopify/cli": "3.60.0",
-    "@shopify/cli-hydrogen": "0.0.0-next-ca7f288-20240530103543",
-    "@shopify/hydrogen": "0.0.0-next-ca7f288-20240530103543",
-    "@shopify/remix-oxygen": "0.0.0-next-ca7f288-20240530103543",
+    "@shopify/cli": "3.61.0",
+    "@shopify/hydrogen": "0.0.0-next-9eb60d7-20240607102913",
+    "@shopify/remix-oxygen": "0.0.0-next-9eb60d7-20240607102913",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "isbot": "^3.8.0",
@@ -30,8 +29,8 @@
     "@graphql-codegen/cli": "5.0.2",
     "@remix-run/dev": "^2.9.2",
     "@remix-run/eslint-config": "^2.9.2",
-    "@shopify/hydrogen-codegen": "0.0.0-next-ca7f288-20240530103543",
-    "@shopify/mini-oxygen": "0.0.0-next-ca7f288-20240530103543",
+    "@shopify/hydrogen-codegen": "0.0.0-next-9eb60d7-20240607102913",
+    "@shopify/mini-oxygen": "^3.0.3",
     "@shopify/oxygen-workers-types": "^4.0.0",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",

package/dist/assets/hydrogen/starter/server.ts

@@ -96,6 +96,10 @@ export default {
 
       const response = await handleRequest(request);
 
+      if (session.isPending) {
+        response.headers.set('Set-Cookie', await session.commit());
+      }
+
       if (response.status === 404) {
         /**
          * Check for redirects only when there's a 404 from the app.

package/dist/assets/hydrogen/virtual-routes/components/RequestDetails.jsx

@@ -34,8 +34,7 @@ function RequestDetails({
         className: `tab${activeTabClass(key)}`,
         onClick: () => setActiveTab(key),
         onKeyUp: (event) => {
-          if (event.code === "Space")
-            setActiveTab(key);
+          if (event.code === "Space") setActiveTab(key);
         },
         children: TABS[key]
       }

package/dist/assets/hydrogen/virtual-routes/components/RequestTable.jsx

@@ -61,8 +61,7 @@ function RequestTable({
         className: `grid-row${activeEventId === row.id ? " active" : ""}${row.status >= 400 ? " error" : ""}`,
         onClick: () => setActiveEventId(row.id),
         onKeyUp: (event) => {
-          if (event.code === "Space")
-            setActiveEventId(row.id);
+          if (event.code === "Space") setActiveEventId(row.id);
         },
         children: [
           /* @__PURE__ */ jsx("div", { className: "grid-cell", children: row.url }),

package/dist/assets/hydrogen/virtual-routes/routes/index.jsx

@@ -47,8 +47,7 @@ function Index() {
   } = useLoaderData();
   let { name: shopName, id: shopId } = shop;
   const configDone = shopId !== HYDROGEN_SHOP_ID && !isMockShop;
-  if (isMockShop || !shopName)
-    shopName = "Hydrogen";
+  if (isMockShop || !shopName) shopName = "Hydrogen";
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Layout, { shopName, children: [
     configDone ? /* @__PURE__ */ jsx(HydrogenLogoBaseColor, {}) : /* @__PURE__ */ jsx(HydrogenLogoBaseBW, {}),
     /* @__PURE__ */ jsxs("h1", { children: [

package/dist/{chunk-ZOTASNQ2.js → chunk-3RM5SOXY.js}

@@ -17,7 +17,7 @@ import {
   renderTextPrompt,
   renderWarning,
   sleep
-} from "./chunk-4IXC46ZA.js";
+} from "./chunk-CK7MF3LY.js";
 import {
   init_cjs_shims
 } from "./chunk-M63RTPGR.js";

package/dist/{chunk-Q7PY7LVL.js → chunk-4757GPBG.js}

@@ -3,14 +3,14 @@ import {
 } from "./chunk-IUHH3PST.js";
 import {
   demoStepsSchema
-} from "./chunk-ZOTASNQ2.js";
+} from "./chunk-3RM5SOXY.js";
 import {
   base_command_default
-} from "./chunk-EDVQGTOL.js";
+} from "./chunk-G4EQLT5B.js";
 import {
   outputInfo,
   renderInfo
-} from "./chunk-4IXC46ZA.js";
+} from "./chunk-CK7MF3LY.js";
 import {
   __toESM,
   init_cjs_shims

package/dist/{chunk-FFHJRSIP.js → chunk-4L37JOS5.js}

@@ -1,7 +1,7 @@
 import {
   clearCollectedLogs,
   collectedLogs
-} from "./chunk-4IXC46ZA.js";
+} from "./chunk-CK7MF3LY.js";
 import {
   init_cjs_shims
 } from "./chunk-M63RTPGR.js";

package/dist/{chunk-V67RXPI6.js → chunk-4TTAP7NN.js}

@@ -1,14 +1,14 @@
 import {
   demo
-} from "./chunk-ZOTASNQ2.js";
+} from "./chunk-3RM5SOXY.js";
 import {
   base_command_default
-} from "./chunk-EDVQGTOL.js";
+} from "./chunk-G4EQLT5B.js";
 import {
   outputInfo,
   readFile,
   renderAutocompletePrompt
-} from "./chunk-4IXC46ZA.js";
+} from "./chunk-CK7MF3LY.js";
 import {
   joinPath
 } from "./chunk-MHMFNQE3.js";

package/dist/{chunk-IIVL4DYB.js → chunk-5B2D56W6.js}

@@ -2,7 +2,7 @@ import {
   init_cjs_shims
 } from "./chunk-M63RTPGR.js";
 
-// ../../node_modules/.pnpm/@shopify+cli-hydrogen@0.0.0-next-ca7f288-20240530103543_react-dom@17.0.2_react@17.0.2/node_modules/@shopify/cli-hydrogen/dist/lib/find-port.js
+// ../../node_modules/.pnpm/@shopify+cli-hydrogen@0.0.0-next-9eb60d7-20240607102913_react-dom@17.0.2_react@17.0.2/node_modules/@shopify/cli-hydrogen/dist/lib/find-port.js
 init_cjs_shims();
 
 // ../../node_modules/.pnpm/get-port@7.1.0/node_modules/get-port/index.js
@@ -141,7 +141,7 @@ function portNumbers(from, to) {
   return generator(from, to);
 }
 
-// ../../node_modules/.pnpm/@shopify+cli-hydrogen@0.0.0-next-ca7f288-20240530103543_react-dom@17.0.2_react@17.0.2/node_modules/@shopify/cli-hydrogen/dist/lib/find-port.js
+// ../../node_modules/.pnpm/@shopify+cli-hydrogen@0.0.0-next-9eb60d7-20240607102913_react-dom@17.0.2_react@17.0.2/node_modules/@shopify/cli-hydrogen/dist/lib/find-port.js
 function findPort(portPreference, range = 100) {
   return getPorts({
     port: portNumbers(portPreference, portPreference + range)