@shopify/cli-hydrogen 4.1.1 → 4.2.0

package/dist/commands/hydrogen/codegen-unstable.d.ts

@@ -0,0 +1,14 @@
+import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
+import Command from '@shopify/cli-kit/node/base-command';
+
+declare class Codegen extends Command {
+    static description: string;
+    static flags: {
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        "codegen-config-path": _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        watch: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+    };
+    run(): Promise<void>;
+}
+
+export { Codegen as default };

package/dist/commands/hydrogen/codegen-unstable.js

@@ -0,0 +1,64 @@
+import path from 'path';
+import Command from '@shopify/cli-kit/node/base-command';
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { renderSuccess } from '@shopify/cli-kit/node/ui';
+import { Flags } from '@oclif/core';
+import { getProjectPaths, getRemixConfig } from '../../lib/config.js';
+import { commonFlags, flagsToCamelObject } from '../../lib/flags.js';
+import { patchGqlPluck, generateTypes, normalizeCodegenError } from '../../lib/codegen.js';
+
+class Codegen extends Command {
+  static description = "Generate types for the Storefront API queries found in your project.";
+  static flags = {
+    path: commonFlags.path,
+    ["codegen-config-path"]: Flags.string({
+      description: "Specify a path to a codegen configuration file. Defaults to `<root>/codegen.ts` if it exists.",
+      required: false
+    }),
+    watch: Flags.boolean({
+      description: "Watch the project for changes to update types on file save.",
+      required: false,
+      default: false
+    })
+  };
+  async run() {
+    const { flags } = await this.parse(Codegen);
+    const directory = flags.path ? path.resolve(flags.path) : process.cwd();
+    await runCodegen({
+      ...flagsToCamelObject(flags),
+      path: directory
+    });
+  }
+}
+async function runCodegen({
+  path: appPath,
+  codegenConfigPath,
+  watch
+}) {
+  const { root } = getProjectPaths(appPath);
+  const remixConfig = await getRemixConfig(root);
+  await patchGqlPluck();
+  try {
+    const generatedFiles = await generateTypes({
+      ...remixConfig,
+      configFilePath: codegenConfigPath,
+      watch
+    });
+    if (!watch) {
+      console.log("");
+      renderSuccess({
+        headline: "Generated types for GraphQL:",
+        body: generatedFiles.map((file) => `- ${file}`).join("\n")
+      });
+    }
+  } catch (error) {
+    const { message, details } = normalizeCodegenError(
+      error.message,
+      remixConfig.rootDirectory
+    );
+    console.log("");
+    throw new AbortError(message, details);
+  }
+}
+
+export { Codegen as default };

package/dist/commands/hydrogen/dev.d.ts

@@ -6,8 +6,13 @@ declare class Dev extends Command {
     static flags: {
         path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
         port: _oclif_core_lib_interfaces_parser_js.OptionFlag<number, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        "codegen-unstable": _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+        "codegen-config-path": _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
         "disable-virtual-routes": _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+        shop: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        debug: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
         host: _oclif_core_lib_interfaces_parser_js.OptionFlag<unknown, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        "env-branch": _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
     };
     run(): Promise<void>;
 }

package/dist/commands/hydrogen/dev.js

@@ -11,6 +11,9 @@ import { Flags } from '@oclif/core';
 import { startMiniOxygen } from '../../lib/mini-oxygen.js';
 import { checkHydrogenVersion } from '../../lib/check-version.js';
 import { addVirtualRoutes } from '../../lib/virtual-routes.js';
+import { spawnCodegenProcess } from '../../lib/codegen.js';
+import { combinedEnvironmentVariables } from '../../lib/combined-environment-variables.js';
+import { getConfig } from '../../lib/shopify-config.js';
 
 const LOG_INITIAL_BUILD = "\n\u{1F3C1} Initial build";
 const LOG_REBUILDING = "\u{1F9F1} Rebuilding...";
@@ -20,27 +23,55 @@ class Dev extends Command {
   static flags = {
     path: commonFlags.path,
     port: commonFlags.port,
+    ["codegen-unstable"]: Flags.boolean({
+      description: "Generate types for the Storefront API queries found in your project. It updates the types on file save.",
+      required: false,
+      default: false
+    }),
+    ["codegen-config-path"]: Flags.string({
+      description: "Specify a path to a codegen configuration file. Defaults to `<root>/codegen.ts` if it exists.",
+      required: false,
+      dependsOn: ["codegen-unstable"]
+    }),
     ["disable-virtual-routes"]: Flags.boolean({
-      description: "Disable rendering fallback routes when a route file doesn't exist",
+      description: "Disable rendering fallback routes when a route file doesn't exist.",
       env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_VIRTUAL_ROUTES",
       default: false
     }),
-    host: deprecated("--host")()
+    shop: commonFlags.shop,
+    debug: Flags.boolean({
+      description: "Attaches a Node inspector",
+      env: "SHOPIFY_HYDROGEN_FLAG_DEBUG",
+      default: false
+    }),
+    host: deprecated("--host")(),
+    ["env-branch"]: commonFlags["env-branch"]
   };
   async run() {
     const { flags } = await this.parse(Dev);
     const directory = flags.path ? path.resolve(flags.path) : process.cwd();
-    await runDev({ ...flagsToCamelObject(flags), path: directory });
+    await runDev({
+      ...flagsToCamelObject(flags),
+      codegen: flags["codegen-unstable"],
+      path: directory
+    });
   }
 }
 async function runDev({
   port,
   path: appPath,
-  disableVirtualRoutes
+  codegen = false,
+  codegenConfigPath,
+  disableVirtualRoutes,
+  shop,
+  envBranch,
+  debug = false
 }) {
   if (!process.env.NODE_ENV)
     process.env.NODE_ENV = "development";
   muteDevLogs();
+  if (debug)
+    (await import('node:inspector')).open();
   console.time(LOG_INITIAL_BUILD);
   const { root, publicPath, buildPathClient, buildPathWorkerFile } = getProjectPaths(appPath);
   const checkingHydrogenVersion = checkHydrogenVersion(root);
@@ -54,6 +85,12 @@ async function runDev({
     return [fileRelative, path.resolve(root, fileRelative)];
   };
   const serverBundleExists = () => fileExists(buildPathWorkerFile);
+  const hasLinkedStorefront = !!(await getConfig(root))?.storefront?.id;
+  const environmentVariables = hasLinkedStorefront ? await combinedEnvironmentVariables({
+    root,
+    shop,
+    envBranch
+  }) : void 0;
   let miniOxygenStarted = false;
   async function safeStartMiniOxygen() {
     if (miniOxygenStarted)
@@ -63,7 +100,8 @@ async function runDev({
       port,
       watch: true,
       buildPathWorkerFile,
-      buildPathClient
+      buildPathClient,
+      environmentVariables
     });
     miniOxygenStarted = true;
     const showUpgrade = await checkingHydrogenVersion;
@@ -71,7 +109,11 @@ async function runDev({
       showUpgrade();
   }
   const { watch } = await import('@remix-run/dev/dist/compiler/watch.js');
-  await watch(await reloadConfig(), {
+  const remixConfig = await reloadConfig();
+  if (codegen) {
+    spawnCodegenProcess({ ...remixConfig, configFilePath: codegenConfigPath });
+  }
+  await watch(remixConfig, {
     reloadConfig,
     mode: process.env.NODE_ENV,
     async onInitialBuild() {

package/dist/commands/hydrogen/env/list.d.ts

@@ -0,0 +1,19 @@
+import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
+import Command from '@shopify/cli-kit/node/base-command';
+
+declare class List extends Command {
+    static description: string;
+    static hidden: boolean;
+    static flags: {
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        shop: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+    };
+    run(): Promise<void>;
+}
+interface Flags {
+    path?: string;
+    shop?: string;
+}
+declare function listEnvironments({ path, shop: flagShop }: Flags): Promise<void>;
+
+export { List as default, listEnvironments };

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

@@ -0,0 +1,96 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { renderConfirmationPrompt, renderTable } from '@shopify/cli-kit/node/ui';
+import { outputContent, outputToken, outputNewline } from '@shopify/cli-kit/node/output';
+import { linkStorefront } from '../link.js';
+import { adminRequest } from '../../../lib/graphql.js';
+import { commonFlags } from '../../../lib/flags.js';
+import { getHydrogenShop } from '../../../lib/shop.js';
+import { getAdminSession } from '../../../lib/admin-session.js';
+import { ListEnvironmentsQuery } from '../../../lib/graphql/admin/list-environments.js';
+import { getConfig } from '../../../lib/shopify-config.js';
+import { renderMissingLink, renderMissingStorefront } from '../../../lib/render-errors.js';
+
+class List extends Command {
+  static description = "List the environments on your Hydrogen storefront.";
+  static hidden = true;
+  static flags = {
+    path: commonFlags.path,
+    shop: commonFlags.shop
+  };
+  async run() {
+    const { flags } = await this.parse(List);
+    await listEnvironments(flags);
+  }
+}
+async function listEnvironments({ path, shop: flagShop }) {
+  const shop = await getHydrogenShop({ path, shop: flagShop });
+  const adminSession = await getAdminSession(shop);
+  const actualPath = path ?? process.cwd();
+  let configStorefront = (await getConfig(actualPath)).storefront;
+  if (!configStorefront?.id) {
+    renderMissingLink({ adminSession });
+    const runLink = await renderConfirmationPrompt({
+      message: outputContent`Run ${outputToken.genericShellCommand(
+        `npx shopify hydrogen link`
+      )}?`.value
+    });
+    if (!runLink) {
+      return;
+    }
+    await linkStorefront({ path, shop: flagShop, silent: true });
+  }
+  configStorefront = (await getConfig(actualPath)).storefront;
+  if (!configStorefront) {
+    return;
+  }
+  const result = await adminRequest(
+    ListEnvironmentsQuery,
+    adminSession,
+    {
+      id: configStorefront.id
+    }
+  );
+  const hydrogenStorefront = result.hydrogenStorefront;
+  if (!hydrogenStorefront) {
+    renderMissingStorefront({ adminSession, storefront: configStorefront });
+    return;
+  }
+  const previewEnvironmentIndex = hydrogenStorefront.environments.findIndex(
+    (env) => env.type === "PREVIEW"
+  );
+  const previewEnvironment = hydrogenStorefront.environments.splice(
+    previewEnvironmentIndex,
+    1
+  );
+  hydrogenStorefront.environments.push(previewEnvironment[0]);
+  const rows = hydrogenStorefront.environments.map(
+    ({ branch, name, url, type }) => {
+      const environmentUrl = type === "PRODUCTION" ? hydrogenStorefront.productionUrl : url;
+      return {
+        name,
+        branch: branch ? branch : "-",
+        url: environmentUrl ? environmentUrl : "-"
+      };
+    }
+  );
+  outputNewline();
+  renderTable({
+    rows,
+    columns: {
+      name: {
+        header: "Name",
+        color: "whiteBright"
+      },
+      branch: {
+        header: "Branch",
+        color: "yellow"
+      },
+      url: {
+        header: "URL",
+        color: "green"
+      }
+    }
+  });
+}
+
+export { List as default, listEnvironments };

package/dist/commands/hydrogen/env/list.test.d.ts

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,151 @@
+import { vi, describe, beforeEach, afterEach, it, expect } from 'vitest';
+import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
+import { inTemporaryDirectory } from '@shopify/cli-kit/node/fs';
+import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
+import { ListEnvironmentsQuery } from '../../../lib/graphql/admin/list-environments.js';
+import { getAdminSession } from '../../../lib/admin-session.js';
+import { adminRequest } from '../../../lib/graphql.js';
+import { getConfig } from '../../../lib/shopify-config.js';
+import { renderMissingLink, renderMissingStorefront } from '../../../lib/render-errors.js';
+import { linkStorefront } from '../link.js';
+import { listEnvironments } from './list.js';
+
+vi.mock("@shopify/cli-kit/node/ui", async () => {
+  const original = await vi.importActual("@shopify/cli-kit/node/ui");
+  return {
+    ...original,
+    renderConfirmationPrompt: vi.fn()
+  };
+});
+vi.mock("../link.js");
+vi.mock("../../../lib/admin-session.js");
+vi.mock("../../../lib/shopify-config.js");
+vi.mock("../../../lib/render-errors.js");
+vi.mock("../../../lib/graphql.js", async () => {
+  const original = await vi.importActual("../../../lib/graphql.js");
+  return {
+    ...original,
+    adminRequest: vi.fn()
+  };
+});
+vi.mock("../../../lib/shop.js", () => ({
+  getHydrogenShop: () => "my-shop"
+}));
+describe("listEnvironments", () => {
+  const ADMIN_SESSION = {
+    token: "abc123",
+    storeFqdn: "my-shop"
+  };
+  const PRODUCTION_ENVIRONMENT = {
+    id: "gid://shopify/HydrogenStorefrontEnvironment/1",
+    branch: "main",
+    type: "PRODUCTION",
+    name: "Production",
+    createdAt: "2023-02-16T22:35:42Z",
+    url: "https://oxygen-123.example.com"
+  };
+  const CUSTOM_ENVIRONMENT = {
+    id: "gid://shopify/HydrogenStorefrontEnvironment/3",
+    branch: "staging",
+    type: "CUSTOM",
+    name: "Staging",
+    createdAt: "2023-05-08T20:52:29Z",
+    url: "https://oxygen-456.example.com"
+  };
+  const PREVIEW_ENVIRONMENT = {
+    id: "gid://shopify/HydrogenStorefrontEnvironment/2",
+    branch: null,
+    type: "PREVIEW",
+    name: "Preview",
+    createdAt: "2023-02-16T22:35:42Z",
+    url: null
+  };
+  beforeEach(async () => {
+    vi.mocked(getAdminSession).mockResolvedValue(ADMIN_SESSION);
+    vi.mocked(getConfig).mockResolvedValue({
+      storefront: {
+        id: "gid://shopify/HydrogenStorefront/1",
+        title: "Existing Link"
+      }
+    });
+    vi.mocked(adminRequest).mockResolvedValue({
+      hydrogenStorefront: {
+        id: "gid://shopify/HydrogenStorefront/1",
+        productionUrl: "https://example.com",
+        environments: [
+          PRODUCTION_ENVIRONMENT,
+          CUSTOM_ENVIRONMENT,
+          PREVIEW_ENVIRONMENT
+        ]
+      }
+    });
+  });
+  afterEach(() => {
+    vi.resetAllMocks();
+    mockAndCaptureOutput().clear();
+  });
+  it("makes a GraphQL call to fetch environment variables", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      await listEnvironments({ path: tmpDir });
+      expect(adminRequest).toHaveBeenCalledWith(
+        ListEnvironmentsQuery,
+        ADMIN_SESSION,
+        {
+          id: "gid://shopify/HydrogenStorefront/1"
+        }
+      );
+    });
+  });
+  it("lists the environments", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      const output = mockAndCaptureOutput();
+      await listEnvironments({ path: tmpDir });
+      expect(output.info()).toMatch(
+        /Production\s*main\s*https:\/\/example\.com/
+      );
+      expect(output.info()).toMatch(
+        /Staging\s*staging\s*https:\/\/oxygen-456\.example\.com/
+      );
+      expect(output.info()).toMatch(/Preview\s*-\s*-/);
+    });
+  });
+  describe("when there is no linked storefront", () => {
+    beforeEach(() => {
+      vi.mocked(getConfig).mockResolvedValue({
+        storefront: void 0
+      });
+    });
+    it("calls renderMissingLink", async () => {
+      await inTemporaryDirectory(async (tmpDir) => {
+        await listEnvironments({ path: tmpDir });
+        expect(renderMissingLink).toHaveBeenCalledOnce();
+      });
+    });
+    it("prompts the user to create a link", async () => {
+      vi.mocked(renderConfirmationPrompt).mockResolvedValue(true);
+      await inTemporaryDirectory(async (tmpDir) => {
+        await listEnvironments({ path: tmpDir });
+        expect(renderConfirmationPrompt).toHaveBeenCalledWith({
+          message: expect.stringMatching(/Run .*npx shopify hydrogen link.*\?/)
+        });
+        expect(linkStorefront).toHaveBeenCalledWith({
+          path: tmpDir,
+          silent: true
+        });
+      });
+    });
+  });
+  describe("when there is no matching storefront in the shop", () => {
+    beforeEach(() => {
+      vi.mocked(adminRequest).mockResolvedValue({
+        hydrogenStorefront: null
+      });
+    });
+    it("calls renderMissingStorefront", async () => {
+      await inTemporaryDirectory(async (tmpDir) => {
+        await listEnvironments({ path: tmpDir });
+        expect(renderMissingStorefront).toHaveBeenCalledOnce();
+      });
+    });
+  });
+});

package/dist/commands/hydrogen/env/pull.d.ts

@@ -0,0 +1,23 @@
+import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
+import Command from '@shopify/cli-kit/node/base-command';
+
+declare class Pull extends Command {
+    static description: string;
+    static hidden: boolean;
+    static flags: {
+        "env-branch": _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        shop: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        force: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+    };
+    run(): Promise<void>;
+}
+interface Flags {
+    envBranch?: string;
+    force?: boolean;
+    path?: string;
+    shop?: string;
+}
+declare function pullVariables({ envBranch, force, path, shop: flagShop, }: Flags): Promise<void>;
+
+export { Pull as default, pullVariables };

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

@@ -0,0 +1,68 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
+import { outputWarn, outputSuccess } from '@shopify/cli-kit/node/output';
+import { fileExists, writeFile } from '@shopify/cli-kit/node/fs';
+import { resolvePath } from '@shopify/cli-kit/node/path';
+import { commonFlags, flagsToCamelObject } from '../../../lib/flags.js';
+import { pullRemoteEnvironmentVariables } from '../../../lib/pull-environment-variables.js';
+import { getConfig } from '../../../lib/shopify-config.js';
+
+class Pull extends Command {
+  static description = "Populate your .env with variables from your Hydrogen storefront.";
+  static hidden = true;
+  static flags = {
+    ["env-branch"]: commonFlags["env-branch"],
+    path: commonFlags.path,
+    shop: commonFlags.shop,
+    force: commonFlags.force
+  };
+  async run() {
+    const { flags } = await this.parse(Pull);
+    await pullVariables({ ...flagsToCamelObject(flags) });
+  }
+}
+async function pullVariables({
+  envBranch,
+  force,
+  path,
+  shop: flagShop
+}) {
+  const actualPath = path ?? process.cwd();
+  const environmentVariables = await pullRemoteEnvironmentVariables({
+    root: actualPath,
+    flagShop,
+    envBranch
+  });
+  if (!environmentVariables.length) {
+    return;
+  }
+  const dotEnvPath = resolvePath(actualPath, ".env");
+  if (await fileExists(dotEnvPath) && !force) {
+    const overwrite = await renderConfirmationPrompt({
+      message: "Warning: .env file already exists. Do you want to overwrite it?"
+    });
+    if (!overwrite) {
+      return;
+    }
+  }
+  let hasSecretVariables = false;
+  const contents = environmentVariables.map(({ key, value, isSecret }) => {
+    let line = `${key}="${value}"`;
+    if (isSecret) {
+      hasSecretVariables = true;
+      line = `# ${key} is marked as secret and its value is hidden
+` + line;
+    }
+    return line;
+  }).join("\n") + "\n";
+  if (hasSecretVariables) {
+    const { storefront: configStorefront } = await getConfig(actualPath);
+    outputWarn(
+      `${configStorefront.title} contains environment variables marked as secret, so their values weren\u2019t pulled.`
+    );
+  }
+  await writeFile(dotEnvPath, contents);
+  outputSuccess("Updated .env");
+}
+
+export { Pull as default, pullVariables };

package/dist/commands/hydrogen/env/pull.test.d.ts

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,112 @@
+import { vi, describe, beforeEach, afterEach, it, expect } from 'vitest';
+import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
+import { inTemporaryDirectory, fileExists, readFile, writeFile } from '@shopify/cli-kit/node/fs';
+import { joinPath } from '@shopify/cli-kit/node/path';
+import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
+import { getAdminSession } from '../../../lib/admin-session.js';
+import { pullRemoteEnvironmentVariables } from '../../../lib/pull-environment-variables.js';
+import { getConfig } from '../../../lib/shopify-config.js';
+import { pullVariables } from './pull.js';
+
+vi.mock("@shopify/cli-kit/node/ui", async () => {
+  const original = await vi.importActual("@shopify/cli-kit/node/ui");
+  return {
+    ...original,
+    renderConfirmationPrompt: vi.fn()
+  };
+});
+vi.mock("../link.js");
+vi.mock("../../../lib/admin-session.js");
+vi.mock("../../../lib/shopify-config.js");
+vi.mock("../../../lib/pull-environment-variables.js");
+vi.mock("../../../lib/shop.js", () => ({
+  getHydrogenShop: () => "my-shop"
+}));
+describe("pullVariables", () => {
+  const ADMIN_SESSION = {
+    token: "abc123",
+    storeFqdn: "my-shop"
+  };
+  beforeEach(async () => {
+    vi.mocked(getAdminSession).mockResolvedValue(ADMIN_SESSION);
+    vi.mocked(getConfig).mockResolvedValue({
+      storefront: {
+        id: "gid://shopify/HydrogenStorefront/2",
+        title: "Existing Link"
+      }
+    });
+    vi.mocked(pullRemoteEnvironmentVariables).mockResolvedValue([
+      {
+        id: "gid://shopify/HydrogenStorefrontEnvironmentVariable/1",
+        key: "PUBLIC_API_TOKEN",
+        value: "abc123",
+        isSecret: false
+      },
+      {
+        id: "gid://shopify/HydrogenStorefrontEnvironmentVariable/2",
+        key: "PRIVATE_API_TOKEN",
+        value: "",
+        isSecret: true
+      }
+    ]);
+  });
+  afterEach(() => {
+    vi.resetAllMocks();
+    mockAndCaptureOutput().clear();
+  });
+  it("calls pullRemoteEnvironmentVariables", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      await pullVariables({ path: tmpDir, envBranch: "staging" });
+      expect(pullRemoteEnvironmentVariables).toHaveBeenCalledWith({
+        root: tmpDir,
+        envBranch: "staging"
+      });
+    });
+  });
+  it("writes environment variables to a .env file", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      const filePath = joinPath(tmpDir, ".env");
+      expect(await fileExists(filePath)).toBeFalsy();
+      await pullVariables({ path: tmpDir });
+      expect(await readFile(filePath)).toStrictEqual(
+        'PUBLIC_API_TOKEN="abc123"\n# PRIVATE_API_TOKEN is marked as secret and its value is hidden\nPRIVATE_API_TOKEN=""\n'
+      );
+    });
+  });
+  it("warns about secret environment variables", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      const outputMock = mockAndCaptureOutput();
+      await pullVariables({ path: tmpDir });
+      expect(outputMock.warn()).toStrictEqual(
+        "Existing Link contains environment variables marked as secret, so their values weren\u2019t pulled."
+      );
+    });
+  });
+  describe("when a .env file already exists", () => {
+    beforeEach(() => {
+      vi.mocked(renderConfirmationPrompt).mockResolvedValue(true);
+    });
+    it("prompts the user to confirm", async () => {
+      await inTemporaryDirectory(async (tmpDir) => {
+        const filePath = joinPath(tmpDir, ".env");
+        await writeFile(filePath, "EXISTING_TOKEN=1");
+        await pullVariables({ path: tmpDir });
+        expect(renderConfirmationPrompt).toHaveBeenCalledWith({
+          message: expect.stringMatching(
+            /Warning: \.env file already exists\. Do you want to overwrite it\?/
+          )
+        });
+      });
+    });
+    describe("and --force is enabled", () => {
+      it("does not prompt the user to confirm", async () => {
+        await inTemporaryDirectory(async (tmpDir) => {
+          const filePath = joinPath(tmpDir, ".env");
+          await writeFile(filePath, "EXISTING_TOKEN=1");
+          await pullVariables({ path: tmpDir, force: true });
+          expect(renderConfirmationPrompt).not.toHaveBeenCalled();
+        });
+      });
+    });
+  });
+});