@shopify/cli-hydrogen 4.1.1 → 4.2.0

package/dist/commands/hydrogen/init.js

@@ -152,7 +152,9 @@ async function runInit(options = parseProcessFlags(process.argv, FLAG_MAP)) {
       )} to start your local development server and start building`.value
     ].filter((step) => Boolean(step)),
     reference: [
-      "Building with Hydrogen: https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development"
+      "Getting started with Hydrogen: https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development",
+      "Hydrogen project structure: https://shopify.dev/docs/custom-storefronts/hydrogen/project-structure",
+      "Setting up Hydrogen environment variables: https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables"
     ]
   });
   if (appTemplate === "demo-store") {

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

@@ -0,0 +1,24 @@
+import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
+import Command from '@shopify/cli-kit/node/base-command';
+
+declare class 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>;
+        shop: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        storefront: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+    };
+    run(): Promise<void>;
+}
+interface LinkStorefrontArguments {
+    force?: boolean;
+    path?: string;
+    shop?: string;
+    storefront?: string;
+    silent?: boolean;
+}
+declare function linkStorefront({ force, path, shop: flagShop, storefront: flagStorefront, silent, }: LinkStorefrontArguments): Promise<void>;
+
+export { LinkStorefrontArguments, Link as default, linkStorefront };

package/dist/commands/hydrogen/link.js

@@ -0,0 +1,102 @@
+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 { 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 { getConfig, setStorefront } from '../../lib/shopify-config.js';
+import { logMissingStorefronts } from '../../lib/missing-storefronts.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"
+    })
+  };
+  async run() {
+    const { flags } = await this.parse(Link);
+    await linkStorefront(flags);
+  }
+}
+async function linkStorefront({
+  force,
+  path,
+  shop: flagShop,
+  storefront: flagStorefront,
+  silent = false
+}) {
+  const shop = await getHydrogenShop({ path, shop: flagShop });
+  const { storefront: configStorefront } = await getConfig(path ?? process.cwd());
+  if (configStorefront && !force) {
+    const overwriteLink = await renderConfirmationPrompt({
+      message: `Your project is currently linked to ${configStorefront.title}. Do you want to link to a different Hydrogen storefront on Shopify?`
+    });
+    if (!overwriteLink) {
+      return;
+    }
+  }
+  const adminSession = await getAdminSession(shop);
+  const result = await adminRequest(
+    LinkStorefrontQuery,
+    adminSession
+  );
+  if (!result.hydrogenStorefronts.length) {
+    logMissingStorefronts(adminSession);
+    return;
+  }
+  let selectedStorefront;
+  if (flagStorefront) {
+    selectedStorefront = result.hydrogenStorefronts.find(
+      (storefront) => storefront.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
+      });
+      return;
+    }
+  } else {
+    const choices = result.hydrogenStorefronts.map((storefront) => ({
+      label: `${storefront.title} ${storefront.productionUrl}${storefront.id === configStorefront?.id ? " (Current)" : ""}`,
+      value: storefront.id
+    }));
+    const storefrontId = await renderSelectPrompt({
+      message: "Choose a Hydrogen storefront to link this project to:",
+      choices,
+      defaultValue: "true"
+    });
+    selectedStorefront = result.hydrogenStorefronts.find(
+      (storefront) => storefront.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}`);
+  }
+}
+
+export { Link as default, linkStorefront };

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,137 @@
+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 { getConfig, setStorefront } from '../../lib/shopify-config.js';
+import { linkStorefront } from './link.js';
+
+vi.mock("@shopify/cli-kit/node/ui", async () => {
+  const original = await vi.importActual("@shopify/cli-kit/node/ui");
+  return {
+    ...original,
+    renderConfirmationPrompt: vi.fn(),
+    renderSelectPrompt: vi.fn()
+  };
+});
+vi.mock("../../lib/graphql.js");
+vi.mock("../../lib/shopify-config.js");
+vi.mock("../../lib/admin-session.js");
+vi.mock("../../lib/shop.js", () => ({
+  getHydrogenShop: () => "my-shop"
+}));
+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: [
+        {
+          id: "gid://shopify/HydrogenStorefront/1",
+          title: "Hydrogen",
+          productionUrl: "https://example.com"
+        }
+      ]
+    });
+    vi.mocked(getConfig).mockResolvedValue({});
+  });
+  afterEach(() => {
+    vi.resetAllMocks();
+    outputMock.clear();
+  });
+  it("makes a GraphQL call to fetch the storefronts", async () => {
+    await linkStorefront({});
+    expect(adminRequest).toHaveBeenCalledWith(
+      LinkStorefrontQuery,
+      ADMIN_SESSION
+    );
+  });
+  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"
+    });
+  });
+  describe("when there are no Hydrogen storefronts", () => {
+    it("renders a message and returns early", async () => {
+      vi.mocked(adminRequest).mockResolvedValue({
+        hydrogenStorefronts: []
+      });
+      await linkStorefront({});
+      expect(outputMock.info()).toMatch(
+        /There are no Hydrogen storefronts on your Shop/g
+      );
+      expect(renderSelectPrompt).not.toHaveBeenCalled();
+      expect(setStorefront).not.toHaveBeenCalled();
+    });
+  });
+  describe("when no storefront gets selected", () => {
+    it("does not call setStorefront", async () => {
+      vi.mocked(renderSelectPrompt).mockResolvedValue("");
+      await linkStorefront({});
+      expect(setStorefront).not.toHaveBeenCalled();
+    });
+  });
+  describe("when a linked storefront already exists", () => {
+    beforeEach(() => {
+      vi.mocked(getConfig).mockResolvedValue({
+        storefront: {
+          id: "gid://shopify/HydrogenStorefront/2",
+          title: "Existing Link"
+        }
+      });
+    });
+    it("prompts the user to confirm", async () => {
+      vi.mocked(renderConfirmationPrompt).mockResolvedValue(true);
+      await linkStorefront({});
+      expect(renderConfirmationPrompt).toHaveBeenCalledWith({
+        message: expect.stringMatching(
+          /Do you want to link to a different Hydrogen storefront on Shopify\?/
+        )
+      });
+    });
+    describe("and the user cancels", () => {
+      it("returns early", async () => {
+        vi.mocked(renderConfirmationPrompt).mockResolvedValue(false);
+        await linkStorefront({});
+        expect(adminRequest).not.toHaveBeenCalled();
+        expect(setStorefront).not.toHaveBeenCalled();
+      });
+    });
+    describe("and the --force flag is provided", () => {
+      it("does not prompt the user to confirm", async () => {
+        await linkStorefront({ force: true });
+        expect(renderConfirmationPrompt).not.toHaveBeenCalled();
+      });
+    });
+  });
+  describe("when the --storefront flag is provided", () => {
+    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"
+      });
+    });
+    describe("and there is no matching storefront", () => {
+      it("renders a warning message and returns early", async () => {
+        const outputMock2 = mockAndCaptureOutput();
+        await linkStorefront({ storefront: "Does not exist" });
+        expect(setStorefront).not.toHaveBeenCalled();
+        expect(outputMock2.warn()).toMatch(/Couldn\'t find Does not exist/g);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,21 @@
+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';
+
+declare class List extends Command {
+    static description: string;
+    static hidden: boolean;
+    static flags: {
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        shop: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+    };
+    run(): Promise<void>;
+}
+interface Flags {
+    path?: string;
+    shop?: string;
+}
+declare function listStorefronts({ path, shop: flagShop }: Flags): Promise<void>;
+declare function formatDeployment(deployment: Deployment | null): string;
+
+export { List as default, formatDeployment, listStorefronts };

package/dist/commands/hydrogen/list.js

@@ -0,0 +1,83 @@
+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 { 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 { 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
+  };
+  async run() {
+    const { flags } = await this.parse(List);
+    await listStorefronts(flags);
+  }
+}
+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) {
+    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)
+      })
+    );
+    renderTable({
+      rows,
+      columns: {
+        id: {
+          header: "ID"
+        },
+        title: {
+          header: "Name",
+          color: "whiteBright"
+        },
+        productionUrl: {
+          header: "Production URL"
+        },
+        currentDeployment: {
+          header: "Current deployment"
+        }
+      }
+    });
+  } else {
+    logMissingStorefronts(adminSession);
+  }
+}
+const dateFormat = new Intl.DateTimeFormat("default", {
+  year: "numeric",
+  month: "long",
+  day: "numeric"
+});
+function formatDeployment(deployment) {
+  let message = "";
+  if (!deployment) {
+    return message;
+  }
+  message += dateFormat.format(new Date(deployment.createdAt));
+  if (deployment.commitMessage) {
+    const title = deployment.commitMessage.split(/\n/)[0];
+    message += `, ${title}`;
+  }
+  return message;
+}
+
+export { List as default, formatDeployment, listStorefronts };

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,116 @@
+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 { 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()
+  };
+});
+vi.mock("../../lib/shop.js", () => ({
+  getHydrogenShop: () => "my-shop"
+}));
+describe("list", () => {
+  const ADMIN_SESSION = {
+    token: "abc123",
+    storeFqdn: "my-shop"
+  };
+  beforeEach(async () => {
+    vi.mocked(getAdminSession).mockResolvedValue(ADMIN_SESSION);
+    vi.mocked(adminRequest).mockResolvedValue({
+      hydrogenStorefronts: []
+    });
+  });
+  afterEach(() => {
+    vi.resetAllMocks();
+    mockAndCaptureOutput().clear();
+  });
+  it("makes a GraphQL call to fetch the storefronts", async () => {
+    await listStorefronts({});
+    expect(adminRequest).toHaveBeenCalledWith(
+      ListStorefrontsQuery,
+      ADMIN_SESSION
+    );
+  });
+  describe("and there are storefronts", () => {
+    beforeEach(() => {
+      vi.mocked(adminRequest).mockResolvedValue({
+        hydrogenStorefronts: [
+          {
+            id: "gid://shopify/HydrogenStorefront/1",
+            title: "Hydrogen",
+            productionUrl: "https://example.com",
+            currentProductionDeployment: null
+          },
+          {
+            id: "gid://shopify/HydrogenStorefront/2",
+            title: "Demo Store",
+            productionUrl: "https://demo.example.com",
+            currentProductionDeployment: {
+              id: "gid://shopify/HydrogenStorefrontDeployment/1",
+              createdAt: "2023-03-22T22:28:38Z",
+              commitMessage: "Update README.md"
+            }
+          }
+        ]
+      });
+    });
+    it("renders a list of storefronts", async () => {
+      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
+      );
+    });
+  });
+  describe("and there are no storefronts", () => {
+    it("prompts the user to create a storefront", async () => {
+      const outputMock = mockAndCaptureOutput();
+      await listStorefronts({});
+      expect(outputMock.info()).toMatch(
+        /There are no Hydrogen storefronts on your Shop\./g
+      );
+      expect(outputMock.info()).toMatch(/Create a new Hydrogen storefront/g);
+      expect(outputMock.info()).toMatch(
+        /https:\/\/my\-shop\/admin\/custom_storefronts\/new/g
+      );
+    });
+  });
+});
+describe("formatDeployment", () => {
+  const createdAt = "2023-03-22T22:28:38Z";
+  it("returns a string combined with a date and commit message", () => {
+    const deployment = {
+      id: "gid://shopify/HydrogenStorefrontDeployment/1",
+      createdAt,
+      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"
+    );
+  });
+  describe("when there is no commit message", () => {
+    it("only returns the date", () => {
+      const deployment = {
+        id: "gid://shopify/HydrogenStorefrontDeployment/1",
+        createdAt,
+        commitMessage: null
+      };
+      expect(formatDeployment(deployment)).toStrictEqual("March 22, 2023");
+    });
+  });
+});

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

@@ -0,0 +1,17 @@
+import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
+import Command from '@shopify/cli-kit/node/base-command';
+
+declare class 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>;
+    };
+    run(): Promise<void>;
+}
+interface LinkFlags {
+    path?: string;
+}
+declare function unlinkStorefront({ path }: LinkFlags): Promise<void>;
+
+export { LinkFlags, Unlink as default, unlinkStorefront };

package/dist/commands/hydrogen/unlink.js

@@ -0,0 +1,29 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { outputWarn, outputSuccess } 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
+  };
+  async run() {
+    const { flags } = await this.parse(Unlink);
+    await unlinkStorefront(flags);
+  }
+}
+async function unlinkStorefront({ path }) {
+  const actualPath = path ?? process.cwd();
+  const { storefront: configStorefront } = await getConfig(actualPath);
+  if (!configStorefront) {
+    outputWarn("This project isn't linked to a Hydrogen storefront.");
+    return;
+  }
+  const storefrontTitle = configStorefront.title;
+  await unsetStorefront(actualPath);
+  outputSuccess(`You are no longer linked to ${storefrontTitle}`);
+}
+
+export { Unlink as default, unlinkStorefront };

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,36 @@
+import { vi, describe, afterEach, it, expect } from 'vitest';
+import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
+import { getConfig, unsetStorefront } from '../../lib/shopify-config.js';
+import { unlinkStorefront } from './unlink.js';
+
+vi.mock("../../lib/shopify-config.js");
+describe("link", () => {
+  const outputMock = mockAndCaptureOutput();
+  afterEach(() => {
+    vi.resetAllMocks();
+    outputMock.clear();
+  });
+  it("removes the storefront information from the config file", async () => {
+    vi.mocked(getConfig).mockResolvedValue({
+      storefront: {
+        id: "gid://shopify/HydrogenStorefront/2",
+        title: "Existing Link"
+      }
+    });
+    await unlinkStorefront({ path: "my-path" });
+    expect(unsetStorefront).toHaveBeenCalledWith("my-path");
+    expect(outputMock.output()).toMatch(
+      /You are no longer linked to Existing Link/g
+    );
+  });
+  describe("when there is no existing storefront link", () => {
+    it("renders a warning message and returns early", async () => {
+      vi.mocked(getConfig).mockResolvedValue({});
+      await unlinkStorefront({});
+      expect(outputMock.output()).toMatch(
+        /This project isn\'t linked to a Hydrogen storefront\./g
+      );
+      expect(unsetStorefront).not.toHaveBeenCalled();
+    });
+  });
+});