@shopify/cli-hydrogen 5.0.2 → 5.1.0

package/dist/lib/shell.test.js

@@ -1,26 +1,31 @@
-import { describe, beforeEach, vi, it, expect } from 'vitest';
+import { vi, describe, beforeEach, afterEach, it, expect } from 'vitest';
+import { platform, userInfo } from 'node:os';
 import { fileExists } from '@shopify/cli-kit/node/fs';
 import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
-import { shellWriteAlias, getCliCommand } from './shell.js';
+import { shellWriteAlias, createPlatformShortcut, getCliCommand } from './shell.js';
 import { execAsync } from './process.js';
 
+vi.mock("node:os");
+vi.mock("node:child_process");
+vi.mock("@shopify/cli-kit/node/fs");
+vi.mock("@shopify/cli-kit/node/node-package-manager");
+vi.mock("./process.js", async () => {
+  const original = await vi.importActual(
+    "./process.js"
+  );
+  return {
+    ...original,
+    execAsync: vi.fn()
+  };
+});
+vi.mocked(fileExists).mockResolvedValue(false);
+vi.mocked(getPackageManager).mockResolvedValue("npm");
 describe("shell", () => {
   beforeEach(() => {
     vi.resetAllMocks();
-    vi.mock("node:child_process");
-    vi.mock("@shopify/cli-kit/node/fs");
-    vi.mock("@shopify/cli-kit/node/node-package-manager");
-    vi.mock("./process.js", async () => {
-      const original = await vi.importActual(
-        "./process.js"
-      );
-      return {
-        ...original,
-        execAsync: vi.fn()
-      };
-    });
-    vi.mocked(fileExists).mockResolvedValue(false);
-    vi.mocked(getPackageManager).mockResolvedValue("npm");
+  });
+  afterEach(() => {
+    delete process.env.MINGW_PREFIX;
   });
   describe("shellWriteAlias", () => {
     ["bash", "zsh", "fish"].forEach((shell) => {
@@ -63,8 +68,29 @@ describe("shell", () => {
       });
     });
   });
+  describe("createPlatformShortcut", () => {
+    it("creates aliases for Unix", async () => {
+      vi.mocked(platform).mockReturnValue("darwin");
+      const result = await createPlatformShortcut();
+      expect(result).toEqual(expect.arrayContaining(["zsh", "bash", "fish"]));
+    });
+    it("creates aliases for Windows", async () => {
+      vi.mocked(platform).mockReturnValue("win32");
+      const result = await createPlatformShortcut();
+      expect(result).toEqual(
+        expect.arrayContaining(["PowerShell", "PowerShell 7+"])
+      );
+    });
+    it("creates aliases for Windows in Git Bash", async () => {
+      process.env.MINGW_PREFIX = "something";
+      vi.mocked(platform).mockReturnValue("win32");
+      const result = await createPlatformShortcut();
+      expect(result).toEqual(expect.arrayContaining(["bash"]));
+    });
+  });
   describe("getCliCommand", () => {
     it("returns the shortcut alias if available", async () => {
+      vi.mocked(userInfo).mockReturnValue({ shell: "/bin/bash" });
       vi.mocked(execAsync).mockImplementation(
         (shellCommand) => shellCommand.startsWith("grep") ? Promise.resolve({ stdout: "stuff", stderr: "" }) : Promise.reject(null)
       );

package/dist/lib/shopify-config.js

@@ -1,10 +1,16 @@
 import { resolvePath, dirname } from '@shopify/cli-kit/node/path';
-import { fileExists, readFile, mkdir, writeFile } from '@shopify/cli-kit/node/fs';
+import { fileExists, writeFile, readFile, mkdir } from '@shopify/cli-kit/node/fs';
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { outputInfo } from '@shopify/cli-kit/node/output';
 
 const SHOPIFY_DIR = ".shopify";
 const SHOPIFY_DIR_PROJECT = "project.json";
+async function resetConfig(root) {
+  const filePath = resolvePath(root, SHOPIFY_DIR, SHOPIFY_DIR_PROJECT);
+  if (!await fileExists(filePath)) {
+    return;
+  }
+  await writeFile(filePath, JSON.stringify({}));
+}
 async function getConfig(root) {
   const filePath = resolvePath(root, SHOPIFY_DIR, SHOPIFY_DIR_PROJECT);
   if (!await fileExists(filePath)) {
@@ -12,25 +18,23 @@ async function getConfig(root) {
   }
   return JSON.parse(await readFile(filePath));
 }
-async function setShop(root, shop) {
+async function setUserAccount(root, { shop, shopName, email }) {
   const filePath = resolvePath(root, SHOPIFY_DIR, SHOPIFY_DIR_PROJECT);
-  if (!await fileExists(filePath)) {
+  let existingConfig = {};
+  if (await fileExists(filePath)) {
+    existingConfig = JSON.parse(await readFile(filePath));
+  } else {
     await mkdir(dirname(filePath));
-    const newConfig = {
-      shop
-    };
-    await writeFile(filePath, JSON.stringify(newConfig));
-    await ensureShopifyGitIgnore(root);
-    return newConfig;
   }
-  const existingConfig = JSON.parse(await readFile(filePath));
-  const config = {
+  const newConfig = {
     ...existingConfig,
-    shop
+    shop,
+    shopName,
+    email
   };
-  await writeFile(filePath, JSON.stringify(config));
+  await writeFile(filePath, JSON.stringify(newConfig));
   await ensureShopifyGitIgnore(root);
-  return config;
+  return newConfig;
 }
 async function setStorefront(root, { id, title }) {
   try {
@@ -50,7 +54,9 @@ async function setStorefront(root, { id, title }) {
 async function unsetStorefront(root) {
   try {
     const filePath = resolvePath(root, SHOPIFY_DIR, SHOPIFY_DIR_PROJECT);
-    const existingConfig = JSON.parse(await readFile(filePath));
+    const existingConfig = JSON.parse(
+      await readFile(filePath)
+    );
     const config = {
       ...existingConfig,
       storefront: void 0
@@ -75,7 +81,6 @@ async function ensureShopifyGitIgnore(root) {
     }
     gitIgnoreContents += `${SHOPIFY_DIR}\r
 `;
-    outputInfo("Adding .shopify to .gitignore...");
     await writeFile(gitIgnoreFilePath, gitIgnoreContents);
     return true;
   } catch {
@@ -83,4 +88,4 @@ async function ensureShopifyGitIgnore(root) {
   }
 }
 
-export { SHOPIFY_DIR, SHOPIFY_DIR_PROJECT, ensureShopifyGitIgnore, getConfig, setShop, setStorefront, unsetStorefront };
+export { SHOPIFY_DIR, SHOPIFY_DIR_PROJECT, ensureShopifyGitIgnore, getConfig, resetConfig, setStorefront, setUserAccount, unsetStorefront };

package/dist/lib/shopify-config.test.js

@@ -1,8 +1,24 @@
 import { describe, it, expect } from 'vitest';
 import { inTemporaryDirectory, mkdir, writeFile, fileExists, readFile } from '@shopify/cli-kit/node/fs';
 import { joinPath, dirname } from '@shopify/cli-kit/node/path';
-import { getConfig, SHOPIFY_DIR, SHOPIFY_DIR_PROJECT, setShop, setStorefront, unsetStorefront, ensureShopifyGitIgnore } from './shopify-config.js';
+import { getConfig, SHOPIFY_DIR, SHOPIFY_DIR_PROJECT, resetConfig, setUserAccount, setStorefront, unsetStorefront, ensureShopifyGitIgnore } from './shopify-config.js';
 
+async function writeExistingConfig(dir, config) {
+  const existingConfig = config ?? {
+    shop: "previous-shop",
+    shopName: "Previous Shop",
+    email: "email",
+    storefront: {
+      id: "gid://shopify/HydrogenStorefront/1",
+      title: "Hydrogen"
+    }
+  };
+  const filePath = joinPath(dir, SHOPIFY_DIR, SHOPIFY_DIR_PROJECT);
+  await mkdir(dirname(filePath));
+  await writeFile(filePath, JSON.stringify(existingConfig));
+  expect(JSON.parse(await readFile(filePath))).toStrictEqual(existingConfig);
+  return { existingConfig, filePath };
+}
 describe("getConfig()", () => {
   describe("when no config exists", () => {
     it("returns an empty object", async () => {
@@ -16,7 +32,9 @@ describe("getConfig()", () => {
     it("returns the config", async () => {
       await inTemporaryDirectory(async (tmpDir) => {
         const existingConfig = {
-          shop: "my-shop"
+          shop: "my-shop",
+          shopName: "My Shop",
+          email: "email"
         };
         const filePath = joinPath(tmpDir, SHOPIFY_DIR, SHOPIFY_DIR_PROJECT);
         await mkdir(dirname(filePath));
@@ -27,64 +45,70 @@ describe("getConfig()", () => {
     });
   });
 });
-describe("setShop()", () => {
+describe("resetConfig()", () => {
+  it("writes an empty object", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      await writeExistingConfig(tmpDir);
+      await resetConfig(tmpDir);
+      const config = await getConfig(tmpDir);
+      expect(config).toStrictEqual({});
+    });
+  });
+});
+describe("setUserAccount()", () => {
   describe("when no config exists", () => {
     it("creates a new config file", async () => {
       await inTemporaryDirectory(async (tmpDir) => {
         const filePath = joinPath(tmpDir, SHOPIFY_DIR, SHOPIFY_DIR_PROJECT);
         expect(await fileExists(filePath)).toBeFalsy();
-        await setShop(tmpDir, "new-shop");
+        await setUserAccount(tmpDir, {
+          shop: "new-shop",
+          shopName: "New Shop",
+          email: "email"
+        });
         expect(await fileExists(filePath)).toBeTruthy();
       });
     });
     it("returns the new config", async () => {
       await inTemporaryDirectory(async (tmpDir) => {
-        const config = await setShop(tmpDir, "new-shop");
-        expect(config).toStrictEqual({
-          shop: "new-shop"
-        });
+        const newConfig = {
+          shop: "new-shop",
+          email: "email",
+          shopName: "New Shop"
+        };
+        const config = await setUserAccount(tmpDir, newConfig);
+        expect(config).toStrictEqual(newConfig);
       });
     });
   });
   describe("when a config exists", () => {
     it("updates the config file", async () => {
       await inTemporaryDirectory(async (tmpDir) => {
-        const existingConfig = {
-          shop: "previous-shop",
-          storefront: {
-            id: "gid://shopify/HydrogenStorefront/1",
-            title: "Hydrogen"
-          }
+        const { existingConfig, filePath } = await writeExistingConfig(tmpDir);
+        const newConfig = {
+          shop: "new-shop",
+          shopName: "New Shop",
+          email: "email"
         };
-        const filePath = joinPath(tmpDir, SHOPIFY_DIR, SHOPIFY_DIR_PROJECT);
-        await mkdir(dirname(filePath));
-        await writeFile(filePath, JSON.stringify(existingConfig));
-        expect(JSON.parse(await readFile(filePath))).toStrictEqual(
-          existingConfig
-        );
-        await setShop(tmpDir, "new-shop");
+        await setUserAccount(tmpDir, newConfig);
         expect(JSON.parse(await readFile(filePath))).toStrictEqual({
           ...existingConfig,
-          shop: "new-shop"
+          ...newConfig
         });
       });
     });
     it("returns the new config", async () => {
       await inTemporaryDirectory(async (tmpDir) => {
-        const existingConfig = {
-          shop: "previous-shop",
-          storefront: {
-            id: "gid://shopify/HydrogenStorefront/1",
-            title: "Hydrogen"
-          }
+        const { existingConfig } = await writeExistingConfig(tmpDir);
+        const newConfig = {
+          shop: "new-shop",
+          email: "email",
+          shopName: "New Shop"
         };
-        const filePath = joinPath(tmpDir, SHOPIFY_DIR, SHOPIFY_DIR_PROJECT);
-        await mkdir(dirname(filePath));
-        await writeFile(filePath, JSON.stringify(existingConfig));
-        const config = await setShop(tmpDir, "new-shop");
+        const config = await setUserAccount(tmpDir, newConfig);
         expect(config).toStrictEqual({
           ...existingConfig,
-          shop: "new-shop"
+          ...newConfig
         });
       });
     });
@@ -93,19 +117,7 @@ describe("setShop()", () => {
 describe("setStorefront()", () => {
   it("updates the config file", async () => {
     await inTemporaryDirectory(async (tmpDir) => {
-      const existingConfig = {
-        shop: "previous-shop",
-        storefront: {
-          id: "gid://shopify/HydrogenStorefront/1",
-          title: "Hydrogen"
-        }
-      };
-      const filePath = joinPath(tmpDir, SHOPIFY_DIR, SHOPIFY_DIR_PROJECT);
-      await mkdir(dirname(filePath));
-      await writeFile(filePath, JSON.stringify(existingConfig));
-      expect(JSON.parse(await readFile(filePath))).toStrictEqual(
-        existingConfig
-      );
+      const { existingConfig, filePath } = await writeExistingConfig(tmpDir);
       const newStorefront = {
         id: "gid://shopify/HydrogenStorefront/2",
         title: "Remix"
@@ -119,16 +131,7 @@ describe("setStorefront()", () => {
   });
   it("returns the new config", async () => {
     await inTemporaryDirectory(async (tmpDir) => {
-      const existingConfig = {
-        shop: "previous-shop",
-        storefront: {
-          id: "gid://shopify/HydrogenStorefront/1",
-          title: "Hydrogen"
-        }
-      };
-      const filePath = joinPath(tmpDir, SHOPIFY_DIR, SHOPIFY_DIR_PROJECT);
-      await mkdir(dirname(filePath));
-      await writeFile(filePath, JSON.stringify(existingConfig));
+      const { existingConfig } = await writeExistingConfig(tmpDir);
       const newStorefront = {
         id: "gid://shopify/HydrogenStorefront/2",
         title: "Remix"
@@ -144,27 +147,14 @@ describe("setStorefront()", () => {
 describe("unsetStorefront()", () => {
   it("removes the storefront configuration and returns the config", async () => {
     await inTemporaryDirectory(async (tmpDir) => {
-      const existingConfig = {
-        shop: "previous-shop",
-        storefront: {
-          id: "gid://shopify/HydrogenStorefront/1",
-          title: "Hydrogen"
-        }
-      };
-      const filePath = joinPath(tmpDir, SHOPIFY_DIR, SHOPIFY_DIR_PROJECT);
-      await mkdir(dirname(filePath));
-      await writeFile(filePath, JSON.stringify(existingConfig));
-      expect(JSON.parse(await readFile(filePath))).toStrictEqual(
-        existingConfig
-      );
+      const { filePath, existingConfig } = await writeExistingConfig(tmpDir);
       const config = await unsetStorefront(tmpDir);
       expect(config).toStrictEqual({
-        shop: "previous-shop",
+        ...existingConfig,
         storefront: void 0
       });
-      expect(JSON.parse(await readFile(filePath))).toStrictEqual({
-        shop: "previous-shop"
-      });
+      const { storefront, ...actualConfig } = existingConfig;
+      expect(JSON.parse(await readFile(filePath))).toStrictEqual(actualConfig);
     });
   });
 });

package/dist/lib/template-downloader.js

@@ -9,8 +9,8 @@ import { fileURLToPath } from 'url';
 
 const REPO_RELEASES_URL = `https://api.github.com/repos/shopify/hydrogen/releases/latest`;
 const getTryMessage = (status) => status === 403 ? `If you are using a VPN, WARP, or similar service, consider disabling it momentarily.` : void 0;
-async function getLatestReleaseDownloadUrl() {
-  const response = await fetch(REPO_RELEASES_URL);
+async function getLatestReleaseDownloadUrl(signal) {
+  const response = await fetch(REPO_RELEASES_URL, { signal });
   if (!response.ok || response.status >= 400) {
     throw new AbortError(
       `Failed to fetch the latest release information. Status ${response.status} ${response.statusText.replace(/\.$/, "")}.`,
@@ -23,8 +23,8 @@ async function getLatestReleaseDownloadUrl() {
     url: release.tarball_url
   };
 }
-async function downloadTarball(url, storageDir) {
-  const response = await fetch(url);
+async function downloadTarball(url, storageDir, signal) {
+  const response = await fetch(url, { signal });
   if (!response.ok || response.status >= 400) {
     throw new AbortError(
       `Failed to download the latest release files. Status ${response.status} ${response.statusText}}`,
@@ -43,9 +43,11 @@ async function downloadTarball(url, storageDir) {
     })
   );
 }
-async function getLatestTemplates() {
+async function getLatestTemplates({
+  signal
+} = {}) {
   try {
-    const { version, url } = await getLatestReleaseDownloadUrl();
+    const { version, url } = await getLatestReleaseDownloadUrl(signal);
     const templateStoragePath = fileURLToPath(
       new URL("../starter-templates", import.meta.url)
     );
@@ -54,7 +56,7 @@ async function getLatestTemplates() {
     }
     const templateStorageVersionPath = path.join(templateStoragePath, version);
     if (!await fileExists(templateStorageVersionPath)) {
-      await downloadTarball(url, templateStorageVersionPath);
+      await downloadTarball(url, templateStorageVersionPath, signal);
     }
     return {
       version,

package/dist/lib/transpile-ts.js

@@ -1,9 +1,9 @@
 import path from 'path';
 import fs from 'fs/promises';
-import prettier from 'prettier';
 import ts from 'typescript';
 import glob from 'fast-glob';
 import { outputDebug } from '@shopify/cli-kit/node/output';
+import { getCodeFormatOptions, formatCode } from './format-code.js';
 
 const escapeNewLines = (code) => code.replace(/\n\n/g, "\n/* :newline: */");
 const restoreNewLines = (code) => code.replace(/\/\* :newline: \*\//g, "\n");
@@ -30,27 +30,6 @@ function transpileFile(code, config = DEFAULT_TS_CONFIG) {
   });
   return restoreNewLines(compiled.outputText);
 }
-const DEFAULT_PRETTIER_CONFIG = {
-  arrowParens: "always",
-  singleQuote: true,
-  bracketSpacing: false,
-  trailingComma: "all"
-};
-async function resolveFormatConfig(filePath = process.cwd()) {
-  try {
-    return await prettier.resolveConfig(filePath) || DEFAULT_PRETTIER_CONFIG;
-  } catch {
-    return DEFAULT_PRETTIER_CONFIG;
-  }
-}
-function format(content, config, filePath = "") {
-  const ext = path.extname(filePath);
-  const formattedContent = prettier.format(content, {
-    parser: ext === ".tsx" || ext === ".ts" ? "typescript" : "babel",
-    ...config
-  });
-  return formattedContent;
-}
 const DEFAULT_JS_CONFIG = {
   allowJs: true,
   forceConsistentCasingInFileNames: true,
@@ -95,14 +74,14 @@ async function transpileProject(projectDir) {
     absolute: true,
     cwd: projectDir
   });
-  const formatConfig = await resolveFormatConfig();
+  const formatConfig = await getCodeFormatOptions();
   for (const entry of entries) {
     if (entry.endsWith(".d.ts")) {
       await fs.rm(entry);
       continue;
     }
     const tsx = await fs.readFile(entry, "utf8");
-    const mjs = format(transpileFile(tsx), formatConfig);
+    const mjs = formatCode(transpileFile(tsx), formatConfig);
     await fs.rm(entry);
     await fs.writeFile(entry.replace(/\.ts(x?)$/, ".js$1"), mjs, "utf8");
   }
@@ -145,11 +124,12 @@ async function transpileProject(projectDir) {
         delete pkgJson.devDependencies[key];
       }
     }
+    const codegenFlag = /\s*--codegen(-unstable)?/;
     if (pkgJson.scripts?.dev) {
-      pkgJson.scripts.dev = pkgJson.scripts.dev.replace(
-        /\s*--codegen(-unstable)?/,
-        ""
-      );
+      pkgJson.scripts.dev = pkgJson.scripts.dev.replace(codegenFlag, "");
+    }
+    if (pkgJson.scripts?.build) {
+      pkgJson.scripts.build = pkgJson.scripts.build.replace(codegenFlag, "");
     }
     await fs.writeFile(
       path.join(projectDir, "package.json"),
@@ -172,4 +152,4 @@ async function transpileProject(projectDir) {
   }
 }
 
-export { convertConfigToJS, format, resolveFormatConfig, transpileFile, transpileProject };
+export { convertConfigToJS, transpileFile, transpileProject };

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

@@ -30,53 +30,74 @@ const links = () => [
     crossOrigin: "anonymous"
   }
 ];
-async function loader({ context }) {
-  const layout = await context.storefront.query(LAYOUT_QUERY);
-  return { layout };
+async function loader({
+  context: { storefront }
+}) {
+  const layout = await storefront.query(LAYOUT_QUERY);
+  return { layout, isMockShop: storefront.getApiUrl().includes("mock.shop") };
 }
 const HYDROGEN_SHOP_ID = "gid://shopify/Shop/55145660472";
 function ErrorBoundary() {
   return <ErrorPage />;
 }
 function Index() {
-  const data = useLoaderData();
-  const { name: shopName, id: shopId } = data.layout.shop;
-  const configDone = shopId !== HYDROGEN_SHOP_ID;
+  const {
+    isMockShop,
+    layout: { shop }
+  } = useLoaderData();
+  let { name: shopName, id: shopId } = shop;
+  const configDone = shopId !== HYDROGEN_SHOP_ID && !isMockShop;
+  if (isMockShop || !shopName)
+    shopName = "Hydrogen";
   return <><Layout shopName={shopName}>
     {configDone ? <HydrogenLogoBaseColor /> : <HydrogenLogoBaseBW />}
     <h1>
       {"Hello, "}
-      {shopName || "Hydrogen"}
+      {shopName}
     </h1>
     <p>Welcome to your new custom storefront</p>
-    {configDone ? null : <section className="Banner">
+    <section className="Banner">
       <div>
         <IconBanner />
-        <h2>Configure storefront token</h2>
+        <h2>{configDone ? "Create your first route" : "Configure storefront token"}</h2>
       </div>
-      <p>
+      {configDone ? <p>
+        {"You\u2019re seeing this because you don\u2019t have a home route in your project yet. "}
+        <br />
+        {"Run "}
+        <code>h2 generate route home</code>
+        {" to create your home route. Learn more about"}
+        {` `}
+        <CreateRoutesLink />
+      </p> : <p>
         {"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"}
+        {" To link your store,"}
         {` `}
-        <code>/app/routes/_index.jsx</code>
-        {". Learn more about"}
+        {"run "}
+        <code>{"h2 link && h2 env pull"}</code>
+        {". Then, run"}
+        {" "}
+        <code>h2 generate route home</code>
+        {" to create your first route."}
+        <br />
+        {"Learn more about"}
         {` `}
         <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>
+        <CreateRoutesLink />
         {"."}
-      </p>
-    </section>}
+      </p>}
+    </section>
     <ResourcesLinks />
   </Layout></>;
 }
+function CreateRoutesLink() {
+  return <a target="_blank" rel="norefferer noopener" href="https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development#step-4-create-a-route">creating routes</a>;
+}
 function ErrorPage() {
   return <><Layout shopName="Hydrogen">
     <HydrogenLogoBaseBW />