@shopify/cli-hydrogen 4.2.1 → 5.0.1

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

@@ -1,15 +1,17 @@
+import { diffLines } from 'diff';
 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 { renderInfo, renderConfirmationPrompt, renderWarning, renderSuccess } from '@shopify/cli-kit/node/ui';
+import { outputContent, outputToken } from '@shopify/cli-kit/node/output';
+import { fileExists, readFile, writeFile } from '@shopify/cli-kit/node/fs';
 import { resolvePath } from '@shopify/cli-kit/node/path';
+import { patchEnvFile } from '@shopify/cli-kit/node/dot-env';
+import colors from '@shopify/cli-kit/node/colors';
 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 {
+class EnvPull 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,
@@ -17,7 +19,7 @@ class Pull extends Command {
     force: commonFlags.force
   };
   async run() {
-    const { flags } = await this.parse(Pull);
+    const { flags } = await this.parse(EnvPull);
     await pullVariables({ ...flagsToCamelObject(flags) });
   }
 }
@@ -36,33 +38,50 @@ async function pullVariables({
   if (!environmentVariables.length) {
     return;
   }
+  const fileName = colors.whiteBright(`.env`);
   const dotEnvPath = resolvePath(actualPath, ".env");
+  const fetchedEnv = {};
+  environmentVariables.forEach(({ isSecret, key, value }) => {
+    fetchedEnv[key] = isSecret ? `""` : value;
+  });
   if (await fileExists(dotEnvPath) && !force) {
+    const existingEnv = await readFile(dotEnvPath);
+    const patchedEnv = patchEnvFile(existingEnv, fetchedEnv);
+    if (existingEnv === patchedEnv) {
+      renderInfo({
+        body: `No changes to your ${fileName} file`
+      });
+      return;
+    }
+    const diff = diffLines(existingEnv, patchedEnv);
     const overwrite = await renderConfirmationPrompt({
-      message: "Warning: .env file already exists. Do you want to overwrite it?"
+      confirmationMessage: `Yes, confirm changes`,
+      cancellationMessage: `No, make changes later`,
+      message: outputContent`We'll make the following changes to your .env file:
+
+${outputToken.linesDiff(diff)}
+Continue?`.value
     });
     if (!overwrite) {
       return;
     }
+    await writeFile(dotEnvPath, patchedEnv);
+  } else {
+    const newEnv = patchEnvFile(null, fetchedEnv);
+    await writeFile(dotEnvPath, newEnv);
   }
-  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";
+  const hasSecretVariables = environmentVariables.some(
+    ({ isSecret }) => isSecret
+  );
   if (hasSecretVariables) {
     const { storefront: configStorefront } = await getConfig(actualPath);
-    outputWarn(
-      `${configStorefront.title} contains environment variables marked as secret, so their values weren\u2019t pulled.`
-    );
+    renderWarning({
+      body: `${configStorefront.title} contains environment variables marked as secret, so their values weren\u2019t pulled.`
+    });
   }
-  await writeFile(dotEnvPath, contents);
-  outputSuccess("Updated .env");
+  renderSuccess({
+    body: ["Changes have been made to your", { filePath: fileName }, "file"]
+  });
 }
 
-export { Pull as default, pullVariables };
+export { EnvPull as default, pullVariables };

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

@@ -69,7 +69,7 @@ describe("pullVariables", () => {
       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'
+        'PUBLIC_API_TOKEN=abc123\nPRIVATE_API_TOKEN=""'
       );
     });
   });
@@ -77,8 +77,18 @@ describe("pullVariables", () => {
     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."
+      expect(outputMock.warn()).toMatch(
+        /Existing Link contains environment variables marked as secret, so their/
+      );
+      expect(outputMock.warn()).toMatch(/values weren’t pulled./);
+    });
+  });
+  it("renders a success message", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      const outputMock = mockAndCaptureOutput();
+      await pullVariables({ path: tmpDir });
+      expect(outputMock.info()).toMatch(
+        /Changes have been made to your \.env file/
       );
     });
   });
@@ -92,8 +102,10 @@ describe("pullVariables", () => {
         await writeFile(filePath, "EXISTING_TOKEN=1");
         await pullVariables({ path: tmpDir });
         expect(renderConfirmationPrompt).toHaveBeenCalledWith({
+          confirmationMessage: `Yes, confirm changes`,
+          cancellationMessage: `No, make changes later`,
           message: expect.stringMatching(
-            /Warning: \.env file already exists\. Do you want to overwrite it\?/
+            /We'll make the following changes to your \.env file:/
           )
         });
       });

package/dist/commands/hydrogen/init.js

@@ -1,4 +1,6 @@
 import Command from '@shopify/cli-kit/node/base-command';
+import { readdir } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
 import { packageManagerUsedForCreating, installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
 import { renderFatalError, renderSelectPrompt, renderTextPrompt, renderConfirmationPrompt, renderInfo, renderTasks, renderSuccess } from '@shopify/cli-kit/node/ui';
 import { Flags } from '@oclif/core';
@@ -9,8 +11,7 @@ import { commonFlags, flagsToCamelObject, parseProcessFlags } from '../../lib/fl
 import { transpileProject } from '../../lib/transpile-ts.js';
 import { getLatestTemplates } from '../../lib/template-downloader.js';
 import { checkHydrogenVersion } from '../../lib/check-version.js';
-import { readdir } from 'fs/promises';
-import { fileURLToPath } from 'url';
+import { supressNodeExperimentalWarnings } from '../../lib/process.js';
 
 const STARTER_TEMPLATES = ["hello-world", "demo-store"];
 const FLAG_MAP = { f: "force" };
@@ -167,16 +168,5 @@ async function runInit(options = parseProcessFlags(process.argv, FLAG_MAP)) {
 async function projectExists(projectDir) {
   return await fileExists(projectDir) && await isDirectory(projectDir) && (await readdir(projectDir)).length > 0;
 }
-function supressNodeExperimentalWarnings() {
-  const warningListener = process.listeners("warning")[0];
-  if (warningListener) {
-    process.removeAllListeners("warning");
-    process.prependListener("warning", (warning) => {
-      if (warning.name != "ExperimentalWarning") {
-        warningListener(warning);
-      }
-    });
-  }
-}
 
 export { Init as default, runInit };

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

@@ -3,7 +3,6 @@ import Command from '@shopify/cli-kit/node/base-command';
 
 declare class Link extends Command {
     static description: string;
-    static hidden: boolean;
     static flags: {
         force: _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>;

package/dist/commands/hydrogen/link.js

@@ -1,25 +1,20 @@
 import { Flags } from '@oclif/core';
 import Command from '@shopify/cli-kit/node/base-command';
-import { renderConfirmationPrompt, renderWarning, renderSelectPrompt } from '@shopify/cli-kit/node/ui';
-import { outputContent, outputToken, outputSuccess, outputInfo } from '@shopify/cli-kit/node/output';
-import { adminRequest, parseGid } from '../../lib/graphql.js';
+import { renderConfirmationPrompt, renderWarning, renderSelectPrompt, renderSuccess } from '@shopify/cli-kit/node/ui';
 import { commonFlags } from '../../lib/flags.js';
 import { getHydrogenShop } from '../../lib/shop.js';
-import { getAdminSession } from '../../lib/admin-session.js';
-import { hydrogenStorefrontUrl } from '../../lib/admin-urls.js';
-import { LinkStorefrontQuery } from '../../lib/graphql/admin/link-storefront.js';
+import { getStorefronts } from '../../lib/graphql/admin/link-storefront.js';
 import { getConfig, setStorefront } from '../../lib/shopify-config.js';
 import { logMissingStorefronts } from '../../lib/missing-storefronts.js';
+import { getCliCommand } from '../../lib/shell.js';
 
 class Link extends Command {
   static description = "Link a local project to one of your shop's Hydrogen storefronts.";
-  static hidden = true;
   static flags = {
     force: commonFlags.force,
     path: commonFlags.path,
     shop: commonFlags.shop,
     storefront: Flags.string({
-      char: "h",
       description: `The name of a Hydrogen Storefront (e.g. "Jane's Apparel")`,
       env: "SHOPIFY_HYDROGEN_STOREFRONT"
     })
@@ -46,56 +41,59 @@ async function linkStorefront({
       return;
     }
   }
-  const adminSession = await getAdminSession(shop);
-  const result = await adminRequest(
-    LinkStorefrontQuery,
-    adminSession
-  );
-  if (!result.hydrogenStorefronts.length) {
+  const { storefronts, adminSession } = await getStorefronts(shop);
+  if (storefronts.length === 0) {
     logMissingStorefronts(adminSession);
     return;
   }
   let selectedStorefront;
+  const cliCommand = await getCliCommand();
   if (flagStorefront) {
-    selectedStorefront = result.hydrogenStorefronts.find(
-      (storefront) => storefront.title === flagStorefront
+    selectedStorefront = storefronts.find(
+      ({ title }) => title === flagStorefront
     );
     if (!selectedStorefront) {
       renderWarning({
         headline: `Couldn't find ${flagStorefront}`,
-        body: outputContent`There's no storefront matching ${flagStorefront} on your ${shop} shop. To see all available Hydrogen storefronts, run ${outputToken.genericShellCommand(
-          `npx shopify hydrogen list`
-        )}`.value
+        body: [
+          "There's no storefront matching",
+          { userInput: flagStorefront },
+          "on your",
+          { userInput: shop },
+          "shop. To see all available Hydrogen storefronts, run",
+          {
+            command: `${cliCommand} list`
+          }
+        ]
       });
       return;
     }
   } else {
-    const choices = result.hydrogenStorefronts.map((storefront) => ({
-      label: `${storefront.title} ${storefront.productionUrl}${storefront.id === configStorefront?.id ? " (Current)" : ""}`,
-      value: storefront.id
+    const choices = storefronts.map(({ id, title, productionUrl }) => ({
+      value: id,
+      label: `${title} (${productionUrl})`
     }));
     const storefrontId = await renderSelectPrompt({
-      message: "Choose a Hydrogen storefront to link this project to:",
-      choices,
-      defaultValue: "true"
+      message: "Choose a Hydrogen storefront to link",
+      choices
     });
-    selectedStorefront = result.hydrogenStorefronts.find(
-      (storefront) => storefront.id === storefrontId
-    );
+    selectedStorefront = storefronts.find(({ id }) => id === storefrontId);
   }
   if (!selectedStorefront) {
     return;
   }
   await setStorefront(path ?? process.cwd(), selectedStorefront);
-  outputSuccess(`Linked to ${selectedStorefront.title}`);
   if (!silent) {
-    outputInfo(
-      `Admin URL: ${hydrogenStorefrontUrl(
-        adminSession,
-        parseGid(selectedStorefront.id)
-      )}`
-    );
-    outputInfo(`Site URL: ${selectedStorefront.productionUrl}`);
+    renderSuccess({
+      body: [{ userInput: selectedStorefront.title }, "is now linked"],
+      nextSteps: [
+        [
+          "Run",
+          { command: `${cliCommand} dev` },
+          "to start your local development server and start building"
+        ]
+      ]
+    });
   }
 }
 

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 };