@shopify/cli-hydrogen 6.1.1 → 7.0.1

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

@@ -1,8 +1,17 @@
 import { Flags } from '@oclif/core';
 import Command from '@shopify/cli-kit/node/base-command';
-import { outputWarn } from '@shopify/cli-kit/node/output';
-import { renderWarning } from '@shopify/cli-kit/node/ui';
-import { commonFlags } from '../../lib/flags.js';
+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 { 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, 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';
+import { getOxygenDeploymentData } from '../../lib/get-oxygen-deployment-data.js';
+import { runBuild } from './build.js';
 
 const deploymentLogger = (message, level = "info") => {
   if (level === "error" || level === "warn") {
@@ -10,12 +19,17 @@ 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.",
@@ -23,22 +37,21 @@ class Deploy extends Command {
       env: "SHOPIFY_HYDROGEN_FLAG_FORCE",
       required: 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.",
+    "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,
     "no-json-output": Flags.boolean({
-      description: "Prevents the command from creating a JSON file containing the deployment URL (in CI environments).",
+      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
     }),
@@ -48,9 +61,9 @@ class Deploy extends Command {
       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",
@@ -58,20 +71,297 @@ 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);
+    await oxygenDeploy(deploymentOptions).catch((error) => {
+      renderFatalError(error);
+      process.exit(1);
+    }).finally(() => {
+      process.exit(0);
+    });
+  }
+  flagsToOxygenDeploymentOptions(flags) {
+    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,
+    metadataUrl,
+    metadataUser,
+    metadataVersion
+  } = options;
+  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 (!metadataDescription && !isCleanGit) {
     renderWarning({
-      body: "Deploy command unavailable.",
-      nextSteps: [
-        "To use the deploy command, upgrade cli-hydrogen to v7.0.0+."
+      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
+    });
+    if (!deploymentData) {
+      return;
+    }
+    token = token || deploymentData.oxygenDeploymentToken;
+  }
+  if (!token) {
+    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 (!isCI && !defaultEnvironment && !environmentTag && deploymentData?.environments) {
+    if (deploymentData.environments.length > 1) {
+      const choices = [
+        ...deploymentData.environments.map(({ name, branch: branch2, type }) => ({
+          label: name,
+          // 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({
+        message: "Select an environment to deploy to",
+        choices,
+        defaultValue: branch
+      });
+    } else {
+      outputInfo(
+        `Using current checked out branch ${branch} as environment tag`
+      );
+    }
+  }
+  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,
+    defaultEnvironment: defaultEnvironment || isPreview,
+    deploymentToken: parseToken(token),
+    environmentTag: environmentTag || deploymentEnvironmentTag || fallbackEnvironmentTag,
+    generateAuthBypassToken,
+    verificationMaxDuration: 180,
+    metadata: {
+      ...metadataDescription ? { description: metadataDescription } : {},
+      ...metadataUrl ? { url: metadataUrl } : {},
+      ...metadataUser ? { user: metadataUser } : {},
+      ...metadataVersion ? { version: metadataVersion } : {}
+    },
+    skipVerification: false,
+    rootPath: path,
+    skipBuild: false,
+    workerOnly: false,
+    workerDir: "dist/worker"
+  };
+  let resolveUpload;
+  const uploadPromise = new Promise((resolve) => {
+    resolveUpload = 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;
+  const deployPromise = new Promise((resolve, reject) => {
+    resolveDeploy = resolve;
+    rejectDeploy = reject;
+  });
+  const hooks = {
+    buildFunction: async (assetPath) => {
+      outputInfo(
+        outputContent`${colors.whiteBright("Building project...")}`.value
+      );
+      await runBuild({
+        directory: path,
+        assetPath,
+        sourcemap: true,
+        useCodegen: false
+      });
+    },
+    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) => {
+      deployError = new AbortError(
+        error.message,
+        "Please verify the deployment status in the Shopify Admin and retry deploying if necessary."
+      );
+    },
+    onUploadFilesError: (error) => {
+      deployError = new AbortError(
+        error.message,
+        "Check your connection and try again. If the problem persists, try again later or contact support."
+      );
+    }
+  };
+  const uploadStart = async () => {
+    outputInfo(
+      outputContent`${colors.whiteBright("Deploying to Oxygen..\n")}`.value
+    );
+    await renderTasks([
+      {
+        title: "Uploading files",
+        task: async () => await uploadPromise
+      },
+      {
+        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(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
+    });
+    if (isCI && !noJsonOutput) {
+      await writeFile(
+        "h2_deploy_log.json",
+        JSON.stringify(completedDeployment)
+      );
+    }
+    resolveDeploy();
+  }).catch((error) => {
+    rejectDeploy(deployError || error);
+  });
+  return deployPromise;
 }
 
-export { Deploy as default, deploymentLogger };
+export { Deploy as default, deploymentLogger, oxygenDeploy };