@shopify/cli-hydrogen 5.1.1 → 5.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/dist/commands/hydrogen/build.js +10 -5
  2. package/dist/commands/hydrogen/check.js +1 -1
  3. package/dist/commands/hydrogen/codegen-unstable.js +3 -3
  4. package/dist/commands/hydrogen/dev.js +26 -17
  5. package/dist/commands/hydrogen/init.js +3 -0
  6. package/dist/commands/hydrogen/init.test.js +199 -51
  7. package/dist/commands/hydrogen/preview.js +4 -3
  8. package/dist/commands/hydrogen/setup.js +5 -2
  9. package/dist/commands/hydrogen/setup.test.js +62 -0
  10. package/dist/generator-templates/starter/app/components/Footer.tsx +1 -1
  11. package/dist/generator-templates/starter/app/components/Header.tsx +1 -1
  12. package/dist/generator-templates/starter/app/components/Search.tsx +3 -3
  13. package/dist/generator-templates/starter/app/root.tsx +24 -1
  14. package/dist/generator-templates/starter/app/routes/$.tsx +4 -0
  15. package/dist/generator-templates/starter/app/routes/_index.tsx +6 -2
  16. package/dist/generator-templates/starter/app/routes/account.$.tsx +1 -2
  17. package/dist/generator-templates/starter/app/routes/account.addresses.tsx +1 -1
  18. package/dist/generator-templates/starter/app/routes/account.orders._index.tsx +2 -7
  19. package/dist/generator-templates/starter/app/routes/account.profile.tsx +7 -2
  20. package/dist/generator-templates/starter/app/routes/account.tsx +4 -3
  21. package/dist/generator-templates/starter/app/routes/account_.activate.$id.$activationToken.tsx +6 -2
  22. package/dist/generator-templates/starter/app/routes/account_.login.tsx +6 -2
  23. package/dist/generator-templates/starter/app/routes/account_.logout.tsx +2 -6
  24. package/dist/generator-templates/starter/app/routes/blogs.$blogHandle.$articleHandle.tsx +1 -2
  25. package/dist/generator-templates/starter/app/routes/blogs.$blogHandle._index.tsx +1 -2
  26. package/dist/generator-templates/starter/app/routes/blogs._index.tsx +1 -2
  27. package/dist/generator-templates/starter/app/routes/cart.tsx +1 -2
  28. package/dist/generator-templates/starter/app/routes/collections.$handle.tsx +1 -2
  29. package/dist/generator-templates/starter/app/routes/pages.$handle.tsx +1 -2
  30. package/dist/generator-templates/starter/app/routes/policies.$handle.tsx +2 -3
  31. package/dist/generator-templates/starter/app/routes/products.$handle.tsx +23 -15
  32. package/dist/generator-templates/starter/app/routes/search.tsx +1 -2
  33. package/dist/generator-templates/starter/package.json +4 -4
  34. package/dist/generator-templates/starter/remix.config.js +1 -0
  35. package/dist/generator-templates/starter/storefrontapi.generated.d.ts +9 -9
  36. package/dist/lib/ast.js +9 -0
  37. package/dist/lib/check-version.test.js +1 -0
  38. package/dist/lib/codegen.js +17 -7
  39. package/dist/lib/environment-variables.js +15 -11
  40. package/dist/lib/file.test.js +4 -5
  41. package/dist/lib/find-port.js +9 -0
  42. package/dist/lib/flags.js +3 -2
  43. package/dist/lib/format-code.js +3 -0
  44. package/dist/lib/live-reload.js +62 -0
  45. package/dist/lib/log.js +6 -1
  46. package/dist/lib/mini-oxygen.js +28 -18
  47. package/dist/lib/missing-routes.js +17 -1
  48. package/dist/lib/onboarding/common.js +5 -0
  49. package/dist/lib/onboarding/local.js +21 -8
  50. package/dist/lib/onboarding/remote.js +8 -3
  51. package/dist/lib/remix-config.js +2 -0
  52. package/dist/lib/remix-version-check.test.js +1 -0
  53. package/dist/lib/setups/css/replacers.js +7 -4
  54. package/dist/lib/setups/i18n/replacers.js +7 -5
  55. package/dist/lib/setups/routes/generate.js +4 -1
  56. package/dist/lib/setups/routes/generate.test.js +10 -11
  57. package/dist/lib/template-downloader.js +4 -0
  58. package/dist/lib/transpile-ts.js +1 -0
  59. package/dist/lib/virtual-routes.js +4 -1
  60. package/dist/virtual-routes/components/HydrogenLogoBaseBW.jsx +26 -4
  61. package/dist/virtual-routes/components/HydrogenLogoBaseColor.jsx +40 -10
  62. package/dist/virtual-routes/components/IconBanner.jsx +286 -44
  63. package/dist/virtual-routes/components/IconDiscord.jsx +17 -1
  64. package/dist/virtual-routes/components/IconError.jsx +55 -17
  65. package/dist/virtual-routes/components/IconGithub.jsx +19 -1
  66. package/dist/virtual-routes/components/IconTwitter.jsx +17 -1
  67. package/dist/virtual-routes/components/Layout.jsx +1 -1
  68. package/dist/virtual-routes/routes/index.jsx +110 -94
  69. package/dist/virtual-routes/virtual-root.jsx +7 -15
  70. package/oclif.manifest.json +1 -1
  71. package/package.json +9 -8
@@ -1,4 +1,20 @@
1
- const IconDiscord = (props) => <svg width={26} height={20} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M21.19 1.675A19.91 19.91 0 0 0 16.03 0c-.223.415-.482.973-.661 1.418a18.355 18.355 0 0 0-5.72 0A15.367 15.367 0 0 0 8.98 0a19.844 19.844 0 0 0-5.165 1.68C.55 6.776-.336 11.747.106 16.647c2.167 1.67 4.266 2.686 6.33 3.35.51-.724.964-1.495 1.356-2.306a13.149 13.149 0 0 1-2.135-1.073c.179-.137.354-.28.523-.428 4.116 1.989 8.588 1.989 12.655 0 .172.148.347.291.524.428a13.12 13.12 0 0 1-2.139 1.075c.392.81.844 1.582 1.356 2.306 2.066-.664 4.167-1.68 6.333-3.352.52-5.68-.887-10.606-3.718-14.973ZM8.353 13.635c-1.235 0-2.249-1.192-2.249-2.643 0-1.45.992-2.644 2.25-2.644 1.257 0 2.27 1.191 2.248 2.644.002 1.45-.991 2.642-2.249 2.642Zm8.311 0c-1.235 0-2.249-1.192-2.249-2.643 0-1.45.992-2.644 2.25-2.644 1.257 0 2.27 1.191 2.248 2.644 0 1.45-.991 2.642-2.249 2.642Z" fill="#5C5F62" /></svg>;
1
+ const IconDiscord = (props) => /* @__PURE__ */ React.createElement(
2
+ "svg",
3
+ {
4
+ width: 26,
5
+ height: 20,
6
+ fill: "none",
7
+ xmlns: "http://www.w3.org/2000/svg",
8
+ ...props
9
+ },
10
+ /* @__PURE__ */ React.createElement(
11
+ "path",
12
+ {
13
+ d: "M21.19 1.675A19.91 19.91 0 0 0 16.03 0c-.223.415-.482.973-.661 1.418a18.355 18.355 0 0 0-5.72 0A15.367 15.367 0 0 0 8.98 0a19.844 19.844 0 0 0-5.165 1.68C.55 6.776-.336 11.747.106 16.647c2.167 1.67 4.266 2.686 6.33 3.35.51-.724.964-1.495 1.356-2.306a13.149 13.149 0 0 1-2.135-1.073c.179-.137.354-.28.523-.428 4.116 1.989 8.588 1.989 12.655 0 .172.148.347.291.524.428a13.12 13.12 0 0 1-2.139 1.075c.392.81.844 1.582 1.356 2.306 2.066-.664 4.167-1.68 6.333-3.352.52-5.68-.887-10.606-3.718-14.973ZM8.353 13.635c-1.235 0-2.249-1.192-2.249-2.643 0-1.45.992-2.644 2.25-2.644 1.257 0 2.27 1.191 2.248 2.644.002 1.45-.991 2.642-2.249 2.642Zm8.311 0c-1.235 0-2.249-1.192-2.249-2.643 0-1.45.992-2.644 2.25-2.644 1.257 0 2.27 1.191 2.248 2.644 0 1.45-.991 2.642-2.249 2.642Z",
14
+ fill: "#5C5F62"
15
+ }
16
+ )
17
+ );
2
18
  export {
3
19
  IconDiscord
4
20
  };
@@ -1,20 +1,58 @@
1
- const IconError = (props) => <svg width={32} height={32} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
2
- <path fill="#000" d="M6 18h20v2H6zM30 8h2v16h-2zM0 8h2v16H0z" />
3
- <path fill="#F63310" d="M2 8h2v16H2zM4 6h2v4H4zM6 4h2v4H6zM8 2h2v4H8zM24 4h2v2h-2zM26 6h2v2h-2z" />
4
- <path fill="#74170B" d="M26 24h2v2h-2zM28 22h2v2h-2zM24 26h2v2h-2zM22 28h2v2h-2z" />
5
- <path fill="#971C06" d="M6 26h2v2H6zM4 24h2v2H4zM4 18h2v2H4zM26 18h2v2h-2zM26 12h2v2h-2z" />
6
- <path fill="#D62C0D" d="M26 8h2v4h-2zM4 10h2v2H4zM8 6h18v2H8zM10 4h14v2H10zM6 8h20v2H6z" />
7
- <path fill="#971C06" d="M28 10h2v12h-2zM8 28h14v2H8z" />
8
- <path fill="#D62C0D" d="M26 20h2v2h-2zM4 20h2v2H4z" />
9
- <path fill="#F63310" d="M4 12h2v2H4z" />
10
- <path fill="#971C06" d="M6 20h20v2H6z" />
11
- <path fill="#F63310" d="M28 8h2v2h-2zM10 2h14v2H10zM6 10h20v2H6z" />
12
- <path fill="#D62C0D" d="M4 22h24v2H4zM6 24h20v2H6zM8 26h16v2H8z" />
13
- <path fill="#000" d="M6 12h20v2H6z" />
14
- <path fill="#fff" d="M6 14h20v2H6zM6 16h2v2H6z" />
15
- <path fill="#ECEDEE" d="M8 16h18v2H8z" />
16
- <path fill="#000" d="M4 14h2v4H4zM26 14h2v4h-2zM2 6h2v2H2zM4 4h2v2H4zM6 2h2v2H6zM24 2h2v2h-2zM26 4h2v2h-2zM26 26h2v2h-2zM24 28h2v2h-2zM6 28h2v2H6zM4 26h2v2H4zM2 24h2v2H2zM8 30h16v2H8zM28 6h2v2h-2zM28 24h2v2h-2zM8 0h16v2H8z" />
17
- </svg>;
1
+ const IconError = (props) => /* @__PURE__ */ React.createElement(
2
+ "svg",
3
+ {
4
+ width: 32,
5
+ height: 32,
6
+ fill: "none",
7
+ xmlns: "http://www.w3.org/2000/svg",
8
+ ...props
9
+ },
10
+ /* @__PURE__ */ React.createElement("path", { fill: "#000", d: "M6 18h20v2H6zM30 8h2v16h-2zM0 8h2v16H0z" }),
11
+ /* @__PURE__ */ React.createElement(
12
+ "path",
13
+ {
14
+ fill: "#F63310",
15
+ d: "M2 8h2v16H2zM4 6h2v4H4zM6 4h2v4H6zM8 2h2v4H8zM24 4h2v2h-2zM26 6h2v2h-2z"
16
+ }
17
+ ),
18
+ /* @__PURE__ */ React.createElement(
19
+ "path",
20
+ {
21
+ fill: "#74170B",
22
+ d: "M26 24h2v2h-2zM28 22h2v2h-2zM24 26h2v2h-2zM22 28h2v2h-2z"
23
+ }
24
+ ),
25
+ /* @__PURE__ */ React.createElement(
26
+ "path",
27
+ {
28
+ fill: "#971C06",
29
+ d: "M6 26h2v2H6zM4 24h2v2H4zM4 18h2v2H4zM26 18h2v2h-2zM26 12h2v2h-2z"
30
+ }
31
+ ),
32
+ /* @__PURE__ */ React.createElement(
33
+ "path",
34
+ {
35
+ fill: "#D62C0D",
36
+ d: "M26 8h2v4h-2zM4 10h2v2H4zM8 6h18v2H8zM10 4h14v2H10zM6 8h20v2H6z"
37
+ }
38
+ ),
39
+ /* @__PURE__ */ React.createElement("path", { fill: "#971C06", d: "M28 10h2v12h-2zM8 28h14v2H8z" }),
40
+ /* @__PURE__ */ React.createElement("path", { fill: "#D62C0D", d: "M26 20h2v2h-2zM4 20h2v2H4z" }),
41
+ /* @__PURE__ */ React.createElement("path", { fill: "#F63310", d: "M4 12h2v2H4z" }),
42
+ /* @__PURE__ */ React.createElement("path", { fill: "#971C06", d: "M6 20h20v2H6z" }),
43
+ /* @__PURE__ */ React.createElement("path", { fill: "#F63310", d: "M28 8h2v2h-2zM10 2h14v2H10zM6 10h20v2H6z" }),
44
+ /* @__PURE__ */ React.createElement("path", { fill: "#D62C0D", d: "M4 22h24v2H4zM6 24h20v2H6zM8 26h16v2H8z" }),
45
+ /* @__PURE__ */ React.createElement("path", { fill: "#000", d: "M6 12h20v2H6z" }),
46
+ /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M6 14h20v2H6zM6 16h2v2H6z" }),
47
+ /* @__PURE__ */ React.createElement("path", { fill: "#ECEDEE", d: "M8 16h18v2H8z" }),
48
+ /* @__PURE__ */ React.createElement(
49
+ "path",
50
+ {
51
+ fill: "#000",
52
+ d: "M4 14h2v4H4zM26 14h2v4h-2zM2 6h2v2H2zM4 4h2v2H4zM6 2h2v2H6zM24 2h2v2h-2zM26 4h2v2h-2zM26 26h2v2h-2zM24 28h2v2h-2zM6 28h2v2H6zM4 26h2v2H4zM2 24h2v2H2zM8 30h16v2H8zM28 6h2v2h-2zM28 24h2v2h-2zM8 0h16v2H8z"
53
+ }
54
+ )
55
+ );
18
56
  export {
19
57
  IconError
20
58
  };
@@ -1,4 +1,22 @@
1
- const IconGithub = (props) => <svg width={20} height={20} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M9.997 0C4.473 0 0 4.588 0 10.253c0 4.537 2.862 8.369 6.835 9.727.5.09.687-.218.687-.487 0-.243-.012-1.05-.012-1.91-2.512.475-3.161-.627-3.361-1.204-.113-.295-.6-1.205-1.025-1.448-.35-.192-.85-.667-.013-.68.788-.012 1.35.744 1.537 1.052.9 1.55 2.337 1.114 2.912.845.087-.666.35-1.115.637-1.371-2.224-.256-4.548-1.14-4.548-5.062 0-1.115.387-2.038 1.024-2.756-.1-.256-.45-1.307.1-2.717 0 0 .838-.269 2.75 1.051.8-.23 1.649-.346 2.499-.346.85 0 1.699.115 2.499.346 1.912-1.333 2.749-1.05 2.749-1.05.55 1.409.2 2.46.1 2.716.637.718 1.025 1.628 1.025 2.756 0 3.934-2.337 4.806-4.561 5.062.362.32.674.936.674 1.897 0 1.371-.012 2.473-.012 2.82 0 .268.187.589.687.486a10.036 10.036 0 0 0 4.93-3.74 10.45 10.45 0 0 0 1.88-5.987C19.993 4.588 15.52 0 9.997 0Z" fill="#5C5F62" /></svg>;
1
+ const IconGithub = (props) => /* @__PURE__ */ React.createElement(
2
+ "svg",
3
+ {
4
+ width: 20,
5
+ height: 20,
6
+ fill: "none",
7
+ xmlns: "http://www.w3.org/2000/svg",
8
+ ...props
9
+ },
10
+ /* @__PURE__ */ React.createElement(
11
+ "path",
12
+ {
13
+ fillRule: "evenodd",
14
+ clipRule: "evenodd",
15
+ d: "M9.997 0C4.473 0 0 4.588 0 10.253c0 4.537 2.862 8.369 6.835 9.727.5.09.687-.218.687-.487 0-.243-.012-1.05-.012-1.91-2.512.475-3.161-.627-3.361-1.204-.113-.295-.6-1.205-1.025-1.448-.35-.192-.85-.667-.013-.68.788-.012 1.35.744 1.537 1.052.9 1.55 2.337 1.114 2.912.845.087-.666.35-1.115.637-1.371-2.224-.256-4.548-1.14-4.548-5.062 0-1.115.387-2.038 1.024-2.756-.1-.256-.45-1.307.1-2.717 0 0 .838-.269 2.75 1.051.8-.23 1.649-.346 2.499-.346.85 0 1.699.115 2.499.346 1.912-1.333 2.749-1.05 2.749-1.05.55 1.409.2 2.46.1 2.716.637.718 1.025 1.628 1.025 2.756 0 3.934-2.337 4.806-4.561 5.062.362.32.674.936.674 1.897 0 1.371-.012 2.473-.012 2.82 0 .268.187.589.687.486a10.036 10.036 0 0 0 4.93-3.74 10.45 10.45 0 0 0 1.88-5.987C19.993 4.588 15.52 0 9.997 0Z",
16
+ fill: "#5C5F62"
17
+ }
18
+ )
19
+ );
2
20
  export {
3
21
  IconGithub
4
22
  };
@@ -1,4 +1,20 @@
1
- const IconTwitter = (props) => <svg width={23} height={20} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M20.53 4.979c.014.217.014.434.014.653C20.544 12.305 15.824 20 7.193 20v-.004C4.643 20 2.146 19.214 0 17.732c.37.048.743.072 1.117.073 2.113.002 4.165-.76 5.828-2.166-2.008-.04-3.77-1.45-4.384-3.506a4.356 4.356 0 0 0 2.118-.087C2.49 11.57.915 9.5.915 7.096v-.064a4.414 4.414 0 0 0 2.13.632C.983 6.18.348 3.229 1.593.92c2.382 3.155 5.897 5.073 9.67 5.276-.378-1.754.139-3.592 1.358-4.825 1.89-1.912 4.862-1.814 6.639.22A9.023 9.023 0 0 0 22.24.364c-.35 1.17-1.084 2.162-2.063 2.793a8.822 8.822 0 0 0 2.694-.795A9.97 9.97 0 0 1 20.53 4.98Z" fill="#5C5F62" /></svg>;
1
+ const IconTwitter = (props) => /* @__PURE__ */ React.createElement(
2
+ "svg",
3
+ {
4
+ width: 23,
5
+ height: 20,
6
+ fill: "none",
7
+ xmlns: "http://www.w3.org/2000/svg",
8
+ ...props
9
+ },
10
+ /* @__PURE__ */ React.createElement(
11
+ "path",
12
+ {
13
+ d: "M20.53 4.979c.014.217.014.434.014.653C20.544 12.305 15.824 20 7.193 20v-.004C4.643 20 2.146 19.214 0 17.732c.37.048.743.072 1.117.073 2.113.002 4.165-.76 5.828-2.166-2.008-.04-3.77-1.45-4.384-3.506a4.356 4.356 0 0 0 2.118-.087C2.49 11.57.915 9.5.915 7.096v-.064a4.414 4.414 0 0 0 2.13.632C.983 6.18.348 3.229 1.593.92c2.382 3.155 5.897 5.073 9.67 5.276-.378-1.754.139-3.592 1.358-4.825 1.89-1.912 4.862-1.814 6.639.22A9.023 9.023 0 0 0 22.24.364c-.35 1.17-1.084 2.162-2.063 2.793a8.822 8.822 0 0 0 2.694-.795A9.97 9.97 0 0 1 20.53 4.98Z",
14
+ fill: "#5C5F62"
15
+ }
16
+ )
17
+ );
2
18
  export {
3
19
  IconTwitter
4
20
  };
@@ -1,5 +1,5 @@
1
1
  function Layout(props) {
2
- return <div className="hydrogen-virtual-route">{props.children}</div>;
2
+ return /* @__PURE__ */ React.createElement("div", { className: "hydrogen-virtual-route" }, props.children);
3
3
  }
4
4
  export {
5
5
  Layout
@@ -38,7 +38,7 @@ async function loader({
38
38
  }
39
39
  const HYDROGEN_SHOP_ID = "gid://shopify/Shop/55145660472";
40
40
  function ErrorBoundary() {
41
- return <ErrorPage />;
41
+ return /* @__PURE__ */ React.createElement(ErrorPage, null);
42
42
  }
43
43
  function Index() {
44
44
  const {
@@ -49,110 +49,126 @@ function Index() {
49
49
  const configDone = shopId !== HYDROGEN_SHOP_ID && !isMockShop;
50
50
  if (isMockShop || !shopName)
51
51
  shopName = "Hydrogen";
52
- return <><Layout shopName={shopName}>
53
- {configDone ? <HydrogenLogoBaseColor /> : <HydrogenLogoBaseBW />}
54
- <h1>
55
- {"Hello, "}
56
- {shopName}
57
- </h1>
58
- <p>Welcome to your new custom storefront</p>
59
- <section className="Banner">
60
- <div>
61
- <IconBanner />
62
- <h2>{configDone ? "Create your first route" : "Configure storefront token"}</h2>
63
- </div>
64
- {configDone ? <p>
65
- {"You\u2019re seeing this because you don\u2019t have a home route in your project yet. "}
66
- <br />
67
- {"Run "}
68
- <code>h2 generate route home</code>
69
- {" to create your home route. Learn more about"}
70
- {` `}
71
- <CreateRoutesLink />
72
- </p> : <p>
73
- {"You\u2019re seeing this because you have not yet configured your storefront token. "}
74
- <br />
75
- <br />
76
- {" To link your store,"}
77
- {` `}
78
- {"run "}
79
- <code>{"h2 link && h2 env pull"}</code>
80
- {". Then, run"}
81
- {" "}
82
- <code>h2 generate route home</code>
83
- {" to create your first route."}
84
- <br />
85
- {"Learn more about"}
86
- {` `}
87
- <a target="_blank" rel="norefferer noopener" href="https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables">editing environment variables</a>
88
- {` `}
89
- {"and"}
90
- {` `}
91
- <CreateRoutesLink />
92
- {"."}
93
- </p>}
94
- </section>
95
- <ResourcesLinks />
96
- </Layout></>;
52
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Layout, { shopName }, configDone ? /* @__PURE__ */ React.createElement(HydrogenLogoBaseColor, null) : /* @__PURE__ */ React.createElement(HydrogenLogoBaseBW, null), /* @__PURE__ */ React.createElement("h1", null, "Hello, ", shopName), /* @__PURE__ */ React.createElement("p", null, "Welcome to your new custom storefront"), /* @__PURE__ */ React.createElement("section", { className: "Banner" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(IconBanner, null), /* @__PURE__ */ React.createElement("h2", null, configDone ? "Create your first route" : "Configure storefront token")), configDone ? /* @__PURE__ */ React.createElement("p", null, "You\u2019re seeing this because you don\u2019t have a home route in your project yet. ", /* @__PURE__ */ React.createElement("br", null), "Run ", /* @__PURE__ */ React.createElement("code", null, "h2 generate route home"), " to create your home route. Learn more about", ` `, /* @__PURE__ */ React.createElement(CreateRoutesLink, null)) : /* @__PURE__ */ React.createElement("p", null, "You\u2019re seeing this because you have not yet configured your storefront token. ", /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("br", null), " To link your store,", ` `, "run ", /* @__PURE__ */ React.createElement("code", null, "h2 link && h2 env pull"), ". Then, run", " ", /* @__PURE__ */ React.createElement("code", null, "h2 generate route home"), " to create your first route.", /* @__PURE__ */ React.createElement("br", null), "Learn more about", ` `, /* @__PURE__ */ React.createElement(
53
+ "a",
54
+ {
55
+ target: "_blank",
56
+ rel: "norefferer noopener",
57
+ href: "https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables"
58
+ },
59
+ "editing environment variables"
60
+ ), ` `, "and", ` `, /* @__PURE__ */ React.createElement(CreateRoutesLink, null), ".")), /* @__PURE__ */ React.createElement(ResourcesLinks, null)));
97
61
  }
98
62
  function CreateRoutesLink() {
99
- 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>;
63
+ return /* @__PURE__ */ React.createElement(
64
+ "a",
65
+ {
66
+ target: "_blank",
67
+ rel: "norefferer noopener",
68
+ href: "https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development#step-4-create-a-route"
69
+ },
70
+ "creating routes"
71
+ );
100
72
  }
101
73
  function ErrorPage() {
102
- return <><Layout shopName="Hydrogen">
103
- <HydrogenLogoBaseBW />
104
- <h1>Hello, Hydrogen</h1>
105
- <p>Welcome to your new custom storefront</p>
106
- <section className="Banner ErrorBanner">
107
- <div>
108
- <IconError />
109
- <h2>{"There\u2019s a problem with your storefront"}</h2>
110
- </div>
111
- <p>
112
- {"Check your domain and API token in your "}
113
- <code>.env</code>
114
- {" file. Learn more about"}
115
- {` `}
116
- <a target="_blank" rel="norefferer noopener" href="https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables">editing environment variables</a>
117
- {"."}
118
- </p>
119
- </section>
120
- <ResourcesLinks />
121
- </Layout></>;
74
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Layout, { shopName: "Hydrogen" }, /* @__PURE__ */ React.createElement(HydrogenLogoBaseBW, null), /* @__PURE__ */ React.createElement("h1", null, "Hello, Hydrogen"), /* @__PURE__ */ React.createElement("p", null, "Welcome to your new custom storefront"), /* @__PURE__ */ React.createElement("section", { className: "Banner ErrorBanner" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(IconError, null), /* @__PURE__ */ React.createElement("h2", null, "There\u2019s a problem with your storefront")), /* @__PURE__ */ React.createElement("p", null, "Check your domain and API token in your ", /* @__PURE__ */ React.createElement("code", null, ".env"), " file. Learn more about", ` `, /* @__PURE__ */ React.createElement(
75
+ "a",
76
+ {
77
+ target: "_blank",
78
+ rel: "norefferer noopener",
79
+ href: "https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables"
80
+ },
81
+ "editing environment variables"
82
+ ), ".")), /* @__PURE__ */ React.createElement(ResourcesLinks, null)));
122
83
  }
123
84
  function ResourcesLinks() {
124
- return <><section className="Links">
125
- <h2>Start building</h2>
126
- <ul>
127
- <li><a target="_blank" rel="norefferer noopener" href="https://shopify.dev/custom-storefronts/hydrogen/building/collection-page">Collection template</a></li>
128
- <li><a target="_blank" rel="norefferer noopener" href="https://shopify.dev/custom-storefronts/hydrogen/building/product-details-page">Product template</a></li>
129
- <li><a target="_blank" rel="norefferer noopener" href="https://shopify.dev/custom-storefronts/hydrogen/building/cart">Cart</a></li>
130
- </ul>
131
- <h2>Resources</h2>
132
- <ul>
133
- <li><a target="_blank" rel="norefferer noopener" href="https://shopify.dev/custom-storefronts/hydrogen">Hydrogen docs</a></li>
134
- <li><a target="_blank" rel="norefferer noopener" href="https://shopify.dev/custom-storefronts/hydrogen/project-structure">Remix and project structure</a></li>
135
- <li><a target="_blank" rel="norefferer noopener" href="https://shopify.dev/custom-storefronts/hydrogen/data-fetching/fetch-data">Data queries and fetching</a></li>
136
- </ul>
137
- </section></>;
85
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("section", { className: "Links" }, /* @__PURE__ */ React.createElement("h2", null, "Start building"), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
86
+ "a",
87
+ {
88
+ target: "_blank",
89
+ rel: "norefferer noopener",
90
+ href: "https://shopify.dev/custom-storefronts/hydrogen/building/collection-page"
91
+ },
92
+ "Collection template"
93
+ )), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
94
+ "a",
95
+ {
96
+ target: "_blank",
97
+ rel: "norefferer noopener",
98
+ href: "https://shopify.dev/custom-storefronts/hydrogen/building/product-details-page"
99
+ },
100
+ "Product template"
101
+ )), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
102
+ "a",
103
+ {
104
+ target: "_blank",
105
+ rel: "norefferer noopener",
106
+ href: "https://shopify.dev/custom-storefronts/hydrogen/building/cart"
107
+ },
108
+ "Cart"
109
+ ))), /* @__PURE__ */ React.createElement("h2", null, "Resources"), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
110
+ "a",
111
+ {
112
+ target: "_blank",
113
+ rel: "norefferer noopener",
114
+ href: "https://shopify.dev/custom-storefronts/hydrogen"
115
+ },
116
+ "Hydrogen docs"
117
+ )), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
118
+ "a",
119
+ {
120
+ target: "_blank",
121
+ rel: "norefferer noopener",
122
+ href: "https://shopify.dev/custom-storefronts/hydrogen/project-structure"
123
+ },
124
+ "Remix and project structure"
125
+ )), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
126
+ "a",
127
+ {
128
+ target: "_blank",
129
+ rel: "norefferer noopener",
130
+ href: "https://shopify.dev/custom-storefronts/hydrogen/data-fetching/fetch-data"
131
+ },
132
+ "Data queries and fetching"
133
+ )))));
138
134
  }
139
135
  function Layout({
140
136
  shopName,
141
137
  children
142
138
  }) {
143
- return <>
144
- <header>
145
- <h1>{shopName?.toUpperCase()}</h1>
146
- <p>{"\xA0Dev Mode\xA0"}</p>
147
- <nav>
148
- <a target="_blank" rel="norefferer noopener" href="https://discord.com/invite/shopifydevs"><IconDiscord /></a>
149
- <a target="_blank" rel="norefferer noopener" href="https://github.com/Shopify/hydrogen"><IconGithub /></a>
150
- <a target="_blank" rel="norefferer noopener" href="https://twitter.com/shopifydevs?lang=en"><IconTwitter /></a>
151
- </nav>
152
- </header>
153
- <main>{children}</main>
154
- <footer><div><a href="https://shopify.com" target="_blank" rel="noreferrer noopener">Powered by Shopify</a></div></footer>
155
- </>;
139
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("header", null, /* @__PURE__ */ React.createElement("h1", null, shopName?.toUpperCase()), /* @__PURE__ */ React.createElement("p", null, "\xA0Dev Mode\xA0"), /* @__PURE__ */ React.createElement("nav", null, /* @__PURE__ */ React.createElement(
140
+ "a",
141
+ {
142
+ target: "_blank",
143
+ rel: "norefferer noopener",
144
+ href: "https://discord.com/invite/shopifydevs"
145
+ },
146
+ /* @__PURE__ */ React.createElement(IconDiscord, null)
147
+ ), /* @__PURE__ */ React.createElement(
148
+ "a",
149
+ {
150
+ target: "_blank",
151
+ rel: "norefferer noopener",
152
+ href: "https://github.com/Shopify/hydrogen"
153
+ },
154
+ /* @__PURE__ */ React.createElement(IconGithub, null)
155
+ ), /* @__PURE__ */ React.createElement(
156
+ "a",
157
+ {
158
+ target: "_blank",
159
+ rel: "norefferer noopener",
160
+ href: "https://twitter.com/shopifydevs?lang=en"
161
+ },
162
+ /* @__PURE__ */ React.createElement(IconTwitter, null)
163
+ ))), /* @__PURE__ */ React.createElement("main", null, children), /* @__PURE__ */ React.createElement("footer", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
164
+ "a",
165
+ {
166
+ href: "https://shopify.com",
167
+ target: "_blank",
168
+ rel: "noreferrer noopener"
169
+ },
170
+ "Powered by Shopify"
171
+ ))));
156
172
  }
157
173
  const LAYOUT_QUERY = `#graphql
158
174
  query layout {
@@ -15,21 +15,13 @@ const links = () => {
15
15
  ];
16
16
  };
17
17
  function App() {
18
- return <html lang="en">
19
- <head>
20
- <meta charSet="utf-8" />
21
- <meta name="viewport" content="width=device-width,initial-scale=1" />
22
- <title>Hydrogen</title>
23
- <meta name="description" content="A custom storefront powered by Hydrogen" />
24
- <Meta />
25
- <Links />
26
- </head>
27
- <body>
28
- <Layout><Outlet /></Layout>
29
- <ScrollRestoration />
30
- <Scripts />
31
- </body>
32
- </html>;
18
+ return /* @__PURE__ */ React.createElement("html", { lang: "en" }, /* @__PURE__ */ React.createElement("head", null, /* @__PURE__ */ React.createElement("meta", { charSet: "utf-8" }), /* @__PURE__ */ React.createElement("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }), /* @__PURE__ */ React.createElement("title", null, "Hydrogen"), /* @__PURE__ */ React.createElement(
19
+ "meta",
20
+ {
21
+ name: "description",
22
+ content: "A custom storefront powered by Hydrogen"
23
+ }
24
+ ), /* @__PURE__ */ React.createElement(Meta, null), /* @__PURE__ */ React.createElement(Links, null)), /* @__PURE__ */ React.createElement("body", null, /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(Outlet, null)), /* @__PURE__ */ React.createElement(ScrollRestoration, null), /* @__PURE__ */ React.createElement(Scripts, null)));
33
25
  }
34
26
  export {
35
27
  App as default,
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "5.1.1",
2
+ "version": "5.2.0",
3
3
  "commands": {
4
4
  "hydrogen:build": {
5
5
  "id": "hydrogen:build",
package/package.json CHANGED
@@ -4,12 +4,12 @@
4
4
  "access": "public",
5
5
  "@shopify:registry": "https://registry.npmjs.org"
6
6
  },
7
- "version": "5.1.1",
7
+ "version": "5.2.0",
8
8
  "license": "MIT",
9
9
  "type": "module",
10
10
  "scripts": {
11
- "build": "rm -rf dist && tsup --config ./tsup.config.ts && node scripts/build-check.mjs",
12
- "dev": "rm -rf dist && tsup --watch --config ./tsup.config.ts",
11
+ "build": "tsup && node scripts/build-check.mjs",
12
+ "dev": "tsup --watch",
13
13
  "typecheck": "tsc --noEmit",
14
14
  "generate:manifest": "node scripts/generate-manifest.mjs",
15
15
  "test": "cross-env SHOPIFY_UNIT_TEST=1 vitest run --test-timeout=15000",
@@ -22,27 +22,28 @@
22
22
  "@types/prettier": "^2.7.2",
23
23
  "@types/recursive-readdir": "^2.2.1",
24
24
  "@types/tar-fs": "^2.0.1",
25
- "tempy": "^3.0.0",
25
+ "@vitest/coverage-v8": "^0.33.0",
26
26
  "type-fest": "^3.6.0",
27
27
  "vitest": "^0.33.0"
28
28
  },
29
29
  "peerDependencies": {
30
30
  "@remix-run/react": "1.19.1",
31
- "@shopify/hydrogen-react": "^2023.7.0",
32
- "@shopify/remix-oxygen": "^1.1.2"
31
+ "@shopify/hydrogen-react": "^2023.7.2",
32
+ "@shopify/remix-oxygen": "^1.1.3"
33
33
  },
34
34
  "dependencies": {
35
- "@ast-grep/napi": "^0.5.3",
35
+ "@ast-grep/napi": "0.11.0",
36
36
  "@graphql-codegen/cli": "3.3.1",
37
37
  "@oclif/core": "2.8.11",
38
38
  "@remix-run/dev": "1.19.1",
39
39
  "@shopify/cli-kit": "3.48.0",
40
40
  "@shopify/hydrogen-codegen": "^0.0.2",
41
- "@shopify/mini-oxygen": "^1.7.0",
41
+ "@shopify/mini-oxygen": "^2.1.1",
42
42
  "ansi-escapes": "^6.2.0",
43
43
  "diff": "^5.1.0",
44
44
  "fast-glob": "^3.2.12",
45
45
  "fs-extra": "^11.1.0",
46
+ "get-port": "^7.0.0",
46
47
  "gunzip-maybe": "^1.4.2",
47
48
  "prettier": "^2.8.4",
48
49
  "recursive-readdir": "^2.2.3",