@shopify/cli-hydrogen 5.3.1 → 5.4.1

package/dist/commands/hydrogen/build.js

@@ -1,8 +1,8 @@
 import { Flags } from '@oclif/core';
 import Command from '@shopify/cli-kit/node/base-command';
 import { outputInfo, outputWarn, outputContent, outputToken } from '@shopify/cli-kit/node/output';
-import { rmdir, fileSize, fileExists, copyFile } from '@shopify/cli-kit/node/fs';
-import { resolvePath, relativePath } from '@shopify/cli-kit/node/path';
+import { rmdir, fileSize, glob, readFile, writeFile, fileExists, copyFile } from '@shopify/cli-kit/node/fs';
+import { resolvePath, joinPath, relativePath } from '@shopify/cli-kit/node/path';
 import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
 import colors from '@shopify/cli-kit/node/colors';
 import { getProjectPaths, getRemixConfig, handleRemixImportFail, assertOxygenChecks } from '../../lib/remix-config.js';
@@ -13,6 +13,7 @@ import { muteRemixLogs, createRemixLogger } from '../../lib/log.js';
 import { codegen } from '../../lib/codegen.js';
 import { hasMetafile, buildBundleAnalysis, getBundleAnalysisSummary } from '../../lib/bundle/analyzer.js';
 import { AbortError } from '@shopify/cli-kit/node/error';
+import { isCI } from '../../lib/is-ci.js';
 
 const LOG_WORKER_BUILT = "\u{1F4E6} Worker built";
 const MAX_WORKER_BUNDLE_SIZE = 10;
@@ -26,21 +27,27 @@ class Build extends Command {
       allowNo: true,
       default: true
     }),
-    ["bundle-stats"]: Flags.boolean({
+    "bundle-stats": Flags.boolean({
       description: "Show a bundle size summary after building.",
       default: true,
       allowNo: true
     }),
+    "lockfile-check": Flags.boolean({
+      description: "Checks that there is exactly 1 valid lockfile in the project.",
+      env: "SHOPIFY_HYDROGEN_FLAG_LOCKFILE_CHECK",
+      default: true,
+      allowNo: true
+    }),
     "disable-route-warning": Flags.boolean({
       description: "Disable warning about missing standard routes.",
       env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_ROUTE_WARNING"
     }),
-    ["codegen-unstable"]: Flags.boolean({
+    "codegen-unstable": Flags.boolean({
       description: "Generate types for the Storefront API queries found in your project.",
       required: false,
       default: false
     }),
-    ["codegen-config-path"]: commonFlags.codegenConfigPath,
+    "codegen-config-path": commonFlags.codegenConfigPath,
     base: deprecated("--base")(),
     entry: deprecated("--entry")(),
     target: deprecated("--target")()
@@ -62,6 +69,7 @@ async function runBuild({
   sourcemap = false,
   disableRouteWarning = false,
   bundleStats = true,
+  lockfileCheck = true,
   assetPath
 }) {
   if (!process.env.NODE_ENV) {
@@ -71,7 +79,10 @@ async function runBuild({
     process.env.HYDROGEN_ASSET_BASE_URL = assetPath;
   }
   const { root, buildPath, buildPathClient, buildPathWorkerFile, publicPath } = getProjectPaths(directory);
-  await Promise.all([checkLockfileStatus(root), muteRemixLogs()]);
+  if (lockfileCheck) {
+    await checkLockfileStatus(root, isCI());
+  }
+  await muteRemixLogs();
   console.time(LOG_WORKER_BUILT);
   outputInfo(`
 \u{1F3D7}\uFE0F  Building in ${process.env.NODE_ENV} mode...`);
@@ -135,10 +146,25 @@ This build is missing ${missingRoutes.length} route${missingRoutes.length > 1 ?
       );
     }
   }
+  if (process.env.NODE_ENV !== "development") {
+    await cleanClientSourcemaps(buildPathClient);
+  }
   if (!process.env.SHOPIFY_UNIT_TEST && !assetPath) {
     process.exit(0);
   }
 }
+async function cleanClientSourcemaps(buildPathClient) {
+  const bundleFiles = await glob(joinPath(buildPathClient, "**/*.js"));
+  await Promise.all(
+    bundleFiles.map(async (filePath) => {
+      const file = await readFile(filePath);
+      return await writeFile(
+        filePath,
+        file.replace(/\/\/# sourceMappingURL=.+\.js\.map$/gm, "")
+      );
+    })
+  );
+}
 async function writeBundleAnalysis(buildPath, root, buildPathWorkerFile, sizeMB, bundleStats, remixConfig) {
   const bundleAnalysisPath = await buildBundleAnalysis(buildPath);
   outputInfo(

package/dist/commands/hydrogen/deploy.js

@@ -3,11 +3,13 @@ import Command from '@shopify/cli-kit/node/base-command';
 import colors from '@shopify/cli-kit/node/colors';
 import { outputWarn, outputInfo, outputContent } from '@shopify/cli-kit/node/output';
 import { AbortError } from '@shopify/cli-kit/node/error';
+import { getLatestGitCommit } from '@shopify/cli-kit/node/git';
 import { resolvePath } from '@shopify/cli-kit/node/path';
-import { renderFatalError, renderSuccess, renderTasks } from '@shopify/cli-kit/node/ui';
+import { renderFatalError, renderSelectPrompt, renderSuccess, renderTasks } from '@shopify/cli-kit/node/ui';
+import { ciPlatform } from '@shopify/cli-kit/node/context/local';
 import { parseToken, createDeploy } from '@shopify/oxygen-cli/deploy';
-import { commonFlags } from '../../lib/flags.js';
-import { getOxygenDeploymentToken } from '../../lib/get-oxygen-token.js';
+import { commonFlags, flagsToCamelObject } from '../../lib/flags.js';
+import { getOxygenDeploymentData } from '../../lib/get-oxygen-deployment-data.js';
 import { runBuild } from './build.js';
 
 const deploymentLogger = (message, level = "info") => {
@@ -17,25 +19,36 @@ const deploymentLogger = (message, level = "info") => {
 };
 class Deploy extends Command {
   static flags = {
+    "env-branch": Flags.string({
+      char: "e",
+      description: "Environment branch (tag) for environment to deploy to",
+      required: false
+    }),
     path: commonFlags.path,
     shop: commonFlags.shop,
-    publicDeployment: Flags.boolean({
+    "public-deployment": Flags.boolean({
       env: "SHOPIFY_HYDROGEN_FLAG_PUBLIC_DEPLOYMENT",
       description: "Marks a preview deployment as publicly accessible.",
       required: false,
       default: false
     }),
-    metadataUrl: Flags.string({
+    token: Flags.string({
+      char: "t",
+      description: "Oxygen deployment token",
+      env: "SHOPIFY_HYDROGEN_DEPLOYMENT_TOKEN",
+      required: false
+    }),
+    "metadata-url": Flags.string({
       description: "URL that links to the deployment. Will be saved and displayed in the Shopify admin",
       required: false,
       env: "SHOPIFY_HYDROGEN_FLAG_METADATA_URL"
     }),
-    metadataUser: Flags.string({
+    "metadata-user": Flags.string({
       description: "User that initiated the deployment. Will be saved and displayed in the Shopify admin",
       required: false,
       env: "SHOPIFY_HYDROGEN_FLAG_METADATA_USER"
     }),
-    metadataVersion: Flags.string({
+    "metadata-version": Flags.string({
       description: "A version identifier for the deployment. Will be saved and displayed in the Shopify admin",
       required: false,
       env: "SHOPIFY_HYDROGEN_FLAG_METADATA_VERSION"
@@ -44,24 +57,26 @@ class Deploy extends Command {
   static hidden = true;
   async run() {
     const { flags } = await this.parse(Deploy);
-    const actualPath = flags.path ? resolvePath(flags.path) : process.cwd();
-    await oxygenDeploy({
-      path: actualPath,
-      shop: flags.shop,
-      publicDeployment: flags.publicDeployment,
-      metadataUrl: flags.metadataUrl,
-      metadataUser: flags.metadataUser,
-      metadataVersion: flags.metadataVersion
-    }).catch((error) => {
+    const deploymentOptions = this.flagsToOxygenDeploymentOptions(flags);
+    await oxygenDeploy(deploymentOptions).catch((error) => {
       renderFatalError(error);
       process.exit(1);
     }).finally(() => {
       process.exit(0);
     });
   }
+  flagsToOxygenDeploymentOptions(flags) {
+    const camelFlags = flagsToCamelObject(flags);
+    return {
+      ...camelFlags,
+      environmentTag: flags["env-branch"],
+      path: flags.path ? resolvePath(flags.path) : process.cwd()
+    };
+  }
 }
 async function oxygenDeploy(options) {
   const {
+    environmentTag,
     path,
     shop,
     publicDeployment,
@@ -69,25 +84,69 @@ async function oxygenDeploy(options) {
     metadataUser,
     metadataVersion
   } = options;
-  const token = await getOxygenDeploymentToken({
-    root: path,
-    flagShop: shop
-  });
+  const ci = ciPlatform();
+  let token = options.token;
+  let branch;
+  let deploymentData;
+  let deploymentEnvironmentTag = void 0;
+  let gitCommit;
+  try {
+    gitCommit = await getLatestGitCommit(path);
+    branch = (/HEAD -> ([^,]*)/.exec(gitCommit.refs) || [])[1];
+  } catch (error) {
+    outputWarn("Could not retrieve Git history.");
+    branch = void 0;
+  }
+  if (!ci.isCI) {
+    deploymentData = await getOxygenDeploymentData({
+      root: path,
+      flagShop: shop
+    });
+    if (!deploymentData) {
+      return;
+    }
+    token = token || deploymentData.oxygenDeploymentToken;
+  }
   if (!token) {
-    throw new AbortError("Could not obtain Oxygen deployment token");
+    const errMessage = ci.isCI ? [
+      "No deployment token provided. Use the ",
+      { command: "--token" },
+      " flag to provide a token."
+    ] : `Could not obtain an Oxygen deployment token, please try again or contact Shopify support.`;
+    throw new AbortError(errMessage);
+  }
+  if (!ci.isCI && !environmentTag && deploymentData?.environments) {
+    if (deploymentData.environments.length > 1) {
+      const choices = [
+        ...deploymentData.environments.map(({ name, branch: branch2 }) => ({
+          label: name,
+          value: branch2
+        }))
+      ];
+      deploymentEnvironmentTag = await renderSelectPrompt({
+        message: "Select an environment to deploy to",
+        choices,
+        defaultValue: branch
+      });
+    } else {
+      outputInfo(
+        `Using current checked out branch ${branch} as environment tag`
+      );
+    }
   }
   const config = {
     assetsDir: "dist/client",
     deploymentUrl: "https://oxygen.shopifyapps.com",
     deploymentToken: parseToken(token),
-    healthCheckMaxDuration: 180,
+    environmentTag: environmentTag || deploymentEnvironmentTag || branch,
+    verificationMaxDuration: 180,
     metadata: {
       ...metadataUrl ? { url: metadataUrl } : {},
       ...metadataUser ? { user: metadataUser } : {},
       ...metadataVersion ? { version: metadataVersion } : {}
     },
     publicDeployment,
-    skipHealthCheck: false,
+    skipVerification: false,
     rootPath: path,
     skipBuild: false,
     workerOnly: false,
@@ -120,10 +179,10 @@ async function oxygenDeploy(options) {
         useCodegen: false
       });
     },
-    onHealthCheckComplete: () => resolveHealthCheck(),
+    onVerificationComplete: () => resolveHealthCheck(),
     onUploadFilesStart: () => uploadStart(),
     onUploadFilesComplete: () => resolveUpload(),
-    onHealthCheckError: (error) => {
+    onVerificationError: (error) => {
       deployError = new AbortError(
         error.message,
         "Please verify the deployment status in the Shopify Admin and retry deploying if necessary."
@@ -146,7 +205,7 @@ async function oxygenDeploy(options) {
         task: async () => await uploadPromise
       },
       {
-        title: "Performing health check",
+        title: "Verifying deployment",
         task: async () => await healthCheckPromise
       }
     ]);

package/dist/commands/hydrogen/deploy.test.js

@@ -1,13 +1,14 @@
-import { vi, describe, beforeEach, afterEach, it, expect } from 'vitest';
+import { vi, describe, expect, beforeEach, afterEach, it } from 'vitest';
 import { login } from '../../lib/auth.js';
 import { getStorefronts } from '../../lib/graphql/admin/link-storefront.js';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { renderSelectPrompt, renderSuccess, renderFatalError } from '@shopify/cli-kit/node/ui';
+import { getLatestGitCommit } from '@shopify/cli-kit/node/git';
 import { oxygenDeploy, deploymentLogger } from './deploy.js';
-import { getOxygenDeploymentToken } from '../../lib/get-oxygen-token.js';
+import { getOxygenDeploymentData } from '../../lib/get-oxygen-deployment-data.js';
 import { createDeploy, parseToken } from '@shopify/oxygen-cli/deploy';
 
-vi.mock("../../lib/get-oxygen-token.js");
+vi.mock("../../lib/get-oxygen-deployment-data.js");
 vi.mock("@shopify/oxygen-cli/deploy");
 vi.mock("../../lib/auth.js");
 vi.mock("../../lib/shopify-config.js");
@@ -19,6 +20,8 @@ vi.mock("@shopify/cli-kit/node/output", async () => {
   return {
     outputContent: () => ({ value: "" }),
     outputInfo: () => {
+    },
+    outputWarn: () => {
     }
   };
 });
@@ -30,6 +33,16 @@ vi.mock("@shopify/cli-kit/node/ui", async () => {
     renderTasks: vi.fn()
   };
 });
+vi.mock("@shopify/cli-kit/node/git", async () => {
+  return {
+    getLatestGitCommit: vi.fn()
+  };
+});
+vi.mock("@shopify/cli-kit/node/context/local", async () => {
+  return {
+    ciPlatform: () => ({ isCI: false })
+  };
+});
 describe("deploy", () => {
   const ADMIN_SESSION = {
     token: "abc123",
@@ -66,6 +79,31 @@ describe("deploy", () => {
     namespace: "some-namespace",
     namespaceId: "1"
   };
+  const expectedConfig = {
+    assetsDir: "dist/client",
+    deploymentUrl: "https://oxygen.shopifyapps.com",
+    deploymentToken: mockToken,
+    verificationMaxDuration: 180,
+    metadata: {
+      url: deployParams.metadataUrl,
+      user: deployParams.metadataUser,
+      version: deployParams.metadataVersion
+    },
+    publicDeployment: deployParams.publicDeployment,
+    skipVerification: false,
+    rootPath: deployParams.path,
+    skipBuild: false,
+    workerOnly: false,
+    workerDir: "dist/worker"
+  };
+  const expectedHooks = {
+    buildFunction: expect.any(Function),
+    onVerificationComplete: expect.any(Function),
+    onUploadFilesStart: expect.any(Function),
+    onUploadFilesComplete: expect.any(Function),
+    onVerificationError: expect.any(Function),
+    onUploadFilesError: expect.any(Function)
+  };
   beforeEach(async () => {
     process.exit = vi.fn();
     vi.mocked(login).mockResolvedValue({
@@ -83,54 +121,68 @@ describe("deploy", () => {
     vi.mocked(createDeploy).mockResolvedValue(
       "https://a-lovely-deployment.com"
     );
-    vi.mocked(getOxygenDeploymentToken).mockResolvedValue("some-encoded-token");
+    vi.mocked(getOxygenDeploymentData).mockResolvedValue({
+      oxygenDeploymentToken: "some-encoded-token",
+      environments: []
+    });
     vi.mocked(parseToken).mockReturnValue(mockToken);
   });
   afterEach(() => {
     vi.resetAllMocks();
     process.exit = originalExit;
   });
-  it("calls getOxygenDeploymentToken with the correct parameters", async () => {
+  it("calls getOxygenDeploymentData with the correct parameters", async () => {
     await oxygenDeploy(deployParams);
-    expect(getOxygenDeploymentToken).toHaveBeenCalledWith({
+    expect(getOxygenDeploymentData).toHaveBeenCalledWith({
       root: "./",
       flagShop: "snowdevil.myshopify.com"
     });
-    expect(getOxygenDeploymentToken).toHaveBeenCalledTimes(1);
+    expect(getOxygenDeploymentData).toHaveBeenCalledTimes(1);
   });
   it("calls createDeploy with the correct parameters", async () => {
     await oxygenDeploy(deployParams);
-    const expectedConfig = {
-      assetsDir: "dist/client",
-      deploymentUrl: "https://oxygen.shopifyapps.com",
-      deploymentToken: mockToken,
-      healthCheckMaxDuration: 180,
-      metadata: {
-        url: deployParams.metadataUrl,
-        user: deployParams.metadataUser,
-        version: deployParams.metadataVersion
-      },
-      publicDeployment: deployParams.publicDeployment,
-      skipHealthCheck: false,
-      rootPath: deployParams.path,
-      skipBuild: false,
-      workerOnly: false,
-      workerDir: "dist/worker"
-    };
     expect(vi.mocked(createDeploy)).toHaveBeenCalledWith({
       config: expectedConfig,
-      hooks: {
-        buildFunction: expect.any(Function),
-        onHealthCheckComplete: expect.any(Function),
-        onUploadFilesStart: expect.any(Function),
-        onUploadFilesComplete: expect.any(Function),
-        onHealthCheckError: expect.any(Function),
-        onUploadFilesError: expect.any(Function)
-      },
+      hooks: expectedHooks,
+      logger: deploymentLogger
+    });
+    expect(vi.mocked(renderSuccess)).toHaveBeenCalled;
+  });
+  it("calls createDeploy with the checked out branch name", async () => {
+    vi.mocked(getLatestGitCommit).mockResolvedValue({
+      hash: "123",
+      message: "test commit",
+      date: "2021-01-01",
+      author_name: "test author",
+      author_email: "test@author.com",
+      body: "test body",
+      refs: "HEAD -> main"
+    });
+    await oxygenDeploy(deployParams);
+    expect(vi.mocked(createDeploy)).toHaveBeenCalledWith({
+      config: { ...expectedConfig, environmentTag: "main" },
+      hooks: expectedHooks,
       logger: deploymentLogger
     });
     expect(vi.mocked(renderSuccess)).toHaveBeenCalled;
   });
+  it("calls renderSelectPrompt when there are multiple environments", async () => {
+    vi.mocked(getOxygenDeploymentData).mockResolvedValue({
+      oxygenDeploymentToken: "some-encoded-token",
+      environments: [
+        { name: "production", branch: "main" },
+        { name: "preview", branch: "staging" }
+      ]
+    });
+    await oxygenDeploy(deployParams);
+    expect(vi.mocked(renderSelectPrompt)).toHaveBeenCalledWith({
+      message: "Select an environment to deploy to",
+      choices: [
+        { label: "production", value: "main" },
+        { label: "preview", value: "staging" }
+      ]
+    });
+  });
   it("handles error during uploadFiles", async () => {
     const mockRenderFatalError = vi.fn();
     vi.mocked(renderFatalError).mockImplementation(mockRenderFatalError);
@@ -156,14 +208,14 @@ describe("deploy", () => {
       }
     }
   });
-  it("handles error during health check", async () => {
+  it("handles error during deployment verification", async () => {
     const mockRenderFatalError = vi.fn();
     vi.mocked(renderFatalError).mockImplementation(mockRenderFatalError);
     const error = new Error("Cloudflare is down!");
     vi.mocked(createDeploy).mockImplementation((options) => {
       options.hooks?.onUploadFilesStart?.();
       options.hooks?.onUploadFilesComplete?.();
-      options.hooks?.onHealthCheckError?.(error);
+      options.hooks?.onVerificationError?.(error);
       return new Promise((_resolve, reject) => {
         reject(error);
       });

package/dist/commands/hydrogen/dev.js

@@ -18,6 +18,7 @@ import { getAllEnvironmentVariables } from '../../lib/environment-variables.js';
 import { getConfig } from '../../lib/shopify-config.js';
 import { setupLiveReload } from '../../lib/live-reload.js';
 import { checkRemixVersions } from '../../lib/remix-version-check.js';
+import { getGraphiQLUrl } from '../../lib/graphiql-url.js';
 
 const LOG_REBUILDING = "\u{1F9F1} Rebuilding...";
 const LOG_REBUILT = "\u{1F680} Rebuilt";
@@ -121,16 +122,19 @@ async function runDev({
       },
       workerRuntime
     );
-    const graphiqlUrl = `${miniOxygen.listeningAt}/graphiql`;
     const debugNetworkUrl = `${miniOxygen.listeningAt}/debug-network`;
-    enhanceH2Logs({ graphiqlUrl, ...remixConfig });
+    enhanceH2Logs({ host: miniOxygen.listeningAt, ...remixConfig });
     miniOxygen.showBanner({
       appName: storefront ? colors.cyan(storefront?.title) : void 0,
       headlinePrefix: initialBuildDurationMs > 0 ? `Initial build: ${initialBuildDurationMs}ms
 ` : "",
       extraLines: [
-        colors.dim(`
-View GraphiQL API browser: ${graphiqlUrl}`),
+        colors.dim(
+          `
+View GraphiQL API browser: ${getGraphiQLUrl({
+            host: miniOxygen.listeningAt
+          })}`
+        ),
         workerRuntime ? "" : colors.dim(
           `
 View server-side network requests: ${debugNetworkUrl}`

package/dist/generator-templates/starter/app/components/Aside.tsx

@@ -1,8 +1,8 @@
 /**
  * A side bar component with Overlay that works without JavaScript.
  * @example
- * ```ts
- * <Aside id="search-aside" heading="SEARCH">`
+ * ```jsx
+ * <Aside id="search-aside" heading="SEARCH">
  *  <input type="search" />
  *  ...
  * </Aside>

package/dist/generator-templates/starter/app/components/Search.tsx

@@ -450,13 +450,11 @@ function usePredictiveSearch(): UseSearchReturn {
 
 /**
  * Converts a plural search type to a singular search type
- * @param type - The plural search type
- * @returns The singular search type
  *
  * @example
- * ```ts
- * pluralToSingularSearchType('articles') // => 'ARTICLE'
- * pluralToSingularSearchType(['articles', 'products']) // => 'ARTICLE,PRODUCT'
+ * ```js
+ * pluralToSingularSearchType('articles'); // => 'ARTICLE'
+ * pluralToSingularSearchType(['articles', 'products']); // => 'ARTICLE,PRODUCT'
  * ```
  */
 function pluralToSingularSearchType(

package/dist/generator-templates/starter/app/root.tsx

@@ -189,14 +189,13 @@ export function CatchBoundary() {
  * @see https://shopify.dev/docs/api/storefront/latest/objects/CustomerAccessToken
  *
  * @example
- * ```ts
- * //
+ * ```js
  * const {isLoggedIn, headers} = await validateCustomerAccessToken(
  *  customerAccessToken,
  *  session,
- *  );
- *  ```
- *  */
+ * );
+ * ```
+ */
 async function validateCustomerAccessToken(
   session: HydrogenSession,
   customerAccessToken?: CustomerAccessToken,

package/dist/generator-templates/starter/app/routes/_index.tsx

@@ -40,7 +40,8 @@ function FeaturedCollection({
 }: {
   collection: FeaturedCollectionFragment;
 }) {
-  const image = collection.image;
+  if (!collection) return null;
+  const image = collection?.image;
   return (
     <Link
       className="featured-collection"

package/dist/generator-templates/starter/app/routes/api.predictive-search.tsx

@@ -108,8 +108,6 @@ async function fetchPredictiveSearchResults({
 
 /**
  * Normalize results and apply tracking qurery parameters to each result url
- * @param predictiveSearch
- * @param locale
  */
 export function normalizePredictiveSearchResults(
   predictiveSearch: PredictiveSearchQuery['predictiveSearch'],

package/dist/generator-templates/starter/app/routes/cart.$lines.tsx

@@ -3,21 +3,20 @@ import {redirect, type LoaderArgs} from '@shopify/remix-oxygen';
 /**
  * Automatically creates a new cart based on the URL and redirects straight to checkout.
  * Expected URL structure:
- * ```ts
+ * ```js
  * /cart/<variant_id>:<quantity>
  *
  * ```
+ *
  * More than one `<variant_id>:<quantity>` separated by a comma, can be supplied in the URL, for
  * carts with more than one product variant.
  *
- * @param `?discount` an optional discount code to apply to the cart
  * @example
- * Example path creating a cart with two product variants, different quantities, and a discount code:
- * ```ts
+ * Example path creating a cart with two product variants, different quantities, and a discount code in the querystring:
+ * ```js
  * /cart/41007289663544:1,41007289696312:2?discount=HYDROBOARD
  *
  * ```
- * @preserve
  */
 export async function loader({request, context, params}: LoaderArgs) {
   const {cart} = context;

package/dist/generator-templates/starter/app/routes/collections._index.tsx

@@ -66,7 +66,7 @@ function CollectionItem({
       to={`/collections/${collection.handle}`}
       prefetch="intent"
     >
-      {collection.image && (
+      {collection?.image && (
         <Image
           alt={collection.image.altText || collection.title}
           aspectRatio="1/1"

package/dist/generator-templates/starter/app/routes/discount.$code.tsx

@@ -3,14 +3,13 @@ import {redirect, type LoaderArgs} from '@shopify/remix-oxygen';
 /**
  * Automatically applies a discount found on the url
  * If a cart exists it's updated with the discount, otherwise a cart is created with the discount already applied
- * @param ?redirect an optional path to return to otherwise return to the home page
+ *
  * @example
- * Example path applying a discount and redirecting
- * ```ts
+ * Example path applying a discount and optional redirecting (defaults to the home page)
+ * ```js
  * /discount/FREESHIPPING?redirect=/products
  *
  * ```
- * @preserve
  */
 export async function loader({request, context, params}: LoaderArgs) {
   const {cart} = context;

package/dist/generator-templates/starter/package.json

@@ -15,9 +15,9 @@
   "dependencies": {
     "@remix-run/react": "1.19.1",
     "@shopify/cli": "3.49.2",
-    "@shopify/cli-hydrogen": "^5.3.1",
-    "@shopify/hydrogen": "^2023.7.8",
-    "@shopify/remix-oxygen": "^1.1.4",
+    "@shopify/cli-hydrogen": "^5.4.1",
+    "@shopify/hydrogen": "^2023.7.9",
+    "@shopify/remix-oxygen": "^1.1.5",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "isbot": "^3.6.6",
@@ -30,7 +30,7 @@
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",
     "@types/eslint": "^8.4.10",
-    "@types/react": "^18.2.20",
+    "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "eslint": "^8.20.0",
     "eslint-plugin-hydrogen": "0.12.2",