@shopify/cli-hydrogen 5.1.2 → 5.2.1

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

@@ -1,3 +1,4 @@
+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";
@@ -38,7 +39,7 @@ async function loader({
 }
 const HYDROGEN_SHOP_ID = "gid://shopify/Shop/55145660472";
 function ErrorBoundary() {
-  return <ErrorPage />;
+  return /* @__PURE__ */ jsx(ErrorPage, {});
 }
 function Index() {
   const {
@@ -49,110 +50,214 @@ function Index() {
   const configDone = shopId !== HYDROGEN_SHOP_ID && !isMockShop;
   if (isMockShop || !shopName)
     shopName = "Hydrogen";
-  return <><Layout shopName={shopName}>
-    {configDone ? <HydrogenLogoBaseColor /> : <HydrogenLogoBaseBW />}
-    <h1>
-      {"Hello, "}
-      {shopName}
-    </h1>
-    <p>Welcome to your new custom storefront</p>
-    <section className="Banner">
-      <div>
-        <IconBanner />
-        <h2>{configDone ? "Create your first route" : "Configure storefront token"}</h2>
-      </div>
-      {configDone ? <p>
-        {"You\u2019re seeing this because you don\u2019t have a home route in your project yet. "}
-        <br />
-        {"Run "}
-        <code>h2 generate route home</code>
-        {" to create your home route. Learn more about"}
-        {` `}
-        <CreateRoutesLink />
-      </p> : <p>
-        {"You\u2019re seeing this because you have not yet configured your storefront token. "}
-        <br />
-        <br />
-        {" To link your store,"}
-        {` `}
-        {"run "}
-        <code>{"h2 link && h2 env pull"}</code>
-        {". Then, run"}
-        {" "}
-        <code>h2 generate route home</code>
-        {" to create your first route."}
-        <br />
-        {"Learn more about"}
-        {` `}
-        <a target="_blank" rel="norefferer noopener" href="https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables">editing environment variables</a>
-        {` `}
-        {"and"}
-        {` `}
-        <CreateRoutesLink />
-        {"."}
-      </p>}
-    </section>
-    <ResourcesLinks />
-  </Layout></>;
+  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: "h2 generate route home" }),
+        " to create your home route. 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: "h2 link && h2 env pull" }),
+        ". Then, run",
+        " ",
+        /* @__PURE__ */ jsx("code", { children: "h2 generate route home" }),
+        " to create your first route.",
+        /* @__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 <a target="_blank" rel="norefferer noopener" href="https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development#step-4-create-a-route">creating routes</a>;
+  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 <><Layout shopName="Hydrogen">
-    <HydrogenLogoBaseBW />
-    <h1>Hello, Hydrogen</h1>
-    <p>Welcome to your new custom storefront</p>
-    <section className="Banner ErrorBanner">
-      <div>
-        <IconError />
-        <h2>{"There\u2019s a problem with your storefront"}</h2>
-      </div>
-      <p>
-        {"Check your domain and API token in your "}
-        <code>.env</code>
-        {" file. Learn more about"}
-        {` `}
-        <a target="_blank" rel="norefferer noopener" href="https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables">editing environment variables</a>
-        {"."}
-      </p>
-    </section>
-    <ResourcesLinks />
-  </Layout></>;
+  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 <><section className="Links">
-    <h2>Start building</h2>
-    <ul>
-      <li><a target="_blank" rel="norefferer noopener" href="https://shopify.dev/custom-storefronts/hydrogen/building/collection-page">Collection template</a></li>
-      <li><a target="_blank" rel="norefferer noopener" href="https://shopify.dev/custom-storefronts/hydrogen/building/product-details-page">Product template</a></li>
-      <li><a target="_blank" rel="norefferer noopener" href="https://shopify.dev/custom-storefronts/hydrogen/building/cart">Cart</a></li>
-    </ul>
-    <h2>Resources</h2>
-    <ul>
-      <li><a target="_blank" rel="norefferer noopener" href="https://shopify.dev/custom-storefronts/hydrogen">Hydrogen docs</a></li>
-      <li><a target="_blank" rel="norefferer noopener" href="https://shopify.dev/custom-storefronts/hydrogen/project-structure">Remix and project structure</a></li>
-      <li><a target="_blank" rel="norefferer noopener" href="https://shopify.dev/custom-storefronts/hydrogen/data-fetching/fetch-data">Data queries and fetching</a></li>
-    </ul>
-  </section></>;
+  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 <>
-    <header>
-      <h1>{shopName?.toUpperCase()}</h1>
-      <p>{"\xA0Dev Mode\xA0"}</p>
-      <nav>
-        <a target="_blank" rel="norefferer noopener" href="https://discord.com/invite/shopifydevs"><IconDiscord /></a>
-        <a target="_blank" rel="norefferer noopener" href="https://github.com/Shopify/hydrogen"><IconGithub /></a>
-        <a target="_blank" rel="norefferer noopener" href="https://twitter.com/shopifydevs?lang=en"><IconTwitter /></a>
-      </nav>
-    </header>
-    <main>{children}</main>
-    <footer><div><a href="https://shopify.com" target="_blank" rel="noreferrer noopener">Powered by Shopify</a></div></footer>
-  </>;
+  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://discord.com/invite/shopifydevs",
+            children: /* @__PURE__ */ jsx(IconDiscord, {})
+          }
+        ),
+        /* @__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 {

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

@@ -1,9 +1,12 @@
+import { jsx, jsxs } from "react/jsx-runtime";
 import {
   Links,
   Meta,
   Outlet,
   Scripts,
-  ScrollRestoration
+  ScrollRestoration,
+  isRouteErrorResponse,
+  useRouteError
 } from "@remix-run/react";
 import styles from "./assets/styles.css";
 import favicon from "./assets/favicon.svg";
@@ -15,23 +18,66 @@ const links = () => {
   ];
 };
 function App() {
-  return <html lang="en">
-    <head>
-      <meta charSet="utf-8" />
-      <meta name="viewport" content="width=device-width,initial-scale=1" />
-      <title>Hydrogen</title>
-      <meta name="description" content="A custom storefront powered by Hydrogen" />
-      <Meta />
-      <Links />
-    </head>
-    <body>
-      <Layout><Outlet /></Layout>
-      <ScrollRestoration />
-      <Scripts />
-    </body>
-  </html>;
+  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("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(Layout, { children: /* @__PURE__ */ jsx(Outlet, {}) }),
+      /* @__PURE__ */ jsx(ScrollRestoration, {}),
+      /* @__PURE__ */ jsx(Scripts, {})
+    ] })
+  ] });
+}
+function ErrorBoundary() {
+  const error = useRouteError();
+  let errorMessage = "Unknown error";
+  let errorStatus = 500;
+  if (isRouteErrorResponse(error)) {
+    errorMessage = error?.data?.message ?? error.data;
+    errorStatus = error.status;
+  } else if (error instanceof Error) {
+    errorMessage = error.message;
+  }
+  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("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(Layout, { children: /* @__PURE__ */ jsxs("div", { className: "route-error", children: [
+        /* @__PURE__ */ jsx("h1", { children: "Please report this error" }),
+        /* @__PURE__ */ jsx("h2", { children: errorStatus }),
+        errorMessage && /* @__PURE__ */ jsx("fieldset", { children: /* @__PURE__ */ jsx("pre", { children: errorMessage }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(ScrollRestoration, {}),
+      /* @__PURE__ */ jsx(Scripts, {})
+    ] })
+  ] });
 }
 export {
+  ErrorBoundary,
   App as default,
   links
 };

package/oclif.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.1.2",
+  "version": "5.2.1",
   "commands": {
     "hydrogen:build": {
       "id": "hydrogen:build",
@@ -266,7 +266,7 @@
         "styling": {
           "name": "styling",
           "type": "option",
-          "description": "Sets the styling strategy to use. One of `tailwind`, `css-modules`, `vanilla-extract`, `postcss`.",
+          "description": "Sets the styling strategy to use. One of `tailwind`, `css-modules`, `vanilla-extract`, `postcss`, `none`.",
           "multiple": false
         },
         "markets": {
@@ -439,7 +439,7 @@
         "styling": {
           "name": "styling",
           "type": "option",
-          "description": "Sets the styling strategy to use. One of `tailwind`, `css-modules`, `vanilla-extract`, `postcss`.",
+          "description": "Sets the styling strategy to use. One of `tailwind`, `css-modules`, `vanilla-extract`, `postcss`, `none`.",
           "multiple": false
         },
         "markets": {

package/package.json

@@ -4,12 +4,12 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "5.1.2",
+  "version": "5.2.1",
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "build": "rm -rf dist && tsup --config ./tsup.config.ts && node scripts/build-check.mjs",
-    "dev": "tsup --watch --config ./tsup.config.ts",
+    "build": "tsup && node scripts/build-check.mjs",
+    "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "generate:manifest": "node scripts/generate-manifest.mjs",
     "test": "cross-env SHOPIFY_UNIT_TEST=1 vitest run --test-timeout=15000",
@@ -28,26 +28,27 @@
   },
   "peerDependencies": {
     "@remix-run/react": "1.19.1",
-    "@shopify/hydrogen-react": "^2023.7.1",
+    "@shopify/hydrogen-react": "^2023.7.3",
     "@shopify/remix-oxygen": "^1.1.3"
   },
   "dependencies": {
-    "@ast-grep/napi": "^0.5.3",
+    "@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",
     "@shopify/hydrogen-codegen": "^0.0.2",
-    "@shopify/mini-oxygen": "^1.7.0",
+    "@shopify/mini-oxygen": "^2.1.2",
     "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",
     "prettier": "^2.8.4",
     "recursive-readdir": "^2.2.3",
     "tar-fs": "^2.1.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.2.2"
   },
   "bin": "dist/create-app.js",
   "exports": {