@shopify/create-hydrogen 4.3.13 → 5.0.0

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

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

@@ -0,0 +1,178 @@
+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/assets/hydrogen/virtual-routes/routes/graphiql.jsx

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

package/dist/assets/hydrogen/virtual-routes/routes/index.jsx

@@ -0,0 +1,265 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useLoaderData } from "@remix-run/react";
+import { HydrogenLogoBaseBW } from "../components/HydrogenLogoBaseBW.jsx";
+import { HydrogenLogoBaseColor } from "../components/HydrogenLogoBaseColor.jsx";
+import { IconGithub } from "../components/IconGithub.jsx";
+import { IconTwitter } from "../components/IconTwitter.jsx";
+import { IconBanner } from "../components/IconBanner.jsx";
+import { IconError } from "../components/IconError.jsx";
+import favicon from "../assets/favicon.svg";
+import interVariableFontWoff2 from "../assets/inter-variable-font.woff2";
+import jetbrainsmonoVariableFontWoff2 from "../assets/jetbrainsmono-variable-font.woff2";
+const links = () => [
+  {
+    rel: "icon",
+    type: "image/svg+xml",
+    href: favicon
+  },
+  {
+    rel: "preload",
+    href: interVariableFontWoff2,
+    as: "font",
+    type: "font/ttf",
+    crossOrigin: "anonymous"
+  },
+  {
+    rel: "preload",
+    href: jetbrainsmonoVariableFontWoff2,
+    as: "font",
+    type: "font/ttf",
+    crossOrigin: "anonymous"
+  }
+];
+async function loader({
+  context: { storefront }
+}) {
+  const layout = await storefront.query(LAYOUT_QUERY);
+  return { layout, isMockShop: storefront.getApiUrl().includes("mock.shop") };
+}
+const HYDROGEN_SHOP_ID = "gid://shopify/Shop/55145660472";
+function ErrorBoundary() {
+  return /* @__PURE__ */ jsx(ErrorPage, {});
+}
+function Index() {
+  const {
+    isMockShop,
+    layout: { shop }
+  } = useLoaderData();
+  let { name: shopName, id: shopId } = shop;
+  const configDone = shopId !== HYDROGEN_SHOP_ID && !isMockShop;
+  if (isMockShop || !shopName) shopName = "Hydrogen";
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Layout, { shopName, children: [
+    configDone ? /* @__PURE__ */ jsx(HydrogenLogoBaseColor, {}) : /* @__PURE__ */ jsx(HydrogenLogoBaseBW, {}),
+    /* @__PURE__ */ jsxs("h1", { children: [
+      "Hello, ",
+      shopName
+    ] }),
+    /* @__PURE__ */ jsx("p", { children: "Welcome to your new custom storefront" }),
+    /* @__PURE__ */ jsxs("section", { className: "Banner", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(IconBanner, {}),
+        /* @__PURE__ */ jsx("h2", { children: configDone ? "Create your first route" : "Configure storefront token" })
+      ] }),
+      configDone ? /* @__PURE__ */ jsxs("p", { children: [
+        "You\u2019re seeing this because you don\u2019t have a home route in your project yet. ",
+        /* @__PURE__ */ jsx("br", {}),
+        "Run ",
+        /* @__PURE__ */ jsx("code", { children: "npx shopify hydrogen setup" }),
+        " to scaffold standard Shopify routes. Learn more about",
+        ` `,
+        /* @__PURE__ */ jsx(CreateRoutesLink, {})
+      ] }) : /* @__PURE__ */ jsxs("p", { children: [
+        "You\u2019re seeing this because you have not yet configured your storefront token. ",
+        /* @__PURE__ */ jsx("br", {}),
+        /* @__PURE__ */ jsx("br", {}),
+        " To link your store,",
+        ` `,
+        "run",
+        " ",
+        /* @__PURE__ */ jsx("code", { children: "npx shopify hydrogen link && npx shopify hydrogen env pull" }),
+        ". Then, run ",
+        /* @__PURE__ */ jsx("code", { children: "npx shopify hydrogen setup" }),
+        " to scaffold standard Shopify routes.",
+        /* @__PURE__ */ jsx("br", {}),
+        "Learn more about",
+        ` `,
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            target: "_blank",
+            rel: "norefferer noopener",
+            href: "https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables",
+            children: "editing environment variables"
+          }
+        ),
+        ` `,
+        "and",
+        ` `,
+        /* @__PURE__ */ jsx(CreateRoutesLink, {}),
+        "."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ResourcesLinks, {})
+  ] }) });
+}
+function CreateRoutesLink() {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      target: "_blank",
+      rel: "norefferer noopener",
+      href: "https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development#step-4-create-a-route",
+      children: "creating routes"
+    }
+  );
+}
+function ErrorPage() {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Layout, { shopName: "Hydrogen", children: [
+    /* @__PURE__ */ jsx(HydrogenLogoBaseBW, {}),
+    /* @__PURE__ */ jsx("h1", { children: "Hello, Hydrogen" }),
+    /* @__PURE__ */ jsx("p", { children: "Welcome to your new custom storefront" }),
+    /* @__PURE__ */ jsxs("section", { className: "Banner ErrorBanner", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(IconError, {}),
+        /* @__PURE__ */ jsx("h2", { children: "There\u2019s a problem with your storefront" })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { children: [
+        "Check your domain and API token in your ",
+        /* @__PURE__ */ jsx("code", { children: ".env" }),
+        " file. Learn more about",
+        ` `,
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            target: "_blank",
+            rel: "norefferer noopener",
+            href: "https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables",
+            children: "editing environment variables"
+          }
+        ),
+        "."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ResourcesLinks, {})
+  ] }) });
+}
+function ResourcesLinks() {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("section", { className: "Links", children: [
+    /* @__PURE__ */ jsx("h2", { children: "Start building" }),
+    /* @__PURE__ */ jsxs("ul", { children: [
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          target: "_blank",
+          rel: "norefferer noopener",
+          href: "https://shopify.dev/custom-storefronts/hydrogen/building/collection-page",
+          children: "Collection template"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          target: "_blank",
+          rel: "norefferer noopener",
+          href: "https://shopify.dev/custom-storefronts/hydrogen/building/product-details-page",
+          children: "Product template"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          target: "_blank",
+          rel: "norefferer noopener",
+          href: "https://shopify.dev/custom-storefronts/hydrogen/building/cart",
+          children: "Cart"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("h2", { children: "Resources" }),
+    /* @__PURE__ */ jsxs("ul", { children: [
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          target: "_blank",
+          rel: "norefferer noopener",
+          href: "https://shopify.dev/custom-storefronts/hydrogen",
+          children: "Hydrogen docs"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          target: "_blank",
+          rel: "norefferer noopener",
+          href: "https://shopify.dev/custom-storefronts/hydrogen/project-structure",
+          children: "Remix and project structure"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          target: "_blank",
+          rel: "norefferer noopener",
+          href: "https://shopify.dev/custom-storefronts/hydrogen/data-fetching/fetch-data",
+          children: "Data queries and fetching"
+        }
+      ) })
+    ] })
+  ] }) });
+}
+function Layout({
+  shopName,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx("h1", { children: shopName?.toUpperCase() }),
+      /* @__PURE__ */ jsx("p", { children: "\xA0Dev Mode\xA0" }),
+      /* @__PURE__ */ jsxs("nav", { children: [
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            target: "_blank",
+            rel: "norefferer noopener",
+            href: "https://github.com/Shopify/hydrogen",
+            children: /* @__PURE__ */ jsx(IconGithub, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            target: "_blank",
+            rel: "norefferer noopener",
+            href: "https://twitter.com/shopifydevs?lang=en",
+            children: /* @__PURE__ */ jsx(IconTwitter, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("main", { children }),
+    /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: "https://shopify.com",
+        target: "_blank",
+        rel: "noreferrer noopener",
+        children: "Powered by Shopify"
+      }
+    ) }) })
+  ] });
+}
+const LAYOUT_QUERY = `#graphql
+  query layout {
+    shop {
+      name
+      id
+    }
+  }
+`;
+export {
+  ErrorBoundary,
+  HYDROGEN_SHOP_ID,
+  Index as default,
+  links,
+  loader
+};