@shopify/cli-hydrogen 0.0.0-next-744c490-20230315110711

package/dist/utils/check-lockfile.test.js

@@ -0,0 +1,74 @@
+import { checkLockfileStatus } from './check-lockfile.js';
+import { vi, describe, beforeEach, afterEach, it, expect } from 'vitest';
+import { git, outputMocker, file, path } from '@shopify/cli-kit';
+
+vi.mock("@shopify/cli-kit", async () => {
+  const cliKit = await vi.importActual("@shopify/cli-kit");
+  return {
+    ...cliKit,
+    git: {
+      factory: vi.fn()
+    }
+  };
+});
+describe("checkLockfileStatus()", () => {
+  const checkIgnoreMock = vi.fn();
+  const gitFactoryMock = {
+    checkIgnore: checkIgnoreMock
+  };
+  beforeEach(() => {
+    vi.mocked(git.factory).mockReturnValue(gitFactoryMock);
+    vi.mocked(checkIgnoreMock).mockResolvedValue([]);
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+    outputMocker.mockAndCaptureOutput().clear();
+  });
+  describe("when a lockfile is present", () => {
+    it("does not call displayLockfileWarning", async () => {
+      await file.inTemporaryDirectory(async (tmpDir) => {
+        await file.write(path.join(tmpDir, "package-lock.json"), "");
+        const outputMock = outputMocker.mockAndCaptureOutput();
+        await checkLockfileStatus(tmpDir);
+        expect(outputMock.warn()).toBe("");
+      });
+    });
+    describe("and it is being ignored by Git", () => {
+      beforeEach(() => {
+        vi.mocked(checkIgnoreMock).mockResolvedValue(["package-lock.json"]);
+      });
+      it("renders a warning", async () => {
+        await file.inTemporaryDirectory(async (tmpDir) => {
+          await file.write(path.join(tmpDir, "package-lock.json"), "");
+          const outputMock = outputMocker.mockAndCaptureOutput();
+          await checkLockfileStatus(tmpDir);
+          expect(outputMock.warn()).toMatch(
+            / warning .+ Lockfile ignored by Git .+/is
+          );
+        });
+      });
+    });
+  });
+  describe("when there are multiple lockfiles", () => {
+    it("renders a warning", async () => {
+      await file.inTemporaryDirectory(async (tmpDir) => {
+        await file.write(path.join(tmpDir, "package-lock.json"), "");
+        await file.write(path.join(tmpDir, "pnpm-lock.yaml"), "");
+        const outputMock = outputMocker.mockAndCaptureOutput();
+        await checkLockfileStatus(tmpDir);
+        expect(outputMock.warn()).toMatch(
+          / warning .+ Multiple lockfiles found .+/is
+        );
+      });
+    });
+  });
+  describe("when a lockfile is missing", () => {
+    it("renders a warning", async () => {
+      await file.inTemporaryDirectory(async (tmpDir) => {
+        const outputMock = outputMocker.mockAndCaptureOutput();
+        await checkLockfileStatus(tmpDir);
+        expect(outputMock.warn()).toMatch(/ warning .+ No lockfile found .+/is);
+      });
+    });
+  });
+});

package/dist/utils/check-version.d.ts

@@ -0,0 +1,16 @@
+declare const PACKAGE_NAMES: {
+    readonly main: "@shopify/hydrogen";
+    readonly cli: "@shopify/cli-hydrogen";
+};
+/**
+ *
+ * @param resolveFrom Path to a directory to resolve from, or directly the path to a package.json file.
+ * @param pkgKey Package to check for updates.
+ * @returns A function to show the update information if any update is available.
+ */
+declare function checkHydrogenVersion(resolveFrom: string, pkgKey?: keyof typeof PACKAGE_NAMES): Promise<((extraMessage?: string) => {
+    currentVersion: string;
+    newVersion: string;
+}) | undefined>;
+
+export { checkHydrogenVersion };

package/dist/utils/check-version.js

@@ -0,0 +1,55 @@
+import path from 'path';
+import { createRequire } from 'module';
+import { checkForNewVersion } from '@shopify/cli-kit/node/node-package-manager';
+import { renderInfo } from '@shopify/cli-kit/node/ui';
+
+const PACKAGE_NAMES = {
+  main: "@shopify/hydrogen",
+  cli: "@shopify/cli-hydrogen"
+};
+async function checkHydrogenVersion(resolveFrom, pkgKey = "main") {
+  if (process.env.LOCAL_DEV)
+    return;
+  const pkgName = PACKAGE_NAMES[pkgKey];
+  const require2 = createRequire(import.meta.url);
+  const pkgJsonPath = resolveFrom.endsWith("package.json") ? locateDependency(require2, resolveFrom) : locateDependency(
+    require2,
+    path.join(pkgName, "package.json"),
+    resolveFrom
+  );
+  if (!pkgJsonPath)
+    return;
+  const currentVersion = require2(pkgJsonPath).version;
+  if (!currentVersion)
+    return;
+  const newVersionAvailable = await checkForNewVersion(pkgName, currentVersion);
+  if (!newVersionAvailable)
+    return;
+  return (extraMessage = "") => {
+    renderInfo({
+      headline: "Upgrade available",
+      body: `Version ${newVersionAvailable} of ${pkgName} is now available.
+You are currently running v${currentVersion}.` + (extraMessage ? "\n\n" : "") + extraMessage,
+      reference: [
+        {
+          link: {
+            label: "Hydrogen releases",
+            url: "https://github.com/Shopify/hydrogen/releases"
+          }
+        }
+      ]
+    });
+    return { currentVersion, newVersion: newVersionAvailable };
+  };
+}
+function locateDependency(require2, nameToResolve, resolveFrom) {
+  try {
+    return require2.resolve(nameToResolve, {
+      paths: [resolveFrom ?? process.cwd()]
+    });
+  } catch {
+    return;
+  }
+}
+
+export { checkHydrogenVersion };

package/dist/utils/check-version.test.d.ts

@@ -0,0 +1 @@
+

package/dist/utils/check-version.test.js

@@ -0,0 +1,60 @@
+import { checkHydrogenVersion } from './check-version.js';
+import { vi, describe, afterEach, it, expect, beforeEach } from 'vitest';
+import { outputMocker } from '@shopify/cli-kit';
+import { checkForNewVersion } from '@shopify/cli-kit/node/node-package-manager';
+
+vi.mock("@shopify/cli-kit/node/node-package-manager", () => {
+  return {
+    checkForNewVersion: vi.fn()
+  };
+});
+describe("checkHydrogenVersion()", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+  describe("when a current version is available", () => {
+    it("calls checkForNewVersion", async () => {
+      await checkHydrogenVersion("dir");
+      expect(checkForNewVersion).toHaveBeenCalledWith(
+        "@shopify/hydrogen",
+        expect.stringMatching(/20\d{2}\.\d{1,2}\.\d{1,3}/)
+      );
+    });
+    describe("and it is up to date", () => {
+      beforeEach(() => {
+        vi.mocked(checkForNewVersion).mockResolvedValue(void 0);
+      });
+      it("returns undefined", async () => {
+        expect(await checkHydrogenVersion("dir")).toBe(void 0);
+      });
+    });
+    describe("and a new version is available", () => {
+      beforeEach(() => {
+        vi.mocked(checkForNewVersion).mockResolvedValue("2023.1.5");
+      });
+      it("returns a function", async () => {
+        expect(await checkHydrogenVersion("dir")).toBeInstanceOf(Function);
+      });
+      it("outputs a message to the user with the new version", async () => {
+        const outputMock = outputMocker.mockAndCaptureOutput();
+        const showUpgrade = await checkHydrogenVersion("dir");
+        const { currentVersion, newVersion } = showUpgrade();
+        expect(outputMock.info()).toMatch(
+          new RegExp(
+            ` info .+ Upgrade available .+ Version ${newVersion.replaceAll(
+              ".",
+              "\\."
+            )}.+ running v${currentVersion.replaceAll(".", "\\.")}`,
+            "is"
+          )
+        );
+      });
+    });
+  });
+  describe("when no current version can be found", () => {
+    it("returns undefined and does not call checkForNewVersion", async () => {
+      expect(await checkHydrogenVersion("/fake-absolute-dir")).toBe(void 0);
+      expect(checkForNewVersion).not.toHaveBeenCalled();
+    });
+  });
+});

package/dist/utils/config.d.ts

@@ -0,0 +1,18 @@
+import { ServerMode } from '@remix-run/dev/dist/config/serverModes.js';
+import { RemixConfig } from '@remix-run/dev/dist/config.js';
+
+declare function getProjectPaths(appPath?: string, entry?: string): {
+    root: string;
+    buildPath: string;
+    buildPathClient: string;
+    buildPathWorkerFile: string;
+    publicPath: string;
+};
+declare function getRemixConfig(root: string, mode?: ServerMode): Promise<RemixConfig & {
+    serverConditions?: string[] | undefined;
+    serverMainFields?: string[] | undefined;
+    serverDependenciesToBundle?: string | undefined;
+}>;
+declare function assertEntryFileExists(root: string, fileRelative: string): Promise<void>;
+
+export { assertEntryFileExists, getProjectPaths, getRemixConfig };

package/dist/utils/config.js

@@ -0,0 +1,146 @@
+import { renderFatalError } from '@shopify/cli-kit/node/ui';
+import { output, file } from '@shopify/cli-kit';
+import { createRequire } from 'module';
+import { fileURLToPath } from 'url';
+import path from 'path';
+import fs from 'fs/promises';
+
+const BUILD_DIR = "dist";
+const CLIENT_SUBDIR = "client";
+const WORKER_SUBDIR = "worker";
+function getProjectPaths(appPath, entry) {
+  const root = appPath ?? process.cwd();
+  const publicPath = path.join(root, "public");
+  const buildPath = path.join(root, BUILD_DIR);
+  const buildPathClient = path.join(buildPath, CLIENT_SUBDIR);
+  const buildPathWorkerFile = path.join(buildPath, WORKER_SUBDIR, "index.js");
+  return {
+    root,
+    buildPath,
+    buildPathClient,
+    buildPathWorkerFile,
+    publicPath
+  };
+}
+async function getRemixConfig(root, mode = process.env.NODE_ENV) {
+  const { readConfig } = await import('@remix-run/dev/dist/config.js');
+  const config = await readConfig(root, mode);
+  if (!config.serverConditions) {
+    const require2 = createRequire(import.meta.url);
+    const actualConfigFile = require2(path.join(root, "remix.config"));
+    config.serverBuildTarget = "cloudflare-workers";
+    config.serverConditions = actualConfigFile.serverConditions;
+    config.serverMainFields = actualConfigFile.serverMainFields;
+  }
+  if (!config.serverEntryPoint) {
+    throwConfigError(
+      "Could not find a server entry point.",
+      "Please add a server option to your remix.config.js pointing to an Oxygen worker entry file."
+    );
+  } else {
+    assertEntryFileExists(config.rootDirectory, config.serverEntryPoint);
+  }
+  if (config.serverPlatform !== "neutral") {
+    throwConfigError(
+      'The serverPlatform in remix.config.js must be "neutral".'
+    );
+  }
+  if (config.serverModuleFormat !== "esm") {
+    throwConfigError(
+      'The serverModuleFormat in remix.config.js must be "esm".'
+    );
+  }
+  if (config.serverDependenciesToBundle !== "all") {
+    throwConfigError(
+      'The serverDependenciesToBundle in remix.config.js must be "all".'
+    );
+  }
+  if (!config.serverConditions?.includes("worker")) {
+    throwConfigError(
+      'The serverConditions in remix.config.js must include "worker".'
+    );
+  }
+  if (process.env.NODE_ENV === "development" && !config.serverConditions?.includes("development")) {
+    output.warn(
+      "Add `process.env.NODE_ENV` value to serverConditions in remix.config.js to enable debugging features in development."
+    );
+  }
+  const expectedServerMainFields = ["browser", "module", "main"];
+  if (!config.serverMainFields || !expectedServerMainFields.every(
+    (v, i) => config.serverMainFields?.[i] === v
+  )) {
+    throwConfigError(
+      `The serverMainFields in remix.config.js must be ${JSON.stringify(
+        expectedServerMainFields
+      )}.`
+    );
+  }
+  const cdnUrl = process.env.HYDROGEN_ASSET_BASE_URL;
+  if (cdnUrl && !config.publicPath.startsWith(cdnUrl)) {
+    throwConfigError(
+      "The publicPath in remix.config.js must be prepended with the value of `process.env.HYDROGEN_ASSET_BASE_URL`."
+    );
+  }
+  const expectedServerBuildPath = path.join(
+    BUILD_DIR,
+    WORKER_SUBDIR,
+    "index.js"
+  );
+  if (config.serverBuildPath !== path.resolve(root, expectedServerBuildPath)) {
+    throwConfigError(
+      `The serverBuildPath in remix.config.js must be "${expectedServerBuildPath}".`
+    );
+  }
+  const expectedAssetsBuildDirectory = path.join(BUILD_DIR, CLIENT_SUBDIR);
+  if (!config.assetsBuildDirectory.startsWith(
+    path.resolve(root, expectedAssetsBuildDirectory)
+  )) {
+    throwConfigError(
+      `The assetsBuildDirectory in remix.config.js must be in "${expectedAssetsBuildDirectory}".`
+    );
+  }
+  if (process.env.LOCAL_DEV) {
+    const packagesPath = fileURLToPath(new URL("../../..", import.meta.url));
+    config.watchPaths ??= [];
+    config.watchPaths.push(
+      ...(await fs.readdir(packagesPath)).map(
+        (pkg) => pkg === "hydrogen-react" ? path.resolve(packagesPath, pkg, "dist", "browser-dev", "index.mjs") : path.resolve(packagesPath, pkg, "dist", "development", "index.js")
+      )
+    );
+    config.watchPaths.push(
+      path.join(packagesPath, "cli", "dist", "virtual-routes", "**", "*")
+    );
+  }
+  return config;
+}
+function throwConfigError(message, tryMessage = null) {
+  renderFatalError({
+    name: "ConfigError",
+    type: 0,
+    message,
+    tryMessage
+  });
+  process.exit(1);
+}
+async function assertEntryFileExists(root, fileRelative) {
+  const fileAbsolute = path.resolve(root, fileRelative);
+  const exists = await file.exists(fileAbsolute);
+  if (!exists) {
+    if (!path.extname(fileAbsolute)) {
+      const { readdir } = await import('fs/promises');
+      const files = await readdir(path.dirname(fileAbsolute));
+      const exists2 = files.some((file2) => {
+        const { name, ext } = path.parse(file2);
+        return name === path.basename(fileAbsolute) && /^\.[jt]s$/.test(ext);
+      });
+      if (exists2)
+        return;
+    }
+    throwConfigError(
+      `Entry file "${fileRelative}" not found.`,
+      "Please ensure the file exists and that the path is correctly added to the `server` property in remix.config.js."
+    );
+  }
+}
+
+export { assertEntryFileExists, getProjectPaths, getRemixConfig };

package/dist/utils/flags.d.ts

@@ -0,0 +1,24 @@
+import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
+
+declare const commonFlags: {
+    path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+    port: _oclif_core_lib_interfaces_parser_js.OptionFlag<number>;
+    force: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+};
+declare function flagsToCamelObject(obj: Record<string, any>): any;
+/**
+ * Parse process arguments into an object for use in the cli as flags.
+ * This is used when starting the init command from create-hydrogen without Oclif.
+ * @example
+ * input: `node ./bin --force --no-install-deps --language js`
+ * output: { force: true, installDeps: false,  language: 'js' }
+ */
+declare function parseProcessFlags(processArgv: string[], flagMap?: Record<string, string>): any;
+/**
+ * Create a deprecated flag to prevent the CLI from crashing when a deprecated flag is used.
+ * Displays an info message when the flag is used.
+ * @param name The name of the flag.
+ */
+declare function deprecated(name: string): _oclif_core_lib_interfaces_parser_js.Definition<unknown, Record<string, unknown>>;
+
+export { commonFlags, deprecated, flagsToCamelObject, parseProcessFlags };

package/dist/utils/flags.js

@@ -0,0 +1,60 @@
+import Flags from '@oclif/core/lib/flags.js';
+import { string } from '@shopify/cli-kit';
+import { renderInfo } from '@shopify/cli-kit/node/ui';
+import colors from '@shopify/cli-kit/node/colors';
+
+const commonFlags = {
+  path: Flags.string({
+    description: "The path to the directory of the Hydrogen storefront. The default is the current directory.",
+    env: "SHOPIFY_HYDROGEN_FLAG_PATH"
+  }),
+  port: Flags.integer({
+    description: "Port to run the server on.",
+    env: "SHOPIFY_HYDROGEN_FLAG_PORT",
+    default: 3e3
+  }),
+  force: Flags.boolean({
+    description: "Overwrite the destination directory and files if they already exist.",
+    env: "SHOPIFY_HYDROGEN_FLAG_FORCE",
+    char: "f"
+  })
+};
+function flagsToCamelObject(obj) {
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    acc[string.camelize(key)] = value;
+    return acc;
+  }, {});
+}
+function parseProcessFlags(processArgv, flagMap = {}) {
+  const [, , ...args] = processArgv;
+  const options = {};
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    const nextArg = args[i + 1];
+    if (arg?.startsWith("-")) {
+      let key = arg.replace(/^\-{1,2}/, "");
+      let value = !nextArg || nextArg.startsWith("-") ? true : nextArg;
+      if (value === true && key.startsWith("no-")) {
+        value = false;
+        key = key.replace("no-", "");
+      }
+      options[flagMap[key] || key] = value;
+    }
+  }
+  return flagsToCamelObject(options);
+}
+function deprecated(name) {
+  return Flags.custom({
+    parse: () => {
+      renderInfo({
+        headline: `The ${colors.bold(
+          name
+        )} flag is deprecated and will be removed in a future version of Shopify CLI.`
+      });
+      return Promise.resolve(" ");
+    },
+    hidden: true
+  });
+}
+
+export { commonFlags, deprecated, flagsToCamelObject, parseProcessFlags };

package/dist/utils/flags.test.d.ts

@@ -0,0 +1 @@
+

package/dist/utils/flags.test.js

@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest';
+import { flagsToCamelObject, parseProcessFlags } from './flags.js';
+
+describe("CLI flag utils", () => {
+  it("turns kebab-case flags to camelCase", async () => {
+    expect(
+      flagsToCamelObject({
+        "kebab-case": "value",
+        "another-kebab-case": "value",
+        flag: "value"
+      })
+    ).toMatchObject({
+      kebabCase: "value",
+      anotherKebabCase: "value",
+      flag: "value"
+    });
+  });
+  it("parses flags from process.argv", async () => {
+    expect(
+      parseProcessFlags(
+        "node ./bin --force --install-deps --template hello-world --path test --language ts".split(
+          " "
+        )
+      )
+    ).toMatchObject({
+      force: true,
+      installDeps: true,
+      template: "hello-world",
+      path: "test",
+      language: "ts"
+    });
+    expect(
+      parseProcessFlags(
+        "node ./bin -f --no-install-deps --language js".split(" "),
+        { f: "force" }
+      )
+    ).toMatchObject({
+      force: true,
+      installDeps: false,
+      language: "js"
+    });
+  });
+});

package/dist/utils/log.d.ts

@@ -0,0 +1,5 @@
+declare function muteDevLogs({ workerReload }?: {
+    workerReload?: boolean;
+}): void;
+
+export { muteDevLogs };

package/dist/utils/log.js

@@ -0,0 +1,20 @@
+let isFirstWorkerReload = true;
+function muteDevLogs({ workerReload } = {}) {
+  const log = console.log.bind(console);
+  console.log = (first, ...rest) => {
+    if (typeof first === "string" && first.includes("[mf:")) {
+      if (workerReload !== false && first.includes("Worker reloaded")) {
+        if (isFirstWorkerReload)
+          isFirstWorkerReload = false;
+        else
+          return log(first.replace("[mf:inf] ", "\u{1F504} ") + "\n", ...rest);
+      }
+      if (!first.includes("[mf:err]")) {
+        return;
+      }
+    }
+    return log(first, ...rest);
+  };
+}
+
+export { muteDevLogs };

package/dist/utils/mini-oxygen.d.ts

@@ -0,0 +1,11 @@
+type MiniOxygenOptions = {
+    root: string;
+    port?: number;
+    watch?: boolean;
+    buildPathClient: string;
+    buildPathWorkerFile: string;
+};
+declare function startMiniOxygen({ root, port, watch, buildPathWorkerFile, buildPathClient, }: MiniOxygenOptions): Promise<void>;
+declare function logResponse(request: Request, response: Response): void;
+
+export { logResponse, startMiniOxygen };

package/dist/utils/mini-oxygen.js

@@ -0,0 +1,73 @@
+import { path, file, output } from '@shopify/cli-kit';
+import colors from '@shopify/cli-kit/node/colors';
+
+async function startMiniOxygen({
+  root,
+  port = 3e3,
+  watch = false,
+  buildPathWorkerFile,
+  buildPathClient
+}) {
+  const { default: miniOxygen } = await import('@shopify/mini-oxygen');
+  const miniOxygenPreview = miniOxygen.default ?? miniOxygen;
+  const dotenvPath = path.resolve(root, ".env");
+  const { port: actualPort } = await miniOxygenPreview({
+    workerFile: buildPathWorkerFile,
+    assetsDir: buildPathClient,
+    publicPath: "",
+    port,
+    watch,
+    autoReload: watch,
+    modules: true,
+    env: process.env,
+    envPath: await file.exists(dotenvPath) ? dotenvPath : void 0,
+    log: () => {
+    },
+    buildWatchPaths: watch ? [path.resolve(root, buildPathWorkerFile)] : void 0,
+    onResponse: (request, response) => logResponse(
+      request,
+      response
+    )
+  });
+  const listeningAt = `http://localhost:${actualPort}`;
+  output.info(
+    output.content`🚥 MiniOxygen server started at ${output.token.link(
+      listeningAt,
+      listeningAt
+    )}\n`
+  );
+}
+function logResponse(request, response) {
+  try {
+    const url = new URL(request.url);
+    if (["/graphiql"].includes(url.pathname))
+      return;
+    const isProxy = !!response.url && response.url !== request.url;
+    const isDataRequest = !isProxy && url.searchParams.has("_data");
+    let route = request.url.replace(url.origin, "");
+    let info = "";
+    let type = "render";
+    if (isProxy) {
+      type = "proxy";
+      info = `[${response.url}]`;
+    }
+    if (isDataRequest) {
+      type = request.method === "GET" ? "loader" : "action";
+      const dataParam = url.searchParams.get("_data")?.replace("routes/", "");
+      route = url.pathname;
+      info = `[${dataParam}]`;
+    }
+    const colorizeStatus = response.status < 300 ? output.token.green : response.status < 400 ? output.token.cyan : output.token.errorText;
+    output.info(
+      output.content`${request.method.padStart(6)}  ${colorizeStatus(
+        String(response.status)
+      )}  ${output.token.italic(type.padEnd(7, " "))} ${route}${info ? " " + colors.dim(info) : ""} ${request.headers.get("purpose") === "prefetch" ? output.token.italic("(prefetch)") : ""}`
+    );
+  } catch {
+    if (request && response) {
+      output.info(`${request.method} ${response.status} ${request.url}`);
+    }
+  }
+}
+
+export { logResponse, startMiniOxygen };

package/dist/utils/missing-routes.d.ts

@@ -0,0 +1,6 @@
+import { RemixConfig } from '@remix-run/dev/dist/config.js';
+
+declare function findMissingRoutes(config: RemixConfig): string[];
+declare function logMissingRoutes(routes: string[]): void;
+
+export { findMissingRoutes, logMissingRoutes };