@shopify/cli-hydrogen 4.1.2 → 4.2.0

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

@@ -3,11 +3,9 @@ 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 { PullVariablesQuery } from '../../../lib/graphql/admin/pull-variables.js';
 import { getAdminSession } from '../../../lib/admin-session.js';
-import { adminRequest } from '../../../lib/graphql.js';
+import { pullRemoteEnvironmentVariables } from '../../../lib/pull-environment-variables.js';
 import { getConfig } from '../../../lib/shopify-config.js';
-import { linkStorefront } from '../link.js';
 import { pullVariables } from './pull.js';
 
 vi.mock("@shopify/cli-kit/node/ui", async () => {
@@ -20,13 +18,7 @@ vi.mock("@shopify/cli-kit/node/ui", async () => {
 vi.mock("../link.js");
 vi.mock("../../../lib/admin-session.js");
 vi.mock("../../../lib/shopify-config.js");
-vi.mock("../../../lib/graphql.js", async () => {
-  const original = await vi.importActual("../../../lib/graphql.js");
-  return {
-    ...original,
-    adminRequest: vi.fn()
-  };
-});
+vi.mock("../../../lib/pull-environment-variables.js");
 vi.mock("../../../lib/shop.js", () => ({
   getHydrogenShop: () => "my-shop"
 }));
@@ -43,40 +35,32 @@ describe("pullVariables", () => {
         title: "Existing Link"
       }
     });
-    vi.mocked(adminRequest).mockResolvedValue({
-      hydrogenStorefront: {
-        id: "gid://shopify/HydrogenStorefront/1",
-        environmentVariables: [
-          {
-            id: "gid://shopify/HydrogenStorefrontEnvironmentVariable/1",
-            key: "PUBLIC_API_TOKEN",
-            value: "abc123",
-            isSecret: false
-          },
-          {
-            id: "gid://shopify/HydrogenStorefrontEnvironmentVariable/1",
-            key: "PRIVATE_API_TOKEN",
-            value: "",
-            isSecret: true
-          }
-        ]
+    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("makes a GraphQL call to fetch environment variables", async () => {
+  it("calls pullRemoteEnvironmentVariables", async () => {
     await inTemporaryDirectory(async (tmpDir) => {
-      await pullVariables({ path: tmpDir });
-      expect(adminRequest).toHaveBeenCalledWith(
-        PullVariablesQuery,
-        ADMIN_SESSION,
-        {
-          id: "gid://shopify/HydrogenStorefront/2"
-        }
-      );
+      await pullVariables({ path: tmpDir, envBranch: "staging" });
+      expect(pullRemoteEnvironmentVariables).toHaveBeenCalledWith({
+        root: tmpDir,
+        envBranch: "staging"
+      });
     });
   });
   it("writes environment variables to a .env file", async () => {
@@ -89,20 +73,7 @@ describe("pullVariables", () => {
       );
     });
   });
-  it("warns if there are any variables marked as secret", async () => {
-    vi.mocked(adminRequest).mockResolvedValue({
-      hydrogenStorefront: {
-        id: "gid://shopify/HydrogenStorefront/1",
-        environmentVariables: [
-          {
-            id: "gid://shopify/HydrogenStorefrontEnvironmentVariable/1",
-            key: "PRIVATE_API_TOKEN",
-            value: "",
-            isSecret: true
-          }
-        ]
-      }
-    });
+  it("warns about secret environment variables", async () => {
     await inTemporaryDirectory(async (tmpDir) => {
       const outputMock = mockAndCaptureOutput();
       await pullVariables({ path: tmpDir });
@@ -138,68 +109,4 @@ describe("pullVariables", () => {
       });
     });
   });
-  describe("when there are no environment variables to update", () => {
-    beforeEach(() => {
-      vi.mocked(adminRequest).mockResolvedValue({
-        hydrogenStorefront: {
-          id: "gid://shopify/HydrogenStorefront/1",
-          environmentVariables: []
-        }
-      });
-    });
-    it("renders a message", async () => {
-      await inTemporaryDirectory(async (tmpDir) => {
-        const outputMock = mockAndCaptureOutput();
-        await pullVariables({ path: tmpDir });
-        expect(outputMock.info()).toMatch(
-          /No Preview environment variables found\./
-        );
-      });
-    });
-  });
-  describe("when there is no linked storefront", () => {
-    beforeEach(() => {
-      vi.mocked(getConfig).mockResolvedValue({
-        storefront: void 0
-      });
-    });
-    it("renders an error message", async () => {
-      await inTemporaryDirectory(async (tmpDir) => {
-        const outputMock = mockAndCaptureOutput();
-        await pullVariables({ path: tmpDir });
-        expect(outputMock.error()).toMatch(
-          /No linked Hydrogen storefront on my-shop/
-        );
-      });
-    });
-    it("prompts the user to create a link", async () => {
-      vi.mocked(renderConfirmationPrompt).mockResolvedValue(true);
-      await inTemporaryDirectory(async (tmpDir) => {
-        await pullVariables({ 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("renders an error message", async () => {
-      await inTemporaryDirectory(async (tmpDir) => {
-        const outputMock = mockAndCaptureOutput();
-        await pullVariables({ path: tmpDir });
-        expect(outputMock.error()).toMatch(
-          /Couldn’t find Hydrogen storefront\./
-        );
-      });
-    });
-  });
 });

package/dist/lib/codegen.d.ts

@@ -0,0 +1,25 @@
+import * as child_process from 'child_process';
+import * as stream from 'stream';
+export { patchGqlPluck } from '@shopify/hydrogen-codegen';
+
+declare function normalizeCodegenError(errorMessage: string, rootDirectory?: string): {
+    message: string;
+    details: string;
+};
+/**
+ * Spawns a child process to run GraphlQL CLI Codegen.
+ * Running on a separate process splits work from this processor
+ * and also allows us to filter out logs.
+ */
+declare function spawnCodegenProcess({ rootDirectory, appDirectory, configFilePath, }: CodegenOptions): child_process.ChildProcessByStdio<null, null, stream.Readable>;
+type ProjectDirs = {
+    rootDirectory: string;
+    appDirectory: string;
+};
+type CodegenOptions = ProjectDirs & {
+    configFilePath?: string;
+    watch?: boolean;
+};
+declare function generateTypes({ configFilePath, watch, ...dirs }: CodegenOptions): Promise<string[]>;
+
+export { generateTypes, normalizeCodegenError, spawnCodegenProcess };

package/dist/lib/codegen.js

@@ -0,0 +1,128 @@
+import { loadCodegenConfig, generate } from '@graphql-codegen/cli';
+import { patchGqlPluck, pluckConfig, preset, schema } from '@shopify/hydrogen-codegen';
+export { patchGqlPluck } from '@shopify/hydrogen-codegen';
+import { resolveFormatConfig, format } from './transpile-ts.js';
+import { renderWarning, renderFatalError } from '@shopify/cli-kit/node/ui';
+import { relativePath, joinPath } from '@shopify/cli-kit/node/path';
+import { spawn } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+
+const nodePath = process.argv[1];
+const modulePath = fileURLToPath(import.meta.url);
+const isStandaloneProcess = nodePath === modulePath;
+if (isStandaloneProcess) {
+  patchGqlPluck().then(
+    () => generateTypes({
+      rootDirectory: process.argv[2],
+      appDirectory: process.argv[3],
+      configFilePath: process.argv[4],
+      watch: true
+    })
+  );
+}
+function normalizeCodegenError(errorMessage, rootDirectory) {
+  const [first = "", ...rest] = errorMessage.replaceAll("[FAILED]", "").replace(/\s{2,}/g, "\n").replace(/\n,\n/, "\n").trim().split("\n");
+  const message = "[Codegen] " + first;
+  let details = rest.join("\n");
+  if (rootDirectory) {
+    const forwardSlashRootDir = rootDirectory.replaceAll("\\", "/") + "/";
+    details = details.replaceAll(forwardSlashRootDir, "");
+  }
+  return { message, details };
+}
+function spawnCodegenProcess({
+  rootDirectory,
+  appDirectory,
+  configFilePath
+}) {
+  const child = spawn(
+    "node",
+    [
+      fileURLToPath(import.meta.url),
+      rootDirectory,
+      appDirectory,
+      configFilePath ?? ""
+    ],
+    { stdio: ["inherit", "ignore", "pipe"] }
+  );
+  child.stderr.on("data", (data) => {
+    const dataString = typeof data === "string" ? data : data?.toString?.("utf8") ?? "";
+    if (!dataString)
+      return;
+    const { message, details } = normalizeCodegenError(dataString, rootDirectory);
+    console.log("");
+    renderWarning({ headline: message, body: details });
+  });
+  child.on("close", (code) => {
+    if (code && code > 0) {
+      renderFatalError({
+        type: 0,
+        name: "CodegenError",
+        message: `Codegen process exited with code ${code}`,
+        tryMessage: "Try restarting the dev server."
+      });
+      process.exit(code);
+    }
+  });
+  return child;
+}
+async function generateTypes({
+  configFilePath,
+  watch,
+  ...dirs
+}) {
+  const { config: codegenConfig } = await loadCodegenConfig({
+    configFilePath,
+    searchPlaces: [dirs.rootDirectory]
+  }) || generateDefaultConfig(dirs);
+  await addHooksToHydrogenOptions(codegenConfig, dirs);
+  await generate(
+    {
+      ...codegenConfig,
+      cwd: dirs.rootDirectory,
+      watch,
+      silent: !watch
+    },
+    true
+  );
+  return Object.keys(codegenConfig.generates);
+}
+function generateDefaultConfig({
+  rootDirectory,
+  appDirectory
+}) {
+  const tsDefaultGlob = "*!(*.d).{ts,tsx}";
+  const appDirRelative = relativePath(rootDirectory, appDirectory);
+  return {
+    filepath: "virtual:codegen",
+    config: {
+      overwrite: true,
+      pluckConfig,
+      generates: {
+        ["storefrontapi.generated.d.ts"]: {
+          preset,
+          schema,
+          documents: [
+            tsDefaultGlob,
+            joinPath(appDirRelative, "**", tsDefaultGlob)
+          ]
+        }
+      }
+    }
+  };
+}
+async function addHooksToHydrogenOptions(codegenConfig, { rootDirectory }) {
+  const [, options] = Object.entries(codegenConfig.generates).find(
+    ([, value]) => (Array.isArray(value) ? value[0] : value)?.schema === schema
+  ) || [];
+  const hydrogenOptions = Array.isArray(options) ? options[0] : options;
+  if (hydrogenOptions) {
+    const formatConfig = await resolveFormatConfig(rootDirectory);
+    hydrogenOptions.hooks = {
+      beforeOneFileWrite: (file, content) => format(content, formatConfig, file),
+      ...hydrogenOptions.hooks
+    };
+  }
+}
+
+export { generateTypes, normalizeCodegenError, spawnCodegenProcess };

package/dist/lib/colors.d.ts

@@ -3,6 +3,9 @@ import ansiColors from 'ansi-colors';
 declare const colors: {
     dim: ansiColors.StyleFunction;
     bold: ansiColors.StyleFunction;
+    green: ansiColors.StyleFunction;
+    whiteBright: ansiColors.StyleFunction;
+    yellow: ansiColors.StyleFunction;
 };
 
 export { colors };

package/dist/lib/colors.js

@@ -2,7 +2,10 @@ import ansiColors from 'ansi-colors';
 
 const colors = {
   dim: ansiColors.dim,
-  bold: ansiColors.bold
+  bold: ansiColors.bold,
+  green: ansiColors.green,
+  whiteBright: ansiColors.whiteBright,
+  yellow: ansiColors.yellow
 };
 
 export { colors };

package/dist/lib/combined-environment-variables.d.ts

@@ -0,0 +1,8 @@
+interface Arguments {
+    envBranch?: string;
+    root: string;
+    shop?: string;
+}
+declare function combinedEnvironmentVariables({ envBranch, root, shop, }: Arguments): Promise<{}>;
+
+export { combinedEnvironmentVariables };

package/dist/lib/combined-environment-variables.js

@@ -0,0 +1,74 @@
+import { fileExists } from '@shopify/cli-kit/node/fs';
+import { resolvePath } from '@shopify/cli-kit/node/path';
+import { outputInfo, outputContent, outputToken } from '@shopify/cli-kit/node/output';
+import { readAndParseDotEnv } from '@shopify/cli-kit/node/dot-env';
+import { colors } from './colors.js';
+import { pullRemoteEnvironmentVariables } from './pull-environment-variables.js';
+import { getConfig } from './shopify-config.js';
+
+async function combinedEnvironmentVariables({
+  envBranch,
+  root,
+  shop
+}) {
+  const remoteEnvironmentVariables = await pullRemoteEnvironmentVariables({
+    root,
+    flagShop: shop,
+    silent: true,
+    envBranch
+  });
+  const formattedRemoteVariables = remoteEnvironmentVariables?.reduce(
+    (a, v) => ({ ...a, [v.key]: v.value }),
+    {}
+  );
+  const dotEnvPath = resolvePath(root, ".env");
+  const localEnvironmentVariables = await fileExists(dotEnvPath) ? (await readAndParseDotEnv(dotEnvPath)).variables : {};
+  const remoteKeys = new Set(
+    remoteEnvironmentVariables.map((variable) => variable.key)
+  );
+  const localKeys = new Set(Object.keys(localEnvironmentVariables));
+  if ([...remoteKeys, ...localKeys].length) {
+    outputInfo(
+      `${colors.bold("Injecting environment variables into MiniOxygen...")}`
+    );
+  }
+  let storefrontTitle = "";
+  if (remoteEnvironmentVariables.length) {
+    const { storefront } = await getConfig(root);
+    if (storefront) {
+      storefrontTitle = storefront.title;
+    }
+  }
+  remoteEnvironmentVariables.forEach(({ key, isSecret }) => {
+    if (localKeys.has(key)) {
+      outputIgnoringKey(key, `overwritten via ${colors.yellow(".env")}`);
+    } else if (isSecret) {
+      outputIgnoringKey(key, "value is marked as secret");
+    } else {
+      outputUsingKey(key, storefrontTitle);
+    }
+  });
+  [...localKeys].forEach((keyName) => {
+    outputUsingKey(keyName, ".env");
+  });
+  return {
+    ...formattedRemoteVariables,
+    ...localEnvironmentVariables
+  };
+}
+function outputUsingKey(keyName, source) {
+  outputInfo(
+    outputContent`  Using ${outputToken.green(
+      keyName
+    )} from ${outputToken.yellow(source)}`.value
+  );
+}
+function outputIgnoringKey(keyName, reason) {
+  outputInfo(
+    outputContent`${colors.dim(
+      `  Ignoring ${colors.green(keyName)} (${reason})`
+    )}`.value
+  );
+}
+
+export { combinedEnvironmentVariables };

package/dist/lib/combined-environment-variables.test.d.ts

@@ -0,0 +1 @@
+

package/dist/lib/combined-environment-variables.test.js

@@ -0,0 +1,111 @@
+import { vi, describe, beforeEach, afterEach, test, expect } from 'vitest';
+import { inTemporaryDirectory, writeFile } from '@shopify/cli-kit/node/fs';
+import { joinPath } from '@shopify/cli-kit/node/path';
+import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
+import { combinedEnvironmentVariables } from './combined-environment-variables.js';
+import { pullRemoteEnvironmentVariables } from './pull-environment-variables.js';
+import { getConfig } from './shopify-config.js';
+
+vi.mock("./shopify-config.js");
+vi.mock("./pull-environment-variables.js");
+describe("combinedEnvironmentVariables()", () => {
+  beforeEach(() => {
+    vi.mocked(getConfig).mockResolvedValue({
+      storefront: {
+        id: "gid://shopify/HydrogenStorefront/1",
+        title: "Hydrogen"
+      }
+    });
+    vi.mocked(pullRemoteEnvironmentVariables).mockResolvedValue([
+      {
+        id: "gid://shopify/HydrogenStorefrontEnvironmentVariable/1",
+        key: "PUBLIC_API_TOKEN",
+        value: "abc123",
+        isSecret: false
+      }
+    ]);
+  });
+  afterEach(() => {
+    vi.resetAllMocks();
+    mockAndCaptureOutput().clear();
+  });
+  test("calls pullRemoteEnvironmentVariables", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      await combinedEnvironmentVariables({
+        envBranch: "main",
+        root: tmpDir,
+        shop: "my-shop"
+      });
+      expect(pullRemoteEnvironmentVariables).toHaveBeenCalledWith({
+        envBranch: "main",
+        root: tmpDir,
+        flagShop: "my-shop",
+        silent: true
+      });
+    });
+  });
+  test("renders a message about injection", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      const outputMock = mockAndCaptureOutput();
+      await combinedEnvironmentVariables({ root: tmpDir, shop: "my-shop" });
+      expect(outputMock.info()).toMatch(
+        /Injecting environment variables into MiniOxygen/
+      );
+    });
+  });
+  test("lists all of the variables being used", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      const outputMock = mockAndCaptureOutput();
+      await combinedEnvironmentVariables({ root: tmpDir, shop: "my-shop" });
+      expect(outputMock.info()).toMatch(/Using PUBLIC_API_TOKEN from Hydrogen/);
+    });
+  });
+  describe("when one of the variables is a secret", () => {
+    beforeEach(() => {
+      vi.mocked(pullRemoteEnvironmentVariables).mockResolvedValue([
+        {
+          id: "gid://shopify/HydrogenStorefrontEnvironmentVariable/1",
+          key: "PUBLIC_API_TOKEN",
+          value: "",
+          isSecret: true
+        }
+      ]);
+    });
+    test("uses special messaging to alert the user", async () => {
+      await inTemporaryDirectory(async (tmpDir) => {
+        const outputMock = mockAndCaptureOutput();
+        await combinedEnvironmentVariables({ root: tmpDir, shop: "my-shop" });
+        expect(outputMock.info()).toMatch(
+          /Ignoring PUBLIC_API_TOKEN \(value is marked as secret\)/
+        );
+      });
+    });
+  });
+  describe("when there are local variables", () => {
+    test("includes local variables in the list", async () => {
+      await inTemporaryDirectory(async (tmpDir) => {
+        const filePath = joinPath(tmpDir, ".env");
+        await writeFile(filePath, "LOCAL_TOKEN=1");
+        const outputMock = mockAndCaptureOutput();
+        await combinedEnvironmentVariables({ root: tmpDir });
+        expect(outputMock.info()).toMatch(/Using LOCAL_TOKEN from \.env/);
+      });
+    });
+    describe("and they overwrite remote variables", () => {
+      test("uses special messaging to alert the user", async () => {
+        await inTemporaryDirectory(async (tmpDir) => {
+          const filePath = joinPath(tmpDir, ".env");
+          await writeFile(filePath, "PUBLIC_API_TOKEN=abc");
+          const outputMock = mockAndCaptureOutput();
+          await combinedEnvironmentVariables({ root: tmpDir, shop: "my-shop" });
+          expect(outputMock.info()).toMatch(
+            /Ignoring PUBLIC_API_TOKEN \(overwritten via \.env\)/
+          );
+          expect(outputMock.info()).toMatch(
+            /Using PUBLIC_API_TOKEN from \.env/
+          );
+        });
+      });
+    });
+  });
+});

package/dist/lib/flags.d.ts

@@ -5,6 +5,7 @@ declare const commonFlags: {
     port: _oclif_core_lib_interfaces_parser_js.OptionFlag<number, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
     force: _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>;
+    "env-branch": _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
 };
 declare function flagsToCamelObject(obj: Record<string, any>): any;
 /**

package/dist/lib/flags.js

@@ -24,6 +24,12 @@ const commonFlags = {
     description: "Shop URL. It can be the shop prefix (janes-apparel) or the full myshopify.com URL (janes-apparel.myshopify.com, https://janes-apparel.myshopify.com).",
     env: "SHOPIFY_SHOP",
     parse: async (input) => normalizeStoreFqdn(input)
+  }),
+  ["env-branch"]: Flags.string({
+    description: "Specify an environment's branch name when using remote environment variables.",
+    env: "SHOPIFY_HYDROGEN_ENVIRONMENT_BRANCH",
+    char: "e",
+    hidden: true
   })
 };
 function flagsToCamelObject(obj) {

package/dist/lib/graphql/admin/list-environments.d.ts

@@ -0,0 +1,20 @@
+declare const ListEnvironmentsQuery = "#graphql\n  query ListStorefronts($id: ID!) {\n    hydrogenStorefront(id: $id) {\n      id\n      productionUrl\n      environments {\n        branch\n        createdAt\n        id\n        name\n        type\n        url\n      }\n    }\n  }\n";
+type EnvironmentType = 'PREVIEW' | 'PRODUCTION' | 'CUSTOM';
+interface Environment {
+    branch: string | null;
+    createdAt: string;
+    id: string;
+    name: string;
+    type: EnvironmentType;
+    url: string | null;
+}
+interface HydrogenStorefront {
+    id: string;
+    environments: Environment[];
+    productionUrl: string;
+}
+interface ListEnvironmentsSchema {
+    hydrogenStorefront: HydrogenStorefront | null;
+}
+
+export { Environment, EnvironmentType, ListEnvironmentsQuery, ListEnvironmentsSchema };

package/dist/lib/graphql/admin/list-environments.js

@@ -0,0 +1,18 @@
+const ListEnvironmentsQuery = `#graphql
+  query ListStorefronts($id: ID!) {
+    hydrogenStorefront(id: $id) {
+      id
+      productionUrl
+      environments {
+        branch
+        createdAt
+        id
+        name
+        type
+        url
+      }
+    }
+  }
+`;
+
+export { ListEnvironmentsQuery };

package/dist/lib/graphql/admin/pull-variables.d.ts

@@ -1,4 +1,4 @@
-declare const PullVariablesQuery = "#graphql\n  query ListStorefronts($id: ID!) {\n    hydrogenStorefront(id: $id) {\n      id\n      environmentVariables {\n        id\n        isSecret\n        key\n        value\n      }\n    }\n  }\n";
+declare const PullVariablesQuery = "#graphql\n  query PullVariables($id: ID!, $branch: String) {\n    hydrogenStorefront(id: $id) {\n      id\n      environmentVariables(branchName: $branch) {\n        id\n        isSecret\n        key\n        value\n      }\n    }\n  }\n";
 interface EnvironmentVariable {
     id: string;
     isSecret: boolean;

package/dist/lib/graphql/admin/pull-variables.js

@@ -1,8 +1,8 @@
 const PullVariablesQuery = `#graphql
-  query ListStorefronts($id: ID!) {
+  query PullVariables($id: ID!, $branch: String) {
     hydrogenStorefront(id: $id) {
       id
-      environmentVariables {
+      environmentVariables(branchName: $branch) {
         id
         isSecret
         key

package/dist/lib/mini-oxygen.d.ts

@@ -4,8 +4,11 @@ type MiniOxygenOptions = {
     watch?: boolean;
     buildPathClient: string;
     buildPathWorkerFile: string;
+    environmentVariables?: {
+        [key: string]: string;
+    };
 };
-declare function startMiniOxygen({ root, port, watch, buildPathWorkerFile, buildPathClient, }: MiniOxygenOptions): Promise<void>;
+declare function startMiniOxygen({ root, port, watch, buildPathWorkerFile, buildPathClient, environmentVariables, }: MiniOxygenOptions): Promise<void>;
 declare function logResponse(request: Request, response: Response): void;
 
 export { logResponse, startMiniOxygen };

package/dist/lib/mini-oxygen.js

@@ -8,7 +8,8 @@ async function startMiniOxygen({
   port = 3e3,
   watch = false,
   buildPathWorkerFile,
-  buildPathClient
+  buildPathClient,
+  environmentVariables = {}
 }) {
   const { default: miniOxygen } = await import('@shopify/mini-oxygen');
   const miniOxygenPreview = miniOxygen.default ?? miniOxygen;
@@ -21,8 +22,11 @@ async function startMiniOxygen({
     watch,
     autoReload: watch,
     modules: true,
-    env: process.env,
-    envPath: await fileExists(dotenvPath) ? dotenvPath : void 0,
+    env: {
+      ...environmentVariables,
+      ...process.env
+    },
+    envPath: !Object.keys(environmentVariables).length && await fileExists(dotenvPath) ? dotenvPath : void 0,
     log: () => {
     },
     buildWatchPaths: watch ? [resolvePath(root, buildPathWorkerFile)] : void 0,