@shopify/cli-hydrogen 6.0.2 → 7.0.0

package/dist/virtual-routes/assets/debug-network.css

@@ -0,0 +1,592 @@
+:root {
+  --background-color: #f1f1f1;
+  --primary-color: #333333;
+  --secondary-color: #e3e3e3;
+  --shadow-color: #999;
+  --dark-border-color: #666;
+  --button-state-color: #fafafa;
+  --secondary-text-color: #616161;
+  --highlight-color: #f5f5f5;
+  --hover-highlight-color: rgba(230, 238, 254, 0.5);
+  --active-highlight-color: #e6eefe;
+  --button-border: 1px solid rgba(51, 51, 51, 0.75);
+
+  --text-large: 0.813rem;
+  --text-normal: 0.688rem;
+  --font-bold: 650;
+
+  --box-shadow: 0 0.125rem 0.0625rem #0000000d, 0 0 0.0625rem #42474c73;
+}
+
+body {
+  color: var(--primary-color);
+  font-size: var(--text-normal);
+}
+
+input[type='checkbox'] {
+  display: grid;
+  place-content: center;
+
+  accent-color: var(--primary-color);
+
+  width: 1.15em;
+  height: 1.15em;
+}
+
+.text-normal {
+  font-size: var(--text-normal);
+}
+
+.text-large {
+  font-size: var(--text-large);
+}
+
+.bold {
+  font-weight: var(--font-bold);
+}
+
+.bold-1 {
+  font-weight: 550;
+}
+
+.flex-row {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  flex-direction: row;
+}
+
+.gap-small {
+  gap: 0.5rem;
+}
+
+.gap-tiny {
+  gap: 0.25rem;
+}
+
+.justify-between {
+  display: flex;
+  justify-content: space-between;
+}
+
+.form-control {
+  display: grid;
+  grid-template-columns: 1rem auto;
+  gap: 0.7rem;
+  align-items: center;
+}
+
+.form-control > * {
+  opacity: 75%;
+}
+
+.form-control > input:checked,
+.form-control > input:checked + label {
+  opacity: 100%;
+}
+
+header {
+  height: 3.5rem;
+  box-shadow: var(--box-shadow);
+}
+
+header .logo {
+  width: 16.7px;
+}
+
+header h1 {
+  font-size: var(--text-large);
+  font-weight: normal;
+  padding-left: 0.75rem;
+  color: #000;
+}
+
+.pill {
+  background-color: #f4f4f4;
+  border-radius: 4rem;
+  padding: 0.2rem 0.8rem;
+  font-size: 0.75rem;
+}
+
+.word-break-all {
+  word-break: break-all;
+}
+
+/* Button */
+button,
+[role='button'] {
+  cursor: pointer;
+}
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  appearance: button;
+  border-radius: 0.375rem;
+  border: var(--button-border);
+  background: #fff;
+  padding: 0.375rem 0.75rem;
+}
+
+button.plain {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+button.icon {
+  padding: 0.25rem;
+  line-height: 0;
+}
+
+button:hover {
+  background-color: #fafafa;
+}
+
+button:focus {
+  outline: 2px solid #005bd3;
+  outline-offset: 1px;
+  background-color: #fff;
+}
+
+button:active {
+  box-shadow: 0px 2px 0px 0px #c1c2c2 inset;
+  background-color: #ccc;
+}
+
+button.primary {
+  background-color: #0554f2;
+  color: #fff;
+  border: none;
+  font-weight: 600;
+}
+
+button:hover.primary {
+  background-color: #0c54e6;
+}
+
+button:focus.primary {
+  background-color: #0e50d4;
+}
+
+button:active.primary {
+  box-shadow: 0px 3px 4px 0px #0446cb inset;
+  background-color: #0e50d4;
+  color: #fff;
+}
+
+#buttonClear {
+  display: flex;
+  align-items: center;
+  padding-left: 0.5rem;
+}
+
+#buttonClear span {
+  padding-left: 2px;
+}
+
+#server-network-timing {
+  display: grid;
+  grid-template-rows: 3.5rem auto;
+  min-height: 100vh;
+}
+
+#server-network-timing.withNotification {
+  grid-template-rows: 3rem 3.5rem auto;
+}
+
+#main.empty {
+  display: grid;
+  grid-template-rows: 4rem auto;
+}
+
+#main.empty #request-info {
+  display: none;
+}
+
+.pad {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.link-margin-top {
+  margin-top: 0.5rem;
+}
+
+#options-and-legend {
+  height: 4rem;
+}
+
+#options-and-legend p {
+  font-size: var(--text-normal);
+}
+
+.legend {
+  background-color: var(--highlight-color);
+  border-radius: 0.125rem;
+  padding: 0.25rem 0.5rem;
+  gap: 0.75rem;
+}
+
+.swatch {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 0.125rem;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+#request-waterfall {
+  border-top: 1px solid var(--secondary-color);
+  border-bottom: 1px solid var(--secondary-color);
+  overflow: hidden;
+}
+
+#request-waterfall .request-waterfall-chart {
+  height: calc(60vh - 3.85rem);
+  width: calc(99.8vw - 1.75rem);
+}
+
+#server-network-timing.withNotification
+  #request-waterfall
+  .request-waterfall-chart {
+  height: calc(60vh - 5.35rem);
+}
+
+#request-info {
+  display: flex;
+  align-items: stretch;
+  flex-direction: row;
+
+  height: calc(40vh - 3.85rem);
+}
+
+#server-network-timing.withNotification #request-info {
+  height: calc(40vh - 5.35rem);
+}
+
+#request-info > div {
+  flex: 1;
+}
+
+#request-table__content .grid-row:nth-child(odd) {
+  background-color: var(--highlight-color);
+}
+
+#request-table {
+  height: 100%;
+}
+
+#request-table > div {
+  padding: 0;
+  font-size: var(--text-large);
+  display: grid;
+  grid-template-rows: 2.75rem auto 2rem;
+  height: 100%;
+}
+
+#request-table .grid-row {
+  display: grid;
+  grid-template-columns: 1fr 80px 80px;
+  border-bottom: 1px solid var(--secondary-color);
+}
+
+#request-table__content .grid-row {
+  cursor: pointer;
+}
+
+#request-table__content .grid-row:hover {
+  background-color: var(--hover-highlight-color);
+}
+
+#request-table .grid-cell {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  place-self: stretch;
+  align-self: center;
+  padding: 0.5rem 0;
+}
+
+#request-table .grid-cell:first-child {
+  padding-left: 1rem;
+}
+
+#request-table .grid-cell:last-child {
+  padding-right: 0.75rem;
+}
+
+#request-table__header.grid-row {
+  font-weight: 550;
+  font-size: var(--text-normal);
+}
+
+#request-table__header.grid-cell {
+  border-top: none;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  opacity: 75%;
+}
+
+#request-table__content {
+  overflow: auto;
+}
+
+#request-table__content .grid-row.active {
+  background-color: var(--active-highlight-color);
+}
+
+#request-table__footer {
+  border-top: 1px solid var(--secondary-color);
+  padding: 0.5rem 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: var(--text-normal);
+}
+
+/** Tab panels */
+
+#close-request-detail {
+  padding-left: 3px;
+}
+
+#request-detail-header {
+  display: grid;
+  grid-template-columns: auto min-content;
+  align-items: center;
+  padding-left: calc(1rem - 2px);
+  padding-right: 1rem;
+}
+
+#tabButtons {
+  overflow-x: scroll;
+  padding: 2px;
+}
+
+#tabButtons::-webkit-scrollbar {
+  display: none;
+}
+
+#tab-buttons-wrapper {
+  position: relative;
+  width: 100%;
+  overflow-x: scroll;
+}
+#tab-buttons-wrapper .fadCover {
+  position: absolute;
+  top: 0;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+
+  --gradient-color-start: rgba(255, 255, 255, 1);
+  --gradient-color-end: transparent;
+  --background-color: transparent;
+
+  background-image: linear-gradient(
+      to right,
+      var(--background-color),
+      var(--background-color)
+    ),
+    linear-gradient(to right, var(--background-color), var(--background-color)),
+    linear-gradient(
+      to right,
+      var(--gradient-color-start),
+      var(--gradient-color-end)
+    ),
+    linear-gradient(
+      to left,
+      var(--gradient-color-start),
+      var(--gradient-color-end)
+    );
+  background-position: left center, right center, left center, right center;
+  background-repeat: no-repeat;
+  background-color: var(--background-color);
+  background-size: 20px 100%, 20px 100%, 0px 100%, 0px 100%;
+  background-attachment: local, local, scroll, scroll;
+}
+
+#tab-buttons-wrapper .fadCover.fadeLeft {
+  background-size: 20px 100%, 20px 100%, 40px 100%, 0px 100%;
+}
+
+#tab-buttons-wrapper .fadCover.fadeRight {
+  background-size: 20px 100%, 20px 100%, 0px 100%, 40px 100%;
+}
+
+#tab-buttons-wrapper .fadCover.fadeLeftRight {
+  background-size: 20px 100%, 20px 100%, 40px 100%, 40px 100%;
+}
+
+.tabPanels .tabPanel {
+  display: none;
+
+  overflow: auto;
+  padding-bottom: 0.75rem;
+}
+
+.tabPanels > .tabPanel.active {
+  display: flex;
+  gap: 0.75rem;
+  flex-direction: column;
+}
+
+#request-details-panel {
+  display: none;
+  max-width: 50vw;
+}
+
+#request-details-panel.active {
+  display: block;
+}
+
+#request-detail {
+  display: grid;
+  grid-template-rows: 2.75rem auto;
+  height: 100%;
+  overflow: hidden;
+  border-left: 1px solid var(--secondary-color);
+}
+
+#request-detail > .flex-row {
+  padding-left: 0.75rem;
+  padding-right: 1rem;
+}
+
+#request-detail .tabPanels {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+}
+
+#request-detail div.tab {
+  background-color: transparent;
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.25rem;
+  font-size: var(--text-normal);
+  cursor: pointer;
+}
+
+#request-detail div.tab.active {
+  background-color: var(--active-highlight-color);
+}
+
+#request-detail div.tab:hover {
+  background-color: var(--hover-highlight-color);
+}
+
+#request-detail .tabPanels .grid-layout a {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#request-detail .grid-layout {
+  display: grid;
+  gap: 0.7rem;
+  grid-template-columns: minmax(50px, 100px) auto;
+  margin-bottom: 1rem;
+  font-size: var(--text-large);
+}
+
+.tabPanel .gridTitle {
+  font-weight: 550;
+  opacity: 75%;
+}
+
+.notification {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--highlight-color);
+  height: 3rem;
+}
+
+.notification p {
+  font-size: var(--text-normal);
+  color: var(--secondary-text-color);
+}
+
+#close-notification {
+  position: absolute;
+  right: 0.5rem;
+}
+
+#empty-view {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.code-json {
+  white-space: pre;
+  font-size: var(--text-normal);
+}
+
+.error {
+  color: #b32720;
+}
+
+@media (max-width: 940px) {
+  #main.empty {
+    display: grid;
+    grid-template-rows: 6.59rem auto;
+  }
+
+  #options-and-legend {
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 1rem;
+
+    padding: 1rem;
+    height: 6.59rem;
+    width: 100vw;
+    overflow-x: scroll;
+  }
+
+  #options-and-legend > .flex-row {
+    min-width: 453px;
+  }
+
+  #request-waterfall .request-waterfall-chart {
+    height: calc(60vh - 5.145rem);
+  }
+
+  #server-network-timing.withNotification
+    #request-waterfall
+    .request-waterfall-chart {
+    height: calc(60vh - 6.645rem);
+  }
+
+  #request-info {
+    height: calc(40vh - 5.145rem);
+  }
+
+  #server-network-timing.withNotification #request-info {
+    height: calc(40vh - 6.645rem);
+  }
+
+  #request-table .grid-row {
+    grid-template-columns: 1fr 55px 55px;
+  }
+}
+
+@media (max-width: 575px) {
+  #request-detail .tabPanel .grid-layout {
+    display: flex;
+    flex-direction: column;
+  }
+}

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
+};