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

package/dist/commands/hydrogen/build.js

@@ -0,0 +1,89 @@
+import path from 'path';
+import * as remix from '@remix-run/dev/dist/compiler.js';
+import fsExtra from 'fs-extra';
+import { output } from '@shopify/cli-kit';
+import colors from '@shopify/cli-kit/node/colors';
+import { getProjectPaths, getRemixConfig } from '../../utils/config.js';
+import { flags } from '../../utils/flags.js';
+import Command from '@shopify/cli-kit/node/base-command';
+import { Flags } from '@oclif/core';
+
+const LOG_WORKER_BUILT = "\u{1F4E6} Worker built";
+class Build extends Command {
+  static description = "Builds a Hydrogen storefront for production";
+  static flags = {
+    ...flags,
+    sourcemap: Flags.boolean({
+      env: "SHOPIFY_HYDROGEN_FLAG_SOURCEMAP"
+    }),
+    entry: Flags.string({
+      env: "SHOPIFY_HYDROGEN_FLAG_SOURCEMAP",
+      required: true
+    }),
+    minify: Flags.boolean({
+      description: "Minify the build output",
+      env: "SHOPIFY_HYDROGEN_FLAG_MINIFY"
+    })
+  };
+  async run() {
+    const { flags: flags2 } = await this.parse(Build);
+    const directory = flags2.path ? path.resolve(flags2.path) : process.cwd();
+    await runBuild({ ...flags2, path: directory });
+  }
+}
+async function runBuild({
+  entry,
+  sourcemap = true,
+  path: appPath
+}) {
+  if (!process.env.NODE_ENV) {
+    process.env.NODE_ENV = "production";
+  }
+  const {
+    root,
+    entryFile,
+    buildPath,
+    buildPathClient,
+    buildPathWorkerFile,
+    publicPath
+  } = getProjectPaths(appPath, entry);
+  console.time(LOG_WORKER_BUILT);
+  const remixConfig = await getRemixConfig(root, entryFile, publicPath);
+  await fsExtra.rm(buildPath, { force: true, recursive: true });
+  output.info(`
+\u{1F3D7}\uFE0F  Building in ${process.env.NODE_ENV} mode...`);
+  await Promise.all([
+    copyPublicFiles(publicPath, buildPathClient),
+    remix.build(remixConfig, {
+      mode: process.env.NODE_ENV,
+      sourcemap,
+      onBuildFailure: (failure) => {
+        remix.formatBuildFailure(failure);
+        throw Error();
+      }
+    })
+  ]);
+  if (process.env.NODE_ENV !== "development") {
+    console.timeEnd(LOG_WORKER_BUILT);
+    const { size } = await fsExtra.stat(buildPathWorkerFile);
+    const sizeMB = size / (1024 * 1024);
+    output.info(
+      output.content`   ${colors.dim(
+        path.relative(root, buildPathWorkerFile)
+      )}  ${output.token.yellow(sizeMB.toFixed(2))} MB\n`
+    );
+    if (sizeMB >= 1) {
+      output.warn(
+        "\u{1F6A8} Worker bundle exceeds 1 MB! This can delay your worker response.\n"
+      );
+    }
+  }
+}
+function copyPublicFiles(publicPath, buildPathClient) {
+  return fsExtra.copy(publicPath, buildPathClient, {
+    recursive: true,
+    overwrite: true
+  });
+}
+
+export { copyPublicFiles, Build as default, runBuild };

package/dist/commands/hydrogen/dev.js

@@ -0,0 +1,116 @@
+import path from 'path';
+import fs from 'fs-extra';
+import * as remix from '@remix-run/dev/dist/compiler.js';
+import { output } from '@shopify/cli-kit';
+import { copyPublicFiles } from './build.js';
+import { getProjectPaths, getRemixConfig } from '../../utils/config.js';
+import { muteDevLogs } from '../../utils/log.js';
+import { flags } from '../../utils/flags.js';
+import Command from '@shopify/cli-kit/node/base-command';
+import { Flags } from '@oclif/core';
+import { startMiniOxygen } from '../../utils/mini-oxygen.js';
+
+const LOG_INITIAL_BUILD = "\n\u{1F3C1} Initial build";
+const LOG_REBUILDING = "\u{1F9F1} Rebuilding...";
+const LOG_REBUILT = "\u{1F680} Rebuilt";
+class Dev extends Command {
+  static description = "Runs Hydrogen storefront in a MiniOxygen worker in development";
+  static flags = {
+    ...flags,
+    port: Flags.integer({
+      description: "Port to run the preview server on",
+      env: "SHOPIFY_HYDROGEN_FLAG_PORT",
+      default: 3e3
+    }),
+    entry: Flags.string({
+      env: "SHOPIFY_HYDROGEN_FLAG_ENTRY",
+      required: true
+    })
+  };
+  async run() {
+    const { flags: flags2 } = await this.parse(Dev);
+    const directory = flags2.path ? path.resolve(flags2.path) : process.cwd();
+    await runDev({ ...flags2, path: directory });
+  }
+}
+async function runDev({
+  entry,
+  port,
+  path: appPath
+}) {
+  if (!process.env.NODE_ENV)
+    process.env.NODE_ENV = "development";
+  muteDevLogs();
+  await compileAndWatch(getProjectPaths(appPath, entry), { port });
+}
+async function compileAndWatch(projectPaths, options = {}, isInit = true) {
+  isInit && console.time(LOG_INITIAL_BUILD);
+  const { root, entryFile, publicPath, buildPathClient, buildPathWorkerFile } = projectPaths;
+  const shouldReloadRemixApp = (file) => file.startsWith(path.resolve(root, "remix.config.")) || process.env.LOCAL_DEV && (file.includes(path.resolve("/hydrogen/src/templates/")) || file.includes(path.resolve("/hydrogen/dist/build/index.js")));
+  const remixConfig = await getRemixConfig(
+    root,
+    entryFile,
+    publicPath,
+    options.cacheBust
+  );
+  const copyingFiles = copyPublicFiles(publicPath, buildPathClient);
+  const stopCompileWatcher = await remix.watch(remixConfig, {
+    mode: process.env.NODE_ENV,
+    async onInitialBuild() {
+      await copyingFiles;
+      if (isInit) {
+        console.timeEnd(LOG_INITIAL_BUILD);
+        await startMiniOxygen({
+          root,
+          port: options.port,
+          watch: true,
+          buildPathWorkerFile,
+          buildPathClient
+        });
+      }
+    },
+    async onFileCreated(file) {
+      output.info(`
+\u{1F4C4} File created: ${path.relative(root, file)}`);
+      if (file.startsWith(publicPath)) {
+        await copyPublicFiles(file, file.replace(publicPath, buildPathClient));
+      }
+      if (shouldReloadRemixApp(file)) {
+        await reloadRemixApp(file);
+      }
+    },
+    async onFileChanged(file) {
+      output.info(`
+\u{1F4C4} File changed: ${path.relative(root, file)}`);
+      if (file.startsWith(publicPath)) {
+        await copyPublicFiles(file, file.replace(publicPath, buildPathClient));
+      }
+      if (shouldReloadRemixApp(file)) {
+        await reloadRemixApp(file);
+      }
+    },
+    async onFileDeleted(file) {
+      output.info(`
+\u{1F4C4} File deleted: ${path.relative(root, file)}`);
+      if (file.startsWith(publicPath)) {
+        await fs.unlink(file.replace(publicPath, buildPathClient));
+      }
+      if (shouldReloadRemixApp(file)) {
+        await reloadRemixApp(file);
+      }
+    },
+    onRebuildStart() {
+      output.info(LOG_REBUILDING);
+      console.time(LOG_REBUILT);
+    },
+    async onRebuildFinish() {
+      console.timeEnd(LOG_REBUILT);
+    }
+  });
+  async function reloadRemixApp(cacheBust) {
+    await stopCompileWatcher();
+    compileAndWatch(projectPaths, { ...options, cacheBust }, false);
+  }
+}
+
+export { Dev as default, runDev };

package/dist/commands/hydrogen/init.js

@@ -0,0 +1,42 @@
+import { cli } from '@remix-run/dev';
+import Command from '@shopify/cli-kit/node/base-command';
+import { Flags } from '@oclif/core';
+
+class Init extends Command {
+  static description = "Creates a new Hydrogen storefront project";
+  static flags = {
+    typescript: Flags.boolean({
+      description: "Use TypeScript",
+      env: "SHOPIFY_HYDROGEN_FLAG_TYPESCRIPT"
+    }),
+    template: Flags.string({
+      description: "The template to use",
+      env: "SHOPIFY_HYDROGEN_FLAG_TEMPLATE",
+      default: "../../templates/demo-store",
+      required: true
+    }),
+    token: Flags.string({
+      description: "A GitHub token used to access access private repository templates"
+    })
+  };
+  async run() {
+    const { flags } = await this.parse(Init);
+    await runInit({ ...flags });
+  }
+}
+function runInit({
+  template,
+  typescript,
+  token
+}) {
+  const defaults = [
+    "--template",
+    template,
+    "--install",
+    typescript ? "--typescript" : "",
+    token ? `--token ${token}` : ""
+  ];
+  cli.run(["create", ...defaults]);
+}
+
+export { Init as default, runInit };

package/dist/commands/hydrogen/preview.js

@@ -0,0 +1,34 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { muteDevLogs } from '../../utils/log.js';
+import { getProjectPaths } from '../../utils/config.js';
+import { flags } from '../../utils/flags.js';
+import { startMiniOxygen } from '../../utils/mini-oxygen.js';
+
+class Preview extends Command {
+  static description = "Runs an existing Hydrogen storefront build in a MiniOxygen worker";
+  static flags = {
+    paths: flags.path,
+    port: flags.port
+  };
+  async run() {
+    const { flags: flags2 } = await this.parse(Preview);
+    await runPreview({ ...flags2 });
+  }
+}
+async function runPreview({
+  port,
+  path: appPath
+}) {
+  if (!process.env.NODE_ENV)
+    process.env.NODE_ENV = "production";
+  const { root, buildPathWorkerFile, buildPathClient } = getProjectPaths(appPath);
+  muteDevLogs({ workerReload: false });
+  await startMiniOxygen({
+    root,
+    port,
+    buildPathClient,
+    buildPathWorkerFile
+  });
+}
+
+export { Preview as default, runPreview };

package/dist/hooks/init.js

@@ -0,0 +1,21 @@
+import { spawnSync } from 'child_process';
+import { output } from '@shopify/cli-kit';
+
+const EXPERIMENTAL_VM_MODULES_FLAG = "--experimental-vm-modules";
+const hook = async function(options) {
+  if (!options.id || !["hydrogen:dev", "hydrogen:preview"].includes(options.id)) {
+    return;
+  }
+  if (!process.execArgv.includes(EXPERIMENTAL_VM_MODULES_FLAG) && !(process.env.NODE_OPTIONS ?? "").includes(EXPERIMENTAL_VM_MODULES_FLAG)) {
+    output.debug(
+      `Restarting CLI process with ${EXPERIMENTAL_VM_MODULES_FLAG} flag.`
+    );
+    const [command, ...args] = process.argv;
+    args.unshift(EXPERIMENTAL_VM_MODULES_FLAG);
+    spawnSync(command, args, { stdio: "inherit" });
+    process.exit(0);
+  }
+};
+var init_default = hook;
+
+export { init_default as default };

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

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

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

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

package/dist/templates/demo-store/.eslintrc.js

@@ -0,0 +1,16 @@
+/**
+ * @type {import("@types/eslint").Linter.BaseConfig}
+ */
+module.exports = {
+  extends: ['plugin:hydrogen/recommended', 'plugin:hydrogen/typescript'],
+  rules: {
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/naming-convention': 'off',
+    'hydrogen/prefer-image-component': 'off',
+    'no-useless-escape': 'off',
+    '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
+    'no-case-declarations': 'off',
+    // TODO: Remove jest plugin from hydrogen/eslint-plugin
+    'jest/no-deprecated-functions': 'off',
+  },
+};

package/dist/templates/demo-store/.graphqlrc.yml

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

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

@@ -0,0 +1,2 @@
+node_modules
+build

package/dist/templates/demo-store/.turbo/turbo-build.log

@@ -0,0 +1,13 @@
+
+> demo-store@0.0.0 build
+> npm run build:css && shopify hydrogen build --entry ./server
+
+
+> demo-store@0.0.0 build:css
+> postcss styles --base styles --dir app/styles --env production
+
+
+🏗️  Building in production mode...
+📦 Worker built: 1.466s
+   dist/worker/index.js  0.57 MB
+

package/dist/templates/demo-store/app/components/AccountAddressBook.tsx

@@ -0,0 +1,97 @@
+import {Form} from '@remix-run/react';
+import type {
+  Customer,
+  MailingAddress,
+} from '@shopify/hydrogen-react/storefront-api-types';
+import {Button, Link, Text} from '~/components';
+
+export function AccountAddressBook({
+  customer,
+  addresses,
+}: {
+  customer: Customer;
+  addresses: MailingAddress[];
+}) {
+  return (
+    <>
+      <div className="grid w-full gap-4 p-4 py-6 md:gap-8 md:p-8 lg:p-12">
+        <h3 className="font-bold text-lead">Address Book</h3>
+        <div>
+          {!addresses?.length && (
+            <Text className="mb-1" width="narrow" as="p" size="copy">
+              You haven&apos;t saved any addresses yet.
+            </Text>
+          )}
+          <div className="w-48">
+            <Button
+              to="address/add"
+              className="mt-2 text-sm w-full mb-6"
+              variant="secondary"
+            >
+              Add an Address
+            </Button>
+          </div>
+          {Boolean(addresses?.length) && (
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+              {customer.defaultAddress && (
+                <Address address={customer.defaultAddress} defaultAddress />
+              )}
+              {addresses
+                .filter((address) => address.id !== customer.defaultAddress?.id)
+                .map((address) => (
+                  <Address key={address.id} address={address} />
+                ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+
+function Address({
+  address,
+  defaultAddress,
+}: {
+  address: MailingAddress;
+  defaultAddress?: boolean;
+}) {
+  return (
+    <div className="lg:p-8 p-6 border border-gray-200 rounded flex flex-col">
+      {defaultAddress && (
+        <div className="mb-3 flex flex-row">
+          <span className="px-3 py-1 text-xs font-medium rounded-full bg-primary/20 text-primary/50">
+            Default
+          </span>
+        </div>
+      )}
+      <ul className="flex-1 flex-row">
+        {(address.firstName || address.lastName) && (
+          <li>
+            {'' +
+              (address.firstName && address.firstName + ' ') +
+              address?.lastName}
+          </li>
+        )}
+        {address.formatted &&
+          address.formatted.map((line: string) => <li key={line}>{line}</li>)}
+      </ul>
+
+      <div className="flex flex-row font-medium mt-6">
+        <Link
+          to={`/account/address/${encodeURIComponent(address.id)}`}
+          className="text-left underline text-sm"
+          prefetch="intent"
+        >
+          Edit
+        </Link>
+        <Form action="address/delete" method="delete">
+          <input type="hidden" name="addressId" value={address.id} />
+          <button className="text-left text-primary/50 ml-6 text-sm">
+            Remove
+          </button>
+        </Form>
+      </div>
+    </div>
+  );
+}

package/dist/templates/demo-store/app/components/AccountDetails.tsx

@@ -0,0 +1,41 @@
+import type {Customer} from '@shopify/hydrogen-react/storefront-api-types';
+import {Link} from '~/components';
+
+export function AccountDetails({customer}: {customer: Customer}) {
+  const {firstName, lastName, email, phone} = customer;
+
+  return (
+    <>
+      <div className="grid w-full gap-4 p-4 py-6 md:gap-8 md:p-8 lg:p-12">
+        <h3 className="font-bold text-lead">Account Details</h3>
+        <div className="lg:p-8 p-6 border border-gray-200 rounded">
+          <div className="flex">
+            <h3 className="font-bold text-base flex-1">Profile & Security</h3>
+            <Link
+              prefetch="intent"
+              className="underline text-sm font-normal"
+              to="/account/edit"
+            >
+              Edit
+            </Link>
+          </div>
+          <div className="mt-4 text-sm text-primary/50">Name</div>
+          <p className="mt-1">
+            {firstName || lastName
+              ? (firstName ? firstName + ' ' : '') + lastName
+              : 'Add name'}{' '}
+          </p>
+
+          <div className="mt-4 text-sm text-primary/50">Contact</div>
+          <p className="mt-1">{phone ?? 'Add mobile'}</p>
+
+          <div className="mt-4 text-sm text-primary/50">Email address</div>
+          <p className="mt-1">{email}</p>
+
+          <div className="mt-4 text-sm text-primary/50">Password</div>
+          <p className="mt-1">**************</p>
+        </div>
+      </div>
+    </>
+  );
+}

package/dist/templates/demo-store/app/components/AddToCartButton.tsx

@@ -0,0 +1,42 @@
+import type {CartLineInput} from '@shopify/hydrogen-react/storefront-api-types';
+import {useFetcher, useMatches} from '@remix-run/react';
+import {Button} from '~/components';
+import {CartAction} from '~/lib/type';
+
+export function AddToCartButton({
+  children,
+  lines,
+  className = '',
+  variant = 'primary',
+  width = 'full',
+  ...props
+}: {
+  children: React.ReactNode;
+  lines: CartLineInput[];
+  className?: string;
+  variant?: 'primary' | 'secondary' | 'inline';
+  width?: 'auto' | 'full';
+  [key: string]: any;
+}) {
+  const [root] = useMatches();
+  const selectedLocale = root?.data?.selectedLocale;
+  const fetcher = useFetcher();
+
+  return (
+    <fetcher.Form action="/cart" method="post">
+      <input type="hidden" name="cartAction" value={CartAction.ADD_TO_CART} />
+      <input type="hidden" name="countryCode" value={selectedLocale.country} />
+      <input type="hidden" name="lines" value={JSON.stringify(lines)} />
+      <Button
+        as="button"
+        type="submit"
+        width={width}
+        variant={variant}
+        className={className}
+        {...props}
+      >
+        {children}
+      </Button>
+    </fetcher.Form>
+  );
+}

package/dist/templates/demo-store/app/components/Breadcrumbs.tsx

@@ -0,0 +1,36 @@
+import {Text} from './Text';
+import {Link} from './Link';
+
+interface Breadcrumb {
+  handle: string;
+  title: string;
+  id: string;
+}
+
+// Renders a breadcrumb trail from a references metafield list
+export function Breadcrumbs({
+  breadcrumbs,
+}: {
+  breadcrumbs?: Breadcrumb[] | null;
+}) {
+  if (!breadcrumbs || breadcrumbs.length === 0) {
+    return null;
+  }
+
+  const breadcrumbsMarkup = breadcrumbs.map((breadcrumb, index) => {
+    const isLastBreadcrumb = index === breadcrumbs.length - 1;
+
+    return isLastBreadcrumb ? (
+      <Text key={breadcrumb.id} as="span">
+        {breadcrumb.title}
+      </Text>
+    ) : (
+      <span key={breadcrumb.id}>
+        <Link to={`/collections/${breadcrumb.handle}`}>{breadcrumb.title}</Link>
+        <span className="px-2">/</span>
+      </span>
+    );
+  });
+
+  return <nav className="flex items-center">{breadcrumbsMarkup}</nav>;
+}

package/dist/templates/demo-store/app/components/Button.tsx

@@ -0,0 +1,56 @@
+import {forwardRef} from 'react';
+import {Link} from '@remix-run/react';
+import clsx from 'clsx';
+
+import {missingClass} from '~/lib/utils';
+
+export const Button = forwardRef(
+  (
+    {
+      as = 'button',
+      className = '',
+      variant = 'primary',
+      width = 'auto',
+      ...props
+    }: {
+      as?: React.ElementType;
+      className?: string;
+      variant?: 'primary' | 'secondary' | 'inline';
+      width?: 'auto' | 'full';
+      [key: string]: any;
+    },
+    ref,
+  ) => {
+    const Component = props?.to ? Link : as;
+
+    const baseButtonClasses =
+      'inline-block rounded font-medium text-center py-3 px-6';
+
+    const variants = {
+      primary: `${baseButtonClasses} bg-primary text-contrast`,
+      secondary: `${baseButtonClasses} border border-primary/10 bg-contrast text-primary`,
+      inline: 'border-b border-primary/10 leading-none pb-1',
+    };
+
+    const widths = {
+      auto: 'w-auto',
+      full: 'w-full',
+    };
+
+    const styles = clsx(
+      missingClass(className, 'bg-') && variants[variant],
+      missingClass(className, 'w-') && widths[width],
+      className,
+    );
+
+    return (
+      <Component
+        // @todo: not supported until react-router makes it into Remix.
+        // preventScrollReset={true}
+        className={styles}
+        {...props}
+        ref={ref}
+      />
+    );
+  },
+);