@shopify/cli-hydrogen 6.1.0 → 7.0.0

package/dist/virtual-routes/routes/subrequest-profiler.jsx

@@ -0,0 +1,243 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Script } from "@shopify/hydrogen";
+import { RequestWaterfall } from "../components/RequestWaterfall.jsx";
+import { RequestTable } from "../components/RequestTable.jsx";
+import { Link } from "@remix-run/react";
+import favicon from "../assets/favicon.svg";
+import faviconDark from "../assets/favicon-dark.svg";
+import styles from "../assets/debug-network.css";
+import { useDebugNetworkServer } from "../lib/useDebugNetworkServer.jsx";
+import { RequestDetails } from "../components/RequestDetails.jsx";
+import { IconClose } from "../components/IconClose.jsx";
+import { IconDiscard } from "../components/IconDiscard.jsx";
+const links = () => {
+  return [
+    {
+      rel: "icon",
+      type: "image/svg+xml",
+      href: favicon
+    },
+    {
+      rel: "stylesheet",
+      href: styles
+    }
+  ];
+};
+const WATERFALL_CONFIG = {
+  colors: {
+    server: "#2ED389",
+    streaming: "#33CCFF",
+    subRequest: "#FFCC00"
+  }
+};
+function DebugNetwork() {
+  const {
+    serverEvents,
+    clear,
+    timestamp,
+    setHidePutRequests,
+    setPreserveLog,
+    setHideNotification
+  } = useDebugNetworkServer();
+  const isEmptyState = serverEvents.mainRequests.length === 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: "server-network-timing",
+      className: `${serverEvents.hideNotification ? "" : "withNotification"}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          Script,
+          {
+            src: "https://unpkg.com/flame-chart-js@2.3.2/dist/index.min.js",
+            suppressHydrationWarning: true
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NotificationBanner,
+          {
+            hideNotification: serverEvents.hideNotification,
+            setHideNotification
+          }
+        ),
+        /* @__PURE__ */ jsx(DebugHeader, {}),
+        /* @__PURE__ */ jsxs("div", { id: "main", className: `${isEmptyState ? " empty" : ""}`, children: [
+          /* @__PURE__ */ jsx(
+            OptionsAndLegend,
+            {
+              serverEvents,
+              clearCallback: clear,
+              setHidePutRequests,
+              setPreserveLog
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { id: "request-waterfall", className: "pad", children: isEmptyState ? /* @__PURE__ */ jsx(EmptyState, {}) : /* @__PURE__ */ jsx("div", { className: "request-waterfall-chart", children: /* @__PURE__ */ jsx(
+            RequestWaterfall,
+            {
+              serverEvents,
+              config: WATERFALL_CONFIG
+            },
+            timestamp
+          ) }) }),
+          /* @__PURE__ */ jsx(RequestInfo, { serverEvents })
+        ] })
+      ]
+    }
+  );
+}
+function NotificationBanner({
+  hideNotification,
+  setHideNotification
+}) {
+  if (hideNotification) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "notification", children: [
+    /* @__PURE__ */ jsx("div", { id: "close-notification", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "plain icon",
+        onClick: () => {
+          setHideNotification(true);
+        },
+        children: /* @__PURE__ */ jsx(IconClose, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx("p", { children: "Note: You may need to turn on 'Disable Cache' for your navigating window." })
+  ] });
+}
+function EmptyState() {
+  return /* @__PURE__ */ jsxs("div", { id: "empty-view", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-large bold", children: "Navigate to your app" }),
+    /* @__PURE__ */ jsx("p", { className: "text-normal", children: "Open your localhost to initiate subrequest profiler" }),
+    /* @__PURE__ */ jsx(Link, { to: "/", target: "_blank", className: "link-margin-top", children: /* @__PURE__ */ jsx("button", { className: "primary", children: "Open app" }) })
+  ] });
+}
+function DebugHeader() {
+  return /* @__PURE__ */ jsx("header", { className: "justify-between text-large", children: /* @__PURE__ */ jsxs("div", { className: "flex-row", children: [
+    /* @__PURE__ */ jsx("img", { className: "logo", src: faviconDark, alt: "Hydrogen logo" }),
+    /* @__PURE__ */ jsx("h1", { children: "Subrequest Profiler" }),
+    /* @__PURE__ */ jsx("span", { className: "pill", children: "Development" })
+  ] }) });
+}
+function OptionsAndLegend({
+  serverEvents,
+  clearCallback,
+  setHidePutRequests,
+  setPreserveLog
+}) {
+  return /* @__PURE__ */ jsxs("div", { id: "options-and-legend", className: "justify-between pad", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-row text-large", children: [
+      /* @__PURE__ */ jsxs("button", { id: "buttonClear", onClick: () => clearCallback(), children: [
+        /* @__PURE__ */ jsx(IconDiscard, {}),
+        /* @__PURE__ */ jsx("span", { children: "Clear" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "form-control", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "hidePutRequests",
+            type: "checkbox",
+            checked: serverEvents.hidePutRequests,
+            onChange: (event) => setHidePutRequests(event.target.checked)
+          }
+        ),
+        /* @__PURE__ */ jsx("label", { htmlFor: "hidePutRequests", children: "Hide cache update requests (PUT)" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "form-control", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "preserveLog",
+            type: "checkbox",
+            checked: serverEvents.preserveLog,
+            onChange: (event) => setPreserveLog(event.target.checked)
+          }
+        ),
+        /* @__PURE__ */ jsx("label", { htmlFor: "preserveLog", children: "Preserve Log" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-row text-normal gap-small", children: [
+      /* @__PURE__ */ jsxs("div", { className: "legend flex-row", children: [
+        /* @__PURE__ */ jsx("p", { className: "bold-1", children: "Main Request" }),
+        /* @__PURE__ */ jsxs("p", { className: "flex-row gap-small", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "swatch",
+              style: {
+                backgroundColor: WATERFALL_CONFIG.colors.server
+              }
+            }
+          ),
+          "Time on server"
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "flex-row gap-small", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "swatch",
+              style: {
+                backgroundColor: WATERFALL_CONFIG.colors.streaming
+              }
+            }
+          ),
+          "Time to stream to client"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "legend flex-row", children: /* @__PURE__ */ jsxs("p", { className: "flex-row gap-small", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "swatch",
+            style: {
+              backgroundColor: WATERFALL_CONFIG.colors.subRequest
+            }
+          }
+        ),
+        "Sub request"
+      ] }) })
+    ] })
+  ] });
+}
+function RequestInfo({ serverEvents }) {
+  const [activeEventId, setActiveEventId] = useState();
+  useEffect(() => {
+    window.setActiveEventId = setActiveEventId;
+  }, []);
+  useEffect(() => {
+    if (!activeEventId) {
+      setActiveEventId(void 0);
+    }
+  }, [activeEventId]);
+  return /* @__PURE__ */ jsxs("div", { id: "request-info", children: [
+    /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+      RequestTable,
+      {
+        serverEvents,
+        activeEventId,
+        setActiveEventId
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: "request-details-panel",
+        className: `${activeEventId ? "active" : ""}`,
+        children: /* @__PURE__ */ jsx(
+          RequestDetails,
+          {
+            serverEvents,
+            activeEventId,
+            setActiveEventId
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  DebugNetwork as default,
+  links
+};

package/oclif.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.1.0",
+  "version": "7.0.0",
   "commands": {
     "hydrogen:build": {
       "id": "hydrogen:build",
@@ -45,10 +45,7 @@
           "type": "boolean",
           "description": "Generate types for the Storefront API queries found in your project.",
           "required": false,
-          "allowNo": false,
-          "aliases": [
-            "codegen-unstable"
-          ]
+          "allowNo": false
         },
         "codegen-config-path": {
           "name": "codegen-config-path",
@@ -60,23 +57,12 @@
             "codegen"
           ]
         },
-        "base": {
-          "name": "base",
-          "type": "option",
-          "hidden": true,
-          "multiple": false
-        },
-        "entry": {
-          "name": "entry",
-          "type": "option",
-          "hidden": true,
-          "multiple": false
-        },
-        "target": {
-          "name": "target",
-          "type": "option",
-          "hidden": true,
-          "multiple": false
+        "diff": {
+          "name": "diff",
+          "type": "boolean",
+          "description": "Applies the current files on top of Hydrogen's starter template in a temporary directory.",
+          "required": false,
+          "allowNo": false
         }
       },
       "args": {}
@@ -115,62 +101,61 @@
       "pluginName": "@shopify/cli-hydrogen",
       "pluginAlias": "@shopify/cli-hydrogen",
       "pluginType": "core",
-      "aliases": [
-        "codegen-unstable"
-      ],
-      "deprecateAliases": 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,
-          "deprecateAliases": true
+          "multiple": false
         },
         "codegen-config-path": {
           "name": "codegen-config-path",
           "type": "option",
           "description": "Specify a path to a codegen configuration file. Defaults to `<root>/codegen.ts` if it exists.",
           "required": false,
-          "multiple": false,
-          "deprecateAliases": true
+          "multiple": false
         },
         "force-sfapi-version": {
           "name": "force-sfapi-version",
           "type": "option",
           "description": "Force generating Storefront API types for a specific version instead of using the one provided in Hydrogen. A token can also be provided with this format: `<version>:<token>`.",
           "hidden": true,
-          "multiple": false,
-          "deprecateAliases": true
+          "multiple": false
         },
         "watch": {
           "name": "watch",
           "type": "boolean",
           "description": "Watch the project for changes to update types on file save.",
           "required": false,
-          "allowNo": false,
-          "deprecateAliases": true
+          "allowNo": false
         }
       },
       "args": {}
     },
     "hydrogen:deploy": {
       "id": "hydrogen:deploy",
+      "description": "Builds and deploys a Hydrogen storefront to Oxygen.",
       "strict": true,
       "pluginName": "@shopify/cli-hydrogen",
       "pluginAlias": "@shopify/cli-hydrogen",
       "pluginType": "core",
-      "hidden": true,
       "aliases": [],
       "flags": {
         "env-branch": {
           "name": "env-branch",
           "type": "option",
-          "char": "e",
-          "description": "Environment branch (tag) for environment to deploy to",
+          "description": "Environment branch (tag) for environment to deploy to.",
           "required": false,
           "multiple": false
         },
+        "preview": {
+          "name": "preview",
+          "type": "boolean",
+          "description": "Deploys to the Preview environment. Overrides --env-branch and Git metadata.",
+          "required": false,
+          "allowNo": false
+        },
         "force": {
           "name": "force",
           "type": "boolean",
@@ -179,6 +164,13 @@
           "required": false,
           "allowNo": false
         },
+        "auth-bypass-token": {
+          "name": "auth-bypass-token",
+          "type": "boolean",
+          "description": "Generate an authentication bypass token, which can be used to perform end-to-end tests against the deployment.",
+          "required": false,
+          "allowNo": false
+        },
         "path": {
           "name": "path",
           "type": "option",
@@ -192,17 +184,10 @@
           "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
         },
-        "public-deployment": {
-          "name": "public-deployment",
-          "type": "boolean",
-          "description": "Marks a preview deployment as publicly accessible.",
-          "required": false,
-          "allowNo": false
-        },
         "no-json-output": {
           "name": "no-json-output",
           "type": "boolean",
-          "description": "Prevents the command from creating a JSON file containing the deployment URL (in CI environments).",
+          "description": "Prevents the command from creating a JSON file containing the deployment URL in CI environments.",
           "required": false,
           "allowNo": false
         },
@@ -210,7 +195,7 @@
           "name": "token",
           "type": "option",
           "char": "t",
-          "description": "Oxygen deployment token",
+          "description": "Oxygen deployment token. Defaults to the linked storefront's token if available.",
           "required": false,
           "multiple": false
         },
@@ -224,7 +209,7 @@
         "metadata-url": {
           "name": "metadata-url",
           "type": "option",
-          "description": "URL that links to the deployment. Will be saved and displayed in the Shopify admin",
+          "hidden": true,
           "required": false,
           "multiple": false
         },
@@ -238,7 +223,7 @@
         "metadata-version": {
           "name": "metadata-version",
           "type": "option",
-          "description": "A version identifier for the deployment. Will be saved and displayed in the Shopify admin",
+          "hidden": true,
           "required": false,
           "multiple": false
         }
@@ -270,7 +255,12 @@
         "worker": {
           "name": "worker",
           "type": "boolean",
-          "description": "Run the app in a worker environment closer to Oxygen production instead of a Node.js sandbox.",
+          "hidden": true
+        },
+        "legacy-runtime": {
+          "name": "legacy-runtime",
+          "type": "boolean",
+          "description": "Run the app in a Node.js sandbox instead of an Oxygen worker.",
           "allowNo": false
         },
         "codegen": {
@@ -278,10 +268,7 @@
           "type": "boolean",
           "description": "Generate types for the Storefront API queries found in your project. It updates the types on file save.",
           "required": false,
-          "allowNo": false,
-          "aliases": [
-            "codegen-unstable"
-          ]
+          "allowNo": false
         },
         "codegen-config-path": {
           "name": "codegen-config-path",
@@ -318,12 +305,6 @@
           "multiple": false,
           "default": 9229
         },
-        "host": {
-          "name": "host",
-          "type": "option",
-          "hidden": true,
-          "multiple": false
-        },
         "env-branch": {
           "name": "env-branch",
           "type": "option",
@@ -337,6 +318,13 @@
           "description": "Skip the version check when running `hydrogen dev`",
           "required": false,
           "allowNo": false
+        },
+        "diff": {
+          "name": "diff",
+          "type": "boolean",
+          "description": "Applies the current files on top of Hydrogen's starter template in a temporary directory.",
+          "required": false,
+          "allowNo": false
         }
       },
       "args": {}
@@ -384,7 +372,7 @@
         "template": {
           "name": "template",
           "type": "option",
-          "description": "Sets the template to use. Pass `demo-store` for a fully-featured store template or `hello-world` for a barebones project.",
+          "description": "Scaffolds project based on an existing template or example from the Hydrogen repository.",
           "multiple": false
         },
         "install-deps": {
@@ -550,7 +538,12 @@
         "worker": {
           "name": "worker",
           "type": "boolean",
-          "description": "Run the app in a worker environment closer to Oxygen production instead of a Node.js sandbox.",
+          "hidden": true
+        },
+        "legacy-runtime": {
+          "name": "legacy-runtime",
+          "type": "boolean",
+          "description": "Run the app in a Node.js sandbox instead of an Oxygen worker.",
           "allowNo": false
         },
         "env-branch": {

package/package.json

@@ -4,18 +4,19 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "6.1.0",
+  "version": "7.0.0",
   "license": "MIT",
   "type": "module",
   "scripts": {
     "build": "tsup && node scripts/build-check.mjs",
-    "dev": "tsup --watch",
+    "dev": "tsup --watch ./src",
     "typecheck": "tsc --noEmit",
     "generate:manifest": "node scripts/generate-manifest.mjs",
     "test": "cross-env SHOPIFY_UNIT_TEST=1 vitest run --test-timeout=20000",
     "test:watch": "cross-env SHOPIFY_UNIT_TEST=1 vitest --test-timeout=20000"
   },
   "devDependencies": {
+    "@remix-run/dev": "^2.5.1",
     "@types/diff": "^5.0.2",
     "@types/fs-extra": "^11.0.1",
     "@types/gunzip-maybe": "^1.4.0",
@@ -23,34 +24,36 @@
     "@types/recursive-readdir": "^2.2.1",
     "@types/stack-trace": "^0.0.30",
     "@types/tar-fs": "^2.0.1",
-    "@vitest/coverage-v8": "^0.33.0",
+    "@vitest/coverage-v8": "^1.0.4",
     "devtools-protocol": "^0.0.1177611",
     "fast-glob": "^3.2.12",
-    "flame-chart-js": "2.3.1",
+    "flame-chart-js": "2.3.2",
     "get-port": "^7.0.0",
-    "type-fest": "^3.6.0",
-    "vitest": "^0.33.0"
+    "type-fest": "^4.5.0",
+    "vitest": "^1.0.4"
   },
   "dependencies": {
     "@ast-grep/napi": "0.11.0",
     "@graphql-codegen/cli": "5.0.0",
     "@oclif/core": "2.11.7",
-    "@shopify/cli-kit": "3.51.0",
-    "@shopify/hydrogen-codegen": "^0.1.0",
-    "@shopify/mini-oxygen": "^2.2.4",
-    "@shopify/oxygen-cli": "2.6.2",
+    "@shopify/cli-kit": "3.52.0",
+    "@shopify/hydrogen-codegen": "^0.2.0",
+    "@shopify/mini-oxygen": "^2.2.5",
+    "@shopify/oxygen-cli": "^4.0.0",
     "ansi-escapes": "^6.2.0",
     "cli-truncate": "^4.0.0",
     "diff": "^5.1.0",
     "fs-extra": "^11.1.0",
     "get-port": "^7.0.0",
+    "graphql-config": "5.0.3",
     "gunzip-maybe": "^1.4.2",
-    "miniflare": "3.20231016.0",
+    "miniflare": "3.20231218.2",
     "prettier": "^2.8.4",
     "semver": "^7.5.3",
     "source-map": "^0.7.4",
     "stack-trace": "^1.0.0-pre2",
     "tar-fs": "^2.1.1",
+    "tempy": "^3.0.0",
     "ts-morph": "20.0.0",
     "use-resize-observer": "^9.1.0",
     "ws": "^8.13.0"