@shopify/cli-hydrogen 6.1.1 → 7.0.1

package/dist/virtual-routes/assets/favicon-dark.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none">
+  <style>
+    .stroke {
+      stroke: #5c5f62;
+    }
+    .fill {
+      fill: #5c5f62;
+    }
+  </style>
+  <path
+    class="stroke"
+    fill-rule="evenodd"
+    d="M16.1 16.04 1 8.02 6.16 5.3l5.82 3.09 4.88-2.57-5.82-3.1L16.21 0l15.1 8.02-5.17 2.72-5.5-2.91-4.88 2.57 5.5 2.92-5.16 2.72Z"
+  />
+  <path
+    class="fill"
+    fill-rule="evenodd"
+    d="M16.1 32 1 23.98l5.16-2.72 5.82 3.08 4.88-2.57-5.82-3.08 5.17-2.73 15.1 8.02-5.17 2.72-5.5-2.92-4.88 2.58 5.5 2.92L16.1 32Z"
+  />
+</svg>

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

@@ -8,7 +8,13 @@ const FlameChartWrapper = (props) => {
   const flameChart = useRef(null);
   useResizeObserver({
     ref: boxRef,
-    onResize: ({ width = 0, height = 0 }) => flameChart.current?.resize(width, height - 3)
+    onResize: ({ width = 0, height = 0 }) => {
+      if (props.onResize) {
+        props.onResize(flameChart.current, width, height);
+      } else {
+        flameChart.current?.resize(width, height - 3);
+      }
+    }
   });
   const initialize = useCallback(() => {
     const {
@@ -110,15 +116,7 @@ const FlameChartWrapper = (props) => {
       }
     };
   }, [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 })
-    }
-  );
+  return /* @__PURE__ */ jsx("div", { style: { height: `100%` }, className: props.className, ref: setBoxRef, children: /* @__PURE__ */ jsx("canvas", { ref: setCanvasRef }) });
 };
 export {
   FlameChartWrapper

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

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function IconClose(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "20px",
+      height: "20px",
+      ...props,
+      stroke: props.stroke || "currentColor",
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Close" }),
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: "4.44194",
+            y1: "4.30806",
+            x2: "15.7556",
+            y2: "15.6218",
+            strokeWidth: "1.25"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            y1: "-0.625",
+            x2: "16",
+            y2: "-0.625",
+            transform: "matrix(-0.707107 0.707107 0.707107 0.707107 16 4.75)",
+            strokeWidth: "1.25"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  IconClose
+};

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

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function IconDiscard(props) {
+  const fillColor = props.fill || "#333333";
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Clear" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M11.5 8.25C11.9142 8.25 12.25 8.58579 12.25 9V13.25C12.25 13.6642 11.9142 14 11.5 14C11.0858 14 10.75 13.6642 10.75 13.25V9C10.75 8.58579 11.0858 8.25 11.5 8.25Z",
+            fill: fillColor
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M9.25 9C9.25 8.58579 8.91421 8.25 8.5 8.25C8.08579 8.25 7.75 8.58579 7.75 9V13.25C7.75 13.6642 8.08579 14 8.5 14C8.91421 14 9.25 13.6642 9.25 13.25V9Z",
+            fill: fillColor
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M7.24994 5.25C7.24994 3.73122 8.48116 2.5 9.99994 2.5C11.5187 2.5 12.7499 3.73122 12.7499 5.25H15.75C16.1642 5.25 16.5 5.58579 16.5 6C16.5 6.41421 16.1642 6.75 15.75 6.75H14.9999L14.9998 12.2001C14.9998 13.8802 14.9997 14.7203 14.6728 15.362C14.3851 15.9265 13.9262 16.3854 13.3617 16.673C12.72 17 11.8799 17 10.1997 17H9.79999C8.11978 17 7.27968 17 6.63793 16.673C6.07343 16.3854 5.61448 15.9264 5.32687 15.3619C4.99989 14.7202 4.9999 13.8801 4.99994 12.1999L5.00005 6.75H4.25C3.83579 6.75 3.5 6.41421 3.5 6C3.5 5.58579 3.83579 5.25 4.25 5.25H7.24994ZM8.74994 5.25C8.74994 4.55964 9.30958 4 9.99994 4C10.6903 4 11.2499 4.55964 11.2499 5.25H8.74994ZM6.50007 6.75H13.4999L13.4998 12.2001C13.4998 13.0649 13.4986 13.6233 13.4639 14.0483C13.4305 14.4558 13.374 14.6068 13.3362 14.681C13.1924 14.9632 12.963 15.1927 12.6807 15.3365C12.6065 15.3743 12.4555 15.4308 12.048 15.4641C11.623 15.4988 11.0646 15.5 10.1997 15.5H9.79999C8.93513 15.5 8.37671 15.4988 7.95169 15.4641C7.54418 15.4308 7.3931 15.3743 7.31893 15.3365C7.03668 15.1927 6.80721 14.9632 6.6634 14.681C6.62561 14.6068 6.56909 14.4557 6.53581 14.0482C6.50109 13.6232 6.49994 13.0648 6.49995 12.1999L6.50007 6.75Z",
+            fill: fillColor
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  IconDiscard
+};

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 }),
+        requestInfo.responseInit ? /* @__PURE__ */ jsx(
+          DetailsRow,
+          {
+            rowName: "Status",
+            value: `${requestInfo.responseInit?.status} ${requestInfo.responseInit?.statusText}`
+          }
+        ) : null,
+        /* @__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
+};