@shopify/cli-hydrogen 5.0.2 → 5.1.1

package/dist/lib/setups/routes/generate.test.js

@@ -0,0 +1,313 @@
+import { describe, beforeEach, vi, it, expect } from 'vitest';
+import { temporaryDirectoryTask } from 'tempy';
+import { getResolvedRoutes, generateRoutes, generateProjectFile } from './generate.js';
+import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
+import { fileExists, readFile, mkdir, writeFile } from '@shopify/cli-kit/node/fs';
+import { joinPath, dirname } from '@shopify/cli-kit/node/path';
+import { getTemplateAppFile } from '../../../lib/build.js';
+import { getRemixConfig } from '../../remix-config.js';
+
+const readProjectFile = (dirs, fileBasename, ext = "tsx") => readFile(joinPath(dirs.appDirectory, `${fileBasename}.${ext}`));
+describe("generate/route", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    vi.mock("@shopify/cli-kit/node/output");
+    vi.mock("@shopify/cli-kit/node/ui");
+    vi.mock("../../remix-config.js", async () => ({ getRemixConfig: vi.fn() }));
+  });
+  describe("generateRoutes", () => {
+    it("generates all routes with correct configuration", async () => {
+      const { resolvedRouteFiles } = await getResolvedRoutes();
+      expect(
+        resolvedRouteFiles.find((item) => /account_?\.login/.test(item))
+      ).toBeTruthy();
+      await temporaryDirectoryTask(async (tmpDir) => {
+        const directories = await createHydrogenFixture(tmpDir, {
+          files: [
+            ["jsconfig.json", JSON.stringify({ compilerOptions: { test: "js" } })],
+            [".prettierrc.json", JSON.stringify({ singleQuote: false })]
+          ],
+          templates: resolvedRouteFiles.map(
+            (filepath) => ["routes/" + filepath + ".tsx", ""]
+          )
+        });
+        vi.mocked(getRemixConfig).mockResolvedValue(directories);
+        const result = await generateRoutes({
+          routeName: "all",
+          directory: directories.rootDirectory,
+          templatesRoot: directories.templatesRoot
+        });
+        expect(result).toMatchObject(
+          expect.objectContaining({
+            isTypescript: false,
+            transpilerOptions: { test: "js" },
+            formatOptions: { singleQuote: false },
+            routes: expect.any(Array)
+          })
+        );
+        expect(result.routes).toHaveLength(
+          Object.values(resolvedRouteFiles).length
+        );
+      });
+    });
+    it("figures out the locale if a home route already exists", async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        const route = "routes/pages.$handle";
+        const directories = await createHydrogenFixture(tmpDir, {
+          files: [
+            ["tsconfig.json", JSON.stringify({ compilerOptions: { test: "ts" } })],
+            ["app/routes/($locale)._index.tsx", "export const test = true;"]
+          ],
+          templates: [[route + ".tsx", `const str = "hello world"`]]
+        });
+        vi.mocked(getRemixConfig).mockResolvedValue({
+          ...directories,
+          tsconfigPath: "somewhere",
+          future: {
+            v2_routeConvention: true
+          }
+        });
+        const result = await generateRoutes({
+          routeName: ["page"],
+          directory: directories.rootDirectory,
+          templatesRoot: directories.templatesRoot
+        });
+        expect(result).toMatchObject(
+          expect.objectContaining({
+            isTypescript: true,
+            transpilerOptions: void 0,
+            routes: expect.any(Array),
+            formatOptions: expect.any(Object)
+          })
+        );
+        expect(result.routes).toHaveLength(1);
+        expect(result.routes[0]).toMatchObject({
+          destinationRoute: expect.stringContaining("($locale).pages.$handle")
+        });
+      });
+    });
+  });
+  describe("generateProjectFile", () => {
+    it("generates a route file for Remix v1", async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        const route = "routes/pages.$handle";
+        const directories = await createHydrogenFixture(tmpDir, {
+          files: [],
+          templates: [[route + ".tsx", `const str = "hello world"`]]
+        });
+        await generateProjectFile(route, {
+          ...directories,
+          v2Flags: {
+            isV2RouteConvention: false
+          }
+        });
+        expect(
+          await readProjectFile(directories, route.replace(".", "/"), "jsx")
+        ).toContain(`const str = 'hello world'`);
+      });
+    });
+    it("generates a route file for Remix v2", async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        const route = "routes/custom.path.$handle._index";
+        const directories = await createHydrogenFixture(tmpDir, {
+          files: [],
+          templates: [[route + ".tsx", `const str = "hello world"`]]
+        });
+        await generateProjectFile(route, {
+          ...directories,
+          v2Flags: { isV2RouteConvention: true }
+        });
+        expect(await readProjectFile(directories, route, "jsx")).toContain(
+          `const str = 'hello world'`
+        );
+      });
+    });
+    it("generates route files with locale prefix", async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        const routeCode = `const str = 'hello world'`;
+        const directories = await createHydrogenFixture(tmpDir, {
+          files: [],
+          templates: [
+            ["routes/_index.tsx", routeCode],
+            ["routes/pages.$handle.tsx", routeCode],
+            ["routes/[robots.txt].tsx", routeCode],
+            ["routes/[sitemap.xml].tsx", routeCode]
+          ]
+        });
+        const localePrefix = "locale";
+        await generateProjectFile("routes/_index", {
+          ...directories,
+          v2Flags: { isV2RouteConvention: true },
+          localePrefix,
+          typescript: true
+        });
+        await generateProjectFile("routes/pages.$handle", {
+          ...directories,
+          v2Flags: { isV2RouteConvention: false },
+          localePrefix,
+          typescript: true
+        });
+        await generateProjectFile("routes/[sitemap.xml]", {
+          ...directories,
+          v2Flags: { isV2RouteConvention: true },
+          localePrefix,
+          typescript: true
+        });
+        await generateProjectFile("routes/[robots.txt]", {
+          ...directories,
+          v2Flags: { isV2RouteConvention: true },
+          localePrefix,
+          typescript: true
+        });
+        await expect(
+          readProjectFile(directories, `routes/($locale)._index`)
+        ).resolves.toContain(routeCode);
+        await expect(
+          readProjectFile(directories, `routes/($locale).[sitemap.xml]`)
+        ).resolves.toContain(routeCode);
+        await expect(
+          readProjectFile(directories, `routes/[robots.txt]`)
+        ).resolves.toContain(routeCode);
+        await expect(
+          readProjectFile(directories, `routes/($locale)/pages/$handle`)
+        ).resolves.toContain(routeCode);
+      });
+    });
+    it("produces a typescript file when typescript argument is true", async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        const route = "routes/pages.$handle";
+        const directories = await createHydrogenFixture(tmpDir, {
+          files: [],
+          templates: [[route + ".tsx", 'const str = "hello typescript"']]
+        });
+        await generateProjectFile(route, {
+          ...directories,
+          typescript: true,
+          v2Flags: { isV2RouteConvention: true }
+        });
+        expect(await readProjectFile(directories, route)).toContain(
+          `const str = 'hello typescript'`
+        );
+      });
+    });
+    it("prompts the user if there the file already exists", async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        vi.mocked(renderConfirmationPrompt).mockImplementationOnce(
+          async () => true
+        );
+        const route = "routes/page.$handle";
+        const directories = await createHydrogenFixture(tmpDir, {
+          files: [[`app/${route}.jsx`, 'const str = "I exist"']],
+          templates: [[route + ".tsx", 'const str = "hello world"']]
+        });
+        await generateProjectFile(route, {
+          ...directories,
+          v2Flags: { isV2RouteConvention: true }
+        });
+        expect(renderConfirmationPrompt).toHaveBeenCalledWith(
+          expect.objectContaining({
+            message: expect.stringContaining("already exists")
+          })
+        );
+      });
+    });
+    it("does not prompt the user if the force property is true", async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        vi.mocked(renderConfirmationPrompt).mockImplementationOnce(
+          async () => true
+        );
+        const route = "routes/page.$pageHandle";
+        const directories = await createHydrogenFixture(tmpDir, {
+          files: [[`app/${route}.jsx`, 'const str = "I exist"']],
+          templates: [[route + ".tsx", 'const str = "hello world"']]
+        });
+        await generateProjectFile(route, {
+          ...directories,
+          force: true
+        });
+        expect(renderConfirmationPrompt).not.toHaveBeenCalled();
+      });
+    });
+    it("generates all the route dependencies", async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        const templates = [
+          [
+            "routes/pages.$pageHandle.tsx",
+            `import Dep from 'some-node-dep';
+import AnotherRoute from './AnotherRoute';
+import Form from '~/components/Form';
+import {
+
+
+Button} from '../components/Button';
+import {stuff} from '../utils';
+import {serverOnly} from '../something.server';
+import styles from '../styles/app.css';
+export {Dep, AnotherRoute, Form, Button, stuff, serverOnly, styles};
+`
+          ],
+          [
+            "components/Form.tsx",
+            `import {Button} from './Button';
+import {Text} from './Text';
+export {Button, Text};
+`
+          ],
+          ["components/Button.tsx", `export const Button = '';
+`],
+          ["components/Text.tsx", `export const Text = '';
+`],
+          ["utils/index.ts", `export {stuff} from './stuff';
+`],
+          ["utils/stuff.ts", `export const stuff = '';
+`],
+          ["something.server.ts", `export const serverOnly = '';
+`],
+          ["styles/app.css", `.red{color:red;}`]
+        ];
+        const directories = await createHydrogenFixture(tmpDir, { templates });
+        vi.mocked(getRemixConfig).mockResolvedValue(directories);
+        await generateProjectFile("routes/pages.$pageHandle", {
+          ...directories,
+          v2Flags: { isV2RouteConvention: true },
+          force: true
+        });
+        await Promise.all(
+          templates.map(async ([file, content]) => {
+            const actualFile = joinPath(
+              directories.appDirectory,
+              file.replace(".ts", ".js")
+            );
+            await expect(fileExists(actualFile)).resolves.toBeTruthy();
+            await expect(readFile(actualFile)).resolves.toEqual(
+              content.replace(/\{\n+/, "{")
+            );
+          })
+        );
+      });
+    });
+  });
+});
+async function createHydrogenFixture(directory, {
+  files = [],
+  templates = []
+}) {
+  const projectDir = "project";
+  for (const item of files) {
+    const [filePath, fileContent] = item;
+    const fullFilePath = joinPath(directory, projectDir, filePath);
+    await mkdir(dirname(fullFilePath));
+    await writeFile(fullFilePath, fileContent);
+  }
+  for (const item of templates) {
+    const [filePath, fileContent] = item;
+    const fullFilePath = getTemplateAppFile(filePath, directory);
+    await mkdir(dirname(fullFilePath));
+    await writeFile(fullFilePath, fileContent);
+  }
+  return {
+    rootDirectory: joinPath(directory, projectDir),
+    appDirectory: joinPath(directory, projectDir, "app"),
+    templatesRoot: directory
+  };
+}

package/dist/lib/shell.js

@@ -6,7 +6,7 @@ import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
 import { execAsync } from './process.js';
 
 const ALIAS_NAME = "h2";
-const isWindows = () => process.platform === "win32";
+const isWindows = () => os.platform() === "win32";
 const isGitBash = () => !!process.env.MINGW_PREFIX;
 function resolveFromHome(filepath) {
   if (filepath[0] === "~") {
@@ -107,15 +107,62 @@ async function hasCliAlias() {
     return false;
   }
 }
-async function getCliCommand() {
-  if (await hasCliAlias()) {
+async function createPlatformShortcut() {
+  const shortcuts = isWindows() && !isGitBash() ? await createShortcutsForWindows() : await createShortcutsForUnix();
+  return shortcuts;
+}
+const BASH_ZSH_COMMAND = `
+# Shopify Hydrogen alias to local projects
+alias ${ALIAS_NAME}='$(npm prefix -s)/node_modules/.bin/shopify hydrogen'`;
+const FISH_FUNCTION = `
+function ${ALIAS_NAME} --wraps='shopify hydrogen' --description 'Shortcut for the Hydrogen CLI'
+   set npmPrefix (npm prefix -s)
+   $npmPrefix/node_modules/.bin/shopify hydrogen $argv
+end
+`;
+async function createShortcutsForUnix() {
+  const shells = [];
+  if (await shellWriteAlias("zsh", ALIAS_NAME, BASH_ZSH_COMMAND)) {
+    shells.push("zsh");
+  }
+  if (await shellWriteAlias("bash", ALIAS_NAME, BASH_ZSH_COMMAND)) {
+    shells.push("bash");
+  }
+  if (await shellWriteAlias("fish", ALIAS_NAME, FISH_FUNCTION)) {
+    shells.push("fish");
+  }
+  return shells;
+}
+const PS_FUNCTION = `function Invoke-Local-H2 {$npmPrefix = npm prefix -s; Invoke-Expression "$npmPrefix\\node_modules\\.bin\\shopify.ps1 hydrogen $Args"}; Set-Alias -Name ${ALIAS_NAME} -Value Invoke-Local-H2`;
+const PS_APPEND_PROFILE_COMMAND = `
+if (!(Test-Path -Path $PROFILE)) {
+  New-Item -ItemType File -Path $PROFILE -Force
+}
+
+$profileContent = Get-Content -Path $PROFILE
+if (!$profileContent -or $profileContent -NotLike '*Invoke-Local-H2*') {
+  Add-Content -Path $PROFILE -Value '${PS_FUNCTION}'
+}
+`;
+async function createShortcutsForWindows() {
+  const shells = [];
+  if (await shellRunScript(PS_APPEND_PROFILE_COMMAND, "powershell.exe")) {
+    shells.push("PowerShell");
+  }
+  if (await shellRunScript(PS_APPEND_PROFILE_COMMAND, "pwsh.exe")) {
+    shells.push("PowerShell 7+");
+  }
+  return shells;
+}
+async function getCliCommand(directory = process.cwd(), forcePkgManager) {
+  if (!forcePkgManager && await hasCliAlias()) {
     return ALIAS_NAME;
   }
   let cli = "npx";
-  const pkgManager = await getPackageManager(process.cwd()).catch(() => null);
+  const pkgManager = forcePkgManager ?? await getPackageManager(directory).catch(() => null);
   if (pkgManager === "pnpm" || pkgManager === "yarn")
     cli = pkgManager;
   return `${cli} shopify hydrogen`;
 }
 
-export { ALIAS_NAME, getCliCommand, isGitBash, isWindows, shellRunScript, shellWriteAlias };
+export { ALIAS_NAME, createPlatformShortcut, getCliCommand, isGitBash, isWindows, shellRunScript, shellWriteAlias };

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 };