@shopify/cli 3.61.0 → 3.61.1

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

@@ -1,4 +1,4 @@
-import {json, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {defer, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, Link, type MetaFunction} from '@remix-run/react';
 import {
   Pagination,
@@ -14,7 +14,25 @@ export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.collection.title ?? ''} Collection`}];
 };
 
-export async function loader({request, 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,
+  request,
+}: LoaderFunctionArgs) {
   const {handle} = params;
   const {storefront} = context;
   const paginationVariables = getPaginationVariables(request, {
@@ -22,19 +40,34 @@ export async function loader({request, params, context}: LoaderFunctionArgs) {
   });
 
   if (!handle) {
-    return redirect('/collections');
+    throw redirect('/collections');
   }
 
-  const {collection} = await storefront.query(COLLECTION_QUERY, {
-    variables: {handle, ...paginationVariables},
-  });
+  const [{collection}] = await Promise.all([
+    storefront.query(COLLECTION_QUERY, {
+      variables: {handle, ...paginationVariables},
+      // Add other queries here, so that they are loaded in parallel
+    }),
+  ]);
 
   if (!collection) {
     throw new Response(`Collection ${handle} not found`, {
       status: 404,
     });
   }
-  return json({collection});
+
+  return {
+    collection,
+  };
+}
+
+/**
+ * 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 Collection() {

package/dist/assets/hydrogen/starter/app/routes/collections._index.tsx

@@ -1,18 +1,44 @@
 import {useLoaderData, Link} from '@remix-run/react';
-import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {Pagination, getPaginationVariables, Image} from '@shopify/hydrogen';
 import type {CollectionFragment} from 'storefrontapi.generated';
 
-export async function loader({context, request}: 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, request}: LoaderFunctionArgs) {
   const paginationVariables = getPaginationVariables(request, {
     pageBy: 4,
   });
 
-  const {collections} = await context.storefront.query(COLLECTIONS_QUERY, {
-    variables: paginationVariables,
-  });
+  const [{collections}] = await Promise.all([
+    context.storefront.query(COLLECTIONS_QUERY, {
+      variables: paginationVariables,
+    }),
+    // Add other queries here, so that they are loaded in parallel
+  ]);
+
+  return {collections};
+}
 
-  return json({collections});
+/**
+ * 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 Collections() {

package/dist/assets/hydrogen/starter/app/routes/collections.all.tsx

@@ -1,4 +1,4 @@
-import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, Link, type MetaFunction} from '@remix-run/react';
 import {
   Pagination,
@@ -13,17 +13,42 @@ export const meta: MetaFunction<typeof loader> = () => {
   return [{title: `Hydrogen | Products`}];
 };
 
-export async function loader({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, request}: LoaderFunctionArgs) {
   const {storefront} = context;
   const paginationVariables = getPaginationVariables(request, {
     pageBy: 8,
   });
 
-  const {products} = await storefront.query(CATALOG_QUERY, {
-    variables: {...paginationVariables},
-  });
+  const [{products}] = await Promise.all([
+    storefront.query(CATALOG_QUERY, {
+      variables: {...paginationVariables},
+    }),
+    // Add other queries here, so that they are loaded in parallel
+  ]);
+  return {products};
+}
 
-  return json({products});
+/**
+ * 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 Collection() {

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-a8b9c6c-20240606114114",
   "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-a8b9c6c-20240606114114",
+    "@shopify/remix-oxygen": "0.0.0-next-a8b9c6c-20240606114114",
     "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-a8b9c6c-20240606114114",
+    "@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/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-LXXUWZRO.js → chunk-2OLSNRWX.js}

@@ -1,9 +1,9 @@
 import {
   versionService
-} from "./chunk-OOAZSPYS.js";
+} from "./chunk-IH7T5JPW.js";
 import {
   base_command_default
-} from "./chunk-EDVQGTOL.js";
+} from "./chunk-K7AOF3FH.js";
 import {
   init_cjs_shims
 } from "./chunk-M63RTPGR.js";

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

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