@shopify/cli-hydrogen 6.0.2 → 7.0.0

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

@@ -1,25 +1,28 @@
-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 { Response, Miniflare, Request, fetch, 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 { outputContent, outputToken } from '@shopify/cli-kit/node/output';
+import colors from '@shopify/cli-kit/node/colors';
+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 { setConstructors, handleDebugNetworkRequest, H2O_BINDING_NAME, createLogRequestEvent } 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,44 +31,57 @@ async function startWorkerdServer({
     {}
   );
   setConstructors({ Response });
+  const absoluteBundlePath = resolvePath(root, buildPathWorkerFile);
+  const handleAssets = createAssetHandler(assetsPort);
+  const staticAssetExtensions = STATIC_ASSET_EXTENSIONS.slice();
+  let stringifiedOxygenHandler = miniOxygenHandler.toString();
+  if (process.env.NODE_ENV === "test") {
+    stringifiedOxygenHandler = stringifiedOxygenHandler.replace(
+      /\w*vite_ssr_import[\w\d]*\./g,
+      ""
+    );
+  }
   const buildMiniOxygenOptions = async () => ({
     cf: false,
     verbose: false,
     port: appPort,
-    inspectorPort,
+    inspectorPort: privateInspectorPort,
     log: new NoOpLog(),
     liveReload: watch,
     host: "localhost",
+    handleRuntimeStdio() {
+    },
     workers: [
       {
         name: "mini-oxygen",
         modules: true,
-        script: `export default { fetch: ${miniOxygenHandler.toString()} }`,
+        script: `export default { fetch: ${stringifiedOxygenHandler} }`,
         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"],
         compatibilityDate: "2022-10-31",
         bindings: { ...env },
         serviceBindings: {
-          [H2O_BINDING_NAME]: logRequestEvent
+          [H2O_BINDING_NAME]: createLogRequestEvent({ absoluteBundlePath })
         }
       }
     ]
@@ -74,8 +90,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 +113,31 @@ 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 isVSCode = process.env.TERM_PROGRAM === "vscode";
+      const debuggingDocsLink = "https://h2o.fyi/debugging/server-code" + (isVSCode ? "#visual-studio-code" : "#step-2-attach-a-debugger");
+      const debuggerMessage = outputContent`\n\nDebugging enabled on port ${String(
+        publicInspectorPort
+      )}.\nAttach a ${outputToken.link(
+        colors.yellow(isVSCode ? "VSCode debugger" : "debugger"),
+        debuggingDocsLink
+      )} or open DevTools in http://localhost:${String(publicInspectorPort)}.`.value;
       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 +148,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 +188,18 @@ 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/missing-routes.js

@@ -23,12 +23,15 @@ const REQUIRED_ROUTES = [
   // 'discount/:discountCode', => Handled in storefrontRedirect
   "account",
   "account/login",
-  "account/register",
   // 'account/addresses',
   // 'account/orders',
   "account/orders/:orderId",
-  "account/reset/:id/:token",
-  "account/activate/:id/:token"
+  // -- Added for CAAPI:
+  "account/authorize"
+  // -- These were removed when migrating to CAAPI:
+  // 'account/register',
+  // 'account/reset/:id/:token',
+  // 'account/activate/:id/:token',
   //   'password',
   //   'opening_soon',
 ];

package/dist/lib/onboarding/common.js

@@ -16,6 +16,7 @@ import { transpileProject } from '../transpile/index.js';
 import { renderCssPrompt, setupCssStrategy, CSS_STRATEGY_NAME_MAP } from '../setups/css/index.js';
 import { renderRoutePrompt, generateRoutes, generateProjectFile } from '../setups/routes/generate.js';
 import { execAsync } from '../process.js';
+import { getStorefronts } from '../graphql/admin/link-storefront.js';
 
 const LANGUAGES = {
   js: "JavaScript",
@@ -68,7 +69,7 @@ async function handleRouteGeneration(controller, flagRoutes) {
 }
 function generateProjectEntries(options) {
   return Promise.all(
-    ["root", "entry.server", "entry.client"].map(
+    ["root", "entry.server", "entry.client", "../server.ts"].map(
       (filename) => generateProjectFile(filename, options)
     )
   );
@@ -108,12 +109,41 @@ async function handleCliShortcut(controller, cliCommand, flagShortcut) {
 async function handleStorefrontLink(controller) {
   const { session, config } = await login();
   renderLoginSuccess(config);
-  const title = await renderTextPrompt({
-    message: "New storefront name",
-    defaultValue: titleize(config.shopName),
-    abortSignal: controller.signal
+  const storefronts = await getStorefronts(session);
+  let selectedStorefront = await handleStorefrontSelection(storefronts);
+  let title;
+  if (selectedStorefront) {
+    title = selectedStorefront.title;
+  } else {
+    title = await renderTextPrompt({
+      message: "New storefront name",
+      defaultValue: titleize(config.shopName),
+      abortSignal: controller.signal
+    });
+  }
+  return {
+    ...config,
+    id: selectedStorefront?.id,
+    title,
+    session
+  };
+}
+async function handleStorefrontSelection(storefronts) {
+  const choices = [
+    {
+      label: "Create a new storefront",
+      value: null
+    },
+    ...storefronts.map(({ id, title, productionUrl }) => ({
+      label: `${title} (${productionUrl})`,
+      value: id
+    }))
+  ];
+  const storefrontId = await renderSelectPrompt({
+    message: "Select a Hydrogen storefront to link",
+    choices
   });
-  return { ...config, title, session };
+  return storefrontId ? storefronts.find(({ id }) => id === storefrontId) : void 0;
 }
 async function handleProjectLocation({
   storefrontInfo,
@@ -380,7 +410,7 @@ async function renderProjectReady(project, {
               {
                 link: {
                   label: "Guides",
-                  url: "https://shopify.dev/docs/custom-storefronts/hydrogen/building"
+                  url: "https://h2o.fyi/building"
                 }
               },
               {
@@ -434,7 +464,8 @@ async function renderProjectReady(project, {
 function createAbortHandler(controller, project) {
   return async function abort(error) {
     controller.abort();
-    if (typeof project !== "undefined") {
+    await Promise.resolve();
+    if (project?.directory) {
       await rmdir(project.directory, { force: true }).catch(() => {
       });
     }
@@ -457,4 +488,4 @@ function normalizeRoutePath(routePath) {
   return routePath.replace(/(^|\.)_index$/, "").replace(/((^|\.)[^\.]+)_\./g, "$1.").replace(/\.(?!\w+\])/g, "/").replace(/\$$/g, ":catchAll").replace(/\$/g, ":").replace(/[\[\]]/g, "").replace(/:\w*Handle/i, ":handle");
 }
 
-export { LANGUAGES, commitAll, createAbortHandler, createInitialCommit, generateProjectEntries, handleCliShortcut, handleCssStrategy, handleDependencies, handleI18n, handleLanguage, handleProjectLocation, handleRouteGeneration, handleStorefrontLink, renderProjectReady };
+export { LANGUAGES, commitAll, createAbortHandler, createInitialCommit, generateProjectEntries, handleCliShortcut, handleCssStrategy, handleDependencies, handleI18n, handleLanguage, handleProjectLocation, handleRouteGeneration, handleStorefrontLink, handleStorefrontSelection, renderProjectReady };

package/dist/lib/onboarding/local.js

@@ -37,7 +37,7 @@ async function setupLocalStarterTemplate(options, controller) {
   if (templateAction === "mock")
     project.storefrontTitle = "Mock.shop";
   const abort = createAbortHandler(controller, project);
-  const createStorefrontPromise = storefrontInfo && createStorefront(storefrontInfo.session, storefrontInfo.title).then(async ({ storefront, jobId }) => {
+  const createStorefrontPromise = storefrontInfo && !storefrontInfo.id && createStorefront(storefrontInfo.session, storefrontInfo.title).then(async ({ storefront, jobId }) => {
     if (jobId)
       await waitForJob(storefrontInfo.session, jobId);
     return storefront;
@@ -46,9 +46,9 @@ async function setupLocalStarterTemplate(options, controller) {
   let backgroundWorkPromise = copy(
     templateDir,
     project.directory,
-    // Filter out the `app` directory, which will be generated later
+    // Filter out the `app` directory and server.ts, which will be generated later
     {
-      filter: (filepath) => !/^(app|dist|node_modules)\//i.test(
+      filter: (filepath) => !/^(app\/|dist\/|node_modules\/|server\.ts)/i.test(
         relativePath(templateDir, filepath)
       )
     }
@@ -90,19 +90,23 @@ async function setupLocalStarterTemplate(options, controller) {
       )
     ];
     const envLeadingComment = "# The variables added in this file are only available locally in MiniOxygen.\n# Run `h2 link` to also inject environment variables from your storefront,\n# or `h2 env pull` to populate this file.";
-    if (storefrontInfo && createStorefrontPromise) {
+    let storefrontToLink;
+    if (storefrontInfo) {
       promises.push(
         // Save linked storefront in project
         setUserAccount(project.directory, storefrontInfo),
-        createStorefrontPromise.then(
-          (storefront) => (
-            // Save linked storefront in project
-            setStorefront(project.directory, storefront)
-          )
-        ),
         // Write empty dotenv file to fallback to remote Oxygen variables
         writeFile(joinPath(project.directory, ".env"), envLeadingComment)
       );
+      if (storefrontInfo.id) {
+        storefrontToLink = { id: storefrontInfo.id, title: storefrontInfo.title };
+      } else if (createStorefrontPromise) {
+        promises.push(
+          createStorefrontPromise.then((createdStorefront) => {
+            storefrontToLink = createdStorefront;
+          })
+        );
+      }
     } else if (templateAction === "mock") {
       promises.push(
         // Set required env vars
@@ -115,7 +119,11 @@ async function setupLocalStarterTemplate(options, controller) {
         )
       );
     }
-    return Promise.all(promises).catch(abort);
+    return Promise.all(promises).then(() => {
+      if (storefrontToLink) {
+        return setStorefront(project.directory, storefrontToLink);
+      }
+    }).catch(abort);
   });
   const { language, transpileProject } = await handleLanguage(
     project.directory,

package/dist/lib/onboarding/remote.js

@@ -1,38 +1,58 @@
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { copyFile } from '@shopify/cli-kit/node/fs';
+import { fileExists, copyFile } from '@shopify/cli-kit/node/fs';
+import { readAndParsePackageJson } from '@shopify/cli-kit/node/node-package-manager';
 import { joinPath } from '@shopify/cli-kit/node/path';
 import { renderTasks, renderInfo } from '@shopify/cli-kit/node/ui';
 import { getLatestTemplates } from '../template-downloader.js';
-import { handleProjectLocation, createAbortHandler, handleLanguage, createInitialCommit, handleDependencies, commitAll, renderProjectReady } from './common.js';
+import { applyTemplateDiff } from '../template-diff.js';
+import { createAbortHandler, handleProjectLocation, handleLanguage, createInitialCommit, handleDependencies, commitAll, renderProjectReady } from './common.js';
 
 async function setupRemoteTemplate(options, controller) {
-  const isOfficialTemplate = options.template === "demo-store" || options.template === "hello-world";
-  if (!isOfficialTemplate) {
-    throw new AbortError(
-      "Only `demo-store` and `hello-world` are supported in --template flag for now.",
-      "Skip the --template flag to run the setup flow."
-    );
-  }
   const appTemplate = options.template;
+  let abort = createAbortHandler(controller);
   const backgroundDownloadPromise = getLatestTemplates({
     signal: controller.signal
-  }).catch((error) => {
-    throw abort(error);
-  });
+  }).then(async ({ templatesDir, examplesDir }) => {
+    const templatePath = joinPath(templatesDir, appTemplate);
+    const examplePath = joinPath(examplesDir, appTemplate);
+    if (await fileExists(templatePath)) {
+      return { templatesDir, sourcePath: templatePath };
+    }
+    if (await fileExists(examplePath)) {
+      return { templatesDir, sourcePath: examplePath };
+    }
+    throw new AbortError(
+      "Unknown value in --template flag.",
+      "Skip the --template flag or provide the name of a template or example in the Hydrogen repository."
+    );
+  }).catch(abort);
   const project = await handleProjectLocation({ ...options, controller });
   if (!project)
     return;
-  const abort = createAbortHandler(controller, project);
-  let backgroundWorkPromise = backgroundDownloadPromise.then(
-    ({ templatesDir }) => copyFile(joinPath(templatesDir, appTemplate), project.directory).catch(
-      abort
-    )
-  );
-  const { language, transpileProject } = await handleLanguage(
-    project.directory,
-    controller,
-    options.language
+  abort = createAbortHandler(controller, project);
+  let backgroundWorkPromise = backgroundDownloadPromise.then(async (result) => {
+    if (controller.signal.aborted)
+      return;
+    const { sourcePath: sourcePath2, templatesDir } = result;
+    const pkgJson = await readAndParsePackageJson(
+      joinPath(sourcePath2, "package.json")
+    );
+    if (pkgJson.scripts?.dev?.includes("--diff")) {
+      return applyTemplateDiff(
+        project.directory,
+        sourcePath2,
+        joinPath(templatesDir, "skeleton")
+      );
+    }
+    return copyFile(sourcePath2, project.directory);
+  }).catch(abort);
+  if (controller.signal.aborted)
+    return;
+  const { sourcePath } = await backgroundDownloadPromise;
+  const supportsTranspilation = await fileExists(
+    joinPath(sourcePath, "tsconfig.json")
   );
+  const { language, transpileProject } = supportsTranspilation ? await handleLanguage(project.directory, controller, options.language) : { language: "js", transpileProject: () => Promise.resolve() };
   backgroundWorkPromise = backgroundWorkPromise.then(() => transpileProject().catch(abort)).then(
     () => options.git ? createInitialCommit(project.directory) : void 0
   );
@@ -74,17 +94,17 @@ async function setupRemoteTemplate(options, controller) {
       }
     });
   }
+  if (controller.signal.aborted)
+    return;
   await renderTasks(tasks);
   if (options.git) {
     await commitAll(project.directory, "Lockfile");
   }
   await renderProjectReady(project, setupSummary);
-  if (isOfficialTemplate) {
-    renderInfo({
-      headline: `Your project will display inventory from ${options.template === "demo-store" ? "the Hydrogen Demo Store" : "Mock.shop"}.`,
-      body: `To connect this project to your Shopify store\u2019s inventory, update \`${project.name}/.env\` with your store ID and Storefront API key.`
-    });
-  }
+  renderInfo({
+    headline: `Your project will display inventory from ${options.template === "demo-store" ? "the Hydrogen Demo Store" : "Mock.shop"}.`,
+    body: `To connect this project to your Shopify store\u2019s inventory, update \`${project.name}/.env\` with your store ID and Storefront API key.`
+  });
   return {
     ...project,
     ...setupSummary

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/request-events.js

@@ -1,14 +1,15 @@
+import path from 'node:path';
 import { EventEmitter } from 'node:events';
 import { ReadableStream } from 'node:stream/web';
 import { getGraphiQLUrl } from './graphiql-url.js';
-import { Response } from '@shopify/mini-oxygen';
+import { mapSourcePosition } from 'source-map-support';
 
 const H2O_BINDING_NAME = "H2O_LOG_EVENT";
-let ResponseConstructor = Response;
+let ResponseConstructor;
 function setConstructors(constructors) {
   ResponseConstructor = constructors.Response;
 }
-const DEV_ROUTES = /* @__PURE__ */ new Set(["/graphiql", "/debug-network"]);
+const DEV_ROUTES = /* @__PURE__ */ new Set(["/graphiql", "/subrequest-profiler"]);
 const EVENT_MAP = {
   request: "Request",
   subrequest: "Sub request"
@@ -16,9 +17,9 @@ const EVENT_MAP = {
 async function getRequestInfo(request) {
   const data = await request.json();
   return {
-    id: data.requestId ?? "",
+    ...data,
+    requestId: data.requestId ?? "",
     eventType: data.eventType || "unknown",
-    startTime: data.startTime,
     endTime: data.endTime || Date.now(),
     purpose: data.purpose === "prefetch" ? "(prefetch)" : "",
     cacheStatus: data.cacheStatus ?? "",
@@ -34,33 +35,66 @@ async function clearHistory(request) {
   eventHistory.length = 0;
   return createResponse();
 }
-async function logRequestEvent(request) {
-  const url = new URL(request.url);
-  if (DEV_ROUTES.has(url.pathname)) {
-    return createResponse();
-  }
-  const { eventType, purpose, graphql, ...data } = await getRequestInfo(request);
-  let graphiqlLink = "";
-  let description = request.url;
-  if (eventType === "subrequest") {
-    description = graphql?.query.match(/(query|mutation)\s+(\w+)/)?.[0]?.replace(/\s+/, " ") || decodeURIComponent(url.search.slice(1));
-    if (graphql) {
-      graphiqlLink = getGraphiQLUrl({ graphql });
+function createLogRequestEvent(options) {
+  return async function logRequestEvent(request) {
+    const url = new URL(request.url);
+    if (DEV_ROUTES.has(url.pathname)) {
+      return createResponse();
+    }
+    const {
+      url: displayUrl,
+      displayName: displayNameData,
+      eventType,
+      purpose,
+      graphql,
+      stackInfo,
+      ...data
+    } = await getRequestInfo(request);
+    let graphiqlLink = "";
+    let descriptionUrl = request.url;
+    let displayName = displayNameData;
+    if (eventType === "subrequest") {
+      displayName = displayName || graphql?.query.match(/(query|mutation)\s+(\w+)/)?.[0]?.replace(/\s+/, " ");
+      descriptionUrl = displayUrl || request.url;
+      if (graphql) {
+        graphiqlLink = getGraphiQLUrl({ graphql });
+      }
+    }
+    let stackLine = null;
+    let stackLink = null;
+    if (stackInfo?.file) {
+      if (!path.isAbsolute(stackInfo.file) && options?.absoluteBundlePath) {
+        stackInfo.file = options.absoluteBundlePath;
+      }
+      const { source, line, column } = mapSourcePosition({
+        source: stackInfo.file,
+        line: stackInfo.line ?? 0,
+        column: stackInfo.column ?? 0
+      });
+      stackLine = `${source}:${line}:${column + 1}`;
+      stackLink = `vscode://${path.join("file", stackLine)}`;
+      stackLine = stackLine.split(path.sep + "app" + path.sep)[1] ?? stackLine;
+      if (stackInfo.func) {
+        stackLine = `${stackInfo.func.replace(/\d+$/, "")} (${stackLine})`;
+      }
     }
-  }
-  const event = {
-    event: EVENT_MAP[eventType] || eventType,
-    data: JSON.stringify({
-      ...data,
-      url: `${purpose} ${description}`.trim(),
-      graphiqlLink
-    })
+    const event = {
+      event: EVENT_MAP[eventType] || eventType,
+      data: JSON.stringify({
+        ...data,
+        displayName,
+        url: `${purpose} ${descriptionUrl}`.trim(),
+        graphiqlLink,
+        stackLine,
+        stackLink
+      })
+    };
+    eventHistory.push(event);
+    if (eventHistory.length > 100)
+      eventHistory.shift();
+    eventEmitter.emit("request", event);
+    return createResponse();
   };
-  eventHistory.push(event);
-  if (eventHistory.length > 100)
-    eventHistory.shift();
-  eventEmitter.emit("request", event);
-  return createResponse();
 }
 function streamRequestEvents(request) {
   const stream = new ReadableStream({
@@ -101,4 +135,4 @@ function handleDebugNetworkRequest(request) {
   return request.method === "DELETE" ? clearHistory() : streamRequestEvents(request);
 }
 
-export { DEV_ROUTES, H2O_BINDING_NAME, handleDebugNetworkRequest, logRequestEvent, setConstructors };
+export { DEV_ROUTES, H2O_BINDING_NAME, createLogRequestEvent, handleDebugNetworkRequest, setConstructors };