@shopify/cli-hydrogen 4.2.0 → 5.0.0

package/dist/commands/hydrogen/link.test.js

@@ -2,11 +2,15 @@ import { vi, describe, beforeEach, afterEach, it, expect } from 'vitest';
 import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
 import { renderSelectPrompt, renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
 import { adminRequest } from '../../lib/graphql.js';
-import { LinkStorefrontQuery } from '../../lib/graphql/admin/link-storefront.js';
-import { getAdminSession } from '../../lib/admin-session.js';
+import { getStorefronts } from '../../lib/graphql/admin/link-storefront.js';
 import { getConfig, setStorefront } from '../../lib/shopify-config.js';
 import { linkStorefront } from './link.js';
 
+const SHOP = "my-shop";
+const ADMIN_SESSION = {
+  token: "abc123",
+  storeFqdn: SHOP
+};
 vi.mock("@shopify/cli-kit/node/ui", async () => {
   const original = await vi.importActual("@shopify/cli-kit/node/ui");
   return {
@@ -17,22 +21,22 @@ vi.mock("@shopify/cli-kit/node/ui", async () => {
 });
 vi.mock("../../lib/graphql.js");
 vi.mock("../../lib/shopify-config.js");
-vi.mock("../../lib/admin-session.js");
+vi.mock("../../lib/graphql/admin/link-storefront.js");
 vi.mock("../../lib/shop.js", () => ({
-  getHydrogenShop: () => "my-shop"
+  getHydrogenShop: () => SHOP
+}));
+vi.mock("../../lib/shell.js", () => ({
+  getCliCommand: () => "h2"
 }));
-const ADMIN_SESSION = {
-  token: "abc123",
-  storeFqdn: "my-shop"
-};
 describe("link", () => {
   const outputMock = mockAndCaptureOutput();
   beforeEach(async () => {
-    vi.mocked(getAdminSession).mockResolvedValue(ADMIN_SESSION);
-    vi.mocked(adminRequest).mockResolvedValue({
-      hydrogenStorefronts: [
+    vi.mocked(getStorefronts).mockResolvedValue({
+      adminSession: ADMIN_SESSION,
+      storefronts: [
         {
           id: "gid://shopify/HydrogenStorefront/1",
+          parsedId: "1",
           title: "Hydrogen",
           productionUrl: "https://example.com"
         }
@@ -46,26 +50,36 @@ describe("link", () => {
   });
   it("makes a GraphQL call to fetch the storefronts", async () => {
     await linkStorefront({});
-    expect(adminRequest).toHaveBeenCalledWith(
-      LinkStorefrontQuery,
-      ADMIN_SESSION
-    );
+    expect(getStorefronts).toHaveBeenCalledWith(SHOP);
   });
   it("renders a list of choices and forwards the selection to setStorefront", async () => {
     vi.mocked(renderSelectPrompt).mockResolvedValue(
       "gid://shopify/HydrogenStorefront/1"
     );
     await linkStorefront({ path: "my-path" });
-    expect(setStorefront).toHaveBeenCalledWith("my-path", {
-      id: "gid://shopify/HydrogenStorefront/1",
-      title: "Hydrogen",
-      productionUrl: "https://example.com"
-    });
+    expect(setStorefront).toHaveBeenCalledWith(
+      "my-path",
+      expect.objectContaining({
+        id: "gid://shopify/HydrogenStorefront/1",
+        title: "Hydrogen"
+      })
+    );
+  });
+  it("renders a success message", async () => {
+    vi.mocked(renderSelectPrompt).mockResolvedValue(
+      "gid://shopify/HydrogenStorefront/1"
+    );
+    await linkStorefront({ path: "my-path" });
+    expect(outputMock.info()).toMatch(/Hydrogen is now linked/g);
+    expect(outputMock.info()).toMatch(
+      /Run `h2 dev` to start your local development server and start building/g
+    );
   });
   describe("when there are no Hydrogen storefronts", () => {
     it("renders a message and returns early", async () => {
-      vi.mocked(adminRequest).mockResolvedValue({
-        hydrogenStorefronts: []
+      vi.mocked(getStorefronts).mockResolvedValue({
+        adminSession: ADMIN_SESSION,
+        storefronts: []
       });
       await linkStorefront({});
       expect(outputMock.info()).toMatch(
@@ -119,11 +133,13 @@ describe("link", () => {
     it("does not prompt the user to make a selection", async () => {
       await linkStorefront({ path: "my-path", storefront: "Hydrogen" });
       expect(renderSelectPrompt).not.toHaveBeenCalled();
-      expect(setStorefront).toHaveBeenCalledWith("my-path", {
-        id: "gid://shopify/HydrogenStorefront/1",
-        title: "Hydrogen",
-        productionUrl: "https://example.com"
-      });
+      expect(setStorefront).toHaveBeenCalledWith(
+        "my-path",
+        expect.objectContaining({
+          id: "gid://shopify/HydrogenStorefront/1",
+          title: "Hydrogen"
+        })
+      );
     });
     describe("and there is no matching storefront", () => {
       it("renders a warning message and returns early", async () => {

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

@@ -1,10 +1,10 @@
 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 { Deployment } from '../../lib/graphql/admin/list-storefronts.js';
+import '@shopify/cli-kit/node/session';
 
 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>;
@@ -16,6 +16,6 @@ interface Flags {
     shop?: string;
 }
 declare function listStorefronts({ path, shop: flagShop }: Flags): Promise<void>;
-declare function formatDeployment(deployment: Deployment | null): string;
+declare function formatDeployment(deployment: Deployment): string;
 
 export { List as default, formatDeployment, listStorefronts };

package/dist/commands/hydrogen/list.js

@@ -1,16 +1,15 @@
 import Command from '@shopify/cli-kit/node/base-command';
-import { renderTable } from '@shopify/cli-kit/node/ui';
-import { outputInfo, outputContent } from '@shopify/cli-kit/node/output';
-import { adminRequest, parseGid } from '../../lib/graphql.js';
+import { pluralize } from '@shopify/cli-kit/common/string';
+import colors from '@shopify/cli-kit/node/colors';
+import { outputNewline, outputInfo, outputContent } from '@shopify/cli-kit/node/output';
 import { commonFlags } from '../../lib/flags.js';
 import { getHydrogenShop } from '../../lib/shop.js';
-import { getAdminSession } from '../../lib/admin-session.js';
-import { ListStorefrontsQuery } from '../../lib/graphql/admin/list-storefronts.js';
+import { parseGid } from '../../lib/graphql.js';
+import { getStorefrontsWithDeployment } from '../../lib/graphql/admin/list-storefronts.js';
 import { logMissingStorefronts } from '../../lib/missing-storefronts.js';
 
 class List extends Command {
   static description = "Returns a list of Hydrogen storefronts available on a given shop.";
-  static hidden = true;
   static flags = {
     path: commonFlags.path,
     shop: commonFlags.shop
@@ -22,49 +21,44 @@ class List extends Command {
 }
 async function listStorefronts({ path, shop: flagShop }) {
   const shop = await getHydrogenShop({ path, shop: flagShop });
-  const adminSession = await getAdminSession(shop);
-  const result = await adminRequest(
-    ListStorefrontsQuery,
-    adminSession
-  );
-  const storefrontsCount = result.hydrogenStorefronts.length;
-  if (storefrontsCount > 0) {
+  const { storefronts, adminSession } = await getStorefrontsWithDeployment(shop);
+  if (storefronts.length > 0) {
+    outputNewline();
     outputInfo(
-      outputContent`Found ${storefrontsCount.toString()} Hydrogen storefronts on ${shop}:\n`.value
-    );
-    const rows = result.hydrogenStorefronts.map(
-      ({ id, title, productionUrl, currentProductionDeployment }) => ({
-        id: parseGid(id),
-        title,
-        productionUrl,
-        currentDeployment: formatDeployment(currentProductionDeployment)
-      })
+      pluralizedStorefronts({
+        storefronts,
+        shop
+      }).toString()
     );
-    renderTable({
-      rows,
-      columns: {
-        id: {
-          header: "ID"
-        },
-        title: {
-          header: "Name",
-          color: "whiteBright"
-        },
-        productionUrl: {
-          header: "Production URL"
-        },
-        currentDeployment: {
-          header: "Current deployment"
+    storefronts.forEach(
+      ({ currentProductionDeployment, id, productionUrl, title }) => {
+        outputNewline();
+        outputInfo(
+          outputContent`${colors.whiteBright(title)} ${colors.dim(
+            `(id: ${parseGid(id)})`
+          )}`.value
+        );
+        if (productionUrl) {
+          outputInfo(
+            outputContent`    ${colors.whiteBright(productionUrl)}`.value
+          );
+        }
+        if (currentProductionDeployment) {
+          outputInfo(
+            outputContent`    ${colors.dim(
+              formatDeployment(currentProductionDeployment)
+            )}`.value
+          );
         }
       }
-    });
+    );
   } else {
     logMissingStorefronts(adminSession);
   }
 }
 const dateFormat = new Intl.DateTimeFormat("default", {
   year: "numeric",
-  month: "long",
+  month: "numeric",
   day: "numeric"
 });
 function formatDeployment(deployment) {
@@ -79,5 +73,15 @@ function formatDeployment(deployment) {
   }
   return message;
 }
+const pluralizedStorefronts = ({
+  storefronts,
+  shop
+}) => {
+  return pluralize(
+    storefronts,
+    (storefronts2) => `Showing ${storefronts2.length} Hydrogen storefronts for the store ${shop}`,
+    (_storefront) => `Showing 1 Hydrogen storefront for the store ${shop}`
+  );
+};
 
 export { List as default, formatDeployment, listStorefronts };

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

@@ -1,32 +1,24 @@
 import { vi, describe, beforeEach, afterEach, it, expect } from 'vitest';
 import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
-import { ListStorefrontsQuery } from '../../lib/graphql/admin/list-storefronts.js';
-import { getAdminSession } from '../../lib/admin-session.js';
-import { adminRequest } from '../../lib/graphql.js';
+import { getStorefrontsWithDeployment } from '../../lib/graphql/admin/list-storefronts.js';
 import { listStorefronts, formatDeployment } from './list.js';
 
-vi.mock("../../lib/admin-session.js");
-vi.mock("../../lib/graphql.js", async () => {
-  const original = await vi.importActual(
-    "../../lib/graphql.js"
-  );
-  return {
-    ...original,
-    adminRequest: vi.fn()
-  };
+const SHOP_NAME = "my-shop";
+vi.mock("../../lib/graphql/admin/list-storefronts.js", async () => {
+  return { getStorefrontsWithDeployment: vi.fn() };
 });
 vi.mock("../../lib/shop.js", () => ({
-  getHydrogenShop: () => "my-shop"
+  getHydrogenShop: () => SHOP_NAME
 }));
 describe("list", () => {
   const ADMIN_SESSION = {
     token: "abc123",
-    storeFqdn: "my-shop"
+    storeFqdn: SHOP_NAME
   };
   beforeEach(async () => {
-    vi.mocked(getAdminSession).mockResolvedValue(ADMIN_SESSION);
-    vi.mocked(adminRequest).mockResolvedValue({
-      hydrogenStorefronts: []
+    vi.mocked(getStorefrontsWithDeployment).mockResolvedValue({
+      adminSession: ADMIN_SESSION,
+      storefronts: []
     });
   });
   afterEach(() => {
@@ -35,23 +27,23 @@ describe("list", () => {
   });
   it("makes a GraphQL call to fetch the storefronts", async () => {
     await listStorefronts({});
-    expect(adminRequest).toHaveBeenCalledWith(
-      ListStorefrontsQuery,
-      ADMIN_SESSION
-    );
+    expect(getStorefrontsWithDeployment).toHaveBeenCalledWith(SHOP_NAME);
   });
   describe("and there are storefronts", () => {
     beforeEach(() => {
-      vi.mocked(adminRequest).mockResolvedValue({
-        hydrogenStorefronts: [
+      vi.mocked(getStorefrontsWithDeployment).mockResolvedValue({
+        adminSession: ADMIN_SESSION,
+        storefronts: [
           {
             id: "gid://shopify/HydrogenStorefront/1",
+            parsedId: "1",
             title: "Hydrogen",
             productionUrl: "https://example.com",
             currentProductionDeployment: null
           },
           {
             id: "gid://shopify/HydrogenStorefront/2",
+            parsedId: "2",
             title: "Demo Store",
             productionUrl: "https://demo.example.com",
             currentProductionDeployment: {
@@ -67,14 +59,13 @@ describe("list", () => {
       const outputMock = mockAndCaptureOutput();
       await listStorefronts({});
       expect(outputMock.info()).toMatch(
-        /Found 2 Hydrogen storefronts on my-shop/g
-      );
-      expect(outputMock.info()).toMatch(
-        /1   Hydrogen    https:\/\/example.com/g
-      );
-      expect(outputMock.info()).toMatch(
-        /2   Demo Store  https:\/\/demo.example.com  March 22, 2023, Update README.md/g
+        /Showing 2 Hydrogen storefronts for the store my-shop/g
       );
+      expect(outputMock.info()).toMatch(/Hydrogen \(id: 1\)/g);
+      expect(outputMock.info()).toMatch(/https:\/\/example.com/g);
+      expect(outputMock.info()).toMatch(/Demo Store \(id: 2\)/g);
+      expect(outputMock.info()).toMatch(/https:\/\/demo.example.com/g);
+      expect(outputMock.info()).toMatch(/3\/22\/2023, Update README.md/g);
     });
   });
   describe("and there are no storefronts", () => {
@@ -100,17 +91,18 @@ describe("formatDeployment", () => {
       commitMessage: "Update README.md\n\nThis is a description of why the change was made."
     };
     expect(formatDeployment(deployment)).toStrictEqual(
-      "March 22, 2023, Update README.md"
+      "3/22/2023, Update README.md"
     );
   });
   describe("when there is no commit message", () => {
     it("only returns the date", () => {
       const deployment = {
         id: "gid://shopify/HydrogenStorefrontDeployment/1",
+        parsedId: "1",
         createdAt,
         commitMessage: null
       };
-      expect(formatDeployment(deployment)).toStrictEqual("March 22, 2023");
+      expect(formatDeployment(deployment)).toStrictEqual("3/22/2023");
     });
   });
 });

package/dist/commands/hydrogen/shortcut.js

@@ -1,8 +1,7 @@
 import Command from '@shopify/cli-kit/node/base-command';
 import { renderSuccess, renderFatalError } from '@shopify/cli-kit/node/ui';
-import { isWindows, isGitBash, supportsShell, hasAlias, shellWriteFile, homeFileExists, shellRunScript } from '../../lib/shell.js';
+import { ALIAS_NAME, isWindows, isGitBash, shellWriteAlias, shellRunScript } from '../../lib/shell.js';
 
-const ALIAS_NAME = "h2";
 class Shortcut extends Command {
   static description = `Creates a global \`${ALIAS_NAME}\` shortcut for the Hydrogen CLI`;
   async run() {
@@ -38,13 +37,13 @@ end
 `;
 async function createShortcutsForUnix() {
   const shells = [];
-  if (supportsShell("zsh") && (hasAlias(ALIAS_NAME, "~/.zshrc") || shellWriteFile("~/.zshrc", BASH_ZSH_COMMAND, true))) {
+  if (await shellWriteAlias("zsh", ALIAS_NAME, BASH_ZSH_COMMAND)) {
     shells.push("zsh");
   }
-  if (supportsShell("bash") && (hasAlias(ALIAS_NAME, "~/.bashrc") || shellWriteFile("~/.bashrc", BASH_ZSH_COMMAND, true))) {
+  if (await shellWriteAlias("bash", ALIAS_NAME, BASH_ZSH_COMMAND)) {
     shells.push("bash");
   }
-  if (supportsShell("fish") && await homeFileExists("~/.config/fish/functions") && shellWriteFile(`~/.config/fish/functions/${ALIAS_NAME}.fish`, FISH_FUNCTION)) {
+  if (await shellWriteAlias("fish", ALIAS_NAME, FISH_FUNCTION)) {
     shells.push("fish");
   }
   return shells;
@@ -62,10 +61,10 @@ if (!$profileContent -or $profileContent -NotLike '*Invoke-Local-H2*') {
 `;
 async function createShortcutsForWindows() {
   const shells = [];
-  if (shellRunScript(PS_APPEND_PROFILE_COMMAND, "powershell.exe")) {
+  if (await shellRunScript(PS_APPEND_PROFILE_COMMAND, "powershell.exe")) {
     shells.push("PowerShell");
   }
-  if (shellRunScript(PS_APPEND_PROFILE_COMMAND, "pwsh.exe")) {
+  if (await shellRunScript(PS_APPEND_PROFILE_COMMAND, "pwsh.exe")) {
     shells.push("PowerShell 7+");
   }
   return shells;

package/dist/commands/hydrogen/shortcut.test.js

@@ -1,7 +1,7 @@
 import { describe, beforeEach, vi, afterEach, expect, it } from 'vitest';
 import { runCreateShortcut } from './shortcut.js';
 import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
-import { supportsShell, isWindows, isGitBash } from '../../lib/shell.js';
+import { shellWriteAlias, isWindows, isGitBash } from '../../lib/shell.js';
 import { execSync, exec } from 'child_process';
 
 describe("shortcut", () => {
@@ -10,18 +10,17 @@ describe("shortcut", () => {
     vi.resetAllMocks();
     vi.mock("child_process");
     vi.mock("../../lib/shell.js", async () => {
+      const original = await vi.importActual("../../lib/shell.js");
       return {
+        ...original,
         isWindows: vi.fn(),
         isGitBash: vi.fn(),
-        supportsShell: vi.fn(),
-        shellWriteFile: () => true,
-        shellRunScript: () => true,
-        hasAlias: () => false,
-        homeFileExists: () => Promise.resolve(true)
+        shellWriteAlias: vi.fn(),
+        shellRunScript: async () => true
       };
     });
-    vi.mocked(supportsShell).mockImplementation(
-      (shell) => !isWindows() || shell === "bash"
+    vi.mocked(shellWriteAlias).mockImplementation(
+      async (shell) => !isWindows() || shell === "bash"
     );
   });
   afterEach(() => {
@@ -50,7 +49,7 @@ describe("shortcut", () => {
   });
   it("warns when not finding shells", async () => {
     vi.mocked(isWindows).mockReturnValue(false);
-    vi.mocked(supportsShell).mockReturnValue(false);
+    vi.mocked(shellWriteAlias).mockResolvedValue(false);
     await runCreateShortcut();
     expect(outputMock.info()).toBeFalsy();
     expect(outputMock.error()).toBeTruthy();

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

@@ -3,7 +3,6 @@ import Command from '@shopify/cli-kit/node/base-command';
 
 declare class Unlink 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>;
     };

package/dist/commands/hydrogen/unlink.js

@@ -1,11 +1,11 @@
 import Command from '@shopify/cli-kit/node/base-command';
-import { outputWarn, outputSuccess } from '@shopify/cli-kit/node/output';
+import { renderSuccess } from '@shopify/cli-kit/node/ui';
+import { outputWarn } from '@shopify/cli-kit/node/output';
 import { commonFlags } from '../../lib/flags.js';
 import { getConfig, unsetStorefront } from '../../lib/shopify-config.js';
 
 class Unlink extends Command {
   static description = "Unlink a local project from a Hydrogen storefront.";
-  static hidden = true;
   static flags = {
     path: commonFlags.path
   };
@@ -23,7 +23,9 @@ async function unlinkStorefront({ path }) {
   }
   const storefrontTitle = configStorefront.title;
   await unsetStorefront(actualPath);
-  outputSuccess(`You are no longer linked to ${storefrontTitle}`);
+  renderSuccess({
+    body: ["You are no longer linked to", { bold: storefrontTitle }]
+  });
 }
 
 export { Unlink as default, unlinkStorefront };

package/dist/lib/admin-session.d.ts

@@ -1,4 +1,5 @@
 import { AdminSession } from '@shopify/cli-kit/node/session';
+export { AdminSession } from '@shopify/cli-kit/node/session';
 
 declare function getAdminSession(shop: string): Promise<AdminSession>;
 

package/dist/lib/codegen.d.ts

@@ -17,9 +17,10 @@ type ProjectDirs = {
     appDirectory: string;
 };
 type CodegenOptions = ProjectDirs & {
-    configFilePath?: string;
     watch?: boolean;
+    configFilePath?: string;
+    forceSfapiVersion?: string;
 };
-declare function generateTypes({ configFilePath, watch, ...dirs }: CodegenOptions): Promise<string[]>;
+declare function generateTypes({ watch, configFilePath, forceSfapiVersion, ...dirs }: CodegenOptions): Promise<string[]>;
 
 export { generateTypes, normalizeCodegenError, spawnCodegenProcess };

package/dist/lib/codegen.js

@@ -67,14 +67,15 @@ function spawnCodegenProcess({
   return child;
 }
 async function generateTypes({
-  configFilePath,
   watch,
+  configFilePath,
+  forceSfapiVersion,
   ...dirs
 }) {
   const { config: codegenConfig } = await loadCodegenConfig({
     configFilePath,
     searchPlaces: [dirs.rootDirectory]
-  }) || generateDefaultConfig(dirs);
+  }) || generateDefaultConfig(dirs, forceSfapiVersion);
   await addHooksToHydrogenOptions(codegenConfig, dirs);
   await generate(
     {
@@ -87,10 +88,7 @@ async function generateTypes({
   );
   return Object.keys(codegenConfig.generates);
 }
-function generateDefaultConfig({
-  rootDirectory,
-  appDirectory
-}) {
+function generateDefaultConfig({ rootDirectory, appDirectory }, forceSfapiVersion) {
   const tsDefaultGlob = "*!(*.d).{ts,tsx}";
   const appDirRelative = relativePath(rootDirectory, appDirectory);
   return {
@@ -105,7 +103,22 @@ function generateDefaultConfig({
           documents: [
             tsDefaultGlob,
             joinPath(appDirRelative, "**", tsDefaultGlob)
-          ]
+          ],
+          ...!!forceSfapiVersion && {
+            presetConfig: { importTypes: false },
+            schema: {
+              [`https://hydrogen-preview.myshopify.com/api/${forceSfapiVersion.split(":")[0]}/graphql.json`]: {
+                headers: {
+                  "content-type": "application/json",
+                  "X-Shopify-Storefront-Access-Token": forceSfapiVersion.split(":")[1] ?? "3b580e70970c4528da70c98e097c2fa0"
+                }
+              }
+            },
+            config: {
+              defaultScalarType: "string",
+              scalars: { JSON: "unknown" }
+            }
+          }
         }
       }
     }

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

@@ -1,10 +1,10 @@
 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 { linesToColumns } from '@shopify/cli-kit/common/string';
+import { outputInfo } from '@shopify/cli-kit/node/output';
 import { readAndParseDotEnv } from '@shopify/cli-kit/node/dot-env';
-import { colors } from './colors.js';
+import colors from '@shopify/cli-kit/node/colors';
 import { pullRemoteEnvironmentVariables } from './pull-environment-variables.js';
-import { getConfig } from './shopify-config.js';
 
 async function combinedEnvironmentVariables({
   envBranch,
@@ -28,47 +28,30 @@ async function combinedEnvironmentVariables({
   );
   const localKeys = new Set(Object.keys(localEnvironmentVariables));
   if ([...remoteKeys, ...localKeys].length) {
-    outputInfo(
-      `${colors.bold("Injecting environment variables into MiniOxygen...")}`
-    );
+    outputInfo("\nEnvironment variables injected into MiniOxygen:\n");
   }
-  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);
+  let rows = [];
+  remoteEnvironmentVariables.filter(({ isSecret }) => !isSecret).forEach(({ key }) => {
+    if (!localKeys.has(key)) {
+      rows.push([key, "from Oxygen"]);
     }
   });
-  [...localKeys].forEach((keyName) => {
-    outputUsingKey(keyName, ".env");
+  localKeys.forEach((key) => {
+    rows.push([key, "from local .env"]);
+  });
+  remoteEnvironmentVariables.filter(({ isSecret }) => isSecret).forEach(({ key }) => {
+    if (!localKeys.has(key)) {
+      rows.push([
+        colors.dim(key),
+        colors.dim(`from Oxygen (Marked as secret)`)
+      ]);
+    }
   });
+  outputInfo(linesToColumns(rows));
   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 };