@shopify/create-hydrogen 0.2.0 → 0.16.0

package/index.js

@@ -1,205 +0,0 @@
-#!/usr/bin/env node
-// @ts-check
-
-// Inspired by and borrowed from https://github.com/vitejs/vite/blob/main/packages/create-app/index.js
-
-const fs = require('fs');
-const path = require('path');
-const argv = require('minimist')(process.argv.slice(2));
-const {prompt} = require('enquirer');
-const {yellow} = require('kolorist');
-const {copy} = require('./scripts/utils.js');
-
-const cwd = process.cwd();
-
-const TEMPLATES = ['hydrogen'];
-
-const renameFiles = {
-  _gitignore: '.gitignore',
-};
-
-console.warn(
-  'DEPRECATED: Please use `npm init hydrogen-app@latest` or `yarn create hydrogen-app` instead.'
-);
-
-async function init() {
-  let targetDir = argv._[0];
-  if (!targetDir) {
-    /**
-     * @type {{ projectName: string }}
-     */
-    const {projectName} = await prompt({
-      type: 'input',
-      name: 'projectName',
-      message: `Project name:`,
-      initial: 'hydrogen-app',
-    });
-    targetDir = projectName;
-  }
-
-  const packageName = await getValidPackageName(targetDir);
-  const root = path.join(cwd, targetDir);
-  console.log(`\nScaffolding Hydrogen app in ${root}...`);
-
-  if (!fs.existsSync(root)) {
-    fs.mkdirSync(root, {recursive: true});
-  } else {
-    const existing = fs.readdirSync(root);
-    if (existing.length) {
-      /**
-       * @type {{ yes: boolean }}
-       */
-      const {yes} = await prompt({
-        type: 'confirm',
-        name: 'yes',
-        initial: 'Y',
-        message:
-          `Target directory ${targetDir} is not empty.\n` +
-          `Remove existing files and continue?`,
-      });
-      if (yes) {
-        emptyDir(root);
-      } else {
-        return;
-      }
-    }
-  }
-
-  // Determine template
-  let template = argv.t || argv.template;
-  let message = 'Select a template:';
-  let isValidTemplate = false;
-
-  // --template expects a value
-  if (typeof template === 'string') {
-    isValidTemplate = TEMPLATES.includes(template);
-    message = `${template} isn't a valid template. Please choose from below:`;
-  }
-
-  if (!template || !isValidTemplate) {
-    /**
-     * @type {{ t: string }}
-     */
-    const {t} = await prompt({
-      type: 'select',
-      name: 't',
-      message,
-      choices: TEMPLATES,
-    });
-    template = t;
-  }
-
-  const templateDir = path.join(__dirname, `template-${template}`);
-
-  const write = (file, content) => {
-    const targetPath = renameFiles[file]
-      ? path.join(root, renameFiles[file])
-      : path.join(root, file);
-    if (content) {
-      fs.writeFileSync(targetPath, content);
-    } else {
-      copy(path.join(templateDir, file), targetPath);
-    }
-  };
-
-  const files = fs.readdirSync(templateDir);
-  const skipFiles = ['package.json', 'node_modules', 'dist'];
-  for (const file of files.filter((f) => !skipFiles.includes(f))) {
-    write(file);
-  }
-
-  const pkg = require(path.join(templateDir, `package.json`));
-
-  pkg.name = packageName;
-
-  /**
-   * When the user is running a LOCAL version of hydrogen external from the
-   * monorepo, they expect to use the local version of the library instead
-   * of the registry version. We need to use a file reference here because
-   * yarn fails to link scoped packages.
-   **/
-
-  if (process.env.LOCAL) {
-    pkg.dependencies['@shopify/hydrogen'] =
-      'file:../../Shopify/hydrogen/packages/hydrogen';
-  }
-
-  /**
-   * Rewrite the build:client task to strip out the custom HYDROGEN_PATH
-   * we add for use in the monorepo.
-   */
-  pkg.scripts['build:client'] =
-    pkg.scripts['build:client'].match(/(vite .+)$/)[0];
-
-  write('package.json', JSON.stringify(pkg, null, 2));
-
-  const pkgManager = /yarn/.test(process.env.npm_execpath) ? 'yarn' : 'npm';
-
-  console.log(`\nDone. Now:\n`);
-  console.log(
-    `  Update ${yellow(
-      packageName + '/shopify.config.js'
-    )} with the values for your storefront.`
-  );
-  console.log(`\nand then run:\n`);
-  if (root !== cwd) {
-    console.log(`  cd ${path.relative(cwd, root)}`);
-  }
-
-  /**
-   * The LOCAL option only works with Yarn due to issues with NPM
-   * and symlinking yarn monorepos.
-   */
-  const usesYarn = pkgManager === 'yarn' || process.env.LOCAL;
-
-  console.log(`  ${usesYarn ? `yarn` : `npm install`}`);
-  console.log(`  ${usesYarn ? `yarn dev` : `npm run dev`}`);
-  console.log();
-}
-
-async function getValidPackageName(projectName) {
-  const packageNameRegExp =
-    /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/;
-  if (packageNameRegExp.test(projectName)) {
-    return projectName;
-  } else {
-    const suggestedPackageName = projectName
-      .trim()
-      .toLowerCase()
-      .replace(/\s+/g, '-')
-      .replace(/^[._]/, '')
-      .replace(/[^a-z0-9-~]+/g, '-');
-
-    /**
-     * @type {{ inputPackageName: string }}
-     */
-    const {inputPackageName} = await prompt({
-      type: 'input',
-      name: 'inputPackageName',
-      message: `Package name:`,
-      initial: suggestedPackageName,
-      validate: (input) =>
-        packageNameRegExp.test(input) ? true : 'Invalid package.json name',
-    });
-    return inputPackageName;
-  }
-}
-
-function emptyDir(dir) {
-  if (!fs.existsSync(dir)) {
-    return;
-  }
-  for (const file of fs.readdirSync(dir)) {
-    const abs = path.resolve(dir, file);
-    if (fs.lstatSync(abs).isDirectory()) {
-      emptyDir(abs);
-      fs.rmdirSync(abs);
-    } else {
-      fs.unlinkSync(abs);
-    }
-  }
-}
-
-init().catch((e) => {
-  console.error(e);
-});

package/scripts/tmp-copy-template-from-dev.js

@@ -1,21 +0,0 @@
-// @ts-check
-
-/**
- * This is a temporary script meant to copy `packages/dev` to `./template-hydrogen`
- * while we are actively developing H2 in `dev`. Eventually, the template will just
- * live in this folder.
- */
-
-const path = require('path');
-const fs = require('fs');
-const {copy} = require('./utils');
-
-const devPath = path.resolve(__dirname, '..', '..', 'dev');
-const templatePath = path.resolve(__dirname, '..', './template-hydrogen');
-const skipFiles = ['node_modules', 'dist'];
-
-// Remove the symlink and replace it with a folder
-fs.unlinkSync(templatePath);
-fs.mkdirSync(templatePath, {recursive: true});
-
-copy(devPath, templatePath, skipFiles);

package/scripts/utils.js

@@ -1,29 +0,0 @@
-// @ts-check
-const fs = require('fs');
-const path = require('path');
-
-function copyDir(srcDir, destDir, skipFiles = []) {
-  fs.mkdirSync(destDir, {recursive: true});
-  for (const file of fs.readdirSync(srcDir)) {
-    const srcFile = path.resolve(srcDir, file);
-    const destFile = path.resolve(destDir, file);
-    copy(srcFile, destFile, skipFiles);
-  }
-}
-
-function copy(src, dest, skipFiles = []) {
-  if (skipFiles.some((file) => src.includes(file))) return;
-
-  const stat = fs.statSync(src);
-
-  if (stat.isDirectory()) {
-    copyDir(src, dest, skipFiles);
-  } else {
-    fs.copyFileSync(src, dest);
-  }
-}
-
-module.exports = {
-  copy,
-  copyDir,
-};

package/template-hydrogen/.eslintrc.js

@@ -1,41 +0,0 @@
-module.exports = {
-  extends: [
-    'plugin:@shopify/typescript',
-    'plugin:@shopify/react',
-    'plugin:@shopify/node',
-    'plugin:@shopify/prettier',
-  ],
-  rules: {
-    '@shopify/jsx-no-hardcoded-content': 'off',
-    '@shopify/jsx-no-complex-expressions': 'off',
-
-    /**
-     * React overrides
-     */
-    'react/react-in-jsx-scope': 'off',
-    'react/jsx-filename-extension': ['error', {extensions: ['.tsx', '.jsx']}],
-    'react/prop-types': 'off',
-
-    /**
-     * Import overrides
-     */
-    'import/no-unresolved': ['error', {ignore: ['@shopify/hydrogen']}],
-
-    /**
-     * ESlint overrides
-     */
-    'no-use-before-define': 'off',
-    'no-warning-comments': 'off',
-
-    /**
-     * jsx-a11y overrides
-     */
-    'jsx-a11y/click-events-have-key-events': 'off',
-    'jsx-a11y/no-noninteractive-element-interactions': 'off',
-
-    // These two rules result in a significant number of false positives so we
-    // need to keep them disabled.
-    'jsx-a11y/label-has-for': 'off',
-    'jsx-a11y/control-has-associated-label': 'off',
-  },
-};

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

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["graphql.vscode-graphql", "bradlc.vscode-tailwindcss"]
-}

package/template-hydrogen/Dockerfile

@@ -1,15 +0,0 @@
-FROM node:14 AS build-env
-ADD . /app
-
-WORKDIR /app
-RUN npm install
-RUN npm run build
-
-FROM gcr.io/distroless/nodejs:14 AS run-env
-ENV NODE_ENV production
-COPY --from=build-env /app /app
-
-EXPOSE 8080
-
-WORKDIR /app
-CMD ["server.js"]

package/template-hydrogen/index.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Hydrogen App</title>
-    <link rel="stylesheet" href="/src/index.css" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/entry-client.jsx"></script>
-  </body>
-</html>

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

@@ -1,42 +0,0 @@
-import {
-  ShopifyServerProvider,
-  DefaultRoutes,
-  CartServerProvider,
-} from '@shopify/hydrogen';
-import {Switch} from 'react-router-dom';
-import {Suspense} from 'react';
-
-import shopifyConfig from '../shopify.config';
-
-import DefaultSeo from './components/DefaultSeo.server';
-import NotFound from './components/NotFound.server';
-import CartProvider from './components/CartProvider.client';
-
-export default function App({...serverState}) {
-  const pages = import.meta.globEager('./pages/**/*.server.(jsx|tsx)');
-
-  return (
-    <ShopifyServerProvider shopifyConfig={shopifyConfig} {...serverState}>
-      {/* START: Workaround for CartContext */}
-      <CartServerProvider request={serverState.request}>
-        {({cart, numCartLines}) => {
-          return (
-            <CartProvider cart={cart} numCartLines={numCartLines}>
-              {/* END: Workaround for CartContext */}
-              <Suspense fallback="Loading...">
-                <DefaultSeo />
-                <Switch>
-                  <DefaultRoutes
-                    pages={pages}
-                    serverState={serverState}
-                    fallback={<NotFound />}
-                  />
-                </Switch>
-              </Suspense>
-            </CartProvider>
-          );
-        }}
-      </CartServerProvider>
-    </ShopifyServerProvider>
-  );
-}

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

@@ -1,296 +0,0 @@
-import FocusTrap from 'focus-trap-react';
-import {
-  useCart,
-  useCartLinesTotalQuantity,
-  CartCheckoutButton,
-  Link,
-  CartLines,
-  CartLine,
-  CartShopPayButton,
-  CartEstimatedCost,
-} from '@shopify/hydrogen/client';
-
-import {useCartUI} from './CartUIProvider.client';
-
-export default function Cart() {
-  const {isCartOpen} = useCartUI();
-  const itemCount = useCartLinesTotalQuantity();
-  const {error} = useCart();
-
-  return (
-    <FocusTrap active={isCartOpen} focusTrapOptions={{allowOutsideClick: true}}>
-      <aside
-        className={`pointer-events-none z-50 fixed right-0 top-0 bottom-0 md:p-5 flex flex-col w-full max-w-md min-w-sm transition-transform duration-500 transform-gpu ${
-          isCartOpen ? 'right-0' : 'translate-x-full'
-        }`}
-        id="cart"
-        tabIndex={-1}
-        aria-hidden={!isCartOpen}
-        aria-label="Cart"
-      >
-        <div className="overflow-hidden md:h-auto pointer-events-auto">
-          <div className="flex flex-col shadow-xl max-h-full">
-            <header className="bg-white px-4 md:px-8 md:h-20 border-b border-gray-300 border-solid rounded-t-md flex flex-shrink-0 items-center justify-between">
-              <CartHeader />
-            </header>
-
-            <div className="bg-white px-4 md:px-8 overflow-y-scroll md:max-h-96">
-              {itemCount > 0 ? (
-                <CartLineItems />
-              ) : (
-                <p className="text-center text-gray-600 my-8">
-                  Your cart is empty
-                </p>
-              )}
-            </div>
-
-            {error ? (
-              <div
-                className="border bg-red-200 border-red-400 text-red-800 mb-4 mx-8 px-4 py-3 rounded relative"
-                role="alert"
-              >
-                {error}
-              </div>
-            ) : null}
-
-            <footer
-              className={`${
-                itemCount > 0 ? 'border-t border-solid border-gray-300' : ''
-              } bg-white p-4 md:p-8 space-y-4 flex-shrink-0 rounded-b-md`}
-            >
-              {itemCount > 0 ? <CartFooter /> : null}
-            </footer>
-          </div>
-        </div>
-      </aside>
-    </FocusTrap>
-  );
-}
-
-function CartHeader() {
-  const {isCartOpen, toggleCart} = useCartUI();
-  const itemCount = useCartLinesTotalQuantity();
-
-  return (
-    <>
-      <button
-        type="button"
-        aria-expanded={isCartOpen}
-        aria-controls="cart"
-        onClick={toggleCart}
-      >
-        <div>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-5 w-5 text-gray-600"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fillRule="evenodd"
-              d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-              clipRule="evenodd"
-            />
-          </svg>
-        </div>
-        <span className="sr-only">Close cart</span>
-      </button>
-      <div className="h-12 w-12 p-2 md:h-7 md:w-7 md:p-0">
-        <div className="relative">
-          <svg
-            width="19"
-            height="24"
-            viewBox="0 0 19 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M15.5894 7H3.41063C2.89451 7 2.46318 7.39279 2.415 7.90666L1.205 20.8133C1.09502 21.9865 2.01796 23 3.19627 23H15.8037C16.982 23 17.905 21.9865 17.795 20.8133L16.585 7.90666C16.5368 7.39279 16.1055 7 15.5894 7Z"
-              stroke="#1F2937"
-              strokeWidth="2"
-              strokeMiterlimit="10"
-              strokeLinecap="round"
-            />
-            <path
-              d="M6 7V9.98952C6 12.0075 7.63589 13.6434 9.65386 13.6434V13.6434C11.6718 13.6434 13.3077 12.0075 13.3077 9.98952V7"
-              stroke="#1F2937"
-              strokeWidth="2"
-            />
-            <path
-              d="M13 6L13 4.5C13 2.567 11.433 1 9.5 1V1C7.567 1 6 2.567 6 4.5L6 6"
-              stroke="#1F2937"
-              strokeWidth="2"
-              className={`${itemCount > 0 ? 'block' : 'hidden'}`}
-            />
-          </svg>
-        </div>
-      </div>
-    </>
-  );
-}
-
-function CartLineItems() {
-  return (
-    <div role="table" aria-label="Shopping cart">
-      <div role="row" className="sr-only">
-        <div role="columnheader">Image</div>
-        <div role="columnheader">Item details</div>
-        <div role="columnheader">Price</div>
-      </div>
-      <CartLines>
-        {({merchandise}) => (
-          <div
-            role="row"
-            className="pt-8 pb-8 border-b border-solid border-gray-300 last:border-0"
-          >
-            <div className="flex space-x-8 relative">
-              <div role="cell">
-                <div className="w-20 h-20 relative">
-                  <Link to={`/products/${merchandise.product.handle}`}>
-                    <CartLine.Image className="bg-white rounded w-full h-full object-cover" />
-                  </Link>
-                </div>
-              </div>
-              <div
-                role="cell"
-                className="flex-grow flex flex-col justify-between"
-              >
-                <div className="flex gap-2">
-                  <div className="flex-grow">
-                    <CartLine.ProductTitle className="text-gray-900 font-semibold" />
-                    <CartLine.SelectedOptions className="text-sm">
-                      {({name, value}) => (
-                        <>
-                          {name}: {value}
-                        </>
-                      )}
-                    </CartLine.SelectedOptions>
-                    <CartLine.Attributes className="text-sm">
-                      {({key, value}) => (
-                        <>
-                          {key}: {value}
-                        </>
-                      )}
-                    </CartLine.Attributes>
-                  </div>
-                  <div className="flex-shrink">
-                    <CartLine.QuantityAdjustButton
-                      adjust="remove"
-                      aria-label="Remove from cart"
-                    >
-                      <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>
-                    </CartLine.QuantityAdjustButton>
-                  </div>
-                </div>
-                <div className="flex mt-2">
-                  <div className="flex-grow">
-                    <div className="border border-solid border-gray-300 inline-flex items-center text-gray-500 rounded">
-                      <CartLine.QuantityAdjustButton
-                        adjust="decrease"
-                        className="p-2"
-                        aria-label="Decrease quantity"
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          className="h-5 w-5"
-                          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>
-                      </CartLine.QuantityAdjustButton>
-                      <CartLine.Quantity
-                        as="div"
-                        className="p-2 text-gray-900 text-center"
-                      />
-                      <CartLine.QuantityAdjustButton
-                        adjust="increase"
-                        className="p-2"
-                        aria-label="Increase quantity"
-                      >
-                        <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>
-                      </CartLine.QuantityAdjustButton>
-                    </div>
-                  </div>
-                </div>
-                <CartLine.Price
-                  role="cell"
-                  className="absolute bottom-0 right-0 mb-3"
-                />
-              </div>
-            </div>
-          </div>
-        )}
-      </CartLines>
-    </div>
-  );
-}
-
-function CartFooter() {
-  return (
-    <>
-      <div role="table" className="w-full" aria-label="Cost summary">
-        <div role="row" className="flex items-center justify-between">
-          <div role="rowheader" className="font-semibold">
-            Subtotal
-          </div>
-          <CartEstimatedCost
-            amountType="subtotal"
-            role="cell"
-            className="text-right"
-          />
-        </div>
-        <div role="row" className="flex items-center justify-between">
-          <div role="rowheader" className="font-semibold">
-            Shipping
-          </div>
-          <div role="cell" className="text-right">
-            Free
-          </div>
-        </div>
-        <div role="row" className="flex items-center justify-between">
-          <div role="rowheader" className="font-semibold">
-            Total
-          </div>
-          <CartEstimatedCost
-            amountType="total"
-            role="cell"
-            className="text-right"
-          />
-        </div>
-      </div>
-      <div className="space-y-2">
-        <CartShopPayButton className="flex justify-center w-full" />
-        <CartCheckoutButton className="block w-full text-white uppercase text-sm rounded-md md:mb-8 bg-black px-3 py-4 disabled:cursor-wait disabled:opacity-60">
-          Checkout
-        </CartCheckoutButton>
-      </div>
-    </>
-  );
-}