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

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

@@ -0,0 +1,67 @@
+{
+  "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": "0.0.0-experimental-e18af792a",
+    "@shopify/cli": "^3.23.0",
+    "@shopify/cli-hydrogen": "^4.0.0-alpha.1",
+    "@shopify/hydrogen": "^2.0.0-alpha.1",
+    "@shopify/hydrogen-react": "^2022.10.3",
+    "@shopify/remix-oxygen": "^1.0.0-alpha.1",
+    "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": "0.0.0-experimental-e18af792a",
+    "@remix-run/eslint-config": "0.0.0-experimental-e18af792a",
+    "@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

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

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

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

@@ -0,0 +1,28 @@
+<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.config.js

@@ -0,0 +1,12 @@
+// TODO: Change package name when we decide on a package name.
+const {hydrogenRoutes} = require('@shopify/hydrogen/build');
+
+/** @type {import('@remix-run/dev').AppConfig} */
+module.exports = {
+  ignoredRouteFiles: ['**/.*'],
+  routes(defineRoutes) {
+    return hydrogenRoutes(defineRoutes, {
+      graphiql: process.env.NODE_ENV !== 'production',
+    });
+  },
+};

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

@@ -0,0 +1,34 @@
+/// <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 expected Env parameter in fetch handler.
+ */
+declare global {
+  interface Env {
+    SESSION_SECRET: string;
+    SHOPIFY_STOREFRONT_API_PUBLIC_TOKEN: string;
+    SHOPIFY_STOREFRONT_API_VERSION: string;
+    SHOPIFY_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.ts

@@ -0,0 +1,15 @@
+/* eslint-disable no-console */
+
+const run = ({rootDirectory}: {rootDirectory: string}) => {
+  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();
+};
+
+export default run;
+
+/* eslint-enable no-console */

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

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

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

@@ -0,0 +1,87 @@
+// Virtual entry point for the app
+import * as remixBuild from '@remix-run/dev/server-build';
+import {createRequestHandler, getBuyerIp} from '@shopify/remix-oxygen';
+import {createStorefrontClient, proxyLiquidRoute} from '@shopify/hydrogen';
+import {HydrogenSession} from '~/lib/session.server';
+import {getLocaleFromRequest} from '~/lib/utils';
+
+/**
+ * A global `process` object is only available during build to access NODE_ENV.
+ */
+declare const process: {env: {NODE_ENV: string}};
+
+/**
+ * Export a fetch handler in module format.
+ */
+export default {
+  async fetch(
+    request: Request,
+    env: Env,
+    executionContext: ExecutionContext,
+  ): Promise<Response> {
+    try {
+      /**
+       * Proxy to the Online Store if needed.
+       */
+      const onlineStoreProxy =
+        new URL(request.url).pathname === '/proxy' ? '/pages/about' : null;
+
+      if (onlineStoreProxy) {
+        return await proxyLiquidRoute(
+          request,
+          env.SHOPIFY_STORE_DOMAIN,
+          onlineStoreProxy,
+        );
+      }
+
+      /**
+       * 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 [cache, session] = await Promise.all([
+        caches.open('hydrogen'),
+        HydrogenSession.init(request, [env.SESSION_SECRET]),
+      ]);
+
+      /**
+       * 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() {
+          const waitUntil = executionContext.waitUntil.bind(executionContext);
+
+          const {storefront} = createStorefrontClient({
+            cache,
+            waitUntil,
+            buyerIp: getBuyerIp(request),
+            i18n: getLocaleFromRequest(request),
+            publicStorefrontToken: env.SHOPIFY_STOREFRONT_API_PUBLIC_TOKEN,
+            storeDomain: env.SHOPIFY_STORE_DOMAIN,
+            storefrontApiVersion:
+              env.SHOPIFY_STOREFRONT_API_VERSION || '2022-10',
+          });
+
+          return {
+            cache,
+            session,
+            waitUntil,
+            storefront,
+            env,
+          };
+        },
+      });
+
+      return await handleRequest(request);
+    } 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

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

@@ -0,0 +1,70 @@
+/** @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')],
+};