@shopify/cli-hydrogen 6.0.2 → 7.0.0

package/dist/commands/hydrogen/deploy.test.js

@@ -2,14 +2,18 @@ import { vi, describe, expect, beforeEach, afterEach, it } from 'vitest';
 import { login } from '../../lib/auth.js';
 import { getStorefronts } from '../../lib/graphql/admin/link-storefront.js';
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { renderSelectPrompt, renderSuccess, renderFatalError } from '@shopify/cli-kit/node/ui';
-import { getLatestGitCommit } from '@shopify/cli-kit/node/git';
+import { writeFile } from '@shopify/cli-kit/node/fs';
+import { renderSelectPrompt, renderSuccess, renderWarning, renderFatalError } from '@shopify/cli-kit/node/ui';
+import { ensureIsClean, GitDirectoryNotCleanError, getLatestGitCommit } from '@shopify/cli-kit/node/git';
 import { oxygenDeploy, deploymentLogger } from './deploy.js';
 import { getOxygenDeploymentData } from '../../lib/get-oxygen-deployment-data.js';
 import { createDeploy, parseToken } from '@shopify/oxygen-cli/deploy';
+import { ciPlatform } from '@shopify/cli-kit/node/context/local';
 
 vi.mock("../../lib/get-oxygen-deployment-data.js");
 vi.mock("@shopify/oxygen-cli/deploy");
+vi.mock("@shopify/cli-kit/node/fs");
+vi.mock("@shopify/cli-kit/node/context/local");
 vi.mock("../../lib/auth.js");
 vi.mock("../../lib/shopify-config.js");
 vi.mock("../../lib/graphql/admin/link-storefront.js");
@@ -30,17 +34,16 @@ vi.mock("@shopify/cli-kit/node/ui", async () => {
     renderFatalError: vi.fn(),
     renderSelectPrompt: vi.fn(),
     renderSuccess: vi.fn(),
-    renderTasks: vi.fn()
+    renderTasks: vi.fn(),
+    renderWarning: vi.fn()
   };
 });
 vi.mock("@shopify/cli-kit/node/git", async () => {
+  const actual = await vi.importActual("@shopify/cli-kit/node/git");
   return {
-    getLatestGitCommit: vi.fn()
-  };
-});
-vi.mock("@shopify/cli-kit/node/context/local", async () => {
-  return {
-    ciPlatform: () => ({ isCI: false })
+    ...actual,
+    getLatestGitCommit: vi.fn(),
+    ensureIsClean: vi.fn()
   };
 });
 describe("deploy", () => {
@@ -63,9 +66,12 @@ describe("deploy", () => {
   };
   const originalExit = process.exit;
   const deployParams = {
+    authBypassToken: true,
+    defaultEnvironment: false,
+    force: false,
+    noJsonOutput: false,
     path: "./",
     shop: "snowdevil.myshopify.com",
-    publicDeployment: false,
     metadataUrl: "https://example.com",
     metadataUser: "user",
     metadataVersion: "1.0.0"
@@ -82,15 +88,16 @@ describe("deploy", () => {
   const expectedConfig = {
     assetsDir: "dist/client",
     bugsnag: true,
+    defaultEnvironment: false,
     deploymentUrl: "https://oxygen.shopifyapps.com",
     deploymentToken: mockToken,
+    generateAuthBypassToken: true,
     verificationMaxDuration: 180,
     metadata: {
       url: deployParams.metadataUrl,
       user: deployParams.metadataUser,
       version: deployParams.metadataVersion
     },
-    publicDeployment: deployParams.publicDeployment,
     skipVerification: false,
     rootPath: deployParams.path,
     skipBuild: false,
@@ -99,10 +106,13 @@ describe("deploy", () => {
   };
   const expectedHooks = {
     buildFunction: expect.any(Function),
+    onDeploymentCompleted: expect.any(Function),
+    onDeploymentFailed: expect.any(Function),
+    onDeploymentCompletedVerificationError: expect.any(Function),
     onVerificationComplete: expect.any(Function),
+    onVerificationError: expect.any(Function),
     onUploadFilesStart: expect.any(Function),
     onUploadFilesComplete: expect.any(Function),
-    onVerificationError: expect.any(Function),
     onUploadFilesError: expect.any(Function)
   };
   beforeEach(async () => {
@@ -111,6 +121,7 @@ describe("deploy", () => {
       session: ADMIN_SESSION,
       config: UNLINKED_SHOPIFY_CONFIG
     });
+    vi.mocked(ciPlatform).mockReturnValue({ isCI: false });
     vi.mocked(getStorefronts).mockResolvedValue([
       {
         ...FULL_SHOPIFY_CONFIG.storefront,
@@ -119,9 +130,10 @@ describe("deploy", () => {
       }
     ]);
     vi.mocked(renderSelectPrompt).mockResolvedValue(FULL_SHOPIFY_CONFIG.shop);
-    vi.mocked(createDeploy).mockResolvedValue(
-      "https://a-lovely-deployment.com"
-    );
+    vi.mocked(createDeploy).mockResolvedValue({
+      authBypassToken: "some-token",
+      url: "https://a-lovely-deployment.com"
+    });
     vi.mocked(getOxygenDeploymentData).mockResolvedValue({
       oxygenDeploymentToken: "some-encoded-token",
       environments: []
@@ -149,6 +161,81 @@ describe("deploy", () => {
     });
     expect(vi.mocked(renderSuccess)).toHaveBeenCalled;
   });
+  it("errors when there are uncommited changes", async () => {
+    vi.mocked(ensureIsClean).mockRejectedValue(
+      new GitDirectoryNotCleanError("Uncommitted changes")
+    );
+    await expect(oxygenDeploy(deployParams)).rejects.toThrowError(
+      "Uncommitted changes detected"
+    );
+    expect(vi.mocked(createDeploy)).not.toHaveBeenCalled;
+  });
+  it("proceeds with warning and modified description when there are uncommited changes and the force flag is used", async () => {
+    vi.mocked(ensureIsClean).mockRejectedValue(
+      new GitDirectoryNotCleanError("Uncommitted changes")
+    );
+    vi.mocked(getLatestGitCommit).mockResolvedValue({
+      hash: "123",
+      message: "test commit",
+      date: "2021-01-01",
+      author_name: "test author",
+      author_email: "test@author.com",
+      body: "test body",
+      refs: "HEAD -> main"
+    });
+    await oxygenDeploy({
+      ...deployParams,
+      force: true
+    });
+    expect(vi.mocked(renderWarning)).toHaveBeenCalledWith({
+      headline: "No deployment description provided",
+      body: expect.anything()
+    });
+    expect(vi.mocked(createDeploy)).toHaveBeenCalledWith({
+      config: {
+        ...expectedConfig,
+        environmentTag: "main",
+        metadata: {
+          ...expectedConfig.metadata,
+          description: "123 with additional changes"
+        }
+      },
+      hooks: expectedHooks,
+      logger: deploymentLogger
+    });
+  });
+  it("proceeds with provided description without warning when there are uncommited changes and the force flag is used", async () => {
+    vi.mocked(ensureIsClean).mockRejectedValue(
+      new GitDirectoryNotCleanError("Uncommitted changes")
+    );
+    vi.mocked(getLatestGitCommit).mockResolvedValue({
+      hash: "123",
+      message: "test commit",
+      date: "2021-01-01",
+      author_name: "test author",
+      author_email: "test@author.com",
+      body: "test body",
+      refs: "HEAD -> main"
+    });
+    await oxygenDeploy({
+      ...deployParams,
+      force: true,
+      metadataDescription: "cool new stuff"
+    });
+    expect(vi.mocked(renderWarning)).not.toHaveBeenCalled;
+    expect(vi.mocked(createDeploy)).toHaveBeenCalledWith({
+      config: {
+        ...expectedConfig,
+        environmentTag: "main",
+        metadata: {
+          ...expectedConfig.metadata,
+          description: "cool new stuff"
+        }
+      },
+      hooks: expectedHooks,
+      logger: deploymentLogger
+    });
+  });
   it("calls createDeploy with the checked out branch name", async () => {
     vi.mocked(getLatestGitCommit).mockResolvedValue({
       hash: "123",
@@ -171,19 +258,77 @@ describe("deploy", () => {
     vi.mocked(getOxygenDeploymentData).mockResolvedValue({
       oxygenDeploymentToken: "some-encoded-token",
       environments: [
-        { name: "production", branch: "main" },
-        { name: "preview", branch: "staging" }
+        { name: "Production", branch: "main", type: "PRODUCTION" },
+        { name: "Preview", branch: null, type: "PREVIEW" }
       ]
     });
     await oxygenDeploy(deployParams);
     expect(vi.mocked(renderSelectPrompt)).toHaveBeenCalledWith({
       message: "Select an environment to deploy to",
       choices: [
-        { label: "production", value: "main" },
-        { label: "preview", value: "staging" }
+        { label: "Production", value: "main" },
+        { label: "Preview", value: "shopify-preview-environment." }
       ]
     });
   });
+  describe("when Preview is selected", () => {
+    it("calls createDeploy with defaultEnvironment and an undefined environmentTag", async () => {
+      vi.mocked(getLatestGitCommit).mockResolvedValue({
+        hash: "123",
+        message: "test commit",
+        date: "2021-01-01",
+        author_name: "test author",
+        author_email: "test@author.com",
+        body: "test body",
+        refs: "HEAD -> main"
+      });
+      vi.mocked(getOxygenDeploymentData).mockResolvedValue({
+        oxygenDeploymentToken: "some-encoded-token",
+        environments: [
+          { name: "Production", branch: "main", type: "PRODUCTION" },
+          { name: "Preview", branch: null, type: "PREVIEW" }
+        ]
+      });
+      vi.mocked(renderSelectPrompt).mockResolvedValue(
+        "shopify-preview-environment."
+      );
+      await oxygenDeploy(deployParams);
+      expect(vi.mocked(createDeploy)).toHaveBeenCalledWith({
+        config: {
+          ...expectedConfig,
+          defaultEnvironment: true,
+          environmentTag: void 0
+        },
+        hooks: expectedHooks,
+        logger: deploymentLogger
+      });
+    });
+  });
+  it("writes a file with JSON content in CI environments", async () => {
+    vi.mocked(ciPlatform).mockReturnValue({
+      isCI: true,
+      name: "github",
+      metadata: {}
+    });
+    const ciDeployParams = {
+      ...deployParams,
+      token: "some-token",
+      metadataDescription: "cool new stuff",
+      generateAuthBypassToken: true
+    };
+    await oxygenDeploy(ciDeployParams);
+    expect(vi.mocked(writeFile)).toHaveBeenCalledWith(
+      "h2_deploy_log.json",
+      JSON.stringify({
+        authBypassToken: "some-token",
+        url: "https://a-lovely-deployment.com"
+      })
+    );
+    vi.mocked(writeFile).mockClear();
+    ciDeployParams.noJsonOutput = true;
+    await oxygenDeploy(ciDeployParams);
+    expect(vi.mocked(writeFile)).not.toHaveBeenCalled();
+  });
   it("handles error during uploadFiles", async () => {
     const mockRenderFatalError = vi.fn();
     vi.mocked(renderFatalError).mockImplementation(mockRenderFatalError);
@@ -209,7 +354,7 @@ describe("deploy", () => {
       }
     }
   });
-  it("handles error during deployment verification", async () => {
+  it("handles error during deployment routability verification", async () => {
     const mockRenderFatalError = vi.fn();
     vi.mocked(renderFatalError).mockImplementation(mockRenderFatalError);
     const error = new Error("Cloudflare is down!");
@@ -235,4 +380,31 @@ describe("deploy", () => {
       }
     }
   });
+  it("handles error during deployment completion verification", async () => {
+    const mockRenderFatalError = vi.fn();
+    vi.mocked(renderFatalError).mockImplementation(mockRenderFatalError);
+    vi.mocked(createDeploy).mockImplementation((options) => {
+      options.hooks?.onUploadFilesStart?.();
+      options.hooks?.onUploadFilesComplete?.();
+      options.hooks?.onDeploymentCompletedVerificationStart?.();
+      options.hooks?.onDeploymentFailed?.({
+        status: "oh shit",
+        url: "https://a-lovely-deployment.com"
+      });
+      return new Promise((_resolve, reject) => {
+        reject();
+      });
+    });
+    try {
+      await oxygenDeploy(deployParams);
+      expect(true).toBe(false);
+    } catch (err) {
+      if (err instanceof AbortError) {
+        expect(err.message).toBe("oh shit");
+        expect(err.tryMessage).toBe("Retrying the deployement may succeed.");
+      } else {
+        expect(true).toBe(false);
+      }
+    }
+  });
 });

package/dist/commands/hydrogen/dev.js

@@ -1,5 +1,5 @@
-import path from 'path';
-import fs from 'fs/promises';
+import path from 'node:path';
+import fs from 'node:fs/promises';
 import { outputInfo, outputDebug } from '@shopify/cli-kit/node/output';
 import { fileExists } from '@shopify/cli-kit/node/fs';
 import { renderFatalError } from '@shopify/cli-kit/node/ui';
@@ -7,11 +7,10 @@ import colors from '@shopify/cli-kit/node/colors';
 import { copyPublicFiles } from './build.js';
 import { getProjectPaths, assertOxygenChecks, handleRemixImportFail, getRemixConfig } from '../../lib/remix-config.js';
 import { muteDevLogs, createRemixLogger, enhanceH2Logs } from '../../lib/log.js';
-import { commonFlags, overrideFlag, deprecated, flagsToCamelObject, DEFAULT_PORT } from '../../lib/flags.js';
+import { commonFlags, deprecated, overrideFlag, flagsToCamelObject } from '../../lib/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
 import { Flags } from '@oclif/core';
-import { startMiniOxygen } from '../../lib/mini-oxygen/index.js';
-import { checkHydrogenVersion } from '../../lib/check-version.js';
+import { buildAssetsUrl, startMiniOxygen } from '../../lib/mini-oxygen/index.js';
 import { addVirtualRoutes } from '../../lib/virtual-routes.js';
 import { spawnCodegenProcess } from '../../lib/codegen.js';
 import { getAllEnvironmentVariables } from '../../lib/environment-variables.js';
@@ -19,6 +18,9 @@ import { getConfig } from '../../lib/shopify-config.js';
 import { setupLiveReload } from '../../lib/live-reload.js';
 import { checkRemixVersions } from '../../lib/remix-version-check.js';
 import { getGraphiQLUrl } from '../../lib/graphiql-url.js';
+import { displayDevUpgradeNotice } from './upgrade.js';
+import { findPort } from '../../lib/find-port.js';
+import { prepareDiffDirectory } from '../../lib/template-diff.js';
 
 const LOG_REBUILDING = "\u{1F9F1} Rebuilding...";
 const LOG_REBUILT = "\u{1F680} Rebuilt";
@@ -27,7 +29,8 @@ class Dev extends Command {
   static flags = {
     path: commonFlags.path,
     port: commonFlags.port,
-    ["worker-unstable"]: commonFlags.workerRuntime,
+    worker: deprecated("--worker", { isBoolean: true }),
+    "legacy-runtime": commonFlags.legacyRuntime,
     codegen: overrideFlag(commonFlags.codegen, {
       description: commonFlags.codegen.description + " It updates the types on file save."
     }),
@@ -38,43 +41,45 @@ class Dev extends Command {
       env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_VIRTUAL_ROUTES",
       default: false
     }),
-    debug: Flags.boolean({
-      description: "Attaches a Node inspector",
-      env: "SHOPIFY_HYDROGEN_FLAG_DEBUG",
-      default: false
+    debug: commonFlags.debug,
+    "inspector-port": commonFlags.inspectorPort,
+    ["env-branch"]: commonFlags.envBranch,
+    ["disable-version-check"]: Flags.boolean({
+      description: "Skip the version check when running `hydrogen dev`",
+      default: false,
+      required: false
     }),
-    host: deprecated("--host")(),
-    ["env-branch"]: commonFlags.envBranch
+    diff: commonFlags.diff
   };
   async run() {
     const { flags } = await this.parse(Dev);
-    const directory = flags.path ? path.resolve(flags.path) : process.cwd();
+    let directory = flags.path ? path.resolve(flags.path) : process.cwd();
+    if (flags.diff) {
+      directory = await prepareDiffDirectory(directory, true);
+    }
     await runDev({
       ...flagsToCamelObject(flags),
-      useCodegen: flags.codegen,
-      workerRuntime: flags["worker-unstable"],
       path: directory
     });
   }
 }
 async function runDev({
-  port: portFlag = DEFAULT_PORT,
+  port: appPort,
   path: appPath,
-  useCodegen = false,
-  workerRuntime = false,
+  codegen: useCodegen = false,
+  legacyRuntime = false,
   codegenConfigPath,
   disableVirtualRoutes,
   envBranch,
   debug = false,
-  sourcemap = true
+  sourcemap = true,
+  disableVersionCheck = false,
+  inspectorPort
 }) {
   if (!process.env.NODE_ENV)
     process.env.NODE_ENV = "development";
   muteDevLogs();
-  if (debug)
-    (await import('node:inspector')).open();
   const { root, publicPath, buildPathClient, buildPathWorkerFile } = getProjectPaths(appPath);
-  const checkingHydrogenVersion = checkHydrogenVersion(root);
   const copyingFiles = copyPublicFiles(publicPath, buildPathClient);
   const reloadConfig = async () => {
     const config = await getRemixConfig(root);
@@ -90,6 +95,12 @@ async function runDev({
     return [fileRelative, path.resolve(root, fileRelative)];
   };
   const serverBundleExists = () => fileExists(buildPathWorkerFile);
+  inspectorPort = debug ? await findPort(inspectorPort) : inspectorPort;
+  appPort = legacyRuntime ? appPort : await findPort(appPort);
+  const assetsPort = legacyRuntime ? 0 : await findPort(appPort + 100);
+  if (assetsPort) {
+    process.env.HYDROGEN_ASSET_BASE_URL = buildAssetsUrl(assetsPort);
+  }
   const [remixConfig, { shop, storefront }] = await Promise.all([
     reloadConfig(),
     getConfig(root)
@@ -106,19 +117,23 @@ async function runDev({
   let initialBuildStartTimeMs = Date.now();
   const liveReload = await setupLiveReload(remixConfig.dev?.port ?? 8002) ;
   let miniOxygen;
+  let codegenProcess;
   async function safeStartMiniOxygen() {
     if (miniOxygen)
       return;
     miniOxygen = await startMiniOxygen(
       {
         root,
-        port: portFlag,
+        debug,
+        assetsPort,
+        inspectorPort,
+        port: appPort,
         watch: !liveReload,
         buildPathWorkerFile,
         buildPathClient,
         env: await envPromise
       },
-      workerRuntime
+      legacyRuntime
     );
     enhanceH2Logs({ host: miniOxygen.listeningAt, ...remixConfig });
     miniOxygen.showBanner({
@@ -134,21 +149,24 @@ View GraphiQL API browser: ${getGraphiQLUrl({
         ),
         colors.dim(
           `
-View server-side network requests: ${miniOxygen.listeningAt}/debug-network`
+View server network requests: ${miniOxygen.listeningAt}/subrequest-profiler`
         )
       ]
     });
     if (useCodegen) {
-      spawnCodegenProcess({ ...remixConfig, configFilePath: codegenConfigPath });
+      codegenProcess = spawnCodegenProcess({
+        ...remixConfig,
+        configFilePath: codegenConfigPath
+      });
     }
     checkRemixVersions();
-    const showUpgrade = await checkingHydrogenVersion;
-    if (showUpgrade)
-      showUpgrade();
+    if (!disableVersionCheck) {
+      displayDevUpgradeNotice({ targetPath: appPath });
+    }
   }
   const fileWatchCache = createFileWatchCache();
   let skipRebuildLogs = false;
-  await watch(
+  const closeWatcher = await watch(
     {
       config: remixConfig,
       options: {
@@ -184,6 +202,7 @@ View server-side network requests: ${miniOxygen.listeningAt}/debug-network`
             name: "BuildError",
             type: 0,
             message: "MiniOxygen cannot start because the server bundle has not been generated.",
+            skipOclifErrorHandling: true,
             tryMessage: "This is likely due to an error in your app and Remix is unable to compile. Try fixing the app and MiniOxygen will start."
           });
         }
@@ -240,6 +259,12 @@ View server-side network requests: ${miniOxygen.listeningAt}/debug-network`
       }
     }
   );
+  return {
+    async close() {
+      codegenProcess?.kill(0);
+      await Promise.all([closeWatcher(), miniOxygen?.close()]);
+    }
+  };
 }
 
-export { Dev as default };
+export { Dev as default, runDev };

package/dist/commands/hydrogen/init.js

@@ -27,7 +27,7 @@ class Init extends Command {
       env: "SHOPIFY_HYDROGEN_FLAG_LANGUAGE"
     }),
     template: Flags.string({
-      description: "Sets the template to use. Pass `demo-store` for a fully-featured store template or `hello-world` for a barebones project.",
+      description: "Scaffolds project based on an existing template or example from the Hydrogen repository.",
       env: "SHOPIFY_HYDROGEN_FLAG_TEMPLATE"
     }),
     "install-deps": commonFlags.installDeps,