@shopify/cli-hydrogen 4.0.8 → 4.1.0

package/dist/commands/hydrogen/generate/route.test.js

@@ -1,24 +1,16 @@
 import { describe, beforeEach, vi, it, expect } from 'vitest';
 import { temporaryDirectoryTask } from 'tempy';
 import { runGenerate, GENERATOR_TEMPLATES_DIR } from './route.js';
-import { file, path, ui } from '@shopify/cli-kit';
+import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
+import { readFile, mkdir, writeFile } from '@shopify/cli-kit/node/fs';
+import { joinPath, dirname } from '@shopify/cli-kit/node/path';
+import { convertRouteToV2 } from '../../../lib/remix-version-interop.js';
 
 describe("generate/route", () => {
   beforeEach(() => {
     vi.resetAllMocks();
-    vi.mock("@shopify/cli-kit", async () => {
-      const cliKit = await vi.importActual("@shopify/cli-kit");
-      return {
-        ...cliKit,
-        output: {
-          ...cliKit.output,
-          success: vi.fn()
-        },
-        ui: {
-          prompt: vi.fn()
-        }
-      };
-    });
+    vi.mock("@shopify/cli-kit/node/output");
+    vi.mock("@shopify/cli-kit/node/ui");
   });
   it("generates a route file", async () => {
     await temporaryDirectoryTask(async (tmpDir) => {
@@ -27,12 +19,30 @@ describe("generate/route", () => {
         files: [],
         templates: [[route, `const str = "hello world"`]]
       });
-      await runGenerate(route, {
+      await runGenerate(route, route, {
         directory: appRoot,
         templatesRoot
       });
       expect(
-        await file.read(path.join(appRoot, "app/routes", `${route}.jsx`))
+        await readFile(joinPath(appRoot, "app/routes", `${route}.jsx`))
+      ).toContain(`const str = 'hello world'`);
+    });
+  });
+  it("generates a route file for Remix v2", async () => {
+    await temporaryDirectoryTask(async (tmpDir) => {
+      const route = "custom/path/$handle/index";
+      const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
+        files: [],
+        templates: [[route, `const str = "hello world"`]]
+      });
+      await runGenerate(route, convertRouteToV2(route), {
+        directory: appRoot,
+        templatesRoot
+      });
+      expect(
+        await readFile(
+          joinPath(appRoot, "app/routes", `custom.path.$handle._index.jsx`)
+        )
       ).toContain(`const str = 'hello world'`);
     });
   });
@@ -43,55 +53,53 @@ describe("generate/route", () => {
         files: [],
         templates: [[route, 'const str = "hello typescript"']]
       });
-      await runGenerate(route, {
+      await runGenerate(route, route, {
         directory: appRoot,
         templatesRoot,
         typescript: true
       });
       expect(
-        await file.read(path.join(appRoot, "app/routes", `${route}.tsx`))
+        await readFile(joinPath(appRoot, "app/routes", `${route}.tsx`))
       ).toContain(`const str = 'hello typescript'`);
     });
   });
   it("prompts the user if there the file already exists", async () => {
     await temporaryDirectoryTask(async (tmpDir) => {
-      vi.mocked(ui.prompt).mockImplementationOnce(async () => {
-        return { value: "overwrite" };
-      });
+      vi.mocked(renderConfirmationPrompt).mockImplementationOnce(
+        async () => true
+      );
       const route = "page/$pageHandle";
       const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
         files: [[`app/routes/${route}.jsx`, 'const str = "I exist"']],
         templates: [[route, 'const str = "hello world"']]
       });
-      await runGenerate(route, {
+      await runGenerate(route, route, {
         directory: appRoot,
         templatesRoot
       });
-      expect(ui.prompt).toHaveBeenCalledWith(
-        expect.arrayContaining([
-          expect.objectContaining({
-            message: expect.stringContaining("already exists")
-          })
-        ])
+      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(ui.prompt).mockImplementationOnce(async () => {
-        return { value: "overwrite" };
-      });
+      vi.mocked(renderConfirmationPrompt).mockImplementationOnce(
+        async () => true
+      );
       const route = "page/$pageHandle";
       const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
         files: [[`app/routes/${route}.jsx`, 'const str = "I exist"']],
         templates: [[route, 'const str = "hello world"']]
       });
-      await runGenerate(route, {
+      await runGenerate(route, route, {
         directory: appRoot,
         templatesRoot,
         force: true
       });
-      expect(ui.prompt).not.toHaveBeenCalled();
+      expect(renderConfirmationPrompt).not.toHaveBeenCalled();
     });
   });
 });
@@ -104,23 +112,23 @@ async function createHydrogen(directory, {
 }) {
   for (const item of files) {
     const [filePath, fileContent] = item;
-    const fullFilePath = path.join(directory, "app", filePath);
-    await file.mkdir(path.dirname(fullFilePath));
-    await file.write(fullFilePath, fileContent);
+    const fullFilePath = joinPath(directory, "app", filePath);
+    await mkdir(dirname(fullFilePath));
+    await writeFile(fullFilePath, fileContent);
   }
   for (const item of templates) {
     const [filePath, fileContent] = item;
-    const fullFilePath = path.join(
+    const fullFilePath = joinPath(
       directory,
       GENERATOR_TEMPLATES_DIR,
       "routes",
       `${filePath}.tsx`
     );
-    await file.mkdir(path.dirname(fullFilePath));
-    await file.write(fullFilePath, fileContent);
+    await mkdir(dirname(fullFilePath));
+    await writeFile(fullFilePath, fileContent);
   }
   return {
-    appRoot: path.join(directory, "app"),
+    appRoot: joinPath(directory, "app"),
     templatesRoot: directory
   };
 }

package/dist/commands/hydrogen/generate/routes.d.ts

@@ -5,10 +5,10 @@ declare class GenerateRoutes extends Command {
     static description: string;
     static hidden: true;
     static flags: {
-        adapter: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        adapter: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
         typescript: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
         force: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
-        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
     };
     run(): Promise<void>;
 }

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

@@ -5,9 +5,9 @@ declare class Init extends Command {
     static description: string;
     static flags: {
         force: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
-        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>;
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        language: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        template: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
         'install-deps': _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
     };
     run(): Promise<void>;

package/dist/commands/hydrogen/init.js

@@ -1,12 +1,14 @@
 import Command from '@shopify/cli-kit/node/base-command';
 import { packageManagerUsedForCreating, installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
-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, parseProcessFlags } from '../../utils/flags.js';
-import { transpileProject } from '../../utils/transpile-ts.js';
-import { getLatestTemplates } from '../../utils/template-downloader.js';
-import { checkHydrogenVersion } from '../../utils/check-version.js';
+import { renderFatalError, renderSelectPrompt, renderTextPrompt, renderConfirmationPrompt, renderInfo, renderTasks, renderSuccess } from '@shopify/cli-kit/node/ui';
+import { Flags } from '@oclif/core';
+import { basename, resolvePath, joinPath } from '@shopify/cli-kit/node/path';
+import { rmdir, copyFile, fileExists, isDirectory } from '@shopify/cli-kit/node/fs';
+import { outputContent, outputToken } from '@shopify/cli-kit/node/output';
+import { commonFlags, flagsToCamelObject, parseProcessFlags } from '../../lib/flags.js';
+import { transpileProject } from '../../lib/transpile-ts.js';
+import { getLatestTemplates } from '../../lib/template-downloader.js';
+import { checkHydrogenVersion } from '../../lib/check-version.js';
 import { readdir } from 'fs/promises';
 import { fileURLToPath } from 'url';
 
@@ -32,13 +34,13 @@ class Init extends Command {
     }),
     "install-deps": Flags.boolean({
       description: "Auto install dependencies using the active package manager",
-      env: "SHOPIFY_HYDROGEN_INSTALL_DEPS",
+      env: "SHOPIFY_HYDROGEN_FLAG_INSTALL_DEPS",
       allowNo: true
     })
   };
   async run() {
     const { flags } = await this.parse(Init);
-    await runInit({ ...flags });
+    await runInit(flagsToCamelObject(flags));
   }
 }
 async function runInit(options = parseProcessFlags(process.argv, FLAG_MAP)) {
@@ -53,106 +55,77 @@ async function runInit(options = parseProcessFlags(process.argv, FLAG_MAP)) {
       packageManager2 === "unknown" ? "" : `Please use the latest version with \`${packageManager2} create @shopify/hydrogen@latest\``
     );
   }
-  const templatesPromise = getLatestTemplates().catch((error) => {
-    output.info("\n\n\n");
+  let templatesDownloaded = false;
+  const templatesPromise = getLatestTemplates().then((result) => {
+    templatesDownloaded = true;
+    return result;
+  }).catch((error) => {
     renderFatalError(error);
     process.exit(1);
   });
-  const { ui, file } = await import('@shopify/cli-kit');
-  const { renderSuccess, renderInfo } = await import('@shopify/cli-kit/node/ui');
-  const prompts = [];
-  if (!options.template) {
-    prompts.push({
-      type: "select",
-      name: "template",
-      message: "Choose a template",
-      choices: STARTER_TEMPLATES.map((value) => ({
-        name: value.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()),
-        value
-      }))
-    });
-  }
-  if (!options.language) {
-    prompts.push({
-      type: "select",
-      name: "language",
-      message: "Choose a language",
-      choices: [
-        { name: "JavaScript", value: "js" },
-        { name: "TypeScript", value: "ts" }
-      ],
-      default: "js"
-    });
-  }
-  if (!options.path) {
-    prompts.push({
-      type: "input",
-      name: "path",
-      message: "Where would you like to create your app?",
-      default: "hydrogen-storefront"
-    });
-  }
-  const {
-    path: location = options.path,
-    template: appTemplate = options.template,
-    language = options.language ?? "js"
-  } = prompts.length > 0 ? await ui.prompt(prompts) : options;
-  const projectName = path.basename(location);
-  const projectDir = path.resolve(process.cwd(), location);
+  const appTemplate = options.template ?? await renderSelectPrompt({
+    message: "Choose a template",
+    defaultValue: "hello-world",
+    choices: STARTER_TEMPLATES.map((value) => ({
+      label: value.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()),
+      value
+    }))
+  });
+  const language = options.language ?? await renderSelectPrompt({
+    message: "Choose a language",
+    choices: [
+      { label: "JavaScript", value: "js" },
+      { label: "TypeScript", value: "ts" }
+    ],
+    defaultValue: "js"
+  });
+  const location = options.path ?? await renderTextPrompt({
+    message: "Where would you like to create your app?",
+    defaultValue: "hydrogen-storefront"
+  });
+  const projectName = basename(location);
+  const projectDir = resolvePath(process.cwd(), location);
   if (await projectExists(projectDir)) {
     if (!options.force) {
-      const { deleteFiles } = await ui.prompt([
-        {
-          type: "select",
-          name: "deleteFiles",
-          message: `${location} is not an empty directory. Do you want to delete the existing files and continue?`,
-          choices: [
-            { name: "Yes, delete the files", value: "true" },
-            { name: "No, do not delete the files", value: "false" }
-          ],
-          default: "false"
-        }
-      ]);
-      if (deleteFiles === "false") {
+      const deleteFiles = await renderConfirmationPrompt({
+        message: `${location} is not an empty directory. Do you want to delete the existing files and continue?`,
+        defaultValue: false
+      });
+      if (!deleteFiles) {
         renderInfo({
           headline: `Destination path ${location} already exists and is not an empty directory. You may use \`--force\` or \`-f\` to override it.`
         });
         return;
       }
     }
-    await file.rmdir(projectDir, { force: true });
+    await rmdir(projectDir, { force: true });
+  }
+  if (!templatesDownloaded) {
+    await renderTasks([
+      {
+        title: "Downloading templates",
+        task: async () => {
+          await templatesPromise;
+        }
+      }
+    ]);
   }
-  let downloaded = false;
-  setTimeout(
-    () => !downloaded && output.info("\n\u{1F4E5} Downloading templates..."),
-    150
-  );
   const { templatesDir } = await templatesPromise;
-  downloaded = true;
-  await file.copy(path.join(templatesDir, appTemplate), projectDir);
+  await copyFile(joinPath(templatesDir, appTemplate), projectDir);
   if (language === "js") {
     try {
       await transpileProject(projectDir);
     } catch (error) {
-      await file.rmdir(projectDir, { force: true });
+      await rmdir(projectDir, { force: true });
       throw error;
     }
   }
   let depsInstalled = false;
   let packageManager = await packageManagerUsedForCreating();
   if (packageManager !== "unknown") {
-    const installDeps = options.installDeps ?? (await ui.prompt([
-      {
-        type: "select",
-        name: "installDeps",
-        message: `Install dependencies with ${packageManager}?`,
-        choices: [
-          { name: "Yes", value: "true" },
-          { name: "No", value: "false" }
-        ],
-        default: "true"
-      }
-    ])).installDeps === "true";
+    const installDeps = options.installDeps ?? await renderConfirmationPrompt({
+      message: `Install dependencies with ${packageManager}?`
+    });
     if (installDeps) {
       await installNodeModules({
         directory: projectDir,
@@ -169,20 +142,28 @@ async function runInit(options = parseProcessFlags(process.argv, FLAG_MAP)) {
   renderSuccess({
     headline: `${projectName} is ready to build.`,
     nextSteps: [
-      `Run \`cd ${location}\`${depsInstalled ? "" : `, \`${packageManager} install\`,`} and \`${packageManager + (packageManager === "npm" ? " run" : "")} dev\` to start your local development server and start building.`
-    ],
+      outputContent`Run ${outputToken.genericShellCommand(`cd ${location}`)}`.value,
+      depsInstalled ? void 0 : outputContent`Run ${outputToken.genericShellCommand(
+        `${packageManager} install`
+      )} to install the dependencies`.value,
+      outputContent`Run ${outputToken.packagejsonScript(
+        packageManager,
+        "dev"
+      )} to start your local development server and start building`.value
+    ].filter((step) => Boolean(step)),
     reference: [
-      "Building with Hydrogen: https://shopify.dev/custom-storefronts/hydrogen"
+      "Building with Hydrogen: https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development"
     ]
   });
-  renderInfo({
-    headline: `Your project will display inventory from the Hydrogen Demo Store.`,
-    body: `To connect this project to your Shopify store\u2019s inventory, update \`${projectName}/.env\` with your store ID and Storefront API key.`
-  });
+  if (appTemplate === "demo-store") {
+    renderInfo({
+      headline: `Your project will display inventory from the Hydrogen Demo Store.`,
+      body: `To connect this project to your Shopify store\u2019s inventory, update \`${projectName}/.env\` with your store ID and Storefront API key.`
+    });
+  }
 }
 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;
+  return await fileExists(projectDir) && await isDirectory(projectDir) && (await readdir(projectDir)).length > 0;
 }
 function supressNodeExperimentalWarnings() {
   const warningListener = process.listeners("warning")[0];

package/dist/commands/hydrogen/init.test.js

@@ -0,0 +1,126 @@
+import { describe, beforeEach, vi, it, expect } from 'vitest';
+import { temporaryDirectoryTask } from 'tempy';
+import { runInit } from './init.js';
+import { renderSelectPrompt, renderConfirmationPrompt, renderTextPrompt, renderInfo } from '@shopify/cli-kit/node/ui';
+import { outputContent } from '@shopify/cli-kit/node/output';
+import { installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
+
+describe("init", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    vi.mock("@shopify/cli-kit/node/output");
+    vi.mock("../../lib/transpile-ts.js");
+    vi.mock("../../lib/template-downloader.js", async () => ({
+      getLatestTemplates: () => Promise.resolve({})
+    }));
+    vi.mock("@shopify/cli-kit/node/node-package-manager");
+    vi.mocked(outputContent).mockImplementation(() => ({
+      value: ""
+    }));
+    vi.mock("@shopify/cli-kit/node/ui");
+    vi.mock("@shopify/cli-kit/node/fs");
+  });
+  const defaultOptions = (stubs) => ({
+    template: "hello-world",
+    language: "js",
+    path: "path/to/project",
+    ...stubs
+  });
+  describe.each([
+    {
+      flag: "template",
+      value: "hello-world",
+      condition: { fn: renderSelectPrompt, match: /template/i }
+    },
+    {
+      flag: "installDeps",
+      value: true,
+      condition: { fn: renderConfirmationPrompt, match: /install dependencies/i }
+    },
+    {
+      flag: "language",
+      value: "ts",
+      condition: { fn: renderSelectPrompt, match: /language/i }
+    },
+    {
+      flag: "path",
+      value: "./my-app",
+      condition: { fn: renderTextPrompt, match: /where/i }
+    }
+  ])("flag $flag", ({ flag, value, condition }) => {
+    it(`does not prompt the user for ${flag} when a value is passed in options`, async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        const options = defaultOptions({
+          path: tmpDir,
+          [flag]: value
+        });
+        await runInit(options);
+        expect(condition.fn).not.toHaveBeenCalledWith(
+          expect.objectContaining({
+            message: expect.stringMatching(condition.match)
+          })
+        );
+      });
+    });
+    it(`prompts the user for ${flag} when no value is passed in options`, async () => {
+      await temporaryDirectoryTask(async (tmpDir) => {
+        const options = defaultOptions({
+          path: tmpDir,
+          [flag]: void 0
+        });
+        await runInit(options);
+        expect(condition.fn).toHaveBeenCalledWith(
+          expect.objectContaining({
+            message: expect.stringMatching(condition.match)
+          })
+        );
+      });
+    });
+  });
+  it("installs dependencies when installDeps is true", async () => {
+    await temporaryDirectoryTask(async (tmpDir) => {
+      const options = defaultOptions({ installDeps: true, path: tmpDir });
+      await runInit(options);
+      expect(installNodeModules).toHaveBeenCalled();
+    });
+  });
+  it("does not install dependencies when installDeps is false", async () => {
+    await temporaryDirectoryTask(async (tmpDir) => {
+      const options = defaultOptions({ installDeps: false, path: tmpDir });
+      await runInit(options);
+      expect(installNodeModules).not.toHaveBeenCalled();
+    });
+  });
+  it("displays inventory information when using the demo-store template", async () => {
+    await temporaryDirectoryTask(async (tmpDir) => {
+      const options = defaultOptions({
+        installDeps: false,
+        path: tmpDir,
+        template: "demo-store"
+      });
+      await runInit(options);
+      expect(renderInfo).toHaveBeenCalledTimes(1);
+      expect(renderInfo).toHaveBeenCalledWith(
+        expect.objectContaining({
+          body: expect.stringContaining(
+            "To connect this project to your Shopify store\u2019s inventory"
+          ),
+          headline: expect.stringContaining(
+            "Your project will display inventory from the Hydrogen Demo Store"
+          )
+        })
+      );
+    });
+  });
+  it("does not display inventory information when using non-demo-store templates", async () => {
+    await temporaryDirectoryTask(async (tmpDir) => {
+      const options = defaultOptions({
+        installDeps: false,
+        path: tmpDir,
+        template: "pizza-store"
+      });
+      await runInit(options);
+      expect(renderInfo).toHaveBeenCalledTimes(0);
+    });
+  });
+});

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

@@ -4,8 +4,8 @@ import Command from '@shopify/cli-kit/node/base-command';
 declare class Preview extends Command {
     static description: string;
     static flags: {
-        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
-        port: _oclif_core_lib_interfaces_parser_js.OptionFlag<number>;
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        port: _oclif_core_lib_interfaces_parser_js.OptionFlag<number, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
     };
     run(): Promise<void>;
 }

package/dist/commands/hydrogen/preview.js

@@ -1,8 +1,8 @@
 import Command from '@shopify/cli-kit/node/base-command';
-import { muteDevLogs } from '../../utils/log.js';
-import { getProjectPaths } from '../../utils/config.js';
-import { commonFlags } from '../../utils/flags.js';
-import { startMiniOxygen } from '../../utils/mini-oxygen.js';
+import { muteDevLogs } from '../../lib/log.js';
+import { getProjectPaths } from '../../lib/config.js';
+import { commonFlags } from '../../lib/flags.js';
+import { startMiniOxygen } from '../../lib/mini-oxygen.js';
 
 class Preview extends Command {
   static description = "Runs a Hydrogen storefront in an Oxygen worker for production.";

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

@@ -0,0 +1,9 @@
+import Command from '@shopify/cli-kit/node/base-command';
+
+declare class Shortcut extends Command {
+    static description: string;
+    run(): Promise<void>;
+}
+declare function runCreateShortcut(): Promise<void>;
+
+export { Shortcut as default, runCreateShortcut };

package/dist/commands/hydrogen/shortcut.js

@@ -0,0 +1,74 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { renderSuccess, renderFatalError } from '@shopify/cli-kit/node/ui';
+import { isWindows, isGitBash, supportsShell, hasAlias, shellWriteFile, homeFileExists, shellRunScript } from '../../lib/shell.js';
+
+const ALIAS_NAME = "h2";
+class Shortcut extends Command {
+  static description = `Creates a global \`${ALIAS_NAME}\` shortcut for the Hydrogen CLI`;
+  async run() {
+    await runCreateShortcut();
+  }
+}
+async function runCreateShortcut() {
+  const shortcuts = isWindows() && !isGitBash() ? await createShortcutsForWindows() : await createShortcutsForUnix();
+  if (shortcuts.length > 0) {
+    renderSuccess({
+      headline: `Shortcut ready for the following shells: ${shortcuts.join(
+        ", "
+      )}.
+Restart your terminal session and run \`${ALIAS_NAME}\` from your local project.`
+    });
+  } else {
+    renderFatalError({
+      name: "error",
+      type: 0,
+      message: "No supported shell found.",
+      tryMessage: "Please create a shortcut manually."
+    });
+  }
+}
+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 (supportsShell("zsh") && (hasAlias(ALIAS_NAME, "~/.zshrc") || shellWriteFile("~/.zshrc", BASH_ZSH_COMMAND, true))) {
+    shells.push("zsh");
+  }
+  if (supportsShell("bash") && (hasAlias(ALIAS_NAME, "~/.bashrc") || shellWriteFile("~/.bashrc", BASH_ZSH_COMMAND, true))) {
+    shells.push("bash");
+  }
+  if (supportsShell("fish") && await homeFileExists("~/.config/fish/functions") && shellWriteFile(`~/.config/fish/functions/${ALIAS_NAME}.fish`, 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 (shellRunScript(PS_APPEND_PROFILE_COMMAND, "powershell.exe")) {
+    shells.push("PowerShell");
+  }
+  if (shellRunScript(PS_APPEND_PROFILE_COMMAND, "pwsh.exe")) {
+    shells.push("PowerShell 7+");
+  }
+  return shells;
+}
+
+export { Shortcut as default, runCreateShortcut };