@shopify/cli-hydrogen 7.1.0 → 7.1.2

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

@@ -0,0 +1,159 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { muteDevLogs, enhanceH2Logs } from '../../lib/log.js';
+import { commonFlags, overrideFlag, flagsToCamelObject } from '../../lib/flags.js';
+import Command from '@shopify/cli-kit/node/base-command';
+import colors from '@shopify/cli-kit/node/colors';
+import { renderInfo } from '@shopify/cli-kit/node/ui';
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { Flags } from '@oclif/core';
+import { spawnCodegenProcess } from '../../lib/codegen.js';
+import { getAllEnvironmentVariables } from '../../lib/environment-variables.js';
+import { getConfig } from '../../lib/shopify-config.js';
+import { checkRemixVersions } from '../../lib/remix-version-check.js';
+import { displayDevUpgradeNotice } from './upgrade.js';
+import { prepareDiffDirectory } from '../../lib/template-diff.js';
+import { setH2OPluginContext } from '../../lib/vite/shared.js';
+import { getGraphiQLUrl } from '../../lib/graphiql-url.js';
+import { getDebugBannerLine } from '../../lib/mini-oxygen/workerd.js';
+
+class DevVite extends Command {
+  static description = "Runs Hydrogen storefront in an Oxygen worker for development.";
+  static flags = {
+    ...commonFlags.path,
+    ...commonFlags.entry,
+    ...overrideFlag(commonFlags.port, {
+      port: { default: void 0, required: false }
+    }),
+    ...commonFlags.codegen,
+    "disable-virtual-routes": Flags.boolean({
+      description: "Disable rendering fallback routes when a route file doesn't exist.",
+      env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_VIRTUAL_ROUTES",
+      default: false
+    }),
+    ...commonFlags.debug,
+    ...commonFlags.inspectorPort,
+    host: Flags.boolean({
+      description: "Expose the server to the network",
+      default: false,
+      required: false
+    }),
+    ...commonFlags.envBranch,
+    "disable-version-check": Flags.boolean({
+      description: "Skip the version check when running `hydrogen dev`",
+      default: false,
+      required: false
+    }),
+    ...commonFlags.diff
+  };
+  async run() {
+    const { flags } = await this.parse(DevVite);
+    let directory = flags.path ? path.resolve(flags.path) : process.cwd();
+    if (flags.diff) {
+      directory = await prepareDiffDirectory(directory, true);
+    }
+    await runDev({
+      ...flagsToCamelObject(flags),
+      path: directory,
+      isLocalDev: flags.diff
+    });
+  }
+}
+async function runDev({
+  entry: ssrEntry,
+  port: appPort,
+  path: appPath,
+  host,
+  codegen: useCodegen = false,
+  codegenConfigPath,
+  disableVirtualRoutes,
+  envBranch,
+  debug = false,
+  disableVersionCheck = false,
+  inspectorPort,
+  isLocalDev = false
+}) {
+  if (!process.env.NODE_ENV)
+    process.env.NODE_ENV = "development";
+  muteDevLogs();
+  const root = appPath ?? process.cwd();
+  const envPromise = getConfig(root).then(({ shop, storefront }) => {
+    const fetchRemote = !!shop && !!storefront?.id;
+    return getAllEnvironmentVariables({ root, fetchRemote, envBranch });
+  });
+  const vite = await import('vite');
+  const fs = isLocalDev ? { allow: [root, fileURLToPath(new URL("../../../../", import.meta.url))] } : void 0;
+  const viteServer = await vite.createServer({
+    root,
+    server: { fs, host: host ? true : void 0 },
+    ...setH2OPluginContext({
+      cliOptions: {
+        debug,
+        ssrEntry,
+        envPromise,
+        inspectorPort,
+        disableVirtualRoutes
+      }
+    })
+  });
+  process.once("SIGTERM", async () => {
+    try {
+      await viteServer.close();
+    } finally {
+      process.exit();
+    }
+  });
+  if (!viteServer.config.plugins.find((plugin) => plugin.name === "hydrogen:main")) {
+    await viteServer.close();
+    throw new AbortError(
+      "Hydrogen plugin not found.",
+      "Add `hydrogen()` plugin to your Vite config."
+    );
+  }
+  const codegenProcess = useCodegen ? spawnCodegenProcess({
+    rootDirectory: root,
+    configFilePath: codegenConfigPath
+  }) : void 0;
+  process.on("unhandledRejection", (err) => {
+    console.log("Unhandled Rejection: ", err);
+  });
+  const publicPort = appPort ?? viteServer.config.server.port ?? 3e3;
+  await viteServer.listen(publicPort);
+  const publicUrl = new URL(
+    viteServer.resolvedUrls.local[0] ?? viteServer.resolvedUrls.network[0]
+  );
+  enhanceH2Logs({ rootDirectory: root, host: publicUrl.toString() });
+  await envPromise;
+  console.log("");
+  viteServer.printUrls();
+  viteServer.bindCLIShortcuts({ print: true });
+  console.log("\n");
+  const infoLines = [];
+  if (!disableVirtualRoutes) {
+    infoLines.push(
+      `${colors.dim("View GraphiQL API browser:")} ${getGraphiQLUrl({
+        host: publicUrl.origin
+      })}`,
+      `
+${colors.dim("View server network requests:")} ${publicUrl.origin}/subrequest-profiler`
+    );
+  }
+  if (debug) {
+    infoLines.push({ warn: getDebugBannerLine(inspectorPort) });
+  }
+  if (infoLines.length > 0) {
+    renderInfo({ body: infoLines });
+  }
+  checkRemixVersions();
+  if (!disableVersionCheck) {
+    displayDevUpgradeNotice({ targetPath: root });
+  }
+  return {
+    async close() {
+      codegenProcess?.kill(0);
+      await viteServer.close();
+    }
+  };
+}
+
+export { DevVite as default, runDev };

package/dist/commands/hydrogen/dev.js

@@ -7,7 +7,7 @@ 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, deprecated, overrideFlag, flagsToCamelObject } from '../../lib/flags.js';
+import { commonFlags, deprecated, flagsToCamelObject } from '../../lib/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
 import { Flags } from '@oclif/core';
 import { buildAssetsUrl, startMiniOxygen } from '../../lib/mini-oxygen/index.js';
@@ -27,29 +27,26 @@ const LOG_REBUILT = "\u{1F680} Rebuilt";
 class Dev extends Command {
   static description = "Runs Hydrogen storefront in an Oxygen worker for development.";
   static flags = {
-    path: commonFlags.path,
-    port: commonFlags.port,
+    ...commonFlags.path,
+    ...commonFlags.port,
     worker: deprecated("--worker", { isBoolean: true }),
-    "legacy-runtime": commonFlags.legacyRuntime,
-    codegen: overrideFlag(commonFlags.codegen, {
-      description: commonFlags.codegen.description + " It updates the types on file save."
-    }),
-    "codegen-config-path": commonFlags.codegenConfigPath,
-    sourcemap: commonFlags.sourcemap,
+    ...commonFlags.legacyRuntime,
+    ...commonFlags.codegen,
+    ...commonFlags.sourcemap,
     "disable-virtual-routes": Flags.boolean({
       description: "Disable rendering fallback routes when a route file doesn't exist.",
       env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_VIRTUAL_ROUTES",
       default: false
     }),
-    debug: commonFlags.debug,
-    "inspector-port": commonFlags.inspectorPort,
-    ["env-branch"]: commonFlags.envBranch,
-    ["disable-version-check"]: Flags.boolean({
+    ...commonFlags.debug,
+    ...commonFlags.inspectorPort,
+    ...commonFlags.envBranch,
+    "disable-version-check": Flags.boolean({
       description: "Skip the version check when running `hydrogen dev`",
       default: false,
       required: false
     }),
-    diff: commonFlags.diff
+    ...commonFlags.diff
   };
   async run() {
     const { flags } = await this.parse(Dev);

package/dist/commands/hydrogen/env/list.js

@@ -13,7 +13,7 @@ import { getCliCommand } from '../../../lib/shell.js';
 class EnvList extends Command {
   static description = "List the environments on your linked Hydrogen storefront.";
   static flags = {
-    path: commonFlags.path
+    ...commonFlags.path
   };
   async run() {
     const { flags } = await this.parse(EnvList);

package/dist/commands/hydrogen/env/pull.js

@@ -16,9 +16,9 @@ import { getStorefrontEnvVariables } from '../../../lib/graphql/admin/pull-varia
 class EnvPull extends Command {
   static description = "Populate your .env with variables from your Hydrogen storefront.";
   static flags = {
-    ["env-branch"]: commonFlags.envBranch,
-    path: commonFlags.path,
-    force: commonFlags.force
+    ...commonFlags.envBranch,
+    ...commonFlags.path,
+    ...commonFlags.force
   };
   async run() {
     const { flags } = await this.parse(EnvPull);

package/dist/commands/hydrogen/env/pull.test.js

@@ -46,12 +46,14 @@ describe("pullVariables", () => {
           id: "gid://shopify/HydrogenStorefrontEnvironmentVariable/1",
           key: "PUBLIC_API_TOKEN",
           value: "abc123",
+          readOnly: true,
           isSecret: false
         },
         {
           id: "gid://shopify/HydrogenStorefrontEnvironmentVariable/2",
           key: "PRIVATE_API_TOKEN",
           value: "",
+          readOnly: true,
           isSecret: true
         }
       ]

package/dist/commands/hydrogen/env/push__unstable.js

@@ -0,0 +1,190 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { diffLines } from 'diff';
+import { Flags } from '@oclif/core';
+import { commonFlags, flagsToCamelObject } from '../../../lib/flags.js';
+import { login } from '../../../lib/auth.js';
+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 { 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';
+
+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"
+    }),
+    ...commonFlags.path
+  };
+  async run() {
+    const { flags } = await this.parse(EnvPush);
+    await runEnvPush({ ...flagsToCamelObject(flags) });
+  }
+}
+async function runEnvPush({
+  env: environmentName,
+  envFile = ".env",
+  path = process.cwd()
+}) {
+  let validatedEnvironment = {};
+  const dotEnvPath = resolvePath(path, envFile);
+  const { variables: localVariables } = await readAndParseDotEnv(dotEnvPath);
+  const [{ session, config }, cliCommand] = await Promise.all([
+    login(path),
+    getCliCommand()
+  ]);
+  if (!config.storefront?.id) {
+    renderMissingLink({ session, cliCommand });
+    const runLink = await renderConfirmationPrompt({
+      message: outputContent`Run ${outputToken.genericShellCommand(
+        `${cliCommand} link`
+      )}?`.value
+    });
+    if (!runLink)
+      return;
+    config.storefront = await linkStorefront(path, session, config, {
+      cliCommand
+    });
+  }
+  if (!config.storefront?.id)
+    return;
+  const { environments: environmentsData } = await getStorefrontEnvironments(session, config.storefront.id) ?? {};
+  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"
+    )
+  ];
+  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 };
+    }
+  } else {
+    const choices = [
+      ...environments.map(({ id: id2, name: name2, branch: branch2 }) => ({
+        label: branch2 ? `${name2} (${branch2})` : name2,
+        value: id2
+      }))
+    ];
+    const pushToBranchSelection = await renderSelectPrompt({
+      message: "Select a set of environment variables to overwrite:",
+      choices
+    });
+    const { id, name, branch, type } = environments.find(({ id: id2 }) => id2 === pushToBranchSelection) ?? {};
+    validatedEnvironment = { id, name, branch, type };
+  }
+  const { environmentVariables = [] } = await getStorefrontEnvVariables(
+    session,
+    config.storefront.id,
+    validatedEnvironment.branch ?? void 0
+  ) ?? {};
+  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 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]}`];
+  }, []).join("\n") + "\n";
+  if (!validatedEnvironment.name)
+    throw new AbortError("Missing environment name");
+  const remoteReadOnlyOrSecrets = environmentVariables.reduce(
+    (acc, { isSecret, readOnly, key }) => {
+      if (!isSecret && !readOnly)
+        return acc;
+      const localVar = localVariables[key];
+      const remoteVar = environmentVariables.find(
+        (variable) => variable.key === key
+      );
+      if (localVar === remoteVar?.value)
+        return acc;
+      return [...acc, key];
+    },
+    []
+  );
+  if (remoteReadOnlyOrSecrets.length) {
+    outputWarn(
+      `Variables that are read only or contain secret values cannot be pushed from the CLI: ${remoteReadOnlyOrSecrets.join(
+        ", "
+      )}.
+`
+    );
+  }
+  if (compareableLocalVars === comparableRemoteVars) {
+    renderInfo({
+      body: "No changes to your environment variables."
+    });
+    return;
+  } else {
+    const diff = diffLines(comparableRemoteVars, compareableLocalVars);
+    const confirmPush = await renderConfirmationPrompt({
+      confirmationMessage: "Yes, confirm changes",
+      cancellationMessage: "No, make changes later",
+      message: outputContent`We'll make the following changes to your environment variables for ${validatedEnvironment.name}:
+
+${outputToken.linesDiff(diff)}
+Continue?`.value
+    });
+    if (!confirmPush)
+      return;
+  }
+  if (!validatedEnvironment.id)
+    throw new AbortError("Missing environment ID");
+  const { userErrors } = await pushStorefrontEnvVariables(
+    session,
+    config.storefront.id,
+    validatedEnvironment.id,
+    Object.entries(localVariables).map(([key, value]) => ({ key, value }))
+  );
+  if (userErrors.length) {
+    throw new AbortError(
+      "Failed to upload and save environment variables.",
+      userErrors[0]?.message
+    );
+  }
+  renderSuccess({
+    body: `Environment variables push to ${validatedEnvironment.name ?? "Preview"} was successful.`
+  });
+}
+
+export { EnvPush as default, runEnvPush };