@shopify/cli-hydrogen 4.0.0-alpha.9 → 4.0.1

package/dist/utils/virtual-routes.js

@@ -0,0 +1,47 @@
+import path from 'path';
+import recursiveReaddir from 'recursive-readdir';
+
+const VIRTUAL_ROUTES_DIR = "virtual-routes/routes";
+const VIRTUAL_ROOT = "virtual-routes/virtual-root";
+const INDEX_SUFFIX = "/index";
+async function addVirtualRoutes(config) {
+  const userRouteList = Object.values(config.routes);
+  const distPath = new URL("..", import.meta.url).pathname;
+  const virtualRoutesPath = path.join(distPath, VIRTUAL_ROUTES_DIR);
+  for (const absoluteFilePath of await recursiveReaddir(virtualRoutesPath)) {
+    const relativeFilePath = path.relative(virtualRoutesPath, absoluteFilePath);
+    const routePath = new URL(`file:///${relativeFilePath}`).pathname.replace(
+      /\.[jt]sx?$/,
+      ""
+    );
+    const isIndex = routePath.endsWith(INDEX_SUFFIX);
+    const normalizedVirtualRoutePath = isIndex ? routePath.slice(0, -INDEX_SUFFIX.length) || void 0 : routePath.slice(1).replace(/\$/g, ":").replace(/[\[\]]/g, "");
+    const hasUserRoute = userRouteList.some(
+      (r) => r.parentId === "root" && r.path === normalizedVirtualRoutePath
+    );
+    if (!hasUserRoute) {
+      const id = VIRTUAL_ROUTES_DIR + routePath;
+      config.routes[id] = {
+        id,
+        parentId: VIRTUAL_ROOT,
+        path: normalizedVirtualRoutePath,
+        index: isIndex || void 0,
+        caseSensitive: void 0,
+        file: path.relative(config.appDirectory, absoluteFilePath)
+      };
+      if (!config.routes[VIRTUAL_ROOT]) {
+        config.routes[VIRTUAL_ROOT] = {
+          id: VIRTUAL_ROOT,
+          path: "",
+          file: path.relative(
+            config.appDirectory,
+            path.join(distPath, VIRTUAL_ROOT + ".jsx")
+          )
+        };
+      }
+    }
+  }
+  return config;
+}
+
+export { VIRTUAL_ROOT, VIRTUAL_ROUTES_DIR, addVirtualRoutes };

package/dist/utils/virtual-routes.test.d.ts

@@ -0,0 +1 @@
+

package/dist/utils/virtual-routes.test.js

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { addVirtualRoutes, VIRTUAL_ROOT, VIRTUAL_ROUTES_DIR } from './virtual-routes.js';
+
+describe("virtual routes", () => {
+  it("adds virtual routes", async () => {
+    const config = {
+      appDirectory: new URL("../virtual-test", import.meta.url).pathname,
+      routes: {}
+    };
+    await addVirtualRoutes(config);
+    expect(config.routes[VIRTUAL_ROOT]).toMatchObject({
+      path: "",
+      id: VIRTUAL_ROOT,
+      file: "../virtual-routes/virtual-root.jsx"
+    });
+    expect(config.routes[VIRTUAL_ROUTES_DIR + "/index"]).toMatchObject({
+      parentId: VIRTUAL_ROOT,
+      file: "../" + VIRTUAL_ROUTES_DIR + "/index.tsx"
+    });
+    expect(config.routes[VIRTUAL_ROUTES_DIR + "/graphiql"]).toMatchObject({
+      parentId: VIRTUAL_ROOT,
+      file: "../" + VIRTUAL_ROUTES_DIR + "/graphiql.tsx"
+    });
+  });
+  it("skips existing routes", async () => {
+    const existingIndexRoute = {
+      id: "routes/index",
+      index: true,
+      parentId: "root",
+      path: void 0,
+      file: "user-app/routes/index.tsx"
+    };
+    const config = {
+      appDirectory: new URL("../virtual-test", import.meta.url).pathname,
+      routes: {
+        [existingIndexRoute.id]: existingIndexRoute
+      }
+    };
+    await addVirtualRoutes(config);
+    expect(config.routes[existingIndexRoute.id]).toMatchObject(
+      existingIndexRoute
+    );
+    expect(config.routes[VIRTUAL_ROUTES_DIR + "/index"]).toBeFalsy();
+    expect(Object.values(config.routes).length).toBeGreaterThan(2);
+  });
+});

package/dist/virtual-routes/assets/dummy.d.ts

@@ -0,0 +1 @@
+

package/dist/virtual-routes/assets/dummy.js

@@ -0,0 +1 @@
+

package/dist/virtual-routes/assets/dummy.ts

@@ -0,0 +1 @@
+// This file is an entry point for tsup to copy the assets.

package/dist/virtual-routes/assets/styles.css

@@ -0,0 +1,207 @@
+* {
+  box-sizing: border-box;
+}
+
+h1,
+h2,
+p {
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 3rem;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+h2 {
+  font-size: 1.2rem;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+p {
+  font-size: 1rem;
+  line-height: 1.4;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  background: #ffffff;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  display: flex;
+  flex-direction: row;
+  padding: 14px 20px;
+  width: 100%;
+  height: 48px;
+  background: #ffffff;
+  align-items: center;
+  color: #5c5f62;
+}
+
+header nav {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+  margin-left: auto;
+}
+
+header h1 {
+  font-size: 0.75rem;
+  margin-right: 20px;
+}
+
+header p {
+  font-size: 0.875rem;
+  border: 1.5px solid #d2d5d8;
+  border-radius: 4px;
+  padding: 1px;
+}
+
+main {
+  padding: 2rem;
+  max-width: 50rem;
+  margin: auto;
+}
+
+footer {
+  background: #f6f6f7;
+}
+
+footer div {
+  display: block;
+  max-width: 50rem;
+  padding: 2rem;
+  margin: auto;
+}
+
+footer a {
+  color: #5c5f62;
+  text-decoration: none;
+}
+
+main h1 {
+  color: #202223;
+}
+
+main a {
+  color: #475f91;
+  font-size: 16px;
+  position: relative;
+}
+
+main a::after {
+  content: url("data:image/svg+xml,%3Csvg width='18' height='24' viewBox='0 0 18 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.45312 19.3828H13.9297C15.5703 19.3828 16.3828 18.5703 16.3828 16.9609V7.42188C16.3828 5.8125 15.5703 5 13.9297 5H4.45312C2.82031 5 2 5.80469 2 7.42188V16.9609C2 18.5781 2.82031 19.3828 4.45312 19.3828ZM4.46875 18.125C3.6875 18.125 3.25781 17.7109 3.25781 16.8984V7.48438C3.25781 6.67188 3.6875 6.25781 4.46875 6.25781H13.9141C14.6875 6.25781 15.125 6.67188 15.125 7.48438V16.8984C15.125 17.7109 14.6875 18.125 13.9141 18.125H4.46875ZM11.6406 14.1172C11.9844 14.1172 12.2188 13.8516 12.2188 13.4922V9.80469C12.2188 9.34375 11.9609 9.16406 11.5625 9.16406H7.85938C7.49219 9.16406 7.25781 9.39062 7.25781 9.73438C7.25781 10.0781 7.5 10.3047 7.875 10.3047H9.29688L10.4531 10.1797L9.23438 11.3125L6.35156 14.1953C6.24219 14.3047 6.17188 14.4609 6.17188 14.6172C6.17188 14.9688 6.39844 15.1953 6.74219 15.1953C6.92969 15.1953 7.07812 15.125 7.1875 15.0156L10.0625 12.1406L11.1875 10.9375L11.0703 12.1562V13.5078C11.0703 13.875 11.2969 14.1172 11.6406 14.1172Z' fill='%23475F91'/%3E%3C/svg%3E%0A");
+  vertical-align: middle;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.Links ul {
+  margin: 0;
+  padding: 0 0.5rem;
+  list-style: none;
+}
+
+.Links li {
+  margin-bottom: 1rem;
+}
+
+.Links li::before {
+  content: '\25fc';
+  color: #5c5f62;
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.2rem;
+  font-size: 0.8rem;
+}
+
+.Links h2 {
+  margin-bottom: 0.5rem;
+  font-size: 1.5rem;
+  color: #44474a;
+}
+
+.Banner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 16px;
+  gap: 8px;
+  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  font-style: normal;
+  font-size: 16px;
+  line-height: 24px;
+  color: #5c5f62;
+  border: 1px solid #d2d5d8;
+  background: #fafbfb;
+}
+
+.Banner div {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+}
+
+.Banner p {
+  padding-left: 48px;
+}
+
+.Banner code {
+  background: #f6f6f7;
+  border: 1px solid #d2d5d8;
+  font-family: monospace;
+  border-radius: 4px;
+  padding: 2px;
+}
+
+.Banner > h2 {
+  font-size: 1rem;
+}
+
+.Banner.ErrorBanner {
+  color: #981c06;
+  border: 1px solid #fda9a5;
+  background: #fee9e8;
+}
+
+.Banner.ErrorBanner span {
+  background: #fef4f4;
+  border: 1px solid #fda9a5;
+  border-radius: 4px;
+  padding: 2px;
+  color: #74180c;
+}
+
+.Banner.ErrorBanner a {
+  color: #b92409;
+}
+
+.Banner.ErrorBanner a::after {
+  content: url("data:image/svg+xml,%3Csvg width='18' height='24' viewBox='0 0 18 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.45312 19.3828H13.9297C15.5703 19.3828 16.3828 18.5703 16.3828 16.9609V7.42188C16.3828 5.8125 15.5703 5 13.9297 5H4.45312C2.82031 5 2 5.80469 2 7.42188V16.9609C2 18.5781 2.82031 19.3828 4.45312 19.3828ZM4.46875 18.125C3.6875 18.125 3.25781 17.7109 3.25781 16.8984V7.48438C3.25781 6.67188 3.6875 6.25781 4.46875 6.25781H13.9141C14.6875 6.25781 15.125 6.67188 15.125 7.48438V16.8984C15.125 17.7109 14.6875 18.125 13.9141 18.125H4.46875ZM11.6406 14.1172C11.9844 14.1172 12.2188 13.8516 12.2188 13.4922V9.80469C12.2188 9.34375 11.9609 9.16406 11.5625 9.16406H7.85938C7.49219 9.16406 7.25781 9.39062 7.25781 9.73438C7.25781 10.0781 7.5 10.3047 7.875 10.3047H9.29688L10.4531 10.1797L9.23438 11.3125L6.35156 14.1953C6.24219 14.3047 6.17188 14.4609 6.17188 14.6172C6.17188 14.9688 6.39844 15.1953 6.74219 15.1953C6.92969 15.1953 7.07812 15.125 7.1875 15.0156L10.0625 12.1406L11.1875 10.9375L11.0703 12.1562V13.5078C11.0703 13.875 11.2969 14.1172 11.6406 14.1172Z' fill='%23B92409'/%3E%3C/svg%3E%0A");
+  vertical-align: middle;
+  color: red;
+}
+
+.Banner.ErrorBanner > h2 {
+  font-size: 1rem;
+  color: #74180c;
+}

package/dist/virtual-routes/components/HydrogenLogoBaseBW.jsx

@@ -0,0 +1,7 @@
+const HydrogenLogoBaseBW = (props) => <svg width={81} height={82} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <path d="M39.955 81.28 2.138 61.19l12.933-6.818 14.562 7.733 12.218-6.441L27.29 47.93l12.933-6.833L78.04 61.189l-12.934 6.817L51.35 60.7l-12.236 6.457 13.774 7.308-12.933 6.817Z" fill="#000" />
+  <path fillRule="evenodd" clipRule="evenodd" d="m40.225 0 39.953 21.227-15.073 7.945-13.756-7.308-10.096 5.328 13.775 7.309-15.075 7.945L0 21.22l15.073-7.945 14.562 7.732 10.078-5.313-14.56-7.731L40.225 0ZM29.426 7.967l14.564 7.734L29.63 23.27 15.07 15.537l-10.794 5.69 35.68 18.956 10.793-5.688-13.773-7.307L51.352 19.6l13.757 7.308 10.794-5.69-35.68-18.956-10.797 5.704Z" fill="#000" />
+</svg>;
+export {
+  HydrogenLogoBaseBW
+};

package/dist/virtual-routes/components/HydrogenLogoBaseColor.jsx

@@ -0,0 +1,13 @@
+const HydrogenLogoBaseColor = (props) => <svg width={76} height={81} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <path d="M37.817 80.149 0 60.057l12.934-6.817 14.561 7.733 12.218-6.441-14.561-7.733 12.933-6.833 37.818 20.091-12.934 6.817-13.757-7.307-12.236 6.457 13.775 7.308-12.934 6.817Z" fill="#000" />
+  <path d="M37.818 40.183 0 20.092l12.934-6.818 14.562 7.733 12.218-6.441-14.562-7.733L38.086 0l37.817 20.091-12.934 6.817-13.756-7.307-12.236 6.457 13.774 7.308-12.933 6.817Z" fill="url(#a)" />
+  <defs><linearGradient id="a" x1={74.48} y1={21.654} x2={18.735} y2={51.694} gradientUnits="userSpaceOnUse">
+    <stop offset={2e-3} stopColor="#430470" />
+    <stop offset={0.385} stopColor="#8E01F0" />
+    <stop offset={0.635} stopColor="#354CF6" />
+    <stop offset={1} stopColor="#01FFFF" />
+  </linearGradient></defs>
+</svg>;
+export {
+  HydrogenLogoBaseColor
+};

package/dist/virtual-routes/components/IconBanner.jsx

@@ -0,0 +1,47 @@
+const IconBanner = (props) => <svg width={32} height={36} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <path fill="#000" d="M0 9.726h1.455v1.455H0z" />
+  <path fill="#E172AC" d="M1.454 9.726h1.455v1.455H1.454zM13.091 3.907h1.455v1.455h-1.455zM24.727 9.726h1.455v1.455h-1.455zM24.727 24.271h1.455v1.455h-1.455zM13.091 30.09h1.455v1.455h-1.455zM1.454 24.271h1.455v1.455H1.454z" />
+  <path fill="#AC217D" d="M5.818 9.726h1.455v1.455H5.818zM17.454 3.907h1.455v1.455h-1.455zM29.091 9.726h1.455v1.455h-1.455zM21.818 16.998h1.455v1.455h-1.455zM21.818 18.454h1.455v1.455h-1.455zM20.363 24.271h1.455v1.455h-1.455zM20.363 11.181h1.455v1.455h-1.455zM29.091 24.271h1.455v1.455h-1.455zM17.455 30.09h1.455v1.455h-1.455zM5.818 24.271h1.455v1.455H5.818z" />
+  <path fill="#000" d="M7.273 9.726h1.455v1.455H7.273zM1.454 8.271h1.455v1.455H1.454zM5.818 8.271h1.455v1.455H5.818zM2.909 6.817h1.455v1.455H2.909z" />
+  <path fill="#D43694" d="M2.909 9.726h1.455v1.455H2.909zM14.546 3.907h1.455v1.455h-1.455zM26.182 9.726h1.455v1.455h-1.455zM18.909 11.181h1.455v1.455h-1.455z" />
+  <path fill="#D43694" d="M20.363 12.635h1.455v1.455h-1.455zM20.363 14.09h1.455v1.455h-1.455z" />
+  <path fill="#D43694" d="M20.363 15.544h1.455v1.455h-1.455zM11.636 11.181h1.455v1.455h-1.455z" />
+  <path fill="#D43694" d="M10.182 12.635h1.455v1.455h-1.455zM10.182 14.09h1.455v1.455h-1.455z" />
+  <path fill="#D43694" d="M10.182 15.544h1.455v1.455h-1.455zM10.182 19.908h1.455v1.455h-1.455z" />
+  <path fill="#D43694" d="M10.182 21.362h1.455v1.455h-1.455zM10.182 22.817h1.455v1.455h-1.455z" />
+  <path fill="#D43694" d="M11.636 24.271h1.455v1.455h-1.455zM20.363 19.908h1.455v1.455h-1.455z" />
+  <path fill="#D43694" d="M20.363 21.362h1.455v1.455h-1.455zM20.363 22.817h1.455v1.455h-1.455z" />
+  <path fill="#D43694" d="M18.909 24.271h1.455v1.455h-1.455zM26.182 24.271h1.455v1.455h-1.455zM14.545 30.09H16v1.455h-1.455zM2.909 24.271h1.455v1.455H2.909zM2.909 11.181h1.455v1.455H2.909zM14.546 5.361h1.455v1.455h-1.455zM26.182 11.181h1.455v1.455h-1.455zM26.182 25.726h1.455v1.455h-1.455z" />
+  <path fill="#D43694" d="M14.546 31.544h1.455v1.455h-1.455zM2.909 25.726h1.455v1.455H2.909z" />
+  <path fill="#000" d="M4.364 6.817h1.455v1.455H4.364z" />
+  <path fill="#D43694" d="M4.364 9.726h1.455v1.455H4.364zM16 3.907h1.455v1.455H16zM27.637 9.726h1.455v1.455h-1.455zM27.637 24.271h1.455v1.455h-1.455zM16 30.09h1.455v1.455H16zM4.364 24.271h1.455v1.455H4.364z" />
+  <path fill="#D43694" d="M4.364 11.181h1.455v1.455H4.364zM16 5.361h1.455v1.455H16zM27.637 11.181h1.455v1.455h-1.455zM27.637 25.726h1.455v1.455h-1.455zM16 31.544h1.455v1.455H16zM4.364 25.726h1.455v1.455H4.364z" />
+  <path fill="#E172AC" d="M2.909 8.271h1.455v1.455H2.909zM14.545 2.453H16v1.455h-1.455zM26.182 8.271h1.455v1.455h-1.455zM26.182 22.817h1.455v1.455h-1.455zM14.546 28.635h1.455v1.455h-1.455zM2.909 22.817h1.455v1.455H2.909z" />
+  <path fill="#AC217D" d="M2.909 12.635h1.455v1.455H2.909zM14.545 6.817H16v1.455h-1.455zM26.182 12.635h1.455v1.455h-1.455zM26.182 27.181h1.455v1.455h-1.455zM14.546 32.998h1.455v1.455h-1.455zM2.909 27.181h1.455v1.455H2.909z" />
+  <path fill="#E172AC" d="M4.364 8.271h1.455v1.455H4.364zM16 2.453h1.455v1.455H16zM27.637 8.271h1.455v1.455h-1.455zM27.637 22.817h1.455v1.455h-1.455zM16 28.635h1.455v1.455H16zM4.364 22.817h1.455v1.455H4.364z" />
+  <path fill="#AC217D" d="M4.364 12.635h1.455v1.455H4.364zM16 6.817h1.455v1.455H16zM27.637 12.635h1.455v1.455h-1.455zM27.637 27.181h1.455v1.455h-1.455zM16 32.998h1.455v1.455H16zM4.364 27.181h1.455v1.455H4.364z" />
+  <path fill="#000" d="M2.909 14.09h1.455v1.455H2.909zM4.364 14.09h1.455v1.455H4.364zM0 11.181h1.455v1.455H0z" />
+  <path fill="#000" d="M1.454 12.635h1.455v1.455H1.454z" />
+  <path fill="#E172AC" d="M1.454 11.181h1.455v1.455H1.454zM8.727 16.998h1.455v1.455H8.727zM10.182 11.181h1.455v1.455h-1.455zM10.182 24.271h1.455v1.455h-1.455zM8.727 18.454h1.455v1.455H8.727zM13.091 5.361h1.455v1.455h-1.455zM24.727 11.181h1.455v1.455h-1.455zM24.727 25.726h1.455v1.455h-1.455zM13.091 31.544h1.455v1.455h-1.455zM1.454 25.726h1.455v1.455H1.454z" />
+  <path fill="#AC217D" d="M5.818 11.181h1.455v1.455H5.818zM17.454 5.361h1.455v1.455h-1.455zM29.091 11.181h1.455v1.455h-1.455zM29.091 25.726h1.455v1.455h-1.455zM17.454 31.544h1.455v1.455h-1.455zM5.818 25.726h1.455v1.455H5.818z" />
+  <path fill="#000" d="M5.818 12.635h1.455v1.455H5.818zM7.273 11.181h1.455v1.455H7.273zM0 24.271h1.455v1.455H0zM23.273 9.726h1.455v1.455h-1.455zM7.273 24.271h1.455v1.455H7.273zM30.546 9.726h1.455v1.455h-1.455zM1.455 22.817H2.91v1.455H1.455zM24.727 8.271h1.455v1.455h-1.455zM5.818 22.817h1.455v1.455H5.818zM29.091 8.271h1.455v1.455h-1.455zM2.909 21.362h1.455v1.455H2.909z" />
+  <path fill="#000" d="M26.182 6.817h1.455v1.455h-1.455zM4.364 21.362h1.455v1.455H4.364zM27.637 6.817h1.455v1.455h-1.455zM2.909 28.635h1.455v1.455H2.909zM26.182 14.09h1.455v1.455h-1.455zM4.364 28.635h1.455v1.455H4.364zM27.637 14.09h1.455v1.455h-1.455zM1.454 27.181h1.455v1.455H1.454zM24.727 12.635h1.455v1.455h-1.455zM0 25.726h1.455v1.455H0z" />
+  <path fill="#000" d="M23.273 11.181h1.455v1.455h-1.455zM5.818 27.181h1.455v1.455H5.818zM29.091 12.635h1.455v1.455h-1.455zM7.273 25.726h1.455v1.455H7.273zM30.546 11.181h1.455v1.455h-1.455zM23.273 24.271h1.455v1.455h-1.455zM11.636 30.09h1.455v1.455h-1.455zM11.636 3.907h1.455v1.455h-1.455zM18.909 30.09h1.455v1.455h-1.455zM30.546 24.271h1.455v1.455h-1.455zM13.091 28.635h1.455v1.455h-1.455zM18.909 3.907h1.455v1.455h-1.455zM17.454 28.635h1.455v1.455h-1.455z" />
+  <path fill="#000" d="M24.727 22.817h1.455v1.455h-1.455zM14.546 27.181h1.455v1.455h-1.455zM13.091 2.453h1.455v1.455h-1.455z" />
+  <path fill="#000" d="M16 27.181h1.455v1.455H16zM29.091 22.817h1.455v1.455h-1.455zM14.545 34.454H16v1.455h-1.455zM17.455 2.453h1.455v1.455h-1.455zM16 34.454h1.455v1.455H16zM26.182 21.362h1.455v1.455h-1.455zM13.091 32.998h1.455v1.455h-1.455zM14.546.998h1.455v1.455h-1.455zM11.636 31.544h1.455v1.455h-1.455zM27.637 21.362h1.455v1.455h-1.455zM17.454 32.998h1.455v1.455h-1.455z" />
+  <path fill="#000" d="M16 .998h1.455v1.455H16zM18.909 31.544h1.455v1.455h-1.455zM26.182 28.635h1.455v1.455h-1.455zM14.546 8.271h1.455v1.455h-1.455zM27.637 28.635h1.455v1.455h-1.455z" />
+  <path fill="#000" d="M16 8.271h1.455v1.455H16zM24.727 27.181h1.455v1.455h-1.455zM13.091 6.817h1.455v1.455h-1.455zM23.273 25.726h1.455v1.455h-1.455zM11.636 5.361h1.455v1.455h-1.455zM29.091 27.181h1.455v1.455h-1.455zM17.455 6.817h1.455v1.455h-1.455zM30.546 25.726h1.455v1.455h-1.455zM18.909 5.361h1.455v1.455h-1.455zM8.727 11.181h1.455v1.455H8.727z" />
+  <path fill="#000" d="M8.727 12.635h1.455v1.455H8.727zM8.727 19.908h1.455v1.455H8.727zM21.818 19.908h1.455v1.455h-1.455zM21.818 11.181h1.455v1.455h-1.455z" />
+  <path fill="#000" d="M8.727 21.362h1.455v1.455H8.727zM21.818 21.362h1.455v1.455h-1.455zM8.727 14.09h1.455v1.455H8.727zM21.818 12.635h1.455v1.455h-1.455zM8.727 22.817h1.455v1.455H8.727z" />
+  <path fill="#000" d="M8.727 24.271h1.455v1.455H8.727zM7.273 16.998h1.455v1.455H7.273zM21.818 22.817h1.455v1.455h-1.455zM23.273 16.998h1.455v1.455h-1.455z" />
+  <path fill="#000" d="M21.818 24.271h1.455v1.455h-1.455zM8.727 15.544h1.455v1.455H8.727zM21.818 14.09h1.455v1.455h-1.455zM7.273 18.454h1.455v1.455H7.273z" />
+  <path fill="#000" d="M21.818 15.544h1.455v1.455h-1.455zM23.273 18.454h1.455v1.455h-1.455zM11.636 12.635h1.455v1.455h-1.455zM11.636 19.908h1.455v1.455h-1.455zM18.909 19.908h1.455v1.455h-1.455zM18.909 12.635h1.455v1.455h-1.455zM11.636 14.09h1.455v1.455h-1.455z" />
+  <path fill="#000" d="M11.636 21.362h1.455v1.455h-1.455zM18.909 21.362h1.455v1.455h-1.455zM18.909 14.09h1.455v1.455h-1.455zM10.182 16.998h1.455v1.455h-1.455zM20.363 16.998h1.455v1.455h-1.455z" />
+  <path fill="#000" d="M11.636 15.544h1.455v1.455h-1.455zM11.636 22.817h1.455v1.455h-1.455zM18.909 22.817h1.455v1.455h-1.455zM18.909 15.544h1.455v1.455h-1.455zM13.091 24.271h1.455v1.455h-1.455zM17.454 24.271h1.455v1.455h-1.455zM13.091 25.726h1.455v1.455h-1.455zM17.454 25.726h1.455v1.455h-1.455zM11.636 25.726h1.455v1.455h-1.455zM20.363 25.726h1.455v1.455h-1.455z" />
+  <path fill="#000" d="M10.182 25.726h1.455v1.455h-1.455zM18.909 25.726h1.455v1.455h-1.455zM10.182 18.454h1.455v1.455h-1.455zM20.363 18.454h1.455v1.455h-1.455zM10.182 9.726h1.455v1.455h-1.455zM18.909 9.726h1.455v1.455h-1.455z" />
+  <path fill="#000" d="M11.636 9.726h1.455v1.455h-1.455zM20.363 9.726h1.455v1.455h-1.455zM13.091 9.726h1.455v1.455h-1.455zM17.454 9.726h1.455v1.455h-1.455z" />
+  <path fill="#000" d="M13.091 11.181h1.455v1.455h-1.455zM17.454 11.181h1.455v1.455h-1.455z" />
+</svg>;
+export {
+  IconBanner
+};

package/dist/virtual-routes/components/IconDiscord.jsx

@@ -0,0 +1,4 @@
+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>;
+export {
+  IconDiscord
+};

package/dist/virtual-routes/components/IconError.jsx

@@ -0,0 +1,20 @@
+const IconError = (props) => <svg width={32} height={32} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <path fill="#000" d="M6 18h20v2H6zM30 8h2v16h-2zM0 8h2v16H0z" />
+  <path fill="#F63310" d="M2 8h2v16H2zM4 6h2v4H4zM6 4h2v4H6zM8 2h2v4H8zM24 4h2v2h-2zM26 6h2v2h-2z" />
+  <path fill="#74170B" d="M26 24h2v2h-2zM28 22h2v2h-2zM24 26h2v2h-2zM22 28h2v2h-2z" />
+  <path fill="#971C06" d="M6 26h2v2H6zM4 24h2v2H4zM4 18h2v2H4zM26 18h2v2h-2zM26 12h2v2h-2z" />
+  <path fill="#D62C0D" d="M26 8h2v4h-2zM4 10h2v2H4zM8 6h18v2H8zM10 4h14v2H10zM6 8h20v2H6z" />
+  <path fill="#971C06" d="M28 10h2v12h-2zM8 28h14v2H8z" />
+  <path fill="#D62C0D" d="M26 20h2v2h-2zM4 20h2v2H4z" />
+  <path fill="#F63310" d="M4 12h2v2H4z" />
+  <path fill="#971C06" d="M6 20h20v2H6z" />
+  <path fill="#F63310" d="M28 8h2v2h-2zM10 2h14v2H10zM6 10h20v2H6z" />
+  <path fill="#D62C0D" d="M4 22h24v2H4zM6 24h20v2H6zM8 26h16v2H8z" />
+  <path fill="#000" d="M6 12h20v2H6z" />
+  <path fill="#fff" d="M6 14h20v2H6zM6 16h2v2H6z" />
+  <path fill="#ECEDEE" d="M8 16h18v2H8z" />
+  <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" />
+</svg>;
+export {
+  IconError
+};

package/dist/virtual-routes/components/IconGithub.jsx

@@ -0,0 +1,4 @@
+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>;
+export {
+  IconGithub
+};

package/dist/virtual-routes/components/IconTwitter.jsx

@@ -0,0 +1,4 @@
+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>;
+export {
+  IconTwitter
+};

package/dist/virtual-routes/components/Layout.jsx

@@ -0,0 +1,6 @@
+function Layout(props) {
+  return <div className="hydrogen-virtual-route">{props.children}</div>;
+}
+export {
+  Layout
+};

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

@@ -0,0 +1,5 @@
+import { graphiqlLoader } from "@shopify/hydrogen";
+const loader = graphiqlLoader;
+export {
+  loader
+};

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

@@ -0,0 +1,140 @@
+import { useLoaderData } from "@remix-run/react";
+import { HydrogenLogoBaseBW } from "../components/HydrogenLogoBaseBW.jsx";
+import { HydrogenLogoBaseColor } from "../components/HydrogenLogoBaseColor.jsx";
+import { IconDiscord } from "../components/IconDiscord.jsx";
+import { IconGithub } from "../components/IconGithub.jsx";
+import { IconTwitter } from "../components/IconTwitter.jsx";
+import { IconBanner } from "../components/IconBanner.jsx";
+import { IconError } from "../components/IconError.jsx";
+import favicon from "../assets/favicon.svg";
+const meta = () => {
+  return {
+    title: "Hydrogen",
+    description: "A custom storefront powered by Hydrogen",
+    charset: "utf-8",
+    viewport: "width=device-width,initial-scale=1"
+  };
+};
+const links = () => [
+  {
+    rel: "icon",
+    type: "image/svg+xml",
+    href: favicon
+  }
+];
+async function loader({ context }) {
+  const layout = await context.storefront.query(LAYOUT_QUERY);
+  return { layout };
+}
+const HYDROGEN_SHOP_ID = "gid://shopify/Shop/55145660472";
+function CatchBoundary() {
+  return <ErrorPage />;
+}
+function ErrorBoundary() {
+  return <ErrorPage />;
+}
+function Index() {
+  const data = useLoaderData();
+  const { name: shopName, id: shopId } = data.layout.shop;
+  const configDone = shopId !== HYDROGEN_SHOP_ID;
+  return <><Layout shopName={shopName}>
+    {configDone ? <HydrogenLogoBaseColor /> : <HydrogenLogoBaseBW />}
+    <h1>
+      {"Hello, "}
+      {shopName || "Hydrogen"}
+    </h1>
+    <p>Welcome to your new custom storefront</p>
+    <section className="Banner">
+      <div>
+        <IconBanner />
+        <h2>Configure storefront token</h2>
+      </div>
+      <p>
+        {"You\u2019re seeing this because you have not yet configured your storefront token. To get started, edit "}
+        {` `}
+        <code>.env</code>
+        {". Then, create your first route with the file "}
+        {` `}
+        <code>/app/routes/index.jsx</code>
+        {". Learn more about"}
+        {` `}
+        <a href="https://shopify.dev/custom-storefronts/hydrogen/getting-started/quickstart">{"connecting a\xA0storefront"}</a>
+        {"."}
+      </p>
+    </section>
+    <ResourcesLinks />
+  </Layout></>;
+}
+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. Read the documentation on"}
+        {` `}
+        <a target="_blank" rel="norefferer noopener" href="https://shopify.dev/custom-storefronts/hydrogen/getting-started/quickstart">{"how to configure your\xA0storefront"}</a>
+        {"."}
+      </p>
+    </section>
+    <ResourcesLinks />
+  </Layout></>;
+}
+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></>;
+}
+function Layout({
+  shopName,
+  children
+}) {
+  return <>
+    <header>
+      <h1>{shopName?.toUpperCase()}</h1>
+      <p>{"\xA0Dev Mode\xA0"}</p>
+      <nav>
+        <a href="https://discord.com/invite/shopifydevs"><IconDiscord /></a>
+        <a href="https://github.com/Shopify/hydrogen"><IconGithub /></a>
+        <a 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>
+  </>;
+}
+const LAYOUT_QUERY = `#graphql
+  query layout {
+    shop {
+      name
+      id
+    }
+  }
+`;
+export {
+  CatchBoundary,
+  ErrorBoundary,
+  HYDROGEN_SHOP_ID,
+  Index as default,
+  links,
+  loader,
+  meta
+};

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

@@ -0,0 +1,38 @@
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration
+} from "@remix-run/react";
+import styles from "./assets/styles.css";
+import favicon from "./assets/favicon.svg";
+import { Layout } from "./components/Layout.jsx";
+const links = () => {
+  return [
+    { rel: "stylesheet", href: styles },
+    { rel: "icon", type: "image/svg+xml", href: favicon }
+  ];
+};
+const meta = () => ({
+  charset: "utf-8",
+  viewport: "width=device-width,initial-scale=1"
+});
+function App() {
+  return <html lang="en">
+    <head>
+      <Meta />
+      <Links />
+    </head>
+    <body>
+      <Layout><Outlet /></Layout>
+      <ScrollRestoration />
+      <Scripts />
+    </body>
+  </html>;
+}
+export {
+  App as default,
+  links,
+  meta
+};