@shopify/cli-hydrogen 5.0.2 → 5.1.0

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

@@ -1,4 +1,4 @@
-import { adminRequest } from '../../graphql.js';
+import { adminRequest } from './client.js';
 
 const ListEnvironmentsQuery = `#graphql
   query ListStorefronts($id: ID!) {
@@ -22,7 +22,7 @@ async function getStorefrontEnvironments(adminSession, storefrontId) {
     adminSession,
     { id: storefrontId }
   );
-  return { storefront: hydrogenStorefront };
+  return hydrogenStorefront;
 }
 
 export { getStorefrontEnvironments };

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

@@ -0,0 +1,44 @@
+import { vi, describe, afterEach, it, expect } from 'vitest';
+import { adminRequest } from './client.js';
+import { getStorefrontEnvironments } from './list-environments.js';
+
+vi.mock("./client.js");
+describe("getStorefrontEnvironments", () => {
+  const ADMIN_SESSION = {
+    token: "abc123",
+    storeFqdn: "my-shop.myshopify.com"
+  };
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+  it("calls the graphql client and returns Hydrogen storefronts", async () => {
+    const mockedResponse = {
+      hydrogenStorefront: {
+        id: "gid://shopify/HydrogenStorefront/123",
+        productionUrl: "https://...",
+        environments: [
+          {
+            createdAt: "2021-01-01T00:00:00Z",
+            id: "e123",
+            name: "Staging",
+            type: "CUSTOM",
+            branch: "staging",
+            url: "https://..."
+          }
+        ]
+      }
+    };
+    vi.mocked(adminRequest).mockResolvedValue(
+      mockedResponse
+    );
+    const id = "123";
+    await expect(
+      getStorefrontEnvironments(ADMIN_SESSION, id)
+    ).resolves.toStrictEqual(mockedResponse.hydrogenStorefront);
+    expect(adminRequest).toHaveBeenCalledWith(
+      expect.stringMatching(/^#graphql.+query.+hydrogenStorefront\(/s),
+      ADMIN_SESSION,
+      { id }
+    );
+  });
+});

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

@@ -1,5 +1,5 @@
-import { adminRequest, parseGid } from '../../graphql.js';
-import { getAdminSession } from '../../admin-session.js';
+import { adminRequest } from './client.js';
+import { parseGid } from '../../gid.js';
 
 const ListStorefrontsQuery = `#graphql
   query ListStorefronts {
@@ -15,19 +15,15 @@ const ListStorefrontsQuery = `#graphql
     }
   }
 `;
-async function getStorefrontsWithDeployment(shop) {
-  const adminSession = await getAdminSession(shop);
+async function getStorefrontsWithDeployment(adminSession) {
   const { hydrogenStorefronts } = await adminRequest(
     ListStorefrontsQuery,
     adminSession
   );
-  return {
-    adminSession,
-    storefronts: hydrogenStorefronts.map((storefront) => ({
-      ...storefront,
-      parsedId: parseGid(storefront.id)
-    }))
-  };
+  return hydrogenStorefronts.map((storefront) => ({
+    ...storefront,
+    parsedId: parseGid(storefront.id)
+  }));
 }
 
 export { getStorefrontsWithDeployment };

package/dist/lib/graphql/admin/list-storefronts.test.js

@@ -0,0 +1,44 @@
+import { vi, describe, afterEach, it, expect } from 'vitest';
+import { adminRequest } from './client.js';
+import { getStorefrontsWithDeployment } from './list-storefronts.js';
+
+vi.mock("./client.js");
+describe("getStorefrontsWithDeployment", () => {
+  const ADMIN_SESSION = {
+    token: "abc123",
+    storeFqdn: "my-shop.myshopify.com"
+  };
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+  it("calls the graphql client and returns Hydrogen storefronts", async () => {
+    const mockedResponse = {
+      hydrogenStorefronts: [
+        {
+          id: "gid://shopify/HydrogenStorefront/123",
+          title: "title",
+          currentProductionDeployment: {
+            id: "d123",
+            createdAt: "2021-01-01T00:00:00Z",
+            commitMessage: null
+          }
+        }
+      ]
+    };
+    vi.mocked(adminRequest).mockResolvedValue(
+      mockedResponse
+    );
+    await expect(
+      getStorefrontsWithDeployment(ADMIN_SESSION)
+    ).resolves.toStrictEqual([
+      {
+        ...mockedResponse.hydrogenStorefronts[0],
+        parsedId: "123"
+      }
+    ]);
+    expect(adminRequest).toHaveBeenCalledWith(
+      expect.stringMatching(/^#graphql.+query.+hydrogenStorefronts\s*{/s),
+      ADMIN_SESSION
+    );
+  });
+});

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

@@ -1,4 +1,4 @@
-import { adminRequest } from '../../graphql.js';
+import { adminRequest } from './client.js';
 
 const PullVariablesQuery = `#graphql
   query PullVariables($id: ID!, $branch: String) {
@@ -22,7 +22,7 @@ async function getStorefrontEnvVariables(adminSession, storefrontId, envBranch)
       branch: envBranch
     }
   );
-  return { storefront: hydrogenStorefront };
+  return hydrogenStorefront;
 }
 
-export { PullVariablesQuery, getStorefrontEnvVariables };
+export { getStorefrontEnvVariables };

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

@@ -0,0 +1,37 @@
+import { vi, describe, afterEach, it, expect } from 'vitest';
+import { adminRequest } from './client.js';
+import { getStorefrontEnvVariables } from './pull-variables.js';
+
+vi.mock("./client.js");
+describe("getStorefrontEnvVariables", () => {
+  const ADMIN_SESSION = {
+    token: "abc123",
+    storeFqdn: "my-shop.myshopify.com"
+  };
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+  it("calls the graphql client and returns Hydrogen storefronts", async () => {
+    const mockedResponse = {
+      hydrogenStorefront: {
+        id: "123",
+        environmentVariables: [
+          { id: "123", isSecret: false, key: "key", value: "value" }
+        ]
+      }
+    };
+    vi.mocked(adminRequest).mockResolvedValue(
+      mockedResponse
+    );
+    const id = "123";
+    const branch = "staging";
+    await expect(
+      getStorefrontEnvVariables(ADMIN_SESSION, id, branch)
+    ).resolves.toStrictEqual(mockedResponse.hydrogenStorefront);
+    expect(adminRequest).toHaveBeenCalledWith(
+      expect.stringMatching(/^#graphql.+query.+hydrogenStorefront\(/s),
+      ADMIN_SESSION,
+      { id, branch }
+    );
+  });
+});

package/dist/lib/graphql/business-platform/user-account.js

@@ -0,0 +1,83 @@
+import { businessPlatformRequest } from '@shopify/cli-kit/node/api/business-platform';
+import { AbortError } from '@shopify/cli-kit/node/error';
+
+const CurrentUserAccountQuery = `#graphql
+  query currentUserAccount {
+    currentUserAccount {
+      email
+      organizations(first: 100) {
+        edges {
+          node {
+            id
+            name
+            categories(handles: STORES) {
+              destinations(first: 100) {
+                edges {
+                  node {
+                    ...destinationFields
+                  }
+                }
+                pageInfo {
+                  endCursor
+                  hasNextPage
+                }
+              }
+            }
+          }
+        }
+        pageInfo {
+          endCursor
+          hasNextPage
+        }
+      }
+      orphanDestinations {
+        categories(handles: STORES) {
+          destinations(first: 100) {
+            edges {
+              node {
+                ...destinationFields
+              }
+            }
+            pageInfo {
+              endCursor
+              hasNextPage
+            }
+          }
+        }
+      }
+    }
+  }
+
+  fragment destinationFields on Destination {
+    name
+    status
+    webUrl
+  }
+`;
+async function getUserAccount(token) {
+  const { currentUserAccount } = await businessPlatformRequest(
+    CurrentUserAccountQuery,
+    token
+  );
+  if (!currentUserAccount) {
+    throw new AbortError("Unable to get current user account");
+  }
+  return {
+    email: currentUserAccount.email,
+    activeShops: [
+      ...currentUserAccount.organizations?.edges?.flatMap(
+        (edge) => edge.node?.categories.flatMap(
+          (category) => category?.destinations?.edges?.map((edge2) => edge2.node)
+        )
+      ) ?? [],
+      ...currentUserAccount.orphanDestinations?.categories?.flatMap(
+        (category) => category.destinations?.edges?.map((edge) => edge.node)
+      ) ?? []
+    ].filter(({ status }) => status === "ACTIVE").map(({ name, webUrl }) => ({
+      name,
+      fqdn: webUrl.replace(/^https?:\/\//, "").replace(/\/admin$/, "")
+    }))
+  };
+}
+
+export { getUserAccount };

package/dist/lib/graphql/business-platform/user-account.test.js

@@ -0,0 +1,80 @@
+import { vi, describe, afterEach, it, expect } from 'vitest';
+import { businessPlatformRequest } from '@shopify/cli-kit/node/api/business-platform';
+import { getUserAccount } from './user-account.js';
+
+vi.mock("@shopify/cli-kit/node/api/business-platform");
+describe("getUserAccount", () => {
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+  it("fetches the current user account and merges destinations", async () => {
+    vi.mocked(businessPlatformRequest).mockResolvedValue({
+      currentUserAccount: {
+        email: "email",
+        organizations: {
+          edges: [
+            {
+              node: {
+                id: "gid://shopify/Organization/123",
+                name: "name",
+                categories: [
+                  {
+                    destinations: {
+                      edges: [
+                        {
+                          node: {
+                            name: "n1",
+                            webUrl: "w1",
+                            status: "ACTIVE"
+                          }
+                        }
+                      ],
+                      pageInfo: {}
+                    }
+                  }
+                ]
+              }
+            }
+          ],
+          pageInfo: {}
+        },
+        orphanDestinations: {
+          categories: [
+            {
+              destinations: {
+                edges: [
+                  {
+                    node: {
+                      name: "n2",
+                      webUrl: "w2",
+                      status: "NOPE"
+                    }
+                  },
+                  {
+                    node: {
+                      name: "n3",
+                      webUrl: "w3",
+                      status: "ACTIVE"
+                    }
+                  }
+                ],
+                pageInfo: {}
+              }
+            }
+          ]
+        }
+      }
+    });
+    await expect(getUserAccount("123")).resolves.toStrictEqual({
+      email: "email",
+      activeShops: [
+        { name: "n1", fqdn: "w1" },
+        { name: "n3", fqdn: "w3" }
+      ]
+    });
+    expect(businessPlatformRequest).toHaveBeenCalledWith(
+      expect.stringMatching(/^#graphql.+query.+currentUserAccount\s*{/s),
+      "123"
+    );
+  });
+});

package/dist/lib/log.js

@@ -1,21 +1,197 @@
-let isFirstWorkerReload = true;
+import { renderFatalError, renderWarning, renderInfo } from '@shopify/cli-kit/node/ui';
+import { BugError } from '@shopify/cli-kit/node/error';
+import { outputContent, outputToken } from '@shopify/cli-kit/node/output';
+import colors from '@shopify/cli-kit/node/colors';
+
+const originalConsole = { ...console };
+const methodsReplaced = /* @__PURE__ */ new Set();
+const addedReplacers = /* @__PURE__ */ new Set();
+const messageReplacers = [];
+function resetAllLogs() {
+  Object.assign(console, originalConsole);
+  methodsReplaced.clear();
+}
+function addMessageReplacers(key, ...items) {
+  if (!addedReplacers.has(key)) {
+    addedReplacers.add(key);
+    messageReplacers.push(...items);
+  }
+}
+const printedMessages = /* @__PURE__ */ new Set();
+function debounceMessage(args, debounceFor) {
+  const key = args.map((item) => {
+    const message = item?.message ?? item;
+    return typeof message === "string" ? message : "";
+  }).filter(Boolean).join("");
+  if (printedMessages.has(key))
+    return true;
+  printedMessages.add(key);
+  if (debounceFor !== true) {
+    setTimeout(() => printedMessages.delete(key), debounceFor ?? 1e3);
+  }
+  return false;
+}
+function injectLogReplacer(method, debouncer) {
+  if (!methodsReplaced.has(method)) {
+    methodsReplaced.add(method);
+    console[method] = (...args) => {
+      if (debounceMessage(args, debouncer?.(args)))
+        return;
+      const replacer = messageReplacers.find(([matcher]) => matcher(args))?.[1];
+      if (!replacer)
+        return originalConsole[method](...args);
+      const result = replacer(args);
+      if (result)
+        return originalConsole[method](...result);
+    };
+  }
+}
 function muteDevLogs({ workerReload } = {}) {
-  const log = console.log.bind(console);
-  console.log = (first, ...rest) => {
-    if (typeof first === "string" && first.includes("[mf:")) {
+  injectLogReplacer("log");
+  let isFirstWorkerReload = true;
+  addMessageReplacers("dev", [
+    ([first]) => typeof first === "string" && first.includes("[mf:"),
+    (args) => {
+      const first = args[0];
       if (workerReload !== false && first.includes("Worker reloaded")) {
-        if (isFirstWorkerReload)
+        if (isFirstWorkerReload) {
           isFirstWorkerReload = false;
-        else
-          return log(first.replace("[mf:inf] ", "\u{1F504} ") + "\n", ...rest);
+          return;
+        }
+        return [first.replace("[mf:inf] ", "\u{1F504} ") + "\n", ...args.slice(1)];
       }
       if (!first.includes("[mf:err]")) {
         return;
       }
     }
-    return log(first, ...rest);
+  ]);
+}
+const originalWrite = process.stdout.write;
+function muteAuthLogs({
+  onPressKey,
+  onKeyTimeout
+}) {
+  if (process.stdout.write === originalWrite) {
+    const write = originalWrite.bind(process.stdout);
+    process.stdout.write = (item, cb) => {
+      if (typeof item !== "string")
+        return write(item, cb);
+      const replacer = messageReplacers.find(
+        ([matcher]) => matcher([item])
+      )?.[1];
+      if (!replacer)
+        return write(item, cb);
+      const result = replacer([item]);
+      if (result)
+        return write(result[0], cb);
+    };
+  }
+  addMessageReplacers(
+    "auth",
+    [
+      ([first]) => typeof first === "string" && first.includes("Auto-open"),
+      ([first]) => {
+        const content = first.replace(" to Shopify Partners", "");
+        const link = content.match(/(https?:\/\/.*)Log in/)?.[1];
+        onKeyTimeout(link);
+        if (link)
+          return;
+        return [content];
+      }
+    ],
+    [
+      ([first]) => typeof first === "string" && first.includes("\u{1F449}"),
+      () => {
+        onPressKey();
+        return;
+      }
+    ],
+    [
+      ([first]) => typeof first === "string" && (first.includes("Shopify Partners") || first.includes("Logged in")),
+      () => {
+        return;
+      }
+    ]
+  );
+  return () => {
+    process.stdout.write = originalWrite;
   };
 }
+function enhanceH2Logs(options) {
+  injectLogReplacer("error");
+  injectLogReplacer(
+    "warn",
+    ([first]) => first?.includes?.("[h2:warn:createStorefrontClient]") ? true : void 0
+  );
+  addMessageReplacers("h2-warn", [
+    ([first]) => {
+      const message = first?.message ?? first;
+      return typeof message === "string" && message.startsWith("[h2:");
+    },
+    (args) => {
+      const firstArg = args[0];
+      const errorObject = typeof firstArg === "object" && !!firstArg.stack ? firstArg : void 0;
+      const stringArg = errorObject?.message ?? firstArg;
+      const [, type, scope, message] = stringArg.match(/^\[h2:([^:]+):([^\]]+)\]\s+(.*)$/ims) || [];
+      if (!type || !scope || !message)
+        return args;
+      const headline = `In Hydrogen's \`${scope.trim()}\`:
+
+`;
+      const lines = message.split("\n");
+      const lastLine = lines.at(-1) ?? "";
+      const hasLinks = /https?:\/\//.test(lastLine);
+      if (hasLinks)
+        lines.pop();
+      if (type === "error" || errorObject) {
+        let tryMessage = hasLinks ? lastLine : void 0;
+        let stack = errorObject?.stack;
+        const cause = errorObject?.cause;
+        if (!!cause?.graphql?.query) {
+          const { query, variables } = cause.graphql;
+          const link = `${options.graphiqlUrl}?query=${encodeURIComponent(
+            query
+          )}${variables ? `&variables=${encodeURIComponent(variables)}` : ""}`;
+          const [, queryType, queryName] = query.match(/(query|mutation)\s+(\w+)/) || [];
+          tryMessage = (tryMessage ? `${tryMessage}
+
+` : "") + outputContent`To debug the ${queryType || "query"}${queryName ? ` \`${colors.whiteBright(queryName)}\`` : ""}, try it in ${outputToken.link(colors.bold("GraphiQL"), link)}.`.value;
+        }
+        const stackLines = stack?.split("\n") ?? [];
+        const isAppLine = (line) => line.includes(options.rootDirectory) && !line.includes("node_modules");
+        const firstAppLineIndex = stackLines.findIndex(isAppLine);
+        const lastAppLineIndex = stackLines.length - [...stackLines].reverse().findIndex(isAppLine);
+        if (firstAppLineIndex > 0 && lastAppLineIndex > firstAppLineIndex) {
+          stack = [
+            stackLines[0],
+            ...stackLines.slice(firstAppLineIndex, lastAppLineIndex)
+          ].join("\n").trim() || void 0;
+        }
+        const error = new BugError(
+          headline + colors.bold(lines.join("\n").replace(" - Request", "\nRequest")),
+          tryMessage
+        );
+        error.cause = cause;
+        error.stack = stack;
+        renderFatalError(error);
+        return;
+      }
+      let reference = void 0;
+      if (hasLinks) {
+        reference = [];
+        for (const link of lastLine.matchAll(/https?:\/\/[^\s]+/g)) {
+          reference.push(link[0]);
+        }
+      }
+      const render = type === "warn" ? renderWarning : renderInfo;
+      render({
+        body: headline + colors.bold(lines.join("\n")),
+        reference
+      });
+      return;
+    }
+  ]);
+}
 const warnings = /* @__PURE__ */ new Set();
 const warnOnce = (string) => {
   if (!warnings.has(string)) {
@@ -24,4 +200,4 @@ const warnOnce = (string) => {
   }
 };
 
-export { muteDevLogs, warnOnce };
+export { addMessageReplacers, enhanceH2Logs, muteAuthLogs, muteDevLogs, resetAllLogs, warnOnce };

package/dist/lib/log.test.js

@@ -0,0 +1,92 @@
+import { fileURLToPath } from 'node:url';
+import { describe, beforeEach, afterAll, it, expect } from 'vitest';
+import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
+import { resetAllLogs, enhanceH2Logs } from './log.js';
+
+describe("log replacer", () => {
+  describe("enhanceH2Logs", () => {
+    const graphiqlUrl = "http://localhost:3000/graphiql";
+    const rootDirectory = fileURLToPath(import.meta.url);
+    const outputMock = mockAndCaptureOutput();
+    beforeEach(() => {
+      resetAllLogs();
+      outputMock.clear();
+    });
+    afterAll(() => {
+      resetAllLogs();
+      outputMock.clear();
+    });
+    describe("enhances h2:info pattern", () => {
+      it("renders in an info banner", () => {
+        enhanceH2Logs({ graphiqlUrl, rootDirectory });
+        console.warn("[h2:info:storefront.query] Tip");
+        const message = outputMock.info();
+        expect(message).not.toMatch("h2");
+        expect(message).toMatch("info");
+        expect(message).toMatch("In Hydrogen's `storefront.query`");
+        expect(message).toMatch("Tip");
+      });
+    });
+    describe("enhances h2:warn pattern", () => {
+      it("renders in a warning banner", () => {
+        enhanceH2Logs({ graphiqlUrl, rootDirectory });
+        console.warn("[h2:warn:storefront.query] Wrong query 1");
+        const warning = outputMock.warn();
+        expect(warning).not.toMatch("h2");
+        expect(warning).toMatch("warning");
+        expect(warning).toMatch("In Hydrogen's `storefront.query`");
+        expect(warning).toMatch("Wrong query");
+      });
+      it("shows links from the last line as a list", () => {
+        enhanceH2Logs({ graphiqlUrl, rootDirectory });
+        console.warn(
+          "[h2:warn:storefront.query] Wrong query.\nhttps://docs.com/something"
+        );
+        const warning = outputMock.warn();
+        expect(warning).toMatch(
+          /\s+Reference:?\s+.+?\s+https?:\/\/docs\.com\/something\s/is
+        );
+      });
+    });
+    describe("enhances h2:error pattern", () => {
+      it("renders in an error banner", () => {
+        enhanceH2Logs({ graphiqlUrl, rootDirectory });
+        console.error(new Error("[h2:error:storefront.query] Wrong query 2"));
+        const error = outputMock.error();
+        expect(error.split("stack trace:")[0]).not.toMatch("h2");
+        expect(error).toMatch("error");
+        expect(error).toMatch("In Hydrogen's `storefront.query`");
+        expect(error).toMatch("Wrong query");
+      });
+      it("shows a GraphiQL link when the error is related to a GraphQL query", () => {
+        enhanceH2Logs({ graphiqlUrl, rootDirectory });
+        console.error(
+          new Error("[h2:error:storefront.query] Wrong query 3", {
+            cause: {
+              graphql: { query: "query test {}", variables: '{"var1": true}' }
+            }
+          })
+        );
+        const error = outputMock.error();
+        expect(error).toMatch("GraphiQL");
+        expect((error.match(/\s+GraphiQL\s+\(\s+([^\)]+)\s+\)/) ?? [])[1]).toMatchInlineSnapshot(`
+          "http://localhost:3000/grap  \u2502
+          \u2502  hiql?query=query%20test%20%7B%7D&variables=%7B%22var1%22%3A%20true%7D"
+        `);
+      });
+      it("trims stack traces when the error is related to a GraphQL query", () => {
+        enhanceH2Logs({ graphiqlUrl, rootDirectory });
+        console.error(
+          new Error("[h2:error:storefront.query] Wrong query 4", {
+            cause: { graphql: { query: "query test {}" } }
+          })
+        );
+        const error = outputMock.error();
+        const stack = error.split("stack trace:")[1] ?? "";
+        const shortenedAppDir = rootDirectory.split("/cli/").pop();
+        expect(stack).toMatch(shortenedAppDir);
+        expect(stack).not.toMatch("node_modules");
+      });
+    });
+  });
+});