@shopify/cli-hydrogen 3.27.0 → 4.0.0-alpha.1

package/dist/templates/demo-store/tests/cart.test.ts

@@ -0,0 +1,70 @@
+import {test, expect} from '@playwright/test';
+import {waitForLoaders} from './utils';
+
+test.describe('Cart', () => {
+  test('From home to checkout flow', async ({page}) => {
+    // Home => Collections => First collection => First product
+    await page.goto(`/`);
+    await page.locator(`header nav a:text-is("Collections")`).click();
+    await page.locator(`[data-test=collection-grid] a  >> nth=0`).click();
+    await page.locator(`[data-test=product-grid] a  >> nth=0`).click();
+    await page.locator(`[data-test=add-to-cart]`).click();
+
+    await waitForLoaders(page, () =>
+      page.locator(`button :text-is("+")`).click({clickCount: 1, delay: 600}),
+    );
+
+    await expect(
+      page.locator('[data-test=item-quantity]'),
+      'should increase quantity',
+    ).toContainText('2');
+
+    // Close cart drawer => Products => First product
+    await page.locator('[data-test=close-cart]').click();
+    await page.locator(`header nav a:text-is("Products")`).click();
+    await page.locator(`[data-test=product-grid] a  >> nth=0`).click();
+
+    await waitForLoaders(page, () =>
+      page.locator(`[data-test=add-to-cart]`).click(),
+    );
+
+    const quantities = await page
+      .locator('[data-test=item-quantity]')
+      .allTextContents();
+
+    await expect(
+      quantities.reduce((a, b) => a + Number(b), 0),
+      'should have the correct item quantities',
+    ).toEqual(3);
+
+    const priceInStore = await page
+      .locator('[data-test=subtotal]')
+      .textContent();
+
+    await page.locator('a :text("Checkout")').click();
+
+    await expect(page.url(), 'should navigate to checkout').toMatch(
+      /[\w\d-]+\.myshopify\.com\/\d+\/checkouts\/[\d\w]+/,
+    );
+
+    const priceInCheckout = await page
+      .locator('[data-checkout-subtotal-price-target]')
+      .textContent();
+
+    await expect(
+      normalizePrice(priceInCheckout),
+      'should show the same price in checkout',
+    ).toEqual(normalizePrice(priceInStore));
+  });
+});
+
+function normalizePrice(price: string | null) {
+  if (!price) throw new Error('Price was not found');
+
+  return price
+    .replace('$', '')
+    .trim()
+    .replace(/[.,](\d\d)$/, '-$1')
+    .replace(/[.,]/g, '')
+    .replace('-', '.');
+}

package/dist/templates/demo-store/tests/seo.test.ts

@@ -0,0 +1,36 @@
+import {test, expect} from '@playwright/test';
+
+test.describe('home', () => {
+  test('has meta elements for description, title and robots', async ({
+    page,
+  }) => {
+    const text = {
+      robots: 'index,follow',
+      title: 'Hydrogen',
+      description:
+        "A custom storefront powered by Hydrogen, Shopify's React-based framework for building headless.",
+    };
+    const entries = [
+      [
+        'description',
+        [
+          'meta[name="description"]',
+          'meta[property="og:description"]',
+          'meta[name="twitter:description"]',
+        ],
+      ],
+      ['robots', ['meta[name="robots"]', 'meta[name="googlebot"]']],
+      ['title', ['meta[property="og:title"]', 'meta[name="twitter:title"]']],
+    ];
+
+    await page.goto(`/`);
+
+    for (const [key, elements] of entries) {
+      const expected = text[key as keyof typeof text];
+      for (const element of elements) {
+        const meta = await page.locator(element);
+        await expect(meta).toHaveAttribute('content', expected);
+      }
+    }
+  });
+});

package/dist/templates/demo-store/tests/utils.ts

@@ -0,0 +1,100 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable no-console */
+
+import type {Page, Request} from '@playwright/test';
+
+/**
+ * @description Wait until the Root loader is refreshed after a Form action
+ * @param page Page
+ * @param action Fn
+ */
+export async function waitForLoaders(page: Page, action: () => Promise<any>) {
+  return waitForNetworkSettled(
+    page,
+    action,
+    (request) => /\?_data=root/.test(request.url()),
+    1,
+  );
+}
+
+// Based on https://gist.github.com/dgozman/d1c46f966eb9854ee1fe24960b603b28
+const DEBUG = false;
+export async function waitForNetworkSettled(
+  page: Page,
+  action: () => Promise<any>,
+  requestFilter?: (request: Request) => boolean,
+  minimumRequests = 0,
+) {
+  const skipRequest = (request: Request) =>
+    !!requestFilter && !requestFilter(request);
+
+  let networkSettledCallback: (v?: unknown) => void;
+  const networkSettledPromise = new Promise(
+    (f) => (networkSettledCallback = f),
+  );
+
+  let requestCounter = 0;
+  let actionDone = false;
+  const pending = new Set<Request>();
+
+  const maybeSettle = () => {
+    if (actionDone && requestCounter <= 0 && minimumRequests <= 0)
+      networkSettledCallback();
+  };
+
+  const onRequest = (request: Request) => {
+    if (skipRequest(request)) return;
+
+    ++requestCounter;
+    DEBUG && pending.add(request);
+    DEBUG &&
+      console.log(`+[${requestCounter}]: ${request.method()} ${request.url()}`);
+  };
+  const onRequestDone = (request: Request) => {
+    if (skipRequest(request)) return;
+
+    // Let the page handle responses asynchronously (via setTimeout(0)).
+    //
+    // Note: this might be changed to use delay, e.g. setTimeout(f, 100),
+    // when the page uses delay itself.
+    const evaluate = page.evaluate(() => new Promise((f) => setTimeout(f, 0)));
+    evaluate
+      .catch((e) => null)
+      .then(() => {
+        --requestCounter;
+        --minimumRequests;
+        maybeSettle();
+        DEBUG && pending.delete(request);
+        DEBUG &&
+          console.log(
+            `-[${requestCounter}]: ${request.method()} ${request.url()}`,
+          );
+      });
+  };
+
+  page.on('request', onRequest);
+  page.on('requestfinished', onRequestDone);
+  page.on('requestfailed', onRequestDone);
+
+  let timeoutId;
+  DEBUG &&
+    (timeoutId = setInterval(() => {
+      console.log(`${requestCounter} requests pending:`);
+      for (const request of pending) console.log(`  ${request.url()}`);
+    }, 5000));
+
+  const result = await action();
+  actionDone = true;
+  maybeSettle();
+  DEBUG && console.log(`action done, ${requestCounter} requests pending`);
+  await networkSettledPromise;
+  DEBUG && console.log(`action done, network settled`);
+
+  page.removeListener('request', onRequest);
+  page.removeListener('requestfinished', onRequestDone);
+  page.removeListener('requestfailed', onRequestDone);
+
+  DEBUG && clearTimeout(timeoutId);
+
+  return result;
+}

package/dist/templates/demo-store/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "include": ["./**/*.d.ts", "./**/*.ts", "./**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "types": ["@shopify/oxygen-workers-types"],
+    "paths": {
+      "~/*": ["app/*"],
+      ".hydrogen/*": [".hydrogen/*"]
+    },
+
+    // Remix takes care of building everything in `./app` with `remix build`.
+    // Wrangler takes care of building everything in `./worker` with `wrangler start` / `wrangler publish`.
+    "noEmit": true
+  }
+}

package/dist/templates/hello-world/.eslintignore

@@ -0,0 +1,4 @@
+build
+node_modules
+bin
+*.d.ts

package/dist/templates/hello-world/.eslintrc.js

@@ -0,0 +1,6 @@
+/**
+ * @type {import("@types/eslint").Linter.BaseConfig}
+ */
+module.exports = {
+  extends: ['plugin:hydrogen/recommended', 'plugin:hydrogen/typescript'],
+};

package/dist/templates/hello-world/.graphqlrc.yml

@@ -0,0 +1 @@
+schema: node_modules/@shopify/hydrogen-react/storefront.schema.json

package/dist/templates/hello-world/.turbo/turbo-build.log

@@ -0,0 +1,9 @@
+
+> hello-world@0.0.0 build
+> shopify hydrogen build --entry ./server
+
+
+🏗️  Building in production mode...
+📦 Worker built: 474.459ms
+   dist/worker/index.js  0.16 MB
+

package/dist/templates/hello-world/README.md

@@ -0,0 +1,20 @@
+# Hydrogen template: Hello World
+
+A minimal setup of components, queries and tooling to get started with Hydrogen.
+
+## What's included
+
+- ESLint
+- Prettier
+- Typescript
+- Oxygen
+
+## TODO
+
+- Everything in `lib` folder will maybe need to be abstracted into a shared module
+
+## Questions
+
+- Should we add tailwind css?
+- Should we do bot detection?
+- Rename `oxygen.ts` to `server.ts`

package/dist/templates/hello-world/app/components/Layout.tsx

@@ -0,0 +1,15 @@
+interface LayoutProps {
+  children?: React.ReactNode;
+  title?: string;
+  description?: string | null;
+}
+
+export function Layout({children, title, description}: LayoutProps) {
+  return (
+    <div className="Layout">
+      <h1>{title}</h1>
+      <h2>{description}</h2>
+      {children}
+    </div>
+  );
+}

package/dist/templates/hello-world/app/components/index.ts

@@ -0,0 +1 @@
+export {Layout} from './Layout';

package/dist/templates/hello-world/app/entry.client.tsx

@@ -0,0 +1,4 @@
+import {RemixBrowser} from '@remix-run/react';
+import {hydrateRoot} from 'react-dom/client';
+
+hydrateRoot(document, <RemixBrowser />);

package/dist/templates/hello-world/app/entry.server.tsx

@@ -0,0 +1,21 @@
+import type {EntryContext} from '@shopify/remix-oxygen';
+import {RemixServer} from '@remix-run/react';
+import {renderToString} from 'react-dom/server';
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  const markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />,
+  );
+
+  responseHeaders.set('Content-Type', 'text/html');
+
+  return new Response('<!DOCTYPE html>' + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  });
+}

package/dist/templates/hello-world/app/root.tsx

@@ -0,0 +1,212 @@
+import {
+  defer,
+  type LinksFunction,
+  type MetaFunction,
+  type LoaderArgs,
+} from '@shopify/remix-oxygen';
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useLoaderData,
+} from '@remix-run/react';
+import {Cart, Shop} from '@shopify/hydrogen-react/storefront-api-types';
+import {Layout} from '~/components';
+import styles from './styles/app.css';
+import favicon from '../public/favicon.svg';
+
+export const links: LinksFunction = () => {
+  return [
+    {rel: 'stylesheet', href: styles},
+    {
+      rel: 'preconnect',
+      href: 'https://cdn.shopify.com',
+    },
+    {
+      rel: 'preconnect',
+      href: 'https://shop.app',
+    },
+    {rel: 'icon', type: 'image/svg+xml', href: favicon},
+  ];
+};
+
+export const meta: MetaFunction = (data) => ({
+  charset: 'utf-8',
+  viewport: 'width=device-width,initial-scale=1',
+});
+
+export async function loader({context, request}: LoaderArgs) {
+  const cartId = await context.session.get('cartId');
+
+  const [cart, layout] = await Promise.all([
+    cartId
+      ? (
+          await context.storefront.query<{cart: Cart}>(CART_QUERY, {
+            variables: {
+              cartId,
+              /**
+              Country and language properties are automatically injected
+              into all queries. Passing them is unnecessary unless you
+              want to override them from the following default:
+              */
+              country: context.storefront.i18n?.country,
+              language: context.storefront.i18n?.language,
+            },
+            cache: context.storefront.CacheNone(),
+          })
+        ).cart
+      : null,
+    await context.storefront.query<{shop: Shop}>(LAYOUT_QUERY),
+  ]);
+
+  return defer({
+    cart,
+    layout,
+  });
+}
+
+export default function App() {
+  const data = useLoaderData<typeof loader>();
+
+  const {name, description} = data.layout.shop;
+
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Layout description={description} title={name}>
+          <Outlet />
+        </Layout>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+const CART_QUERY = `#graphql
+  query CartQuery($cartId: ID!) {
+    cart(id: $cartId) {
+      ...CartFragment
+    }
+  }
+
+  fragment CartFragment on Cart {
+    id
+    checkoutUrl
+    totalQuantity
+    buyerIdentity {
+      countryCode
+      customer {
+        id
+        email
+        firstName
+        lastName
+        displayName
+      }
+      email
+      phone
+    }
+    lines(first: 100) {
+      edges {
+        node {
+          id
+          quantity
+          attributes {
+            key
+            value
+          }
+          cost {
+            totalAmount {
+              amount
+              currencyCode
+            }
+            amountPerQuantity {
+              amount
+              currencyCode
+            }
+            compareAtAmountPerQuantity {
+              amount
+              currencyCode
+            }
+          }
+          merchandise {
+            ... on ProductVariant {
+              id
+              availableForSale
+              compareAtPrice {
+                ...MoneyFragment
+              }
+              price {
+                ...MoneyFragment
+              }
+              requiresShipping
+              title
+              image {
+                ...ImageFragment
+              }
+              product {
+                handle
+                title
+                id
+              }
+              selectedOptions {
+                name
+                value
+              }
+            }
+          }
+        }
+      }
+    }
+    cost {
+      subtotalAmount {
+        ...MoneyFragment
+      }
+      totalAmount {
+        ...MoneyFragment
+      }
+      totalDutyAmount {
+        ...MoneyFragment
+      }
+      totalTaxAmount {
+        ...MoneyFragment
+      }
+    }
+    note
+    attributes {
+      key
+      value
+    }
+    discountCodes {
+      code
+    }
+  }
+
+  fragment MoneyFragment on MoneyV2 {
+    currencyCode
+    amount
+  }
+
+  fragment ImageFragment on Image {
+    id
+    url
+    altText
+    width
+    height
+  }
+`;
+
+const LAYOUT_QUERY = `#graphql
+  query layout {
+    shop {
+      name
+      description
+    }
+  }
+`;

package/dist/templates/hello-world/app/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/templates/hello-world/app/styles/app.css

@@ -0,0 +1,38 @@
+body {
+  padding: 0;
+  margin: 0;
+  background: rgb(245, 245, 241);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+h1,
+h2,
+p {
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 1.6rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  line-height: 1.4;
+}
+
+h2 {
+  font-size: 1.2rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  line-height: 1.4;
+}
+
+p {
+  font-size: 1rem;
+  line-height: 1.4;
+}
+
+.Layout {
+  padding: 2rem;
+  max-width: 25rem;
+}