@shopify/cli-hydrogen 3.39.0 → 4.0.0-alpha.10

package/dist/commands/hydrogen/build.js

@@ -0,0 +1,106 @@
+import path from 'path';
+import { output } from '@shopify/cli-kit';
+import colors from '@shopify/cli-kit/node/colors';
+import { getProjectPaths, getRemixConfig } from '../../utils/config.js';
+import { commonFlags } from '../../utils/flags.js';
+import Command from '@shopify/cli-kit/node/base-command';
+import Flags from '@oclif/core/lib/flags.js';
+import { checkLockfileStatus } from '../../utils/check-lockfile.js';
+import { findMissingRoutes } from '../../utils/missing-routes.js';
+
+const LOG_WORKER_BUILT = "\u{1F4E6} Worker built";
+class Build extends Command {
+  static description = "Builds a Hydrogen storefront for production";
+  static flags = {
+    ...commonFlags,
+    sourcemap: Flags.boolean({
+      env: "SHOPIFY_HYDROGEN_FLAG_SOURCEMAP"
+    }),
+    entry: Flags.string({
+      env: "SHOPIFY_HYDROGEN_FLAG_SOURCEMAP",
+      required: true
+    }),
+    disableRouteWarning: Flags.boolean({
+      description: "Disable warning about missing standard routes",
+      env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_ROUTE_WARNING"
+    })
+  };
+  async run() {
+    const { flags } = await this.parse(Build);
+    const directory = flags.path ? path.resolve(flags.path) : process.cwd();
+    await runBuild({ ...flags, path: directory });
+  }
+}
+async function runBuild({
+  entry,
+  path: appPath,
+  sourcemap = true,
+  disableRouteWarning = false
+}) {
+  if (!process.env.NODE_ENV) {
+    process.env.NODE_ENV = "production";
+  }
+  const {
+    root,
+    entryFile,
+    buildPath,
+    buildPathClient,
+    buildPathWorkerFile,
+    publicPath
+  } = getProjectPaths(appPath, entry);
+  await checkLockfileStatus(root);
+  console.time(LOG_WORKER_BUILT);
+  const { default: fsExtra } = await import('fs-extra');
+  const [remixConfig] = await Promise.all([
+    getRemixConfig(root, entryFile, publicPath),
+    fsExtra.rm(buildPath, { force: true, recursive: true })
+  ]);
+  output.info(`
+\u{1F3D7}\uFE0F  Building in ${process.env.NODE_ENV} mode...`);
+  const { build } = await import('@remix-run/dev/dist/compiler/build.js');
+  const { logCompileFailure } = await import('@remix-run/dev/dist/compiler/onCompileFailure.js');
+  await Promise.all([
+    copyPublicFiles(publicPath, buildPathClient),
+    build(remixConfig, {
+      mode: process.env.NODE_ENV,
+      sourcemap,
+      onCompileFailure: (failure) => {
+        logCompileFailure(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"
+      );
+    }
+  }
+  if (!disableRouteWarning) {
+    const missingRoutes = findMissingRoutes(remixConfig);
+    if (missingRoutes.length) {
+      output.warn(
+        "\u{1F6A8} Standard Shopify routes missing; run `shopify hydrogen check routes` for more details."
+      );
+    }
+  }
+  process.exit(0);
+}
+async function copyPublicFiles(publicPath, buildPathClient) {
+  const { default: fsExtra } = await import('fs-extra');
+  return fsExtra.copy(publicPath, buildPathClient, {
+    recursive: true,
+    overwrite: true
+  });
+}
+
+export { copyPublicFiles, Build as default, runBuild };

package/dist/commands/hydrogen/check.js

@@ -0,0 +1,34 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { path } from '@shopify/cli-kit';
+import { commonFlags } from '../../utils/flags.js';
+import { getRemixConfig } from '../../utils/config.js';
+import { logMissingRoutes, findMissingRoutes } from '../../utils/missing-routes.js';
+
+class GenerateRoute extends Command {
+  static flags = {
+    path: commonFlags.path
+  };
+  static args = [
+    {
+      name: "resource",
+      description: `The resource to check. Currently only 'routes' is supported.`,
+      required: true,
+      options: ["routes"]
+    }
+  ];
+  async run() {
+    const { flags, args } = await this.parse(GenerateRoute);
+    const directory = flags.path ? path.resolve(flags.path) : process.cwd();
+    if (args.resource === "routes") {
+      await runCheckRoutes({ directory });
+    } else {
+      throw new Error("Invalid command argument.");
+    }
+  }
+}
+async function runCheckRoutes({ directory }) {
+  const remixConfig = await getRemixConfig(directory, "", "");
+  logMissingRoutes(findMissingRoutes(remixConfig));
+}
+
+export { GenerateRoute as default };

package/dist/commands/hydrogen/dev.js

@@ -0,0 +1,110 @@
+import path from 'path';
+import fs from 'fs/promises';
+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 { commonFlags } from '../../utils/flags.js';
+import Command from '@shopify/cli-kit/node/base-command';
+import Flags from '@oclif/core/lib/flags.js';
+import { startMiniOxygen } from '../../utils/mini-oxygen.js';
+import { checkHydrogenVersion } from '../../utils/check-version.js';
+import { addVirtualRoutes } from '../../utils/virtual-routes.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 = {
+    ...commonFlags,
+    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
+    }),
+    disableVirtualRoutes: Flags.boolean({
+      env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_VIRTUAL_ROUTES",
+      default: false
+    })
+  };
+  async run() {
+    const { flags } = await this.parse(Dev);
+    const directory = flags.path ? path.resolve(flags.path) : process.cwd();
+    await runDev({ ...flags, path: directory });
+  }
+}
+async function runDev({
+  entry,
+  port,
+  path: appPath,
+  disableVirtualRoutes
+}) {
+  if (!process.env.NODE_ENV)
+    process.env.NODE_ENV = "development";
+  muteDevLogs();
+  await compileAndWatch(entry, appPath, port, disableVirtualRoutes);
+}
+async function compileAndWatch(entry, appPath, port, disableVirtualRoutes = false) {
+  console.time(LOG_INITIAL_BUILD);
+  const { root, entryFile, publicPath, buildPathClient, buildPathWorkerFile } = getProjectPaths(appPath, entry);
+  const checkingHydrogenVersion = checkHydrogenVersion(root);
+  const copyingFiles = copyPublicFiles(publicPath, buildPathClient);
+  const reloadConfig = async () => {
+    const config = await getRemixConfig(root, entryFile, publicPath);
+    return disableVirtualRoutes ? config : addVirtualRoutes(config);
+  };
+  const { watch } = await import('@remix-run/dev/dist/compiler/watch.js');
+  await watch(await reloadConfig(), {
+    reloadConfig,
+    mode: process.env.NODE_ENV,
+    async onInitialBuild() {
+      await copyingFiles;
+      console.timeEnd(LOG_INITIAL_BUILD);
+      await startMiniOxygen({
+        root,
+        port,
+        watch: true,
+        buildPathWorkerFile,
+        buildPathClient
+      });
+      const showUpgrade = await checkingHydrogenVersion;
+      if (showUpgrade)
+        showUpgrade();
+    },
+    async onFileCreated(file) {
+      output.info(`
+\u{1F4C4} File created: ${path.relative(root, file)}`);
+      if (file.startsWith(publicPath)) {
+        await copyPublicFiles(file, file.replace(publicPath, buildPathClient));
+      }
+    },
+    async onFileChanged(file) {
+      output.info(`
+\u{1F4C4} File changed: ${path.relative(root, file)}`);
+      if (file.startsWith(publicPath)) {
+        await copyPublicFiles(file, file.replace(publicPath, buildPathClient));
+      }
+    },
+    async onFileDeleted(file) {
+      output.info(`
+\u{1F4C4} File deleted: ${path.relative(root, file)}`);
+      if (file.startsWith(publicPath)) {
+        await fs.unlink(file.replace(publicPath, buildPathClient));
+      }
+    },
+    onRebuildStart() {
+      output.info(LOG_REBUILDING);
+      console.time(LOG_REBUILT);
+    },
+    async onRebuildFinish() {
+      console.timeEnd(LOG_REBUILT);
+    }
+  });
+}
+
+export { Dev as default, runDev };

package/dist/commands/hydrogen/generate/route.js

@@ -0,0 +1,174 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { path, error, file, ui } from '@shopify/cli-kit';
+import { renderSuccess } from '@shopify/cli-kit/node/ui';
+import { commonFlags } from '../../../utils/flags.js';
+import Flags from '@oclif/core/lib/flags.js';
+import ts from 'typescript';
+import prettier from 'prettier';
+
+const ROUTE_MAP = {
+  page: "/pages/$pageHandle",
+  cart: "/cart",
+  products: "/products/$productHandle",
+  collections: "/collections/$collectionHandle",
+  policies: ["/policies/index", "/policies/$policyHandle"],
+  robots: "/[robots.txt]",
+  sitemap: "/[sitemap.xml]",
+  account: ["/account/login", "/account/register"]
+};
+const ROUTES = [...Object.keys(ROUTE_MAP), "all"];
+class GenerateRoute extends Command {
+  static flags = {
+    path: commonFlags.path,
+    adapter: Flags.string({
+      description: "The Remix adapter for imports in the template (default: @shopify/remix-oxygen)",
+      env: "SHOPIFY_HYDROGEN_FLAG_ADAPTER"
+    }),
+    force: Flags.boolean({
+      char: "f",
+      description: "Overwrite existing files",
+      env: "SHOPIFY_HYDROGEN_FLAG_FORCE"
+    })
+  };
+  static args = [
+    {
+      name: "route",
+      description: `The route to generate a route for.`,
+      required: true,
+      options: ROUTES,
+      env: "SHOPIFY_HYDROGEN_ARG_ROUTE"
+    }
+  ];
+  async run() {
+    const result = /* @__PURE__ */ new Map();
+    const { flags, args } = await this.parse(GenerateRoute);
+    const directory = flags.path ? path.resolve(flags.path) : process.cwd();
+    const { route } = args;
+    const routePath = route === "all" ? Object.values(ROUTE_MAP).flat() : ROUTE_MAP[route];
+    if (!routePath) {
+      throw new error.Abort(
+        `No template generator found for ${route}. Try one of ${ROUTES.join()}`
+      );
+    }
+    const isTypescript = await file.exists(
+      path.join(directory, "tsconfig.json")
+    );
+    const routesArray = Array.isArray(routePath) ? routePath : [routePath];
+    try {
+      for (const item of routesArray) {
+        result.set(
+          item,
+          await runGenerate(item, {
+            directory,
+            typescript: isTypescript,
+            force: flags.force,
+            adapter: flags.adapter
+          })
+        );
+      }
+    } catch (err) {
+      throw new error.Abort(err.message);
+    }
+    const extension = isTypescript ? ".tsx" : ".jsx";
+    const success = Array.from(result.values()).filter(
+      (result2) => result2.operation !== "skipped"
+    );
+    renderSuccess({
+      headline: `${success.length} of ${result.size} route${result.size > 1 ? "s" : ""} generated`,
+      body: Array.from(result.entries()).map(([path2, result2]) => {
+        const { operation } = result2;
+        return `\u2022 [${operation}] app/routes${path2}${extension}`;
+      }).join("\n")
+    });
+  }
+}
+async function runGenerate(route, {
+  directory,
+  typescript,
+  force,
+  adapter,
+  templatesRoot = new URL("../../../", import.meta.url).pathname
+}) {
+  const extension = typescript ? ".tsx" : ".jsx";
+  const templatePath = path.join(templatesRoot, "templates", `${route}.tsx`);
+  const destinationPath = path.join(
+    directory,
+    "app",
+    "routes",
+    `${route}${extension}`
+  );
+  const relativeDestinationPath = path.relative(directory, destinationPath);
+  if (!force && await file.exists(destinationPath)) {
+    const options = [
+      { name: "No", value: "skip" },
+      { name: `Yes`, value: "overwrite" }
+    ];
+    const choice = await ui.prompt([
+      {
+        type: "select",
+        name: "value",
+        message: `The file ${path.relativize(
+          relativeDestinationPath
+        )} already exists. Do you want to overwrite it?`,
+        choices: options
+      }
+    ]);
+    return {
+      operation: choice.value === "skip" ? "skipped" : "overwritten"
+    };
+  }
+  let templateContent = await file.read(templatePath);
+  if (!typescript) {
+    const config = await file.exists(path.join(directory, "jsconfig.json")) ? await import(path.join(directory, "jsconfig.json")) : {
+      lib: ["DOM", "DOM.Iterable", "ES2022"],
+      isolatedModules: true,
+      esModuleInterop: true,
+      resolveJsonModule: true,
+      target: "ES2022",
+      strict: true,
+      allowJs: true,
+      forceConsistentCasingInFileNames: true,
+      skipLibCheck: true
+    };
+    const withArtificialNewLines = escapeNewLines(templateContent);
+    const compiled = compile(withArtificialNewLines, config);
+    templateContent = restoreNewLines(compiled.outputText);
+  }
+  if (adapter) {
+    templateContent = templateContent.replace(
+      /@shopify\/remix-oxygen/g,
+      adapter
+    );
+  }
+  templateContent = await format(templateContent, destinationPath);
+  if (!await file.exists(path.dirname(destinationPath))) {
+    await file.mkdir(path.dirname(destinationPath));
+  }
+  await file.write(destinationPath, templateContent);
+  return {
+    operation: "generated"
+  };
+}
+const escapeNewLines = (code) => code.replace(/\n\n/g, "\n/* :newline: */");
+const restoreNewLines = (code) => code.replace(/\/\* :newline: \*\//g, "\n");
+function compile(code, options = {}) {
+  return ts.transpileModule(code, {
+    reportDiagnostics: false,
+    compilerOptions: {
+      ...options,
+      jsx: 1,
+      removeComments: false
+    }
+  });
+}
+async function format(content, filePath) {
+  const config = await prettier.resolveConfig(filePath) || {};
+  const ext = path.extname(filePath);
+  const formattedContent = await prettier.format(content, {
+    parser: ext === ".tsx" || ext === ".ts" ? "typescript" : "babel",
+    ...config
+  });
+  return formattedContent;
+}
+
+export { GenerateRoute as default, runGenerate };

package/dist/commands/hydrogen/generate/route.test.js

@@ -0,0 +1,121 @@
+import { describe, beforeEach, vi, it, expect } from 'vitest';
+import { temporaryDirectoryTask } from 'tempy';
+import { runGenerate } from './route.js';
+import { file, path, ui } from '@shopify/cli-kit';
+
+describe("generate/route", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    vi.mock("@shopify/cli-kit", async () => {
+      const cliKit = await vi.importActual("@shopify/cli-kit");
+      return {
+        ...cliKit,
+        output: {
+          ...cliKit.output,
+          success: vi.fn()
+        },
+        ui: {
+          prompt: vi.fn()
+        }
+      };
+    });
+  });
+  it("generates a route file", async () => {
+    await temporaryDirectoryTask(async (tmpDir) => {
+      const route = "pages/$pageHandle";
+      const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
+        files: [],
+        templates: [[route, 'const str = "hello world"']]
+      });
+      await runGenerate(route, {
+        directory: appRoot,
+        templatesRoot
+      });
+      expect(
+        await file.read(path.join(appRoot, "app/routes", `${route}.jsx`))
+      ).toContain('const str = "hello world"');
+    });
+  });
+  it("produces a typescript file when typescript argument is true", async () => {
+    await temporaryDirectoryTask(async (tmpDir) => {
+      const route = "pages/$pageHandle";
+      const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
+        files: [],
+        templates: [[route, 'const str = "hello typescript"']]
+      });
+      await runGenerate(route, {
+        directory: appRoot,
+        templatesRoot,
+        typescript: true
+      });
+      expect(
+        await file.read(path.join(appRoot, "app/routes", `${route}.tsx`))
+      ).toContain('const str = "hello typescript"');
+    });
+  });
+  it("prompts the user if there the file already exists", async () => {
+    await temporaryDirectoryTask(async (tmpDir) => {
+      vi.mocked(ui.prompt).mockImplementationOnce(async () => {
+        return { value: "overwrite" };
+      });
+      const route = "page/$pageHandle";
+      const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
+        files: [[`app/routes/${route}.jsx`, 'const str = "I exist"']],
+        templates: [[route, 'const str = "hello world"']]
+      });
+      await runGenerate(route, {
+        directory: appRoot,
+        templatesRoot
+      });
+      expect(ui.prompt).toHaveBeenCalledWith(
+        expect.arrayContaining([
+          expect.objectContaining({
+            message: expect.stringContaining("already exists")
+          })
+        ])
+      );
+    });
+  });
+  it("does not prompt the user if the force property is true", async () => {
+    await temporaryDirectoryTask(async (tmpDir) => {
+      vi.mocked(ui.prompt).mockImplementationOnce(async () => {
+        return { value: "overwrite" };
+      });
+      const route = "page/$pageHandle";
+      const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
+        files: [[`app/routes/${route}.jsx`, 'const str = "I exist"']],
+        templates: [[route, 'const str = "hello world"']]
+      });
+      await runGenerate(route, {
+        directory: appRoot,
+        templatesRoot,
+        force: true
+      });
+      expect(ui.prompt).not.toHaveBeenCalled();
+    });
+  });
+});
+async function createHydrogen(directory, {
+  files,
+  templates
+} = {
+  files: [],
+  templates: []
+}) {
+  for (const item of files) {
+    const [filePath, fileContent] = item;
+    const fullFilePath = path.join(directory, "app", filePath);
+    await file.mkdir(path.dirname(fullFilePath));
+    await file.write(fullFilePath, fileContent);
+  }
+  for (const item of templates) {
+    const [filePath, fileContent] = item;
+    const fullFilePath = path.join(directory, "templates", `${filePath}.tsx`);
+    await file.mkdir(path.dirname(fullFilePath));
+    await file.write(fullFilePath, fileContent);
+  }
+  return {
+    appRoot: path.join(directory, "app"),
+    templatesRoot: directory
+  };
+}

package/dist/commands/hydrogen/init.js

@@ -0,0 +1,42 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import Flags from '@oclif/core/lib/flags.js';
+
+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 });
+  }
+}
+async function runInit({
+  template,
+  typescript,
+  token
+}) {
+  const defaults = [
+    "--template",
+    template,
+    "--install",
+    typescript ? "--typescript" : "--no-typescript",
+    token ? `--token ${token}` : ""
+  ];
+  const { cli } = await import('@remix-run/dev');
+  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 { commonFlags } 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: commonFlags.path,
+    port: commonFlags.port
+  };
+  async run() {
+    const { flags } = await this.parse(Preview);
+    await runPreview({ ...flags });
+  }
+}
+async function runPreview({
+  port,
+  path: appPath
+}) {
+  if (!process.env.NODE_ENV)
+    process.env.NODE_ENV = "production";
+  muteDevLogs({ workerReload: false });
+  const { root, buildPathWorkerFile, buildPathClient } = getProjectPaths(appPath);
+  await startMiniOxygen({
+    root,
+    port,
+    buildPathClient,
+    buildPathWorkerFile
+  });
+}
+
+export { Preview as default, runPreview };

package/dist/hooks/init.js

@@ -0,0 +1,18 @@
+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) && !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/[robots.txt].tsx

@@ -0,0 +1,41 @@
+import {type LoaderArgs} from '@shopify/remix-oxygen';
+
+export const loader = ({request}: LoaderArgs) => {
+  const url = new URL(request.url);
+
+  return new Response(robotsTxtData({url: url.origin}), {
+    status: 200,
+    headers: {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'content-type': 'text/plain',
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'cache-control': `max-age=${60 * 60 * 24}`,
+    },
+  });
+};
+
+function robotsTxtData({url}: {url: string}) {
+  const sitemapUrl = url ? `${url}/sitemap.xml` : undefined;
+
+  return `
+User-agent: *
+Disallow: /admin
+Disallow: /cart
+Disallow: /orders
+Disallow: /checkouts/
+Disallow: /checkout
+Disallow: /carts
+Disallow: /account
+${sitemapUrl ? `Sitemap: ${sitemapUrl}` : ''}
+
+# Google adsbot ignores robots.txt unless specifically named!
+User-agent: adsbot-google
+Disallow: /checkouts/
+Disallow: /checkout
+Disallow: /carts
+Disallow: /orders
+
+User-agent: Pinterest
+Crawl-delay: 1
+`.trim();
+}