@shopify/cli-hydrogen 4.0.0-alpha.9 → 4.0.0

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

@@ -1,67 +0,0 @@
-{
-  "name": "demo-store",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "build": "npm run build:css && shopify hydrogen build --entry ./server",
-    "build:css": "postcss styles --base styles --dir app/styles --env production",
-    "dev": "npm run build:css && concurrently -g -r npm:dev:css \"shopify hydrogen dev --entry ./server\"",
-    "dev:css": "postcss styles --base styles --dir app/styles -w",
-    "format": "prettier --write --ignore-unknown .",
-    "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",
-    "preview": "npm run build && shopify hydrogen preview",
-    "typecheck": "tsc --noEmit"
-  },
-  "prettier": "@shopify/prettier-config",
-  "dependencies": {
-    "@headlessui/react": "^1.7.2",
-    "@remix-run/react": "1.11.0",
-    "@shopify/cli": "^3.23.0",
-    "@shopify/cli-hydrogen": "^4.0.0-alpha.9",
-    "@shopify/hydrogen": "^2.0.0-alpha.3",
-    "@shopify/remix-oxygen": "^1.0.0-alpha.3",
-    "@shopify/storefront-kit-react": "^2023.1.3",
-    "clsx": "^1.2.1",
-    "concurrently": "^7.5.0",
-    "cross-env": "^7.0.3",
-    "graphql": "^16.6.0",
-    "graphql-tag": "^2.12.6",
-    "isbot": "^3.6.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-intersection-observer": "^9.4.1",
-    "react-use": "^17.4.0",
-    "schema-dts": "^1.1.0",
-    "tiny-invariant": "^1.2.0",
-    "typographic-base": "^1.0.4"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.27.1",
-    "@remix-run/dev": "1.11.0",
-    "@remix-run/eslint-config": "1.11.0",
-    "@shopify/eslint-plugin": "^42.0.1",
-    "@shopify/oxygen-workers-types": "^3.17.2",
-    "@shopify/prettier-config": "^1.1.2",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/typography": "^0.5.7",
-    "@types/eslint": "^8.4.10",
-    "@types/react": "^18.0.20",
-    "@types/react-dom": "^18.0.6",
-    "concurrently": "^7.4.0",
-    "cross-env": "^7.0.3",
-    "esbuild": "^0.15.14",
-    "eslint": "^8.20.0",
-    "eslint-plugin-hydrogen": "0.12.2",
-    "postcss": "^8.4.16",
-    "postcss-cli": "^10.0.0",
-    "postcss-import": "^15.0.0",
-    "postcss-preset-env": "^7.8.2",
-    "prettier": "^2.7.1",
-    "rimraf": "^3.0.2",
-    "tailwindcss": "^3.1.8",
-    "typescript": "^4.8.3"
-  },
-  "engines": {
-    "node": ">=16.13"
-  }
-}

package/dist/templates/demo-store/playwright.config.ts

@@ -1,109 +0,0 @@
-import type {PlaywrightTestConfig} from '@playwright/test';
-import {devices} from '@playwright/test';
-
-declare const process: {env: {CI: boolean}};
-
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-const config: PlaywrightTestConfig = {
-  testDir: './tests',
-  /* Maximum time one test can run for. */
-  timeout: 30 * 1000,
-  expect: {
-    /**
-     * Maximum time expect() should wait for the condition to be met.
-     * For example in `await expect(locator).toHaveText();`
-     */
-    timeout: 5000,
-  },
-  /* Run tests in files in parallel */
-  fullyParallel: true,
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-  use: {
-    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
-    actionTimeout: 0,
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://localhost:3000',
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
-  },
-
-  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: 'chromium',
-      use: {
-        ...devices['Desktop Chrome'],
-      },
-    },
-
-    // {
-    //   name: 'firefox',
-    //   use: {
-    //     ...devices['Desktop Firefox'],
-    //   },
-    // },
-
-    // {
-    //   name: 'webkit',
-    //   use: {
-    //     ...devices['Desktop Safari'],
-    //   },
-    // },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: {
-    //     ...devices['Pixel 5'],
-    //   },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: {
-    //     ...devices['iPhone 12'],
-    //   },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: {
-    //     channel: 'msedge',
-    //   },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: {
-    //     channel: 'chrome',
-    //   },
-    // },
-  ],
-
-  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
-  // outputDir: 'test-results/',
-
-  /* Run your local dev server before starting the tests */
-  webServer: {
-    command: 'npm run preview',
-    port: 3000,
-  },
-};
-
-export default config;

package/dist/templates/demo-store/postcss.config.js

@@ -1,10 +0,0 @@
-module.exports = {
-  plugins: {
-    'postcss-import': {},
-    'tailwindcss/nesting': {},
-    tailwindcss: {},
-    'postcss-preset-env': {
-      features: {'nesting-rules': false},
-    },
-  },
-};

package/dist/templates/demo-store/public/favicon.svg

@@ -1,28 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none">
-  <style>
-    .stroke {
-      stroke: #000;
-    }
-    .fill {
-      fill: #000;
-    }
-    @media (prefers-color-scheme: dark) {
-      .stroke {
-        stroke: #fff;
-      }
-      .fill {
-        fill: #fff;
-      }
-    }
-  </style>
-  <path
-    class="stroke"
-    fill-rule="evenodd"
-    d="M16.1 16.04 1 8.02 6.16 5.3l5.82 3.09 4.88-2.57-5.82-3.1L16.21 0l15.1 8.02-5.17 2.72-5.5-2.91-4.88 2.57 5.5 2.92-5.16 2.72Z"
-  />
-  <path
-    class="fill"
-    fill-rule="evenodd"
-    d="M16.1 32 1 23.98l5.16-2.72 5.82 3.08 4.88-2.57-5.82-3.08 5.17-2.73 15.1 8.02-5.17 2.72-5.5-2.92-4.88 2.58 5.5 2.92L16.1 32Z"
-  />
-</svg>

package/dist/templates/demo-store/remix.env.d.ts

@@ -1,40 +0,0 @@
-/// <reference types="@remix-run/dev" />
-/// <reference types="@shopify/remix-oxygen" />
-/// <reference types="@shopify/oxygen-workers-types" />
-
-import type {StorefrontClient} from '@shopify/hydrogen';
-import type {HydrogenSession} from '~/lib/session.server';
-
-declare global {
-  /**
-   * A global `process` object is only available during build to access NODE_ENV.
-   */
-  const process: {env: {NODE_ENV: 'production' | 'development'}};
-
-  /**
-   * Declare expected Env parameter in fetch handler.
-   */
-  interface Env {
-    SESSION_SECRET: string;
-    PUBLIC_STOREFRONT_API_TOKEN: string;
-    PRIVATE_STOREFRONT_API_TOKEN: string;
-    PUBLIC_STOREFRONT_API_VERSION: string;
-    PUBLIC_STORE_DOMAIN: string;
-  }
-}
-
-/**
- * Declare local additions to `AppLoadContext` to include the session utilities we injected in `server.ts`.
- */
-declare module '@shopify/remix-oxygen' {
-  export interface AppLoadContext {
-    waitUntil: ExecutionContext['waitUntil'];
-    session: HydrogenSession;
-    storefront: StorefrontClient['storefront'];
-    cache: Cache;
-    env: Env;
-  }
-}
-
-// Needed to make this file a module.
-export {};

package/dist/templates/demo-store/remix.init/index.js

@@ -1,25 +0,0 @@
-/* eslint-disable no-console */
-const fs = require('fs');
-
-const run = ({rootDirectory}) => {
-  // TEMPORARY during dev preview:
-  // If _env and _gitignore exist, rename them as .env and .gitignore
-  if (fs.existsSync(`${rootDirectory}/_env`)) {
-    fs.renameSync(`${rootDirectory}/_env`, `${rootDirectory}/.env`);
-  }
-  if (fs.existsSync(`${rootDirectory}/_gitignore`)) {
-    fs.renameSync(`${rootDirectory}/_gitignore`, `${rootDirectory}/.gitignore`);
-  }
-
-  console.log();
-  console.log(`Finished creating your Hydrogen storefront in ${rootDirectory}`);
-  console.log(`📚 Docs: https://shopify.dev/custom-storefronts/hydrogen`);
-  console.log(
-    `👋 Note: your project will display inventory from the Hydrogen Demo Store.`,
-  );
-  console.log();
-};
-
-module.exports = run;
-
-/* eslint-enable no-console */

package/dist/templates/demo-store/remix.init/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "remix.init",
-  "private": true,
-  "main": "index.js",
-  "license": "MIT",
-  "dependencies": {}
-}

package/dist/templates/demo-store/server.ts

@@ -1,73 +0,0 @@
-// Virtual entry point for the app
-import * as remixBuild from '@remix-run/dev/server-build';
-import {createRequestHandler, getBuyerIp} from '@shopify/remix-oxygen';
-import {createStorefrontClient, storefrontRedirect} from '@shopify/hydrogen';
-import {HydrogenSession} from '~/lib/session.server';
-import {getLocaleFromRequest} from '~/lib/utils';
-
-/**
- * Export a fetch handler in module format.
- */
-export default {
-  async fetch(
-    request: Request,
-    env: Env,
-    executionContext: ExecutionContext,
-  ): Promise<Response> {
-    try {
-      /**
-       * Open a cache instance in the worker and a custom session instance.
-       */
-      if (!env?.SESSION_SECRET) {
-        throw new Error('SESSION_SECRET environment variable is not set');
-      }
-
-      const waitUntil = (p: Promise<any>) => executionContext.waitUntil(p);
-      const [cache, session] = await Promise.all([
-        caches.open('hydrogen'),
-        HydrogenSession.init(request, [env.SESSION_SECRET]),
-      ]);
-
-      /**
-       * Create Hydrogen's Storefront client.
-       */
-      const {storefront} = createStorefrontClient({
-        cache,
-        waitUntil,
-        buyerIp: getBuyerIp(request),
-        i18n: getLocaleFromRequest(request),
-        publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
-        privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
-        storeDomain: `https://${env.PUBLIC_STORE_DOMAIN}`,
-        storefrontApiVersion: env.PUBLIC_STOREFRONT_API_VERSION || '2023-01',
-      });
-
-      /**
-       * Create a Remix request handler and pass
-       * Hydrogen's Storefront client to the loader context.
-       */
-      const handleRequest = createRequestHandler({
-        build: remixBuild,
-        mode: process.env.NODE_ENV,
-        getLoadContext: () => ({cache, session, waitUntil, storefront, env}),
-      });
-
-      const response = await handleRequest(request);
-
-      if (response.status === 404) {
-        /**
-         * Check for redirects only when there's a 404 from the app.
-         * If the redirect doesn't exist, then `storefrontRedirect`
-         * will pass through the 404 response.
-         */
-        return storefrontRedirect({request, response, storefront});
-      }
-
-      return response;
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error(error);
-      return new Response('An unexpected error occurred', {status: 500});
-    }
-  },
-};

package/dist/templates/demo-store/styles/app.css

@@ -1,182 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Tokens */
-:root {
-  --color-primary: 20 20 20; /* Text, buttons, etc. */
-  --color-contrast: 250 250 249; /* Backgrounds, borders, etc. */
-  --color-accent: 191 72 0; /* Labels like "On sale" */
-  --font-size-fine: 0.75rem; /* text-xs */
-  --font-size-copy: 1rem; /* text-base */
-  --font-size-lead: 1.125rem; /* text-lg */
-  --font-size-heading: 2rem; /* text-2xl */
-  --font-size-display: 3rem; /* text-4xl */
-  --color-shop-pay: #5a31f4;
-  --shop-pay-button--width: 100%; /* Sets the width for the shop-pay-button web component */
-  --height-nav: 3rem;
-  --screen-height: 100vh;
-  --screen-height-dynamic: 100vh;
-
-  @media (min-width: 32em) {
-    --height-nav: 4rem;
-  }
-  @media (min-width: 48em) {
-    --height-nav: 6rem;
-    --font-size-heading: 2.25rem; /* text-4xl */
-    --font-size-display: 3.75rem; /* text-6xl */
-  }
-  @supports (height: 100svh) {
-    --screen-height: 100svh;
-  }
-  @supports (height: 100dvh) {
-    --screen-height-dynamic: 100dvh;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-primary: 250 250 250;
-    --color-contrast: 32 33 36;
-    --color-accent: 235 86 40;
-  }
-}
-
-@keyframes fadeInAnimation {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-shop-pay-button {
-  width: 100%;
-  height: 3rem;
-  display: table;
-}
-
-@layer base {
-  * {
-    font-variant-ligatures: none;
-  }
-
-  body {
-    @apply border-primary/10 bg-contrast text-primary/90 antialiased;
-  }
-
-  html {
-    scroll-padding-top: 10rem;
-  }
-
-  model-viewer::part(default-progress-mask) {
-    display: none;
-  }
-
-  model-viewer::part(default-progress-bar) {
-    display: none;
-  }
-
-  input[type='search']::-webkit-search-decoration,
-  input[type='search']::-webkit-search-cancel-button,
-  input[type='search']::-webkit-search-results-button,
-  input[type='search']::-webkit-search-results-decoration {
-    -webkit-appearance: none;
-  }
-
-  a.active {
-    @apply border-b;
-  }
-
-  .prose {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      &:first-child {
-        @apply mt-0;
-      }
-    }
-  }
-}
-
-@layer components {
-  .article {
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      @apply font-sans text-primary;
-    }
-    @apply prose mx-auto mb-12 grid justify-center font-serif text-primary;
-    p,
-    ul,
-    li {
-      @apply mb-4 text-lg;
-    }
-    img {
-      @apply md:-mx-8 lg:-mx-16;
-
-      @media (min-width: 48em) {
-        width: calc(100% + 4rem);
-        max-width: 100vw;
-      }
-      @media (min-width: 64em) {
-        width: calc(100% + 8rem);
-      }
-    }
-  }
-
-  .swimlane {
-    @apply grid w-full snap-x snap-mandatory scroll-px-6 grid-flow-col justify-start gap-4 overflow-x-scroll px-6 pb-4;
-  }
-}
-
-@layer utilities {
-  .fadeIn {
-    opacity: 0;
-    animation: fadeInAnimation ease 500ms forwards;
-  }
-
-  .hiddenScroll {
-    scrollbar-width: none;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  .absolute-center {
-    @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
-  }
-
-  .strike {
-    position: relative;
-    &::before {
-      content: '';
-      display: block;
-      position: absolute;
-      width: 108%;
-      height: 1.5px;
-      left: -4%;
-      top: 50%;
-      transform: translateY(-50%);
-      background: rgb(var(--color-primary));
-      box-shadow: 0.5px 0.5px 0px 0.5px rgb(var(--color-contrast));
-    }
-  }
-
-  .card-image {
-    @apply relative flex items-center justify-center overflow-clip rounded;
-    &::before {
-      content: ' ';
-      @apply absolute top-0 left-0 z-10 block h-full w-full rounded shadow-border;
-    }
-    img {
-      @apply aspect-[inherit] w-full object-cover;
-    }
-  }
-}

package/dist/templates/demo-store/tailwind.config.js

@@ -1,70 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-function withOpacityValue(variable) {
-  return ({opacityValue}) => {
-    if (opacityValue === undefined) {
-      return `rgb(var(${variable}))`;
-    }
-    return `rgb(var(${variable}) / ${opacityValue})`;
-  };
-}
-
-module.exports = {
-  content: ['./app/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {
-      colors: {
-        primary: withOpacityValue('--color-primary'),
-        contrast: withOpacityValue('--color-contrast'),
-        notice: withOpacityValue('--color-accent'),
-        shopPay: 'var(--color-shop-pay)',
-      },
-      screens: {
-        sm: '32em',
-        md: '48em',
-        lg: '64em',
-        xl: '80em',
-        '2xl': '96em',
-        'sm-max': {max: '48em'},
-        'sm-only': {min: '32em', max: '48em'},
-        'md-only': {min: '48em', max: '64em'},
-        'lg-only': {min: '64em', max: '80em'},
-        'xl-only': {min: '80em', max: '96em'},
-        '2xl-only': {min: '96em'},
-      },
-      spacing: {
-        nav: 'var(--height-nav)',
-        screen: 'var(--screen-height, 100vh)',
-      },
-      height: {
-        screen: 'var(--screen-height, 100vh)',
-        'screen-no-nav':
-          'calc(var(--screen-height, 100vh) - var(--height-nav))',
-        'screen-dynamic': 'var(--screen-height-dynamic, 100vh)',
-      },
-      width: {
-        mobileGallery: 'calc(100vw - 3rem)',
-      },
-      fontFamily: {
-        sans: ['Helvetica Neue', 'ui-sans-serif', 'system-ui', 'sans-serif'],
-        serif: ['"IBMPlexSerif"', 'Palatino', 'ui-serif'],
-      },
-      fontSize: {
-        display: ['var(--font-size-display)', '1.1'],
-        heading: ['var(--font-size-heading)', '1.25'],
-        lead: ['var(--font-size-lead)', '1.333'],
-        copy: ['var(--font-size-copy)', '1.5'],
-        fine: ['var(--font-size-fine)', '1.333'],
-      },
-      maxWidth: {
-        'prose-narrow': '45ch',
-        'prose-wide': '80ch',
-      },
-      boxShadow: {
-        border: 'inset 0px 0px 0px 1px rgb(var(--color-primary) / 0.08)',
-        darkHeader: 'inset 0px -1px 0px 0px rgba(21, 21, 21, 0.4)',
-        lightHeader: 'inset 0px -1px 0px 0px rgba(21, 21, 21, 0.05)',
-      },
-    },
-  },
-  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
-};

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

@@ -1,70 +0,0 @@
-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('-', '.');
-}