@shopify/cli-hydrogen 6.0.2 → 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.0.2",
+  "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,76 @@
       "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",
+          "char": "f",
+          "description": "Forces a deployment to proceed if there are uncommited changes in its Git repository.",
+          "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",
@@ -184,10 +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",
+        "no-json-output": {
+          "name": "no-json-output",
           "type": "boolean",
-          "description": "Marks a preview deployment as publicly accessible.",
+          "description": "Prevents the command from creating a JSON file containing the deployment URL in CI environments.",
           "required": false,
           "allowNo": false
         },
@@ -195,14 +195,21 @@
           "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
+        },
+        "metadata-description": {
+          "name": "metadata-description",
+          "type": "option",
+          "description": "Description of the changes in the deployment. Defaults to the commit message of the latest commit if there are no uncommited changes.",
           "required": false,
           "multiple": false
         },
         "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
         },
@@ -216,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
         }
@@ -245,10 +252,15 @@
           "multiple": false,
           "default": 3000
         },
-        "worker-unstable": {
-          "name": "worker-unstable",
+        "worker": {
+          "name": "worker",
+          "type": "boolean",
+          "hidden": true
+        },
+        "legacy-runtime": {
+          "name": "legacy-runtime",
           "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.",
+          "description": "Run the app in a Node.js sandbox instead of an Oxygen worker.",
           "allowNo": false
         },
         "codegen": {
@@ -256,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",
@@ -286,14 +295,15 @@
         "debug": {
           "name": "debug",
           "type": "boolean",
-          "description": "Attaches a Node inspector",
+          "description": "Enables inspector connections with a debugger.",
           "allowNo": false
         },
-        "host": {
-          "name": "host",
+        "inspector-port": {
+          "name": "inspector-port",
           "type": "option",
-          "hidden": true,
-          "multiple": false
+          "description": "Port where the inspector will be available.",
+          "multiple": false,
+          "default": 9229
         },
         "env-branch": {
           "name": "env-branch",
@@ -301,6 +311,20 @@
           "char": "e",
           "description": "Specify an environment's branch name when using remote environment variables.",
           "multiple": false
+        },
+        "disable-version-check": {
+          "name": "disable-version-check",
+          "type": "boolean",
+          "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": {}
@@ -348,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": {
@@ -511,10 +535,15 @@
           "multiple": false,
           "default": 3000
         },
-        "worker-unstable": {
-          "name": "worker-unstable",
+        "worker": {
+          "name": "worker",
+          "type": "boolean",
+          "hidden": true
+        },
+        "legacy-runtime": {
+          "name": "legacy-runtime",
           "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.",
+          "description": "Run the app in a Node.js sandbox instead of an Oxygen worker.",
           "allowNo": false
         },
         "env-branch": {
@@ -523,6 +552,19 @@
           "char": "e",
           "description": "Specify an environment's branch name when using remote environment variables.",
           "multiple": false
+        },
+        "inspector-port": {
+          "name": "inspector-port",
+          "type": "option",
+          "description": "Port where the inspector will be available.",
+          "multiple": false,
+          "default": 9229
+        },
+        "debug": {
+          "name": "debug",
+          "type": "boolean",
+          "description": "Enables inspector connections with a debugger.",
+          "allowNo": false
         }
       },
       "args": {}
@@ -605,6 +647,39 @@
       },
       "args": {}
     },
+    "hydrogen:upgrade": {
+      "id": "hydrogen:upgrade",
+      "description": "Upgrade Remix and Hydrogen npm dependencies.",
+      "strict": true,
+      "pluginName": "@shopify/cli-hydrogen",
+      "pluginAlias": "@shopify/cli-hydrogen",
+      "pluginType": "core",
+      "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
+        },
+        "version": {
+          "name": "version",
+          "type": "option",
+          "char": "v",
+          "description": "A target hydrogen version to update to",
+          "required": false,
+          "multiple": false
+        },
+        "force": {
+          "name": "force",
+          "type": "boolean",
+          "char": "f",
+          "description": "Ignore warnings and force the upgrade to the target version",
+          "allowNo": false
+        }
+      },
+      "args": {}
+    },
     "hydrogen:debug:cpu": {
       "id": "hydrogen:debug:cpu",
       "description": "Builds and profiles the server startup time the app.",