@shopify/cli-hydrogen 0.0.0-next-744c490-20230315110711

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

@@ -0,0 +1,74 @@
+import {
+  type MetaFunction,
+  type ActionFunction,
+  type LoaderArgs,
+  redirect,
+  json,
+} from '@shopify/remix-oxygen';
+import {Form, Link, useActionData, useLoaderData} from '@remix-run/react';
+import {useState} from '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');
+  }
+}
+
+type ActionData = {
+  formError?: string;
+};
+
+const badRequest = (data: ActionData) => json(data, {status: 400});
+
+export const action: ActionFunction = async ({request, context, params}) => {
+  const formData = await request.formData();
+
+  const email = formData.get('email');
+  const password = formData.get('password');
+
+  if (
+    !email ||
+    !password ||
+    typeof email !== 'string' ||
+    typeof password !== 'string'
+  ) {
+    return badRequest({
+      formError: 'Please provide both an email and a password.',
+    });
+  }
+
+  // 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>
+  );
+}

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

@@ -0,0 +1,74 @@
+import {
+  type MetaFunction,
+  type ActionFunction,
+  type LoaderArgs,
+  redirect,
+  json,
+} from '@shopify/remix-oxygen';
+import {Form, Link, useActionData, useLoaderData} from '@remix-run/react';
+import {useState} from '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');
+  }
+}
+
+type ActionData = {
+  formError?: string;
+};
+
+const badRequest = (data: ActionData) => json(data, {status: 400});
+
+export const action: ActionFunction = async ({request, context, params}) => {
+  const formData = await request.formData();
+
+  const email = formData.get('email');
+  const password = formData.get('password');
+
+  if (
+    !email ||
+    !password ||
+    typeof email !== 'string' ||
+    typeof password !== 'string'
+  ) {
+    return badRequest({
+      formError: 'Please provide both an email and a password.',
+    });
+  }
+
+  // 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>
+  );
+}

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

@@ -0,0 +1,41 @@
+import {Await, useMatches} from '@remix-run/react';
+import {Suspense} from 'react';
+import {flattenConnection} from '@shopify/hydrogen';
+import type {Cart as CartType} from '@shopify/hydrogen/storefront-api-types';
+
+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}>
+        {(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>
+  );
+}

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

@@ -0,0 +1,65 @@
+import {json, type LoaderArgs} from '@shopify/remix-oxygen';
+import {useLoaderData} 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) {
+  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>
+      ))}
+    </>
+  );
+}
+
+const COLLECTION_QUERY = `#graphql
+  query CollectionDetails(
+    $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/graphiql.tsx

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,7 @@
+export default function Index() {
+  return (
+    <p>
+      Edit this route in <em>app/routes/index.tsx</em>.
+    </p>
+  );
+}

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

@@ -0,0 +1,74 @@
+import {
+  json,
+  type MetaFunction,
+  type LoaderArgs,
+  SerializeFrom,
+} from '@shopify/remix-oxygen';
+import {useLoaderData} from '@remix-run/react';
+import invariant from 'tiny-invariant';
+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');
+
+  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 meta: MetaFunction = ({data}) => {
+  const {title, description} = data?.page.seo ?? {};
+
+  return {
+    title,
+    description,
+  };
+};
+
+export default function Page() {
+  const {page} = useLoaderData<typeof loader>();
+
+  return (
+    <>
+      <header>
+        <h1>{page.title}</h1>
+      </header>
+      <main dangerouslySetInnerHTML={{__html: page.body}} />
+    </>
+  );
+}
+
+const PAGE_QUERY = `#graphql
+    query PageDetails($language: LanguageCode, $handle: String!)
+    @inContext(language: $language) {
+      page(handle: $handle) {
+        id
+        title
+        body
+        seo {
+          description
+          title
+        }
+      }
+    }
+  `;

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

@@ -0,0 +1,87 @@
+import {json, type MetaFunction, type LoaderArgs} from '@shopify/remix-oxygen';
+import {useLoaderData} from '@remix-run/react';
+
+import {ShopPolicy} from '@shopify/hydrogen/storefront-api-types';
+
+export async function loader({request, params, context}: LoaderArgs) {
+  const handle = params.policyHandle;
+
+  if (!handle) {
+    throw new Response(null, {status: 404});
+  }
+
+  const policyName = handle.replace(/-([a-z])/g, (_: unknown, m1: string) =>
+    m1.toUpperCase(),
+  );
+
+  const data = await context.storefront.query<{
+    shop: Record<string, ShopPolicy>;
+  }>(POLICY_CONTENT_QUERY, {
+    variables: {
+      privacyPolicy: false,
+      shippingPolicy: false,
+      termsOfService: false,
+      refundPolicy: false,
+      [policyName]: true,
+      language: context.storefront.i18n?.language,
+    },
+  });
+
+  const policy = data.shop?.[policyName];
+
+  if (!policy) {
+    throw new Response(null, {status: 404});
+  }
+
+  return json({policy});
+}
+
+export const meta: MetaFunction<typeof loader> = ({data}) => {
+  return {
+    title: data?.policy?.title ?? 'Policies',
+  };
+};
+
+export default function Policies() {
+  const {policy} = useLoaderData<typeof loader>();
+
+  return (
+    <>
+      <h1>{policy.title}</h1>
+      <div dangerouslySetInnerHTML={{__html: policy.body}} />
+    </>
+  );
+}
+
+const POLICY_CONTENT_QUERY = `#graphql
+  fragment Policy on ShopPolicy {
+    body
+    handle
+    id
+    title
+    url
+  }
+
+  query PoliciesQuery(
+    $language: LanguageCode
+    $privacyPolicy: Boolean!
+    $shippingPolicy: Boolean!
+    $termsOfService: Boolean!
+    $refundPolicy: Boolean!
+  ) @inContext(language: $language) {
+    shop {
+      privacyPolicy @include(if: $privacyPolicy) {
+        ...Policy
+      }
+      shippingPolicy @include(if: $shippingPolicy) {
+        ...Policy
+      }
+      termsOfService @include(if: $termsOfService) {
+        ...Policy
+      }
+      refundPolicy @include(if: $refundPolicy) {
+        ...Policy
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,67 @@
+import {json, type LoaderArgs} from '@shopify/remix-oxygen';
+import {useLoaderData, Link} from '@remix-run/react';
+import type {ShopPolicy} from '@shopify/hydrogen/storefront-api-types';
+
+export async function loader({context: {storefront}}: LoaderArgs) {
+  const data = await storefront.query<{
+    shop: Record<string, ShopPolicy>;
+  }>(POLICIES_QUERY);
+
+  const policies = Object.values(data.shop || {});
+
+  if (policies.length === 0) {
+    throw new Response('Not found', {status: 404});
+  }
+
+  return json({
+    policies,
+  });
+}
+
+export default function Policies() {
+  const {policies} = useLoaderData<typeof loader>();
+
+  return (
+    <>
+      {policies.map((policy) => {
+        return (
+          policy && (
+            <Link key={policy.id} to={`/policies/${policy.handle}`}>
+              {policy.title}
+            </Link>
+          )
+        );
+      })}
+    </>
+  );
+}
+
+const POLICIES_QUERY = `#graphql
+  fragment Policy on ShopPolicy {
+    id
+    title
+    handle
+  }
+
+  query PoliciesQuery {
+    shop {
+      privacyPolicy {
+        ...Policy
+      }
+      shippingPolicy {
+        ...Policy
+      }
+      termsOfService {
+        ...Policy
+      }
+      refundPolicy {
+        ...Policy
+      }
+      subscriptionPolicy {
+        id
+        title
+        handle
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,57 @@
+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';
+
+export async function loader({params, context}: LoaderArgs) {
+  const {productHandle} = params;
+
+  const {product} = await context.storefront.query<{
+    product: ProductType & {selectedVariant?: ProductVariant};
+  }>(PRODUCT_QUERY, {
+    variables: {
+      handle: productHandle,
+      country: context.storefront.i18n?.country,
+      language: context.storefront.i18n?.language,
+    },
+  });
+
+  if (!product?.id) {
+    throw new Response(null, {status: 404});
+  }
+
+  return defer({
+    product,
+  });
+}
+
+export default function Product() {
+  const {product} = useLoaderData<typeof loader>();
+  const {title, vendor, descriptionHtml} = product;
+
+  return (
+    <>
+      <h1>{title}</h1>
+      <h2>{vendor}</h2>
+      <div dangerouslySetInnerHTML={{__html: descriptionHtml}} />
+    </>
+  );
+}
+
+const PRODUCT_QUERY = `#graphql
+
+  query Product(
+    $country: CountryCode
+    $language: LanguageCode
+    $handle: String!
+  ) @inContext(country: $country, language: $language) {
+    product(handle: $handle) {
+      id
+      title
+      descriptionHtml
+      vendor
+    }
+  }
+`;

package/dist/hooks/init.d.ts

@@ -0,0 +1,5 @@
+import { Hook } from '@oclif/core';
+
+declare const hook: Hook<'init'>;
+
+export { hook as default };

package/dist/hooks/init.js

@@ -0,0 +1,18 @@
+import { spawnSync } from 'child_process';
+import { output } from '@shopify/cli-kit';
+
+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(
+      `Restarting CLI process with ${EXPERIMENTAL_VM_MODULES_FLAG} flag.`
+    );
+    const [command, ...args] = process.argv;
+    args.unshift(EXPERIMENTAL_VM_MODULES_FLAG);
+    spawnSync(command, args, { stdio: "inherit" });
+    process.exit(0);
+  }
+};
+var init_default = hook;
+
+export { init_default as default };

package/dist/utils/check-lockfile.d.ts

@@ -0,0 +1,3 @@
+declare function checkLockfileStatus(directory: string): Promise<void>;
+
+export { checkLockfileStatus };

package/dist/utils/check-lockfile.js

@@ -0,0 +1,78 @@
+import { file, path, git } from '@shopify/cli-kit';
+import { renderWarning } from '@shopify/cli-kit/node/ui';
+import { lockfiles } from '@shopify/cli-kit/node/node-package-manager';
+
+function missingLockfileWarning() {
+  renderWarning({
+    headline: "No lockfile found",
+    body: `If you don\u2019t commit a lockfile, then your app might install the wrong package versions when deploying. To avoid versioning issues, generate a new lockfile and commit it to your repository.`,
+    nextSteps: [
+      [
+        "Generate a lockfile. Run",
+        {
+          command: "npm|yarn|pnpm install"
+        }
+      ],
+      "Commit the new file to your repository"
+    ]
+  });
+}
+function multipleLockfilesWarning(lockfiles2) {
+  const packageManagers = {
+    "yarn.lock": "yarn",
+    "package-lock.json": "npm",
+    "pnpm-lock.yaml": "pnpm"
+  };
+  const lockfileList = lockfiles2.map((lockfile) => {
+    return `${lockfile} (created by ${packageManagers[lockfile]})`;
+  });
+  renderWarning({
+    headline: "Multiple lockfiles found",
+    body: [
+      `Your project contains more than one lockfile. This can cause version conflicts when installing and deploying your app. The following lockfiles were detected:
+`,
+      { list: { items: lockfileList } }
+    ],
+    nextSteps: [
+      "Delete any unneeded lockfiles",
+      "Commit the change to your repository"
+    ]
+  });
+}
+function lockfileIgnoredWarning(lockfile) {
+  renderWarning({
+    headline: "Lockfile ignored by Git",
+    body: `Your project\u2019s lockfile isn\u2019t being tracked by Git. If you don\u2019t commit a lockfile, then your app might install the wrong package versions when deploying.`,
+    nextSteps: [
+      `In your project\u2019s .gitignore file, delete any references to ${lockfile}`,
+      "Commit the change to your repository"
+    ]
+  });
+}
+async function checkLockfileStatus(directory) {
+  if (process.env.LOCAL_DEV)
+    return;
+  const availableLockfiles = [];
+  for (const lockFileName of lockfiles) {
+    if (await file.exists(path.resolve(directory, lockFileName))) {
+      availableLockfiles.push(lockFileName);
+    }
+  }
+  if (!availableLockfiles.length) {
+    return missingLockfileWarning();
+  }
+  if (availableLockfiles.length > 1) {
+    return multipleLockfilesWarning(availableLockfiles);
+  }
+  try {
+    const repo = git.factory(directory);
+    const lockfile = availableLockfiles[0];
+    const ignoredLockfile = await repo.checkIgnore([lockfile]);
+    if (ignoredLockfile.length) {
+      lockfileIgnoredWarning(lockfile);
+    }
+  } catch {
+  }
+}
+
+export { checkLockfileStatus };

package/dist/utils/check-lockfile.test.d.ts

@@ -0,0 +1 @@
+