@shopify/cli-hydrogen 6.0.2 → 6.1.0

package/dist/lib/mini-oxygen/workerd-inspector.js

@@ -1,22 +1,59 @@
 import { dirname } from 'node:path';
 import { readFile } from 'node:fs/promises';
+import { fetch } from '@shopify/cli-kit/node/http';
 import { SourceMapConsumer } from 'source-map';
-import { parse } from 'stack-trace';
-import WebSocket from 'ws';
+import { WebSocket } from 'ws';
+import { addInspectorConsoleLogger, formatStack } from './workerd-inspector-logs.js';
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { createInspectorProxy } from './workerd-inspector-proxy.js';
 
+function createInspectorConnector(options) {
+  let inspectorUrl;
+  let inspectorConnection;
+  let inspectorProxy;
+  return async (onBeforeConnect) => {
+    inspectorConnection?.close();
+    inspectorUrl ??= await findInspectorUrl(options.privateInspectorPort);
+    await onBeforeConnect?.();
+    inspectorConnection = connectToInspector({
+      inspectorUrl,
+      sourceMapPath: options.sourceMapPath
+    });
+    addInspectorConsoleLogger(inspectorConnection);
+    if (options.debug) {
+      if (inspectorProxy) {
+        inspectorProxy.updateInspectorConnection(inspectorConnection);
+      } else {
+        inspectorProxy = createInspectorProxy(
+          options.publicInspectorPort,
+          options.absoluteBundlePath,
+          inspectorConnection
+        );
+      }
+    }
+  };
+}
 async function findInspectorUrl(inspectorPort) {
   try {
     const jsonUrl = `http://127.0.0.1:${inspectorPort}/json`;
     const body = await (await fetch(jsonUrl)).json();
-    return body?.find(({ id }) => id === "core:user:hydrogen")?.webSocketDebuggerUrl;
+    const url = body?.find(
+      ({ id }) => id === "core:user:hydrogen"
+    )?.webSocketDebuggerUrl;
+    if (!url) {
+      throw new Error("Unable to find inspector URL");
+    }
+    return url;
   } catch (error) {
-    console.error("Error attempting to retrieve debugger URL:", error);
+    const abortError = new AbortError(
+      "Unable to connect to Worker inspector",
+      `Please report this issue. ${error.stack}`
+    );
+    abortError.stack = error.stack;
+    throw abortError;
   }
 }
-function connectToInspector({
-  inspectorUrl,
-  sourceMapPath
-}) {
+function connectToInspector({ inspectorUrl, sourceMapPath }) {
   const messageCounterRef = { value: -1 };
   const getMessageId = () => messageCounterRef.value--;
   const pendingMessages = /* @__PURE__ */ new Map();
@@ -147,42 +184,6 @@ function connectToInspector({
       }
     })();
   };
-  ws.addEventListener("message", async (event) => {
-    if (typeof event.data === "string") {
-      const evt = JSON.parse(event.data);
-      cleanupMessageQueue(evt);
-      if (evt.method === "Runtime.exceptionThrown") {
-        const params = evt.params;
-        const errorProperties = {};
-        const sourceMapConsumer = await getSourceMapConsumer();
-        if (sourceMapConsumer !== void 0) {
-          const message = params.exceptionDetails.exception?.description?.split("\n")[0];
-          const stack = params.exceptionDetails.stackTrace?.callFrames;
-          const formatted = formatStructuredError(
-            sourceMapConsumer,
-            message,
-            stack
-          );
-          errorProperties.message = params.exceptionDetails.text;
-          errorProperties.stack = formatted;
-        } else {
-          errorProperties.message = params.exceptionDetails.text + " " + (params.exceptionDetails.exception?.description ?? "");
-        }
-        console.error(
-          await reconstructError(
-            errorProperties,
-            params.exceptionDetails.exception
-          )
-        );
-      }
-      if (evt.method === "Runtime.consoleAPICalled") {
-        const params = evt.params;
-        await logConsoleMessage(params, reconstructError);
-      }
-    } else {
-      console.error("Unrecognised devtools event:", event);
-    }
-  });
   ws.once("open", () => {
     send("Runtime.enable");
     keepAliveInterval = setInterval(() => send("Runtime.getIsolateId"), 1e4);
@@ -194,199 +195,25 @@ function connectToInspector({
     clearInterval(keepAliveInterval);
     sourceMapAbortController.abort();
   });
-  return () => {
-    clearInterval(keepAliveInterval);
-    if (!isClosed()) {
-      try {
-        ws.close();
-      } catch (err) {
-      }
-    }
-    sourceMapAbortController.abort();
-  };
-}
-const mapConsoleAPIMessageTypeToConsoleMethod = {
-  log: "log",
-  debug: "debug",
-  info: "info",
-  warning: "warn",
-  error: "error",
-  dir: "dir",
-  dirxml: "dirxml",
-  table: "table",
-  trace: "trace",
-  clear: "clear",
-  count: "count",
-  assert: "assert",
-  profile: "profile",
-  profileEnd: "profileEnd",
-  timeEnd: "timeEnd",
-  startGroup: "group",
-  startGroupCollapsed: "groupCollapsed",
-  endGroup: "groupEnd"
-};
-async function logConsoleMessage(evt, reconstructError) {
-  const args = [];
-  for (const ro of evt.args) {
-    switch (ro.type) {
-      case "string":
-      case "number":
-      case "boolean":
-      case "undefined":
-      case "symbol":
-      case "bigint":
-        args.push(ro.value);
-        break;
-      case "function":
-        args.push(`[Function: ${ro.description ?? "<no-description>"}]`);
-        break;
-      case "object":
-        if (!ro.preview) {
-          args.push(
-            ro.subtype === "null" ? "null" : ro.description ?? "<no-description>"
-          );
-        } else {
-          if (ro.preview.description)
-            args.push(ro.preview.description);
-          switch (ro.preview.subtype) {
-            case "array":
-              args.push(
-                "[ " + ro.preview.properties.map(({ value }) => {
-                  return value;
-                }).join(", ") + (ro.preview.overflow ? "..." : "") + " ]"
-              );
-              break;
-            case "weakmap":
-            case "map":
-              ro.preview.entries === void 0 ? args.push("{}") : args.push(
-                "{\n" + ro.preview.entries.map(({ key, value }) => {
-                  return `  ${key?.description ?? "<unknown>"} => ${value.description}`;
-                }).join(",\n") + (ro.preview.overflow ? "\n  ..." : "") + "\n}"
-              );
-              break;
-            case "weakset":
-            case "set":
-              ro.preview.entries === void 0 ? args.push("{}") : args.push(
-                "{ " + ro.preview.entries.map(({ value }) => {
-                  return `${value.description}`;
-                }).join(", ") + (ro.preview.overflow ? ", ..." : "") + " }"
-              );
-              break;
-            case "regexp":
-              break;
-            case "date":
-              break;
-            case "generator":
-              args.push(ro.preview?.properties[0]?.value || "");
-              break;
-            case "promise":
-              if (ro.preview?.properties[0]?.value === "pending") {
-                args.push(`{<${ro.preview.properties[0].value}>}`);
-              } else {
-                args.push(
-                  `{<${ro.preview?.properties[0]?.value}>: ${ro.preview?.properties[1]?.value}}`
-                );
-              }
-              break;
-            case "node":
-            case "iterator":
-            case "proxy":
-            case "typedarray":
-            case "arraybuffer":
-            case "dataview":
-            case "webassemblymemory":
-            case "wasmvalue":
-              break;
-            case "error":
-              const errorProperties = {
-                message: ro.preview.description?.split("\n").filter((line) => !/^\s+at\s/.test(line)).join("\n") ?? ro.preview.properties.find(({ name }) => name === "message")?.value ?? "",
-                stack: ro.preview.description ?? ro.description ?? ro.preview.properties.find(({ name }) => name === "stack")?.value,
-                cause: ro.preview.properties.find(({ name }) => name === "cause")?.value
-              };
-              const error = await reconstructError(errorProperties, ro);
-              args.splice(-1, 1, error);
-              break;
-            default:
-              args.push(
-                "{\n" + ro.preview.properties.map(({ name, value }) => {
-                  return `  ${name}: ${value}`;
-                }).join(",\n") + (ro.preview.overflow ? "\n  ..." : "") + "\n}"
-              );
-          }
-        }
-        break;
-      default:
-        args.push(ro.description || ro.unserializableValue || "\u{1F98B}");
-        break;
-    }
-  }
-  const method = mapConsoleAPIMessageTypeToConsoleMethod[evt.type];
-  if (method in console) {
-    switch (method) {
-      case "dir":
-        console.dir(args);
-        break;
-      case "table":
-        console.table(args);
-        break;
-      default:
-        console[method].apply(console, args);
-        break;
-    }
-  } else {
-    console.warn(`Unsupported console method: ${method}`);
-    console.warn("console event:", evt);
-  }
-}
-function formatStructuredError(sourceMapConsumer, message, frames) {
-  const lines = [];
-  if (message !== void 0)
-    lines.push(message);
-  frames?.forEach(({ functionName, lineNumber, columnNumber }, i) => {
-    try {
-      if (lineNumber) {
-        const pos = sourceMapConsumer.originalPositionFor({
-          line: lineNumber + 1,
-          column: columnNumber
-        });
-        if (i === 0 && pos.source && pos.line) {
-          const fileSource = sourceMapConsumer.sourceContentFor(pos.source);
-          const fileSourceLine = fileSource?.split("\n")[pos.line - 1] || "";
-          lines.push(fileSourceLine.trim());
-          if (pos.column) {
-            lines.push(
-              `${" ".repeat(pos.column - fileSourceLine.search(/\S/))}^`
-            );
-          }
-        }
-        if (pos && pos.line !== null && pos.column !== null) {
-          const convertedFnName = pos.name || functionName || "";
-          let convertedLocation = `${pos.source}:${pos.line}:${pos.column + 1}`;
-          if (convertedFnName === "") {
-            lines.push(`    at ${convertedLocation}`);
-          } else {
-            lines.push(`    at ${convertedFnName} (${convertedLocation})`);
-          }
+  return {
+    ws,
+    send,
+    reconstructError,
+    getSourceMapConsumer,
+    cleanupMessageQueue,
+    isClosed,
+    close: () => {
+      clearInterval(keepAliveInterval);
+      if (!isClosed()) {
+        try {
+          ws.removeAllListeners();
+          ws.close();
+        } catch (err) {
         }
       }
-    } catch {
+      sourceMapAbortController.abort();
     }
-  });
-  return lines.join("\n");
-}
-function formatStack(sourceMapConsumer, stack) {
-  const message = stack.split("\n")[0];
-  const callSites = parse({ stack });
-  const frames = callSites.map((site) => ({
-    functionName: site.getFunctionName() ?? "",
-    // `Protocol.Runtime.CallFrame`s line numbers are 0-indexed, hence `- 1`
-    lineNumber: (site.getLineNumber() ?? 1) - 1,
-    columnNumber: site.getColumnNumber() ?? 1,
-    // Unused by `formattedError`
-    scriptId: "",
-    url: ""
-  }));
-  return formatStructuredError(sourceMapConsumer, message, frames);
+  };
 }
 
-export { connectToInspector, findInspectorUrl, mapConsoleAPIMessageTypeToConsoleMethod };
+export { createInspectorConnector };

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

@@ -1,25 +1,27 @@
-import { Response, Miniflare, NoOpLog, Request } from 'miniflare';
-import { resolvePath } from '@shopify/cli-kit/node/path';
-import { glob, readFile, createFileReadStream, fileSize } from '@shopify/cli-kit/node/fs';
+import crypto from 'node:crypto';
+import { Response, Miniflare, fetch, Request, NoOpLog } from 'miniflare';
+import { resolvePath, dirname } from '@shopify/cli-kit/node/path';
+import { readFile } from '@shopify/cli-kit/node/fs';
 import { renderSuccess } from '@shopify/cli-kit/node/ui';
-import { lookupMimeType } from '@shopify/cli-kit/node/mimes';
-import { findInspectorUrl, connectToInspector } from './workerd-inspector.js';
-import { DEFAULT_PORT } from '../flags.js';
+import { createInspectorConnector } from './workerd-inspector.js';
 import { findPort } from '../find-port.js';
 import { OXYGEN_HEADERS_MAP, logRequestLine } from './common.js';
 import { setConstructors, handleDebugNetworkRequest, H2O_BINDING_NAME, logRequestEvent } from '../request-events.js';
+import { STATIC_ASSET_EXTENSIONS, createAssetsServer, buildAssetsUrl } from './assets.js';
 
-const DEFAULT_INSPECTOR_PORT = 8787;
+const PRIVATE_WORKERD_INSPECTOR_PORT = 9222;
 async function startWorkerdServer({
   root,
-  port = DEFAULT_PORT,
+  port: appPort,
+  inspectorPort: publicInspectorPort,
+  assetsPort,
+  debug = false,
   watch = false,
   buildPathWorkerFile,
   buildPathClient,
   env
 }) {
-  const appPort = await findPort(port);
-  const inspectorPort = await findPort(DEFAULT_INSPECTOR_PORT);
+  const privateInspectorPort = await findPort(PRIVATE_WORKERD_INSPECTOR_PORT);
   const oxygenHeadersMap = Object.values(OXYGEN_HEADERS_MAP).reduce(
     (acc, item) => {
       acc[item.name] = item.defaultValue;
@@ -28,11 +30,14 @@ async function startWorkerdServer({
     {}
   );
   setConstructors({ Response });
+  const absoluteBundlePath = resolvePath(root, buildPathWorkerFile);
+  const handleAssets = createAssetHandler(assetsPort);
+  const staticAssetExtensions = STATIC_ASSET_EXTENSIONS.slice();
   const buildMiniOxygenOptions = async () => ({
     cf: false,
     verbose: false,
     port: appPort,
-    inspectorPort,
+    inspectorPort: privateInspectorPort,
     log: new NoOpLog(),
     liveReload: watch,
     host: "localhost",
@@ -42,23 +47,24 @@ async function startWorkerdServer({
         modules: true,
         script: `export default { fetch: ${miniOxygenHandler.toString()} }`,
         bindings: {
-          initialAssets: await glob("**/*", { cwd: buildPathClient }),
+          staticAssetExtensions,
           oxygenHeadersMap
         },
         serviceBindings: {
           hydrogen: "hydrogen",
-          assets: createAssetHandler(buildPathClient),
+          assets: handleAssets,
           debugNetwork: handleDebugNetworkRequest,
           logRequest
         }
       },
       {
         name: "hydrogen",
+        modulesRoot: dirname(absoluteBundlePath),
         modules: [
           {
             type: "ESModule",
-            path: resolvePath(root, buildPathWorkerFile),
-            contents: await readFile(resolvePath(root, buildPathWorkerFile))
+            path: absoluteBundlePath,
+            contents: await readFile(absoluteBundlePath)
           }
         ],
         compatibilityFlags: ["streams_enable_constructors"],
@@ -74,8 +80,16 @@ async function startWorkerdServer({
   const miniOxygen = new Miniflare(miniOxygenOptions);
   const listeningAt = (await miniOxygen.ready).origin;
   const sourceMapPath = buildPathWorkerFile + ".map";
-  let inspectorUrl = await findInspectorUrl(inspectorPort);
-  let cleanupInspector = inspectorUrl ? connectToInspector({ inspectorUrl, sourceMapPath }) : void 0;
+  const reconnect = createInspectorConnector({
+    debug,
+    sourceMapPath,
+    absoluteBundlePath,
+    privateInspectorPort,
+    publicInspectorPort
+  });
+  await reconnect();
+  const assetsServer = createAssetsServer(buildPathClient);
+  assetsServer.listen(assetsPort);
   return {
     port: appPort,
     listeningAt,
@@ -89,25 +103,27 @@ async function startWorkerdServer({
           hydrogen.bindings = { ...nextOptions?.env ?? env };
         }
       }
-      cleanupInspector?.();
-      await miniOxygen.setOptions(miniOxygenOptions);
-      inspectorUrl ??= await findInspectorUrl(inspectorPort);
-      if (inspectorUrl) {
-        cleanupInspector = connectToInspector({ inspectorUrl, sourceMapPath });
-      }
+      await reconnect(() => miniOxygen.setOptions(miniOxygenOptions));
     },
     showBanner(options) {
       console.log("");
+      const debuggerMessage = `
+
+Debug mode enabled. Attach a ${process.env.TERM_PROGRAM === "vscode" ? "VSCode " : ""}debugger to port ${publicInspectorPort}
+or open DevTools in http://localhost:${publicInspectorPort}`;
       renderSuccess({
-        headline: `${options?.headlinePrefix ?? ""}MiniOxygen (Unstable Worker Runtime) ${options?.mode ?? "development"} server running.`,
+        headline: `${options?.headlinePrefix ?? ""}MiniOxygen (Worker Runtime) ${options?.mode ?? "development"} server running.`,
         body: [
           `View ${options?.appName ?? "Hydrogen"} app: ${listeningAt}`,
-          ...options?.extraLines ?? []
+          ...options?.extraLines ?? [],
+          ...debug ? [{ warn: debuggerMessage }] : []
         ]
       });
       console.log("");
     },
     async close() {
+      assetsServer.closeAllConnections();
+      assetsServer.close();
       await miniOxygen.dispose();
     }
   };
@@ -118,7 +134,11 @@ async function miniOxygenHandler(request, env, context) {
     return env.debugNetwork.fetch(request);
   }
   if (request.method === "GET") {
-    if (new Set(env.initialAssets).has(pathname.slice(1))) {
+    const staticAssetExtensions = new Set(env.staticAssetExtensions);
+    const wellKnown = pathname.startsWith("/.well-known");
+    const extension = pathname.split(".").at(-1) ?? "";
+    const isAsset = wellKnown || !!staticAssetExtensions.has(extension.toUpperCase());
+    if (isAsset) {
       const response2 = await env.assets.fetch(
         new Request(request.url, {
           signal: request.signal,
@@ -154,28 +174,15 @@ async function miniOxygenHandler(request, env, context) {
   );
   return response;
 }
-function createAssetHandler(buildPathClient) {
+function createAssetHandler(assetsPort) {
+  const assetsServerOrigin = buildAssetsUrl(assetsPort);
   return async (request) => {
-    const relativeAssetPath = new URL(request.url).pathname.replace("/", "");
-    if (relativeAssetPath) {
-      try {
-        const absoluteAssetPath = resolvePath(
-          buildPathClient,
-          relativeAssetPath
-        );
-        return new Response(createFileReadStream(absoluteAssetPath), {
-          headers: {
-            "Content-Type": lookupMimeType(relativeAssetPath) || "text/plain",
-            "Content-Length": String(await fileSize(absoluteAssetPath))
-          }
-        });
-      } catch (error) {
-        if (error.code !== "ENOENT") {
-          throw error;
-        }
-      }
-    }
-    return new Response("Not Found", { status: 404 });
+    return fetch(
+      new Request(
+        request.url.replace(new URL(request.url).origin, assetsServerOrigin),
+        request
+      )
+    );
   };
 }
 async function logRequest(request) {

package/dist/lib/render-errors.js

@@ -14,6 +14,7 @@ function renderMissingStorefront({
     message: outputContent`${outputToken.errorText(
       "Couldn\u2019t find Hydrogen storefront."
     )}`.value,
+    skipOclifErrorHandling: true,
     tryMessage: outputContent`Couldn’t find ${storefront.title} (ID: ${parseGid(
       storefront.id
     )}) on ${session.storeFqdn}. Check that the storefront exists and run ${outputToken.genericShellCommand(
@@ -29,6 +30,7 @@ function renderMissingLink({ session, cliCommand }) {
     name: "NoLinkedStorefrontError",
     type: 0,
     message: `No linked Hydrogen storefront on ${session.storeFqdn}`,
+    skipOclifErrorHandling: true,
     tryMessage: [
       "To pull environment variables or to deploy to Oxygen, link this project to a Hydrogen storefront. To select a storefront to link, run",
       { command: `${cliCommand} link` }

package/dist/lib/setups/i18n/replacers.test.js

@@ -71,6 +71,8 @@ describe("i18n replacers", () => {
             PRIVATE_STOREFRONT_API_TOKEN: string;
             PUBLIC_STORE_DOMAIN: string;
             PUBLIC_STOREFRONT_ID: string;
+            PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
+            PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
           }
 
           /**

package/dist/lib/shell.js

@@ -160,7 +160,7 @@ async function getCliCommand(directory = process.cwd(), forcePkgManager) {
   }
   let cli = "npx";
   const pkgManager = forcePkgManager ?? await getPackageManager(directory).catch(() => null);
-  if (pkgManager === "pnpm" || pkgManager === "yarn")
+  if (pkgManager === "bun" || pkgManager === "pnpm" || pkgManager === "yarn")
     cli = pkgManager;
   return `${cli} shopify hydrogen`;
 }