@shopify/cli-hydrogen 4.0.5 → 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.d.ts

@@ -0,0 +1 @@
+

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/styles.css

@@ -1,3 +1,13 @@
+@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;
 }
@@ -11,8 +21,7 @@ p {
 
 h1 {
   font-size: 3rem;
-  font-weight: 700;
-  line-height: 1.4;
+  line-height: 1.25;
 }
 
 h2 {
@@ -24,23 +33,31 @@ h2 {
 p {
   font-size: 1rem;
   line-height: 1.4;
+  font-weight: 500;
 }
 
 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;
-
+  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;
@@ -59,14 +76,16 @@ header nav {
 
 header h1 {
   font-size: 0.75rem;
-  margin-right: 20px;
 }
 
 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 {
@@ -91,14 +110,25 @@ footer a {
   text-decoration: none;
 }
 
-main h1 {
+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: 16px;
+  font-size: 1rem;
   position: relative;
+  font-weight: 500;
 }
 
 main a::after {
@@ -109,7 +139,6 @@ main a::after {
 main {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
 }
 
 .Links ul {
@@ -135,6 +164,7 @@ main {
   margin-bottom: 0.5rem;
   font-size: 1.5rem;
   color: #44474a;
+  font-weight: 700;
 }
 
 .Banner {
@@ -147,7 +177,7 @@ main {
   box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
   font-style: normal;
-  font-size: 16px;
+  font-size: 1rem;
   line-height: 24px;
   color: #5c5f62;
   border: 1px solid #d2d5d8;
@@ -173,8 +203,9 @@ main {
   padding: 2px;
 }
 
-.Banner > h2 {
+.Banner h2 {
   font-size: 1rem;
+  color: #202223;
 }
 
 .Banner.ErrorBanner {

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.5","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.5",
+  "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",