@shopify/cli-hydrogen 4.0.9 → 4.1.1

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

@@ -4,12 +4,12 @@ import Command from '@shopify/cli-kit/node/base-command';
 declare class Build extends Command {
     static description: string;
     static flags: {
-        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>;
         sourcemap: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
         "disable-route-warning": _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
-        base: _oclif_core_lib_interfaces_parser_js.OptionFlag<unknown>;
-        entry: _oclif_core_lib_interfaces_parser_js.OptionFlag<unknown>;
-        target: _oclif_core_lib_interfaces_parser_js.OptionFlag<unknown>;
+        base: _oclif_core_lib_interfaces_parser_js.OptionFlag<unknown, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        entry: _oclif_core_lib_interfaces_parser_js.OptionFlag<unknown, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        target: _oclif_core_lib_interfaces_parser_js.OptionFlag<unknown, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
     };
     run(): Promise<void>;
 }

package/dist/commands/hydrogen/build.js

@@ -1,13 +1,14 @@
 import path from 'path';
-import { file, output } from '@shopify/cli-kit';
-import colors from '@shopify/cli-kit/node/colors';
-import { getProjectPaths, getRemixConfig } from '../../utils/config.js';
-import { commonFlags, deprecated, flagsToCamelObject } from '../../utils/flags.js';
+import { outputInfo, outputContent, outputToken, outputWarn } from '@shopify/cli-kit/node/output';
+import { rmdir, fileSize, copyFile } from '@shopify/cli-kit/node/fs';
+import { getProjectPaths, getRemixConfig } from '../../lib/config.js';
+import { commonFlags, deprecated, flagsToCamelObject } from '../../lib/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
-import Flags from '@oclif/core/lib/flags.js';
-import { checkLockfileStatus } from '../../utils/check-lockfile.js';
-import { findMissingRoutes } from '../../utils/missing-routes.js';
+import { Flags } from '@oclif/core';
+import { checkLockfileStatus } from '../../lib/check-lockfile.js';
+import { findMissingRoutes } from '../../lib/missing-routes.js';
 import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
+import { colors } from '../../lib/colors.js';
 
 const LOG_WORKER_BUILT = "\u{1F4E6} Worker built";
 class Build extends Command {
@@ -46,9 +47,9 @@ async function runBuild({
   console.time(LOG_WORKER_BUILT);
   const [remixConfig] = await Promise.all([
     getRemixConfig(root),
-    file.rmdir(buildPath, { force: true })
+    rmdir(buildPath, { force: true })
   ]);
-  output.info(`
+  outputInfo(`
 \u{1F3D7}\uFE0F  Building in ${process.env.NODE_ENV} mode...`);
   const { build } = await import('@remix-run/dev/dist/compiler/build.js');
   const { logCompileFailure } = await import('@remix-run/dev/dist/compiler/onCompileFailure.js');
@@ -65,14 +66,14 @@ async function runBuild({
   ]);
   if (process.env.NODE_ENV !== "development") {
     console.timeEnd(LOG_WORKER_BUILT);
-    const sizeMB = await file.size(buildPathWorkerFile) / (1024 * 1024);
-    output.info(
-      output.content`   ${colors.dim(
+    const sizeMB = await fileSize(buildPathWorkerFile) / (1024 * 1024);
+    outputInfo(
+      outputContent`   ${colors.dim(
         path.relative(root, buildPathWorkerFile)
-      )}  ${output.token.yellow(sizeMB.toFixed(2))} MB\n`
+      )}  ${outputToken.yellow(sizeMB.toFixed(2))} MB\n`
     );
     if (sizeMB >= 1) {
-      output.warn(
+      outputWarn(
         `\u{1F6A8} Worker bundle exceeds 1 MB! This can delay your worker response.${remixConfig.serverMinify ? "" : " Minify your bundle by adding `serverMinify: true` to remix.config.js."}
 `
       );
@@ -83,7 +84,7 @@ async function runBuild({
     if (missingRoutes.length) {
       const packageManager = await getPackageManager(root);
       const exec = packageManager === "npm" ? "npx" : packageManager;
-      output.warn(
+      outputWarn(
         `Heads up: Shopify stores have a number of standard routes that aren\u2019t set up yet.
 Some functionality and backlinks might not work as expected until these are created or redirects are set up.
 This build is missing ${missingRoutes.length} route${missingRoutes.length > 1 ? "s" : ""}. For more details, run \`${exec} shopify hydrogen check routes\`.
@@ -94,7 +95,7 @@ This build is missing ${missingRoutes.length} route${missingRoutes.length > 1 ?
   process.exit(0);
 }
 async function copyPublicFiles(publicPath, buildPathClient) {
-  return file.copy(publicPath, buildPathClient);
+  return copyFile(publicPath, buildPathClient);
 }
 
 export { copyPublicFiles, Build as default, runBuild };

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

@@ -4,14 +4,11 @@ import Command from '@shopify/cli-kit/node/base-command';
 declare class GenerateRoute extends Command {
     static description: string;
     static flags: {
-        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>;
     };
     static args: {
-        name: string;
-        description: string;
-        required: boolean;
-        options: string[];
-    }[];
+        resource: _oclif_core_lib_interfaces_parser_js.Arg<string, Record<string, unknown>>;
+    };
     run(): Promise<void>;
 }
 

package/dist/commands/hydrogen/check.js

@@ -1,25 +1,26 @@
 import Command from '@shopify/cli-kit/node/base-command';
-import { path } from '@shopify/cli-kit';
-import { commonFlags } from '../../utils/flags.js';
-import { getRemixConfig } from '../../utils/config.js';
-import { logMissingRoutes, findMissingRoutes } from '../../utils/missing-routes.js';
+import { resolvePath } from '@shopify/cli-kit/node/path';
+import { commonFlags } from '../../lib/flags.js';
+import { getRemixConfig } from '../../lib/config.js';
+import { logMissingRoutes, findMissingRoutes } from '../../lib/missing-routes.js';
+import { Args } from '@oclif/core';
 
 class GenerateRoute extends Command {
   static description = "Returns diagnostic information about a Hydrogen storefront.";
   static flags = {
     path: commonFlags.path
   };
-  static args = [
-    {
+  static args = {
+    resource: Args.string({
       name: "resource",
       description: `The resource to check. Currently only 'routes' is supported.`,
       required: true,
       options: ["routes"]
-    }
-  ];
+    })
+  };
   async run() {
     const { flags, args } = await this.parse(GenerateRoute);
-    const directory = flags.path ? path.resolve(flags.path) : process.cwd();
+    const directory = flags.path ? resolvePath(flags.path) : process.cwd();
     if (args.resource === "routes") {
       await runCheckRoutes({ directory });
     } else {

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

@@ -4,10 +4,10 @@ import Command from '@shopify/cli-kit/node/base-command';
 declare class Dev 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>;
         "disable-virtual-routes": _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
-        host: _oclif_core_lib_interfaces_parser_js.OptionFlag<unknown>;
+        host: _oclif_core_lib_interfaces_parser_js.OptionFlag<unknown, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
     };
     run(): Promise<void>;
 }

package/dist/commands/hydrogen/dev.js

@@ -1,15 +1,16 @@
 import path from 'path';
 import fs from 'fs/promises';
-import { output, file } from '@shopify/cli-kit';
+import { outputInfo } from '@shopify/cli-kit/node/output';
+import { fileExists } from '@shopify/cli-kit/node/fs';
 import { copyPublicFiles } from './build.js';
-import { getProjectPaths, getRemixConfig } from '../../utils/config.js';
-import { muteDevLogs } from '../../utils/log.js';
-import { commonFlags, deprecated, flagsToCamelObject } from '../../utils/flags.js';
+import { getProjectPaths, getRemixConfig } from '../../lib/config.js';
+import { muteDevLogs } from '../../lib/log.js';
+import { commonFlags, deprecated, flagsToCamelObject } from '../../lib/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
-import Flags from '@oclif/core/lib/flags.js';
-import { startMiniOxygen } from '../../utils/mini-oxygen.js';
-import { checkHydrogenVersion } from '../../utils/check-version.js';
-import { addVirtualRoutes } from '../../utils/virtual-routes.js';
+import { Flags } from '@oclif/core';
+import { startMiniOxygen } from '../../lib/mini-oxygen.js';
+import { checkHydrogenVersion } from '../../lib/check-version.js';
+import { addVirtualRoutes } from '../../lib/virtual-routes.js';
 
 const LOG_INITIAL_BUILD = "\n\u{1F3C1} Initial build";
 const LOG_REBUILDING = "\u{1F9F1} Rebuilding...";
@@ -48,11 +49,11 @@ async function runDev({
     const config = await getRemixConfig(root);
     return disableVirtualRoutes ? config : addVirtualRoutes(config);
   };
-  const getFilePaths = (file2) => {
-    const fileRelative = path.relative(root, file2);
+  const getFilePaths = (file) => {
+    const fileRelative = path.relative(root, file);
     return [fileRelative, path.resolve(root, fileRelative)];
   };
-  const serverBundleExists = () => file.exists(buildPathWorkerFile);
+  const serverBundleExists = () => fileExists(buildPathWorkerFile);
   let miniOxygenStarted = false;
   async function safeStartMiniOxygen() {
     if (miniOxygenStarted)
@@ -87,9 +88,9 @@ async function runDev({
       console.timeEnd(LOG_INITIAL_BUILD);
       await safeStartMiniOxygen();
     },
-    async onFileCreated(file2) {
-      const [relative, absolute] = getFilePaths(file2);
-      output.info(`
+    async onFileCreated(file) {
+      const [relative, absolute] = getFilePaths(file);
+      outputInfo(`
 \u{1F4C4} File created: ${relative}`);
       if (absolute.startsWith(publicPath)) {
         await copyPublicFiles(
@@ -98,9 +99,9 @@ async function runDev({
         );
       }
     },
-    async onFileChanged(file2) {
-      const [relative, absolute] = getFilePaths(file2);
-      output.info(`
+    async onFileChanged(file) {
+      const [relative, absolute] = getFilePaths(file);
+      outputInfo(`
 \u{1F4C4} File changed: ${relative}`);
       if (absolute.startsWith(publicPath)) {
         await copyPublicFiles(
@@ -109,16 +110,16 @@ async function runDev({
         );
       }
     },
-    async onFileDeleted(file2) {
-      const [relative, absolute] = getFilePaths(file2);
-      output.info(`
+    async onFileDeleted(file) {
+      const [relative, absolute] = getFilePaths(file);
+      outputInfo(`
 \u{1F4C4} File deleted: ${relative}`);
       if (absolute.startsWith(publicPath)) {
         await fs.unlink(absolute.replace(publicPath, buildPathClient));
       }
     },
     onRebuildStart() {
-      output.info(LOG_REBUILDING);
+      outputInfo(LOG_REBUILDING);
       console.time(LOG_REBUILT);
     },
     async onRebuildFinish() {

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

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

package/dist/commands/hydrogen/g.js

@@ -0,0 +1,17 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import GenerateRoute from './generate/route.js';
+
+class GenerateRouteShortcut extends Command {
+  static description = "Shortcut for `hydrogen generate`. See `hydrogen generate --help` for more information.";
+  static strict = false;
+  static hidden = true;
+  async run() {
+    const [command, ...args] = this.argv;
+    if (command === "r" || command === "route") {
+      return new GenerateRoute(args, this.config).run();
+    }
+    throw new Error(`Invalid command argument "${command}".`);
+  }
+}
+
+export { GenerateRouteShortcut as default };

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

@@ -1,5 +1,6 @@
 import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
 import Command from '@shopify/cli-kit/node/base-command';
+import { RemixV2Flags } from '../../../lib/remix-version-interop.js';
 
 declare const GENERATOR_TEMPLATES_DIR = "generator-templates";
 interface Result {
@@ -8,27 +9,24 @@ interface Result {
 declare class GenerateRoute extends Command {
     static description: string;
     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>;
     };
     static hidden: true;
     static args: {
-        name: string;
-        description: string;
-        required: boolean;
-        options: string[];
-        env: string;
-    }[];
+        route: _oclif_core_lib_interfaces_parser_js.Arg<string, Record<string, unknown>>;
+    };
     run(): Promise<void>;
 }
-declare function runGenerate(route: string, { directory, typescript, force, adapter, templatesRoot, }: {
+declare function runGenerate(routeFrom: string, routeTo: string, { directory, typescript, force, adapter, templatesRoot, v2Flags, }: {
     directory: string;
     typescript?: boolean;
     force?: boolean;
     adapter?: string;
     templatesRoot?: string;
+    v2Flags?: RemixV2Flags;
 }): Promise<Result>;
 
 export { GENERATOR_TEMPLATES_DIR, GenerateRoute as default, runGenerate };

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

@@ -1,11 +1,13 @@
 import { fileURLToPath } from 'url';
 import Command from '@shopify/cli-kit/node/base-command';
-import { path, file, ui } from '@shopify/cli-kit';
+import { fileExists, readFile, mkdir, writeFile } from '@shopify/cli-kit/node/fs';
+import { resolvePath, joinPath, relativePath, relativizePath, dirname } from '@shopify/cli-kit/node/path';
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { renderSuccess } from '@shopify/cli-kit/node/ui';
-import { commonFlags } from '../../../utils/flags.js';
-import Flags from '@oclif/core/lib/flags.js';
-import { transpileFile, format, resolveFormatConfig } from '../../../utils/transpile-ts.js';
+import { renderSuccess, renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
+import { commonFlags } from '../../../lib/flags.js';
+import { Flags, Args } from '@oclif/core';
+import { transpileFile, format, resolveFormatConfig } from '../../../lib/transpile-ts.js';
+import { getV2Flags, convertRouteToV2, convertTemplateToRemixVersion } from '../../../lib/remix-version-interop.js';
 
 const GENERATOR_TEMPLATES_DIR = "generator-templates";
 const ROUTE_MAP = {
@@ -35,37 +37,43 @@ class GenerateRoute extends Command {
     path: commonFlags.path
   };
   static hidden;
-  static args = [
-    {
+  static args = {
+    route: Args.string({
       name: "route",
       description: `The route to generate. One of ${ROUTES.join()}.`,
       required: true,
       options: ROUTES,
       env: "SHOPIFY_HYDROGEN_ARG_ROUTE"
-    }
-  ];
+    })
+  };
   async run() {
     const result = /* @__PURE__ */ new Map();
-    const { flags, args } = await this.parse(GenerateRoute);
-    const directory = flags.path ? path.resolve(flags.path) : process.cwd();
-    const { route } = args;
+    const {
+      flags,
+      args: { route }
+    } = await this.parse(GenerateRoute);
     const routePath = route === "all" ? Object.values(ROUTE_MAP).flat() : ROUTE_MAP[route];
     if (!routePath) {
       throw new AbortError(
         `No route found for ${route}. Try one of ${ROUTES.join()}.`
       );
     }
-    const isTypescript = flags.typescript || await file.exists(path.join(directory, "tsconfig.json"));
+    const directory = flags.path ? resolvePath(flags.path) : process.cwd();
+    const isTypescript = flags.typescript || await fileExists(joinPath(directory, "tsconfig.json"));
     const routesArray = Array.isArray(routePath) ? routePath : [routePath];
     try {
+      const { isV2RouteConvention, ...v2Flags } = await getV2Flags(directory);
       for (const item of routesArray) {
+        const routeFrom = item;
+        const routeTo = isV2RouteConvention ? convertRouteToV2(item) : item;
         result.set(
-          item,
-          await runGenerate(item, {
+          routeTo,
+          await runGenerate(routeFrom, routeTo, {
             directory,
             typescript: isTypescript,
             force: flags.force,
-            adapter: flags.adapter
+            adapter: flags.adapter,
+            v2Flags
           })
         );
       }
@@ -81,62 +89,56 @@ class GenerateRoute extends Command {
       body: {
         list: {
           items: Array.from(result.entries()).map(
-            ([path2, { operation }]) => `[${operation}] app/routes${path2}${extension}`
+            ([path, { operation }]) => `[${operation}] app/routes${path}${extension}`
           )
         }
       }
     });
   }
 }
-async function runGenerate(route, {
+async function runGenerate(routeFrom, routeTo, {
   directory,
   typescript,
   force,
   adapter,
-  templatesRoot = fileURLToPath(new URL("../../../", import.meta.url))
+  templatesRoot = fileURLToPath(new URL("../../../", import.meta.url)),
+  v2Flags = {}
 }) {
   let operation;
   const extension = typescript ? ".tsx" : ".jsx";
-  const templatePath = path.join(
+  const templatePath = joinPath(
     templatesRoot,
     GENERATOR_TEMPLATES_DIR,
     "routes",
-    `${route}.tsx`
+    `${routeFrom}.tsx`
   );
-  const destinationPath = path.join(
+  const destinationPath = joinPath(
     directory,
     "app",
     "routes",
-    `${route}${extension}`
+    `${routeTo}${extension}`
   );
-  const relativeDestinationPath = path.relative(directory, destinationPath);
-  if (!force && await file.exists(destinationPath)) {
-    const options = [
-      { name: "No", value: "skip" },
-      { name: `Yes`, value: "overwrite" }
-    ];
-    const choice = await ui.prompt([
-      {
-        type: "select",
-        name: "value",
-        message: `The file ${path.relativize(
-          relativeDestinationPath
-        )} already exists. Do you want to overwrite it?`,
-        choices: options
-      }
-    ]);
-    operation = choice.value === "skip" ? "skipped" : "overwritten";
+  const relativeDestinationPath = relativePath(directory, destinationPath);
+  if (!force && await fileExists(destinationPath)) {
+    const shouldOverwrite = await renderConfirmationPrompt({
+      message: `The file ${relativizePath(
+        relativeDestinationPath
+      )} already exists. Do you want to overwrite it?`,
+      defaultValue: false
+    });
+    operation = shouldOverwrite ? "overwritten" : "skipped";
     if (operation === "skipped") {
       return { operation };
     }
   } else {
     operation = "generated";
   }
-  let templateContent = await file.read(templatePath);
+  let templateContent = await readFile(templatePath);
+  templateContent = convertTemplateToRemixVersion(templateContent, v2Flags);
   if (!typescript) {
-    const jsConfigPath = path.join(directory, "jsconfig.json");
-    const config = await file.exists(jsConfigPath) ? JSON.parse(
-      (await file.read(jsConfigPath, { encoding: "utf8" })).replace(
+    const jsConfigPath = joinPath(directory, "jsconfig.json");
+    const config = await fileExists(jsConfigPath) ? JSON.parse(
+      (await readFile(jsConfigPath, { encoding: "utf8" })).replace(
         /^\s*\/\/.*$/gm,
         ""
       )
@@ -154,10 +156,10 @@ async function runGenerate(route, {
     await resolveFormatConfig(destinationPath),
     destinationPath
   );
-  if (!await file.exists(path.dirname(destinationPath))) {
-    await file.mkdir(path.dirname(destinationPath));
+  if (!await fileExists(dirname(destinationPath))) {
+    await mkdir(dirname(destinationPath));
   }
-  await file.write(destinationPath, templateContent);
+  await writeFile(destinationPath, templateContent);
   return {
     operation
   };

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