@shopify/cli-hydrogen 6.0.2 → 7.0.0

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

@@ -0,0 +1,179 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { Link } from "@remix-run/react";
+import { IconClose } from "./IconClose.jsx";
+import _useResizeObserver from "use-resize-observer";
+const useResizeObserver = _useResizeObserver;
+const TABS = {
+  1: "General",
+  2: "Headers",
+  3: "Cache",
+  4: "Data"
+};
+function RequestDetails({
+  serverEvents,
+  activeEventId,
+  setActiveEventId
+}) {
+  const [activeTab, setActiveTab] = useState(1);
+  if (!activeEventId) {
+    return null;
+  }
+  const requestInfo = serverEvents.allRequests[activeEventId];
+  if (!requestInfo) {
+    return null;
+  }
+  function activeTabClass(tab) {
+    return activeTab === tab ? " active" : "";
+  }
+  function TabButton(key) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        tabIndex: 0,
+        className: `tab${activeTabClass(key)}`,
+        onClick: () => setActiveTab(key),
+        onKeyUp: (event) => {
+          if (event.code === "Space")
+            setActiveTab(key);
+        },
+        children: TABS[key]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { id: "request-detail", children: [
+    /* @__PURE__ */ jsxs("div", { id: "request-detail-header", children: [
+      /* @__PURE__ */ jsxs(TabButtonsBar, { children: [
+        TabButton(1),
+        !!requestInfo.responseInit?.headers && TabButton(2),
+        !!requestInfo.cache && TabButton(3),
+        !!requestInfo.responsePayload && TabButton(4)
+      ] }),
+      /* @__PURE__ */ jsx("div", { id: "close-request-detail", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "plain icon",
+          onClick: () => {
+            setActiveEventId(void 0);
+          },
+          children: /* @__PURE__ */ jsx(IconClose, {})
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "tabPanels pad", children: [
+      /* @__PURE__ */ jsx("div", { id: "tab1-panel", className: `tabPanel${activeTabClass(1)}`, children: /* @__PURE__ */ jsxs("div", { className: "grid-layout", children: [
+        /* @__PURE__ */ jsx(DetailsRow, { rowName: "Name", value: requestInfo.displayName }),
+        /* @__PURE__ */ jsx(DetailsRow, { rowName: "Request URL", value: requestInfo.url }),
+        /* @__PURE__ */ jsx(
+          DetailsRow,
+          {
+            rowName: "Status",
+            value: `${requestInfo.responseInit?.status} ${requestInfo.responseInit?.statusText}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DetailsRow,
+          {
+            rowName: "GraphiQL",
+            value: requestInfo.graphiqlLink,
+            type: "url"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DetailsRow,
+          {
+            rowName: "Location",
+            text: requestInfo.stackLine,
+            value: requestInfo.stackLink,
+            type: "url"
+          }
+        )
+      ] }) }),
+      !!requestInfo.responseInit?.headers && /* @__PURE__ */ jsx("div", { id: "tab2-panel", className: `tabPanel${activeTabClass(2)}`, children: /* @__PURE__ */ jsx("div", { className: "grid-layout", children: Object.entries(requestInfo.responseInit?.headers).map(
+        ([key, value]) => /* @__PURE__ */ jsx(DetailsRow, { rowName: value[0], value: value[1] }, key)
+      ) }) }),
+      !!requestInfo.cache && /* @__PURE__ */ jsx("div", { id: "tab3-panel", className: `tabPanel${activeTabClass(3)}`, children: /* @__PURE__ */ jsxs("div", { className: "grid-layout", children: [
+        /* @__PURE__ */ jsx(DetailsRow, { rowName: "Status", value: requestInfo.cache?.status }),
+        /* @__PURE__ */ jsx(
+          DetailsRow,
+          {
+            rowName: "Cache-Control",
+            value: requestInfo.cache?.strategy
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DetailsRow,
+          {
+            rowName: "Cache Key",
+            value: requestInfo.cache?.key?.toString()
+          }
+        )
+      ] }) }),
+      !!requestInfo.responsePayload && /* @__PURE__ */ jsx("div", { id: "tab4-panel", className: `tabPanel${activeTabClass(4)}`, children: /* @__PURE__ */ jsx("pre", { className: "code-json", children: JSON.stringify(requestInfo.responsePayload, void 0, 2) }) })
+    ] })
+  ] });
+}
+function TabButtonsBar({ children }) {
+  const [fadeClass, setFadeClass] = useState("");
+  const scrollBarRef = useRef(null);
+  useResizeObserver({
+    ref: scrollBarRef,
+    onResize: () => {
+      if (scrollBarRef.current) {
+        setFade(scrollBarRef.current);
+      }
+    }
+  });
+  function setFade(target) {
+    if (target.scrollWidth === target.clientWidth) {
+      setFadeClass("");
+      return;
+    }
+    const scrollRange = target.scrollWidth - target.clientWidth;
+    if (target.scrollLeft > 10 && target.scrollLeft < scrollRange - 10) {
+      setFadeClass("fadeLeftRight");
+    } else if (target.scrollLeft <= 10) {
+      setFadeClass("fadeRight");
+    } else if (target.scrollLeft > scrollRange - 10) {
+      setFadeClass("fadeLeft");
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: "tab-buttons-wrapper",
+      onResize: (event) => setFade(event.currentTarget),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: "tabButtons",
+            ref: scrollBarRef,
+            className: "flex-row gap-tiny",
+            onScroll: (event) => setFade(event.currentTarget),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: `fadCover ${fadeClass}` })
+      ]
+    }
+  );
+}
+function DetailsRow({
+  rowName,
+  value,
+  text,
+  type = "string"
+}) {
+  if (!rowName || !value) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "gridTitle", children: rowName }),
+    type === "url" && /* @__PURE__ */ jsx(Link, { target: "_blank", to: value, children: text ?? value }),
+    type === "string" && /* @__PURE__ */ jsx("div", { className: "word-break-all", children: text ?? value })
+  ] });
+}
+export {
+  RequestDetails
+};

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

@@ -0,0 +1,92 @@
+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/virtual-routes/components/RequestWaterfall.jsx

@@ -0,0 +1,151 @@
+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/virtual-routes/lib/useDebugNetworkServer.jsx

@@ -0,0 +1,176 @@
+import { useEffect, useRef, useState } from "react";
+let nextEventId = 0;
+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("/debug-network-server", { 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("/debug-network-server", {
+      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 {
+  buildRequestData,
+  useDebugNetworkServer
+};