@shopify/cli-hydrogen 4.0.9 → 4.1.0

package/dist/commands/hydrogen/generate/routes.d.ts

@@ -5,10 +5,10 @@ declare class GenerateRoutes extends Command {
     static description: string;
     static hidden: true;
     static flags: {
-        adapter: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        adapter: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
         typescript: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
         force: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
-        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
     };
     run(): Promise<void>;
 }

package/dist/commands/hydrogen/init.d.ts

@@ -5,9 +5,9 @@ declare class Init extends Command {
     static description: string;
     static flags: {
         force: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
-        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
-        language: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
-        template: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        language: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        template: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
         'install-deps': _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
     };
     run(): Promise<void>;

package/dist/commands/hydrogen/init.js

@@ -1,12 +1,14 @@
 import Command from '@shopify/cli-kit/node/base-command';
 import { packageManagerUsedForCreating, installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
-import { renderFatalError } from '@shopify/cli-kit/node/ui';
-import Flags from '@oclif/core/lib/flags.js';
-import { output, path } from '@shopify/cli-kit';
-import { commonFlags, flagsToCamelObject, parseProcessFlags } from '../../utils/flags.js';
-import { transpileProject } from '../../utils/transpile-ts.js';
-import { getLatestTemplates } from '../../utils/template-downloader.js';
-import { checkHydrogenVersion } from '../../utils/check-version.js';
+import { renderFatalError, renderSelectPrompt, renderTextPrompt, renderConfirmationPrompt, renderInfo, renderTasks, renderSuccess } from '@shopify/cli-kit/node/ui';
+import { Flags } from '@oclif/core';
+import { basename, resolvePath, joinPath } from '@shopify/cli-kit/node/path';
+import { rmdir, copyFile, fileExists, isDirectory } from '@shopify/cli-kit/node/fs';
+import { outputContent, outputToken } from '@shopify/cli-kit/node/output';
+import { commonFlags, flagsToCamelObject, parseProcessFlags } from '../../lib/flags.js';
+import { transpileProject } from '../../lib/transpile-ts.js';
+import { getLatestTemplates } from '../../lib/template-downloader.js';
+import { checkHydrogenVersion } from '../../lib/check-version.js';
 import { readdir } from 'fs/promises';
 import { fileURLToPath } from 'url';
 
@@ -53,106 +55,77 @@ async function runInit(options = parseProcessFlags(process.argv, FLAG_MAP)) {
       packageManager2 === "unknown" ? "" : `Please use the latest version with \`${packageManager2} create @shopify/hydrogen@latest\``
     );
   }
-  const templatesPromise = getLatestTemplates().catch((error) => {
-    output.info("\n\n\n");
+  let templatesDownloaded = false;
+  const templatesPromise = getLatestTemplates().then((result) => {
+    templatesDownloaded = true;
+    return result;
+  }).catch((error) => {
     renderFatalError(error);
     process.exit(1);
   });
-  const { ui, file } = await import('@shopify/cli-kit');
-  const { renderSuccess, renderInfo } = await import('@shopify/cli-kit/node/ui');
-  const prompts = [];
-  if (!options.template) {
-    prompts.push({
-      type: "select",
-      name: "template",
-      message: "Choose a template",
-      choices: STARTER_TEMPLATES.map((value) => ({
-        name: value.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()),
-        value
-      }))
-    });
-  }
-  if (!options.language) {
-    prompts.push({
-      type: "select",
-      name: "language",
-      message: "Choose a language",
-      choices: [
-        { name: "JavaScript", value: "js" },
-        { name: "TypeScript", value: "ts" }
-      ],
-      default: "js"
-    });
-  }
-  if (!options.path) {
-    prompts.push({
-      type: "input",
-      name: "path",
-      message: "Where would you like to create your app?",
-      default: "hydrogen-storefront"
-    });
-  }
-  const {
-    path: location = options.path,
-    template: appTemplate = options.template,
-    language = options.language ?? "js"
-  } = prompts.length > 0 ? await ui.prompt(prompts) : options;
-  const projectName = path.basename(location);
-  const projectDir = path.resolve(process.cwd(), location);
+  const appTemplate = options.template ?? await renderSelectPrompt({
+    message: "Choose a template",
+    defaultValue: "hello-world",
+    choices: STARTER_TEMPLATES.map((value) => ({
+      label: value.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()),
+      value
+    }))
+  });
+  const language = options.language ?? await renderSelectPrompt({
+    message: "Choose a language",
+    choices: [
+      { label: "JavaScript", value: "js" },
+      { label: "TypeScript", value: "ts" }
+    ],
+    defaultValue: "js"
+  });
+  const location = options.path ?? await renderTextPrompt({
+    message: "Where would you like to create your app?",
+    defaultValue: "hydrogen-storefront"
+  });
+  const projectName = basename(location);
+  const projectDir = resolvePath(process.cwd(), location);
   if (await projectExists(projectDir)) {
     if (!options.force) {
-      const { deleteFiles } = await ui.prompt([
-        {
-          type: "select",
-          name: "deleteFiles",
-          message: `${location} is not an empty directory. Do you want to delete the existing files and continue?`,
-          choices: [
-            { name: "Yes, delete the files", value: "true" },
-            { name: "No, do not delete the files", value: "false" }
-          ],
-          default: "false"
-        }
-      ]);
-      if (deleteFiles === "false") {
+      const deleteFiles = await renderConfirmationPrompt({
+        message: `${location} is not an empty directory. Do you want to delete the existing files and continue?`,
+        defaultValue: false
+      });
+      if (!deleteFiles) {
         renderInfo({
           headline: `Destination path ${location} already exists and is not an empty directory. You may use \`--force\` or \`-f\` to override it.`
         });
         return;
       }
     }
-    await file.rmdir(projectDir, { force: true });
+    await rmdir(projectDir, { force: true });
+  }
+  if (!templatesDownloaded) {
+    await renderTasks([
+      {
+        title: "Downloading templates",
+        task: async () => {
+          await templatesPromise;
+        }
+      }
+    ]);
   }
-  let downloaded = false;
-  setTimeout(
-    () => !downloaded && output.info("\n\u{1F4E5} Downloading templates..."),
-    150
-  );
   const { templatesDir } = await templatesPromise;
-  downloaded = true;
-  await file.copy(path.join(templatesDir, appTemplate), projectDir);
+  await copyFile(joinPath(templatesDir, appTemplate), projectDir);
   if (language === "js") {
     try {
       await transpileProject(projectDir);
     } catch (error) {
-      await file.rmdir(projectDir, { force: true });
+      await rmdir(projectDir, { force: true });
       throw error;
     }
   }
   let depsInstalled = false;
   let packageManager = await packageManagerUsedForCreating();
   if (packageManager !== "unknown") {
-    const installDeps = options.installDeps ?? (await ui.prompt([
-      {
-        type: "select",
-        name: "installDeps",
-        message: `Install dependencies with ${packageManager}?`,
-        choices: [
-          { name: "Yes", value: "true" },
-          { name: "No", value: "false" }
-        ],
-        default: "true"
-      }
-    ])).installDeps === "true";
+    const installDeps = options.installDeps ?? await renderConfirmationPrompt({
+      message: `Install dependencies with ${packageManager}?`
+    });
     if (installDeps) {
       await installNodeModules({
         directory: projectDir,
@@ -169,20 +142,28 @@ async function runInit(options = parseProcessFlags(process.argv, FLAG_MAP)) {
   renderSuccess({
     headline: `${projectName} is ready to build.`,
     nextSteps: [
-      `Run \`cd ${location}\`${depsInstalled ? "" : `, \`${packageManager} install\`,`} and \`${packageManager + (packageManager === "npm" ? " run" : "")} dev\` to start your local development server and start building.`
-    ],
+      outputContent`Run ${outputToken.genericShellCommand(`cd ${location}`)}`.value,
+      depsInstalled ? void 0 : outputContent`Run ${outputToken.genericShellCommand(
+        `${packageManager} install`
+      )} to install the dependencies`.value,
+      outputContent`Run ${outputToken.packagejsonScript(
+        packageManager,
+        "dev"
+      )} to start your local development server and start building`.value
+    ].filter((step) => Boolean(step)),
     reference: [
-      "Building with Hydrogen: https://shopify.dev/custom-storefronts/hydrogen"
+      "Building with Hydrogen: https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development"
     ]
   });
-  renderInfo({
-    headline: `Your project will display inventory from the Hydrogen Demo Store.`,
-    body: `To connect this project to your Shopify store\u2019s inventory, update \`${projectName}/.env\` with your store ID and Storefront API key.`
-  });
+  if (appTemplate === "demo-store") {
+    renderInfo({
+      headline: `Your project will display inventory from the Hydrogen Demo Store.`,
+      body: `To connect this project to your Shopify store\u2019s inventory, update \`${projectName}/.env\` with your store ID and Storefront API key.`
+    });
+  }
 }
 async function projectExists(projectDir) {
-  const { file } = await import('@shopify/cli-kit');
-  return await file.exists(projectDir) && await file.isDirectory(projectDir) && (await readdir(projectDir)).length > 0;
+  return await fileExists(projectDir) && await isDirectory(projectDir) && (await readdir(projectDir)).length > 0;
 }
 function supressNodeExperimentalWarnings() {
   const warningListener = process.listeners("warning")[0];

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

@@ -1,21 +1,24 @@
 import { describe, beforeEach, vi, it, expect } from 'vitest';
 import { temporaryDirectoryTask } from 'tempy';
 import { runInit } from './init.js';
-import { ui } from '@shopify/cli-kit';
+import { renderSelectPrompt, renderConfirmationPrompt, renderTextPrompt, renderInfo } from '@shopify/cli-kit/node/ui';
+import { outputContent } from '@shopify/cli-kit/node/output';
 import { installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
 
 describe("init", () => {
   beforeEach(() => {
     vi.resetAllMocks();
-    vi.mock("@shopify/cli-kit");
-    vi.mock("../../utils/transpile-ts.js");
-    vi.mock("../../utils/template-downloader.js", async () => ({
+    vi.mock("@shopify/cli-kit/node/output");
+    vi.mock("../../lib/transpile-ts.js");
+    vi.mock("../../lib/template-downloader.js", async () => ({
       getLatestTemplates: () => Promise.resolve({})
     }));
     vi.mock("@shopify/cli-kit/node/node-package-manager");
-    vi.mocked(ui.prompt).mockImplementation(
-      () => Promise.resolve({ installDeps: "false" })
-    );
+    vi.mocked(outputContent).mockImplementation(() => ({
+      value: ""
+    }));
+    vi.mock("@shopify/cli-kit/node/ui");
+    vi.mock("@shopify/cli-kit/node/fs");
   });
   const defaultOptions = (stubs) => ({
     template: "hello-world",
@@ -24,11 +27,27 @@ describe("init", () => {
     ...stubs
   });
   describe.each([
-    { flag: "template", value: "hello-world" },
-    { flag: "installDeps", value: true },
-    { flag: "language", value: "ts" },
-    { flag: "path", value: "./my-app" }
-  ])("flag $flag", ({ flag, value }) => {
+    {
+      flag: "template",
+      value: "hello-world",
+      condition: { fn: renderSelectPrompt, match: /template/i }
+    },
+    {
+      flag: "installDeps",
+      value: true,
+      condition: { fn: renderConfirmationPrompt, match: /install dependencies/i }
+    },
+    {
+      flag: "language",
+      value: "ts",
+      condition: { fn: renderSelectPrompt, match: /language/i }
+    },
+    {
+      flag: "path",
+      value: "./my-app",
+      condition: { fn: renderTextPrompt, match: /where/i }
+    }
+  ])("flag $flag", ({ flag, value, condition }) => {
     it(`does not prompt the user for ${flag} when a value is passed in options`, async () => {
       await temporaryDirectoryTask(async (tmpDir) => {
         const options = defaultOptions({
@@ -36,12 +55,10 @@ describe("init", () => {
           [flag]: value
         });
         await runInit(options);
-        expect(ui.prompt).not.toHaveBeenCalledWith(
-          expect.arrayContaining([
-            expect.objectContaining({
-              name: flag
-            })
-          ])
+        expect(condition.fn).not.toHaveBeenCalledWith(
+          expect.objectContaining({
+            message: expect.stringMatching(condition.match)
+          })
         );
       });
     });
@@ -52,12 +69,10 @@ describe("init", () => {
           [flag]: void 0
         });
         await runInit(options);
-        expect(ui.prompt).toHaveBeenCalledWith(
-          expect.arrayContaining([
-            expect.objectContaining({
-              name: flag
-            })
-          ])
+        expect(condition.fn).toHaveBeenCalledWith(
+          expect.objectContaining({
+            message: expect.stringMatching(condition.match)
+          })
         );
       });
     });
@@ -76,4 +91,36 @@ describe("init", () => {
       expect(installNodeModules).not.toHaveBeenCalled();
     });
   });
+  it("displays inventory information when using the demo-store template", async () => {
+    await temporaryDirectoryTask(async (tmpDir) => {
+      const options = defaultOptions({
+        installDeps: false,
+        path: tmpDir,
+        template: "demo-store"
+      });
+      await runInit(options);
+      expect(renderInfo).toHaveBeenCalledTimes(1);
+      expect(renderInfo).toHaveBeenCalledWith(
+        expect.objectContaining({
+          body: expect.stringContaining(
+            "To connect this project to your Shopify store\u2019s inventory"
+          ),
+          headline: expect.stringContaining(
+            "Your project will display inventory from the Hydrogen Demo Store"
+          )
+        })
+      );
+    });
+  });
+  it("does not display inventory information when using non-demo-store templates", async () => {
+    await temporaryDirectoryTask(async (tmpDir) => {
+      const options = defaultOptions({
+        installDeps: false,
+        path: tmpDir,
+        template: "pizza-store"
+      });
+      await runInit(options);
+      expect(renderInfo).toHaveBeenCalledTimes(0);
+    });
+  });
 });

package/dist/commands/hydrogen/preview.d.ts

@@ -4,8 +4,8 @@ import Command from '@shopify/cli-kit/node/base-command';
 declare class Preview extends Command {
     static description: string;
     static flags: {
-        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
-        port: _oclif_core_lib_interfaces_parser_js.OptionFlag<number>;
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        port: _oclif_core_lib_interfaces_parser_js.OptionFlag<number, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
     };
     run(): Promise<void>;
 }

package/dist/commands/hydrogen/preview.js

@@ -1,8 +1,8 @@
 import Command from '@shopify/cli-kit/node/base-command';
-import { muteDevLogs } from '../../utils/log.js';
-import { getProjectPaths } from '../../utils/config.js';
-import { commonFlags } from '../../utils/flags.js';
-import { startMiniOxygen } from '../../utils/mini-oxygen.js';
+import { muteDevLogs } from '../../lib/log.js';
+import { getProjectPaths } from '../../lib/config.js';
+import { commonFlags } from '../../lib/flags.js';
+import { startMiniOxygen } from '../../lib/mini-oxygen.js';
 
 class Preview extends Command {
   static description = "Runs a Hydrogen storefront in an Oxygen worker for production.";

package/dist/commands/hydrogen/shortcut.d.ts

@@ -0,0 +1,9 @@
+import Command from '@shopify/cli-kit/node/base-command';
+
+declare class Shortcut extends Command {
+    static description: string;
+    run(): Promise<void>;
+}
+declare function runCreateShortcut(): Promise<void>;
+
+export { Shortcut as default, runCreateShortcut };

package/dist/commands/hydrogen/shortcut.js

@@ -0,0 +1,74 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { renderSuccess, renderFatalError } from '@shopify/cli-kit/node/ui';
+import { isWindows, isGitBash, supportsShell, hasAlias, shellWriteFile, homeFileExists, shellRunScript } from '../../lib/shell.js';
+
+const ALIAS_NAME = "h2";
+class Shortcut extends Command {
+  static description = `Creates a global \`${ALIAS_NAME}\` shortcut for the Hydrogen CLI`;
+  async run() {
+    await runCreateShortcut();
+  }
+}
+async function runCreateShortcut() {
+  const shortcuts = isWindows() && !isGitBash() ? await createShortcutsForWindows() : await createShortcutsForUnix();
+  if (shortcuts.length > 0) {
+    renderSuccess({
+      headline: `Shortcut ready for the following shells: ${shortcuts.join(
+        ", "
+      )}.
+Restart your terminal session and run \`${ALIAS_NAME}\` from your local project.`
+    });
+  } else {
+    renderFatalError({
+      name: "error",
+      type: 0,
+      message: "No supported shell found.",
+      tryMessage: "Please create a shortcut manually."
+    });
+  }
+}
+const BASH_ZSH_COMMAND = `
+# Shopify Hydrogen alias to local projects
+alias ${ALIAS_NAME}='$(npm prefix -s)/node_modules/.bin/shopify hydrogen'`;
+const FISH_FUNCTION = `
+function ${ALIAS_NAME} --wraps='shopify hydrogen' --description 'Shortcut for the Hydrogen CLI'
+   set npmPrefix (npm prefix -s)
+   $npmPrefix/node_modules/.bin/shopify hydrogen $argv
+end
+`;
+async function createShortcutsForUnix() {
+  const shells = [];
+  if (supportsShell("zsh") && (hasAlias(ALIAS_NAME, "~/.zshrc") || shellWriteFile("~/.zshrc", BASH_ZSH_COMMAND, true))) {
+    shells.push("zsh");
+  }
+  if (supportsShell("bash") && (hasAlias(ALIAS_NAME, "~/.bashrc") || shellWriteFile("~/.bashrc", BASH_ZSH_COMMAND, true))) {
+    shells.push("bash");
+  }
+  if (supportsShell("fish") && await homeFileExists("~/.config/fish/functions") && shellWriteFile(`~/.config/fish/functions/${ALIAS_NAME}.fish`, FISH_FUNCTION)) {
+    shells.push("fish");
+  }
+  return shells;
+}
+const PS_FUNCTION = `function Invoke-Local-H2 {$npmPrefix = npm prefix -s; Invoke-Expression "$npmPrefix\\node_modules\\.bin\\shopify.ps1 hydrogen $Args"}; Set-Alias -Name ${ALIAS_NAME} -Value Invoke-Local-H2`;
+const PS_APPEND_PROFILE_COMMAND = `
+if (!(Test-Path -Path $PROFILE)) {
+  New-Item -ItemType File -Path $PROFILE -Force
+}
+
+$profileContent = Get-Content -Path $PROFILE
+if (!$profileContent -or $profileContent -NotLike '*Invoke-Local-H2*') {
+  Add-Content -Path $PROFILE -Value '${PS_FUNCTION}'
+}
+`;
+async function createShortcutsForWindows() {
+  const shells = [];
+  if (shellRunScript(PS_APPEND_PROFILE_COMMAND, "powershell.exe")) {
+    shells.push("PowerShell");
+  }
+  if (shellRunScript(PS_APPEND_PROFILE_COMMAND, "pwsh.exe")) {
+    shells.push("PowerShell 7+");
+  }
+  return shells;
+}
+
+export { Shortcut as default, runCreateShortcut };

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

@@ -0,0 +1,58 @@
+import { describe, beforeEach, vi, afterEach, expect, it } from 'vitest';
+import { runCreateShortcut } from './shortcut.js';
+import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
+import { supportsShell, isWindows, isGitBash } from '../../lib/shell.js';
+import { execSync, exec } from 'child_process';
+
+describe("shortcut", () => {
+  const outputMock = mockAndCaptureOutput();
+  beforeEach(() => {
+    vi.resetAllMocks();
+    vi.mock("child_process");
+    vi.mock("../../lib/shell.js", async () => {
+      return {
+        isWindows: vi.fn(),
+        isGitBash: vi.fn(),
+        supportsShell: vi.fn(),
+        shellWriteFile: () => true,
+        shellRunScript: () => true,
+        hasAlias: () => false,
+        homeFileExists: () => Promise.resolve(true)
+      };
+    });
+    vi.mocked(supportsShell).mockImplementation(
+      (shell) => !isWindows() || shell === "bash"
+    );
+  });
+  afterEach(() => {
+    outputMock.clear();
+    expect(execSync).toHaveBeenCalledTimes(0);
+    expect(exec).toHaveBeenCalledTimes(0);
+  });
+  it("creates aliases for Unix", async () => {
+    vi.mocked(isWindows).mockReturnValue(false);
+    await runCreateShortcut();
+    expect(outputMock.info()).toMatch(`zsh, bash, fish`);
+    expect(outputMock.error()).toBeFalsy();
+  });
+  it("creates aliases for Windows", async () => {
+    vi.mocked(isWindows).mockReturnValue(true);
+    await runCreateShortcut();
+    expect(outputMock.info()).toMatch(`PowerShell, PowerShell 7+`);
+    expect(outputMock.error()).toBeFalsy();
+  });
+  it("creates aliases for Windows in Git Bash", async () => {
+    vi.mocked(isWindows).mockReturnValue(true);
+    vi.mocked(isGitBash).mockReturnValueOnce(true);
+    await runCreateShortcut();
+    expect(outputMock.info()).toMatch("bash");
+    expect(outputMock.error()).toBeFalsy();
+  });
+  it("warns when not finding shells", async () => {
+    vi.mocked(isWindows).mockReturnValue(false);
+    vi.mocked(supportsShell).mockReturnValue(false);
+    await runCreateShortcut();
+    expect(outputMock.info()).toBeFalsy();
+    expect(outputMock.error()).toBeTruthy();
+  });
+});

package/dist/generator-templates/routes/[robots.txt].tsx

@@ -1,4 +1,8 @@
-import {type LoaderArgs} from '@shopify/remix-oxygen';
+import {
+  type LoaderArgs,
+  type ErrorBoundaryComponent,
+} from '@shopify/remix-oxygen';
+import {useCatch, useRouteError, isRouteErrorResponse} from '@remix-run/react';
 
 export const loader = ({request}: LoaderArgs) => {
   const url = new URL(request.url);
@@ -14,6 +18,36 @@ export const loader = ({request}: LoaderArgs) => {
   });
 };
 
+export const ErrorBoundaryV1: ErrorBoundaryComponent = ({error}) => {
+  console.error(error);
+
+  return <div>There was an error.</div>;
+};
+
+export function CatchBoundary() {
+  const caught = useCatch();
+  console.error(caught);
+
+  return (
+    <div>
+      There was an error. Status: {caught.status}. Message:{' '}
+      {caught.data?.message}
+    </div>
+  );
+}
+
+export function ErrorBoundary() {
+  const error = useRouteError();
+
+  if (isRouteErrorResponse(error)) {
+    console.error(error.status, error.statusText, error.data);
+    return <div>Route Error</div>;
+  } else {
+    console.error((error as Error).message);
+    return <div>Thrown Error</div>;
+  }
+}
+
 function robotsTxtData({url}: {url: string}) {
   const sitemapUrl = url ? `${url}/sitemap.xml` : undefined;
 

package/dist/generator-templates/routes/[sitemap.xml].tsx

@@ -1,5 +1,6 @@
 import {flattenConnection} from '@shopify/hydrogen';
-import type {LoaderArgs} from '@shopify/remix-oxygen';
+import type {LoaderArgs, ErrorBoundaryComponent} from '@shopify/remix-oxygen';
+import {useCatch, useRouteError, isRouteErrorResponse} from '@remix-run/react';
 import {
   CollectionConnection,
   PageConnection,
@@ -34,7 +35,7 @@ export async function loader({request, context: {storefront}}: LoaderArgs) {
   });
 
   if (!data) {
-    throw new Response(null, {status: 404});
+    throw new Response('No data found', {status: 404});
   }
 
   return new Response(
@@ -50,6 +51,36 @@ export async function loader({request, context: {storefront}}: LoaderArgs) {
   );
 }
 
+export const ErrorBoundaryV1: ErrorBoundaryComponent = ({error}) => {
+  console.error(error);
+
+  return <div>There was an error.</div>;
+};
+
+export function CatchBoundary() {
+  const caught = useCatch();
+  console.error(caught);
+
+  return (
+    <div>
+      There was an error. Status: {caught.status}. Message:{' '}
+      {caught.data?.message}
+    </div>
+  );
+}
+
+export function ErrorBoundary() {
+  const error = useRouteError();
+
+  if (isRouteErrorResponse(error)) {
+    console.error(error.status, error.statusText, error.data);
+    return <div>Route Error</div>;
+  } else {
+    console.error((error as Error).message);
+    return <div>Thrown Error</div>;
+  }
+}
+
 function xmlEncode(string: string) {
   return string.replace(/[&<>'"]/g, (char) => `&#${char.charCodeAt(0)};`);
 }