@shopify/cli-hydrogen 5.2.0 → 5.2.2

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 (33) hide show
  1. package/dist/commands/hydrogen/dev.js +1 -2
  2. package/dist/commands/hydrogen/generate/route.test.js +0 -1
  3. package/dist/commands/hydrogen/init.js +3 -3
  4. package/dist/commands/hydrogen/preview.js +1 -2
  5. package/dist/generator-templates/starter/app/entry.server.tsx +9 -1
  6. package/dist/generator-templates/starter/app/root.tsx +9 -6
  7. package/dist/generator-templates/starter/app/routes/blogs._index.tsx +1 -1
  8. package/dist/generator-templates/starter/app/routes/collections.$handle.tsx +1 -1
  9. package/dist/generator-templates/starter/package.json +5 -5
  10. package/dist/generator-templates/starter/storefrontapi.generated.d.ts +2 -2
  11. package/dist/generator-templates/starter/tsconfig.json +1 -0
  12. package/dist/lib/file.js +1 -1
  13. package/dist/lib/flags.js +3 -3
  14. package/dist/lib/format-code.js +4 -4
  15. package/dist/lib/graphql/admin/client.js +18 -0
  16. package/dist/lib/graphql/admin/client.test.js +28 -3
  17. package/dist/lib/mini-oxygen.js +1 -0
  18. package/dist/lib/setups/css/index.js +4 -2
  19. package/dist/lib/setups/routes/generate.js +11 -28
  20. package/dist/lib/setups/routes/generate.test.js +1 -3
  21. package/dist/lib/transpile-ts.js +4 -3
  22. package/dist/virtual-routes/components/HydrogenLogoBaseBW.jsx +22 -19
  23. package/dist/virtual-routes/components/HydrogenLogoBaseColor.jsx +37 -33
  24. package/dist/virtual-routes/components/IconBanner.jsx +282 -279
  25. package/dist/virtual-routes/components/IconDiscord.jsx +11 -10
  26. package/dist/virtual-routes/components/IconError.jsx +51 -48
  27. package/dist/virtual-routes/components/IconGithub.jsx +13 -12
  28. package/dist/virtual-routes/components/IconTwitter.jsx +11 -10
  29. package/dist/virtual-routes/components/Layout.jsx +2 -1
  30. package/dist/virtual-routes/routes/index.jsx +194 -105
  31. package/dist/virtual-routes/virtual-root.jsx +62 -8
  32. package/oclif.manifest.json +3 -3
  33. package/package.json +4 -4
package/dist/virtual-routes/components/IconError.jsx CHANGED
@@ -1,57 +1,60 @@
1
- const IconError = (props) => /* @__PURE__ */ React.createElement(
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ const IconError = (props) => /* @__PURE__ */ jsxs(
2
3
  "svg",
3
4
  {
4
5
  width: 32,
5
6
  height: 32,
6
7
  fill: "none",
7
8
  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
- )
9
+ ...props,
10
+ children: [
11
+ /* @__PURE__ */ jsx("path", { fill: "#000", d: "M6 18h20v2H6zM30 8h2v16h-2zM0 8h2v16H0z" }),
12
+ /* @__PURE__ */ jsx(
13
+ "path",
14
+ {
15
+ fill: "#F63310",
16
+ d: "M2 8h2v16H2zM4 6h2v4H4zM6 4h2v4H6zM8 2h2v4H8zM24 4h2v2h-2zM26 6h2v2h-2z"
17
+ }
18
+ ),
19
+ /* @__PURE__ */ jsx(
20
+ "path",
21
+ {
22
+ fill: "#74170B",
23
+ d: "M26 24h2v2h-2zM28 22h2v2h-2zM24 26h2v2h-2zM22 28h2v2h-2z"
24
+ }
25
+ ),
26
+ /* @__PURE__ */ jsx(
27
+ "path",
28
+ {
29
+ fill: "#971C06",
30
+ d: "M6 26h2v2H6zM4 24h2v2H4zM4 18h2v2H4zM26 18h2v2h-2zM26 12h2v2h-2z"
31
+ }
32
+ ),
33
+ /* @__PURE__ */ jsx(
34
+ "path",
35
+ {
36
+ fill: "#D62C0D",
37
+ d: "M26 8h2v4h-2zM4 10h2v2H4zM8 6h18v2H8zM10 4h14v2H10zM6 8h20v2H6z"
38
+ }
39
+ ),
40
+ /* @__PURE__ */ jsx("path", { fill: "#971C06", d: "M28 10h2v12h-2zM8 28h14v2H8z" }),
41
+ /* @__PURE__ */ jsx("path", { fill: "#D62C0D", d: "M26 20h2v2h-2zM4 20h2v2H4z" }),
42
+ /* @__PURE__ */ jsx("path", { fill: "#F63310", d: "M4 12h2v2H4z" }),
43
+ /* @__PURE__ */ jsx("path", { fill: "#971C06", d: "M6 20h20v2H6z" }),
44
+ /* @__PURE__ */ jsx("path", { fill: "#F63310", d: "M28 8h2v2h-2zM10 2h14v2H10zM6 10h20v2H6z" }),
45
+ /* @__PURE__ */ jsx("path", { fill: "#D62C0D", d: "M4 22h24v2H4zM6 24h20v2H6zM8 26h16v2H8z" }),
46
+ /* @__PURE__ */ jsx("path", { fill: "#000", d: "M6 12h20v2H6z" }),
47
+ /* @__PURE__ */ jsx("path", { fill: "#fff", d: "M6 14h20v2H6zM6 16h2v2H6z" }),
48
+ /* @__PURE__ */ jsx("path", { fill: "#ECEDEE", d: "M8 16h18v2H8z" }),
49
+ /* @__PURE__ */ jsx(
50
+ "path",
51
+ {
52
+ fill: "#000",
53
+ 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"
54
+ }
55
+ )
56
+ ]
57
+ }
55
58
  );
56
59
  export {
57
60
  IconError
package/dist/virtual-routes/components/IconGithub.jsx CHANGED
@@ -1,21 +1,22 @@
1
- const IconGithub = (props) => /* @__PURE__ */ React.createElement(
1
+ import { jsx } from "react/jsx-runtime";
2
+ const IconGithub = (props) => /* @__PURE__ */ jsx(
2
3
  "svg",
3
4
  {
4
5
  width: 20,
5
6
  height: 20,
6
7
  fill: "none",
7
8
  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
- )
9
+ ...props,
10
+ children: /* @__PURE__ */ jsx(
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
+ }
19
20
  );
20
21
  export {
21
22
  IconGithub
package/dist/virtual-routes/components/IconTwitter.jsx CHANGED
@@ -1,19 +1,20 @@
1
- const IconTwitter = (props) => /* @__PURE__ */ React.createElement(
1
+ import { jsx } from "react/jsx-runtime";
2
+ const IconTwitter = (props) => /* @__PURE__ */ jsx(
2
3
  "svg",
3
4
  {
4
5
  width: 23,
5
6
  height: 20,
6
7
  fill: "none",
7
8
  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
- )
9
+ ...props,
10
+ children: /* @__PURE__ */ jsx(
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
+ }
17
18
  );
18
19
  export {
19
20
  IconTwitter
package/dist/virtual-routes/components/Layout.jsx CHANGED
@@ -1,5 +1,6 @@
1
+ import { jsx } from "react/jsx-runtime";
1
2
  function Layout(props) {
2
- return /* @__PURE__ */ React.createElement("div", { className: "hydrogen-virtual-route" }, props.children);
3
+ return /* @__PURE__ */ jsx("div", { className: "hydrogen-virtual-route", children: props.children });
3
4
  }
4
5
  export {
5
6
  Layout
package/dist/virtual-routes/routes/index.jsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
1
2
  import { useLoaderData } from "@remix-run/react";
2
3
  import { HydrogenLogoBaseBW } from "../components/HydrogenLogoBaseBW.jsx";
3
4
  import { HydrogenLogoBaseColor } from "../components/HydrogenLogoBaseColor.jsx";
@@ -38,7 +39,7 @@ async function loader({
38
39
  }
39
40
  const HYDROGEN_SHOP_ID = "gid://shopify/Shop/55145660472";
40
41
  function ErrorBoundary() {
41
- return /* @__PURE__ */ React.createElement(ErrorPage, null);
42
+ return /* @__PURE__ */ jsx(ErrorPage, {});
42
43
  }
43
44
  function Index() {
44
45
  const {
@@ -49,126 +50,214 @@ function Index() {
49
50
  const configDone = shopId !== HYDROGEN_SHOP_ID && !isMockShop;
50
51
  if (isMockShop || !shopName)
51
52
  shopName = "Hydrogen";
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)));
53
+ return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Layout, { shopName, children: [
54
+ configDone ? /* @__PURE__ */ jsx(HydrogenLogoBaseColor, {}) : /* @__PURE__ */ jsx(HydrogenLogoBaseBW, {}),
55
+ /* @__PURE__ */ jsxs("h1", { children: [
56
+ "Hello, ",
57
+ shopName
58
+ ] }),
59
+ /* @__PURE__ */ jsx("p", { children: "Welcome to your new custom storefront" }),
60
+ /* @__PURE__ */ jsxs("section", { className: "Banner", children: [
61
+ /* @__PURE__ */ jsxs("div", { children: [
62
+ /* @__PURE__ */ jsx(IconBanner, {}),
63
+ /* @__PURE__ */ jsx("h2", { children: configDone ? "Create your first route" : "Configure storefront token" })
64
+ ] }),
65
+ configDone ? /* @__PURE__ */ jsxs("p", { children: [
66
+ "You\u2019re seeing this because you don\u2019t have a home route in your project yet. ",
67
+ /* @__PURE__ */ jsx("br", {}),
68
+ "Run ",
69
+ /* @__PURE__ */ jsx("code", { children: "h2 generate route home" }),
70
+ " to create your home route. Learn more about",
71
+ ` `,
72
+ /* @__PURE__ */ jsx(CreateRoutesLink, {})
73
+ ] }) : /* @__PURE__ */ jsxs("p", { children: [
74
+ "You\u2019re seeing this because you have not yet configured your storefront token. ",
75
+ /* @__PURE__ */ jsx("br", {}),
76
+ /* @__PURE__ */ jsx("br", {}),
77
+ " To link your store,",
78
+ ` `,
79
+ "run ",
80
+ /* @__PURE__ */ jsx("code", { children: "h2 link && h2 env pull" }),
81
+ ". Then, run",
82
+ " ",
83
+ /* @__PURE__ */ jsx("code", { children: "h2 generate route home" }),
84
+ " to create your first route.",
85
+ /* @__PURE__ */ jsx("br", {}),
86
+ "Learn more about",
87
+ ` `,
88
+ /* @__PURE__ */ jsx(
89
+ "a",
90
+ {
91
+ target: "_blank",
92
+ rel: "norefferer noopener",
93
+ href: "https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables",
94
+ children: "editing environment variables"
95
+ }
96
+ ),
97
+ ` `,
98
+ "and",
99
+ ` `,
100
+ /* @__PURE__ */ jsx(CreateRoutesLink, {}),
101
+ "."
102
+ ] })
103
+ ] }),
104
+ /* @__PURE__ */ jsx(ResourcesLinks, {})
105
+ ] }) });
61
106
  }
62
107
  function CreateRoutesLink() {
63
- return /* @__PURE__ */ React.createElement(
108
+ return /* @__PURE__ */ jsx(
64
109
  "a",
65
110
  {
66
111
  target: "_blank",
67
112
  rel: "norefferer noopener",
68
- href: "https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development#step-4-create-a-route"
69
- },
70
- "creating routes"
113
+ href: "https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development#step-4-create-a-route",
114
+ children: "creating routes"
115
+ }
71
116
  );
72
117
  }
73
118
  function ErrorPage() {
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)));
119
+ return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Layout, { shopName: "Hydrogen", children: [
120
+ /* @__PURE__ */ jsx(HydrogenLogoBaseBW, {}),
121
+ /* @__PURE__ */ jsx("h1", { children: "Hello, Hydrogen" }),
122
+ /* @__PURE__ */ jsx("p", { children: "Welcome to your new custom storefront" }),
123
+ /* @__PURE__ */ jsxs("section", { className: "Banner ErrorBanner", children: [
124
+ /* @__PURE__ */ jsxs("div", { children: [
125
+ /* @__PURE__ */ jsx(IconError, {}),
126
+ /* @__PURE__ */ jsx("h2", { children: "There\u2019s a problem with your storefront" })
127
+ ] }),
128
+ /* @__PURE__ */ jsxs("p", { children: [
129
+ "Check your domain and API token in your ",
130
+ /* @__PURE__ */ jsx("code", { children: ".env" }),
131
+ " file. Learn more about",
132
+ ` `,
133
+ /* @__PURE__ */ jsx(
134
+ "a",
135
+ {
136
+ target: "_blank",
137
+ rel: "norefferer noopener",
138
+ href: "https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables",
139
+ children: "editing environment variables"
140
+ }
141
+ ),
142
+ "."
143
+ ] })
144
+ ] }),
145
+ /* @__PURE__ */ jsx(ResourcesLinks, {})
146
+ ] }) });
83
147
  }
84
148
  function ResourcesLinks() {
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
- )))));
149
+ return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("section", { className: "Links", children: [
150
+ /* @__PURE__ */ jsx("h2", { children: "Start building" }),
151
+ /* @__PURE__ */ jsxs("ul", { children: [
152
+ /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
153
+ "a",
154
+ {
155
+ target: "_blank",
156
+ rel: "norefferer noopener",
157
+ href: "https://shopify.dev/custom-storefronts/hydrogen/building/collection-page",
158
+ children: "Collection template"
159
+ }
160
+ ) }),
161
+ /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
162
+ "a",
163
+ {
164
+ target: "_blank",
165
+ rel: "norefferer noopener",
166
+ href: "https://shopify.dev/custom-storefronts/hydrogen/building/product-details-page",
167
+ children: "Product template"
168
+ }
169
+ ) }),
170
+ /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
171
+ "a",
172
+ {
173
+ target: "_blank",
174
+ rel: "norefferer noopener",
175
+ href: "https://shopify.dev/custom-storefronts/hydrogen/building/cart",
176
+ children: "Cart"
177
+ }
178
+ ) })
179
+ ] }),
180
+ /* @__PURE__ */ jsx("h2", { children: "Resources" }),
181
+ /* @__PURE__ */ jsxs("ul", { children: [
182
+ /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
183
+ "a",
184
+ {
185
+ target: "_blank",
186
+ rel: "norefferer noopener",
187
+ href: "https://shopify.dev/custom-storefronts/hydrogen",
188
+ children: "Hydrogen docs"
189
+ }
190
+ ) }),
191
+ /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
192
+ "a",
193
+ {
194
+ target: "_blank",
195
+ rel: "norefferer noopener",
196
+ href: "https://shopify.dev/custom-storefronts/hydrogen/project-structure",
197
+ children: "Remix and project structure"
198
+ }
199
+ ) }),
200
+ /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
201
+ "a",
202
+ {
203
+ target: "_blank",
204
+ rel: "norefferer noopener",
205
+ href: "https://shopify.dev/custom-storefronts/hydrogen/data-fetching/fetch-data",
206
+ children: "Data queries and fetching"
207
+ }
208
+ ) })
209
+ ] })
210
+ ] }) });
134
211
  }
135
212
  function Layout({
136
213
  shopName,
137
214
  children
138
215
  }) {
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
- ))));
216
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
217
+ /* @__PURE__ */ jsxs("header", { children: [
218
+ /* @__PURE__ */ jsx("h1", { children: shopName?.toUpperCase() }),
219
+ /* @__PURE__ */ jsx("p", { children: "\xA0Dev Mode\xA0" }),
220
+ /* @__PURE__ */ jsxs("nav", { children: [
221
+ /* @__PURE__ */ jsx(
222
+ "a",
223
+ {
224
+ target: "_blank",
225
+ rel: "norefferer noopener",
226
+ href: "https://discord.com/invite/shopifydevs",
227
+ children: /* @__PURE__ */ jsx(IconDiscord, {})
228
+ }
229
+ ),
230
+ /* @__PURE__ */ jsx(
231
+ "a",
232
+ {
233
+ target: "_blank",
234
+ rel: "norefferer noopener",
235
+ href: "https://github.com/Shopify/hydrogen",
236
+ children: /* @__PURE__ */ jsx(IconGithub, {})
237
+ }
238
+ ),
239
+ /* @__PURE__ */ jsx(
240
+ "a",
241
+ {
242
+ target: "_blank",
243
+ rel: "norefferer noopener",
244
+ href: "https://twitter.com/shopifydevs?lang=en",
245
+ children: /* @__PURE__ */ jsx(IconTwitter, {})
246
+ }
247
+ )
248
+ ] })
249
+ ] }),
250
+ /* @__PURE__ */ jsx("main", { children }),
251
+ /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
252
+ "a",
253
+ {
254
+ href: "https://shopify.com",
255
+ target: "_blank",
256
+ rel: "noreferrer noopener",
257
+ children: "Powered by Shopify"
258
+ }
259
+ ) }) })
260
+ ] });
172
261
  }
173
262
  const LAYOUT_QUERY = `#graphql
174
263
  query layout {
package/dist/virtual-routes/virtual-root.jsx CHANGED
@@ -1,9 +1,12 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
1
2
  import {
2
3
  Links,
3
4
  Meta,
4
5
  Outlet,
5
6
  Scripts,
6
- ScrollRestoration
7
+ ScrollRestoration,
8
+ isRouteErrorResponse,
9
+ useRouteError
7
10
  } from "@remix-run/react";
8
11
  import styles from "./assets/styles.css";
9
12
  import favicon from "./assets/favicon.svg";
@@ -15,15 +18,66 @@ const links = () => {
15
18
  ];
16
19
  };
17
20
  function App() {
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)));
21
+ return /* @__PURE__ */ jsxs("html", { lang: "en", children: [
22
+ /* @__PURE__ */ jsxs("head", { children: [
23
+ /* @__PURE__ */ jsx("meta", { charSet: "utf-8" }),
24
+ /* @__PURE__ */ jsx("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }),
25
+ /* @__PURE__ */ jsx("title", { children: "Hydrogen" }),
26
+ /* @__PURE__ */ jsx(
27
+ "meta",
28
+ {
29
+ name: "description",
30
+ content: "A custom storefront powered by Hydrogen"
31
+ }
32
+ ),
33
+ /* @__PURE__ */ jsx(Meta, {}),
34
+ /* @__PURE__ */ jsx(Links, {})
35
+ ] }),
36
+ /* @__PURE__ */ jsxs("body", { children: [
37
+ /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Outlet, {}) }),
38
+ /* @__PURE__ */ jsx(ScrollRestoration, {}),
39
+ /* @__PURE__ */ jsx(Scripts, {})
40
+ ] })
41
+ ] });
42
+ }
43
+ function ErrorBoundary() {
44
+ const error = useRouteError();
45
+ let errorMessage = "Unknown error";
46
+ let errorStatus = 500;
47
+ if (isRouteErrorResponse(error)) {
48
+ errorMessage = error?.data?.message ?? error.data;
49
+ errorStatus = error.status;
50
+ } else if (error instanceof Error) {
51
+ errorMessage = error.message;
52
+ }
53
+ return /* @__PURE__ */ jsxs("html", { lang: "en", children: [
54
+ /* @__PURE__ */ jsxs("head", { children: [
55
+ /* @__PURE__ */ jsx("meta", { charSet: "utf-8" }),
56
+ /* @__PURE__ */ jsx("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }),
57
+ /* @__PURE__ */ jsx("title", { children: "Hydrogen" }),
58
+ /* @__PURE__ */ jsx(
59
+ "meta",
60
+ {
61
+ name: "description",
62
+ content: "A custom storefront powered by Hydrogen"
63
+ }
64
+ ),
65
+ /* @__PURE__ */ jsx(Meta, {}),
66
+ /* @__PURE__ */ jsx(Links, {})
67
+ ] }),
68
+ /* @__PURE__ */ jsxs("body", { children: [
69
+ /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsxs("div", { className: "route-error", children: [
70
+ /* @__PURE__ */ jsx("h1", { children: "Please report this error" }),
71
+ /* @__PURE__ */ jsx("h2", { children: errorStatus }),
72
+ errorMessage && /* @__PURE__ */ jsx("fieldset", { children: /* @__PURE__ */ jsx("pre", { children: errorMessage }) })
73
+ ] }) }),
74
+ /* @__PURE__ */ jsx(ScrollRestoration, {}),
75
+ /* @__PURE__ */ jsx(Scripts, {})
76
+ ] })
77
+ ] });
25
78
  }
26
79
  export {
80
+ ErrorBoundary,
27
81
  App as default,
28
82
  links
29
83
  };