@shopify/cli-hydrogen 7.1.2 → 8.0.1

package/dist/generator-templates/starter/server.ts

@@ -1,5 +1,6 @@
+// @ts-ignore
 // Virtual entry point for the app
-import * as remixBuild from '@remix-run/dev/server-build';
+import * as remixBuild from 'virtual:remix/server-build';
 import {
   cartGetIdDefault,
   cartSetIdDefault,

package/dist/generator-templates/starter/storefrontapi.generated.d.ts

@@ -31,7 +31,7 @@ export type CartLineFragment = Pick<
     image?: StorefrontAPI.Maybe<
       Pick<StorefrontAPI.Image, 'id' | 'url' | 'altText' | 'width' | 'height'>
     >;
-    product: Pick<StorefrontAPI.Product, 'handle' | 'title' | 'id'>;
+    product: Pick<StorefrontAPI.Product, 'handle' | 'title' | 'id' | 'vendor'>;
     selectedOptions: Array<
       Pick<StorefrontAPI.SelectedOption, 'name' | 'value'>
     >;
@@ -40,7 +40,7 @@ export type CartLineFragment = Pick<
 
 export type CartApiQueryFragment = Pick<
   StorefrontAPI.Cart,
-  'id' | 'checkoutUrl' | 'totalQuantity' | 'note'
+  'updatedAt' | 'id' | 'checkoutUrl' | 'totalQuantity' | 'note'
 > & {
   buyerIdentity: Pick<
     StorefrontAPI.CartBuyerIdentity,
@@ -81,7 +81,10 @@ export type CartApiQueryFragment = Pick<
               'id' | 'url' | 'altText' | 'width' | 'height'
             >
           >;
-          product: Pick<StorefrontAPI.Product, 'handle' | 'title' | 'id'>;
+          product: Pick<
+            StorefrontAPI.Product,
+            'handle' | 'title' | 'id' | 'vendor'
+          >;
           selectedOptions: Array<
             Pick<StorefrontAPI.SelectedOption, 'name' | 'value'>
           >;
@@ -673,6 +676,55 @@ export type StoreCollectionsQuery = {
   };
 };
 
+export type CatalogQueryVariables = StorefrontAPI.Exact<{
+  country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
+  language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
+  first?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']['input']>;
+  last?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']['input']>;
+  startCursor?: StorefrontAPI.InputMaybe<
+    StorefrontAPI.Scalars['String']['input']
+  >;
+  endCursor?: StorefrontAPI.InputMaybe<
+    StorefrontAPI.Scalars['String']['input']
+  >;
+}>;
+
+export type CatalogQuery = {
+  products: {
+    nodes: Array<
+      Pick<StorefrontAPI.Product, 'id' | 'handle' | 'title'> & {
+        featuredImage?: StorefrontAPI.Maybe<
+          Pick<
+            StorefrontAPI.Image,
+            'id' | 'altText' | 'url' | 'width' | 'height'
+          >
+        >;
+        priceRange: {
+          minVariantPrice: Pick<
+            StorefrontAPI.MoneyV2,
+            'amount' | 'currencyCode'
+          >;
+          maxVariantPrice: Pick<
+            StorefrontAPI.MoneyV2,
+            'amount' | 'currencyCode'
+          >;
+        };
+        variants: {
+          nodes: Array<{
+            selectedOptions: Array<
+              Pick<StorefrontAPI.SelectedOption, 'name' | 'value'>
+            >;
+          }>;
+        };
+      }
+    >;
+    pageInfo: Pick<
+      StorefrontAPI.PageInfo,
+      'hasPreviousPage' | 'hasNextPage' | 'startCursor' | 'endCursor'
+    >;
+  };
+};
+
 export type PageQueryVariables = StorefrontAPI.Exact<{
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
@@ -1119,6 +1171,10 @@ interface GeneratedQueryTypes {
     return: StoreCollectionsQuery;
     variables: StoreCollectionsQueryVariables;
   };
+  '#graphql\n  query Catalog(\n    $country: CountryCode\n    $language: LanguageCode\n    $first: Int\n    $last: Int\n    $startCursor: String\n    $endCursor: String\n  ) @inContext(country: $country, language: $language) {\n    products(first: $first, last: $last, before: $startCursor, after: $endCursor) {\n      nodes {\n        ...ProductItem\n      }\n      pageInfo {\n        hasPreviousPage\n        hasNextPage\n        startCursor\n        endCursor\n      }\n    }\n  }\n  #graphql\n  fragment MoneyProductItem on MoneyV2 {\n    amount\n    currencyCode\n  }\n  fragment ProductItem on Product {\n    id\n    handle\n    title\n    featuredImage {\n      id\n      altText\n      url\n      width\n      height\n    }\n    priceRange {\n      minVariantPrice {\n        ...MoneyProductItem\n      }\n      maxVariantPrice {\n        ...MoneyProductItem\n      }\n    }\n    variants(first: 1) {\n      nodes {\n        selectedOptions {\n          name\n          value\n        }\n      }\n    }\n  }\n\n': {
+    return: CatalogQuery;
+    variables: CatalogQueryVariables;
+  };
   '#graphql\n  query Page(\n    $language: LanguageCode,\n    $country: CountryCode,\n    $handle: String!\n  )\n  @inContext(language: $language, country: $country) {\n    page(handle: $handle) {\n      id\n      title\n      body\n      seo {\n        description\n        title\n      }\n    }\n  }\n': {
     return: PageQuery;
     variables: PageQueryVariables;

package/dist/generator-templates/starter/vite.config.ts

@@ -0,0 +1,26 @@
+import {defineConfig} from 'vite';
+import {hydrogen} from '@shopify/hydrogen/vite';
+import {oxygen} from '@shopify/mini-oxygen/vite';
+import {vitePlugin as remix} from '@remix-run/dev';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+  plugins: [
+    hydrogen(),
+    oxygen(),
+    remix({
+      presets: [hydrogen.preset()],
+      future: {
+        v3_fetcherPersist: true,
+        v3_relativeSplatPath: true,
+        v3_throwAbortReason: true,
+      },
+    }),
+    tsconfigPaths(),
+  ],
+  build: {
+    // Allow a strict Content-Security-Policy
+    // withtout inlining assets as base64:
+    assetsInlineLimit: 0,
+  },
+});

package/dist/{commands/hydrogen/init.d.ts → init.d.ts}

@@ -1,5 +1,6 @@
 import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
 import Command from '@shopify/cli-kit/node/base-command';
+import { PackageManager } from '@shopify/cli-kit/node/node-package-manager';
 
 declare const GENERATOR_SETUP_ASSETS_SUB_DIRS: readonly ["tailwind", "css-modules", "vanilla-extract", "postcss", "vite"];
 type AssetDir = (typeof GENERATOR_SETUP_ASSETS_SUB_DIRS)[number];
@@ -25,6 +26,8 @@ type InitOptions = {
     shortcut?: boolean;
     installDeps?: boolean;
     git?: boolean;
+    quickstart?: boolean;
+    packageManager?: PackageManager;
 };
 declare const LANGUAGES: {
     readonly js: "JavaScript";
@@ -33,13 +36,15 @@ declare const LANGUAGES: {
 type Language = keyof typeof LANGUAGES;
 
 declare class Init extends Command {
+    static descriptionWithMarkdown: string;
     static description: string;
     static flags: {
         routes: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
         git: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+        quickstart: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+        'package-manager': _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
         shortcut: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
         markets: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
-        styling: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
         'mock-shop': _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
         'install-deps': _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
         path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
@@ -49,11 +54,13 @@ declare class Init extends Command {
     };
     run(): Promise<void>;
 }
-declare function runInit(options?: InitOptions): Promise<{
+declare function runInit({ markets, ...options }?: InitOptions & {
+    markets?: InitOptions['i18n'];
+}): Promise<{
     language?: "js" | "ts" | undefined;
-    packageManager: "npm" | "pnpm" | "yarn" | "bun" | "unknown";
+    packageManager: "npm" | "yarn" | "pnpm" | "unknown" | "bun";
     cssStrategy?: CssStrategy | undefined;
-    cliCommand: "h2" | "pnpm shopify hydrogen" | "yarn shopify hydrogen" | "bun shopify hydrogen" | "npx shopify hydrogen";
+    cliCommand: "h2" | "yarn shopify hydrogen" | "pnpm shopify hydrogen" | "bun shopify hydrogen" | "npx shopify hydrogen";
     depsInstalled: boolean;
     depsError?: Error | undefined;
     i18n?: "subfolders" | "domains" | "subdomains" | undefined;

package/dist/lib/check-lockfile.js

@@ -3,7 +3,7 @@ import { resolvePath } from '@shopify/cli-kit/node/path';
 import { checkIfIgnoredInGitRepository } from '@shopify/cli-kit/node/git';
 import { renderWarning } from '@shopify/cli-kit/node/ui';
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { lockfiles } from '@shopify/cli-kit/node/node-package-manager';
+import { packageManagers } from './package-managers.js';
 
 function missingLockfileWarning(shouldExit) {
   const headline = "No lockfile found";
@@ -23,15 +23,9 @@ function missingLockfileWarning(shouldExit) {
     renderWarning({ headline, body, nextSteps });
   }
 }
-function multipleLockfilesWarning(lockfiles2, shouldExit) {
-  const packageManagers = {
-    "bun.lockb": "bun",
-    "yarn.lock": "yarn",
-    "package-lock.json": "npm",
-    "pnpm-lock.yaml": "pnpm"
-  };
-  const lockfileList = lockfiles2.map((lockfile) => {
-    return `${lockfile} (created by ${packageManagers[lockfile]})`;
+function multipleLockfilesWarning(packageManagers2, shouldExit) {
+  const lockfileList = packageManagers2.map(({ name, lockfile }) => {
+    return `${lockfile} (created by ${name})`;
   });
   const headline = "Multiple lockfiles found";
   const body = [
@@ -61,19 +55,19 @@ function lockfileIgnoredWarning(lockfile) {
 async function checkLockfileStatus(directory, shouldExit = false) {
   if (process.env.LOCAL_DEV)
     return;
-  const availableLockfiles = [];
-  for (const lockFileName of lockfiles) {
-    if (await fileExists(resolvePath(directory, lockFileName))) {
-      availableLockfiles.push(lockFileName);
+  const foundPackageManagers = [];
+  for (const packageManager of packageManagers) {
+    if (await fileExists(resolvePath(directory, packageManager.lockfile))) {
+      foundPackageManagers.push(packageManager);
     }
   }
-  if (availableLockfiles.length === 0) {
+  if (foundPackageManagers.length === 0) {
     return missingLockfileWarning(shouldExit);
   }
-  if (availableLockfiles.length > 1) {
-    return multipleLockfilesWarning(availableLockfiles, shouldExit);
+  if (foundPackageManagers.length > 1) {
+    return multipleLockfilesWarning(foundPackageManagers, shouldExit);
   }
-  const lockfile = availableLockfiles[0];
+  const lockfile = foundPackageManagers[0].lockfile;
   const ignoredLockfile = await checkIfIgnoredInGitRepository(directory, [
     lockfile
   ]).catch(() => {

package/dist/lib/codegen.js

@@ -1,7 +1,7 @@
 import { spawn } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
 import { getCodeFormatOptions, formatCode } from './format-code.js';
-import { renderWarning, renderFatalError } from '@shopify/cli-kit/node/ui';
+import { renderWarning } from '@shopify/cli-kit/node/ui';
 import { relativePath, joinPath, resolvePath, basename } from '@shopify/cli-kit/node/path';
 import { AbortError } from '@shopify/cli-kit/node/error';
 
@@ -17,6 +17,13 @@ if (isStandaloneProcess) {
   });
 }
 function normalizeCodegenError(errorMessage, rootDirectory) {
+  if (errorMessage.includes("AbortError: ")) {
+    const parsedError = errorMessage.split("AbortError: ")[1] ?? "";
+    const message2 = parsedError.split("\n")[0];
+    const details2 = parsedError.match(/tryMessage: '(.*)',$/m)?.[1];
+    if (message2)
+      return { message: message2, details: details2 };
+  }
   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");
@@ -48,25 +55,27 @@ function spawnCodegenProcess({
     const { message, details } = normalizeCodegenError(dataString, rootDirectory);
     if (/`punycode`/.test(message))
       return;
+    if (/\.body\[\d\]/.test(message))
+      return;
+    if (/console\.time(End)?\(\)/.test(message))
+      return;
     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}`,
-        skipOclifErrorHandling: true,
-        tryMessage: "Try restarting the dev server."
+      renderWarning({
+        headline: "Codegen process exited with code " + code,
+        body: "There should be more logs above."
       });
-      process.exit(code);
     }
   });
   return child;
 }
 function codegen(options) {
   return generateTypes(options).catch((error) => {
+    if (error instanceof AbortError)
+      throw error;
     const { message, details } = normalizeCodegenError(
       error.message,
       options.rootDirectory
@@ -80,7 +89,12 @@ async function generateTypes({
   forceSfapiVersion,
   ...dirs
 }) {
-  const { generate, loadCodegenConfig, CodegenContext } = await import('@graphql-codegen/cli');
+  const { generate, loadCodegenConfig, CodegenContext } = await import('@graphql-codegen/cli').catch(() => {
+    throw new AbortError(
+      "Could not load GraphQL Codegen CLI.",
+      "Please make sure you have `@graphql-codegen/cli` installed as a dev dependency."
+    );
+  });
   const { config: codegenConfig } = (
     // Load <root>/codegen.ts if available
     await loadCodegenConfig({
@@ -116,8 +130,18 @@ async function generateDefaultConfig({
   rootDirectory,
   appDirectory = resolvePath(rootDirectory, "app")
 }, forceSfapiVersion) {
-  const { getSchema, preset, pluckConfig } = await import('@shopify/hydrogen-codegen');
-  const { loadConfig } = await import('graphql-config');
+  const { getSchema, preset, pluckConfig } = await import('@shopify/hydrogen-codegen').catch(() => {
+    throw new AbortError(
+      "Could not load Hydrogen Codegen.",
+      "Please make sure you have `@shopify/hydrogen-codegen` installed as a dev dependency."
+    );
+  });
+  const { loadConfig } = await import('graphql-config').catch(() => {
+    throw new AbortError(
+      "Could not load GraphQL Config.",
+      "Please make sure you have `graphql-config` installed as a dev dependency."
+    );
+  });
   const gqlConfig = await loadConfig({
     rootDir: rootDirectory,
     throwOnEmpty: false,
@@ -128,8 +152,8 @@ async function generateDefaultConfig({
   const sfapiProject = findGqlProject(sfapiSchema, gqlConfig);
   const defaultGlob = "*!(*.d).{ts,tsx,js,jsx}";
   const appDirRelative = relativePath(rootDirectory, appDirectory);
-  const caapiSchema = getSchema("customer-account");
-  const caapiProject = findGqlProject(caapiSchema, gqlConfig);
+  const caapiSchema = getSchema("customer-account", { throwIfMissing: false });
+  const caapiProject = caapiSchema ? findGqlProject(caapiSchema, gqlConfig) : void 0;
   const customerAccountAPIConfig = caapiProject?.documents ? {
     ["customer-accountapi.generated.d.ts"]: {
       preset,

package/dist/lib/common.js

@@ -0,0 +1,50 @@
+import { AbortError } from '@shopify/cli-kit/node/error';
+import colors from '@shopify/cli-kit/node/colors';
+
+function orderEnvironmentsBySafety(environments) {
+  return [
+    ...environments.filter((environment) => environment.type === "PREVIEW"),
+    ...environments.filter((environment) => environment.type === "CUSTOM"),
+    ...environments.filter((environment) => environment.type === "PRODUCTION")
+  ];
+}
+function createEnvironmentCliChoiceLabel(name, handle, branch) {
+  const metadataStringified = Object.entries({ handle, branch }).reduce((acc, [key, val]) => {
+    if (val) {
+      acc.push(`${key}: ${val}`);
+    }
+    return acc;
+  }, []).join(", ");
+  return `${name} ${colors.dim(`(${metadataStringified})`)}`;
+}
+function findEnvironmentOrThrow(environments, envHandle) {
+  const matchedEnvironment = environments.find(
+    ({ handle }) => handle === envHandle
+  );
+  if (!matchedEnvironment) {
+    throw environmentNotFound("handle", envHandle);
+  }
+  return matchedEnvironment;
+}
+function findEnvironmentByBranchOrThrow(environments, branch) {
+  const matchedEnvironment = environments.find(({ branch: b }) => b === branch);
+  if (!matchedEnvironment) {
+    throw environmentNotFound("branch", branch);
+  }
+  return matchedEnvironment;
+}
+function environmentNotFound(criterion, value) {
+  return new AbortError(
+    "Environment not found",
+    `We could not find an environment matching the ${criterion} '${value}'.`,
+    [
+      [
+        "Run",
+        { command: "env list" },
+        "to view a list of available environments."
+      ]
+    ]
+  );
+}
+
+export { createEnvironmentCliChoiceLabel, findEnvironmentByBranchOrThrow, findEnvironmentOrThrow, orderEnvironmentsBySafety };

package/dist/lib/cpu-profiler.js

@@ -1,8 +1,11 @@
 import { readFile } from '@shopify/cli-kit/node/fs';
 import { Session } from 'node:inspector';
+import { handleMiniOxygenImportFail } from './mini-oxygen/common.js';
 
 async function createCpuStartupProfiler() {
-  const { createMiniOxygen } = await import('@shopify/mini-oxygen');
+  const { createMiniOxygen } = await import('@shopify/mini-oxygen/node').catch(
+    handleMiniOxygenImportFail
+  );
   const miniOxygen = createMiniOxygen({
     script: "export default {}",
     modules: true,

package/dist/lib/dev-shared.js

@@ -0,0 +1,99 @@
+import colors from '@shopify/cli-kit/node/colors';
+import { outputInfo, outputContent, outputToken } from '@shopify/cli-kit/node/output';
+import { renderInfo } from '@shopify/cli-kit/node/ui';
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { getStorefrontId, runCustomerAccountPush } from '../commands/hydrogen/customer-account/push.js';
+import { getLocalVariables } from '../lib/environment-variables.js';
+import { startTunnelPlugin, pollTunnelURL } from './tunneling.js';
+import { getConfig } from './shopify-config.js';
+import { getGraphiQLUrl } from './graphiql-url.js';
+
+function isMockShop(envVariables) {
+  return envVariables.PUBLIC_STORE_DOMAIN === "mock.shop" || // We fallback to mock.shop if the env var is falsy.
+  // When it's undefined, it might be overwritten by remote variables.
+  envVariables.PUBLIC_STORE_DOMAIN === "";
+}
+function notifyIssueWithTunnelAndMockShop(cliCommand) {
+  renderInfo({
+    headline: "Using mock.shop with `--customer-account-push` flag is not supported",
+    body: "The functionalities of this flag are disabled.",
+    nextSteps: [
+      "You may continue knowing Customer Account API (/account) interactions will fail.",
+      [
+        "Or run",
+        { command: `${cliCommand} env pull` },
+        "to link to your store credentials."
+      ]
+    ]
+  });
+}
+function getDevConfigInBackground(root, customerAccountPushFlag) {
+  return getLocalVariables(root).then(async ({ variables: localVariables }) => {
+    const customerAccountPush = customerAccountPushFlag && !isMockShop(localVariables);
+    if (customerAccountPush) {
+      await getStorefrontId(root);
+    }
+    const { shop, storefront } = await getConfig(root);
+    const storefrontId = storefront?.id;
+    return {
+      storefrontId,
+      customerAccountPush,
+      fetchRemote: !!shop && !!storefrontId,
+      localVariables,
+      storefrontTitle: storefront?.title
+    };
+  });
+}
+const TUNNEL_DOMAIN = Object.freeze({
+  ORIGINAL: ".trycloudflare.com",
+  REBRANDED: ".tryhydrogen.dev"
+});
+async function startTunnelAndPushConfig(root, cliConfig, port, storefrontId) {
+  outputInfo("\nStarting tunnel...\n");
+  const tunnel = await startTunnelPlugin(cliConfig, port, "cloudflare");
+  const host = await pollTunnelURL(tunnel).then(
+    (host2) => (
+      // Replace branded tunnel domain:
+      host2.replace(TUNNEL_DOMAIN.ORIGINAL, TUNNEL_DOMAIN.REBRANDED)
+    )
+  );
+  const cleanup = await runCustomerAccountPush({
+    path: root,
+    devOrigin: host,
+    storefrontId
+  }).catch((error) => {
+    if (error instanceof AbortError) {
+      renderInfo({
+        headline: "Customer Account Application setup update fail.",
+        body: error.tryMessage || void 0,
+        nextSteps: error.nextSteps
+      });
+    }
+  });
+  return { host, cleanup };
+}
+function getDebugBannerLine(publicInspectorPort) {
+  const isVSCode = process.env.TERM_PROGRAM === "vscode";
+  const debuggingDocsLink = "https://h2o.fyi/debugging/server-code" + (isVSCode ? "#visual-studio-code" : "#step-2-attach-a-debugger");
+  return outputContent`Debugging enabled on port ${String(
+    publicInspectorPort
+  )}.\nAttach a ${outputToken.link(
+    colors.yellow(isVSCode ? "VSCode debugger" : "debugger"),
+    debuggingDocsLink
+  )} or open DevTools in http://localhost:${String(publicInspectorPort)}.`.value;
+}
+function getUtilityBannerlines(host) {
+  host = host.endsWith("/") ? host.slice(0, -1) : host;
+  return [
+    `View GraphiQL API browser: 
+${getGraphiQLUrl({
+      host
+    })}`,
+    `View server network requests: 
+${host}/subrequest-profiler`
+  ].map((value, index) => ({
+    subdued: `${index === 0 ? "" : "\n\n"}${value}`
+  }));
+}
+
+export { TUNNEL_DOMAIN, getDebugBannerLine, getDevConfigInBackground, getUtilityBannerlines, isMockShop, notifyIssueWithTunnelAndMockShop, startTunnelAndPushConfig };

package/dist/lib/environment-variables.js

@@ -6,6 +6,8 @@ import { readAndParseDotEnv } from '@shopify/cli-kit/node/dot-env';
 import { renderWarning } from '@shopify/cli-kit/node/ui';
 import colors from '@shopify/cli-kit/node/colors';
 import { getStorefrontEnvVariables } from './graphql/admin/pull-variables.js';
+import { getStorefrontEnvironments } from './graphql/admin/list-environments.js';
+import { findEnvironmentByBranchOrThrow } from './common.js';
 import { login } from './auth.js';
 
 const createEmptyRemoteVars = () => ({
@@ -14,50 +16,63 @@ const createEmptyRemoteVars = () => ({
 });
 async function getAllEnvironmentVariables({
   root,
+  envHandle,
   envBranch,
-  fetchRemote = true
+  fetchRemote = true,
+  localVariables: inlineLocalVariables
 }) {
-  const dotEnvPath = resolvePath(root, ".env");
   const [{ remoteVariables, remoteSecrets }, { variables: localVariables }] = await Promise.all([
     // Get remote vars
-    fetchRemote ? getRemoteVariables(root, envBranch).catch((error) => {
-      renderWarning({
-        headline: "Failed to load environment variables from Shopify. The development server will still start, but the following error occurred:",
-        body: [error.message, error.tryMessage, error.nextSteps].filter(Boolean).join("\n\n")
-      });
-      return createEmptyRemoteVars();
-    }) : createEmptyRemoteVars(),
+    fetchRemote ? getRemoteVariables(root, envHandle, envBranch).catch(
+      (error) => {
+        renderWarning({
+          headline: "Failed to load environment variables from Shopify. The development server will still start, but the following error occurred:",
+          body: [error.message, error.tryMessage, error.nextSteps].filter(Boolean).join("\n\n")
+        });
+        return createEmptyRemoteVars();
+      }
+    ) : createEmptyRemoteVars(),
     // Get local vars
-    fileExists(dotEnvPath).then(
-      (exists) => exists ? readAndParseDotEnv(dotEnvPath) : { variables: {} }
-    )
+    inlineLocalVariables ? { variables: inlineLocalVariables } : getLocalVariables(root)
   ]);
   const remoteSecretKeys = Object.keys(remoteSecrets);
   const remotePublicKeys = Object.keys(remoteVariables);
   const localKeys = Object.keys(localVariables);
-  if (localKeys.length > 0 || remotePublicKeys.length + remoteSecretKeys.length > 0) {
-    outputInfo("\nEnvironment variables injected into MiniOxygen:\n");
-    outputInfo(
-      linesToColumns([
-        ...remotePublicKeys.filter((key) => !localKeys.includes(key)).map((key) => [key, "from Oxygen"]),
-        ...localKeys.map((key) => [key, "from local .env"]),
-        // Ensure secret variables always get added to the bottom of the list
-        ...remoteSecretKeys.filter((key) => !localKeys.includes(key)).map((key) => [
-          colors.dim(key),
-          colors.dim("from Oxygen (Marked as secret)")
+  function logInjectedVariables() {
+    if (localKeys.length > 0 || remotePublicKeys.length + remoteSecretKeys.length > 0) {
+      outputInfo("\nEnvironment variables injected into MiniOxygen:\n");
+      outputInfo(
+        linesToColumns([
+          ...remotePublicKeys.filter((key) => !localKeys.includes(key)).map((key) => [key, "from Oxygen"]),
+          ...localKeys.map((key) => [key, "from local .env"]),
+          // Ensure secret variables always get added to the bottom of the list
+          ...remoteSecretKeys.filter((key) => !localKeys.includes(key)).map((key) => [
+            colors.dim(key),
+            colors.dim("from Oxygen (Marked as secret)")
+          ])
         ])
-      ])
-    );
+      );
+    }
   }
   return {
-    ...remoteSecrets,
-    ...remoteVariables,
-    ...localVariables
+    logInjectedVariables,
+    remoteVariables,
+    remoteSecrets,
+    localVariables,
+    allVariables: {
+      ...remoteSecrets,
+      ...remoteVariables,
+      ...localVariables
+    }
   };
 }
-async function getRemoteVariables(root, envBranch) {
+async function getRemoteVariables(root, envHandle, envBranch) {
   const { session, config } = await login(root);
-  const envVariables = (await getStorefrontEnvVariables(session, config.storefront.id, envBranch))?.environmentVariables || [];
+  if (envBranch) {
+    const environments = (await getStorefrontEnvironments(session, config.storefront.id))?.environments || [];
+    envHandle = findEnvironmentByBranchOrThrow(environments, envBranch).handle;
+  }
+  const envVariables = (await getStorefrontEnvVariables(session, config.storefront.id, envHandle))?.environmentVariables || [];
   const remoteVariables = {};
   const remoteSecrets = {};
   for (const { key, value, isSecret } of envVariables) {
@@ -68,5 +83,11 @@ async function getRemoteVariables(root, envBranch) {
   }
   return { remoteVariables, remoteSecrets };
 }
+async function getLocalVariables(root) {
+  const dotEnvPath = resolvePath(root, ".env");
+  return await fileExists(dotEnvPath).then(
+    (exists) => exists ? readAndParseDotEnv(dotEnvPath) : { variables: {} }
+  );
+}
 
-export { getAllEnvironmentVariables };
+export { getAllEnvironmentVariables, getLocalVariables };

package/dist/lib/file.js

@@ -13,7 +13,14 @@ async function replaceFileContent(filepath, formatConfig, replacer) {
   }
   return writeFile(filepath, content);
 }
-const DEFAULT_EXTENSIONS = ["tsx", "ts", "jsx", "js", "mjs", "cjs"];
+const DEFAULT_EXTENSIONS = [
+  "tsx",
+  "ts",
+  "jsx",
+  "js",
+  "mjs",
+  "cjs"
+];
 async function findFileWithExtension(directory, fileBase, extensions = DEFAULT_EXTENSIONS) {
   const dirFiles = await readdir(directory);
   if (dirFiles.includes(fileBase)) {