@shopify/create-hydrogen 1.0.0-alpha.23 → 1.0.4

package/package.json

@@ -1,28 +1,76 @@
 {
   "name": "@shopify/create-hydrogen",
-  "publishConfig": {
-    "access": "public",
-    "@shopify:registry": "https://registry.npmjs.org"
-  },
-  "version": "1.0.0-alpha.23",
-  "main": "index.js",
+  "version": "1.0.4",
+  "private": false,
+  "description": "A CLI tool to create a new Shopify hydrogen app.",
+  "type": "module",
+  "keywords": [
+    "shopify",
+    "shopify-cli",
+    "shopify-partners",
+    "shopify-hydrogen"
+  ],
   "license": "MIT",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "bin": {
-    "create-app": "index.js",
-    "create-hydrogen": "index.js"
+    "create-hydrogen": "./bin/run.js"
   },
   "files": [
-    "index.js",
-    "scripts",
-    "template-*"
+    "/bin/run.js",
+    "/bin/run.cmd",
+    "/dist",
+    "templates",
+    "/oclif.manifest.json"
   ],
+  "publishConfig": {
+    "access": "public",
+    "@shopify:registry": "https://registry.npmjs.org"
+  },
   "scripts": {
-    "prepack": "node ./scripts/tmp-copy-template-from-dev.js"
+    "clean": "shx rm -rf dist",
+    "build": "rimraf dist/ && rollup -c",
+    "prepack": "cross-env NODE_ENV=production yarn run build",
+    "lint": "prettier -c src/** && eslint 'src/**/*.ts'",
+    "lint:fix": "prettier -w src/** && eslint 'src/**/*.ts' --fix",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "tsc": "tsc --noEmit",
+    "refresh-templates": "node ./scripts/refresh-templates.mjs"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../.eslintrc.cjs"
+    ],
+    "rules": {
+      "no-warning-comments": "off"
+    }
   },
   "dependencies": {
-    "enquirer": "^2.3.6",
-    "kolorist": "^1.4.0",
-    "minimist": "^1.2.5"
+    "@bugsnag/js": "^7.16.2",
+    "@shopify/cli-hydrogen": "1.0.4",
+    "@shopify/cli-kit": "1.0.4",
+    "@oclif/core": "1.6.4",
+    "open": "^8.4.0"
   },
-  "gitHead": "8933b705cf46a3be7bae83e125a3152a9ddf4f5d"
+  "devDependencies": {
+    "vitest": "0.8.1"
+  },
+  "engine-strict": true,
+  "engines": {
+    "node": "^14.13.1 || ^16.0.0 || ^17.0.0"
+  },
+  "os": [
+    "darwin",
+    "linux",
+    "win32"
+  ],
+  "oclif": {
+    "bin": "create-hydrogen",
+    "commands": "./dist/commands"
+  }
 }

package/templates/template-hydrogen-default/.devcontainer/devcontainer.json

@@ -0,0 +1,18 @@
+{
+  "name": "Shopify Hydrogen",
+  "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:0-16",
+  "settings": {},
+  "extensions": [
+    "graphql.vscode-graphql",
+    "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss",
+    "esbenp.prettier-vscode"
+  ],
+  "forwardPorts": [3000],
+  "postCreateCommand": "yarn install",
+  "postStartCommand": "yarn dev",
+  "remoteUser": "node",
+  "features": {
+    "git": "latest"
+  }
+}

package/templates/template-hydrogen-default/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['plugin:hydrogen/recommended'],
+};

package/templates/template-hydrogen-default/.gitignore

@@ -0,0 +1,7 @@
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+        

package/{template-hydrogen → templates/template-hydrogen-default}/.stylelintrc.js

@@ -4,7 +4,7 @@ module.exports = {
     'at-rule-no-unknown': [
       true,
       {
-        ignoreAtRules: ['tailwind'],
+        ignoreAtRules: ['tailwind', 'layer'],
       },
     ],
     'selector-type-no-unknown': [

package/templates/template-hydrogen-default/.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "graphql.vscode-graphql",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

package/{template-hydrogen → templates/template-hydrogen-default}/README.md

@@ -2,13 +2,13 @@
 
 Hydrogen is a React framework and SDK that you can use to build fast and dynamic Shopify custom storefronts.
 
-[Check out the docs](https://shopify.dev/beta/hydrogen)
+[Check out the docs](https://shopify.dev/custom-storefronts/hydrogen)
 
 ## Getting started
 
 **Requirements:**
 
-- Node v14+
+- Node.js version 16.5.0 or higher
 - Yarn
 
 ```bash
@@ -18,6 +18,15 @@ yarn dev
 
 Remember to update `shopify.config.js` with your shop's domain and Storefront API token!
 
+## Previewing a production build
+
+To run a local preview of your Hydrogen app in an environment similar to Oxygen, build your Hydrogen app and then run `yarn preview`:
+
+```bash
+yarn build
+yarn preview
+```
+
 ## Building for production
 
 ```bash

package/templates/template-hydrogen-default/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hydrogen App</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&family=Roboto:wght@400;500;900&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/src/index.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/@shopify/hydrogen/entry-client"></script>
+  </body>
+</html>

package/templates/template-hydrogen-default/package.json.liquid

@@ -0,0 +1,48 @@
+{
+  "name": "{{name}}",
+  "description": "This the default template for Hydrogen",
+  "version": "0.11.0",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "lint": "npm-run-all lint:*",
+    "lint:js": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx src",
+    "lint:css": "stylelint ./src/**/*.{css,sass,scss}",
+    "build": "yarn build:client && yarn build:server && yarn build:worker",
+    "build:client": "vite build --outDir dist/client --manifest",
+    "build:server": "vite build --outDir dist/server --ssr @shopify/hydrogen/platforms/node",
+    "build:worker": "cross-env WORKER=true vite build --outDir dist/worker --ssr @shopify/hydrogen/platforms/worker-event",
+    "serve": "node --enable-source-maps dist/server",
+    "preview": "npx @shopify/hydrogen-cli@latest preview"
+  },
+  "prettier": "@shopify/prettier-config",
+  "devDependencies": {
+    "@shopify/prettier-config": "^1.1.2",
+    "@shopify/stylelint-plugin": "^10.0.1",
+    "@tailwindcss/typography": "^0.5.0",
+    "autoprefixer": "^10.4.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.31.0",
+    "eslint-plugin-hydrogen": "^0.6.2",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.5",
+    "prettier": "^2.3.2",
+    "stylelint": "^13.13.0",
+    "tailwindcss": "^3.0.0",
+    "vite": "^2.8.0"
+  },
+  "dependencies": {
+    "@headlessui/react": "^1.4.1",
+    "@shopify/hydrogen": "{{hydrogen_version}}",
+    "body-parser": "^1.19.1",
+    "compression": "^1.7.4",
+    "graphql-tag": "^2.12.4",
+    "path-to-regexp": "^6.2.0",
+    "react": "0.0.0-experimental-529dc3ce8-20220124",
+    "react-dom": "0.0.0-experimental-529dc3ce8-20220124",
+    "serve-static": "^1.14.1",
+    "@shopify/cli": "{{shopify_cli_version}}"
+  },
+  "author": "{{author}}"
+}

package/{template-hydrogen → templates/template-hydrogen-default}/shopify.config.js

@@ -1,6 +1,5 @@
 export default {
-  locale: 'en-us',
   storeDomain: 'hydrogen-preview.myshopify.com',
   storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
-  graphqlApiVersion: '2021-10',
+  storefrontApiVersion: '2022-01',
 };

package/templates/template-hydrogen-default/src/App.server.jsx

@@ -0,0 +1,27 @@
+import renderHydrogen from '@shopify/hydrogen/entry-server';
+import {Router, FileRoutes, ShopifyProvider} from '@shopify/hydrogen';
+import {Suspense} from 'react';
+import shopifyConfig from '../shopify.config';
+import DefaultSeo from './components/DefaultSeo.server';
+import NotFound from './components/NotFound.server';
+import LoadingFallback from './components/LoadingFallback';
+import CartProvider from './components/CartProvider.client';
+
+function App({routes, ...serverProps}) {
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <ShopifyProvider shopifyConfig={shopifyConfig}>
+        <CartProvider>
+          <DefaultSeo />
+          <Router fallback={<NotFound />} serverProps={serverProps}>
+            <FileRoutes routes={routes} />
+          </Router>
+        </CartProvider>
+      </ShopifyProvider>
+    </Suspense>
+  );
+}
+
+const routes = import.meta.globEager('./routes/**/*.server.[jt](s|sx)');
+
+export default renderHydrogen(App, {shopifyConfig, routes});

package/templates/template-hydrogen-default/src/components/Button.client.jsx

@@ -0,0 +1,65 @@
+import {Link} from '@shopify/hydrogen/client';
+
+const DEFAULT_CLASSES =
+  'block m-0 w-full items-center justify-center uppercase font-medium text-center px-6 py-4 rounded disabled:border-gray-300 disabled:bg-gray-300 disabled:cursor-not-allowed';
+
+const VARIANT_CLASSES = {
+  primary: 'text-white bg-gray-900 hover:bg-gray-800 active:bg-gray-700',
+  secondary: 'bg-white hover:bg-gray-50 active:bg-gray-100 border border-black',
+};
+
+export const BUTTON_PRIMARY_CLASSES = `${DEFAULT_CLASSES} ${VARIANT_CLASSES.primary}`;
+export const BUTTON_SECONDARY_CLASSES = `${DEFAULT_CLASSES} ${VARIANT_CLASSES.secondary}`;
+
+const ExternalIcon = () => (
+  <svg
+    className="fill-current text-white ml-3"
+    width="15"
+    height="14"
+    viewBox="0 0 15 14"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M8.11963 0.000976562C7.56734 0.000976562 7.11963 0.448692 7.11963 1.00098C7.11963 1.55326 7.56734 2.00098 8.11963 2.00098H10.7054L4.41252 8.29387C4.022 8.68439 4.022 9.31756 4.41252 9.70808C4.80305 10.0986 5.43621 10.0986 5.82674 9.70808L12.1196 3.41519V6.00098C12.1196 6.55326 12.5673 7.00098 13.1196 7.00098C13.6719 7.00098 14.1196 6.55326 14.1196 6.00098V1.00098C14.1196 0.448692 13.6719 0.000976562 13.1196 0.000976562H8.11963Z" />
+    <path d="M2.11963 2.00098C1.01506 2.00098 0.119629 2.89641 0.119629 4.00098V12.001C0.119629 13.1055 1.01506 14.001 2.11963 14.001H10.1196C11.2242 14.001 12.1196 13.1055 12.1196 12.001V9.00098C12.1196 8.44869 11.6719 8.00098 11.1196 8.00098C10.5673 8.00098 10.1196 8.44869 10.1196 9.00098V12.001H2.11963V4.00098L5.11963 4.00098C5.67191 4.00098 6.11963 3.55326 6.11963 3.00098C6.11963 2.44869 5.67191 2.00098 5.11963 2.00098H2.11963Z" />
+  </svg>
+);
+
+/**
+ * A client component that sets the primary and secondary classes for button components
+ */
+export default function Button({
+  className,
+  label,
+  handleClick,
+  url,
+  variant = 'primary',
+  passthroughProps,
+}) {
+  const classes = `${DEFAULT_CLASSES} ${VARIANT_CLASSES[variant]} ${className}`;
+  const isExternal = url
+    ? url.indexOf('://') > 0 || url.indexOf('//') === 0
+    : false;
+
+  if (isExternal) {
+    return (
+      <a href={url} className={classes} {...passthroughProps}>
+        {label}
+        <ExternalIcon />
+      </a>
+    );
+  }
+
+  if (handleClick) {
+    return (
+      <button className={classes} onClick={handleClick} type="button">
+        {label}
+      </button>
+    );
+  }
+
+  return (
+    <Link to={url} className={classes} {...passthroughProps}>
+      {label}
+    </Link>
+  );
+}

package/templates/template-hydrogen-default/src/components/Cart.client.jsx

@@ -0,0 +1,265 @@
+import {
+  useCart,
+  CartCheckoutButton,
+  Link,
+  CartLines,
+  CartLineImage,
+  CartLineProductTitle,
+  CartLineQuantityAdjustButton,
+  CartLinePrice,
+  CartLineQuantity,
+  CartShopPayButton,
+  CartEstimatedCost,
+  useCartLine,
+} from '@shopify/hydrogen/client';
+import {Dialog} from '@headlessui/react';
+
+import {useCartUI} from './CartUIProvider.client';
+import CartIconWithItems from './CartIconWithItems.client';
+import {BUTTON_PRIMARY_CLASSES} from './Button.client';
+
+/**
+ * A client component that contains the merchandise that a customer intends to purchase, and the estimated cost associated with the cart
+ */
+export default function Cart() {
+  const {isCartOpen, closeCart} = useCartUI();
+  const {totalQuantity} = useCart();
+
+  return (
+    <div>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+      <div
+        className={`z-20 fixed top-0 bottom-0 left-0 right-0 bg-black transition-opacity duration-400 ${
+          isCartOpen ? 'opacity-20' : 'opacity-0 pointer-events-none'
+        }`}
+        onClick={isCartOpen ? closeCart : null}
+      />
+      <Dialog open={isCartOpen} onClose={closeCart}>
+        <Dialog.Overlay className="fixed z-20 inset-0 bg-gray-50 opacity-75" />
+        <div
+          className={`absolute flex flex-col md:block z-20 top-0 left-0 right-0 bottom-0 md:top-7 h-full md:left-auto md:right-7 md:bottom-auto md:h-auto md:max-h-[calc(100vh-56px)] bg-gray-50 w-full md:w-[470px] rounded-b-lg shadow-2xl ${
+            totalQuantity === 0 ? 'overflow-hidden' : 'overflow-y-scroll'
+          }`}
+        >
+          <CartHeader />
+          {totalQuantity === 0 ? (
+            <CartEmpty />
+          ) : (
+            <>
+              <CartItems />
+              <CartFooter />
+            </>
+          )}
+        </div>
+      </Dialog>
+    </div>
+  );
+}
+
+function CartHeader() {
+  const {closeCart} = useCartUI();
+  return (
+    <header className="border-b border-gray-300 bg-white py-3 px-6 flex justify-between items-center sticky top-0">
+      <button type="button" onClick={closeCart}>
+        <ArrowIcon />
+        <span className="sr-only">Close cart</span>
+      </button>
+      <span className="text-xs text-gray-500">
+        Free shipping on orders over $50
+      </span>
+      <CartIconWithItems />
+    </header>
+  );
+}
+
+function CartItems() {
+  return (
+    <div className="px-7 flex-grow" role="table" aria-label="Shopping cart">
+      <div role="row" className="sr-only">
+        <div role="columnheader">Product image</div>
+        <div role="columnheader">Product details</div>
+        <div role="columnheader">Price</div>
+      </div>
+      <CartLines>
+        <LineInCart />
+      </CartLines>
+    </div>
+  );
+}
+
+function LineInCart() {
+  const {merchandise} = useCartLine();
+  return (
+    <div
+      role="row"
+      className="flex py-7 border-b last:border-b-0 border-gray-300 text-gray-900"
+    >
+      <div role="cell" className="flex-shrink-0 mr-7">
+        <Link to={`/products/${merchandise.product.handle}`}>
+          <CartLineImage
+            className="bg-white border border-black border-opacity-5 rounded-xl "
+            options={{width: 98, height: 98, crop: 'center'}}
+          />
+        </Link>
+      </div>
+      <div
+        role="cell"
+        className="flex flex-col w-full justify-between items-start flex-grow-1 mr-4"
+      >
+        <Link
+          to={`/products/${merchandise.product.handle}`}
+          className="hover:underline"
+        >
+          <CartLineProductTitle className="text-lg font-medium" />
+        </Link>
+        <ul className="text-xs space-y-1">
+          {merchandise.selectedOptions.map(({name, value}) => (
+            <li key={name}>
+              {name}: {value}
+            </li>
+          ))}
+        </ul>
+        <CartItemQuantity />
+      </div>
+      <div role="cell" className="flex flex-col justify-between items-end">
+        <CartLineQuantityAdjustButton
+          adjust="remove"
+          aria-label="Remove from cart"
+          className="disabled:pointer-events-all disabled:cursor-wait"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </CartLineQuantityAdjustButton>
+        <CartLinePrice className="text-lg" />
+      </div>
+    </div>
+  );
+}
+
+function CartItemQuantity() {
+  return (
+    <div className="flex border rounded border-gray-300 items-center overflow-auto mt-2">
+      <CartLineQuantityAdjustButton
+        adjust="decrease"
+        aria-label="Decrease quantity"
+        className="p-2 disabled:pointer-events-all disabled:cursor-wait"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-5 w-5 text-gray-400"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fillRule="evenodd"
+            d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </CartLineQuantityAdjustButton>
+      <CartLineQuantity
+        as="div"
+        className="p-2 text-gray-900 text-xs text-center"
+      />
+      <CartLineQuantityAdjustButton
+        adjust="increase"
+        aria-label="Increase quantity"
+        className="p-2 text-gray-400 disabled:pointer-events-all disabled:cursor-wait"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-5 w-5"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fillRule="evenodd"
+            d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </CartLineQuantityAdjustButton>
+    </div>
+  );
+}
+
+function CartFooter() {
+  return (
+    <footer className="bottom-0 sticky pb-8 border-t border-black border-opacity-5">
+      <div className="relative h-60 bg-white text-gray-900 p-7">
+        <div role="table" aria-label="Cost summary">
+          <div role="row" className="flex justify-between">
+            <span className="font-semibold" role="rowheader">
+              Subtotal
+            </span>
+            <CartEstimatedCost
+              amountType="subtotal"
+              role="cell"
+              className="text-right "
+            />
+          </div>
+          <div role="row" className="flex justify-between mt-2">
+            <span className="font-semibold" role="rowheader">
+              Shipping
+            </span>
+            <span role="cell" className="uppercase">
+              Free
+            </span>
+          </div>
+        </div>
+        <CartShopPayButton className="flex my-4 justify-center w-full bg-[#5a31f4] py-2 rounded-md" />
+        <CartCheckoutButton className={BUTTON_PRIMARY_CLASSES}>
+          Checkout
+        </CartCheckoutButton>
+      </div>
+    </footer>
+  );
+}
+
+function CartEmpty() {
+  const {closeCart} = useCartUI();
+  return (
+    <div className="p-7 flex flex-col">
+      <p className="mb-4 text-lg text-gray-500 text-center">
+        Your cart is empty
+      </p>
+      <button
+        type="button"
+        onClick={closeCart}
+        className={BUTTON_PRIMARY_CLASSES}
+      >
+        Continue Shopping
+      </button>
+    </div>
+  );
+}
+
+function ArrowIcon() {
+  return (
+    <svg
+      width="20"
+      height="17"
+      viewBox="0 0 20 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 1.5L19 8.5M19 8.5L12 15.5M19 8.5L1 8.5"
+        stroke="black"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/templates/template-hydrogen-default/src/components/CartIcon.jsx

@@ -0,0 +1,33 @@
+/**
+ * A shared component that specifies the icon to represent a cart
+ */
+export default function CartIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M26.5894 12H14.4106C13.8945 12 13.4632 12.3928 13.415 12.9067L12.205 25.8133C12.095 26.9865 13.018 28 14.1963 28H26.8037C27.982 28 28.905 26.9865 28.795 25.8133L27.585 12.9067C27.5368 12.3928 27.1055 12 26.5894 12Z"
+        stroke="#1F2937"
+        strokeWidth="2"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M17 12V14.9895C17 17.0075 18.6359 18.6434 20.6539 18.6434V18.6434C22.6718 18.6434 24.3077 17.0075 24.3077 14.9895V12"
+        stroke="#1F2937"
+        strokeWidth="2"
+      />
+      <path
+        d="M24 11L24 9.5C24 7.567 22.433 6 20.5 6V6C18.567 6 17 7.567 17 9.5L17 11"
+        stroke="#1F2937"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+}