@shopify/cli-hydrogen 6.0.2 → 7.0.0

package/dist/commands/hydrogen/build.js

@@ -1,22 +1,22 @@
 import { Flags } from '@oclif/core';
 import Command from '@shopify/cli-kit/node/base-command';
-import { outputInfo, outputWarn, outputContent, outputToken } from '@shopify/cli-kit/node/output';
+import { outputInfo, outputContent, outputToken, outputWarn } from '@shopify/cli-kit/node/output';
 import { rmdir, fileSize, glob, readFile, writeFile, fileExists, copyFile } from '@shopify/cli-kit/node/fs';
-import { resolvePath, joinPath, relativePath } from '@shopify/cli-kit/node/path';
+import { resolvePath, relativePath, joinPath } from '@shopify/cli-kit/node/path';
 import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
 import colors from '@shopify/cli-kit/node/colors';
 import { getProjectPaths, getRemixConfig, handleRemixImportFail, assertOxygenChecks } from '../../lib/remix-config.js';
-import { commonFlags, deprecated, flagsToCamelObject } from '../../lib/flags.js';
+import { commonFlags, flagsToCamelObject } from '../../lib/flags.js';
 import { checkLockfileStatus } from '../../lib/check-lockfile.js';
 import { findMissingRoutes } from '../../lib/missing-routes.js';
 import { muteRemixLogs, createRemixLogger } from '../../lib/log.js';
 import { codegen } from '../../lib/codegen.js';
-import { hasMetafile, buildBundleAnalysis, getBundleAnalysisSummary } from '../../lib/bundle/analyzer.js';
-import { AbortError } from '@shopify/cli-kit/node/error';
+import { buildBundleAnalysis, getBundleAnalysisSummary } from '../../lib/bundle/analyzer.js';
 import { isCI } from '../../lib/is-ci.js';
+import { prepareDiffDirectory, copyDiffBuild } from '../../lib/template-diff.js';
 
 const LOG_WORKER_BUILT = "\u{1F4E6} Worker built";
-const MAX_WORKER_BUNDLE_SIZE = 10;
+const WORKER_BUILD_SIZE_LIMIT = 5;
 class Build extends Command {
   static description = "Builds a Hydrogen storefront for production.";
   static flags = {
@@ -44,18 +44,24 @@ class Build extends Command {
     }),
     codegen: commonFlags.codegen,
     "codegen-config-path": commonFlags.codegenConfigPath,
-    base: deprecated("--base")(),
-    entry: deprecated("--entry")(),
-    target: deprecated("--target")()
+    diff: commonFlags.diff
   };
   async run() {
     const { flags } = await this.parse(Build);
-    const directory = flags.path ? resolvePath(flags.path) : process.cwd();
+    const originalDirectory = flags.path ? resolvePath(flags.path) : process.cwd();
+    let directory = originalDirectory;
+    if (flags.diff) {
+      directory = await prepareDiffDirectory(originalDirectory, false);
+    }
     await runBuild({
       ...flagsToCamelObject(flags),
       useCodegen: flags.codegen,
       directory
     });
+    if (flags.diff) {
+      await copyDiffBuild(directory, originalDirectory);
+    }
+    process.exit(0);
   }
 }
 async function runBuild({
@@ -104,28 +110,37 @@ async function runBuild({
       fileWatchCache: createFileWatchCache()
     }).catch((thrown) => {
       logThrown(thrown);
-      process.exit(1);
+      if (process.env.SHOPIFY_UNIT_TEST) {
+        throw thrown;
+      } else {
+        process.exit(1);
+      }
     }),
     useCodegen && codegen({ ...remixConfig, configFilePath: codegenConfigPath })
   ]);
   if (process.env.NODE_ENV !== "development") {
     console.timeEnd(LOG_WORKER_BUILT);
+    const bundleAnalysisPath = await buildBundleAnalysis(buildPath);
     const sizeMB = await fileSize(buildPathWorkerFile) / (1024 * 1024);
-    if (await hasMetafile(buildPath)) {
-      await writeBundleAnalysis(
-        buildPath,
-        root,
-        buildPathWorkerFile,
-        sizeMB,
-        bundleStats,
-        remixConfig
+    const formattedSize = colors.yellow(sizeMB.toFixed(2) + " MB");
+    outputInfo(
+      outputContent`   ${colors.dim(
+        relativePath(root, buildPathWorkerFile)
+      )}  ${bundleAnalysisPath ? outputToken.link(formattedSize, bundleAnalysisPath) : formattedSize}\n`
+    );
+    if (bundleStats && bundleAnalysisPath) {
+      outputInfo(
+        outputContent`${await getBundleAnalysisSummary(buildPathWorkerFile) || "\n"}\n    │\n    └─── ${outputToken.link(
+          "Complete analysis: " + bundleAnalysisPath,
+          bundleAnalysisPath
+        )}\n\n`
       );
-    } else {
-      await writeSimpleBuildStatus(
-        root,
-        buildPathWorkerFile,
-        sizeMB,
-        remixConfig
+    }
+    if (sizeMB >= WORKER_BUILD_SIZE_LIMIT) {
+      outputWarn(
+        `\u{1F6A8} Smaller worker bundles are faster to deploy and run.${remixConfig.serverMinify ? "" : "\n   Minify your bundle by adding `serverMinify: true` to remix.config.js."}
+   Learn more about optimizing your worker bundle file: https://h2o.fyi/debugging/bundle-size
+`
       );
     }
   }
@@ -145,9 +160,6 @@ This build is missing ${missingRoutes.length} route${missingRoutes.length > 1 ?
   if (process.env.NODE_ENV !== "development") {
     await cleanClientSourcemaps(buildPathClient);
   }
-  if (!process.env.SHOPIFY_UNIT_TEST && !assetPath) {
-    process.exit(0);
-  }
 }
 async function cleanClientSourcemaps(buildPathClient) {
   const bundleFiles = await glob(joinPath(buildPathClient, "**/*.js"));
@@ -161,56 +173,6 @@ async function cleanClientSourcemaps(buildPathClient) {
     })
   );
 }
-async function writeBundleAnalysis(buildPath, root, buildPathWorkerFile, sizeMB, bundleStats, remixConfig) {
-  const bundleAnalysisPath = await buildBundleAnalysis(buildPath);
-  outputInfo(
-    outputContent`   ${colors.dim(
-      relativePath(root, buildPathWorkerFile)
-    )}  ${outputToken.link(
-      colors.yellow(sizeMB.toFixed(2) + " MB"),
-      bundleAnalysisPath
-    )}\n`
-  );
-  if (bundleStats && sizeMB < MAX_WORKER_BUNDLE_SIZE) {
-    outputInfo(
-      outputContent`${await getBundleAnalysisSummary(buildPathWorkerFile) || "\n"}\n    │\n    └─── ${outputToken.link(
-        "Complete analysis: " + bundleAnalysisPath,
-        bundleAnalysisPath
-      )}\n\n`
-    );
-  }
-  if (sizeMB >= MAX_WORKER_BUNDLE_SIZE) {
-    throw new AbortError(
-      "\u{1F6A8} Worker bundle exceeds 10 MB! Oxygen has a maximum worker bundle size of 10 MB.",
-      outputContent`See the bundle analysis for a breakdown of what is contributing to the bundle size:\n${outputToken.link(
-        bundleAnalysisPath,
-        bundleAnalysisPath
-      )}`
-    );
-  } else if (sizeMB >= 5) {
-    outputWarn(
-      `\u{1F6A8} Worker bundle exceeds 5 MB! This can delay your worker response.${remixConfig.serverMinify ? "" : " Minify your bundle by adding `serverMinify: true` to remix.config.js."}
-`
-    );
-  }
-}
-async function writeSimpleBuildStatus(root, buildPathWorkerFile, sizeMB, remixConfig) {
-  outputInfo(
-    outputContent`   ${colors.dim(
-      relativePath(root, buildPathWorkerFile)
-    )}  ${colors.yellow(sizeMB.toFixed(2) + " MB")}\n`
-  );
-  if (sizeMB >= MAX_WORKER_BUNDLE_SIZE) {
-    throw new AbortError(
-      "\u{1F6A8} Worker bundle exceeds 10 MB! Oxygen has a maximum worker bundle size of 10 MB."
-    );
-  } else if (sizeMB >= 5) {
-    outputWarn(
-      `\u{1F6A8} Worker bundle exceeds 5 MB! This can delay your worker response.${remixConfig.serverMinify ? "" : " Minify your bundle by adding `serverMinify: true` to remix.config.js."}
-`
-    );
-  }
-}
 async function copyPublicFiles(publicPath, buildPathClient) {
   if (!await fileExists(publicPath)) {
     return;

package/dist/commands/hydrogen/codegen.js

@@ -1,6 +1,7 @@
 import path from 'path';
 import Command from '@shopify/cli-kit/node/base-command';
 import { renderSuccess } from '@shopify/cli-kit/node/ui';
+import colors from '@shopify/cli-kit/node/colors';
 import { Flags } from '@oclif/core';
 import { getProjectPaths, getRemixConfig } from '../../lib/remix-config.js';
 import { commonFlags, flagsToCamelObject } from '../../lib/flags.js';
@@ -24,8 +25,6 @@ class Codegen extends Command {
       default: false
     })
   };
-  static aliases = ["codegen-unstable"];
-  static deprecateAliases = true;
   async run() {
     const { flags } = await this.parse(Codegen);
     const directory = flags.path ? path.resolve(flags.path) : process.cwd();
@@ -53,7 +52,13 @@ async function runCodegen({
   if (!watch) {
     renderSuccess({
       headline: "Generated types for GraphQL:",
-      body: generatedFiles.map((file) => `- ${file}`).join("\n")
+      body: {
+        list: {
+          items: Object.entries(generatedFiles).map(
+            ([key, value]) => key + "\n" + value.map((item) => colors.dim(`- ${item}`)).join("\n")
+          )
+        }
+      }
     });
   }
 }

package/dist/commands/hydrogen/deploy.js

@@ -3,9 +3,10 @@ import Command from '@shopify/cli-kit/node/base-command';
 import colors from '@shopify/cli-kit/node/colors';
 import { outputWarn, outputInfo, outputContent } from '@shopify/cli-kit/node/output';
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { getLatestGitCommit } from '@shopify/cli-kit/node/git';
+import { writeFile } from '@shopify/cli-kit/node/fs';
+import { ensureIsClean, getLatestGitCommit, GitDirectoryNotCleanError } from '@shopify/cli-kit/node/git';
 import { resolvePath } from '@shopify/cli-kit/node/path';
-import { renderFatalError, renderSelectPrompt, renderSuccess, renderTasks } from '@shopify/cli-kit/node/ui';
+import { renderFatalError, renderWarning, renderSelectPrompt, renderSuccess, renderTasks } from '@shopify/cli-kit/node/ui';
 import { ciPlatform } from '@shopify/cli-kit/node/context/local';
 import { parseToken, createDeploy } from '@shopify/oxygen-cli/deploy';
 import { commonFlags, flagsToCamelObject } from '../../lib/flags.js';
@@ -18,30 +19,51 @@ const deploymentLogger = (message, level = "info") => {
   }
 };
 class Deploy extends Command {
+  static description = "Builds and deploys a Hydrogen storefront to Oxygen.";
   static flags = {
     "env-branch": Flags.string({
-      char: "e",
-      description: "Environment branch (tag) for environment to deploy to",
+      description: "Environment branch (tag) for environment to deploy to.",
       required: false
     }),
+    preview: Flags.boolean({
+      description: "Deploys to the Preview environment. Overrides --env-branch and Git metadata.",
+      required: false,
+      default: false
+    }),
+    force: Flags.boolean({
+      char: "f",
+      description: "Forces a deployment to proceed if there are uncommited changes in its Git repository.",
+      default: false,
+      env: "SHOPIFY_HYDROGEN_FLAG_FORCE",
+      required: false
+    }),
+    "auth-bypass-token": Flags.boolean({
+      description: "Generate an authentication bypass token, which can be used to perform end-to-end tests against the deployment.",
+      required: false,
+      default: false
+    }),
     path: commonFlags.path,
     shop: commonFlags.shop,
-    "public-deployment": Flags.boolean({
-      env: "SHOPIFY_HYDROGEN_FLAG_PUBLIC_DEPLOYMENT",
-      description: "Marks a preview deployment as publicly accessible.",
+    "no-json-output": Flags.boolean({
+      description: "Prevents the command from creating a JSON file containing the deployment URL in CI environments.",
       required: false,
       default: false
     }),
     token: Flags.string({
       char: "t",
-      description: "Oxygen deployment token",
+      description: "Oxygen deployment token. Defaults to the linked storefront's token if available.",
       env: "SHOPIFY_HYDROGEN_DEPLOYMENT_TOKEN",
       required: false
     }),
+    "metadata-description": Flags.string({
+      description: "Description of the changes in the deployment. Defaults to the commit message of the latest commit if there are no uncommited changes.",
+      required: false,
+      env: "SHOPIFY_HYDROGEN_FLAG_METADATA_DESCRIPTION"
+    }),
     "metadata-url": Flags.string({
-      description: "URL that links to the deployment. Will be saved and displayed in the Shopify admin",
       required: false,
-      env: "SHOPIFY_HYDROGEN_FLAG_METADATA_URL"
+      env: "SHOPIFY_HYDROGEN_FLAG_METADATA_URL",
+      hidden: true
     }),
     "metadata-user": Flags.string({
       description: "User that initiated the deployment. Will be saved and displayed in the Shopify admin",
@@ -49,12 +71,11 @@ class Deploy extends Command {
       env: "SHOPIFY_HYDROGEN_FLAG_METADATA_USER"
     }),
     "metadata-version": Flags.string({
-      description: "A version identifier for the deployment. Will be saved and displayed in the Shopify admin",
       required: false,
-      env: "SHOPIFY_HYDROGEN_FLAG_METADATA_VERSION"
+      env: "SHOPIFY_HYDROGEN_FLAG_METADATA_VERSION",
+      hidden: true
     })
   };
-  static hidden = true;
   async run() {
     const { flags } = await this.parse(Deploy);
     const deploymentOptions = this.flagsToOxygenDeploymentOptions(flags);
@@ -69,35 +90,90 @@ class Deploy extends Command {
     const camelFlags = flagsToCamelObject(flags);
     return {
       ...camelFlags,
+      defaultEnvironment: flags.preview,
       environmentTag: flags["env-branch"],
       path: flags.path ? resolvePath(flags.path) : process.cwd()
     };
   }
 }
+function createUnexpectedAbortError(message) {
+  return new AbortError(
+    message || "The deployment failed due to an unexpected error.",
+    "Retrying the deployement may succeed.",
+    [
+      [
+        "If the issue persits, please check the",
+        {
+          link: {
+            label: "Shopify status page",
+            url: "https://status.shopify.com/"
+          }
+        },
+        "for any known issues."
+      ]
+    ]
+  );
+}
 async function oxygenDeploy(options) {
   const {
+    authBypassToken: generateAuthBypassToken,
+    defaultEnvironment,
     environmentTag,
+    force: forceOnUncommitedChanges,
+    noJsonOutput,
     path,
     shop,
-    publicDeployment,
     metadataUrl,
     metadataUser,
     metadataVersion
   } = options;
-  const ci = ciPlatform();
+  let { metadataDescription } = options;
+  let isCleanGit = true;
+  try {
+    await ensureIsClean(path);
+  } catch (error) {
+    if (error instanceof GitDirectoryNotCleanError) {
+      isCleanGit = false;
+    }
+    if (!forceOnUncommitedChanges && !isCleanGit) {
+      throw new AbortError("Uncommitted changes detected.", null, [
+        [
+          "Commit your changes before deploying or use the ",
+          { command: "--force" },
+          " flag to deploy with uncommitted changes."
+        ]
+      ]);
+    }
+  }
+  const isCI = ciPlatform().isCI;
   let token = options.token;
   let branch;
+  let commitHash;
   let deploymentData;
   let deploymentEnvironmentTag = void 0;
   let gitCommit;
   try {
     gitCommit = await getLatestGitCommit(path);
     branch = (/HEAD -> ([^,]*)/.exec(gitCommit.refs) || [])[1];
+    commitHash = gitCommit.hash;
   } catch (error) {
     outputWarn("Could not retrieve Git history.");
     branch = void 0;
   }
-  if (!ci.isCI) {
+  if (!metadataDescription && !isCleanGit) {
+    renderWarning({
+      headline: "No deployment description provided",
+      body: [
+        "Deploying uncommited changes, but no description has been provided. Use the ",
+        { command: "--metadata-description" },
+        "flag to provide a description. If no description is provided, the description defaults to ",
+        { userInput: "<sha> with additional changes" },
+        " using the SHA of the last commit."
+      ]
+    });
+    metadataDescription = `${commitHash} with additional changes`;
+  }
+  if (!isCI) {
     deploymentData = await getOxygenDeploymentData({
       root: path,
       flagShop: shop
@@ -108,19 +184,24 @@ async function oxygenDeploy(options) {
     token = token || deploymentData.oxygenDeploymentToken;
   }
   if (!token) {
-    const errMessage = ci.isCI ? [
+    const errMessage = isCI ? [
       "No deployment token provided. Use the ",
       { command: "--token" },
       " flag to provide a token."
     ] : `Could not obtain an Oxygen deployment token, please try again or contact Shopify support.`;
     throw new AbortError(errMessage);
   }
-  if (!ci.isCI && !environmentTag && deploymentData?.environments) {
+  if (!isCI && !defaultEnvironment && !environmentTag && deploymentData?.environments) {
     if (deploymentData.environments.length > 1) {
       const choices = [
-        ...deploymentData.environments.map(({ name, branch: branch2 }) => ({
+        ...deploymentData.environments.map(({ name, branch: branch2, type }) => ({
           label: name,
-          value: branch2
+          // The preview environment will never have an associated branch so
+          // we're using a custom string here to identify it later in our code.
+          // Using a period at the end of the value is an invalid branch name
+          // in Git so we can be sure that this won't conflict with a merchant's
+          // repository.
+          value: type === "PREVIEW" ? "shopify-preview-environment." : branch2
         }))
       ];
       deploymentEnvironmentTag = await renderSelectPrompt({
@@ -134,19 +215,35 @@ async function oxygenDeploy(options) {
       );
     }
   }
+  let deploymentUrl = "https://oxygen.shopifyapps.com";
+  if (process.env.UNSAFE_SHOPIFY_HYDROGEN_DEPLOYMENT_URL) {
+    deploymentUrl = process.env.UNSAFE_SHOPIFY_HYDROGEN_DEPLOYMENT_URL;
+    outputWarn(
+      "Using a custom deployment service. Don't do this in production!"
+    );
+  }
+  let fallbackEnvironmentTag = branch;
+  let isPreview = false;
+  if (deploymentEnvironmentTag === "shopify-preview-environment.") {
+    fallbackEnvironmentTag = void 0;
+    deploymentEnvironmentTag = void 0;
+    isPreview = true;
+  }
   const config = {
     assetsDir: "dist/client",
     bugsnag: true,
-    deploymentUrl: "https://oxygen.shopifyapps.com",
+    deploymentUrl,
+    defaultEnvironment: defaultEnvironment || isPreview,
     deploymentToken: parseToken(token),
-    environmentTag: environmentTag || deploymentEnvironmentTag || branch,
+    environmentTag: environmentTag || deploymentEnvironmentTag || fallbackEnvironmentTag,
+    generateAuthBypassToken,
     verificationMaxDuration: 180,
     metadata: {
+      ...metadataDescription ? { description: metadataDescription } : {},
       ...metadataUrl ? { url: metadataUrl } : {},
       ...metadataUser ? { user: metadataUser } : {},
       ...metadataVersion ? { version: metadataVersion } : {}
     },
-    publicDeployment,
     skipVerification: false,
     rootPath: path,
     skipBuild: false,
@@ -157,10 +254,16 @@ async function oxygenDeploy(options) {
   const uploadPromise = new Promise((resolve) => {
     resolveUpload = resolve;
   });
-  let resolveHealthCheck;
-  const healthCheckPromise = new Promise((resolve) => {
-    resolveHealthCheck = resolve;
+  let resolveRoutableCheck;
+  const routableCheckPromise = new Promise((resolve) => {
+    resolveRoutableCheck = resolve;
   });
+  let resolveDeploymentCompletedVerification;
+  const deploymentCompletedVerificationPromise = new Promise(
+    (resolve) => {
+      resolveDeploymentCompletedVerification = resolve;
+    }
+  );
   let deployError = null;
   let resolveDeploy;
   let rejectDeploy;
@@ -176,11 +279,21 @@ async function oxygenDeploy(options) {
       await runBuild({
         directory: path,
         assetPath,
-        sourcemap: false,
+        sourcemap: true,
         useCodegen: false
       });
     },
-    onVerificationComplete: () => resolveHealthCheck(),
+    onDeploymentCompleted: () => resolveDeploymentCompletedVerification(),
+    onVerificationComplete: () => resolveRoutableCheck(),
+    onDeploymentCompletedVerificationError() {
+      deployError = new AbortError(
+        "Unable to verify the deployment was completed successfully",
+        "Please verify the deployment status in the Shopify Admin and retry deploying if necessary."
+      );
+    },
+    onDeploymentFailed: (details) => {
+      deployError = createUnexpectedAbortError(details.error || details.status);
+    },
     onUploadFilesStart: () => uploadStart(),
     onUploadFilesComplete: () => resolveUpload(),
     onVerificationError: (error) => {
@@ -206,21 +319,44 @@ async function oxygenDeploy(options) {
         task: async () => await uploadPromise
       },
       {
-        title: "Verifying deployment",
-        task: async () => await healthCheckPromise
+        title: "Verifying deployment has been completed",
+        task: async () => await deploymentCompletedVerificationPromise
+      },
+      {
+        title: "Verifying deployment is routable",
+        task: async () => await routableCheckPromise
       }
     ]);
   };
-  await createDeploy({ config, hooks, logger: deploymentLogger }).then((url) => {
-    const deploymentType = config.publicDeployment ? "public" : "private";
+  await createDeploy({ config, hooks, logger: deploymentLogger }).then(async (completedDeployment) => {
+    if (!completedDeployment) {
+      rejectDeploy(createUnexpectedAbortError());
+      return;
+    }
+    const nextSteps = [
+      [
+        "Open",
+        { link: { url: completedDeployment.url } },
+        `in your browser to view your deployment.`
+      ]
+    ];
+    if (completedDeployment?.authBypassToken) {
+      nextSteps.push([
+        "Use the",
+        { subdued: completedDeployment.authBypassToken },
+        "token to perform end-to-end tests against the deployment."
+      ]);
+    }
     renderSuccess({
       body: ["Successfully deployed to Oxygen"],
-      nextSteps: [
-        [
-          `Open ${url} in your browser to view your ${deploymentType} deployment`
-        ]
-      ]
+      nextSteps
     });
+    if (isCI && !noJsonOutput) {
+      await writeFile(
+        "h2_deploy_log.json",
+        JSON.stringify(completedDeployment)
+      );
+    }
     resolveDeploy();
   }).catch((error) => {
     rejectDeploy(deployError || error);