@shopify/cli-hydrogen 7.1.2 → 8.0.0

package/dist/commands/hydrogen/env/{push__unstable.js → push.js}

@@ -7,22 +7,21 @@ import { getCliCommand } from '../../../lib/shell.js';
 import { resolvePath } from '@shopify/cli-kit/node/path';
 import { renderConfirmationPrompt, renderSelectPrompt, renderInfo, renderSuccess } from '@shopify/cli-kit/node/ui';
 import { outputContent, outputToken, outputWarn } from '@shopify/cli-kit/node/output';
+import { orderEnvironmentsBySafety, findEnvironmentOrThrow, createEnvironmentCliChoiceLabel } from '../../../lib/common.js';
 import { renderMissingLink } from '../../../lib/render-errors.js';
 import { getStorefrontEnvironments } from '../../../lib/graphql/admin/list-environments.js';
 import { linkStorefront } from '../link.js';
 import { getStorefrontEnvVariables } from '../../../lib/graphql/admin/pull-variables.js';
 import { pushStorefrontEnvVariables } from '../../../lib/graphql/admin/push-variables.js';
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { readAndParseDotEnv } from '@shopify/cli-kit/node/dot-env';
+import { readAndParseDotEnv, createDotEnvFileLine } from '@shopify/cli-kit/node/dot-env';
 
 class EnvPush extends Command {
   static description = "Push environment variables from the local .env file to your linked Hydrogen storefront.";
-  static hidden = true;
   static flags = {
     ...commonFlags.env,
     "env-file": Flags.string({
-      description: "Specify the environment variable file name. Default value is '.env'.",
-      env: "SHOPIFY_HYDROGEN_ENVIRONMENT_FILENAME"
+      description: "Path to an environment file to override existing environment variables for the selected environment. Defaults to the '.env' located in your project path `--path`."
     }),
     ...commonFlags.path
   };
@@ -32,12 +31,12 @@ class EnvPush extends Command {
   }
 }
 async function runEnvPush({
-  env: environmentName,
-  envFile = ".env",
+  env: envHandle,
+  envFile,
   path = process.cwd()
 }) {
-  let validatedEnvironment = {};
-  const dotEnvPath = resolvePath(path, envFile);
+  let validatedEnvironment;
+  const dotEnvPath = envFile || resolvePath(path, ".env");
   const { variables: localVariables } = await readAndParseDotEnv(dotEnvPath);
   const [{ session, config }, cliCommand] = await Promise.all([
     login(path),
@@ -62,69 +61,43 @@ async function runEnvPush({
   if (!environmentsData) {
     throw new AbortError("Failed to fetch environments");
   }
-  const environments = [
-    ...environmentsData.filter((environment) => environment.type === "PREVIEW"),
-    ...environmentsData.filter((environment) => environment.type === "CUSTOM"),
-    ...environmentsData.filter(
-      (environment) => environment.type === "PRODUCTION"
-    )
-  ];
+  const environments = orderEnvironmentsBySafety(environmentsData);
   if (environments.length === 0) {
     throw new AbortError("No environments found");
   }
-  if (environmentName) {
-    const matchedEnvironments = environments.filter(
-      ({ name }) => name === environmentName
-    );
-    if (matchedEnvironments.length === 0) {
-      throw new AbortError(
-        "Environment not found",
-        `We could not find an environment matching the name '${environmentName}'.`
-      );
-    } else if (matchedEnvironments.length === 1) {
-      const { id, name, branch, type } = matchedEnvironments[0] ?? {};
-      validatedEnvironment = { id, name, branch, type };
-    } else {
-      const selection = await renderSelectPrompt({
-        message: `There were multiple environments found with the name ${environmentName}:`,
-        choices: [
-          ...matchedEnvironments.map(({ id: id2, name: name2, branch: branch2, type: type2, url }) => ({
-            label: `${name2} (${branch2}) ${type2} ${url}`,
-            value: id2
-          }))
-        ]
-      });
-      const { id, name, branch, type } = matchedEnvironments.find(({ id: id2 }) => id2 === selection) ?? {};
-      validatedEnvironment = { id, name, branch, type };
-    }
+  if (envHandle) {
+    validatedEnvironment = findEnvironmentOrThrow(environments, envHandle);
   } else {
     const choices = [
-      ...environments.map(({ id: id2, name: name2, branch: branch2 }) => ({
-        label: branch2 ? `${name2} (${branch2})` : name2,
-        value: id2
-      }))
+      ...environments.map(({ id, name, branch, handle }) => {
+        return {
+          label: createEnvironmentCliChoiceLabel(name, handle, branch),
+          value: id
+        };
+      })
     ];
     const pushToBranchSelection = await renderSelectPrompt({
-      message: "Select a set of environment variables to overwrite:",
+      message: "Select an environment to overwrite its environment variables:",
       choices
     });
-    const { id, name, branch, type } = environments.find(({ id: id2 }) => id2 === pushToBranchSelection) ?? {};
-    validatedEnvironment = { id, name, branch, type };
+    validatedEnvironment = environments.find(
+      ({ id }) => id === pushToBranchSelection
+    );
   }
   const { environmentVariables = [] } = await getStorefrontEnvVariables(
     session,
     config.storefront.id,
-    validatedEnvironment.branch ?? void 0
+    validatedEnvironment.handle
   ) ?? {};
   const remoteVars = environmentVariables.filter(
     ({ isSecret, readOnly }) => !isSecret && !readOnly
   );
-  const comparableRemoteVars = remoteVars.sort((a, b) => a.key.localeCompare(b.key)).map(({ key, value }) => `${key}=${value}`).join("\n") + "\n";
+  const comparableRemoteVars = remoteVars.sort((a, b) => a.key.localeCompare(b.key)).map(({ key, value }) => createDotEnvFileLine(key, value)).join("\n") + "\n";
   const compareableLocalVars = Object.keys(localVariables).sort((a, b) => a.localeCompare(b)).reduce((acc, key) => {
     const { isSecret, readOnly } = environmentVariables.find((variable) => variable.key === key) ?? {};
     if (isSecret || readOnly)
       return acc;
-    return [...acc, `${key}=${localVariables[key]}`];
+    return [...acc, createDotEnvFileLine(key, localVariables[key])];
   }, []).join("\n") + "\n";
   if (!validatedEnvironment.name)
     throw new AbortError("Missing environment name");

package/dist/commands/hydrogen/generate/route.js

@@ -8,6 +8,7 @@ import { ALL_ROUTE_CHOICES, generateRoutes } from '../../../lib/setups/routes/ge
 import { isV1RouteConventionInstalled } from '../../../lib/remix-version-interop.js';
 
 class GenerateRoute extends Command {
+  static descriptionWithMarkdown = `Generates a set of default routes from the starter template.`;
   static description = "Generates a standard Shopify route.";
   static flags = {
     adapter: Flags.string({

package/dist/commands/hydrogen/init.js

@@ -14,6 +14,7 @@ import { LANGUAGES } from '../../lib/onboarding/common.js';
 
 const FLAG_MAP = { f: "force" };
 class Init extends Command {
+  static descriptionWithMarkdown = "Creates a new Hydrogen storefront.";
   static description = "Creates a new Hydrogen storefront.";
   static flags = {
     ...commonFlags.force,
@@ -50,29 +51,55 @@ class Init extends Command {
       env: "SHOPIFY_HYDROGEN_FLAG_GIT",
       default: true,
       allowNo: true
+    }),
+    quickstart: Flags.boolean({
+      description: "Scaffolds a new Hydrogen project with a set of sensible defaults.",
+      env: "SHOPIFY_HYDROGEN_FLAG_QUICKSTART",
+      default: false
+    }),
+    "package-manager": Flags.string({
+      env: "SHOPIFY_HYDROGEN_FLAG_PACKAGE_MANAGER",
+      hidden: true,
+      options: ["npm", "yarn", "pnpm", "unknown"]
     })
   };
   async run() {
-    const {
-      flags: { markets, ..._flags }
-    } = await this.parse(Init);
-    const flags = { ..._flags, i18n: markets };
-    if (flags.i18n && !I18N_CHOICES.includes(flags.i18n)) {
-      throw new AbortError(
-        `Invalid URL structure strategy: ${flags.i18n}. Must be one of ${I18N_CHOICES.join(", ")}`
-      );
-    }
-    if (flags.styling && !STYLING_CHOICES.includes(flags.styling)) {
-      throw new AbortError(
-        `Invalid styling strategy: ${flags.styling}. Must be one of ${STYLING_CHOICES.join(", ")}`
-      );
-    }
+    const { flags } = await this.parse(Init);
     await runInit(flagsToCamelObject(flags));
   }
 }
-async function runInit(options = parseProcessFlags(process.argv, FLAG_MAP)) {
+async function runInit({
+  markets,
+  ...options
+} = parseProcessFlags(
+  process.argv,
+  FLAG_MAP
+)) {
   supressNodeExperimentalWarnings();
+  if (!options.i18n && markets) {
+    options.i18n = markets;
+  }
+  if (options.i18n && !I18N_CHOICES.includes(options.i18n)) {
+    throw new AbortError(
+      `Invalid URL structure strategy: ${options.i18n}. Must be one of ${I18N_CHOICES.join(", ")}`
+    );
+  }
+  if (options.styling && !STYLING_CHOICES.includes(options.styling)) {
+    throw new AbortError(
+      `Invalid styling strategy: ${options.styling}. Must be one of ${STYLING_CHOICES.join(", ")}`
+    );
+  }
   options.git ??= true;
+  if (options.quickstart) {
+    options.i18n ||= "none";
+    options.installDeps ||= true;
+    options.language ||= "js";
+    options.mockShop ||= true;
+    options.path ||= "./hydrogen-quickstart";
+    options.routes ||= true;
+    options.shortcut ||= true;
+    options.styling ||= "tailwind";
+  }
   const showUpgrade = await checkHydrogenVersion(
     // Resolving the CLI package from a local directory might fail because
     // this code could be run from a global dependency (e.g. on `npm create`).
@@ -81,14 +108,15 @@ async function runInit(options = parseProcessFlags(process.argv, FLAG_MAP)) {
     "cli"
   );
   if (showUpgrade) {
-    const packageManager = packageManagerFromUserAgent();
+    const packageManager = options.packageManager ?? packageManagerFromUserAgent();
     showUpgrade(
       packageManager === "unknown" ? "" : `Please use the latest version with \`${packageManager} create @shopify/hydrogen@latest\``
     );
   }
   const controller = new AbortController();
   try {
-    return options.template ? await setupRemoteTemplate(options, controller) : await setupLocalStarterTemplate(options, controller);
+    const template = options.template;
+    return template ? await setupRemoteTemplate({ ...options, template }, controller) : await setupLocalStarterTemplate(options, controller);
   } catch (error) {
     controller.abort();
     throw error;

package/dist/commands/hydrogen/link.js

@@ -11,9 +11,14 @@ import { waitForJob } from '../../lib/graphql/admin/fetch-job.js';
 import { titleize } from '../../lib/string.js';
 import { getCliCommand } from '../../lib/shell.js';
 import { login } from '../../lib/auth.js';
-import { handleStorefrontSelection } from '../../lib/onboarding/common.js';
+import { handleStorefrontSelection, generateRandomName } from '../../lib/onboarding/common.js';
 
 class Link extends Command {
+  static descriptionWithMarkdown = `Links your local development environment to a remote Hydrogen storefront. You can link an unlimited number of development environments to a single Hydrogen storefront.
+
+  Linking to a Hydrogen storefront enables you to run [dev](https://shopify.dev/docs/api/shopify-cli/hydrogen/hydrogen-dev) and automatically inject your linked Hydrogen storefront's environment variables directly into the server runtime.
+
+  After you run the \`link\` command, you can access the [env list](https://shopify.dev/docs/api/shopify-cli/hydrogen/hydrogen-env-list), [env pull](https://shopify.dev/docs/api/shopify-cli/hydrogen/hydrogen-env-pull), and [unlink](https://shopify.dev/docs/api/shopify-cli/hydrogen/hydrogen-unlink) commands.`;
   static description = "Link a local project to one of your shop's Hydrogen storefronts.";
   static flags = {
     ...commonFlags.force,
@@ -96,17 +101,28 @@ async function linkStorefront(root, session, config, {
   } else {
     selectedStorefront = await handleStorefrontSelection(storefronts);
     if (!selectedStorefront) {
-      selectedStorefront = await createNewStorefront(root, session);
+      selectedStorefront = await createNewStorefront(
+        root,
+        session,
+        storefronts
+      );
     }
   }
   await setStorefront(root, selectedStorefront);
   return selectedStorefront;
 }
-async function createNewStorefront(root, session) {
+async function createNewStorefront(root, session, storefronts) {
   const projectDirectory = basename(root);
+  let defaultProjectName = titleize(projectDirectory);
+  const nameAlreadyUsed = storefronts.some(
+    ({ title }) => title === defaultProjectName
+  );
+  if (nameAlreadyUsed) {
+    defaultProjectName = generateRandomName();
+  }
   const projectName = await renderTextPrompt({
     message: "New storefront name",
-    defaultValue: titleize(projectDirectory)
+    defaultValue: defaultProjectName
   });
   let storefront;
   let jobId;

package/dist/commands/hydrogen/list.js

@@ -11,6 +11,7 @@ import { login } from '../../lib/auth.js';
 import { getCliCommand } from '../../lib/shell.js';
 
 class List extends Command {
+  static descriptionWithMarkdown = "Lists all remote Hydrogen storefronts available to link to your local development environment.";
   static description = "Returns a list of Hydrogen storefronts available on a given shop.";
   static flags = {
     ...commonFlags.path

package/dist/commands/hydrogen/login.js

@@ -3,6 +3,7 @@ import { commonFlags } from '../../lib/flags.js';
 import { login, renderLoginSuccess } from '../../lib/auth.js';
 
 class Login extends Command {
+  static descriptionWithMarkdown = "Logs in to the specified shop and saves the shop domain to the project.";
   static description = "Login to your Shopify account.";
   static flags = {
     ...commonFlags.path,

package/dist/commands/hydrogen/logout.js

@@ -4,6 +4,7 @@ import { commonFlags } from '../../lib/flags.js';
 import { logout } from '../../lib/auth.js';
 
 class Logout extends Command {
+  static descriptionWithMarkdown = "Log out from the current shop.";
   static description = "Logout of your local session.";
   static flags = {
     ...commonFlags.path

package/dist/commands/hydrogen/preview.js

@@ -1,25 +1,27 @@
 import Command from '@shopify/cli-kit/node/base-command';
-import { muteDevLogs } from '../../lib/log.js';
-import { getProjectPaths } from '../../lib/remix-config.js';
-import { commonFlags, deprecated, flagsToCamelObject } from '../../lib/flags.js';
+import { setH2OVerbose, isH2Verbose, muteDevLogs } from '../../lib/log.js';
+import { getProjectPaths, hasRemixConfigFile } from '../../lib/remix-config.js';
+import { commonFlags, deprecated, flagsToCamelObject, DEFAULT_APP_PORT } from '../../lib/flags.js';
 import { startMiniOxygen } from '../../lib/mini-oxygen/index.js';
 import { getAllEnvironmentVariables } from '../../lib/environment-variables.js';
 import { getConfig } from '../../lib/shopify-config.js';
 import { findPort } from '../../lib/find-port.js';
-import { fileExists } from '@shopify/cli-kit/node/fs';
 import { joinPath } from '@shopify/cli-kit/node/path';
 import { getViteConfig } from '../../lib/vite-config.js';
 
 class Preview extends Command {
+  static descriptionWithMarkdown = "Runs a server in your local development environment that serves your Hydrogen app's production build. Requires running the [build](https://shopify.dev/docs/api/shopify-cli/hydrogen/hydrogen-build) command first.";
   static description = "Runs a Hydrogen storefront in an Oxygen worker for production.";
   static flags = {
     ...commonFlags.path,
     ...commonFlags.port,
     worker: deprecated("--worker", { isBoolean: true }),
     ...commonFlags.legacyRuntime,
+    ...commonFlags.env,
     ...commonFlags.envBranch,
     ...commonFlags.inspectorPort,
-    ...commonFlags.debug
+    ...commonFlags.debug,
+    ...commonFlags.verbose
   };
   async run() {
     const { flags } = await this.parse(Preview);
@@ -32,31 +34,44 @@ async function runPreview({
   port: appPort,
   path: appPath,
   legacyRuntime = false,
+  env: envHandle,
   envBranch,
   inspectorPort,
-  debug
+  debug,
+  verbose
 }) {
   if (!process.env.NODE_ENV)
     process.env.NODE_ENV = "production";
-  muteDevLogs({ workerReload: false });
-  let { root, buildPathWorkerFile, buildPathClient } = getProjectPaths(appPath);
-  if (!await fileExists(joinPath(root, buildPathWorkerFile))) {
+  if (verbose)
+    setH2OVerbose();
+  if (!isH2Verbose())
+    muteDevLogs();
+  let { root, buildPath, buildPathWorkerFile, buildPathClient } = getProjectPaths(appPath);
+  if (!await hasRemixConfigFile(root)) {
     const maybeResult = await getViteConfig(root).catch(() => null);
-    if (maybeResult)
-      buildPathWorkerFile = maybeResult.serverOutFile;
+    buildPathWorkerFile = maybeResult?.serverOutFile ?? joinPath(buildPath, "server", "index.js");
   }
   const { shop, storefront } = await getConfig(root);
   const fetchRemote = !!shop && !!storefront?.id;
-  const env = await getAllEnvironmentVariables({ root, fetchRemote, envBranch });
-  appPort = legacyRuntime ? appPort : await findPort(appPort);
-  inspectorPort = debug ? await findPort(inspectorPort) : inspectorPort;
+  const { allVariables, logInjectedVariables } = await getAllEnvironmentVariables(
+    {
+      root,
+      fetchRemote,
+      envBranch,
+      envHandle
+    }
+  );
+  if (!appPort) {
+    appPort = await findPort(DEFAULT_APP_PORT);
+  }
   const assetsPort = legacyRuntime ? 0 : await findPort(appPort + 100);
+  logInjectedVariables();
   const miniOxygen = await startMiniOxygen(
     {
       root,
-      port: appPort,
+      appPort,
       assetsPort,
-      env,
+      env: allVariables,
       buildPathClient,
       buildPathWorkerFile,
       inspectorPort,

package/dist/commands/hydrogen/setup/css.js

@@ -4,10 +4,12 @@ import Command from '@shopify/cli-kit/node/base-command';
 import { renderTasks, renderSuccess } from '@shopify/cli-kit/node/ui';
 import { getPackageManager, installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
 import { Args } from '@oclif/core';
-import { getRemixConfig } from '../../../lib/remix-config.js';
+import { hasRemixConfigFile, getRemixConfig } from '../../../lib/remix-config.js';
 import { SETUP_CSS_STRATEGIES, renderCssPrompt, setupCssStrategy, CSS_STRATEGY_NAME_MAP } from '../../../lib/setups/css/index.js';
+import { AbortError } from '@shopify/cli-kit/node/error';
 
 class SetupCSS extends Command {
+  static descriptionWithMarkdown = "Adds support for certain CSS strategies to your project.";
   static description = "Setup CSS strategies for your project.";
   static flags = {
     ...commonFlags.path,
@@ -37,6 +39,11 @@ async function runSetupCSS({
   force = false,
   installDeps = true
 }) {
+  if (!await hasRemixConfigFile(directory)) {
+    throw new AbortError(
+      "No remix.config.js file found. This command is not supported in Vite projects."
+    );
+  }
   const remixConfigPromise = getRemixConfig(directory);
   const strategy = flagStrategy ? flagStrategy : await renderCssPrompt();
   const remixConfig = await remixConfigPromise;

package/dist/commands/hydrogen/setup/markets.js

@@ -7,6 +7,7 @@ import { getRemixConfig } from '../../../lib/remix-config.js';
 import { SETUP_I18N_STRATEGIES, renderI18nPrompt, setupI18nStrategy, I18N_STRATEGY_NAME_MAP } from '../../../lib/setups/i18n/index.js';
 
 class SetupMarkets extends Command {
+  static descriptionWithMarkdown = "Adds support for multiple [markets](https://shopify.dev/docs/custom-storefronts/hydrogen/markets) to your project by using the URL structure.";
   static description = "Setup support for multiple markets in your project.";
   static flags = {
     ...commonFlags.path