@shopify/cli-hydrogen 5.3.0 → 5.4.0

package/dist/commands/hydrogen/build.js

@@ -1,8 +1,8 @@
 import { Flags } from '@oclif/core';
 import Command from '@shopify/cli-kit/node/base-command';
-import { outputInfo, outputContent, outputToken, outputWarn } from '@shopify/cli-kit/node/output';
-import { rmdir, fileSize, fileExists, copyFile } from '@shopify/cli-kit/node/fs';
-import { resolvePath, relativePath } from '@shopify/cli-kit/node/path';
+import { outputInfo, outputWarn, outputContent, outputToken } from '@shopify/cli-kit/node/output';
+import { rmdir, fileSize, glob, readFile, writeFile, fileExists, copyFile } from '@shopify/cli-kit/node/fs';
+import { resolvePath, joinPath, relativePath } from '@shopify/cli-kit/node/path';
 import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
 import colors from '@shopify/cli-kit/node/colors';
 import { getProjectPaths, getRemixConfig, handleRemixImportFail, assertOxygenChecks } from '../../lib/remix-config.js';
@@ -11,8 +11,9 @@ import { checkLockfileStatus } from '../../lib/check-lockfile.js';
 import { findMissingRoutes } from '../../lib/missing-routes.js';
 import { muteRemixLogs, createRemixLogger } from '../../lib/log.js';
 import { codegen } from '../../lib/codegen.js';
-import { buildBundleAnalysis, getBundleAnalysisSummary } from '../../lib/bundle/analyzer.js';
+import { hasMetafile, buildBundleAnalysis, getBundleAnalysisSummary } from '../../lib/bundle/analyzer.js';
 import { AbortError } from '@shopify/cli-kit/node/error';
+import { isCI } from '../../lib/is-ci.js';
 
 const LOG_WORKER_BUILT = "\u{1F4E6} Worker built";
 const MAX_WORKER_BUNDLE_SIZE = 10;
@@ -26,21 +27,27 @@ class Build extends Command {
       allowNo: true,
       default: true
     }),
-    ["bundle-stats"]: Flags.boolean({
+    "bundle-stats": Flags.boolean({
       description: "Show a bundle size summary after building.",
       default: true,
       allowNo: true
     }),
+    "lockfile-check": Flags.boolean({
+      description: "Checks that there is exactly 1 valid lockfile in the project.",
+      env: "SHOPIFY_HYDROGEN_FLAG_LOCKFILE_CHECK",
+      default: true,
+      allowNo: true
+    }),
     "disable-route-warning": Flags.boolean({
       description: "Disable warning about missing standard routes.",
       env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_ROUTE_WARNING"
     }),
-    ["codegen-unstable"]: Flags.boolean({
+    "codegen-unstable": Flags.boolean({
       description: "Generate types for the Storefront API queries found in your project.",
       required: false,
       default: false
     }),
-    ["codegen-config-path"]: commonFlags.codegenConfigPath,
+    "codegen-config-path": commonFlags.codegenConfigPath,
     base: deprecated("--base")(),
     entry: deprecated("--entry")(),
     target: deprecated("--target")()
@@ -62,6 +69,7 @@ async function runBuild({
   sourcemap = false,
   disableRouteWarning = false,
   bundleStats = true,
+  lockfileCheck = true,
   assetPath
 }) {
   if (!process.env.NODE_ENV) {
@@ -71,7 +79,10 @@ async function runBuild({
     process.env.HYDROGEN_ASSET_BASE_URL = assetPath;
   }
   const { root, buildPath, buildPathClient, buildPathWorkerFile, publicPath } = getProjectPaths(directory);
-  await Promise.all([checkLockfileStatus(root), muteRemixLogs()]);
+  if (lockfileCheck) {
+    await checkLockfileStatus(root, isCI());
+  }
+  await muteRemixLogs();
   console.time(LOG_WORKER_BUILT);
   outputInfo(`
 \u{1F3D7}\uFE0F  Building in ${process.env.NODE_ENV} mode...`);
@@ -104,35 +115,21 @@ async function runBuild({
   if (process.env.NODE_ENV !== "development") {
     console.timeEnd(LOG_WORKER_BUILT);
     const sizeMB = await fileSize(buildPathWorkerFile) / (1024 * 1024);
-    const bundleAnalysisPath = await buildBundleAnalysis(buildPath);
-    outputInfo(
-      outputContent`   ${colors.dim(
-        relativePath(root, buildPathWorkerFile)
-      )}  ${outputToken.link(
-        colors.yellow(sizeMB.toFixed(2) + " MB"),
-        bundleAnalysisPath
-      )}\n`
-    );
-    if (bundleStats && sizeMB < MAX_WORKER_BUNDLE_SIZE) {
-      outputInfo(
-        outputContent`${await getBundleAnalysisSummary(buildPathWorkerFile) || "\n"}\n    │\n    └─── ${outputToken.link(
-          "Complete analysis: " + bundleAnalysisPath,
-          bundleAnalysisPath
-        )}\n\n`
+    if (await hasMetafile(buildPath)) {
+      await writeBundleAnalysis(
+        buildPath,
+        root,
+        buildPathWorkerFile,
+        sizeMB,
+        bundleStats,
+        remixConfig
       );
-    }
-    if (sizeMB >= MAX_WORKER_BUNDLE_SIZE) {
-      throw new AbortError(
-        "\u{1F6A8} Worker bundle exceeds 10 MB! Oxygen has a maximum worker bundle size of 10 MB.",
-        outputContent`See the bundle analysis for a breakdown of what is contributing to the bundle size:\n${outputToken.link(
-          bundleAnalysisPath,
-          bundleAnalysisPath
-        )}`
-      );
-    } else if (sizeMB >= 5) {
-      outputWarn(
-        `\u{1F6A8} Worker bundle exceeds 5 MB! This can delay your worker response.${remixConfig.serverMinify ? "" : " Minify your bundle by adding `serverMinify: true` to remix.config.js."}
-`
+    } else {
+      await writeSimpleBuildStatus(
+        root,
+        buildPathWorkerFile,
+        sizeMB,
+        remixConfig
       );
     }
   }
@@ -149,10 +146,75 @@ This build is missing ${missingRoutes.length} route${missingRoutes.length > 1 ?
       );
     }
   }
+  if (process.env.NODE_ENV !== "development") {
+    await cleanClientSourcemaps(buildPathClient);
+  }
   if (!process.env.SHOPIFY_UNIT_TEST && !assetPath) {
     process.exit(0);
   }
 }
+async function cleanClientSourcemaps(buildPathClient) {
+  const bundleFiles = await glob(joinPath(buildPathClient, "**/*.js"));
+  await Promise.all(
+    bundleFiles.map(async (filePath) => {
+      const file = await readFile(filePath);
+      return await writeFile(
+        filePath,
+        file.replace(/\/\/# sourceMappingURL=.+\.js\.map$/gm, "")
+      );
+    })
+  );
+}
+async function writeBundleAnalysis(buildPath, root, buildPathWorkerFile, sizeMB, bundleStats, remixConfig) {
+  const bundleAnalysisPath = await buildBundleAnalysis(buildPath);
+  outputInfo(
+    outputContent`   ${colors.dim(
+      relativePath(root, buildPathWorkerFile)
+    )}  ${outputToken.link(
+      colors.yellow(sizeMB.toFixed(2) + " MB"),
+      bundleAnalysisPath
+    )}\n`
+  );
+  if (bundleStats && sizeMB < MAX_WORKER_BUNDLE_SIZE) {
+    outputInfo(
+      outputContent`${await getBundleAnalysisSummary(buildPathWorkerFile) || "\n"}\n    │\n    └─── ${outputToken.link(
+        "Complete analysis: " + bundleAnalysisPath,
+        bundleAnalysisPath
+      )}\n\n`
+    );
+  }
+  if (sizeMB >= MAX_WORKER_BUNDLE_SIZE) {
+    throw new AbortError(
+      "\u{1F6A8} Worker bundle exceeds 10 MB! Oxygen has a maximum worker bundle size of 10 MB.",
+      outputContent`See the bundle analysis for a breakdown of what is contributing to the bundle size:\n${outputToken.link(
+        bundleAnalysisPath,
+        bundleAnalysisPath
+      )}`
+    );
+  } else if (sizeMB >= 5) {
+    outputWarn(
+      `\u{1F6A8} Worker bundle exceeds 5 MB! This can delay your worker response.${remixConfig.serverMinify ? "" : " Minify your bundle by adding `serverMinify: true` to remix.config.js."}
+`
+    );
+  }
+}
+async function writeSimpleBuildStatus(root, buildPathWorkerFile, sizeMB, remixConfig) {
+  outputInfo(
+    outputContent`   ${colors.dim(
+      relativePath(root, buildPathWorkerFile)
+    )}  ${colors.yellow(sizeMB.toFixed(2) + " MB")}\n`
+  );
+  if (sizeMB >= MAX_WORKER_BUNDLE_SIZE) {
+    throw new AbortError(
+      "\u{1F6A8} Worker bundle exceeds 10 MB! Oxygen has a maximum worker bundle size of 10 MB."
+    );
+  } else if (sizeMB >= 5) {
+    outputWarn(
+      `\u{1F6A8} Worker bundle exceeds 5 MB! This can delay your worker response.${remixConfig.serverMinify ? "" : " Minify your bundle by adding `serverMinify: true` to remix.config.js."}
+`
+    );
+  }
+}
 async function copyPublicFiles(publicPath, buildPathClient) {
   if (!await fileExists(publicPath)) {
     return;

package/dist/commands/hydrogen/dev.js

@@ -18,6 +18,7 @@ import { getAllEnvironmentVariables } from '../../lib/environment-variables.js';
 import { getConfig } from '../../lib/shopify-config.js';
 import { setupLiveReload } from '../../lib/live-reload.js';
 import { checkRemixVersions } from '../../lib/remix-version-check.js';
+import { getGraphiQLUrl } from '../../lib/graphiql-url.js';
 
 const LOG_REBUILDING = "\u{1F9F1} Rebuilding...";
 const LOG_REBUILT = "\u{1F680} Rebuilt";
@@ -121,16 +122,19 @@ async function runDev({
       },
       workerRuntime
     );
-    const graphiqlUrl = `${miniOxygen.listeningAt}/graphiql`;
     const debugNetworkUrl = `${miniOxygen.listeningAt}/debug-network`;
-    enhanceH2Logs({ graphiqlUrl, ...remixConfig });
+    enhanceH2Logs({ host: miniOxygen.listeningAt, ...remixConfig });
     miniOxygen.showBanner({
       appName: storefront ? colors.cyan(storefront?.title) : void 0,
       headlinePrefix: initialBuildDurationMs > 0 ? `Initial build: ${initialBuildDurationMs}ms
 ` : "",
       extraLines: [
-        colors.dim(`
-View GraphiQL API browser: ${graphiqlUrl}`),
+        colors.dim(
+          `
+View GraphiQL API browser: ${getGraphiQLUrl({
+            host: miniOxygen.listeningAt
+          })}`
+        ),
         workerRuntime ? "" : colors.dim(
           `
 View server-side network requests: ${debugNetworkUrl}`

package/dist/generator-templates/starter/app/components/Aside.tsx

@@ -1,8 +1,8 @@
 /**
  * A side bar component with Overlay that works without JavaScript.
  * @example
- * ```ts
- * <Aside id="search-aside" heading="SEARCH">`
+ * ```jsx
+ * <Aside id="search-aside" heading="SEARCH">
  *  <input type="search" />
  *  ...
  * </Aside>

package/dist/generator-templates/starter/app/components/Search.tsx

@@ -450,13 +450,11 @@ function usePredictiveSearch(): UseSearchReturn {
 
 /**
  * Converts a plural search type to a singular search type
- * @param type - The plural search type
- * @returns The singular search type
  *
  * @example
- * ```ts
- * pluralToSingularSearchType('articles') // => 'ARTICLE'
- * pluralToSingularSearchType(['articles', 'products']) // => 'ARTICLE,PRODUCT'
+ * ```js
+ * pluralToSingularSearchType('articles'); // => 'ARTICLE'
+ * pluralToSingularSearchType(['articles', 'products']); // => 'ARTICLE,PRODUCT'
  * ```
  */
 function pluralToSingularSearchType(

package/dist/generator-templates/starter/app/root.tsx

@@ -189,14 +189,13 @@ export function CatchBoundary() {
  * @see https://shopify.dev/docs/api/storefront/latest/objects/CustomerAccessToken
  *
  * @example
- * ```ts
- * //
+ * ```js
  * const {isLoggedIn, headers} = await validateCustomerAccessToken(
  *  customerAccessToken,
  *  session,
- *  );
- *  ```
- *  */
+ * );
+ * ```
+ */
 async function validateCustomerAccessToken(
   session: HydrogenSession,
   customerAccessToken?: CustomerAccessToken,

package/dist/generator-templates/starter/app/routes/_index.tsx

@@ -40,7 +40,8 @@ function FeaturedCollection({
 }: {
   collection: FeaturedCollectionFragment;
 }) {
-  const image = collection.image;
+  if (!collection) return null;
+  const image = collection?.image;
   return (
     <Link
       className="featured-collection"

package/dist/generator-templates/starter/app/routes/api.predictive-search.tsx

@@ -108,8 +108,6 @@ async function fetchPredictiveSearchResults({
 
 /**
  * Normalize results and apply tracking qurery parameters to each result url
- * @param predictiveSearch
- * @param locale
  */
 export function normalizePredictiveSearchResults(
   predictiveSearch: PredictiveSearchQuery['predictiveSearch'],

package/dist/generator-templates/starter/app/routes/cart.$lines.tsx

@@ -3,21 +3,20 @@ import {redirect, type LoaderArgs} from '@shopify/remix-oxygen';
 /**
  * Automatically creates a new cart based on the URL and redirects straight to checkout.
  * Expected URL structure:
- * ```ts
+ * ```js
  * /cart/<variant_id>:<quantity>
  *
  * ```
+ *
  * More than one `<variant_id>:<quantity>` separated by a comma, can be supplied in the URL, for
  * carts with more than one product variant.
  *
- * @param `?discount` an optional discount code to apply to the cart
  * @example
- * Example path creating a cart with two product variants, different quantities, and a discount code:
- * ```ts
+ * Example path creating a cart with two product variants, different quantities, and a discount code in the querystring:
+ * ```js
  * /cart/41007289663544:1,41007289696312:2?discount=HYDROBOARD
  *
  * ```
- * @preserve
  */
 export async function loader({request, context, params}: LoaderArgs) {
   const {cart} = context;

package/dist/generator-templates/starter/app/routes/collections._index.tsx

@@ -66,7 +66,7 @@ function CollectionItem({
       to={`/collections/${collection.handle}`}
       prefetch="intent"
     >
-      {collection.image && (
+      {collection?.image && (
         <Image
           alt={collection.image.altText || collection.title}
           aspectRatio="1/1"

package/dist/generator-templates/starter/app/routes/discount.$code.tsx

@@ -3,14 +3,13 @@ import {redirect, type LoaderArgs} from '@shopify/remix-oxygen';
 /**
  * Automatically applies a discount found on the url
  * If a cart exists it's updated with the discount, otherwise a cart is created with the discount already applied
- * @param ?redirect an optional path to return to otherwise return to the home page
+ *
  * @example
- * Example path applying a discount and redirecting
- * ```ts
+ * Example path applying a discount and optional redirecting (defaults to the home page)
+ * ```js
  * /discount/FREESHIPPING?redirect=/products
  *
  * ```
- * @preserve
  */
 export async function loader({request, context, params}: LoaderArgs) {
   const {cart} = context;

package/dist/generator-templates/starter/package.json

@@ -15,8 +15,8 @@
   "dependencies": {
     "@remix-run/react": "1.19.1",
     "@shopify/cli": "3.49.2",
-    "@shopify/cli-hydrogen": "^5.3.0",
-    "@shopify/hydrogen": "^2023.7.8",
+    "@shopify/cli-hydrogen": "^5.4.0",
+    "@shopify/hydrogen": "^2023.7.9",
     "@shopify/remix-oxygen": "^1.1.4",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
@@ -30,7 +30,7 @@
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",
     "@types/eslint": "^8.4.10",
-    "@types/react": "^18.2.20",
+    "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "eslint": "^8.20.0",
     "eslint-plugin-hydrogen": "0.12.2",

package/dist/lib/bundle/analyzer.js

@@ -1,8 +1,14 @@
 import { joinPath, dirname } from '@shopify/cli-kit/node/path';
 import { fileURLToPath } from 'node:url';
-import { readFile, writeFile } from '@shopify/cli-kit/node/fs';
+import { fileExists, readFile, writeFile } from '@shopify/cli-kit/node/fs';
 import colors from '@shopify/cli-kit/node/colors';
 
+async function hasMetafile(buildPath) {
+  return (await Promise.all([
+    fileExists(joinPath(buildPath, "worker", "metafile.server.json")),
+    fileExists(joinPath(buildPath, "worker", "metafile.js.json"))
+  ])).every(Boolean);
+}
 async function buildBundleAnalysis(buildPath) {
   await Promise.all([
     writeBundleAnalyzerFile(
@@ -46,11 +52,11 @@ async function getBundleAnalysisSummary(bundlePath) {
       color: true
     })).split("\n").filter((line) => {
       const match = line.match(
-        /(.*)\/node_modules\/(react-dom|@remix-run|@shopify\/hydrogen|react-router|react-router-dom)\/(.*)/g
+        /(.*)(node_modules\/|server-assets-manifest:|server-entry-module:)(react-dom|@remix-run|@shopify\/hydrogen|react-router|react-router-dom)\/(.*)/g
       );
       return !match;
     }).slice(2, 12).join("\n").replace(/dist\/worker\/_assets\/.*$/ms, "\n").replace(/\n/g, "\n ").replace(/(\.\.\/)+node_modules\//g, (match) => colors.dim(match));
   }
 }
 
-export { buildBundleAnalysis, getBundleAnalysisSummary };
+export { buildBundleAnalysis, getBundleAnalysisSummary, hasMetafile };

package/dist/lib/check-lockfile.js

@@ -2,24 +2,28 @@ import { fileExists } from '@shopify/cli-kit/node/fs';
 import { resolvePath } from '@shopify/cli-kit/node/path';
 import { checkIfIgnoredInGitRepository } from '@shopify/cli-kit/node/git';
 import { renderWarning } from '@shopify/cli-kit/node/ui';
+import { AbortError } from '@shopify/cli-kit/node/error';
 import { lockfiles } from '@shopify/cli-kit/node/node-package-manager';
 
-function missingLockfileWarning() {
-  renderWarning({
-    headline: "No lockfile found",
-    body: `If you don\u2019t commit a lockfile, then your app might install the wrong package versions when deploying. To avoid versioning issues, generate a new lockfile and commit it to your repository.`,
-    nextSteps: [
-      [
-        "Generate a lockfile. Run",
-        {
-          command: "npm|yarn|pnpm install"
-        }
-      ],
-      "Commit the new file to your repository"
-    ]
-  });
+function missingLockfileWarning(shouldExit) {
+  const headline = "No lockfile found";
+  const body = `If you don\u2019t commit a lockfile, then your app might install the wrong package versions when deploying. To avoid versioning issues, generate a new lockfile and commit it to your repository.`;
+  const nextSteps = [
+    [
+      "Generate a lockfile. Run",
+      {
+        command: "npm|yarn|pnpm install"
+      }
+    ],
+    "Commit the new file to your repository"
+  ];
+  if (shouldExit) {
+    throw new AbortError(headline, body, nextSteps);
+  } else {
+    renderWarning({ headline, body, nextSteps });
+  }
 }
-function multipleLockfilesWarning(lockfiles2) {
+function multipleLockfilesWarning(lockfiles2, shouldExit) {
   const packageManagers = {
     "yarn.lock": "yarn",
     "package-lock.json": "npm",
@@ -28,30 +32,32 @@ function multipleLockfilesWarning(lockfiles2) {
   const lockfileList = lockfiles2.map((lockfile) => {
     return `${lockfile} (created by ${packageManagers[lockfile]})`;
   });
-  renderWarning({
-    headline: "Multiple lockfiles found",
-    body: [
-      `Your project contains more than one lockfile. This can cause version conflicts when installing and deploying your app. The following lockfiles were detected:
+  const headline = "Multiple lockfiles found";
+  const body = [
+    `Your project contains more than one lockfile. This can cause version conflicts when installing and deploying your app. The following lockfiles were detected:
 `,
-      { list: { items: lockfileList } }
-    ],
-    nextSteps: [
-      "Delete any unneeded lockfiles",
-      "Commit the change to your repository"
-    ]
-  });
+    { list: { items: lockfileList } }
+  ];
+  const nextSteps = [
+    "Delete any unneeded lockfiles",
+    "Commit the change to your repository"
+  ];
+  if (shouldExit) {
+    throw new AbortError(headline, body, nextSteps);
+  } else {
+    renderWarning({ headline, body, nextSteps });
+  }
 }
 function lockfileIgnoredWarning(lockfile) {
-  renderWarning({
-    headline: "Lockfile ignored by Git",
-    body: `Your project\u2019s lockfile isn\u2019t being tracked by Git. If you don\u2019t commit a lockfile, then your app might install the wrong package versions when deploying.`,
-    nextSteps: [
-      `In your project\u2019s .gitignore file, delete any references to ${lockfile}`,
-      "Commit the change to your repository"
-    ]
-  });
+  const headline = "Lockfile ignored by Git";
+  const body = `Your project\u2019s lockfile isn\u2019t being tracked by Git. If you don\u2019t commit a lockfile, then your app might install the wrong package versions when deploying.`;
+  const nextSteps = [
+    `In your project\u2019s .gitignore file, delete any references to ${lockfile}`,
+    "Commit the change to your repository"
+  ];
+  renderWarning({ headline, body, nextSteps });
 }
-async function checkLockfileStatus(directory) {
+async function checkLockfileStatus(directory, shouldExit = false) {
   if (process.env.LOCAL_DEV)
     return;
   const availableLockfiles = [];
@@ -60,21 +66,20 @@ async function checkLockfileStatus(directory) {
       availableLockfiles.push(lockFileName);
     }
   }
-  if (!availableLockfiles.length) {
-    return missingLockfileWarning();
+  if (availableLockfiles.length === 0) {
+    return missingLockfileWarning(shouldExit);
   }
   if (availableLockfiles.length > 1) {
-    return multipleLockfilesWarning(availableLockfiles);
+    return multipleLockfilesWarning(availableLockfiles, shouldExit);
   }
-  try {
-    const lockfile = availableLockfiles[0];
-    const ignoredLockfile = await checkIfIgnoredInGitRepository(directory, [
-      lockfile
-    ]);
-    if (ignoredLockfile.length) {
-      lockfileIgnoredWarning(lockfile);
-    }
-  } catch {
+  const lockfile = availableLockfiles[0];
+  const ignoredLockfile = await checkIfIgnoredInGitRepository(directory, [
+    lockfile
+  ]).catch(() => {
+    return [];
+  });
+  if (ignoredLockfile.length > 0) {
+    lockfileIgnoredWarning(lockfile);
   }
 }
 

package/dist/lib/check-lockfile.test.js

@@ -53,6 +53,15 @@ describe("checkLockfileStatus()", () => {
         );
       });
     });
+    it("throws when shouldExit is true", async () => {
+      await inTemporaryDirectory(async (tmpDir) => {
+        await writeFile(joinPath(tmpDir, "package-lock.json"), "");
+        await writeFile(joinPath(tmpDir, "pnpm-lock.yaml"), "");
+        await expect(checkLockfileStatus(tmpDir, true)).rejects.toThrow(
+          /Multiple lockfiles found/is
+        );
+      });
+    });
   });
   describe("when a lockfile is missing", () => {
     it("renders a warning", async () => {
@@ -61,5 +70,12 @@ describe("checkLockfileStatus()", () => {
         expect(outputMock.warn()).toMatch(/ warning .+ No lockfile found .+/is);
       });
     });
+    it("throws when shouldExit is true", async () => {
+      await inTemporaryDirectory(async (tmpDir) => {
+        await expect(checkLockfileStatus(tmpDir, true)).rejects.toThrow(
+          /No lockfile found/is
+        );
+      });
+    });
   });
 });

package/dist/lib/graphiql-url.js

@@ -0,0 +1,15 @@
+function getGraphiQLUrl({
+  host = "",
+  graphql
+}) {
+  let url = `${host.endsWith("/") ? host.slice(0, -1) : host}/graphiql`;
+  if (graphql) {
+    let { query, variables } = graphql;
+    if (typeof variables !== "string")
+      variables = JSON.stringify(variables);
+    url += `?query=${encodeURIComponent(query)}${variables ? `&variables=${encodeURIComponent(variables)}` : ""}`;
+  }
+  return url;
+}
+
+export { getGraphiQLUrl };

package/dist/lib/is-ci.js

@@ -0,0 +1,6 @@
+function isCI() {
+  const { env } = process;
+  return env.CI === "false" ? false : !!(env.CI || env.CI_NAME || env.BUILD_NUMBER || env.TF_BUILD);
+}
+
+export { isCI };

package/dist/lib/log.js

@@ -2,6 +2,7 @@ import { renderFatalError, renderWarning, renderInfo } from '@shopify/cli-kit/no
 import { BugError } from '@shopify/cli-kit/node/error';
 import { outputContent, outputToken } from '@shopify/cli-kit/node/output';
 import colors from '@shopify/cli-kit/node/colors';
+import { getGraphiQLUrl } from './graphiql-url.js';
 
 const originalConsole = { ...console };
 const methodsReplaced = /* @__PURE__ */ new Set();
@@ -194,11 +195,11 @@ function enhanceH2Logs(options) {
           }
         }
         if (typeof cause !== "string" && !!cause?.graphql?.query) {
-          const { query, variables } = cause.graphql;
-          const link = `${options.graphiqlUrl}?query=${encodeURIComponent(
-            query
-          )}${variables ? `&variables=${encodeURIComponent(variables)}` : ""}`;
-          const [, queryType, queryName] = query.match(/(query|mutation)\s+(\w+)/) || [];
+          const link = getGraphiQLUrl({
+            host: options.host,
+            graphql: cause.graphql
+          });
+          const [, queryType, queryName] = cause.graphql.query.match(/(query|mutation)\s+(\w+)/) || [];
           tryMessage = (tryMessage ? `${tryMessage}
 
 ` : "") + outputContent`To debug the ${queryType || "query"}${queryName ? ` \`${colors.whiteBright(queryName)}\`` : ""}, try it in ${outputToken.link(colors.bold("GraphiQL"), link)}.`.value;

package/dist/lib/log.test.js

@@ -5,7 +5,7 @@ import { resetAllLogs, enhanceH2Logs } from './log.js';
 
 describe("log replacer", () => {
   describe("enhanceH2Logs", () => {
-    const graphiqlUrl = "http://localhost:3000/graphiql";
+    const host = "http://localhost:3000";
     const rootDirectory = fileURLToPath(import.meta.url);
     const outputMock = mockAndCaptureOutput();
     beforeEach(() => {
@@ -18,7 +18,7 @@ describe("log replacer", () => {
     });
     describe("enhances h2:info pattern", () => {
       it("renders in an info banner", () => {
-        enhanceH2Logs({ graphiqlUrl, rootDirectory });
+        enhanceH2Logs({ host, rootDirectory });
         console.warn("[h2:info:storefront.query] Tip");
         const message = outputMock.info();
         expect(message).not.toMatch("h2");
@@ -29,7 +29,7 @@ describe("log replacer", () => {
     });
     describe("enhances h2:warn pattern", () => {
       it("renders in a warning banner", () => {
-        enhanceH2Logs({ graphiqlUrl, rootDirectory });
+        enhanceH2Logs({ host, rootDirectory });
         console.warn("[h2:warn:storefront.query] Wrong query 1");
         const warning = outputMock.warn();
         expect(warning).not.toMatch("h2");
@@ -38,7 +38,7 @@ describe("log replacer", () => {
         expect(warning).toMatch("Wrong query");
       });
       it("shows links from the last line as a list", () => {
-        enhanceH2Logs({ graphiqlUrl, rootDirectory });
+        enhanceH2Logs({ host, rootDirectory });
         console.warn(
           "[h2:warn:storefront.query] Wrong query.\nhttps://docs.com/something"
         );
@@ -50,7 +50,7 @@ describe("log replacer", () => {
     });
     describe("enhances h2:error pattern", () => {
       it("renders in an error banner", () => {
-        enhanceH2Logs({ graphiqlUrl, rootDirectory });
+        enhanceH2Logs({ host, rootDirectory });
         console.error(new Error("[h2:error:storefront.query] Wrong query 2"));
         const error = outputMock.error();
         expect(error.split("stack trace:")[0]).not.toMatch("h2");
@@ -59,7 +59,7 @@ describe("log replacer", () => {
         expect(error).toMatch("Wrong query");
       });
       it("shows a GraphiQL link when the error is related to a GraphQL query", () => {
-        enhanceH2Logs({ graphiqlUrl, rootDirectory });
+        enhanceH2Logs({ host, rootDirectory });
         console.error(
           new Error("[h2:error:storefront.query] Wrong query 3", {
             cause: {
@@ -75,7 +75,7 @@ describe("log replacer", () => {
         `);
       });
       it("trims stack traces when the error is related to a GraphQL query", () => {
-        enhanceH2Logs({ graphiqlUrl, rootDirectory });
+        enhanceH2Logs({ host, rootDirectory });
         console.error(
           new Error("[h2:error:storefront.query] Wrong query 4", {
             cause: { graphql: { query: "query test {}" } }

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

@@ -1,6 +1,5 @@
 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';
@@ -9,14 +8,12 @@ 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];
@@ -25,13 +22,13 @@ async function startNodeServer({
   const asyncLocalStorage = new AsyncLocalStorage();
   const serviceBindings = {
     H2O_LOG_EVENT: {
-      fetch: (request) => logRequestEvent(
+      fetch: async (request) => logRequestEvent(
         new Request(request.url, {
-          headers: {
-            ...Object.fromEntries(request.headers.entries()),
-            // Merge some headers from the parent request
+          method: "POST",
+          body: JSON.stringify({
+            ...await request.json(),
             ...asyncLocalStorage.getStore()
-          }
+          })
         })
       )
     }
@@ -65,7 +62,7 @@ async function startNodeServer({
       }
       const startTimeMs = Date.now();
       const response = await asyncLocalStorage.run(
-        { "request-id": requestId, purpose: request.headers.get("purpose") },
+        { requestId, purpose: request.headers.get("purpose") },
         () => defaultDispatcher(request)
       );
       logRequestLine(request, {

package/dist/lib/request-events.js

@@ -1,20 +1,24 @@
 import { EventEmitter } from 'node:events';
 import { ReadableStream } from 'node:stream/web';
 import { Response } from '@shopify/mini-oxygen';
+import { getGraphiQLUrl } from './graphiql-url.js';
 
 const DEV_ROUTES = /* @__PURE__ */ new Set(["/graphiql", "/debug-network"]);
 const EVENT_MAP = {
   request: "Request",
   subrequest: "Sub request"
 };
-function getRequestInfo(request) {
+async function getRequestInfo(request) {
+  const data = await request.json();
   return {
-    id: request.headers.get("request-id"),
-    eventType: request.headers.get("hydrogen-event-type") || "unknown",
-    startTime: request.headers.get("hydrogen-start-time"),
-    endTime: request.headers.get("hydrogen-end-time") || String(Date.now()),
-    purpose: request.headers.get("purpose") === "prefetch" ? "(prefetch)" : "",
-    cacheStatus: request.headers.get("hydrogen-cache-status")
+    id: data.requestId ?? "",
+    eventType: data.eventType || "unknown",
+    startTime: data.startTime,
+    endTime: data.endTime || Date.now(),
+    purpose: data.purpose === "prefetch" ? "(prefetch)" : "",
+    cacheStatus: data.cacheStatus ?? "",
+    stackLine: data.stackLine ?? "",
+    graphql: data.graphql ? JSON.parse(data.graphql) : null
   };
 }
 const eventEmitter = new EventEmitter();
@@ -24,24 +28,36 @@ async function clearHistory() {
   return new Response("ok");
 }
 async function logRequestEvent(request) {
-  if (DEV_ROUTES.has(new URL(request.url).pathname)) {
+  const url = new URL(request.url);
+  if (DEV_ROUTES.has(url.pathname)) {
     return new Response("ok");
   }
-  const { eventType, purpose, ...data } = getRequestInfo(request);
+  const { eventType, purpose, stackLine, graphql, ...data } = await getRequestInfo(request);
+  let originFile = "";
+  let graphiqlLink = "";
   let description = request.url;
   if (eventType === "subrequest") {
-    description = decodeURIComponent(request.url).match(/(query|mutation)\s+(\w+)/)?.[0]?.replace(/\s+/, " ") || request.url;
+    description = graphql?.query.match(/(query|mutation)\s+(\w+)/)?.[0]?.replace(/\s+/, " ") || decodeURIComponent(url.search.slice(1));
+    const [, fnName, filePath] = stackLine?.match(/\s+at ([^\s]+) \(.*?\/(app\/[^\n]*)\)/) || [];
+    if (fnName && filePath) {
+      originFile = `${fnName}:${filePath}`;
+    }
+    if (graphql) {
+      graphiqlLink = getGraphiQLUrl({ graphql });
+    }
   }
   const event = {
     event: EVENT_MAP[eventType] || eventType,
     data: JSON.stringify({
       ...data,
-      url: `${purpose} ${description}`.trim()
+      url: `${purpose} ${description}`.trim(),
+      graphiqlLink,
+      originFile
     })
   };
+  eventHistory.push(event);
   if (eventHistory.length > 100)
     eventHistory.shift();
-  eventHistory.push(event);
   eventEmitter.emit("request", event);
   return new Response("ok");
 }

package/oclif.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.3.0",
+  "version": "5.4.0",
   "commands": {
     "hydrogen:build": {
       "id": "hydrogen:build",
@@ -28,6 +28,12 @@
           "description": "Show a bundle size summary after building.",
           "allowNo": true
         },
+        "lockfile-check": {
+          "name": "lockfile-check",
+          "type": "boolean",
+          "description": "Checks that there is exactly 1 valid lockfile in the project.",
+          "allowNo": true
+        },
         "disable-route-warning": {
           "name": "disable-route-warning",
           "type": "boolean",

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "5.3.0",
+  "version": "5.4.0",
   "license": "MIT",
   "type": "module",
   "scripts": {