@shopify/cli-hydrogen 5.2.2 → 5.3.0

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/render-errors.js

@@ -30,7 +30,7 @@ function renderMissingLink({ session, cliCommand }) {
     type: 0,
     message: `No linked Hydrogen storefront on ${session.storeFqdn}`,
     tryMessage: [
-      "To pull environment variables, link this project to a Hydrogen storefront. To select a storefront to link, run",
+      "To pull environment variables or to deploy to Oxygen, link this project to a Hydrogen storefront. To select a storefront to link, run",
       { command: `${cliCommand} link` }
     ]
   });

package/dist/lib/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

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