@shopify/cli-hydrogen 5.2.3 → 5.3.0

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

@@ -0,0 +1,392 @@
+import { dirname } from 'node:path';
+import { readFile } from 'node:fs/promises';
+import { SourceMapConsumer } from 'source-map';
+import { parse } from 'stack-trace';
+import WebSocket from 'ws';
+
+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;
+  } catch (error) {
+    console.error("Error attempting to retrieve debugger URL:", error);
+  }
+}
+function connectToInspector({
+  inspectorUrl,
+  sourceMapPath
+}) {
+  const messageCounterRef = { value: -1 };
+  const getMessageId = () => messageCounterRef.value--;
+  const pendingMessages = /* @__PURE__ */ new Map();
+  const ws = new WebSocket(inspectorUrl);
+  let keepAliveInterval;
+  const isClosed = () => ws.readyState === WebSocket.CLOSED || ws.readyState === WebSocket.CLOSING;
+  const send = (method, params) => {
+    if (!isClosed()) {
+      const id = getMessageId();
+      let promiseResolve = void 0;
+      const promise = new Promise(
+        (resolve) => promiseResolve = resolve
+      );
+      pendingMessages.set(id, promiseResolve);
+      ws.send(JSON.stringify({ id, method, params }));
+      return promise;
+    }
+    return Promise.resolve(void 0);
+  };
+  const cleanupMessageQueue = (data) => {
+    try {
+      if (data?.id < 0) {
+        const resolve = pendingMessages.get(data.id);
+        if (resolve !== void 0) {
+          pendingMessages.delete(data.id);
+          resolve(data.result);
+        }
+        return true;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+    return false;
+  };
+  function getPropertyValue(name, response) {
+    return response?.result.find((prop) => prop.name === name)?.value;
+  }
+  async function reconstructError(initialProperties, ro) {
+    let errorProperties = { ...initialProperties };
+    const objectId = ro?.objectId;
+    if (objectId) {
+      const [sourceMapConsumer, getPropertiesResponse] = await Promise.all([
+        getSourceMapConsumer(),
+        send("Runtime.getProperties", {
+          objectId,
+          ownProperties: false,
+          accessorPropertiesOnly: false,
+          generatePreview: false,
+          nonIndexedPropertiesOnly: false
+        })
+      ]);
+      const message = getPropertyValue("message", getPropertiesResponse);
+      if (message?.value) {
+        errorProperties.message = message.value;
+      }
+      const stack = getPropertyValue("stack", getPropertiesResponse);
+      if (stack?.value) {
+        errorProperties.stack = sourceMapConsumer ? formatStack(sourceMapConsumer, stack.value) : stack.value;
+      }
+      const cause = getPropertyValue("cause", getPropertiesResponse);
+      if (cause) {
+        errorProperties.cause = cause.description ?? cause.value;
+        if (cause.subtype === "error" && sourceMapConsumer && cause.description !== void 0) {
+          errorProperties.stack = formatStack(
+            sourceMapConsumer,
+            cause.description
+          );
+        }
+      }
+      const isDomException = ro?.className === "DOMException";
+      if (isDomException) {
+        const stackDescriptor = getPropertiesResponse?.result.find(
+          (prop) => prop.name === "stack"
+        );
+        const getObjectId = stackDescriptor?.get?.objectId;
+        if (getObjectId !== void 0) {
+          const callFunctionResponse = await send("Runtime.callFunctionOn", {
+            objectId,
+            functionDeclaration: "function invokeGetter(getter) { return Reflect.apply(getter, this, []); }",
+            arguments: [{ objectId: getObjectId }],
+            silent: true
+          });
+          if (callFunctionResponse !== void 0) {
+            const stack2 = callFunctionResponse.result.value;
+            if (typeof stack2 === "string" && sourceMapConsumer !== void 0) {
+              errorProperties.stack = formatStack(sourceMapConsumer, stack2);
+            } else {
+              try {
+                errorProperties.stack = JSON.stringify(stack2);
+              } catch {
+              }
+            }
+          }
+        }
+      }
+    }
+    const error = new Error(errorProperties.message);
+    error.stack = errorProperties.stack;
+    if (errorProperties.cause) {
+      error.cause = errorProperties.cause;
+    }
+    return error;
+  }
+  const sourceMapAbortController = new AbortController();
+  let sourceMapConsumerPromise;
+  const getSourceMapConsumer = () => {
+    return sourceMapConsumerPromise ??= (async () => {
+      if (!sourceMapPath || sourceMapAbortController.signal.aborted) {
+        return;
+      }
+      try {
+        const mapContent = await readFile(sourceMapPath, "utf-8");
+        if (sourceMapAbortController.signal.aborted)
+          return;
+        const map = JSON.parse(mapContent);
+        map.sourceRoot = dirname(sourceMapPath);
+        const sourceMapConsumer = await new SourceMapConsumer(map);
+        if (sourceMapAbortController.signal.aborted) {
+          sourceMapConsumer.destroy();
+          return;
+        }
+        sourceMapAbortController.signal.addEventListener("abort", () => {
+          sourceMapConsumerPromise = Promise.resolve(void 0);
+          sourceMapConsumer.destroy();
+        });
+        return sourceMapConsumer;
+      } catch {
+      }
+    })();
+  };
+  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);
+  });
+  ws.on("unexpected-response", () => {
+    console.log("Waiting for connection...");
+  });
+  ws.once("close", () => {
+    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})`);
+          }
+        }
+      }
+    } 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 { connectToInspector, findInspectorUrl, mapConsoleAPIMessageTypeToConsoleMethod };

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

@@ -0,0 +1,182 @@
+import { Miniflare, NoOpLog, Response, Request } from 'miniflare';
+import { resolvePath } from '@shopify/cli-kit/node/path';
+import { glob, readFile, createFileReadStream, fileSize } 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 { findPort } from '../find-port.js';
+import { OXYGEN_HEADERS_MAP, logRequestLine } from './common.js';
+
+async function startWorkerdServer({
+  root,
+  port = DEFAULT_PORT,
+  watch = false,
+  buildPathWorkerFile,
+  buildPathClient,
+  env
+}) {
+  const inspectorPort = await findPort(8787);
+  const oxygenHeadersMap = Object.values(OXYGEN_HEADERS_MAP).reduce(
+    (acc, item) => {
+      acc[item.name] = item.defaultValue;
+      return acc;
+    },
+    {}
+  );
+  const buildMiniOxygenOptions = async () => ({
+    cf: false,
+    verbose: false,
+    port,
+    log: new NoOpLog(),
+    liveReload: watch,
+    inspectorPort,
+    host: "localhost",
+    workers: [
+      {
+        name: "mini-oxygen",
+        modules: true,
+        script: `export default { fetch: ${miniOxygenHandler.toString()} }`,
+        bindings: {
+          initialAssets: await glob("**/*", { cwd: buildPathClient }),
+          oxygenHeadersMap
+        },
+        serviceBindings: {
+          hydrogen: "hydrogen",
+          assets: createAssetHandler(buildPathClient),
+          logRequest
+        }
+      },
+      {
+        name: "hydrogen",
+        modules: [
+          {
+            type: "ESModule",
+            path: resolvePath(root, buildPathWorkerFile),
+            contents: await readFile(resolvePath(root, buildPathWorkerFile))
+          }
+        ],
+        bindings: { ...env },
+        compatibilityFlags: ["streams_enable_constructors"],
+        compatibilityDate: "2022-10-31"
+      }
+    ]
+  });
+  let miniOxygenOptions = await buildMiniOxygenOptions();
+  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;
+  return {
+    port,
+    listeningAt,
+    async reload(nextOptions) {
+      miniOxygenOptions = await buildMiniOxygenOptions();
+      if (nextOptions) {
+        const hydrogen = miniOxygenOptions.workers.find(
+          (worker) => worker.name === "hydrogen"
+        );
+        if (hydrogen) {
+          hydrogen.bindings = { ...nextOptions?.env ?? env };
+        }
+      }
+      cleanupInspector?.();
+      await miniOxygen.setOptions(miniOxygenOptions);
+      inspectorUrl ??= await findInspectorUrl(inspectorPort);
+      if (inspectorUrl) {
+        cleanupInspector = connectToInspector({ inspectorUrl, sourceMapPath });
+      }
+    },
+    showBanner(options) {
+      console.log("");
+      renderSuccess({
+        headline: `${options?.headlinePrefix ?? ""}MiniOxygen (Unstable Worker Runtime) ${options?.mode ?? "development"} server running.`,
+        body: [
+          `View ${options?.appName ?? "Hydrogen"} app: ${listeningAt}`,
+          ...options?.extraLines ?? []
+        ]
+      });
+      console.log("");
+    },
+    async close() {
+      await miniOxygen.dispose();
+    }
+  };
+}
+async function miniOxygenHandler(request, env, context) {
+  if (request.method === "GET") {
+    const pathname = new URL(request.url).pathname;
+    if (pathname.startsWith("/debug-network")) {
+      return new Response(
+        "The Network Debugger is currently not supported in the Worker Runtime."
+      );
+    }
+    if (new Set(env.initialAssets).has(pathname.slice(1))) {
+      const response2 = await env.assets.fetch(
+        new Request(request.url, {
+          signal: request.signal,
+          headers: request.headers
+        })
+      );
+      if (response2.status !== 404)
+        return response2;
+    }
+  }
+  const requestInit = {
+    headers: {
+      ...env.oxygenHeadersMap,
+      ...Object.fromEntries(request.headers.entries())
+    }
+  };
+  const startTimeMs = Date.now();
+  const response = await env.hydrogen.fetch(request, requestInit);
+  const durationMs = Date.now() - startTimeMs;
+  context.waitUntil(
+    env.logRequest.fetch(
+      new Request(request.url, {
+        method: request.method,
+        signal: request.signal,
+        headers: {
+          ...Object.fromEntries(request.headers.entries()),
+          "h2-duration-ms": String(durationMs),
+          "h2-response-status": String(response.status)
+        }
+      })
+    )
+  );
+  return response;
+}
+function createAssetHandler(buildPathClient) {
+  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 });
+  };
+}
+async function logRequest(request) {
+  logRequestLine(request, {
+    responseStatus: Number(request.headers.get("h2-response-status") || 200),
+    durationMs: Number(request.headers.get("h2-duration-ms") || 0)
+  });
+  return new Response("ok");
+}
+
+export { startWorkerdServer };

package/dist/lib/onboarding/common.js

@@ -1,5 +1,5 @@
 import { readdir } from 'node:fs/promises';
-import { packageManagerUsedForCreating, installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
+import { packageManagerFromUserAgent, installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
 import { renderConfirmationPrompt, renderInfo, renderTextPrompt, renderSelectPrompt, renderFatalError, renderWarning, renderSuccess } from '@shopify/cli-kit/node/ui';
 import { hyphenate, capitalize } from '@shopify/cli-kit/common/string';
 import { joinPath, resolvePath, basename } from '@shopify/cli-kit/node/path';
@@ -39,7 +39,7 @@ async function handleI18n(controller, cliCommand, flagI18n) {
   };
 }
 async function handleRouteGeneration(controller, flagRoutes) {
-  const routesToScaffold = flagRoutes ? "all" : await renderRoutePrompt({
+  const routesToScaffold = flagRoutes === true ? "all" : flagRoutes === false ? [] : await renderRoutePrompt({
     abortSignal: controller.signal
   });
   const needsRouteGeneration = routesToScaffold === "all" || routesToScaffold.length > 0;
@@ -200,7 +200,7 @@ async function handleLanguage(projectDir, controller, flagLanguage) {
   };
 }
 async function handleCssStrategy(projectDir, controller, flagStyling) {
-  const selection = flagStyling ? flagStyling : await renderCssPrompt({
+  const selection = flagStyling ?? await renderCssPrompt({
     abortSignal: controller.signal,
     extraChoices: { none: "Skip and set up later" }
   });
@@ -226,7 +226,7 @@ async function handleCssStrategy(projectDir, controller, flagStyling) {
   };
 }
 async function handleDependencies(projectDir, controller, shouldInstallDeps) {
-  const detectedPackageManager = await packageManagerUsedForCreating();
+  const detectedPackageManager = packageManagerFromUserAgent();
   let actualPackageManager = "npm";
   if (shouldInstallDeps !== false) {
     if (detectedPackageManager === "unknown") {

package/dist/lib/onboarding/local.js

@@ -199,7 +199,7 @@ async function setupLocalStarterTemplate(options, controller) {
     );
     const { setupRoutes } = await handleRouteGeneration(
       controller,
-      options.routes || true
+      options.routes ?? true
       // TODO: Remove default value when multi-select UI component is available
     );
     setupSummary.i18n = i18nStrategy;

package/dist/lib/render-errors.js

@@ -30,7 +30,7 @@ function renderMissingLink({ session, cliCommand }) {
     type: 0,
     message: `No linked Hydrogen storefront on ${session.storeFqdn}`,
     tryMessage: [
-      "To pull environment variables, link this project to a Hydrogen storefront. To select a storefront to link, run",
+      "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/routes/generate.js

@@ -14,7 +14,7 @@ const NO_LOCALE_PATTERNS = [/robots\.txt/];
 const ROUTE_MAP = {
   home: ["_index", "$"],
   page: "pages*",
-  cart: "cart",
+  cart: ["cart", "cart.$lines", "discount.$code"],
   products: "products*",
   collections: "collections*",
   policies: "policies*",

package/dist/virtual-routes/routes/index.jsx

@@ -66,8 +66,8 @@ function Index() {
         "You\u2019re seeing this because you don\u2019t have a home route in your project yet. ",
         /* @__PURE__ */ jsx("br", {}),
         "Run ",
-        /* @__PURE__ */ jsx("code", { children: "h2 generate route home" }),
-        " to create your home route. Learn more about",
+        /* @__PURE__ */ jsx("code", { children: "h2 setup" }),
+        " to scaffold standard Shopify routes. Learn more about",
         ` `,
         /* @__PURE__ */ jsx(CreateRoutesLink, {})
       ] }) : /* @__PURE__ */ jsxs("p", { children: [
@@ -80,8 +80,8 @@ function Index() {
         /* @__PURE__ */ jsx("code", { children: "h2 link && h2 env pull" }),
         ". Then, run",
         " ",
-        /* @__PURE__ */ jsx("code", { children: "h2 generate route home" }),
-        " to create your first route.",
+        /* @__PURE__ */ jsx("code", { children: "h2 setup" }),
+        " to scaffold standard Shopify routes.",
         /* @__PURE__ */ jsx("br", {}),
         "Learn more about",
         ` `,