@shopify/hydrogen 2026.4.5 → 2026.10.0-preview.2

package/dist/vite/virtual-routes/components/RequestTable.jsx

@@ -1,91 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
-import {
-  buildRequestData
-} from "../lib/useDebugNetworkServer.jsx";
-function RequestTable({
-  serverEvents,
-  activeEventId,
-  setActiveEventId
-}) {
-  let totalMainRequests = 0;
-  let totalSubRequest = 0;
-  const items = buildRequestData({
-    serverEvents,
-    buildMainRequest: (mainRequest, timing) => {
-      totalMainRequests++;
-      return {
-        id: mainRequest.id,
-        requestId: mainRequest.requestId,
-        url: mainRequest.url,
-        status: mainRequest.responseInit?.status ?? 0,
-        cacheStatus: mainRequest.cacheStatus,
-        duration: timing.responseEnd - timing.requestStart
-      };
-    },
-    buildSubRequest: (subRequest, timing) => {
-      if (serverEvents.hidePutRequests) {
-        subRequest.cacheStatus !== "PUT" && totalSubRequest++;
-      } else {
-        totalSubRequest++;
-      }
-      return {
-        id: subRequest.id,
-        requestId: subRequest.requestId,
-        url: subRequest.displayName ?? subRequest.url,
-        status: subRequest.responseInit?.status ?? 0,
-        cacheStatus: subRequest.cacheStatus,
-        duration: timing.requestEnd - timing.requestStart
-      };
-    }
-  });
-  useEffect(() => {
-    if (!serverEvents.preserveLog && activeEventId) {
-      const selectedItem = items.find((item) => item.id === activeEventId);
-      if (!selectedItem) {
-        setActiveEventId(void 0);
-      }
-    }
-  }, [serverEvents.preserveLog]);
-  return /* @__PURE__ */ jsx("div", { id: "request-table", children: /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { id: "request-table__header", className: "grid-row", children: [
-      /* @__PURE__ */ jsx("div", { className: "grid-cell", children: "Name" }),
-      /* @__PURE__ */ jsx("div", { className: "grid-cell", children: "Cache" }),
-      /* @__PURE__ */ jsx("div", { className: "grid-cell", children: "Time" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { id: "request-table__content", children: items.map((row) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        id: `request-table__row-${row.id}`,
-        tabIndex: 0,
-        className: `grid-row${activeEventId === row.id ? " active" : ""}${row.status >= 400 ? " error" : ""}`,
-        onClick: () => setActiveEventId(row.id),
-        onKeyUp: (event) => {
-          if (event.code === "Space") setActiveEventId(row.id);
-        },
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "grid-cell", children: row.url }),
-          /* @__PURE__ */ jsx("div", { className: "grid-cell", children: row.cacheStatus }),
-          /* @__PURE__ */ jsxs("div", { className: "grid-cell", children: [
-            row.duration,
-            "ms"
-          ] })
-        ]
-      },
-      row.id
-    )) }),
-    /* @__PURE__ */ jsxs("div", { id: "request-table__footer", children: [
-      totalMainRequests,
-      " request",
-      totalMainRequests > 1 ? "s" : "",
-      " |",
-      " ",
-      totalSubRequest,
-      " sub request",
-      totalSubRequest > 1 ? "s" : ""
-    ] })
-  ] }) });
-}
-export {
-  RequestTable
-};

package/dist/vite/virtual-routes/components/RequestWaterfall.jsx

@@ -1,151 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { FlameChartWrapper } from "./FlameChartWrapper.jsx";
-import {
-  buildRequestData
-} from "../lib/useDebugNetworkServer.jsx";
-const STYLE_FONT = "10px Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif";
-let resizeTimeout;
-function RequestWaterfall({
-  serverEvents,
-  config
-}) {
-  const items = buildRequestData({
-    serverEvents,
-    buildMainRequest: (mainRequest, timing) => {
-      return {
-        name: mainRequest.url,
-        intervals: "mainRequest",
-        timing,
-        meta: [
-          {
-            name: "id",
-            value: mainRequest.id,
-            color: "black"
-          }
-        ]
-      };
-    },
-    buildSubRequest: (subRequest, timing) => {
-      return {
-        name: `${subRequest.cacheStatus} ${subRequest.displayName ?? subRequest.url}`.trim(),
-        intervals: "request",
-        timing,
-        meta: [
-          {
-            name: "id",
-            value: subRequest.id,
-            color: "black"
-          }
-        ]
-      };
-    }
-  });
-  const data = {
-    items: [
-      {
-        // Workaround a bug in flame-chart-js where the first item onSelect is not triggered
-        name: "padding-request",
-        intervals: "request",
-        timing: {
-          requestStart: 0,
-          responseStart: 0,
-          responseEnd: 0,
-          requestEnd: -1
-        }
-      },
-      ...items
-    ],
-    intervals: {
-      mainRequest: [
-        {
-          name: "server",
-          color: config.colors.server,
-          type: "block",
-          start: "requestStart",
-          end: "responseStart"
-        },
-        {
-          name: "streaming",
-          color: config.colors.streaming,
-          type: "block",
-          start: "responseStart",
-          end: "responseEnd"
-        }
-      ],
-      request: [
-        {
-          name: "request",
-          color: config.colors.subRequest,
-          type: "block",
-          start: "requestStart",
-          end: "requestEnd"
-        }
-      ]
-    }
-  };
-  const onSelect = (data2) => {
-    const eventIdMeta = data2?.node?.meta?.filter(
-      (meta) => meta.name === "id"
-    )?.[0];
-    if (eventIdMeta) {
-      setTimeout(() => {
-        window.setActiveEventId && window.setActiveEventId(eventIdMeta.value);
-        document.querySelector(`#request-table__row-${eventIdMeta.value}`)?.scrollIntoView();
-      }, 0);
-    }
-  };
-  const settings = useMemo(
-    () => ({
-      options: {
-        tooltip: () => {
-        }
-      },
-      styles: {
-        main: {
-          blockHeight: 22,
-          font: STYLE_FONT,
-          tooltipShadowBlur: 1
-        },
-        timeframeSelectorPlugin: {
-          font: STYLE_FONT,
-          waterfallStrokeOpacity: 1,
-          waterfallFillOpacity: 0.1
-        },
-        timeGridPlugin: {
-          font: STYLE_FONT
-        },
-        waterfallPlugin: {
-          defaultHeight: 500
-        }
-      }
-    }),
-    []
-  );
-  return /* @__PURE__ */ jsx(
-    FlameChartWrapper,
-    {
-      waterfall: data,
-      onSelect,
-      settings,
-      onResize: (flameChart, width, height) => {
-        flameChart?.setSettings({
-          ...settings,
-          styles: {
-            ...settings.styles,
-            waterfallPlugin: {
-              defaultHeight: height
-            }
-          }
-        });
-        clearTimeout(resizeTimeout);
-        resizeTimeout = setTimeout(() => {
-          flameChart?.resize(width, height);
-        }, 50);
-      }
-    }
-  );
-}
-export {
-  RequestWaterfall
-};

package/dist/vite/virtual-routes/layout.jsx

@@ -1,33 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useNonce } from "@shopify/hydrogen";
-import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
-import { Layout as VirtualLayout } from "./components/Layout.jsx";
-import styles from "./assets/styles.css?url";
-function Layout() {
-  const nonce = useNonce();
-  return /* @__PURE__ */ jsxs("html", { lang: "en", children: [
-    /* @__PURE__ */ jsxs("head", { children: [
-      /* @__PURE__ */ jsx("meta", { charSet: "utf-8" }),
-      /* @__PURE__ */ jsx("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }),
-      /* @__PURE__ */ jsx("link", { rel: "stylesheet", href: styles }),
-      /* @__PURE__ */ jsx("title", { children: "Hydrogen" }),
-      /* @__PURE__ */ jsx(
-        "meta",
-        {
-          name: "description",
-          content: "A custom storefront powered by Hydrogen"
-        }
-      ),
-      /* @__PURE__ */ jsx(Meta, {}),
-      /* @__PURE__ */ jsx(Links, {})
-    ] }),
-    /* @__PURE__ */ jsxs("body", { children: [
-      /* @__PURE__ */ jsx(VirtualLayout, { children: /* @__PURE__ */ jsx(Outlet, {}) }),
-      /* @__PURE__ */ jsx(ScrollRestoration, { nonce }),
-      /* @__PURE__ */ jsx(Scripts, { nonce })
-    ] })
-  ] });
-}
-export {
-  Layout as default
-};

package/dist/vite/virtual-routes/lib/useDebugNetworkServer.jsx

@@ -1,178 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-let nextEventId = 0;
-const SUBREQUEST_PROFILER_ENDPOINT = "/debug-network-server";
-const LOCAL_STORAGE_SETTINGS_KEY = "h2-debug-network-settings";
-function getSettings() {
-  try {
-    return JSON.parse(localStorage.getItem(LOCAL_STORAGE_SETTINGS_KEY) ?? "{}");
-  } catch {
-    return {};
-  }
-}
-function setSettings(settings) {
-  localStorage.setItem(
-    LOCAL_STORAGE_SETTINGS_KEY,
-    JSON.stringify({ ...getSettings(), ...settings })
-  );
-}
-function useDebugNetworkServer() {
-  const serverEvents = useRef({
-    mainRequests: [],
-    subRequests: {},
-    allRequests: {},
-    hidePutRequests: true,
-    preserveLog: false,
-    activeEventId: void 0,
-    hideNotification: void 0
-  });
-  const [timestamp, setTimestamp] = useState();
-  function triggerRender() {
-    setTimestamp((/* @__PURE__ */ new Date()).getTime());
-  }
-  useEffect(() => {
-    try {
-      const debugNetworkSettings = getSettings();
-      serverEvents.current.hidePutRequests = debugNetworkSettings.hidePutRequests ?? true;
-      serverEvents.current.preserveLog = debugNetworkSettings.preserveLog ?? false;
-      serverEvents.current.hideNotification = debugNetworkSettings.hideNotification ?? void 0;
-      triggerRender();
-    } catch {
-    }
-  }, []);
-  function clearServerEvents() {
-    fetch(SUBREQUEST_PROFILER_ENDPOINT, { method: "DELETE" }).catch(
-      (error) => console.error("Could not clear history:", error)
-    );
-    serverEvents.current = {
-      ...serverEvents.current,
-      mainRequests: [],
-      subRequests: {},
-      allRequests: {},
-      activeEventId: void 0
-    };
-  }
-  function serverEventHandler(onEvent) {
-    return (event) => {
-      const data = JSON.parse(event.data);
-      const id = `event-${nextEventId++}`;
-      onEvent({
-        ...data,
-        id
-      });
-      setTimeout(triggerRender, 0);
-    };
-  }
-  useEffect(() => {
-    const evtSource = new EventSource(SUBREQUEST_PROFILER_ENDPOINT, {
-      withCredentials: true
-    });
-    const mainRequestHandler = serverEventHandler((data) => {
-      const cleanData = {
-        ...data,
-        url: data.url.replace(location.origin, "")
-      };
-      if (serverEvents.current.preserveLog) {
-        serverEvents.current.mainRequests = [
-          ...serverEvents.current.mainRequests,
-          cleanData
-        ];
-      } else {
-        serverEvents.current.mainRequests = [cleanData];
-      }
-      serverEvents.current.allRequests[cleanData.id] = cleanData;
-    });
-    evtSource.addEventListener("Request", mainRequestHandler);
-    const subRequestHandler = serverEventHandler((data) => {
-      let groupEvents = serverEvents.current.subRequests[data.requestId] || [];
-      groupEvents = [...groupEvents, data];
-      serverEvents.current.subRequests = {
-        ...serverEvents.current.subRequests,
-        [data.requestId]: groupEvents
-      };
-      serverEvents.current.allRequests[data.id] = data;
-    });
-    evtSource.addEventListener("Sub request", subRequestHandler);
-    return () => {
-      evtSource.removeEventListener("Request", mainRequestHandler);
-      evtSource.removeEventListener("Sub request", subRequestHandler);
-      evtSource.close();
-    };
-  }, []);
-  function clear() {
-    clearServerEvents();
-    triggerRender();
-  }
-  function setHidePutRequests(hidePutRequests) {
-    serverEvents.current.hidePutRequests = hidePutRequests;
-    setSettings({ hidePutRequests });
-    triggerRender();
-  }
-  function setPreserveLog(preserveLog) {
-    serverEvents.current.preserveLog = preserveLog;
-    setSettings({ preserveLog });
-    triggerRender();
-  }
-  function setActiveEventId(eventId) {
-    serverEvents.current.activeEventId = eventId;
-  }
-  function setHideNotification(hideNotification) {
-    serverEvents.current.hideNotification = hideNotification;
-    setSettings({ hideNotification });
-    triggerRender();
-  }
-  return {
-    serverEvents: serverEvents.current,
-    clear,
-    setHidePutRequests,
-    setPreserveLog,
-    setActiveEventId,
-    setHideNotification,
-    timestamp
-  };
-}
-function buildRequestData({
-  serverEvents,
-  buildMainRequest,
-  buildSubRequest
-}) {
-  const calcDuration = (time) => time - (serverEvents.mainRequests[0]?.startTime ?? 0);
-  let items = [];
-  serverEvents.mainRequests.forEach((mainRequest) => {
-    const mainResponseStart = calcDuration(mainRequest.endTime);
-    let mainResponseEnd = mainResponseStart;
-    const subRequestItems = [];
-    const subRequests = serverEvents.subRequests[mainRequest.requestId] || [];
-    subRequests.forEach((subRequest) => {
-      const subRequestEnd = calcDuration(subRequest.endTime);
-      if (subRequest.cacheStatus !== "PUT") {
-        mainResponseEnd = Math.max(mainResponseEnd, subRequestEnd);
-      }
-      const subRequestItem = buildSubRequest(subRequest, {
-        requestStart: calcDuration(subRequest.startTime),
-        requestEnd: subRequestEnd,
-        responseStart: -1,
-        responseEnd: -1
-      });
-      if (serverEvents.hidePutRequests) {
-        subRequest.cacheStatus !== "PUT" && subRequestItems.push(subRequestItem);
-      } else {
-        subRequestItems.push(subRequestItem);
-      }
-    });
-    items.push(
-      buildMainRequest(mainRequest, {
-        requestStart: calcDuration(mainRequest.startTime),
-        responseStart: mainResponseStart,
-        responseEnd: mainResponseEnd,
-        requestEnd: -1
-      })
-    );
-    items = items.concat(subRequestItems);
-  });
-  return items;
-}
-export {
-  SUBREQUEST_PROFILER_ENDPOINT,
-  buildRequestData,
-  useDebugNetworkServer
-};

package/dist/vite/virtual-routes/routes/[.]well-known.appspecific.com[.]chrome[.]devtools[.]json.jsx

@@ -1,37 +0,0 @@
-async function generateProjectUuid(root) {
-  const encoder = new TextEncoder();
-  const data = encoder.encode(root);
-  const hashBuffer = await crypto.subtle.digest("SHA-256", data);
-  const hashArray = Array.from(new Uint8Array(hashBuffer));
-  const hashHex = hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
-  return [
-    hashHex.slice(0, 8),
-    hashHex.slice(8, 12),
-    "4" + hashHex.slice(13, 16),
-    // Version 4
-    (parseInt(hashHex.slice(16, 18), 16) & 63 | 128).toString(16) + hashHex.slice(18, 20),
-    // Variant bits
-    hashHex.slice(20, 32)
-  ].join("-");
-}
-async function loader({ request, context }) {
-  let root = context?.env?.HYDROGEN_PROJECT_ROOT || "/workspace/hydrogen-dev";
-  root = root.replace(/\\/g, "/");
-  const uuid = await generateProjectUuid(root);
-  const responseData = {
-    workspace: {
-      root,
-      uuid
-    }
-  };
-  return new Response(JSON.stringify(responseData), {
-    status: 200,
-    headers: {
-      "Content-Type": "application/json",
-      "Cache-Control": "no-cache"
-    }
-  });
-}
-export {
-  loader
-};

package/dist/vite/virtual-routes/routes/[.]well-known.appspecific.com[.]chrome[.]devtools[.]json.tsx

@@ -1,79 +0,0 @@
-import type {LoaderFunctionArgs} from 'react-router';
-
-/**
- * Chrome DevTools Automatic Workspace Configuration
- *
- * This virtual route serves the Chrome DevTools workspace configuration file
- * that enables automatic workspace folder detection in Chrome M-135+.
- *
- * When developers open Chrome DevTools on localhost, Chrome requests this file
- * to auto-configure workspace settings. Without this file, developers see 404
- * errors in the console which creates visual noise.
- *
- * Note: The Chrome flag chrome://flags/#devtools-project-settings must be enabled
- * for automatic workspace detection to work (enabled by default in Chrome M-136+).
- *
- * Known Limitations:
- * - On macOS, Chrome may not be able to access the filesystem even with Full Disk Access
- *   granted due to sandboxing and security restrictions
- * - Enterprise policies may prevent automatic workspace detection from functioning
- * - Manual workspace addition may still show empty folders on macOS despite proper permissions
- *
- * @see https://chromium.googlesource.com/devtools/devtools-frontend/+/main/docs/ecosystem/automatic_workspace_folders.md
- */
-
-/**
- * Generate a deterministic UUID-like string using Web Crypto API
- * This works in worker environments and doesn't require external dependencies
- */
-async function generateProjectUuid(root: string): Promise<string> {
-  const encoder = new TextEncoder();
-  const data = encoder.encode(root);
-  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
-  const hashArray = Array.from(new Uint8Array(hashBuffer));
-  const hashHex = hashArray
-    .map((b) => b.toString(16).padStart(2, '0'))
-    .join('');
-
-  // Format as UUID v4-like string
-  return [
-    hashHex.slice(0, 8),
-    hashHex.slice(8, 12),
-    '4' + hashHex.slice(13, 16), // Version 4
-    ((parseInt(hashHex.slice(16, 18), 16) & 0x3f) | 0x80).toString(16) +
-      hashHex.slice(18, 20), // Variant bits
-    hashHex.slice(20, 32),
-  ].join('-');
-}
-
-export async function loader({request, context}: LoaderFunctionArgs) {
-  // Get the project root from the environment variable passed by the Hydrogen plugin
-  let root =
-    (context?.env as {HYDROGEN_PROJECT_ROOT?: string} | undefined)
-      ?.HYDROGEN_PROJECT_ROOT || '/workspace/hydrogen-dev';
-
-  // Normalize Windows paths to Unix style for Chrome DevTools
-  root = root.replace(/\\/g, '/');
-
-  // Generate a deterministic UUID based on the project path using Web Crypto API
-  // This ensures the same UUID for the same project path
-  const uuid = await generateProjectUuid(root);
-
-  // Chrome expects just the absolute path, not a file:// URL
-  // The automatic workspace detection handles the path format internally
-
-  const responseData = {
-    workspace: {
-      root,
-      uuid,
-    },
-  };
-
-  return new Response(JSON.stringify(responseData), {
-    status: 200,
-    headers: {
-      'Content-Type': 'application/json',
-      'Cache-Control': 'no-cache',
-    },
-  });
-}

package/dist/vite/virtual-routes/routes/graphiql.jsx

@@ -1,5 +0,0 @@
-import { graphiqlLoader } from "@shopify/hydrogen";
-const loader = graphiqlLoader;
-export {
-  loader
-};