@ohos-ports/shopify 4.8.0-beta.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/layout.jsx

@@ -0,0 +1,33 @@
+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/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/[.]well-known.appspecific.com[.]chrome[.]devtools[.]json.jsx

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

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