@shopify/cli-hydrogen 4.0.4 → 4.0.6

package/dist/commands/hydrogen/init.d.ts

@@ -4,10 +4,11 @@ import Command from '@shopify/cli-kit/node/base-command';
 declare class Init extends Command {
     static description: string;
     static flags: {
-        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
         force: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
-        language: _oclif_core_lib_interfaces_parser_js.OptionFlag<string>;
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        language: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
         template: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        'install-deps': _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
     };
     run(): Promise<void>;
 }
@@ -17,6 +18,7 @@ declare function runInit(options?: {
     language?: string;
     token?: string;
     force?: boolean;
+    installDeps?: boolean;
 }): Promise<void>;
 
 export { Init as default, runInit };

package/dist/commands/hydrogen/init.js

@@ -3,25 +3,35 @@ import { packageManagerUsedForCreating, installNodeModules } from '@shopify/cli-
 import { renderFatalError } from '@shopify/cli-kit/node/ui';
 import Flags from '@oclif/core/lib/flags.js';
 import { output, path } from '@shopify/cli-kit';
-import { commonFlags } from '../../utils/flags.js';
+import { commonFlags, parseProcessFlags } from '../../utils/flags.js';
 import { transpileProject } from '../../utils/transpile-ts.js';
 import { getLatestTemplates } from '../../utils/template-downloader.js';
 import { readdir } from 'fs/promises';
 
+const STARTER_TEMPLATES = ["hello-world", "demo-store"];
+const FLAG_MAP = { f: "force" };
 class Init extends Command {
   static description = "Creates a new Hydrogen storefront.";
   static flags = {
-    path: commonFlags.path,
     force: commonFlags.force,
+    path: Flags.string({
+      description: "The path to the directory of the new Hydrogen storefront.",
+      env: "SHOPIFY_HYDROGEN_FLAG_PATH"
+    }),
     language: Flags.string({
       description: "Sets the template language to use. One of `js` or `ts`.",
       choices: ["js", "ts"],
-      default: "js",
       env: "SHOPIFY_HYDROGEN_FLAG_LANGUAGE"
     }),
     template: Flags.string({
       description: "Sets the template to use. One of `demo-store` or `hello-world`.",
+      choices: STARTER_TEMPLATES,
       env: "SHOPIFY_HYDROGEN_FLAG_TEMPLATE"
+    }),
+    "install-deps": Flags.boolean({
+      description: "Auto install dependencies using the active package manager",
+      env: "SHOPIFY_HYDROGEN_INSTALL_DEPS",
+      allowNo: true
     })
   };
   async run() {
@@ -29,7 +39,7 @@ class Init extends Command {
     await runInit({ ...flags });
   }
 }
-async function runInit(options = getProcessFlags()) {
+async function runInit(options = parseProcessFlags(process.argv, FLAG_MAP)) {
   supressNodeExperimentalWarnings();
   const templatesPromise = getLatestTemplates().catch((error) => {
     output.info("\n\n\n");
@@ -44,7 +54,7 @@ async function runInit(options = getProcessFlags()) {
       type: "select",
       name: "template",
       message: "Choose a template",
-      choices: ["hello-world", "demo-store"].map((value) => ({
+      choices: STARTER_TEMPLATES.map((value) => ({
         name: value.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()),
         value
       }))
@@ -119,7 +129,7 @@ async function runInit(options = getProcessFlags()) {
   let depsInstalled = false;
   let packageManager = await packageManagerUsedForCreating();
   if (packageManager !== "unknown") {
-    const { installDeps } = await ui.prompt([
+    const installDeps = options.installDeps ?? (await ui.prompt([
       {
         type: "select",
         name: "installDeps",
@@ -130,8 +140,8 @@ async function runInit(options = getProcessFlags()) {
         ],
         default: "true"
       }
-    ]);
-    if (installDeps === "true") {
+    ])).installDeps === "true";
+    if (installDeps) {
       await installNodeModules({
         directory: projectDir,
         packageManager,
@@ -162,15 +172,6 @@ async function projectExists(projectDir) {
   const { file } = await import('@shopify/cli-kit');
   return await file.exists(projectDir) && await file.isDirectory(projectDir) && (await readdir(projectDir)).length > 0;
 }
-function getProcessFlags() {
-  const flagMap = { f: "force" };
-  const [, , ...flags] = process.argv;
-  return flags.reduce((acc, flag) => {
-    const [key, value = true] = flag.replace(/^\-+/, "").split("=");
-    const mappedKey = flagMap[key] || key;
-    return { ...acc, [mappedKey]: value };
-  }, {});
-}
 function supressNodeExperimentalWarnings() {
   const warningListener = process.listeners("warning")[0];
   if (warningListener) {

package/dist/generator-templates/routes/[sitemap.xml].tsx

@@ -1,10 +1,10 @@
-import {flattenConnection} from '@shopify/hydrogen-react';
+import {flattenConnection} from '@shopify/hydrogen';
 import type {LoaderArgs} from '@shopify/remix-oxygen';
 import {
   CollectionConnection,
   PageConnection,
   ProductConnection,
-} from '@shopify/hydrogen-react/storefront-api-types';
+} from '@shopify/hydrogen/storefront-api-types';
 
 const MAX_URLS = 250; // the google limit is 50K, however, SF API only allow querying for 250 resources each time
 

package/dist/generator-templates/routes/cart.tsx

@@ -1,7 +1,7 @@
 import {Await, useMatches} from '@remix-run/react';
 import {Suspense} from 'react';
-import {flattenConnection} from '@shopify/hydrogen-react';
-import type {CartLine} from '@shopify/hydrogen-react/storefront-api-types';
+import {flattenConnection} from '@shopify/hydrogen';
+import type {Cart as CartType} from '@shopify/hydrogen/storefront-api-types';
 
 export async function action() {
   // @TODO implement cart action
@@ -11,7 +11,7 @@ export default function CartRoute() {
   const [root] = useMatches();
   return (
     <Suspense fallback="loading">
-      <Await resolve={root.data?.cart}>
+      <Await resolve={root.data?.cart as CartType}>
         {(cart) => {
           const linesCount = Boolean(cart?.lines?.edges?.length || 0);
           if (!linesCount) {
@@ -20,9 +20,7 @@ export default function CartRoute() {
             );
           }
 
-          const cartLines = cart?.lines
-            ? flattenConnection<CartLine>(cart?.lines)
-            : [];
+          const cartLines = cart?.lines ? flattenConnection(cart?.lines) : [];
 
           return (
             <>

package/dist/generator-templates/routes/collections/$collectionHandle.tsx

@@ -1,6 +1,6 @@
 import {json, type LoaderArgs} from '@shopify/remix-oxygen';
 import {useLoaderData} from '@remix-run/react';
-import type {Collection as CollectionType} from '@shopify/hydrogen-react/storefront-api-types';
+import type {Collection as CollectionType} from '@shopify/hydrogen/storefront-api-types';
 import {Link} from '@remix-run/react';
 
 export async function loader({params, request, context}: LoaderArgs) {

package/dist/generator-templates/routes/pages/$pageHandle.tsx

@@ -6,7 +6,7 @@ import {
 } from '@shopify/remix-oxygen';
 import {useLoaderData} from '@remix-run/react';
 import invariant from 'tiny-invariant';
-import type {Page as PageType} from '@shopify/hydrogen-react/storefront-api-types';
+import type {Page as PageType} from '@shopify/hydrogen/storefront-api-types';
 import type {SeoHandleFunction} from '@shopify/hydrogen';
 
 export async function loader({params, context}: LoaderArgs) {

package/dist/generator-templates/routes/policies/$policyHandle.tsx

@@ -1,7 +1,7 @@
 import {json, type MetaFunction, type LoaderArgs} from '@shopify/remix-oxygen';
 import {useLoaderData} from '@remix-run/react';
 
-import {ShopPolicy} from '@shopify/hydrogen-react/storefront-api-types';
+import {ShopPolicy} from '@shopify/hydrogen/storefront-api-types';
 
 export async function loader({request, params, context}: LoaderArgs) {
   const handle = params.policyHandle;

package/dist/generator-templates/routes/policies/index.tsx

@@ -1,6 +1,6 @@
 import {json, type LoaderArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, Link} from '@remix-run/react';
-import type {ShopPolicy} from '@shopify/hydrogen-react/storefront-api-types';
+import type {ShopPolicy} from '@shopify/hydrogen/storefront-api-types';
 
 export async function loader({context: {storefront}}: LoaderArgs) {
   const data = await storefront.query<{
@@ -26,7 +26,9 @@ export default function Policies() {
       {policies.map((policy) => {
         return (
           policy && (
-            <Link to={`/policies/${policy.handle}`}>{policy.title}</Link>
+            <Link key={policy.id} to={`/policies/${policy.handle}`}>
+              {policy.title}
+            </Link>
           )
         );
       })}

package/dist/generator-templates/routes/products/$productHandle.tsx

@@ -3,7 +3,7 @@ import {useLoaderData} from '@remix-run/react';
 import type {
   ProductVariant,
   Product as ProductType,
-} from '@shopify/hydrogen-react/storefront-api-types';
+} from '@shopify/hydrogen/storefront-api-types';
 
 export async function loader({params, context}: LoaderArgs) {
   const {productHandle} = params;

package/dist/utils/check-lockfile.test.js

@@ -0,0 +1,74 @@
+import { checkLockfileStatus } from './check-lockfile.js';
+import { vi, describe, beforeEach, afterEach, it, expect } from 'vitest';
+import { git, outputMocker, file, path } from '@shopify/cli-kit';
+
+vi.mock("@shopify/cli-kit", async () => {
+  const cliKit = await vi.importActual("@shopify/cli-kit");
+  return {
+    ...cliKit,
+    git: {
+      factory: vi.fn()
+    }
+  };
+});
+describe("checkLockfileStatus()", () => {
+  const checkIgnoreMock = vi.fn();
+  const gitFactoryMock = {
+    checkIgnore: checkIgnoreMock
+  };
+  beforeEach(() => {
+    vi.mocked(git.factory).mockReturnValue(gitFactoryMock);
+    vi.mocked(checkIgnoreMock).mockResolvedValue([]);
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+    outputMocker.mockAndCaptureOutput().clear();
+  });
+  describe("when a lockfile is present", () => {
+    it("does not call displayLockfileWarning", async () => {
+      await file.inTemporaryDirectory(async (tmpDir) => {
+        await file.write(path.join(tmpDir, "package-lock.json"), "");
+        const outputMock = outputMocker.mockAndCaptureOutput();
+        await checkLockfileStatus(tmpDir);
+        expect(outputMock.warn()).toBe("");
+      });
+    });
+    describe("and it is being ignored by Git", () => {
+      beforeEach(() => {
+        vi.mocked(checkIgnoreMock).mockResolvedValue(["package-lock.json"]);
+      });
+      it("renders a warning", async () => {
+        await file.inTemporaryDirectory(async (tmpDir) => {
+          await file.write(path.join(tmpDir, "package-lock.json"), "");
+          const outputMock = outputMocker.mockAndCaptureOutput();
+          await checkLockfileStatus(tmpDir);
+          expect(outputMock.warn()).toMatch(
+            / warning .+ Lockfile ignored by Git .+/is
+          );
+        });
+      });
+    });
+  });
+  describe("when there are multiple lockfiles", () => {
+    it("renders a warning", async () => {
+      await file.inTemporaryDirectory(async (tmpDir) => {
+        await file.write(path.join(tmpDir, "package-lock.json"), "");
+        await file.write(path.join(tmpDir, "pnpm-lock.yaml"), "");
+        const outputMock = outputMocker.mockAndCaptureOutput();
+        await checkLockfileStatus(tmpDir);
+        expect(outputMock.warn()).toMatch(
+          / warning .+ Multiple lockfiles found .+/is
+        );
+      });
+    });
+  });
+  describe("when a lockfile is missing", () => {
+    it("renders a warning", async () => {
+      await file.inTemporaryDirectory(async (tmpDir) => {
+        const outputMock = outputMocker.mockAndCaptureOutput();
+        await checkLockfileStatus(tmpDir);
+        expect(outputMock.warn()).toMatch(/ warning .+ No lockfile found .+/is);
+      });
+    });
+  });
+});

package/dist/utils/flags.d.ts

@@ -6,5 +6,13 @@ declare const commonFlags: {
     force: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
 };
 declare function flagsToCamelObject(obj: Record<string, any>): any;
+/**
+ * Parse process arguments into an object for use in the cli as flags.
+ * This is used when starting the init command from create-hydrogen without Oclif.
+ * @example
+ * input: `node ./bin --force --no-install-deps --language js`
+ * output: { force: true, installDeps: false,  language: 'js' }
+ */
+declare function parseProcessFlags(processArgv: string[], flagMap?: Record<string, string>): any;
 
-export { commonFlags, flagsToCamelObject };
+export { commonFlags, flagsToCamelObject, parseProcessFlags };

package/dist/utils/flags.js

@@ -23,5 +23,23 @@ function flagsToCamelObject(obj) {
     return acc;
   }, {});
 }
+function parseProcessFlags(processArgv, flagMap = {}) {
+  const [, , ...args] = processArgv;
+  const options = {};
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    const nextArg = args[i + 1];
+    if (arg?.startsWith("-")) {
+      let key = arg.replace(/^\-{1,2}/, "");
+      let value = !nextArg || nextArg.startsWith("-") ? true : nextArg;
+      if (value === true && key.startsWith("no-")) {
+        value = false;
+        key = key.replace("no-", "");
+      }
+      options[flagMap[key] || key] = value;
+    }
+  }
+  return flagsToCamelObject(options);
+}
 
-export { commonFlags, flagsToCamelObject };
+export { commonFlags, flagsToCamelObject, parseProcessFlags };

package/dist/utils/flags.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { flagsToCamelObject } from './flags.js';
+import { flagsToCamelObject, parseProcessFlags } from './flags.js';
 
 describe("CLI flag utils", () => {
   it("turns kebab-case flags to camelCase", async () => {
@@ -15,4 +15,29 @@ describe("CLI flag utils", () => {
       flag: "value"
     });
   });
+  it("parses flags from process.argv", async () => {
+    expect(
+      parseProcessFlags(
+        "node ./bin --force --install-deps --template hello-world --path test --language ts".split(
+          " "
+        )
+      )
+    ).toMatchObject({
+      force: true,
+      installDeps: true,
+      template: "hello-world",
+      path: "test",
+      language: "ts"
+    });
+    expect(
+      parseProcessFlags(
+        "node ./bin -f --no-install-deps --language js".split(" "),
+        { f: "force" }
+      )
+    ).toMatchObject({
+      force: true,
+      installDeps: false,
+      language: "js"
+    });
+  });
 });

package/dist/utils/template-downloader.js

@@ -33,7 +33,7 @@ async function downloadTarball(url, storageDir) {
       strip: 1,
       filter: (name) => {
         name = name.replace(storageDir, "");
-        return !name.startsWith("/templates/") || name.startsWith("/templates/skeleton/");
+        return !name.startsWith(path.normalize("/templates/")) || name.startsWith(path.normalize("/templates/skeleton/"));
       }
     })
   );

package/dist/utils/virtual-routes.js

@@ -4,23 +4,20 @@ 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 = fileURLToPath(new URL("..", import.meta.url));
   const virtualRoutesPath = path.join(distPath, VIRTUAL_ROUTES_DIR);
   for (const absoluteFilePath of await recursiveReaddir(virtualRoutesPath)) {
     const relativeFilePath = path.relative(virtualRoutesPath, absoluteFilePath);
-    const routePath = fileURLToPath(
-      new URL(`file:///${relativeFilePath}`)
-    ).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 routePath = relativeFilePath.replace(/\.[jt]sx?$/, "").replaceAll("\\", "/");
+    const isIndex = /(^|\/)index$/.test(routePath);
+    const normalizedVirtualRoutePath = isIndex ? routePath.slice(0, -"index".length).replace(/\/$/, "") || void 0 : routePath.replace(/\$/g, ":").replace(/[\[\]]/g, "");
     const hasUserRoute = userRouteList.some(
       (r) => r.parentId === "root" && r.path === normalizedVirtualRoutePath
     );
     if (!hasUserRoute) {
-      const id = VIRTUAL_ROUTES_DIR + routePath;
+      const id = VIRTUAL_ROUTES_DIR + "/" + routePath;
       config.routes[id] = {
         id,
         parentId: VIRTUAL_ROOT,

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

@@ -16,10 +16,12 @@ describe("virtual routes", () => {
     });
     expect(config.routes[VIRTUAL_ROUTES_DIR + "/index"]).toMatchObject({
       parentId: VIRTUAL_ROOT,
+      path: void 0,
       file: "../" + VIRTUAL_ROUTES_DIR + "/index.tsx"
     });
     expect(config.routes[VIRTUAL_ROUTES_DIR + "/graphiql"]).toMatchObject({
       parentId: VIRTUAL_ROOT,
+      path: "graphiql",
       file: "../" + VIRTUAL_ROUTES_DIR + "/graphiql.tsx"
     });
   });

package/dist/virtual-routes/assets/favicon.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none">
+  <style>
+    .stroke {
+      stroke: #000;
+    }
+    .fill {
+      fill: #000;
+    }
+    @media (prefers-color-scheme: dark) {
+      .stroke {
+        stroke: #fff;
+      }
+      .fill {
+        fill: #fff;
+      }
+    }
+  </style>
+  <path
+    class="stroke"
+    fill-rule="evenodd"
+    d="M16.1 16.04 1 8.02 6.16 5.3l5.82 3.09 4.88-2.57-5.82-3.1L16.21 0l15.1 8.02-5.17 2.72-5.5-2.91-4.88 2.57 5.5 2.92-5.16 2.72Z"
+  />
+  <path
+    class="fill"
+    fill-rule="evenodd"
+    d="M16.1 32 1 23.98l5.16-2.72 5.82 3.08 4.88-2.57-5.82-3.08 5.17-2.73 15.1 8.02-5.17 2.72-5.5-2.92-4.88 2.58 5.5 2.92L16.1 32Z"
+  />
+</svg>

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

@@ -0,0 +1,238 @@
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/inter-variable-font.ttf') format('truetype-variations');
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('../assets/jetbrainsmono-variable-font.ttf')
+    format('truetype-variations');
+}
+
+* {
+  box-sizing: border-box;
+}
+
+h1,
+h2,
+p {
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 3rem;
+  line-height: 1.25;
+}
+
+h2 {
+  font-size: 1.2rem;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+p {
+  font-size: 1rem;
+  line-height: 1.4;
+  font-weight: 500;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  background: #ffffff;
+  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.hydrogen-virtual-route {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+}
+
+header {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  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;
+}
+
+header p {
+  font-family: 'JetBrains Mono';
+  font-weight: 700;
+  font-size: 0.875rem;
+  border: 1.5px solid #d2d5d8;
+  border-radius: 4px;
+  padding: 1px;
+  white-space: nowrap;
+}
+
+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;
+  font-weight: 900;
+  margin-bottom: 24px;
+}
+
+main > p {
+  margin-bottom: 16px;
+}
+
+main > section {
+  margin-bottom: 40px;
+}
+
+main a {
+  color: #475f91;
+  font-size: 1rem;
+  position: relative;
+  font-weight: 500;
+}
+
+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;
+}
+
+.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;
+  font-weight: 700;
+}
+
+.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: 1rem;
+  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;
+  color: #202223;
+}
+
+.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/routes/index.jsx

@@ -7,6 +7,8 @@ import { IconTwitter } from "../components/IconTwitter.jsx";
 import { IconBanner } from "../components/IconBanner.jsx";
 import { IconError } from "../components/IconError.jsx";
 import favicon from "../assets/favicon.svg";
+import interVariableFont from "../assets/inter-variable-font.ttf";
+import jetbrainsmonoVariableFont from "../assets/jetbrainsmono-variable-font.ttf";
 const meta = () => {
   return {
     title: "Hydrogen",
@@ -20,6 +22,20 @@ const links = () => [
     rel: "icon",
     type: "image/svg+xml",
     href: favicon
+  },
+  {
+    rel: "preload",
+    href: interVariableFont,
+    as: "font",
+    type: "font/ttf",
+    crossOrigin: "anonymous"
+  },
+  {
+    rel: "preload",
+    href: jetbrainsmonoVariableFont,
+    as: "font",
+    type: "font/ttf",
+    crossOrigin: "anonymous"
   }
 ];
 async function loader({ context }) {
@@ -44,24 +60,31 @@ function Index() {
       {shopName || "Hydrogen"}
     </h1>
     <p>Welcome to your new custom storefront</p>
-    <section className="Banner">
+    {configDone ? null : <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 "}
+        {"You\u2019re seeing this because you have not yet configured your storefront token. "}
+        <br />
+        <br />
+        {" To get started, edit "}
         {` `}
         <code>.env</code>
-        {". Then, create your first route with the file "}
+        {". 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>
+        <a target="_blank" rel="norefferer noopener" href="https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables">editing environment variables</a>
+        {` `}
+        {"and"}
+        {` `}
+        <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>
         {"."}
       </p>
-    </section>
+    </section>}
     <ResourcesLinks />
   </Layout></>;
 }
@@ -78,9 +101,8 @@ function ErrorPage() {
       <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>
+        {" 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>
@@ -112,9 +134,9 @@ function Layout({
       <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>
+        <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>

package/oclif.manifest.json

@@ -1 +1 @@
-{"version":"4.0.4","commands":{"hydrogen:build":{"id":"hydrogen:build","description":"Builds a Hydrogen storefront for production.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false},"sourcemap":{"name":"sourcemap","type":"boolean","description":"Generate sourcemaps for the build.","allowNo":false},"disable-route-warning":{"name":"disable-route-warning","type":"boolean","description":"Disable warning about missing standard routes.","allowNo":false}},"args":[]},"hydrogen:check":{"id":"hydrogen:check","description":"Returns diagnostic information about a Hydrogen storefront.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false}},"args":[{"name":"resource","description":"The resource to check. Currently only 'routes' is supported.","required":true,"options":["routes"]}]},"hydrogen:dev":{"id":"hydrogen:dev","description":"Runs Hydrogen storefront in an Oxygen worker for development.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false},"port":{"name":"port","type":"option","description":"Port to run the server on.","multiple":false,"default":3000},"disable-virtual-routes":{"name":"disable-virtual-routes","type":"boolean","description":"Disable rendering fallback routes when a route file doesn't exist","allowNo":false}},"args":[]},"hydrogen:init":{"id":"hydrogen:init","description":"Creates a new Hydrogen storefront.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false},"force":{"name":"force","type":"boolean","char":"f","description":"Overwrite the destination directory and files if they already exist.","allowNo":false},"language":{"name":"language","type":"option","description":"Sets the template language to use. One of `js` or `ts`.","multiple":false,"default":"js"},"template":{"name":"template","type":"option","description":"Sets the template to use. One of `demo-store` or `hello-world`.","multiple":false}},"args":[]},"hydrogen:preview":{"id":"hydrogen:preview","description":"Runs a Hydrogen storefront in an Oxygen worker for production.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false},"port":{"name":"port","type":"option","description":"Port to run the server on.","multiple":false,"default":3000}},"args":[]},"hydrogen:generate:route":{"id":"hydrogen:generate:route","description":"Generates a standard Shopify route.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"adapter":{"name":"adapter","type":"option","description":"Remix adapter used in the route. The default is `@shopify/remix-oxygen`.","multiple":false},"typescript":{"name":"typescript","type":"boolean","description":"Generate TypeScript files","allowNo":false},"force":{"name":"force","type":"boolean","char":"f","description":"Overwrite the destination directory and files if they already exist.","allowNo":false},"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false}},"args":[{"name":"route","description":"The route to generate. One of home,page,cart,products,collections,policies,robots,sitemap,account,all.","required":true,"options":["home","page","cart","products","collections","policies","robots","sitemap","account","all"]}]},"hydrogen:generate:routes":{"id":"hydrogen:generate:routes","description":"Generates all supported standard shopify routes.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"adapter":{"name":"adapter","type":"option","description":"Remix adapter used in the route. The default is `@shopify/remix-oxygen`.","multiple":false},"typescript":{"name":"typescript","type":"boolean","description":"Generate TypeScript files","allowNo":false},"force":{"name":"force","type":"boolean","char":"f","description":"Overwrite the destination directory and files if they already exist.","allowNo":false},"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false}},"args":[]}}}
+{"version":"4.0.6","commands":{"hydrogen:build":{"id":"hydrogen:build","description":"Builds a Hydrogen storefront for production.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false},"sourcemap":{"name":"sourcemap","type":"boolean","description":"Generate sourcemaps for the build.","allowNo":false},"disable-route-warning":{"name":"disable-route-warning","type":"boolean","description":"Disable warning about missing standard routes.","allowNo":false}},"args":[]},"hydrogen:check":{"id":"hydrogen:check","description":"Returns diagnostic information about a Hydrogen storefront.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false}},"args":[{"name":"resource","description":"The resource to check. Currently only 'routes' is supported.","required":true,"options":["routes"]}]},"hydrogen:dev":{"id":"hydrogen:dev","description":"Runs Hydrogen storefront in an Oxygen worker for development.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false},"port":{"name":"port","type":"option","description":"Port to run the server on.","multiple":false,"default":3000},"disable-virtual-routes":{"name":"disable-virtual-routes","type":"boolean","description":"Disable rendering fallback routes when a route file doesn't exist","allowNo":false}},"args":[]},"hydrogen:init":{"id":"hydrogen:init","description":"Creates a new Hydrogen storefront.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"force":{"name":"force","type":"boolean","char":"f","description":"Overwrite the destination directory and files if they already exist.","allowNo":false},"path":{"name":"path","type":"option","description":"The path to the directory of the new Hydrogen storefront.","multiple":false},"language":{"name":"language","type":"option","description":"Sets the template language to use. One of `js` or `ts`.","multiple":false},"template":{"name":"template","type":"option","description":"Sets the template to use. One of `demo-store` or `hello-world`.","multiple":false},"install-deps":{"name":"install-deps","type":"boolean","description":"Auto install dependencies using the active package manager","allowNo":true}},"args":[]},"hydrogen:preview":{"id":"hydrogen:preview","description":"Runs a Hydrogen storefront in an Oxygen worker for production.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false},"port":{"name":"port","type":"option","description":"Port to run the server on.","multiple":false,"default":3000}},"args":[]},"hydrogen:generate:route":{"id":"hydrogen:generate:route","description":"Generates a standard Shopify route.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"adapter":{"name":"adapter","type":"option","description":"Remix adapter used in the route. The default is `@shopify/remix-oxygen`.","multiple":false},"typescript":{"name":"typescript","type":"boolean","description":"Generate TypeScript files","allowNo":false},"force":{"name":"force","type":"boolean","char":"f","description":"Overwrite the destination directory and files if they already exist.","allowNo":false},"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false}},"args":[{"name":"route","description":"The route to generate. One of home,page,cart,products,collections,policies,robots,sitemap,account,all.","required":true,"options":["home","page","cart","products","collections","policies","robots","sitemap","account","all"]}]},"hydrogen:generate:routes":{"id":"hydrogen:generate:routes","description":"Generates all supported standard shopify routes.","strict":true,"pluginName":"@shopify/cli-hydrogen","pluginAlias":"@shopify/cli-hydrogen","pluginType":"core","aliases":[],"flags":{"adapter":{"name":"adapter","type":"option","description":"Remix adapter used in the route. The default is `@shopify/remix-oxygen`.","multiple":false},"typescript":{"name":"typescript","type":"boolean","description":"Generate TypeScript files","allowNo":false},"force":{"name":"force","type":"boolean","char":"f","description":"Overwrite the destination directory and files if they already exist.","allowNo":false},"path":{"name":"path","type":"option","description":"The path to the directory of the Hydrogen storefront. The default is the current directory.","multiple":false}},"args":[]}}}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "4.0.4",
+  "version": "4.0.6",
   "license": "SEE LICENSE IN LICENSE.md",
   "type": "module",
   "scripts": {
@@ -13,8 +13,8 @@
     "typecheck": "tsc --noEmit",
     "generate:manifest": "oclif manifest",
     "prepack": "npm run build",
-    "test": "vitest run",
-    "test:watch": "vitest"
+    "test": "cross-env SHOPIFY_UNIT_TEST=1 vitest run",
+    "test:watch": "cross-env SHOPIFY_UNIT_TEST=1 vitest"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
@@ -28,8 +28,8 @@
   },
   "peerDependencies": {
     "@remix-run/react": "^1.12.0",
-    "@shopify/hydrogen-react": "^2023.1.4",
-    "@shopify/remix-oxygen": "^1.0.2"
+    "@shopify/hydrogen-react": "^2023.1.5",
+    "@shopify/remix-oxygen": "^1.0.3"
   },
   "dependencies": {
     "@oclif/core": "^1.20.4",

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

@@ -1 +0,0 @@
-