@shopify/cli-hydrogen 6.0.2 → 6.1.0

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

@@ -0,0 +1,227 @@
+import { parse } from 'stack-trace';
+
+function addInspectorConsoleLogger(inspector) {
+  inspector.ws.addEventListener("message", async (event) => {
+    if (typeof event.data !== "string") {
+      console.error("Unrecognised devtools event:", event);
+      return;
+    }
+    const evt = JSON.parse(event.data);
+    inspector.cleanupMessageQueue(evt);
+    if (evt.method === "Runtime.consoleAPICalled") {
+      await logConsoleMessage(evt.params, inspector);
+    } else if (evt.method === "Runtime.exceptionThrown") {
+      console.error(
+        await createErrorFromException(evt.params.exceptionDetails, inspector)
+      );
+    }
+  });
+}
+async function createErrorFromException(exceptionDetails, inspector) {
+  const errorProperties = {};
+  const sourceMapConsumer = await inspector.getSourceMapConsumer();
+  if (sourceMapConsumer !== void 0) {
+    const message = exceptionDetails.exception?.description?.split("\n")[0];
+    const stack = exceptionDetails.stackTrace?.callFrames;
+    const formatted = formatStructuredError(sourceMapConsumer, message, stack);
+    errorProperties.message = exceptionDetails.text;
+    errorProperties.stack = formatted;
+  } else {
+    errorProperties.message = exceptionDetails.text + " " + (exceptionDetails.exception?.description ?? "");
+  }
+  return inspector.reconstructError(
+    errorProperties,
+    exceptionDetails.exception
+  );
+}
+async function createErrorFromLog(ro, inspector) {
+  if (ro.subtype !== "error" || ro.preview?.subtype !== "error") {
+    throw new Error("Not an error object");
+  }
+  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
+  };
+  return inspector.reconstructError(errorProperties, ro);
+}
+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, inspector) {
+  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 error = await createErrorFromLog(ro, inspector);
+              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})`);
+          }
+        }
+      }
+    } catch {
+    }
+  });
+  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 { addInspectorConsoleLogger, createErrorFromException, createErrorFromLog, formatStack, formatStructuredError };

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

@@ -0,0 +1,200 @@
+import crypto from 'node:crypto';
+import { readFileSync } from 'node:fs';
+import { createServer } from 'node:http';
+import { WebSocketServer } from 'ws';
+import { request } from 'undici';
+
+const CFW_DEVTOOLS = "https://devtools.devprod.cloudflare.dev";
+const H2_FAVICON_URL = "https://cdn.shopify.com/s/files/1/0598/4822/8886/files/favicon.svg";
+function createInspectorProxy(port, sourceFilePath, newInspectorConnection) {
+  const sessionId = crypto.randomUUID();
+  let debuggerWs = void 0;
+  let inspector = newInspectorConnection;
+  let isDevToolsInBrowser = false;
+  const sourceMapPathname = "/__index.js.map";
+  const sourceMapURL = `http://localhost:${port}${sourceMapPathname}`;
+  const server = createServer((req, res) => {
+    const [url = "/", queryString = ""] = req.url?.split("?") || [];
+    switch (url) {
+      case "/json/version":
+        res.setHeader("Content-Type", "application/json");
+        res.end(
+          JSON.stringify({ Browser: "hydrogen/v2", "Protocol-Version": "1.3" })
+        );
+        break;
+      case "/json":
+      case "/json/list":
+        {
+          res.setHeader("Content-Type", "application/json");
+          const localHost = `localhost:${port}/ws`;
+          const devtoolsFrontendUrl = `devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=${localHost}`;
+          const devtoolsFrontendUrlCompat = `devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=${localHost}`;
+          res.end(
+            JSON.stringify([
+              {
+                id: sessionId,
+                type: "node",
+                webSocketDebuggerUrl: `ws://${localHost}`,
+                devtoolsFrontendUrl,
+                devtoolsFrontendUrlCompat,
+                // Below are fields that are visible in the DevTools UI.
+                title: "Hydrogen / Oxygen Worker",
+                faviconUrl: H2_FAVICON_URL,
+                url: "https://" + new URL(inspector.ws.url).host
+              }
+            ])
+          );
+        }
+        return;
+      case sourceMapPathname:
+        res.setHeader("Content-Type", "text/plain");
+        res.setHeader("Cache-Control", "no-store");
+        res.setHeader(
+          "Access-Control-Allow-Origin",
+          req.headers.origin ?? "devtools://devtools"
+        );
+        res.end(readFileSync(sourceFilePath + ".map", "utf-8"));
+        break;
+      case "/favicon.ico":
+        proxyHttp(H2_FAVICON_URL, req.headers, res);
+        break;
+      case "/":
+        if (!queryString) {
+          res.statusCode = 302;
+          res.setHeader(
+            "Location",
+            `/?experiments=true&v8only=true&debugger=true&ws=localhost:${port}/ws`
+          );
+          res.end();
+        } else {
+          proxyHttp(
+            CFW_DEVTOOLS + "/js_app",
+            req.headers,
+            res,
+            (content) => (
+              // HTML from DevTools comes without closing <body> and <html> tags.
+              // The browser closes them automatically, then modifies the DOM with JS.
+              // This adds a loading indicator before the JS kicks in and modifies the DOM.
+              content + '<div style="display: flex; flex-direction: column; align-items: center; padding-top: 20px; font-family: Arial; color: white">Loading DevTools...</div></body></html>'
+            )
+          );
+        }
+        break;
+      default:
+        if (url === "/panels/sources/sources-meta.js" || url.startsWith("/core/i18n/locales/") && url.endsWith(".json")) {
+          proxyHttp(
+            CFW_DEVTOOLS + url,
+            req.headers,
+            res,
+            (content) => content.replace(/['"]Cloudflare['"]/g, '"Hydrogen"')
+          );
+        } else {
+          proxyHttp(CFW_DEVTOOLS + url, req.headers, res);
+        }
+        break;
+    }
+  });
+  const wsServer = new WebSocketServer({ server, clientTracking: true });
+  server.listen(port);
+  let messageBuffer = [];
+  wsServer.on("connection", (ws, req) => {
+    if (wsServer.clients.size > 1) {
+      console.error(
+        "Tried to open a new devtools window when a previous one was already open."
+      );
+      ws.close(1013, "Too many clients; only one can be connected at a time");
+    } else {
+      inspector.ws.send(
+        JSON.stringify({ id: 1e8, method: "Debugger.disable" })
+      );
+      debuggerWs?.removeEventListener("message", sendMessageToInspector);
+      debuggerWs = ws;
+      isDevToolsInBrowser = /mozilla/i.test(req.headers["user-agent"] ?? "");
+      debuggerWs.addEventListener("message", sendMessageToInspector);
+      debuggerWs.addEventListener("close", () => {
+        debuggerWs?.removeEventListener("message", sendMessageToInspector);
+        debuggerWs = void 0;
+      });
+      messageBuffer.forEach(sendMessageToDebugger);
+      messageBuffer = [];
+    }
+  });
+  if (inspector.ws)
+    onInspectorConnection();
+  function onInspectorConnection() {
+    inspector.ws.addEventListener("message", sendMessageToDebugger);
+    debuggerWs?.send(
+      JSON.stringify({
+        method: "Runtime.consoleAPICalled",
+        params: {
+          type: "warning",
+          args: [
+            {
+              type: "string",
+              value: "Source code changed. Please reload the DevTools to reconnect the debugger."
+            }
+          ],
+          executionContextId: Date.now(),
+          timestamp: Date.now()
+        }
+      })
+    );
+    debuggerWs?.close(1001, "Source code changed");
+  }
+  function sendMessageToInspector(event) {
+    inspector.ws.send(event.data);
+  }
+  function sendMessageToDebugger(event) {
+    if (isDevToolsInBrowser) {
+      event = enhanceDevToolsEvent(event, sourceMapURL);
+    }
+    if (debuggerWs) {
+      debuggerWs.send(event.data);
+    } else {
+      messageBuffer.push(event);
+    }
+  }
+  return {
+    updateInspectorConnection(newConnection) {
+      inspector = newConnection;
+      onInspectorConnection();
+    }
+  };
+}
+function enhanceDevToolsEvent(event, sourceMapUrl) {
+  const message = JSON.parse(event.data);
+  if (message.method === "Debugger.scriptParsed") {
+    if (message.params.sourceMapURL === "index.js.map") {
+      message.params.sourceMapURL = sourceMapUrl;
+    }
+  }
+  return { ...event, data: JSON.stringify(message) };
+}
+function proxyHttp(url, originalHeaders, nodeResponse, contentReplacer) {
+  const headers = Object.fromEntries(Object.entries(originalHeaders));
+  delete headers["host"];
+  delete headers["cookie"];
+  if (contentReplacer)
+    delete headers["accept-encoding"];
+  return request(url, { responseHeader: "raw", headers }).then((response) => {
+    nodeResponse.statusCode = response.statusCode;
+    if (nodeResponse.statusCode === 404) {
+      return nodeResponse.end("Not found");
+    }
+    Object.entries(response.headers).forEach(([key, value]) => {
+      if (value) {
+        nodeResponse.setHeader(key, value);
+      }
+    });
+    if (contentReplacer) {
+      return response.body?.text().then(contentReplacer).then(nodeResponse.end.bind(nodeResponse));
+    }
+    return response.body.pipe(nodeResponse);
+  }).catch((err) => {
+    console.error(err);
+    nodeResponse.statusCode = 500;
+    nodeResponse.end("Internal error");
+  });
+}
+
+export { createInspectorProxy };