@shopify/cli-hydrogen 4.0.8 → 4.1.0

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,
@@ -29,12 +30,12 @@ export async function loader({request, context: {storefront}}: LoaderArgs) {
   const data = await storefront.query<SitemapQueryData>(SITEMAP_QUERY, {
     variables: {
       urlLimits: MAX_URLS,
-      language: storefront.i18n?.language,
+      language: storefront.i18n.language,
     },
   });
 
   if (!data) {
-    throw new Response(null, {status: 404});
+    throw new Response('No data found', {status: 404});
   }
 
   return new Response(
@@ -50,6 +51,40 @@ 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)};`);
+}
+
 function shopSitemap({
   data,
   baseUrl,
@@ -60,25 +95,25 @@ function shopSitemap({
   const productsData = flattenConnection(data.products)
     .filter((product) => product.onlineStoreUrl)
     .map((product) => {
-      const url = `${baseUrl}/products/${product.handle}`;
+      const url = `${baseUrl}/products/${xmlEncode(product.handle)}`;
 
       const finalObject: ProductEntry = {
         url,
-        lastMod: product.updatedAt!,
+        lastMod: product.updatedAt,
         changeFreq: 'daily',
       };
 
       if (product.featuredImage?.url) {
         finalObject.image = {
-          url: product.featuredImage!.url,
+          url: xmlEncode(product.featuredImage.url),
         };
 
         if (product.title) {
-          finalObject.image.title = product.title;
+          finalObject.image.title = xmlEncode(product.title);
         }
 
-        if (product.featuredImage!.altText) {
-          finalObject.image.caption = product.featuredImage!.altText;
+        if (product.featuredImage.altText) {
+          finalObject.image.caption = xmlEncode(product.featuredImage.altText);
         }
       }
 
@@ -116,7 +151,7 @@ function shopSitemap({
       xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
       xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
     >
-      ${urlsDatas.map((url) => renderUrlTag(url!)).join('')}
+      ${urlsDatas.map((url) => renderUrlTag(url)).join('')}
     </urlset>`;
 }
 

package/dist/generator-templates/routes/account/login.tsx

@@ -1,12 +1,15 @@
 import {
-  type MetaFunction,
   type ActionFunction,
   type LoaderArgs,
+  type ErrorBoundaryComponent,
   redirect,
-  json,
 } from '@shopify/remix-oxygen';
-import {Form, Link, useActionData, useLoaderData} from '@remix-run/react';
-import {useState} from 'react';
+import {
+  Form,
+  useCatch,
+  useRouteError,
+  isRouteErrorResponse,
+} from '@remix-run/react';
 
 export async function loader({context, params}: LoaderArgs) {
   const customerAccessToken = await context.session.get('customerAccessToken');
@@ -14,15 +17,11 @@ export async function loader({context, params}: LoaderArgs) {
   if (customerAccessToken) {
     return redirect(params.lang ? `${params.lang}/account` : '/account');
   }
-}
 
-type ActionData = {
-  formError?: string;
-};
-
-const badRequest = (data: ActionData) => json(data, {status: 400});
+  return new Response(null);
+}
 
-export const action: ActionFunction = async ({request, context, params}) => {
+export const action: ActionFunction = async ({request}) => {
   const formData = await request.formData();
 
   const email = formData.get('email');
@@ -34,8 +33,8 @@ export const action: ActionFunction = async ({request, context, params}) => {
     typeof email !== 'string' ||
     typeof password !== 'string'
   ) {
-    return badRequest({
-      formError: 'Please provide both an email and a password.',
+    throw new Response('Please provide both an email and a password.', {
+      status: 400,
     });
   }
 
@@ -72,3 +71,33 @@ export default function Login() {
     </Form>
   );
 }
+
+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>;
+  }
+}

package/dist/generator-templates/routes/account/register.tsx

@@ -1,12 +1,15 @@
 import {
-  type MetaFunction,
   type ActionFunction,
   type LoaderArgs,
+  type ErrorBoundaryComponent,
   redirect,
-  json,
 } from '@shopify/remix-oxygen';
-import {Form, Link, useActionData, useLoaderData} from '@remix-run/react';
-import {useState} from 'react';
+import {
+  Form,
+  useCatch,
+  useRouteError,
+  isRouteErrorResponse,
+} from '@remix-run/react';
 
 export async function loader({context, params}: LoaderArgs) {
   const customerAccessToken = await context.session.get('customerAccessToken');
@@ -14,15 +17,11 @@ export async function loader({context, params}: LoaderArgs) {
   if (customerAccessToken) {
     return redirect(params.lang ? `${params.lang}/account` : '/account');
   }
-}
 
-type ActionData = {
-  formError?: string;
-};
-
-const badRequest = (data: ActionData) => json(data, {status: 400});
+  return new Response(null);
+}
 
-export const action: ActionFunction = async ({request, context, params}) => {
+export const action: ActionFunction = async ({request}) => {
   const formData = await request.formData();
 
   const email = formData.get('email');
@@ -34,8 +33,8 @@ export const action: ActionFunction = async ({request, context, params}) => {
     typeof email !== 'string' ||
     typeof password !== 'string'
   ) {
-    return badRequest({
-      formError: 'Please provide both an email and a password.',
+    throw new Response('Please provide both an email and a password.', {
+      status: 404,
     });
   }
 
@@ -72,3 +71,33 @@ export default function Register() {
     </Form>
   );
 }
+
+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>;
+  }
+}

package/dist/generator-templates/routes/cart.tsx

@@ -1,7 +1,14 @@
-import {Await, useMatches} from '@remix-run/react';
+import {
+  Await,
+  useMatches,
+  useCatch,
+  useRouteError,
+  isRouteErrorResponse,
+} from '@remix-run/react';
 import {Suspense} from 'react';
 import {flattenConnection} from '@shopify/hydrogen';
 import type {Cart as CartType} from '@shopify/hydrogen/storefront-api-types';
+import {type ErrorBoundaryComponent} from '@shopify/remix-oxygen';
 
 export async function action() {
   // @TODO implement cart action
@@ -11,7 +18,10 @@ export default function CartRoute() {
   const [root] = useMatches();
   return (
     <Suspense fallback="loading">
-      <Await resolve={root.data?.cart as CartType}>
+      <Await
+        resolve={root.data?.cart as CartType}
+        errorElement={<div>An error occurred</div>}
+      >
         {(cart) => {
           const linesCount = Boolean(cart?.lines?.edges?.length || 0);
           if (!linesCount) {
@@ -39,3 +49,33 @@ export default function CartRoute() {
     </Suspense>
   );
 }
+
+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>;
+  }
+}

package/dist/generator-templates/routes/collections/$collectionHandle.tsx

@@ -1,9 +1,18 @@
-import {json, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData} from '@remix-run/react';
+import {
+  json,
+  type LoaderArgs,
+  type ErrorBoundaryComponent,
+} from '@shopify/remix-oxygen';
+import {
+  useLoaderData,
+  Link,
+  useCatch,
+  useRouteError,
+  isRouteErrorResponse,
+} from '@remix-run/react';
 import type {Collection as CollectionType} from '@shopify/hydrogen/storefront-api-types';
-import {Link} from '@remix-run/react';
 
-export async function loader({params, request, context}: LoaderArgs) {
+export async function loader({params, context}: LoaderArgs) {
   const {collectionHandle} = params;
 
   const {collection} = await context.storefront.query<{
@@ -38,8 +47,38 @@ export default function Collection() {
   );
 }
 
+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>;
+  }
+}
+
 const COLLECTION_QUERY = `#graphql
-  query CollectionDetails(
+  query collection_details(
     $handle: String!
     $country: CountryCode
     $language: LanguageCode

package/dist/generator-templates/routes/index.tsx

@@ -1,3 +1,6 @@
+import {type ErrorBoundaryComponent} from '@shopify/remix-oxygen';
+import {useCatch, useRouteError, isRouteErrorResponse} from '@remix-run/react';
+
 export default function Index() {
   return (
     <p>
@@ -5,3 +8,33 @@ export default function Index() {
     </p>
   );
 }
+
+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>;
+  }
+}

package/dist/generator-templates/routes/pages/$pageHandle.tsx

@@ -2,15 +2,22 @@ import {
   json,
   type MetaFunction,
   type LoaderArgs,
-  SerializeFrom,
+  type ErrorBoundaryComponent,
 } from '@shopify/remix-oxygen';
-import {useLoaderData} from '@remix-run/react';
-import invariant from 'tiny-invariant';
+import {
+  useLoaderData,
+  type V2_MetaFunction,
+  useCatch,
+  useRouteError,
+  isRouteErrorResponse,
+} from '@remix-run/react';
 import type {Page as PageType} from '@shopify/hydrogen/storefront-api-types';
 import type {SeoHandleFunction} from '@shopify/hydrogen';
 
 export async function loader({params, context}: LoaderArgs) {
-  invariant(params.pageHandle, 'Missing page handle');
+  if (!params.pageHandle) {
+    throw new Error('Missing page handle');
+  }
 
   const {page} = await context.storefront.query<{page: PageType}>(PAGE_QUERY, {
     variables: {
@@ -36,13 +43,14 @@ export const handle = {
   seo,
 };
 
-export const meta: MetaFunction = ({data}) => {
+export const metaV1: MetaFunction = ({data}) => {
   const {title, description} = data?.page.seo ?? {};
+  return {title, description};
+};
 
-  return {
-    title,
-    description,
-  };
+export const meta: V2_MetaFunction = ({data}) => {
+  const {title, description} = data?.page.seo ?? {};
+  return [{title}, {name: 'description', content: description}];
 };
 
 export default function Page() {
@@ -58,8 +66,38 @@ export default function Page() {
   );
 }
 
+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>;
+  }
+}
+
 const PAGE_QUERY = `#graphql
-    query PageDetails($language: LanguageCode, $handle: String!)
+    query page_details($language: LanguageCode, $handle: String!)
     @inContext(language: $language) {
       page(handle: $handle) {
         id