@shopify/cli-hydrogen 5.2.2 → 5.3.0

package/dist/lib/flags.js

@@ -17,6 +17,10 @@ const commonFlags = {
     env: "SHOPIFY_HYDROGEN_FLAG_PORT",
     default: DEFAULT_PORT
   }),
+  workerRuntime: Flags.boolean({
+    description: "Run the app in a worker environment closer to Oxygen production instead of a Node.js sandbox. This flag is unstable and may change without notice.",
+    env: "SHOPIFY_HYDROGEN_FLAG_WORKER_UNSTABLE"
+  }),
   force: Flags.boolean({
     description: "Overwrite the destination directory and files if they already exist.",
     env: "SHOPIFY_HYDROGEN_FLAG_FORCE",

package/dist/lib/get-oxygen-token.js

@@ -0,0 +1,47 @@
+import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
+import { outputWarn } from '@shopify/cli-kit/node/output';
+import { linkStorefront } from '../commands/hydrogen/link.js';
+import { login } from './auth.js';
+import { getCliCommand } from './shell.js';
+import { renderMissingLink, renderMissingStorefront } from './render-errors.js';
+import { getOxygenToken } from './graphql/admin/oxygen-token.js';
+
+async function getOxygenDeploymentToken({
+  root
+}) {
+  const [{ session, config }, cliCommand] = await Promise.all([
+    login(root),
+    getCliCommand()
+  ]);
+  if (!config.storefront?.id) {
+    renderMissingLink({ session, cliCommand });
+    const runLink = await renderConfirmationPrompt({
+      message: ["Run", { command: `${cliCommand} link` }]
+    });
+    if (!runLink) {
+      return;
+    }
+    config.storefront = await linkStorefront(root, session, config, {
+      cliCommand
+    });
+  }
+  if (!config.storefront) {
+    return;
+  }
+  const { storefront } = await getOxygenToken(session, config.storefront.id);
+  if (!storefront) {
+    renderMissingStorefront({
+      session,
+      storefront: config.storefront,
+      cliCommand
+    });
+    return;
+  }
+  if (!storefront.oxygenDeploymentToken) {
+    outputWarn(`Could not retrieve a deployment token.`);
+    return;
+  }
+  return storefront.oxygenDeploymentToken;
+}
+
+export { getOxygenDeploymentToken };

package/dist/lib/get-oxygen-token.test.js

@@ -0,0 +1,104 @@
+import { vi, describe, beforeEach, afterEach, it, expect } from 'vitest';
+import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
+import { getOxygenDeploymentToken } from './get-oxygen-token.js';
+import { login } from './auth.js';
+import { getConfig } from './shopify-config.js';
+import { renderMissingLink, renderMissingStorefront } from './render-errors.js';
+import { linkStorefront } from '../commands/hydrogen/link.js';
+import { getOxygenToken } from './graphql/admin/oxygen-token.js';
+
+vi.mock("@shopify/cli-kit/node/ui", async () => {
+  const original = await vi.importActual("@shopify/cli-kit/node/ui");
+  return {
+    ...original,
+    renderConfirmationPrompt: vi.fn()
+  };
+});
+vi.mock("./auth.js");
+vi.mock("./admin-session.js");
+vi.mock("./shopify-config.js");
+vi.mock("./render-errors.js");
+vi.mock("../commands/hydrogen/link.js");
+vi.mock("./graphql/admin/oxygen-token.js");
+describe("getOxygenDeploymentToken", () => {
+  const OXYGEN_DEPLOYMENT_TOKEN = "a-lovely-token";
+  beforeEach(() => {
+    vi.mocked(login).mockResolvedValue({
+      session: {
+        token: "123",
+        storeFqdn: "www.snowdevil.com"
+      },
+      config: {
+        shop: "snowdevil.myshopify.com",
+        shopName: "Snowdevil",
+        email: "merchant@shop.com",
+        storefront: {
+          id: "1",
+          title: "Snowboards"
+        }
+      }
+    });
+    vi.mocked(getConfig).mockResolvedValue({
+      storefront: { id: "storefront-id", title: "Existing Link" }
+    });
+    vi.mocked(getOxygenToken).mockResolvedValue({
+      storefront: { oxygenDeploymentToken: OXYGEN_DEPLOYMENT_TOKEN }
+    });
+  });
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+  it("returns the oxygen deployment token", async () => {
+    const token = await getOxygenDeploymentToken({ root: "test-root" });
+    expect(token).toBe(OXYGEN_DEPLOYMENT_TOKEN);
+  });
+  describe("when there is no linked storefront", () => {
+    beforeEach(() => {
+      vi.mocked(login).mockResolvedValue({
+        session: {
+          token: "123",
+          storeFqdn: "www.snowdevil.com"
+        },
+        config: {
+          shop: "snowdevil.myshopify.com",
+          shopName: "Snowdevil",
+          email: "merchant@shop.com",
+          storefront: void 0
+        }
+      });
+    });
+    it("calls renderMissingLink and prompts the user to create a link", async () => {
+      vi.mocked(renderConfirmationPrompt).mockResolvedValue(true);
+      await getOxygenDeploymentToken({ root: "test-root" });
+      expect(renderMissingLink).toHaveBeenCalled();
+      expect(renderConfirmationPrompt).toHaveBeenCalled();
+      expect(linkStorefront).toHaveBeenCalled();
+    });
+    it("returns nothing if the user does not create a new link", async () => {
+      vi.mocked(renderConfirmationPrompt).mockResolvedValue(false);
+      const token = await getOxygenDeploymentToken({ root: "test-root" });
+      expect(token).toEqual(void 0);
+    });
+  });
+  describe("when there is no matching storefront in the shop", () => {
+    beforeEach(() => {
+      vi.mocked(getOxygenToken).mockResolvedValue({ storefront: null });
+    });
+    it("calls renderMissingStorefront and returns nothing", async () => {
+      const token = await getOxygenDeploymentToken({ root: "test-root" });
+      expect(renderMissingStorefront).toHaveBeenCalled();
+      expect(token).toEqual(void 0);
+    });
+  });
+  describe("when the storefront does not have an oxygen deployment token", () => {
+    beforeEach(() => {
+      vi.mocked(getOxygenToken).mockResolvedValue({
+        storefront: { oxygenDeploymentToken: "" }
+      });
+    });
+    it("returns nothing", async () => {
+      const token = await getOxygenDeploymentToken({ root: "test-root" });
+      expect(token).toEqual(void 0);
+    });
+  });
+});

package/dist/lib/graphql/admin/oxygen-token.js

@@ -0,0 +1,21 @@
+import { adminRequest } from './client.js';
+
+const GetDeploymentTokenQuery = `#graphql
+  query GetDeploymentToken($id: ID!) {
+    hydrogenStorefront(id: $id) {
+      oxygenDeploymentToken
+    }
+  }
+`;
+async function getOxygenToken(adminSession, storefrontId) {
+  const { hydrogenStorefront } = await adminRequest(
+    GetDeploymentTokenQuery,
+    adminSession,
+    {
+      id: storefrontId
+    }
+  );
+  return { storefront: hydrogenStorefront };
+}
+
+export { GetDeploymentTokenQuery, getOxygenToken };

package/dist/lib/live-reload.js

@@ -1,4 +1,5 @@
 import http from 'node:http';
+import { handleRemixImportFail } from './remix-config.js';
 
 async function setupLiveReload(devServerPort) {
   try {
@@ -7,7 +8,7 @@ async function setupLiveReload(devServerPort) {
       import('@remix-run/dev/dist/devServer_unstable/socket.js'),
       import('@remix-run/dev/dist/devServer_unstable/hdr.js'),
       import('@remix-run/dev/dist/result.js')
-    ]);
+    ]).catch(handleRemixImportFail);
     const state = {};
     const server = http.createServer(function(req, res) {
       res.writeHead(200);

package/dist/lib/log.js

@@ -37,10 +37,17 @@ function injectLogReplacer(method, debouncer) {
     console[method] = (...args) => {
       if (debounceMessage(args, debouncer?.(args)))
         return;
-      const replacer = messageReplacers.find(([matcher]) => matcher(args))?.[1];
-      if (!replacer)
+      const replacers = messageReplacers.reduce((acc, [matcher, replacer]) => {
+        if (matcher(args))
+          acc.push(replacer);
+        return acc;
+      }, []);
+      if (replacers.length === 0)
         return originalConsole[method](...args);
-      const result = replacer(args);
+      const result = replacers.reduce(
+        (resultArgs, replacer) => resultArgs && replacer(resultArgs),
+        args
+      );
       if (result)
         return originalConsole[method](...result);
     };
@@ -48,8 +55,10 @@ function injectLogReplacer(method, debouncer) {
 }
 function muteDevLogs({ workerReload } = {}) {
   injectLogReplacer("log");
+  injectLogReplacer("error");
+  injectLogReplacer("warn");
   let isFirstWorkerReload = true;
-  addMessageReplacers("dev", [
+  addMessageReplacers("dev-node", [
     ([first]) => typeof first === "string" && first.includes("[mf:"),
     (args) => {
       const first = args[0];
@@ -65,6 +74,29 @@ function muteDevLogs({ workerReload } = {}) {
       }
     }
   ]);
+  addMessageReplacers(
+    "dev-workerd",
+    [
+      // Workerd logs
+      ([first]) => typeof first === "string" && /^\x1B\[31m(workerd\/|stack:)/.test(first),
+      () => {
+      }
+    ],
+    // Non-actionable warnings/errors:
+    [
+      ([first]) => typeof first === "string" && /^A promise rejection/i.test(first),
+      () => {
+      }
+    ],
+    [
+      ([first]) => {
+        const message = first?.message ?? first;
+        return typeof message === "string" && /^Network connection lost/i.test(message);
+      },
+      () => {
+      }
+    ]
+  );
 }
 const originalWrite = process.stdout.write;
 function muteAuthLogs({
@@ -76,12 +108,17 @@ function muteAuthLogs({
     process.stdout.write = (item, cb) => {
       if (typeof item !== "string")
         return write(item, cb);
-      const replacer = messageReplacers.find(
-        ([matcher]) => matcher([item])
-      )?.[1];
-      if (!replacer)
+      const replacers = messageReplacers.reduce((acc, [matcher, replacer]) => {
+        if (matcher([item]))
+          acc.push(replacer);
+        return acc;
+      }, []);
+      if (replacers.length === 0)
         return write(item, cb);
-      const result = replacer([item]);
+      const result = replacers.reduce(
+        (resultArgs, replacer) => resultArgs && replacer(resultArgs),
+        [item]
+      );
       if (result)
         return write(result[0], cb);
     };
@@ -129,13 +166,13 @@ function enhanceH2Logs(options) {
   addMessageReplacers("h2-warn", [
     ([first]) => {
       const message = first?.message ?? first;
-      return typeof message === "string" && message.startsWith("[h2:");
+      return typeof message === "string" && message.includes("[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) || [];
+      const [, type, scope, message] = stringArg.match(/\[h2:([^:]+):([^\]]+)\]\s+(.*)$/ims) || [];
       if (!type || !scope || !message)
         return args;
       const headline = `In Hydrogen's \`${scope.trim()}\`:
@@ -149,8 +186,14 @@ function enhanceH2Logs(options) {
       if (type === "error" || errorObject) {
         let tryMessage = hasLinks ? lastLine : void 0;
         let stack = errorObject?.stack;
-        const cause = errorObject?.cause;
-        if (!!cause?.graphql?.query) {
+        let cause = errorObject?.cause;
+        if (typeof cause === "string") {
+          try {
+            cause = JSON.parse(cause);
+          } catch {
+          }
+        }
+        if (typeof cause !== "string" && !!cause?.graphql?.query) {
           const { query, variables } = cause.graphql;
           const link = `${options.graphiqlUrl}?query=${encodeURIComponent(
             query

package/dist/lib/mini-oxygen/common.js

@@ -0,0 +1,58 @@
+import { outputToken, outputInfo, outputContent } from '@shopify/cli-kit/node/output';
+import colors from '@shopify/cli-kit/node/colors';
+import { DEV_ROUTES } from '../request-events.js';
+
+function logRequestLine(request, {
+  responseStatus = 200,
+  durationMs = 0
+} = {}) {
+  try {
+    const url = new URL(request.url);
+    if (DEV_ROUTES.has(url.pathname))
+      return;
+    const isDataRequest = url.searchParams.has("_data");
+    let route = request.url.replace(url.origin, "");
+    let info = "";
+    let type = "render";
+    if (isDataRequest) {
+      type = request.method === "GET" ? "loader" : "action";
+      const dataParam = url.searchParams.get("_data")?.replace("routes/", "");
+      route = url.pathname;
+      info = `[${dataParam}]`;
+    }
+    const colorizeStatus = responseStatus < 300 ? outputToken.green : responseStatus < 400 ? outputToken.cyan : outputToken.errorText;
+    outputInfo(
+      outputContent`${request.method.padStart(6)}  ${colorizeStatus(
+        String(responseStatus)
+      )}  ${outputToken.italic(type.padEnd(7, " "))} ${route} ${durationMs > 0 ? colors.dim(` ${durationMs}ms`) : ""}${info ? "  " + colors.dim(info) : ""}${request.headers.get("purpose") === "prefetch" ? outputToken.italic(colors.dim("  prefetch")) : ""}`
+    );
+  } catch {
+    if (request && responseStatus) {
+      outputInfo(`${request.method} ${responseStatus} ${request.url}`);
+    }
+  }
+}
+const OXYGEN_HEADERS_MAP = {
+  ip: { name: "oxygen-buyer-ip", defaultValue: "127.0.0.1" },
+  longitude: { name: "oxygen-buyer-longitude", defaultValue: "-122.40140" },
+  latitude: { name: "oxygen-buyer-latitude", defaultValue: "37.78855" },
+  continent: { name: "oxygen-buyer-continent", defaultValue: "NA" },
+  country: { name: "oxygen-buyer-country", defaultValue: "US" },
+  region: { name: "oxygen-buyer-region", defaultValue: "California" },
+  regionCode: { name: "oxygen-buyer-region-code", defaultValue: "CA" },
+  city: { name: "oxygen-buyer-city", defaultValue: "San Francisco" },
+  isEuCountry: { name: "oxygen-buyer-is-eu-country", defaultValue: "" },
+  timezone: {
+    name: "oxygen-buyer-timezone",
+    defaultValue: "America/Los_Angeles"
+  },
+  // Not documented but available in Oxygen:
+  deploymentId: { name: "oxygen-buyer-deployment-id", defaultValue: "local" },
+  shopId: { name: "oxygen-buyer-shop-id", defaultValue: "development" },
+  storefrontId: {
+    name: "oxygen-buyer-storefront-id",
+    defaultValue: "development"
+  }
+};
+
+export { OXYGEN_HEADERS_MAP, logRequestLine };

package/dist/lib/mini-oxygen/index.js

@@ -0,0 +1,12 @@
+async function startMiniOxygen(options, useWorkerd = false) {
+  if (useWorkerd) {
+    const { startWorkerdServer } = await import('./workerd.js');
+    return startWorkerdServer(options);
+  } else {
+    process.env.MINIFLARE_SUBREQUEST_LIMIT = 100;
+    const { startNodeServer } = await import('./node.js');
+    return startNodeServer(options);
+  }
+}
+
+export { startMiniOxygen };

package/dist/lib/mini-oxygen/node.js

@@ -0,0 +1,110 @@
+import { randomUUID } from 'node:crypto';
+import { AsyncLocalStorage } from 'node:async_hooks';
+import { resolvePath } from '@shopify/cli-kit/node/path';
+import { readFile } from '@shopify/cli-kit/node/fs';
+import { renderSuccess } from '@shopify/cli-kit/node/ui';
+import { startServer, Request } from '@shopify/mini-oxygen';
+import { DEFAULT_PORT } from '../flags.js';
+import { OXYGEN_HEADERS_MAP, logRequestLine } from './common.js';
+import { clearHistory, streamRequestEvents, logRequestEvent } from '../request-events.js';
+
+async function startNodeServer({
+  root,
+  port = DEFAULT_PORT,
+  watch = false,
+  buildPathWorkerFile,
+  buildPathClient,
+  env
+}) {
+  resolvePath(root, ".env");
+  const oxygenHeaders = Object.fromEntries(
+    Object.entries(OXYGEN_HEADERS_MAP).map(([key, value]) => {
+      return [key, value.defaultValue];
+    })
+  );
+  const asyncLocalStorage = new AsyncLocalStorage();
+  const serviceBindings = {
+    H2O_LOG_EVENT: {
+      fetch: (request) => logRequestEvent(
+        new Request(request.url, {
+          headers: {
+            ...Object.fromEntries(request.headers.entries()),
+            // Merge some headers from the parent request
+            ...asyncLocalStorage.getStore()
+          }
+        })
+      )
+    }
+  };
+  const miniOxygen = await startServer({
+    script: await readFile(buildPathWorkerFile),
+    workerFile: buildPathWorkerFile,
+    assetsDir: buildPathClient,
+    publicPath: "",
+    port,
+    watch,
+    autoReload: watch,
+    modules: true,
+    env: {
+      ...env,
+      ...process.env,
+      ...serviceBindings
+    },
+    log: () => {
+    },
+    oxygenHeaders,
+    async onRequest(request, defaultDispatcher) {
+      const url = new URL(request.url);
+      if (url.pathname === "/debug-network-server") {
+        return request.method === "DELETE" ? clearHistory() : streamRequestEvents(request);
+      }
+      let requestId = request.headers.get("request-id");
+      if (!requestId) {
+        requestId = randomUUID();
+        request.headers.set("request-id", requestId);
+      }
+      const startTimeMs = Date.now();
+      const response = await asyncLocalStorage.run(
+        { "request-id": requestId, purpose: request.headers.get("purpose") },
+        () => defaultDispatcher(request)
+      );
+      logRequestLine(request, {
+        responseStatus: response.status,
+        durationMs: startTimeMs > 0 ? Date.now() - startTimeMs : 0
+      });
+      return response;
+    }
+  });
+  const listeningAt = `http://localhost:${miniOxygen.port}`;
+  return {
+    listeningAt,
+    port: miniOxygen.port,
+    async reload(options) {
+      const nextOptions = {};
+      if (options?.env) {
+        nextOptions.env = {
+          ...options.env,
+          ...process.env
+        };
+      }
+      nextOptions.script = await readFile(buildPathWorkerFile);
+      await miniOxygen.reload(nextOptions);
+    },
+    showBanner(options) {
+      console.log("");
+      renderSuccess({
+        headline: `${options?.headlinePrefix ?? ""}MiniOxygen ${options?.mode ?? "development"} server running.`,
+        body: [
+          `View ${options?.appName ?? "Hydrogen"} app: ${listeningAt}`,
+          ...options?.extraLines ?? []
+        ]
+      });
+      console.log("");
+    },
+    async close() {
+      await miniOxygen.close();
+    }
+  };
+}
+
+export { startNodeServer };

package/dist/lib/mini-oxygen/types.js

@@ -0,0 +1 @@
+