@shopify/cli-hydrogen 7.1.1 → 8.0.0

package/dist/commands/hydrogen/build-vite.js

@@ -1,5 +1,5 @@
 import Command from '@shopify/cli-kit/node/base-command';
-import { outputWarn } from '@shopify/cli-kit/node/output';
+import { collectLog, outputWarn } from '@shopify/cli-kit/node/output';
 import { removeFile, fileSize } from '@shopify/cli-kit/node/fs';
 import { resolvePath, joinPath } from '@shopify/cli-kit/node/path';
 import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
@@ -23,6 +23,7 @@ class Build extends Command {
     ...commonFlags.codegen,
     ...commonFlags.diff
   };
+  static hidden = true;
   async run() {
     const { flags } = await this.parse(Build);
     const originalDirectory = flags.path ? resolvePath(flags.path) : process.cwd();
@@ -57,20 +58,28 @@ async function runViteBuild({
   if (lockfileCheck) {
     await checkLockfileStatus(root, isCI());
   }
-  const {
-    userViteConfig,
-    remixConfig,
-    clientOutDir,
-    serverOutDir,
-    serverOutFile
-  } = await getViteConfig(root);
+  const [
+    vite,
+    { userViteConfig, remixConfig, clientOutDir, serverOutDir, serverOutFile }
+  ] = await Promise.all([
+    // Avoid static imports because this file is imported by `deploy` command,
+    // which must have a hard dependency on 'vite'.
+    import('vite'),
+    getViteConfig(root, ssrEntry)
+  ]);
+  const customLogger = vite.createLogger();
+  if (process.env.SHOPIFY_UNIT_TEST) {
+    customLogger.info = (msg) => collectLog("info", msg);
+    customLogger.warn = (msg) => collectLog("warn", msg);
+    customLogger.error = (msg) => collectLog("error", msg);
+  }
   const serverMinify = userViteConfig.build?.minify ?? true;
   const commonConfig = {
     root,
     mode: process.env.NODE_ENV,
-    base: assetPath
+    base: assetPath,
+    customLogger
   };
-  const vite = await import('vite');
   await vite.build({
     ...commonConfig,
     build: {

package/dist/commands/hydrogen/build.js

@@ -14,10 +14,12 @@ import { codegen } from '../../lib/codegen.js';
 import { buildBundleAnalysis, getBundleAnalysisSummary } from '../../lib/bundle/analyzer.js';
 import { isCI } from '../../lib/is-ci.js';
 import { prepareDiffDirectory, copyDiffBuild } from '../../lib/template-diff.js';
+import { hasViteConfig } from '../../lib/vite-config.js';
 
 const LOG_WORKER_BUILT = "\u{1F4E6} Worker built";
 const WORKER_BUILD_SIZE_LIMIT = 5;
 class Build extends Command {
+  static descriptionWithMarkdown = `Builds a Hydrogen storefront for production. The client and app worker files are compiled to a \`/dist\` folder in your Hydrogen project directory.`;
   static description = "Builds a Hydrogen storefront for production.";
   static flags = {
     ...commonFlags.path,
@@ -39,11 +41,17 @@ class Build extends Command {
     if (flags.diff) {
       directory = await prepareDiffDirectory(originalDirectory, false);
     }
-    await runBuild({
+    const buildParams = {
       ...flagsToCamelObject(flags),
       useCodegen: flags.codegen,
       directory
-    });
+    };
+    if (await hasViteConfig(directory ?? process.cwd())) {
+      const { runViteBuild } = await import('./build-vite.js');
+      await runViteBuild(buildParams);
+    } else {
+      await runBuild(buildParams);
+    }
     if (flags.diff) {
       await copyDiffBuild(directory, originalDirectory);
     }

package/dist/commands/hydrogen/check.js

@@ -6,6 +6,7 @@ import { logMissingRoutes, findMissingRoutes } from '../../lib/missing-routes.js
 import { Args } from '@oclif/core';
 
 class GenerateRoute extends Command {
+  static descriptionWithMarkdown = `Checks whether your Hydrogen app includes a set of standard Shopify routes.`;
   static description = "Returns diagnostic information about a Hydrogen storefront.";
   static flags = {
     ...commonFlags.path

package/dist/commands/hydrogen/codegen.js

@@ -8,6 +8,7 @@ import { commonFlags, flagsToCamelObject } from '../../lib/flags.js';
 import { codegen } from '../../lib/codegen.js';
 
 class Codegen extends Command {
+  static descriptionWithMarkdown = "Automatically generates GraphQL types for your project\u2019s Storefront API queries.";
   static description = "Generate types for the Storefront API queries found in your project.";
   static flags = {
     ...commonFlags.path,

package/dist/commands/hydrogen/customer-account/push.js

@@ -0,0 +1,170 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { Flags } from '@oclif/core';
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { outputDebug } from '@shopify/cli-kit/node/output';
+import { linkStorefront } from '../link.js';
+import { commonFlags, flagsToCamelObject } from '../../../lib/flags.js';
+import { getCliCommand } from '../../../lib/shell.js';
+import { login } from '../../../lib/auth.js';
+import { setCustomerAccountConfig, getConfig } from '../../../lib/shopify-config.js';
+import { replaceCustomerApplicationUrls } from '../../../lib/graphql/admin/customer-application-update.js';
+
+class CustomerAccountPush extends Command {
+  static description = "Push project configuration to admin";
+  static flags = {
+    ...commonFlags.path,
+    "storefront-id": Flags.string({
+      description: "The id of the storefront the configuration should be pushed to. Must start with 'gid://shopify/HydrogenStorefront/'"
+    }),
+    "dev-origin": Flags.string({
+      description: "The development domain of your application.",
+      required: true
+    }),
+    "relative-redirect-uri": Flags.string({
+      description: "The relative url of allowed callback url for Customer Account API OAuth flow. Default is '/account/authorize'"
+    }),
+    "relative-logout-uri": Flags.string({
+      description: "The relative url of allowed url that will be redirected to post-logout for Customer Account API OAuth flow. Default to nothing."
+    })
+  };
+  async run() {
+    const { flags } = await this.parse(CustomerAccountPush);
+    await runCustomerAccountPush({ ...flagsToCamelObject(flags) });
+  }
+}
+async function runCustomerAccountPush({
+  path: root = process.cwd(),
+  storefrontId: storefrontIdFromFlag,
+  devOrigin,
+  redirectUriRelativeUrl = "/account/authorize",
+  logoutUriRelativeUrl
+}) {
+  const storefrontId = await getStorefrontId(root, storefrontIdFromFlag);
+  try {
+    if (!storefrontId) {
+      throw new Error(
+        "No storefrontId was found in --storefront-id flag or .shopify/project.json"
+      );
+    }
+    const redirectUri = redirectUriRelativeUrl ? new URL(redirectUriRelativeUrl, devOrigin).toString() : devOrigin;
+    const javascriptOrigin = devOrigin;
+    const logoutUri = logoutUriRelativeUrl ? new URL(logoutUriRelativeUrl, devOrigin).toString() : devOrigin;
+    if (!redirectUri && !javascriptOrigin && !logoutUri) {
+      return;
+    }
+    const { session, config } = await login(root);
+    const customerAccountConfig = config?.storefront?.customerAccountConfig;
+    const { success, userErrors } = await replaceCustomerApplicationUrls(
+      session,
+      storefrontId,
+      {
+        redirectUri: {
+          add: redirectUri ? [redirectUri] : void 0,
+          removeRegex: customerAccountConfig?.redirectUri
+        },
+        javascriptOrigin: {
+          add: javascriptOrigin ? [javascriptOrigin] : void 0,
+          removeRegex: customerAccountConfig?.javascriptOrigin
+        },
+        logoutUris: {
+          add: logoutUri ? [logoutUri] : void 0,
+          removeRegex: customerAccountConfig?.logoutUri
+        }
+      }
+    );
+    if (!success || userErrors.length) {
+      const error = new Error(
+        "Customer Account Application setup update fail."
+      );
+      error.userErrors = userErrors;
+      throw error;
+    }
+    await setCustomerAccountConfig(root, {
+      redirectUri,
+      javascriptOrigin,
+      logoutUri
+    });
+    return () => cleanupCustomerApplicationUrls(session, storefrontId, {
+      redirectUri,
+      javascriptOrigin,
+      logoutUri
+    });
+  } catch (error) {
+    let confidentialAccessFound = false;
+    const errors = error?.userErrors?.length ? error.userErrors.map(
+      (value) => {
+        if (/Javascript origin is not allowed for this application type/i.test(
+          value.message
+        )) {
+          confidentialAccessFound = true;
+        }
+        return `${value.field}: ${value.message}`;
+      }
+    ) : error.message ? [error.message] : [];
+    const nextSteps = [
+      {
+        link: {
+          label: "Manually update application setup",
+          url: "https://shopify.dev/docs/custom-storefronts/building-with-the-customer-account-api/hydrogen#update-the-application-setup"
+        }
+      }
+    ];
+    if (confidentialAccessFound) {
+      nextSteps.unshift({
+        link: {
+          label: "Enable Public access for Hydrogen",
+          url: "https://shopify.dev/docs/custom-storefronts/building-with-the-customer-account-api/getting-started#step-1-enable-customer-account-api-access"
+        }
+      });
+    }
+    throw new AbortError(
+      "Customer Account Application setup update fail.",
+      errors.length ? [
+        {
+          list: {
+            title: "The following error occurs during update:",
+            items: errors.map(
+              (value, index) => `${index != 0 ? "\n\n" : ""}${value}`
+            )
+          }
+        }
+      ] : void 0,
+      nextSteps
+    );
+  }
+}
+async function cleanupCustomerApplicationUrls(session, storefrontId, customerAccountConfig = {}) {
+  if (!Object.values(customerAccountConfig).some(Boolean))
+    return;
+  outputDebug(
+    `Cleaning up Customer Application url "${customerAccountConfig.redirectUri}"`
+  );
+  await replaceCustomerApplicationUrls(session, storefrontId, {
+    redirectUri: { removeRegex: customerAccountConfig?.redirectUri },
+    javascriptOrigin: { removeRegex: customerAccountConfig?.javascriptOrigin },
+    logoutUris: { removeRegex: customerAccountConfig?.logoutUri }
+  }).catch((error) => {
+    outputDebug(
+      `Failed to clean up Customer Application url "${customerAccountConfig.redirectUri}":
+${error?.message}`
+    );
+  });
+}
+async function getStorefrontId(root, storefrontIdFromFlag) {
+  if (storefrontIdFromFlag)
+    return storefrontIdFromFlag;
+  const { session, config } = await login(root);
+  if (config.storefront?.id)
+    return config.storefront.id;
+  const cliCommand = await getCliCommand();
+  const linkedStore = await linkStorefront(root, session, config, {
+    cliCommand
+  });
+  if (!linkedStore) {
+    return;
+  }
+  const newConfig = await getConfig(root);
+  return newConfig.storefront?.id;
+}
+
+export { CustomerAccountPush as default, getStorefrontId, runCustomerAccountPush };

package/dist/commands/hydrogen/debug/cpu.js

@@ -12,6 +12,9 @@ import { createCpuStartupProfiler } from '../../../lib/cpu-profiler.js';
 
 const DEFAULT_OUTPUT_PATH = "startup.cpuprofile";
 class DebugCpu extends Command {
+  static descriptionWithMarkdown = `Builds the app and runs the resulting code to profile the server startup time, watching for changes. This command can be used to [debug slow app startup times](https://shopify.dev/docs/custom-storefronts/hydrogen/debugging/cpu-startup) that cause failed deployments in Oxygen.
+
+  The profiling results are written to a \`.cpuprofile\` file that can be viewed with certain tools such as [Flame Chart Visualizer for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-js-profile-flame).`;
   static description = "Builds and profiles the server startup time the app.";
   static flags = {
     ...commonFlags.path,

package/dist/commands/hydrogen/deploy.js

@@ -7,15 +7,19 @@ 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, relativePath } from '@shopify/cli-kit/node/path';
-import { renderWarning, renderSelectPrompt, renderSuccess, renderTasks } from '@shopify/cli-kit/node/ui';
+import { renderWarning, renderSelectPrompt, renderConfirmationPrompt, 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 { findEnvironmentOrThrow, findEnvironmentByBranchOrThrow, orderEnvironmentsBySafety, createEnvironmentCliChoiceLabel } from '../../lib/common.js';
+import { execAsync } from '../../lib/process.js';
 import { commonFlags, flagsToCamelObject } from '../../lib/flags.js';
 import { getOxygenDeploymentData } from '../../lib/get-oxygen-deployment-data.js';
 import { runBuild } from './build.js';
 import { runViteBuild } from './build-vite.js';
 import { getViteConfig } from '../../lib/vite-config.js';
 import { prepareDiffDirectory } from '../../lib/template-diff.js';
+import { hasRemixConfigFile } from '../../lib/remix-config.js';
+import { packageManagers } from '../../lib/package-managers.js';
 
 const DEPLOY_OUTPUT_FILE_HANDLE = "h2_deploy_log.json";
 const deploymentLogger = (message, level = "info") => {
@@ -24,12 +28,12 @@ const deploymentLogger = (message, level = "info") => {
   }
 };
 class Deploy extends Command {
+  static descriptionWithMarkdown = `Builds and deploys your Hydrogen storefront to Oxygen. Requires an Oxygen deployment token to be set with the \`--token\` flag or an environment variable (\`SHOPIFY_HYDROGEN_DEPLOYMENT_TOKEN\`). If the storefront is [linked](https://shopify.dev/docs/api/shopify-cli/hydrogen/hydrogen-link) then the Oxygen deployment token for the linked storefront will be used automatically.`;
   static description = "Builds and deploys a Hydrogen storefront to Oxygen.";
   static flags = {
-    "env-branch": Flags.string({
-      description: "Environment branch (tag) for environment to deploy to.",
-      required: false
-    }),
+    ...commonFlags.entry,
+    ...commonFlags.env,
+    ...commonFlags.envBranch,
     "env-file": Flags.string({
       description: "Path to an environment file to override existing environment variables for the deployment.",
       required: false
@@ -114,7 +118,6 @@ class Deploy extends Command {
     return {
       ...camelFlags,
       defaultEnvironment: flags.preview,
-      environmentTag: flags["env-branch"],
       environmentFile: flags["env-file"],
       path: flags.path ? resolvePath(flags.path) : process.cwd()
     };
@@ -143,7 +146,8 @@ async function runDeploy(options) {
     authBypassToken: generateAuthBypassToken,
     buildCommand,
     defaultEnvironment,
-    environmentTag,
+    env: envHandle,
+    envBranch,
     environmentFile,
     force: forceOnUncommitedChanges,
     noVerify,
@@ -153,7 +157,8 @@ async function runDeploy(options) {
     shop,
     metadataUrl,
     metadataUser,
-    metadataVersion
+    metadataVersion,
+    entry: ssrEntry
   } = options;
   let { metadataDescription } = options;
   let isCleanGit = true;
@@ -164,13 +169,34 @@ async function runDeploy(options) {
       isCleanGit = false;
     }
     if (!forceOnUncommitedChanges && !isCleanGit) {
-      throw new AbortError("Uncommitted changes detected.", null, [
+      let errorMessage = "Uncommitted changes detected";
+      let changedFiles = void 0;
+      const nextSteps = [
         [
-          "Commit your changes before deploying or use the ",
+          "Commit your changes before deploying or use the",
           { command: "--force" },
-          " flag to deploy with uncommitted changes."
+          "flag to deploy with uncommitted changes."
         ]
-      ]);
+      ];
+      try {
+        changedFiles = (await execAsync("git status -s", { cwd: root })).stdout;
+      } catch {
+      }
+      if (changedFiles) {
+        errorMessage += `:
+
+${changedFiles.trimEnd()}`;
+        packageManagers.forEach(({ name, lockfile, installCommand }) => {
+          if (changedFiles.includes(lockfile)) {
+            nextSteps.push([
+              `If you are using ${name}, try running`,
+              { command: installCommand },
+              `to avoid changes to ${lockfile}.`
+            ]);
+          }
+        });
+      }
+      throw new AbortError(errorMessage, null, nextSteps);
     }
   }
   const isCI = ciPlatform().isCI;
@@ -178,7 +204,7 @@ async function runDeploy(options) {
   let branch;
   let commitHash;
   let deploymentData;
-  let deploymentEnvironmentTag = void 0;
+  let userChosenEnvironmentTag = void 0;
   let gitCommit;
   try {
     gitCommit = await getLatestGitCommit(root);
@@ -212,6 +238,14 @@ async function runDeploy(options) {
       })
     );
   }
+  let userProvidedEnvironmentTag = null;
+  let isPreview = false;
+  if (isCI && envHandle) {
+    throw new AbortError(
+      "Can't specify an environment handle in CI",
+      "Environments are automatically picked up by the current Git branch."
+    );
+  }
   if (!isCI) {
     deploymentData = await getOxygenDeploymentData({
       root,
@@ -221,6 +255,20 @@ async function runDeploy(options) {
       return;
     }
     token = token || deploymentData.oxygenDeploymentToken;
+    if (envHandle) {
+      userProvidedEnvironmentTag = findEnvironmentOrThrow(
+        deploymentData.environments || [],
+        envHandle
+      ).branch;
+      if (userProvidedEnvironmentTag === null) {
+        isPreview = true;
+      }
+    } else if (envBranch) {
+      userProvidedEnvironmentTag = findEnvironmentByBranchOrThrow(
+        deploymentData.environments || [],
+        envBranch
+      ).branch;
+    }
   }
   if (!token) {
     const errMessage = isCI ? [
@@ -230,20 +278,21 @@ async function runDeploy(options) {
     ] : `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 (!isCI && !defaultEnvironment && !envHandle && !envBranch && 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({
+      const environments = orderEnvironmentsBySafety(
+        deploymentData.environments
+      );
+      const choices = environments.map(({ name, branch: branch2, handle, type }) => ({
+        label: createEnvironmentCliChoiceLabel(name, handle, 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
+      }));
+      userChosenEnvironmentTag = await renderSelectPrompt({
         message: "Select an environment to deploy to",
         choices,
         defaultValue: branch
@@ -262,18 +311,22 @@ async function runDeploy(options) {
     );
   }
   let fallbackEnvironmentTag = branch;
-  let isPreview = false;
-  if (deploymentEnvironmentTag === "shopify-preview-environment.") {
+  if (userChosenEnvironmentTag === "shopify-preview-environment.") {
     fallbackEnvironmentTag = void 0;
-    deploymentEnvironmentTag = void 0;
+    userChosenEnvironmentTag = void 0;
     isPreview = true;
   }
   let assetsDir = "dist/client";
   let workerDir = "dist/worker";
-  const maybeVite = await getViteConfig(root).catch(() => null);
-  if (maybeVite) {
-    assetsDir = relativePath(root, maybeVite.clientOutDir);
-    workerDir = relativePath(root, maybeVite.serverOutDir);
+  const isClassicCompiler = await hasRemixConfigFile(root);
+  if (!isClassicCompiler) {
+    const viteConfig = await getViteConfig(root, ssrEntry).catch(() => null);
+    if (viteConfig) {
+      assetsDir = relativePath(root, viteConfig.clientOutDir);
+      workerDir = relativePath(root, viteConfig.serverOutDir);
+    } else {
+      workerDir = "dist/server";
+    }
   }
   const config = {
     assetsDir,
@@ -281,7 +334,7 @@ async function runDeploy(options) {
     deploymentUrl,
     defaultEnvironment: defaultEnvironment || isPreview,
     deploymentToken: parseToken(token),
-    environmentTag: environmentTag || deploymentEnvironmentTag || fallbackEnvironmentTag,
+    environmentTag: userProvidedEnvironmentTag || userChosenEnvironmentTag || fallbackEnvironmentTag,
     generateAuthBypassToken,
     verificationMaxDuration: 180,
     metadata: {
@@ -297,6 +350,37 @@ async function runDeploy(options) {
     workerDir,
     overriddenEnvironmentVariables
   };
+  if (!isCI && (userProvidedEnvironmentTag || userChosenEnvironmentTag || config.defaultEnvironment)) {
+    let chosenEnvironment = null;
+    if (config.defaultEnvironment) {
+      chosenEnvironment = findEnvironmentOrThrow(
+        deploymentData.environments,
+        "preview"
+      );
+    } else if (config.environmentTag) {
+      chosenEnvironment = findEnvironmentByBranchOrThrow(
+        deploymentData.environments,
+        config.environmentTag
+      );
+    }
+    let confirmationMessage = "Creating a deployment";
+    if (chosenEnvironment) {
+      confirmationMessage += ` against ${createEnvironmentCliChoiceLabel(
+        chosenEnvironment.name,
+        chosenEnvironment.handle,
+        chosenEnvironment.branch
+      )}`;
+    }
+    const confirmPush = await renderConfirmationPrompt({
+      confirmationMessage: "Yes, confirm deploy",
+      cancellationMessage: "No, cancel deploy",
+      message: outputContent`${confirmationMessage}
+
+Continue?`.value
+    });
+    if (!confirmPush)
+      return;
+  }
   let resolveUpload;
   const uploadPromise = new Promise((resolve) => {
     resolveUpload = resolve;
@@ -352,13 +436,14 @@ async function runDeploy(options) {
       outputInfo(
         outputContent`${colors.whiteBright("Building project...")}`.value
       );
-      const build = maybeVite ? runViteBuild : runBuild;
+      const build = isClassicCompiler ? runBuild : runViteBuild;
       await build({
         directory: root,
         assetPath,
         lockfileCheck,
         sourcemap: true,
-        useCodegen: false
+        useCodegen: false,
+        entry: ssrEntry
       });
     };
   }