@shopify/cli-hydrogen 5.2.2 → 5.2.3

package/dist/commands/hydrogen/build.js

@@ -5,7 +5,7 @@ import { rmdir, fileSize, glob, removeFile, fileExists, copyFile } from '@shopif
 import { resolvePath, relativePath, joinPath } 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, assertOxygenChecks } from '../../lib/remix-config.js';
+import { getProjectPaths, getRemixConfig, handleRemixImportFail, assertOxygenChecks } from '../../lib/remix-config.js';
 import { commonFlags, deprecated, flagsToCamelObject } from '../../lib/flags.js';
 import { checkLockfileStatus } from '../../lib/check-lockfile.js';
 import { findMissingRoutes } from '../../lib/missing-routes.js';
@@ -61,11 +61,13 @@ async function runBuild({
   console.time(LOG_WORKER_BUILT);
   outputInfo(`
 \u{1F3D7}\uFE0F  Building in ${process.env.NODE_ENV} mode...`);
-  const [remixConfig, { build }, { logThrown }, { createFileWatchCache }] = await Promise.all([
+  const [remixConfig, [{ build }, { logThrown }, { createFileWatchCache }]] = await Promise.all([
     getRemixConfig(root),
-    import('@remix-run/dev/dist/compiler/build.js'),
-    import('@remix-run/dev/dist/compiler/utils/log.js'),
-    import('@remix-run/dev/dist/compiler/fileWatchCache.js'),
+    Promise.all([
+      import('@remix-run/dev/dist/compiler/build.js'),
+      import('@remix-run/dev/dist/compiler/utils/log.js'),
+      import('@remix-run/dev/dist/compiler/fileWatchCache.js')
+    ]).catch(handleRemixImportFail),
     rmdir(buildPath, { force: true })
   ]);
   assertOxygenChecks(remixConfig);

package/dist/commands/hydrogen/dev.js

@@ -5,7 +5,7 @@ import { fileExists } from '@shopify/cli-kit/node/fs';
 import { renderFatalError } from '@shopify/cli-kit/node/ui';
 import colors from '@shopify/cli-kit/node/colors';
 import { copyPublicFiles } from './build.js';
-import { getProjectPaths, assertOxygenChecks, getRemixConfig } from '../../lib/remix-config.js';
+import { getProjectPaths, assertOxygenChecks, handleRemixImportFail, getRemixConfig } from '../../lib/remix-config.js';
 import { muteDevLogs, createRemixLogger, enhanceH2Logs } from '../../lib/log.js';
 import { commonFlags, deprecated, flagsToCamelObject, DEFAULT_PORT } from '../../lib/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
@@ -98,7 +98,7 @@ async function runDev({
   const [{ watch }, { createFileWatchCache }] = await Promise.all([
     import('@remix-run/dev/dist/compiler/watch.js'),
     import('@remix-run/dev/dist/compiler/fileWatchCache.js')
-  ]);
+  ]).catch(handleRemixImportFail);
   let isInitialBuild = true;
   let initialBuildDurationMs = 0;
   let initialBuildStartTimeMs = Date.now();
@@ -116,13 +116,18 @@ async function runDev({
       env: await envPromise
     });
     const graphiqlUrl = `${miniOxygen.listeningAt}/graphiql`;
+    const debugNetworkUrl = `${miniOxygen.listeningAt}/debug-network`;
     enhanceH2Logs({ graphiqlUrl, ...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}`)]
+      extraLines: [
+        colors.dim(`
+View GraphiQL API browser: ${graphiqlUrl}`),
+        colors.dim(`
+View server-side network requests: ${debugNetworkUrl}`)
+      ]
     });
     if (useCodegen) {
       spawnCodegenProcess({ ...remixConfig, configFilePath: codegenConfigPath });

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

@@ -15,9 +15,9 @@
   "dependencies": {
     "@remix-run/react": "1.19.1",
     "@shopify/cli": "3.48.0",
-    "@shopify/cli-hydrogen": "^5.2.2",
-    "@shopify/hydrogen": "^2023.7.6",
-    "@shopify/remix-oxygen": "^1.1.3",
+    "@shopify/cli-hydrogen": "^5.2.3",
+    "@shopify/hydrogen": "^2023.7.7",
+    "@shopify/remix-oxygen": "^1.1.4",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "isbot": "^3.6.6",

package/dist/generator-templates/starter/remix.env.d.ts

@@ -35,5 +35,6 @@ declare module '@shopify/remix-oxygen' {
     cart: HydrogenCart;
     storefront: Storefront;
     session: HydrogenSession;
+    waitUntil: ExecutionContext['waitUntil'];
   }
 }

package/dist/generator-templates/starter/server.ts

@@ -70,7 +70,7 @@ export default {
       const handleRequest = createRequestHandler({
         build: remixBuild,
         mode: process.env.NODE_ENV,
-        getLoadContext: () => ({session, storefront, env, cart}),
+        getLoadContext: () => ({session, storefront, cart, env, waitUntil}),
       });
 
       const response = await handleRequest(request);

package/dist/lib/live-reload.js

@@ -1,4 +1,5 @@
 import http from 'node:http';
+import { handleRemixImportFail } from './remix-config.js';
 
 async function setupLiveReload(devServerPort) {
   try {
@@ -7,7 +8,7 @@ async function setupLiveReload(devServerPort) {
       import('@remix-run/dev/dist/devServer_unstable/socket.js'),
       import('@remix-run/dev/dist/devServer_unstable/hdr.js'),
       import('@remix-run/dev/dist/result.js')
-    ]);
+    ]).catch(handleRemixImportFail);
     const state = {};
     const server = http.createServer(function(req, res) {
       res.writeHead(200);

package/dist/lib/mini-oxygen.js

@@ -1,10 +1,13 @@
+import { randomUUID } from 'node:crypto';
+import { AsyncLocalStorage } from 'node:async_hooks';
 import { outputToken, outputInfo, outputContent } from '@shopify/cli-kit/node/output';
 import { resolvePath } from '@shopify/cli-kit/node/path';
 import { readFile, fileExists } from '@shopify/cli-kit/node/fs';
 import colors from '@shopify/cli-kit/node/colors';
 import { renderSuccess } from '@shopify/cli-kit/node/ui';
-import { startServer } from '@shopify/mini-oxygen';
+import { startServer, Request } from '@shopify/mini-oxygen';
 import { DEFAULT_PORT } from './flags.js';
+import { clearHistory, streamRequestEvents, DEV_ROUTES, logRequestEvent } from './request-events.js';
 
 async function startMiniOxygen({
   root,
@@ -16,6 +19,20 @@ async function startMiniOxygen({
   env
 }) {
   const dotenvPath = resolvePath(root, ".env");
+  const asyncLocalStorage = new AsyncLocalStorage();
+  const serviceBindings = {
+    H2O_LOG_EVENT: {
+      fetch: (request) => logRequestEvent(
+        new Request(request.url, {
+          headers: {
+            ...Object.fromEntries(request.headers.entries()),
+            // Merge some headers from the parent request
+            ...asyncLocalStorage.getStore()
+          }
+        })
+      )
+    }
+  };
   const miniOxygen = await startServer({
     script: await readFile(buildPathWorkerFile),
     workerFile: buildPathWorkerFile,
@@ -27,19 +44,29 @@ async function startMiniOxygen({
     modules: true,
     env: {
       ...env,
-      ...process.env
+      ...process.env,
+      ...serviceBindings
     },
     envPath: !env && await fileExists(dotenvPath) ? dotenvPath : void 0,
     log: () => {
     },
-    onResponse: (request, response) => (
-      // 'Request' and 'Response' types in MiniOxygen comes from
-      // Miniflare and are slightly different from standard types.
-      logResponse(
-        request,
-        response
-      )
-    )
+    async onRequest(request, defaultDispatcher) {
+      const url = new URL(request.url);
+      if (url.pathname === "/debug-network-server") {
+        return request.method === "DELETE" ? clearHistory() : streamRequestEvents(request);
+      }
+      let requestId = request.headers.get("request-id");
+      if (!requestId) {
+        requestId = randomUUID();
+        request.headers.set("request-id", requestId);
+      }
+      const response = await asyncLocalStorage.run(
+        { "request-id": requestId, purpose: request.headers.get("purpose") },
+        () => defaultDispatcher(request)
+      );
+      logResponse(request, response);
+      return response;
+    }
   });
   const listeningAt = `http://localhost:${miniOxygen.port}`;
   return {
@@ -50,7 +77,8 @@ async function startMiniOxygen({
       if (options.env) {
         nextOptions.env = {
           ...options.env,
-          ...process.env
+          ...process.env,
+          ...serviceBindings
         };
       }
       if (options.worker) {
@@ -74,9 +102,8 @@ async function startMiniOxygen({
 function logResponse(request, response) {
   try {
     const url = new URL(request.url);
-    if (["/graphiql"].includes(url.pathname)) {
+    if (DEV_ROUTES.has(url.pathname))
       return;
-    }
     const isProxy = !!response.url && response.url !== request.url;
     const isDataRequest = !isProxy && url.searchParams.has("_data");
     let route = request.url.replace(url.origin, "");

package/dist/lib/onboarding/common.js

@@ -2,7 +2,7 @@ import { readdir } from 'node:fs/promises';
 import { packageManagerUsedForCreating, 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 { resolvePath, basename, joinPath } from '@shopify/cli-kit/node/path';
+import { joinPath, resolvePath, basename } from '@shopify/cli-kit/node/path';
 import { initializeGitRepository, addAllToGitFromDirectory, createGitCommit } from '@shopify/cli-kit/node/git';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { rmdir, writeFile, fileExists, isDirectory } from '@shopify/cli-kit/node/fs';
@@ -47,14 +47,25 @@ async function handleRouteGeneration(controller, flagRoutes) {
     needsRouteGeneration,
     setupRoutes: async (directory, language, i18nStrategy) => {
       if (needsRouteGeneration) {
-        const result = await generateRoutes({
-          routeName: routesToScaffold,
-          directory,
-          force: true,
-          typescript: language === "ts",
-          localePrefix: i18nStrategy === "subfolders" ? "locale" : false,
-          signal: controller.signal
-        });
+        const result = await generateRoutes(
+          {
+            routeName: routesToScaffold,
+            directory,
+            force: true,
+            typescript: language === "ts",
+            localePrefix: i18nStrategy === "subfolders" ? "locale" : false,
+            signal: controller.signal
+          },
+          {
+            rootDirectory: directory,
+            appDirectory: joinPath(directory, "app"),
+            future: {
+              v2_errorBoundary: true,
+              v2_meta: true,
+              v2_routeConvention: true
+            }
+          }
+        );
         return result.routeGroups;
       }
     }

package/dist/lib/remix-config.js

@@ -6,6 +6,7 @@ import { AbortError } from '@shopify/cli-kit/node/error';
 import { outputWarn } from '@shopify/cli-kit/node/output';
 import { fileExists } from '@shopify/cli-kit/node/fs';
 import { muteRemixLogs } from './log.js';
+import { getRequiredRemixVersion } from './remix-version-check.js';
 
 const BUILD_DIR = "dist";
 const CLIENT_SUBDIR = "client";
@@ -25,9 +26,18 @@ function getProjectPaths(appPath, entry) {
     publicPath
   };
 }
+function handleRemixImportFail() {
+  const remixVersion = getRequiredRemixVersion();
+  throw new AbortError(
+    "Could not load Remix packages.",
+    `Please make sure you have \`@remix-run/dev@${remixVersion}\` installed and all the other Remix packages have the same version.`
+  );
+}
 async function getRemixConfig(root, mode = process.env.NODE_ENV) {
   await muteRemixLogs();
-  const { readConfig } = await import('@remix-run/dev/dist/config.js');
+  const { readConfig } = await import('@remix-run/dev/dist/config.js').catch(
+    handleRemixImportFail
+  );
   const config = await readConfig(root, mode);
   if (process.env.LOCAL_DEV) {
     const packagesPath = fileURLToPath(new URL("../../..", import.meta.url));
@@ -134,4 +144,4 @@ async function assertEntryFileExists(root, fileRelative) {
   }
 }
 
-export { assertOxygenChecks, getProjectPaths, getRemixConfig };
+export { assertOxygenChecks, getProjectPaths, getRemixConfig, handleRemixImportFail };

package/dist/lib/remix-version-check.js

@@ -2,12 +2,15 @@ import { createRequire } from 'node:module';
 import { fileURLToPath } from 'node:url';
 import { renderWarning } from '@shopify/cli-kit/node/ui';
 
-function checkRemixVersions() {
-  const require2 = createRequire(import.meta.url);
+function getRequiredRemixVersion(require2 = createRequire(import.meta.url)) {
   const hydrogenPkgJson = require2(fileURLToPath(
     new URL("../../package.json", import.meta.url)
   ));
-  const requiredVersionInHydrogen = hydrogenPkgJson.dependencies["@remix-run/dev"];
+  return hydrogenPkgJson.peerDependencies["@remix-run/dev"];
+}
+function checkRemixVersions() {
+  const require2 = createRequire(import.meta.url);
+  const requiredVersionInHydrogen = getRequiredRemixVersion(require2);
   const pkgs = [
     "dev",
     "react",
@@ -48,4 +51,4 @@ function getRemixPackageVersion(require2, name) {
   return result;
 }
 
-export { checkRemixVersions };
+export { checkRemixVersions, getRequiredRemixVersion };

package/dist/lib/remix-version-check.test.js

@@ -27,7 +27,7 @@ describe("remix-version-check", () => {
     const expectedVersion = "42.0.0-test";
     vi.mocked(requireMock).mockReturnValueOnce({
       // Hydrogen expected version
-      dependencies: { "@remix-run/dev": expectedVersion }
+      peerDependencies: { "@remix-run/dev": expectedVersion }
     });
     const outputMock = mockAndCaptureOutput();
     checkRemixVersions();

package/dist/lib/request-events.js

@@ -0,0 +1,84 @@
+import { EventEmitter } from 'node:events';
+import { ReadableStream } from 'node:stream/web';
+import { Response } from '@shopify/mini-oxygen';
+
+const DEV_ROUTES = /* @__PURE__ */ new Set(["/graphiql", "/debug-network"]);
+const EVENT_MAP = {
+  request: "Request",
+  subrequest: "Sub request"
+};
+function getRequestInfo(request) {
+  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")
+  };
+}
+const eventEmitter = new EventEmitter();
+const eventHistory = [];
+async function clearHistory() {
+  eventHistory.length = 0;
+  return new Response("ok");
+}
+async function logRequestEvent(request) {
+  if (DEV_ROUTES.has(new URL(request.url).pathname)) {
+    return new Response("ok");
+  }
+  const { eventType, purpose, ...data } = getRequestInfo(request);
+  let description = request.url;
+  if (eventType === "subrequest") {
+    description = decodeURIComponent(request.url).match(/(query|mutation)\s+(\w+)/)?.[0]?.replace(/\s+/, " ") || request.url;
+  }
+  const event = {
+    event: EVENT_MAP[eventType] || eventType,
+    data: JSON.stringify({
+      ...data,
+      url: `${purpose} ${description}`.trim()
+    })
+  };
+  if (eventHistory.length > 100)
+    eventHistory.shift();
+  eventHistory.push(event);
+  eventEmitter.emit("request", event);
+  return new Response("ok");
+}
+function streamRequestEvents(request) {
+  const stream = new ReadableStream({
+    start(controller) {
+      const encoder = new TextEncoder();
+      const enqueueEvent = ({ event = "message", data }) => {
+        controller.enqueue(encoder.encode(`event: ${event}
+`));
+        controller.enqueue(encoder.encode(`data: ${data}
+
+`));
+      };
+      eventHistory.forEach(enqueueEvent);
+      eventEmitter.addListener("request", enqueueEvent);
+      let closed = false;
+      function close() {
+        if (closed)
+          return;
+        closed = true;
+        request.signal.removeEventListener("abort", close);
+        eventEmitter.removeListener("request", enqueueEvent);
+        controller.close();
+      }
+      request.signal.addEventListener("abort", close);
+      if (request.signal.aborted)
+        return close();
+    }
+  });
+  return new Response(stream, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-store",
+      Connection: "keep-alive"
+    }
+  });
+}
+
+export { DEV_ROUTES, clearHistory, logRequestEvent, streamRequestEvents };

package/dist/lib/setups/routes/generate.js

@@ -51,9 +51,9 @@ async function getResolvedRoutes(routeKeys = Object.keys(ROUTE_MAP)) {
   return { routeGroups, resolvedRouteFiles };
 }
 const ALL_ROUTE_CHOICES = [...Object.keys(ROUTE_MAP), "all"];
-async function generateRoutes(options) {
+async function generateRoutes(options, remixConfig) {
   const { routeGroups, resolvedRouteFiles } = options.routeName === "all" ? await getResolvedRoutes() : await getResolvedRoutes([options.routeName]);
-  const { rootDirectory, appDirectory, future, tsconfigPath } = await getRemixConfig(options.directory);
+  const { rootDirectory, appDirectory, future, tsconfigPath } = remixConfig || await getRemixConfig(options.directory);
   const routesArray = resolvedRouteFiles.flatMap(
     (item) => GENERATOR_ROUTE_DIR + "/" + item
   );

package/dist/lib/transpile-ts.js

@@ -1,7 +1,6 @@
-import path from 'path';
-import fs from 'fs/promises';
-import glob from 'fast-glob';
+import { glob, removeFile, readFile, writeFile } from '@shopify/cli-kit/node/fs';
 import { outputDebug } from '@shopify/cli-kit/node/output';
+import { joinPath } from '@shopify/cli-kit/node/path';
 import { getCodeFormatOptions, formatCode } from './format-code.js';
 
 const escapeNewLines = (code) => code.replace(/\n\n/g, "\n/* :newline: */");
@@ -79,35 +78,34 @@ async function transpileProject(projectDir) {
   const formatConfig = await getCodeFormatOptions();
   for (const entry of entries) {
     if (entry.endsWith(".d.ts")) {
-      await fs.rm(entry);
+      await removeFile(entry);
       continue;
     }
-    const tsx = await fs.readFile(entry, "utf8");
+    const tsx = await readFile(entry);
     const mjs = await formatCode(await transpileFile(tsx), formatConfig);
-    await fs.rm(entry);
-    await fs.writeFile(entry.replace(/\.ts(x?)$/, ".js$1"), mjs, "utf8");
+    await removeFile(entry);
+    await writeFile(entry.replace(/\.ts(x?)$/, ".js$1"), mjs);
   }
   try {
-    const remixConfigPath = path.join(projectDir, "remix.config.js");
-    let remixConfig = await fs.readFile(remixConfigPath, "utf8");
+    const remixConfigPath = joinPath(projectDir, "remix.config.js");
+    let remixConfig = await readFile(remixConfigPath);
     remixConfig = remixConfig.replace(/\/server\.ts/gim, "/server.js");
-    await fs.writeFile(remixConfigPath, remixConfig);
+    await writeFile(remixConfigPath, remixConfig);
   } catch (error) {
     outputDebug(
       "Could not change TS extensions in remix.config.js:\n" + error.stack
     );
   }
   try {
-    const tsConfigPath = path.join(projectDir, "tsconfig.json");
-    const tsConfigWithComments = await fs.readFile(tsConfigPath, "utf8");
+    const tsConfigPath = joinPath(projectDir, "tsconfig.json");
+    const tsConfigWithComments = await readFile(tsConfigPath);
     const jsConfig = convertConfigToJS(
       JSON.parse(tsConfigWithComments.replace(/^\s*\/\/.*$/gm, ""))
     );
-    await fs.rm(tsConfigPath);
-    await fs.writeFile(
-      path.join(projectDir, "jsconfig.json"),
-      JSON.stringify(jsConfig, null, 2),
-      "utf8"
+    await removeFile(tsConfigPath);
+    await writeFile(
+      joinPath(projectDir, "jsconfig.json"),
+      JSON.stringify(jsConfig, null, 2)
     );
   } catch (error) {
     outputDebug(
@@ -116,7 +114,7 @@ async function transpileProject(projectDir) {
   }
   try {
     const pkgJson = JSON.parse(
-      await fs.readFile(path.join(projectDir, "package.json"), "utf8")
+      await readFile(joinPath(projectDir, "package.json"))
     );
     delete pkgJson.scripts["typecheck"];
     delete pkgJson.devDependencies["typescript"];
@@ -133,8 +131,8 @@ async function transpileProject(projectDir) {
     if (pkgJson.scripts?.build) {
       pkgJson.scripts.build = pkgJson.scripts.build.replace(codegenFlag, "");
     }
-    await fs.writeFile(
-      path.join(projectDir, "package.json"),
+    await writeFile(
+      joinPath(projectDir, "package.json"),
       JSON.stringify(pkgJson, null, 2)
     );
   } catch (error) {
@@ -143,10 +141,10 @@ async function transpileProject(projectDir) {
     );
   }
   try {
-    const eslintrcPath = path.join(projectDir, ".eslintrc.js");
-    let eslintrc = await fs.readFile(eslintrcPath, "utf8");
+    const eslintrcPath = joinPath(projectDir, ".eslintrc.js");
+    let eslintrc = await readFile(eslintrcPath);
     eslintrc = eslintrc.replace(/\/\*\*[\s*]+@type.+\s+\*\/\s?/gim, "").replace(/\s*,?\s*['"`]plugin:hydrogen\/typescript['"`]/gim, "").replace(/\s+['"`]@typescript-eslint\/.+,/gim, "");
-    await fs.writeFile(eslintrcPath, eslintrc);
+    await writeFile(eslintrcPath, eslintrc);
   } catch (error) {
     outputDebug(
       "Could not remove TS rules from .eslintrc:\n" + error.stack

package/dist/lib/virtual-routes.js

@@ -1,15 +1,17 @@
-import path from 'path';
-import { fileURLToPath } from 'url';
-import recursiveReaddir from 'recursive-readdir';
+import { fileURLToPath } from 'node:url';
+import { glob } from '@shopify/cli-kit/node/fs';
+import { joinPath, relativePath } from '@shopify/cli-kit/node/path';
 
 const VIRTUAL_ROUTES_DIR = "virtual-routes/routes";
 const VIRTUAL_ROOT = "virtual-routes/virtual-root";
 async function addVirtualRoutes(config) {
   const userRouteList = Object.values(config.routes);
   const distPath = fileURLToPath(new URL("..", import.meta.url));
-  const virtualRoutesPath = path.join(distPath, VIRTUAL_ROUTES_DIR);
-  for (const absoluteFilePath of await recursiveReaddir(virtualRoutesPath)) {
-    const relativeFilePath = path.relative(virtualRoutesPath, absoluteFilePath);
+  const virtualRoutesPath = joinPath(distPath, VIRTUAL_ROUTES_DIR);
+  for (const absoluteFilePath of await glob(
+    joinPath(virtualRoutesPath, "**", "*")
+  )) {
+    const relativeFilePath = relativePath(virtualRoutesPath, absoluteFilePath);
     const routePath = relativeFilePath.replace(/\.[jt]sx?$/, "").replaceAll("\\", "/");
     const isIndex = /(^|\/)index$/.test(routePath);
     const normalizedVirtualRoutePath = isIndex ? routePath.slice(0, -"index".length).replace(/\/$/, "") || void 0 : (
@@ -27,15 +29,15 @@ async function addVirtualRoutes(config) {
         path: normalizedVirtualRoutePath,
         index: isIndex || void 0,
         caseSensitive: void 0,
-        file: path.relative(config.appDirectory, absoluteFilePath)
+        file: relativePath(config.appDirectory, absoluteFilePath)
       };
       if (!config.routes[VIRTUAL_ROOT]) {
         config.routes[VIRTUAL_ROOT] = {
           id: VIRTUAL_ROOT,
           path: "",
-          file: path.relative(
+          file: relativePath(
             config.appDirectory,
-            path.join(distPath, VIRTUAL_ROOT + ".jsx")
+            joinPath(distPath, VIRTUAL_ROOT + ".jsx")
           )
         };
       }

package/dist/virtual-routes/components/FlameChartWrapper.jsx

@@ -0,0 +1,125 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import _useResizeObserver from "use-resize-observer";
+const useResizeObserver = _useResizeObserver;
+const FlameChartWrapper = (props) => {
+  const boxRef = useRef(null);
+  const canvasRef = useRef(null);
+  const flameChart = useRef(null);
+  useResizeObserver({
+    ref: boxRef,
+    onResize: ({ width = 0, height = 0 }) => flameChart.current?.resize(width, height - 3)
+  });
+  const initialize = useCallback(() => {
+    const {
+      data,
+      marks,
+      waterfall,
+      timeseries,
+      settings,
+      colors,
+      plugins,
+      timeframeTimeseries
+    } = props;
+    if (canvasRef.current && boxRef.current) {
+      const { width = 0, height = 0 } = boxRef.current.getBoundingClientRect();
+      canvasRef.current.width = width;
+      canvasRef.current.height = height - 3;
+      flameChart.current = new flameChartJs.FlameChart({
+        canvas: canvasRef.current,
+        data,
+        marks,
+        waterfall,
+        timeseries,
+        timeframeTimeseries,
+        settings,
+        colors,
+        plugins
+      });
+    }
+  }, [props]);
+  const setBoxRef = useCallback(
+    (ref) => {
+      const isNewRef = ref !== boxRef.current;
+      boxRef.current = ref;
+      if (isNewRef) {
+        initialize();
+      }
+    },
+    [initialize]
+  );
+  const setCanvasRef = useCallback(
+    (ref) => {
+      const isNewRef = ref !== canvasRef.current;
+      canvasRef.current = ref;
+      if (isNewRef) {
+        initialize();
+      }
+    },
+    [initialize]
+  );
+  useEffect(() => {
+    if (props.data) {
+      flameChart.current?.setNodes(props.data);
+    }
+  }, [props.data]);
+  useEffect(() => {
+    if (props.marks) {
+      flameChart.current?.setMarks(props.marks);
+    }
+  }, [props.marks]);
+  useEffect(() => {
+    if (props.waterfall) {
+      flameChart.current?.setWaterfall(props.waterfall);
+    }
+  }, [props.waterfall]);
+  useEffect(() => {
+    if (props.timeseries) {
+      flameChart.current?.setTimeseries(props.timeseries);
+    }
+  }, [props.timeseries]);
+  useEffect(() => {
+    if (props.timeframeTimeseries) {
+      flameChart.current?.setTimeframeTimeseries(props.timeframeTimeseries);
+    }
+  }, [props.timeframeTimeseries]);
+  useEffect(() => {
+    if (props.settings && flameChart.current) {
+      flameChart.current.setSettings(props.settings);
+      flameChart.current.renderEngine.recalcChildrenSizes();
+      flameChart.current.render();
+    }
+  }, [props.settings]);
+  useEffect(() => {
+    if (props.position) {
+      flameChart.current?.setFlameChartPosition(props.position);
+    }
+  }, [props.position]);
+  useEffect(() => {
+    if (props.zoom) {
+      flameChart.current?.setZoom(props.zoom.start, props.zoom.end);
+    }
+  }, [props.zoom]);
+  useEffect(() => {
+    if (props.onSelect) {
+      flameChart.current?.on("select", props.onSelect);
+    }
+    return () => {
+      if (props.onSelect) {
+        flameChart.current?.removeListener("select", props.onSelect);
+      }
+    };
+  }, [props.onSelect]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { height: `${props.height ? props.height : 300}px` },
+      className: props.className,
+      ref: setBoxRef,
+      children: /* @__PURE__ */ jsx("canvas", { ref: setCanvasRef })
+    }
+  );
+};
+export {
+  FlameChartWrapper
+};

package/dist/virtual-routes/routes/debug-network.jsx

@@ -0,0 +1,289 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { FlameChartWrapper } from "../components/FlameChartWrapper.jsx";
+import { Link } from "@remix-run/react";
+import { Script } from "@shopify/hydrogen";
+function DebugNetwork() {
+  const serverEvents = useRef({
+    smallestStartTime: 0,
+    mainRequests: [],
+    subRequests: {},
+    showPutRequests: false
+  });
+  const [timestamp, setTimestamp] = useState();
+  function serverEventHandler(onEvent) {
+    return (event) => {
+      const data = JSON.parse(event.data);
+      if (serverEvents.current.smallestStartTime === 0) {
+        serverEvents.current.smallestStartTime = data.startTime;
+      } else {
+        serverEvents.current.smallestStartTime = Math.min(
+          data.startTime,
+          serverEvents.current.smallestStartTime
+        );
+      }
+      onEvent(data);
+      setTimeout(() => {
+        setTimestamp((/* @__PURE__ */ new Date()).getTime());
+      }, 0);
+    };
+  }
+  useEffect(() => {
+    const evtSource = new EventSource("/debug-network-server", {
+      withCredentials: true
+    });
+    const mainRequestHandler = serverEventHandler((data) => {
+      serverEvents.current.mainRequests = [
+        ...serverEvents.current.mainRequests,
+        {
+          ...data,
+          url: data.url.replace(location.origin, "")
+        }
+      ];
+    });
+    evtSource.addEventListener("Request", mainRequestHandler);
+    const subRequestHandler = serverEventHandler((data) => {
+      let groupEvents = serverEvents.current.subRequests[data.id] || [];
+      groupEvents = [...groupEvents, data];
+      serverEvents.current.subRequests = {
+        ...serverEvents.current.subRequests,
+        [data.id]: groupEvents
+      };
+    });
+    evtSource.addEventListener("Sub request", subRequestHandler);
+    return () => {
+      evtSource.removeEventListener("Request", mainRequestHandler);
+      evtSource.removeEventListener("Sub request", subRequestHandler);
+      evtSource.close();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Script,
+      {
+        src: "https://unpkg.com/flame-chart-js@2.3.1/dist/index.min.js",
+        suppressHydrationWarning: true
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          width: "100vw",
+          backgroundColor: "#F5F5F5",
+          fontSize: "0.8rem"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => {
+                            fetch("/debug-network-server", { method: "DELETE" }).catch(
+                              (error) => console.error("Could not clear history:", error)
+                            );
+                            serverEvents.current = {
+                              smallestStartTime: 0,
+                              mainRequests: [],
+                              subRequests: {},
+                              showPutRequests: serverEvents.current.showPutRequests
+                            };
+                            setTimestamp((/* @__PURE__ */ new Date()).getTime());
+                          },
+                          children: "Clear"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          id: "showPutRequests",
+                          type: "checkbox",
+                          checked: serverEvents.current.showPutRequests,
+                          onChange: (event) => {
+                            serverEvents.current.showPutRequests = event.target.checked;
+                            setTimestamp((/* @__PURE__ */ new Date()).getTime());
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("label", { htmlFor: "showPutRequests", children: "Show cache update requests (PUT)" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    style: {
+                      paddingRight: "5px"
+                    },
+                    children: "Unstable"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(FlameChart, { serverEvents: serverEvents.current }, timestamp),
+          /* @__PURE__ */ jsxs("p", { style: { color: "#777", fontSize: "0.7rem", paddingLeft: "5px" }, children: [
+            "Note: You may need to turn on '",
+            /* @__PURE__ */ jsx("b", { children: "Disable Cache" }),
+            "' for your navigating window. If you are not seeing any requests, try re-running '",
+            /* @__PURE__ */ jsx("b", { children: "npm run dev" }),
+            "' in your terminal while leaving this window open."
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+const PANEL_HEIGHT = 300;
+function FlameChart({ serverEvents }) {
+  if (serverEvents.mainRequests.length === 0)
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          height: `${PANEL_HEIGHT}px`,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "#FAFAFA"
+        },
+        children: /* @__PURE__ */ jsxs("p", { style: { fontWeight: "bold", color: "#777" }, children: [
+          "Navigate your",
+          " ",
+          /* @__PURE__ */ jsx(Link, { to: "/", target: "_blank", children: "app" })
+        ] })
+      }
+    );
+  let totalRequests = 0;
+  let totalSubRequests = 0;
+  const calcDuration = (time) => time - serverEvents.smallestStartTime;
+  let items = [];
+  serverEvents.mainRequests.forEach((mainRequest) => {
+    const mainResponseStart = calcDuration(mainRequest.endTime);
+    let mainResponseEnd = mainResponseStart;
+    const subRequestItems = [];
+    const subRequests = serverEvents.subRequests[mainRequest.id] || [];
+    subRequests.forEach((subRequest) => {
+      const subRequestEnd = calcDuration(subRequest.endTime);
+      if (subRequest.cacheStatus !== "PUT") {
+        mainResponseEnd = Math.max(mainResponseEnd, subRequestEnd);
+      }
+      const subRequestItem = {
+        name: `${subRequest.cacheStatus} ${subRequest.url}`.trim(),
+        intervals: "request",
+        timing: {
+          requestStart: calcDuration(subRequest.startTime),
+          requestEnd: subRequestEnd
+        }
+      };
+      if (serverEvents.showPutRequests) {
+        subRequestItems.push(subRequestItem);
+      } else {
+        subRequest.cacheStatus !== "PUT" && subRequestItems.push(subRequestItem);
+      }
+      totalSubRequests++;
+    });
+    totalRequests++;
+    items.push({
+      name: mainRequest.url,
+      intervals: "mainRequest",
+      timing: {
+        requestStart: calcDuration(mainRequest.startTime),
+        responseStart: mainResponseStart,
+        responseEnd: mainResponseEnd
+      }
+    });
+    items = items.concat(subRequestItems);
+  });
+  const data = {
+    items,
+    intervals: {
+      mainRequest: [
+        {
+          name: "server",
+          color: "#99CC00",
+          type: "block",
+          start: "requestStart",
+          end: "responseStart"
+        },
+        {
+          name: "streaming",
+          color: "#33CCFF",
+          type: "block",
+          start: "responseStart",
+          end: "responseEnd"
+        }
+      ],
+      request: [
+        {
+          name: "request",
+          color: "#FFCC00",
+          type: "block",
+          start: "requestStart",
+          end: "requestEnd"
+        }
+      ]
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      FlameChartWrapper,
+      {
+        height: PANEL_HEIGHT,
+        waterfall: data,
+        settings: {
+          styles: {
+            waterfallPlugin: {
+              defaultHeight: PANEL_HEIGHT
+            }
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          padding: "5px",
+          borderTop: "1px solid #CCC",
+          borderBottom: "1px solid #CCC"
+        },
+        children: [
+          totalRequests,
+          " requests",
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                paddingLeft: "2px",
+                paddingRight: "2px"
+              },
+              children: "|"
+            }
+          ),
+          totalSubRequests,
+          " sub requests"
+        ]
+      }
+    )
+  ] });
+}
+export {
+  DebugNetwork as default
+};

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

@@ -11,6 +11,7 @@ import {
 import styles from "./assets/styles.css";
 import favicon from "./assets/favicon.svg";
 import { Layout } from "./components/Layout.jsx";
+import { useNonce } from "@shopify/hydrogen";
 const links = () => {
   return [
     { rel: "stylesheet", href: styles },
@@ -18,6 +19,7 @@ const links = () => {
   ];
 };
 function App() {
+  const nonce = useNonce();
   return /* @__PURE__ */ jsxs("html", { lang: "en", children: [
     /* @__PURE__ */ jsxs("head", { children: [
       /* @__PURE__ */ jsx("meta", { charSet: "utf-8" }),
@@ -35,12 +37,13 @@ function App() {
     ] }),
     /* @__PURE__ */ jsxs("body", { children: [
       /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Outlet, {}) }),
-      /* @__PURE__ */ jsx(ScrollRestoration, {}),
-      /* @__PURE__ */ jsx(Scripts, {})
+      /* @__PURE__ */ jsx(ScrollRestoration, { nonce }),
+      /* @__PURE__ */ jsx(Scripts, { nonce })
     ] })
   ] });
 }
 function ErrorBoundary() {
+  const nonce = useNonce();
   const error = useRouteError();
   let errorMessage = "Unknown error";
   let errorStatus = 500;
@@ -71,8 +74,8 @@ function ErrorBoundary() {
         /* @__PURE__ */ jsx("h2", { children: errorStatus }),
         errorMessage && /* @__PURE__ */ jsx("fieldset", { children: /* @__PURE__ */ jsx("pre", { children: errorMessage }) })
       ] }) }),
-      /* @__PURE__ */ jsx(ScrollRestoration, {}),
-      /* @__PURE__ */ jsx(Scripts, {})
+      /* @__PURE__ */ jsx(ScrollRestoration, { nonce }),
+      /* @__PURE__ */ jsx(Scripts, { nonce })
     ] })
   ] });
 }

package/oclif.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.2.2",
+  "version": "5.2.3",
   "commands": {
     "hydrogen:build": {
       "id": "hydrogen:build",

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "5.2.2",
+  "version": "5.2.3",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -23,32 +23,47 @@
     "@types/recursive-readdir": "^2.2.1",
     "@types/tar-fs": "^2.0.1",
     "@vitest/coverage-v8": "^0.33.0",
+    "fast-glob": "^3.2.12",
+    "flame-chart-js": "2.3.1",
     "type-fest": "^3.6.0",
     "vitest": "^0.33.0"
   },
-  "peerDependencies": {
-    "@remix-run/react": "1.19.1",
-    "@shopify/hydrogen-react": "^2023.7.4",
-    "@shopify/remix-oxygen": "^1.1.3"
-  },
   "dependencies": {
     "@ast-grep/napi": "0.11.0",
     "@graphql-codegen/cli": "3.3.1",
     "@oclif/core": "2.8.11",
-    "@remix-run/dev": "1.19.1",
     "@shopify/cli-kit": "3.48.0",
     "@shopify/hydrogen-codegen": "^0.0.2",
     "@shopify/mini-oxygen": "^2.2.1",
     "ansi-escapes": "^6.2.0",
     "diff": "^5.1.0",
-    "fast-glob": "^3.2.12",
     "fs-extra": "^11.1.0",
     "get-port": "^7.0.0",
     "gunzip-maybe": "^1.4.2",
     "prettier": "^2.8.4",
-    "recursive-readdir": "^2.2.3",
     "tar-fs": "^2.1.1",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "use-resize-observer": "^9.1.0"
+  },
+  "peerDependencies": {
+    "@remix-run/dev": "1.19.1",
+    "@remix-run/react": "1.19.1",
+    "@shopify/hydrogen-react": "^2023.7.4",
+    "@shopify/remix-oxygen": "^1.1.4"
+  },
+  "peerDependenciesMeta": {
+    "@remix-run/dev": {
+      "optional": true
+    },
+    "@remix-run/react": {
+      "optional": true
+    },
+    "@shopify/hydrogen-react": {
+      "optional": true
+    },
+    "@shopify/remix-oxygen": {
+      "optional": true
+    }
   },
   "bin": "dist/create-app.js",
   "exports": {