@shopify/cli-hydrogen 5.0.2 → 5.1.0

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

@@ -1,103 +0,0 @@
-import {
-  type ActionFunction,
-  type LoaderArgs,
-  type ErrorBoundaryComponent,
-  redirect,
-} from '@shopify/remix-oxygen';
-import {
-  Form,
-  useCatch,
-  useRouteError,
-  isRouteErrorResponse,
-} from '@remix-run/react';
-
-export async function loader({context, params}: LoaderArgs) {
-  const customerAccessToken = await context.session.get('customerAccessToken');
-
-  if (customerAccessToken) {
-    return redirect(params.lang ? `${params.lang}/account` : '/account');
-  }
-
-  return new Response(null);
-}
-
-export const action: ActionFunction = async ({request}) => {
-  const formData = await request.formData();
-
-  const email = formData.get('email');
-  const password = formData.get('password');
-
-  if (
-    !email ||
-    !password ||
-    typeof email !== 'string' ||
-    typeof password !== 'string'
-  ) {
-    throw new Response('Please provide both an email and a password.', {
-      status: 400,
-    });
-  }
-
-  // TODO Add login logic
-};
-
-export default function Login() {
-  return (
-    <Form method="post">
-      <input
-        id="email"
-        name="email"
-        type="email"
-        autoComplete="email"
-        required
-        placeholder="Email address"
-        aria-label="Email address"
-        // eslint-disable-next-line jsx-a11y/no-autofocus
-        autoFocus
-      />
-      <input
-        id="password"
-        name="password"
-        type="password"
-        autoComplete="current-password"
-        placeholder="Password"
-        aria-label="Password"
-        minLength={8}
-        required
-        // eslint-disable-next-line jsx-a11y/no-autofocus
-        autoFocus
-      />
-      <button type="submit">Sign in</button>
-    </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,103 +0,0 @@
-import {
-  type ActionFunction,
-  type LoaderArgs,
-  type ErrorBoundaryComponent,
-  redirect,
-} from '@shopify/remix-oxygen';
-import {
-  Form,
-  useCatch,
-  useRouteError,
-  isRouteErrorResponse,
-} from '@remix-run/react';
-
-export async function loader({context, params}: LoaderArgs) {
-  const customerAccessToken = await context.session.get('customerAccessToken');
-
-  if (customerAccessToken) {
-    return redirect(params.lang ? `${params.lang}/account` : '/account');
-  }
-
-  return new Response(null);
-}
-
-export const action: ActionFunction = async ({request}) => {
-  const formData = await request.formData();
-
-  const email = formData.get('email');
-  const password = formData.get('password');
-
-  if (
-    !email ||
-    !password ||
-    typeof email !== 'string' ||
-    typeof password !== 'string'
-  ) {
-    throw new Response('Please provide both an email and a password.', {
-      status: 404,
-    });
-  }
-
-  // TODO Add register logic
-};
-
-export default function Register() {
-  return (
-    <Form method="post">
-      <input
-        id="email"
-        name="email"
-        type="email"
-        autoComplete="email"
-        required
-        placeholder="Email address"
-        aria-label="Email address"
-        // eslint-disable-next-line jsx-a11y/no-autofocus
-        autoFocus
-      />
-      <input
-        id="password"
-        name="password"
-        type="password"
-        autoComplete="current-password"
-        placeholder="Password"
-        aria-label="Password"
-        minLength={8}
-        required
-        // eslint-disable-next-line jsx-a11y/no-autofocus
-        autoFocus
-      />
-      <button type="submit">Sign up</button>
-    </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,81 +0,0 @@
-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
-}
-
-export default function CartRoute() {
-  const [root] = useMatches();
-  return (
-    <Suspense fallback="loading">
-      <Await
-        resolve={root.data?.cart as CartType}
-        errorElement={<div>An error occurred</div>}
-      >
-        {(cart) => {
-          const linesCount = Boolean(cart?.lines?.edges?.length || 0);
-          if (!linesCount) {
-            return (
-              <p>Looks like you haven&rsquo;t added anything to your cart.</p>
-            );
-          }
-
-          const cartLines = cart?.lines ? flattenConnection(cart?.lines) : [];
-
-          return (
-            <>
-              <h1>Cart</h1>
-              <ul>
-                {cartLines.map((line) => (
-                  <div key={line.id}>
-                    <h2>{line?.merchandise?.title}</h2>
-                  </div>
-                ))}
-              </ul>
-            </>
-          );
-        }}
-      </Await>
-    </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,104 +0,0 @@
-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';
-
-export async function loader({params, context}: LoaderArgs) {
-  const {collectionHandle} = params;
-
-  const {collection} = await context.storefront.query<{
-    collection: CollectionType;
-  }>(COLLECTION_QUERY, {
-    variables: {
-      handle: collectionHandle,
-      country: context.storefront.i18n?.country,
-      language: context.storefront.i18n?.language,
-    },
-  });
-
-  if (!collection) {
-    throw new Response(null, {status: 404});
-  }
-
-  return json({collection});
-}
-
-export default function Collection() {
-  const {collection} = useLoaderData<typeof loader>();
-
-  return (
-    <>
-      <h1>{collection.title}</h1>
-      {collection.products.nodes.map((product) => (
-        <div key={product.id}>
-          <Link to={`/products/${product.handle}`}>{product.title}</Link>
-        </div>
-      ))}
-    </>
-  );
-}
-
-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 collection_details(
-    $handle: String!
-    $country: CountryCode
-    $language: LanguageCode
-
-  ) @inContext(country: $country, language: $language) {
-    collection(handle: $handle) {
-      id
-      handle
-      title
-      description
-      products(
-        first: 100,
-      ) {
-        nodes {
-          title
-          id
-          handle
-        }
-      }
-    }
-
-  }
-`;

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

@@ -1,102 +0,0 @@
-import {
-  useLoaderData,
-  Link,
-  useRouteError,
-  isRouteErrorResponse,
-  useCatch,
-} from '@remix-run/react';
-import {
-  json,
-  type LoaderArgs,
-  type ErrorBoundaryComponent,
-} from '@shopify/remix-oxygen';
-import type {CollectionConnection} from '@shopify/hydrogen/storefront-api-types';
-import {Image} from '@shopify/hydrogen';
-
-export async function loader({context}: LoaderArgs) {
-  const {collectionConnection} = await context.storefront.query<{
-    collectionConnection: CollectionConnection;
-  }>(COLLECTIONS_QUERY, {
-    variables: {
-      country: context.storefront.i18n?.country,
-      language: context.storefront.i18n?.language,
-    },
-  });
-
-  return json({collectionConnection});
-}
-
-export default function Collections() {
-  const {collectionConnection} = useLoaderData<typeof loader>();
-
-  return (
-    <>
-      {collectionConnection.nodes.map((collection, collectionIndex) => {
-        return (
-          <Link key={collection.id} to={`/collections/${collection.handle}`}>
-            <h3>{collection.title}</h3>
-            {collection.image && (
-              <Image
-                data={collection.image}
-                loading={collectionIndex === 0 ? 'eager' : undefined}
-              />
-            )}
-          </Link>
-        );
-      })}
-    </>
-  );
-}
-
-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 COLLECTIONS_QUERY = `#graphql
-  query collection_index(
-    $country: CountryCode
-    $language: LanguageCode
-  ) @inContext(country: $country, language: $language)
-  {
-    collectionConnection: collections(first: 250) {
-      nodes {
-        id
-        title
-        handle
-        image {
-          id
-          url
-          altText
-          width
-          height
-        }
-      }
-    }
-  }
-`;

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

@@ -1,10 +0,0 @@
-import {graphiqlLoader} from '@shopify/hydrogen';
-import {redirect, type LoaderArgs} from '@shopify/remix-oxygen';
-
-export async function loader(args: LoaderArgs) {
-  if (process.env.NODE_ENV === 'development') {
-    return graphiqlLoader(args);
-  }
-
-  return redirect('/');
-}

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

@@ -1,40 +0,0 @@
-import {type ErrorBoundaryComponent} from '@shopify/remix-oxygen';
-import {useCatch, useRouteError, isRouteErrorResponse} from '@remix-run/react';
-
-export default function Index() {
-  return (
-    <p>
-      Edit this route in <em>app/routes/index.tsx</em>.
-    </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

@@ -1,112 +0,0 @@
-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 type {Page as PageType} from '@shopify/hydrogen/storefront-api-types';
-import type {SeoHandleFunction} from '@shopify/hydrogen';
-
-export async function loader({params, context}: LoaderArgs) {
-  if (!params.pageHandle) {
-    throw new Error('Missing page handle');
-  }
-
-  const {page} = await context.storefront.query<{page: PageType}>(PAGE_QUERY, {
-    variables: {
-      handle: params.pageHandle,
-    },
-  });
-
-  if (!page) {
-    throw new Response('Not Found', {
-      status: 404,
-    });
-  }
-
-  return json({page});
-}
-
-const seo: SeoHandleFunction<typeof loader> = ({data}) => ({
-  title: data?.page?.seo?.title,
-  description: data?.page?.seo?.description,
-});
-
-export const handle = {
-  seo,
-};
-
-export const metaV1: MetaFunction = ({data}) => {
-  const {title, description} = data?.page.seo ?? {};
-  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() {
-  const {page} = useLoaderData<typeof loader>();
-
-  return (
-    <>
-      <header>
-        <h1>{page.title}</h1>
-      </header>
-      <main dangerouslySetInnerHTML={{__html: page.body}} />
-    </>
-  );
-}
-
-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 page_details($language: LanguageCode, $handle: String!)
-    @inContext(language: $language) {
-      page(handle: $handle) {
-        id
-        title
-        body
-        seo {
-          description
-          title
-        }
-      }
-    }
-  `;