@shopify/cli-hydrogen 5.2.2 → 5.3.0

package/dist/virtual-routes/routes/debug-network.jsx

@@ -0,0 +1,289 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { FlameChartWrapper } from "../components/FlameChartWrapper.jsx";
+import { Link } from "@remix-run/react";
+import { Script } from "@shopify/hydrogen";
+function DebugNetwork() {
+  const serverEvents = useRef({
+    smallestStartTime: 0,
+    mainRequests: [],
+    subRequests: {},
+    showPutRequests: false
+  });
+  const [timestamp, setTimestamp] = useState();
+  function serverEventHandler(onEvent) {
+    return (event) => {
+      const data = JSON.parse(event.data);
+      if (serverEvents.current.smallestStartTime === 0) {
+        serverEvents.current.smallestStartTime = data.startTime;
+      } else {
+        serverEvents.current.smallestStartTime = Math.min(
+          data.startTime,
+          serverEvents.current.smallestStartTime
+        );
+      }
+      onEvent(data);
+      setTimeout(() => {
+        setTimestamp((/* @__PURE__ */ new Date()).getTime());
+      }, 0);
+    };
+  }
+  useEffect(() => {
+    const evtSource = new EventSource("/debug-network-server", {
+      withCredentials: true
+    });
+    const mainRequestHandler = serverEventHandler((data) => {
+      serverEvents.current.mainRequests = [
+        ...serverEvents.current.mainRequests,
+        {
+          ...data,
+          url: data.url.replace(location.origin, "")
+        }
+      ];
+    });
+    evtSource.addEventListener("Request", mainRequestHandler);
+    const subRequestHandler = serverEventHandler((data) => {
+      let groupEvents = serverEvents.current.subRequests[data.id] || [];
+      groupEvents = [...groupEvents, data];
+      serverEvents.current.subRequests = {
+        ...serverEvents.current.subRequests,
+        [data.id]: groupEvents
+      };
+    });
+    evtSource.addEventListener("Sub request", subRequestHandler);
+    return () => {
+      evtSource.removeEventListener("Request", mainRequestHandler);
+      evtSource.removeEventListener("Sub request", subRequestHandler);
+      evtSource.close();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Script,
+      {
+        src: "https://unpkg.com/flame-chart-js@2.3.1/dist/index.min.js",
+        suppressHydrationWarning: true
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          width: "100vw",
+          backgroundColor: "#F5F5F5",
+          fontSize: "0.8rem"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => {
+                            fetch("/debug-network-server", { method: "DELETE" }).catch(
+                              (error) => console.error("Could not clear history:", error)
+                            );
+                            serverEvents.current = {
+                              smallestStartTime: 0,
+                              mainRequests: [],
+                              subRequests: {},
+                              showPutRequests: serverEvents.current.showPutRequests
+                            };
+                            setTimestamp((/* @__PURE__ */ new Date()).getTime());
+                          },
+                          children: "Clear"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          id: "showPutRequests",
+                          type: "checkbox",
+                          checked: serverEvents.current.showPutRequests,
+                          onChange: (event) => {
+                            serverEvents.current.showPutRequests = event.target.checked;
+                            setTimestamp((/* @__PURE__ */ new Date()).getTime());
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("label", { htmlFor: "showPutRequests", children: "Show cache update requests (PUT)" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    style: {
+                      paddingRight: "5px"
+                    },
+                    children: "Unstable"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(FlameChart, { serverEvents: serverEvents.current }, timestamp),
+          /* @__PURE__ */ jsxs("p", { style: { color: "#777", fontSize: "0.7rem", paddingLeft: "5px" }, children: [
+            "Note: You may need to turn on '",
+            /* @__PURE__ */ jsx("b", { children: "Disable Cache" }),
+            "' for your navigating window. If you are not seeing any requests, try re-running '",
+            /* @__PURE__ */ jsx("b", { children: "npm run dev" }),
+            "' in your terminal while leaving this window open."
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+const PANEL_HEIGHT = 300;
+function FlameChart({ serverEvents }) {
+  if (serverEvents.mainRequests.length === 0)
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          height: `${PANEL_HEIGHT}px`,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "#FAFAFA"
+        },
+        children: /* @__PURE__ */ jsxs("p", { style: { fontWeight: "bold", color: "#777" }, children: [
+          "Navigate your",
+          " ",
+          /* @__PURE__ */ jsx(Link, { to: "/", target: "_blank", children: "app" })
+        ] })
+      }
+    );
+  let totalRequests = 0;
+  let totalSubRequests = 0;
+  const calcDuration = (time) => time - serverEvents.smallestStartTime;
+  let items = [];
+  serverEvents.mainRequests.forEach((mainRequest) => {
+    const mainResponseStart = calcDuration(mainRequest.endTime);
+    let mainResponseEnd = mainResponseStart;
+    const subRequestItems = [];
+    const subRequests = serverEvents.subRequests[mainRequest.id] || [];
+    subRequests.forEach((subRequest) => {
+      const subRequestEnd = calcDuration(subRequest.endTime);
+      if (subRequest.cacheStatus !== "PUT") {
+        mainResponseEnd = Math.max(mainResponseEnd, subRequestEnd);
+      }
+      const subRequestItem = {
+        name: `${subRequest.cacheStatus} ${subRequest.url}`.trim(),
+        intervals: "request",
+        timing: {
+          requestStart: calcDuration(subRequest.startTime),
+          requestEnd: subRequestEnd
+        }
+      };
+      if (serverEvents.showPutRequests) {
+        subRequestItems.push(subRequestItem);
+      } else {
+        subRequest.cacheStatus !== "PUT" && subRequestItems.push(subRequestItem);
+      }
+      totalSubRequests++;
+    });
+    totalRequests++;
+    items.push({
+      name: mainRequest.url,
+      intervals: "mainRequest",
+      timing: {
+        requestStart: calcDuration(mainRequest.startTime),
+        responseStart: mainResponseStart,
+        responseEnd: mainResponseEnd
+      }
+    });
+    items = items.concat(subRequestItems);
+  });
+  const data = {
+    items,
+    intervals: {
+      mainRequest: [
+        {
+          name: "server",
+          color: "#99CC00",
+          type: "block",
+          start: "requestStart",
+          end: "responseStart"
+        },
+        {
+          name: "streaming",
+          color: "#33CCFF",
+          type: "block",
+          start: "responseStart",
+          end: "responseEnd"
+        }
+      ],
+      request: [
+        {
+          name: "request",
+          color: "#FFCC00",
+          type: "block",
+          start: "requestStart",
+          end: "requestEnd"
+        }
+      ]
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      FlameChartWrapper,
+      {
+        height: PANEL_HEIGHT,
+        waterfall: data,
+        settings: {
+          styles: {
+            waterfallPlugin: {
+              defaultHeight: PANEL_HEIGHT
+            }
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          padding: "5px",
+          borderTop: "1px solid #CCC",
+          borderBottom: "1px solid #CCC"
+        },
+        children: [
+          totalRequests,
+          " requests",
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                paddingLeft: "2px",
+                paddingRight: "2px"
+              },
+              children: "|"
+            }
+          ),
+          totalSubRequests,
+          " sub requests"
+        ]
+      }
+    )
+  ] });
+}
+export {
+  DebugNetwork as default
+};

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

@@ -66,8 +66,8 @@ function Index() {
         "You\u2019re seeing this because you don\u2019t have a home route in your project yet. ",
         /* @__PURE__ */ jsx("br", {}),
         "Run ",
-        /* @__PURE__ */ jsx("code", { children: "h2 generate route home" }),
-        " to create your home route. Learn more about",
+        /* @__PURE__ */ jsx("code", { children: "h2 setup" }),
+        " to scaffold standard Shopify routes. Learn more about",
         ` `,
         /* @__PURE__ */ jsx(CreateRoutesLink, {})
       ] }) : /* @__PURE__ */ jsxs("p", { children: [
@@ -80,8 +80,8 @@ function Index() {
         /* @__PURE__ */ jsx("code", { children: "h2 link && h2 env pull" }),
         ". Then, run",
         " ",
-        /* @__PURE__ */ jsx("code", { children: "h2 generate route home" }),
-        " to create your first route.",
+        /* @__PURE__ */ jsx("code", { children: "h2 setup" }),
+        " to scaffold standard Shopify routes.",
         /* @__PURE__ */ jsx("br", {}),
         "Learn more about",
         ` `,

package/dist/virtual-routes/virtual-root.jsx

@@ -11,6 +11,7 @@ import {
 import styles from "./assets/styles.css";
 import favicon from "./assets/favicon.svg";
 import { Layout } from "./components/Layout.jsx";
+import { useNonce } from "@shopify/hydrogen";
 const links = () => {
   return [
     { rel: "stylesheet", href: styles },
@@ -18,6 +19,7 @@ const links = () => {
   ];
 };
 function App() {
+  const nonce = useNonce();
   return /* @__PURE__ */ jsxs("html", { lang: "en", children: [
     /* @__PURE__ */ jsxs("head", { children: [
       /* @__PURE__ */ jsx("meta", { charSet: "utf-8" }),
@@ -35,12 +37,13 @@ function App() {
     ] }),
     /* @__PURE__ */ jsxs("body", { children: [
       /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Outlet, {}) }),
-      /* @__PURE__ */ jsx(ScrollRestoration, {}),
-      /* @__PURE__ */ jsx(Scripts, {})
+      /* @__PURE__ */ jsx(ScrollRestoration, { nonce }),
+      /* @__PURE__ */ jsx(Scripts, { nonce })
     ] })
   ] });
 }
 function ErrorBoundary() {
+  const nonce = useNonce();
   const error = useRouteError();
   let errorMessage = "Unknown error";
   let errorStatus = 500;
@@ -71,8 +74,8 @@ function ErrorBoundary() {
         /* @__PURE__ */ jsx("h2", { children: errorStatus }),
         errorMessage && /* @__PURE__ */ jsx("fieldset", { children: /* @__PURE__ */ jsx("pre", { children: errorMessage }) })
       ] }) }),
-      /* @__PURE__ */ jsx(ScrollRestoration, {}),
-      /* @__PURE__ */ jsx(Scripts, {})
+      /* @__PURE__ */ jsx(ScrollRestoration, { nonce }),
+      /* @__PURE__ */ jsx(Scripts, { nonce })
     ] })
   ] });
 }

package/oclif.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.2.2",
+  "version": "5.3.0",
   "commands": {
     "hydrogen:build": {
       "id": "hydrogen:build",
@@ -20,7 +20,13 @@
           "name": "sourcemap",
           "type": "boolean",
           "description": "Generate sourcemaps for the build.",
-          "allowNo": false
+          "allowNo": true
+        },
+        "bundle-stats": {
+          "name": "bundle-stats",
+          "type": "boolean",
+          "description": "Show a bundle size summary after building.",
+          "allowNo": true
         },
         "disable-route-warning": {
           "name": "disable-route-warning",
@@ -132,6 +138,59 @@
       },
       "args": {}
     },
+    "hydrogen:deploy": {
+      "id": "hydrogen:deploy",
+      "strict": true,
+      "pluginName": "@shopify/cli-hydrogen",
+      "pluginAlias": "@shopify/cli-hydrogen",
+      "pluginType": "core",
+      "hidden": true,
+      "aliases": [],
+      "flags": {
+        "path": {
+          "name": "path",
+          "type": "option",
+          "description": "The path to the directory of the Hydrogen storefront. The default is the current directory.",
+          "multiple": false
+        },
+        "shop": {
+          "name": "shop",
+          "type": "option",
+          "char": "s",
+          "description": "Shop URL. It can be the shop prefix (janes-apparel) or the full myshopify.com URL (janes-apparel.myshopify.com, https://janes-apparel.myshopify.com).",
+          "multiple": false
+        },
+        "publicDeployment": {
+          "name": "publicDeployment",
+          "type": "boolean",
+          "description": "Marks a preview deployment as publicly accessible.",
+          "required": false,
+          "allowNo": false
+        },
+        "metadataUrl": {
+          "name": "metadataUrl",
+          "type": "option",
+          "description": "URL that links to the deployment. Will be saved and displayed in the Shopify admin",
+          "required": false,
+          "multiple": false
+        },
+        "metadataUser": {
+          "name": "metadataUser",
+          "type": "option",
+          "description": "User that initiated the deployment. Will be saved and displayed in the Shopify admin",
+          "required": false,
+          "multiple": false
+        },
+        "metadataVersion": {
+          "name": "metadataVersion",
+          "type": "option",
+          "description": "A version identifier for the deployment. Will be saved and displayed in the Shopify admin",
+          "required": false,
+          "multiple": false
+        }
+      },
+      "args": {}
+    },
     "hydrogen:dev": {
       "id": "hydrogen:dev",
       "description": "Runs Hydrogen storefront in an Oxygen worker for development.",
@@ -154,6 +213,12 @@
           "multiple": false,
           "default": 3000
         },
+        "worker-unstable": {
+          "name": "worker-unstable",
+          "type": "boolean",
+          "description": "Run the app in a worker environment closer to Oxygen production instead of a Node.js sandbox. This flag is unstable and may change without notice.",
+          "allowNo": false
+        },
         "codegen-unstable": {
           "name": "codegen-unstable",
           "type": "boolean",
@@ -286,7 +351,7 @@
           "type": "boolean",
           "description": "Generate routes for all pages.",
           "hidden": true,
-          "allowNo": false
+          "allowNo": true
         },
         "git": {
           "name": "git",
@@ -410,6 +475,19 @@
           "description": "Port to run the server on.",
           "multiple": false,
           "default": 3000
+        },
+        "worker-unstable": {
+          "name": "worker-unstable",
+          "type": "boolean",
+          "description": "Run the app in a worker environment closer to Oxygen production instead of a Node.js sandbox. This flag is unstable and may change without notice.",
+          "allowNo": false
+        },
+        "env-branch": {
+          "name": "env-branch",
+          "type": "option",
+          "char": "e",
+          "description": "Specify an environment's branch name when using remote environment variables.",
+          "multiple": false
         }
       },
       "args": {}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "5.2.2",
+  "version": "5.3.0",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -21,34 +21,57 @@
     "@types/gunzip-maybe": "^1.4.0",
     "@types/prettier": "^2.7.2",
     "@types/recursive-readdir": "^2.2.1",
+    "@types/stack-trace": "^0.0.30",
     "@types/tar-fs": "^2.0.1",
+    "devtools-protocol": "^0.0.1177611",
+    "get-port": "^7.0.0",
     "@vitest/coverage-v8": "^0.33.0",
+    "fast-glob": "^3.2.12",
+    "flame-chart-js": "2.3.1",
     "type-fest": "^3.6.0",
     "vitest": "^0.33.0"
   },
-  "peerDependencies": {
-    "@remix-run/react": "1.19.1",
-    "@shopify/hydrogen-react": "^2023.7.4",
-    "@shopify/remix-oxygen": "^1.1.3"
-  },
   "dependencies": {
     "@ast-grep/napi": "0.11.0",
     "@graphql-codegen/cli": "3.3.1",
-    "@oclif/core": "2.8.11",
-    "@remix-run/dev": "1.19.1",
-    "@shopify/cli-kit": "3.48.0",
+    "@oclif/core": "2.11.7",
+    "@shopify/cli-kit": "3.49.2",
     "@shopify/hydrogen-codegen": "^0.0.2",
     "@shopify/mini-oxygen": "^2.2.1",
+    "@shopify/oxygen-cli": "^1.12.0",
     "ansi-escapes": "^6.2.0",
     "diff": "^5.1.0",
-    "fast-glob": "^3.2.12",
     "fs-extra": "^11.1.0",
     "get-port": "^7.0.0",
     "gunzip-maybe": "^1.4.2",
+    "miniflare": "3.20230918.0",
     "prettier": "^2.8.4",
-    "recursive-readdir": "^2.2.3",
+    "source-map": "^0.7.4",
+    "stack-trace": "^1.0.0-pre2",
     "tar-fs": "^2.1.1",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "use-resize-observer": "^9.1.0",
+    "ws": "^8.13.0"
+  },
+  "peerDependencies": {
+    "@remix-run/dev": "1.19.1",
+    "@remix-run/react": "1.19.1",
+    "@shopify/hydrogen-react": "^2023.7.4",
+    "@shopify/remix-oxygen": "^1.1.4"
+  },
+  "peerDependenciesMeta": {
+    "@remix-run/dev": {
+      "optional": true
+    },
+    "@remix-run/react": {
+      "optional": true
+    },
+    "@shopify/hydrogen-react": {
+      "optional": true
+    },
+    "@shopify/remix-oxygen": {
+      "optional": true
+    }
   },
   "bin": "dist/create-app.js",
   "exports": {

package/dist/lib/mini-oxygen.js

@@ -1,108 +0,0 @@
-import { outputToken, outputInfo, outputContent } from '@shopify/cli-kit/node/output';
-import { resolvePath } from '@shopify/cli-kit/node/path';
-import { readFile, fileExists } from '@shopify/cli-kit/node/fs';
-import colors from '@shopify/cli-kit/node/colors';
-import { renderSuccess } from '@shopify/cli-kit/node/ui';
-import { startServer } from '@shopify/mini-oxygen';
-import { DEFAULT_PORT } from './flags.js';
-
-async function startMiniOxygen({
-  root,
-  port = DEFAULT_PORT,
-  watch = false,
-  autoReload = watch,
-  buildPathWorkerFile,
-  buildPathClient,
-  env
-}) {
-  const dotenvPath = resolvePath(root, ".env");
-  const miniOxygen = await startServer({
-    script: await readFile(buildPathWorkerFile),
-    workerFile: buildPathWorkerFile,
-    assetsDir: buildPathClient,
-    publicPath: "",
-    port,
-    watch,
-    autoReload,
-    modules: true,
-    env: {
-      ...env,
-      ...process.env
-    },
-    envPath: !env && await fileExists(dotenvPath) ? dotenvPath : void 0,
-    log: () => {
-    },
-    onResponse: (request, response) => (
-      // 'Request' and 'Response' types in MiniOxygen comes from
-      // Miniflare and are slightly different from standard types.
-      logResponse(
-        request,
-        response
-      )
-    )
-  });
-  const listeningAt = `http://localhost:${miniOxygen.port}`;
-  return {
-    listeningAt,
-    port: miniOxygen.port,
-    async reload(options = {}) {
-      const nextOptions = {};
-      if (options.env) {
-        nextOptions.env = {
-          ...options.env,
-          ...process.env
-        };
-      }
-      if (options.worker) {
-        nextOptions.script = await readFile(buildPathWorkerFile);
-      }
-      return miniOxygen.reload(nextOptions);
-    },
-    showBanner(options) {
-      console.log("");
-      renderSuccess({
-        headline: `${options?.headlinePrefix ?? ""}MiniOxygen ${options?.mode ?? "development"} server running.`,
-        body: [
-          `View ${options?.appName ?? "Hydrogen"} app: ${listeningAt}`,
-          ...options?.extraLines ?? []
-        ]
-      });
-      console.log("");
-    }
-  };
-}
-function logResponse(request, response) {
-  try {
-    const url = new URL(request.url);
-    if (["/graphiql"].includes(url.pathname)) {
-      return;
-    }
-    const isProxy = !!response.url && response.url !== request.url;
-    const isDataRequest = !isProxy && url.searchParams.has("_data");
-    let route = request.url.replace(url.origin, "");
-    let info = "";
-    let type = "render";
-    if (isProxy) {
-      type = "proxy";
-      info = `[${response.url}]`;
-    }
-    if (isDataRequest) {
-      type = request.method === "GET" ? "loader" : "action";
-      const dataParam = url.searchParams.get("_data")?.replace("routes/", "");
-      route = url.pathname;
-      info = `[${dataParam}]`;
-    }
-    const colorizeStatus = response.status < 300 ? outputToken.green : response.status < 400 ? outputToken.cyan : outputToken.errorText;
-    outputInfo(
-      outputContent`${request.method.padStart(6)}  ${colorizeStatus(
-        String(response.status)
-      )}  ${outputToken.italic(type.padEnd(7, " "))} ${route}${info ? " " + colors.dim(info) : ""} ${request.headers.get("purpose") === "prefetch" ? outputToken.italic("(prefetch)") : ""}`
-    );
-  } catch {
-    if (request && response) {
-      outputInfo(`${request.method} ${response.status} ${request.url}`);
-    }
-  }
-}
-
-export { logResponse, startMiniOxygen };