@shopify/cli-hydrogen 4.0.9 → 4.1.0

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

package/dist/generator-templates/routes/policies/$policyHandle.tsx

@@ -1,21 +1,31 @@
-import {json, type MetaFunction, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData} from '@remix-run/react';
+import {
+  json,
+  type MetaFunction,
+  type LoaderArgs,
+  type ErrorBoundaryComponent,
+} from '@shopify/remix-oxygen';
+import {
+  useLoaderData,
+  type V2_MetaFunction,
+  useCatch,
+  useRouteError,
+  isRouteErrorResponse,
+} from '@remix-run/react';
+import {Shop} from '@shopify/hydrogen/storefront-api-types';
 
-import {ShopPolicy} from '@shopify/hydrogen/storefront-api-types';
-
-export async function loader({request, params, context}: LoaderArgs) {
+export async function loader({params, context}: LoaderArgs) {
   const handle = params.policyHandle;
 
   if (!handle) {
-    throw new Response(null, {status: 404});
+    throw new Response('No handle was passed in', {status: 404});
   }
 
   const policyName = handle.replace(/-([a-z])/g, (_: unknown, m1: string) =>
     m1.toUpperCase(),
-  );
+  ) as SelectedPolicies;
 
   const data = await context.storefront.query<{
-    shop: Record<string, ShopPolicy>;
+    shop: Pick<Shop, SelectedPolicies>;
   }>(POLICY_CONTENT_QUERY, {
     variables: {
       privacyPolicy: false,
@@ -30,16 +40,20 @@ export async function loader({request, params, context}: LoaderArgs) {
   const policy = data.shop?.[policyName];
 
   if (!policy) {
-    throw new Response(null, {status: 404});
+    throw new Response('Could not find the policy', {status: 404});
   }
 
   return json({policy});
 }
 
-export const meta: MetaFunction<typeof loader> = ({data}) => {
-  return {
-    title: data?.policy?.title ?? 'Policies',
-  };
+export const metaV1: MetaFunction<typeof loader> = ({data}) => {
+  const title = data?.policy?.title ?? 'Policies';
+  return {title};
+};
+
+export const meta: V2_MetaFunction<typeof loader> = ({data}) => {
+  const title = data?.policy?.title ?? 'Policies';
+  return [{title}];
 };
 
 export default function Policies() {
@@ -53,6 +67,36 @@ export default function Policies() {
   );
 }
 
+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 POLICY_CONTENT_QUERY = `#graphql
   fragment Policy on ShopPolicy {
     body
@@ -62,7 +106,7 @@ const POLICY_CONTENT_QUERY = `#graphql
     url
   }
 
-  query PoliciesQuery(
+  query policy_query(
     $language: LanguageCode
     $privacyPolicy: Boolean!
     $shippingPolicy: Boolean!
@@ -85,3 +129,12 @@ const POLICY_CONTENT_QUERY = `#graphql
     }
   }
 `;
+
+const policies = [
+  'privacyPolicy',
+  'shippingPolicy',
+  'refundPolicy',
+  'termsOfService',
+] as const;
+
+type SelectedPolicies = (typeof policies)[number];

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

@@ -1,10 +1,20 @@
-import {json, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, Link} from '@remix-run/react';
-import type {ShopPolicy} from '@shopify/hydrogen/storefront-api-types';
+import {
+  json,
+  type LoaderArgs,
+  type ErrorBoundaryComponent,
+} from '@shopify/remix-oxygen';
+import {
+  useLoaderData,
+  Link,
+  useCatch,
+  useRouteError,
+  isRouteErrorResponse,
+} from '@remix-run/react';
+import type {Shop} from '@shopify/hydrogen/storefront-api-types';
 
 export async function loader({context: {storefront}}: LoaderArgs) {
   const data = await storefront.query<{
-    shop: Record<string, ShopPolicy>;
+    shop: Pick<Shop, SelectedPolicies>;
   }>(POLICIES_QUERY);
 
   const policies = Object.values(data.shop || {});
@@ -36,6 +46,36 @@ export default function Policies() {
   );
 }
 
+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 POLICIES_QUERY = `#graphql
   fragment Policy on ShopPolicy {
     id
@@ -65,3 +105,13 @@ const POLICIES_QUERY = `#graphql
     }
   }
 `;
+
+const policies = [
+  'privacyPolicy',
+  'shippingPolicy',
+  'refundPolicy',
+  'termsOfService',
+  'subscriptionPolicy',
+] as const;
+
+type SelectedPolicies = (typeof policies)[number];

package/dist/generator-templates/routes/products/$productHandle.tsx

@@ -1,15 +1,21 @@
-import {defer, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData} from '@remix-run/react';
-import type {
-  ProductVariant,
-  Product as ProductType,
-} from '@shopify/hydrogen/storefront-api-types';
+import {
+  defer,
+  type LoaderArgs,
+  type ErrorBoundaryComponent,
+} from '@shopify/remix-oxygen';
+import {
+  useLoaderData,
+  useCatch,
+  useRouteError,
+  isRouteErrorResponse,
+} from '@remix-run/react';
+import type {Product as ProductType} from '@shopify/hydrogen/storefront-api-types';
 
 export async function loader({params, context}: LoaderArgs) {
   const {productHandle} = params;
 
   const {product} = await context.storefront.query<{
-    product: ProductType & {selectedVariant?: ProductVariant};
+    product: Pick<ProductType, 'id' | 'title' | 'descriptionHtml' | 'vendor'>;
   }>(PRODUCT_QUERY, {
     variables: {
       handle: productHandle,
@@ -40,9 +46,38 @@ export default function Product() {
   );
 }
 
-const PRODUCT_QUERY = `#graphql
+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>;
+  }
+}
 
-  query Product(
+const PRODUCT_QUERY = `#graphql
+  query product_query(
     $country: CountryCode
     $language: LanguageCode
     $handle: String!

package/dist/hooks/init.js

@@ -1,10 +1,10 @@
 import { spawnSync } from 'child_process';
-import { output } from '@shopify/cli-kit';
+import { outputDebug } from '@shopify/cli-kit/node/output';
 
 const EXPERIMENTAL_VM_MODULES_FLAG = "--experimental-vm-modules";
 const hook = async function(options) {
   if (options.id && ["hydrogen:dev", "hydrogen:preview"].includes(options.id) && !process.execArgv.includes(EXPERIMENTAL_VM_MODULES_FLAG) && !(process.env.NODE_OPTIONS ?? "").includes(EXPERIMENTAL_VM_MODULES_FLAG)) {
-    output.debug(
+    outputDebug(
       `Restarting CLI process with ${EXPERIMENTAL_VM_MODULES_FLAG} flag.`
     );
     const [command, ...args] = process.argv;