@shopify/cli-hydrogen 0.0.0-next-744c490-20230315110711

package/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright 2023-present, Shopify Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,14 @@
+# @shopify/cli-hydrogen
+
+The Hydrogen extension for the [Shopify CLI](https://shopify.dev/apps/tools/cli). Hydrogen is a set of tools, utilities, and best-in-class examples for building a commerce application with [Remix](https://wwww.remix.run).
+
+[Check out the docs](https://shopify.dev/custom-storefronts/hydrogen)
+
+## Contributing
+
+The most common way to test the cli changes locally is to do the following:
+
+- Run `npm run build` in this directory (`packages/cli` from the root of the repo).
+- Run `npx shopify hydrogen` anywhere else in the monorepo, for example `npx shopify hydrogen init`.
+- If you want to test a command inside of a template, run the command from within that template or use the `--path` flag to point to another template or any Hydrogen app.
+- If you want to make changes to a file that is generated when running `npx shopify hydrogen generate`, make changes to that file from inside of the `templates/skeleton` directory.

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

@@ -0,0 +1,23 @@
+import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
+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>;
+        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>;
+    };
+    run(): Promise<void>;
+}
+declare function runBuild({ path: appPath, sourcemap, disableRouteWarning, }: {
+    path?: string;
+    sourcemap?: boolean;
+    disableRouteWarning?: boolean;
+}): Promise<void>;
+declare function copyPublicFiles(publicPath: string, buildPathClient: string): Promise<void>;
+
+export { copyPublicFiles, Build as default, runBuild };

package/dist/commands/hydrogen/build.js

@@ -0,0 +1,100 @@
+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 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 { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
+
+const LOG_WORKER_BUILT = "\u{1F4E6} Worker built";
+class Build extends Command {
+  static description = "Builds a Hydrogen storefront for production.";
+  static flags = {
+    path: commonFlags.path,
+    sourcemap: Flags.boolean({
+      description: "Generate sourcemaps for the build.",
+      env: "SHOPIFY_HYDROGEN_FLAG_SOURCEMAP",
+      default: true
+    }),
+    ["disable-route-warning"]: Flags.boolean({
+      description: "Disable warning about missing standard routes.",
+      env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_ROUTE_WARNING"
+    }),
+    base: deprecated("--base")(),
+    entry: deprecated("--entry")(),
+    target: deprecated("--target")()
+  };
+  async run() {
+    const { flags } = await this.parse(Build);
+    const directory = flags.path ? path.resolve(flags.path) : process.cwd();
+    await runBuild({ ...flagsToCamelObject(flags), path: directory });
+  }
+}
+async function runBuild({
+  path: appPath,
+  sourcemap = true,
+  disableRouteWarning = false
+}) {
+  if (!process.env.NODE_ENV) {
+    process.env.NODE_ENV = "production";
+  }
+  const { root, buildPath, buildPathClient, buildPathWorkerFile, publicPath } = getProjectPaths(appPath);
+  await checkLockfileStatus(root);
+  console.time(LOG_WORKER_BUILT);
+  const [remixConfig] = await Promise.all([
+    getRemixConfig(root),
+    file.rmdir(buildPath, { force: true })
+  ]);
+  output.info(`
+\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');
+  await Promise.all([
+    copyPublicFiles(publicPath, buildPathClient),
+    build(remixConfig, {
+      mode: process.env.NODE_ENV,
+      sourcemap,
+      onCompileFailure: (failure) => {
+        logCompileFailure(failure);
+        throw Error();
+      }
+    })
+  ]);
+  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(
+        path.relative(root, buildPathWorkerFile)
+      )}  ${output.token.yellow(sizeMB.toFixed(2))} MB\n`
+    );
+    if (sizeMB >= 1) {
+      output.warn(
+        `\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."}
+`
+      );
+    }
+  }
+  if (!disableRouteWarning) {
+    const missingRoutes = findMissingRoutes(remixConfig);
+    if (missingRoutes.length) {
+      const packageManager = await getPackageManager(root);
+      const exec = packageManager === "npm" ? "npx" : packageManager;
+      output.warn(
+        `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\`.
+`
+      );
+    }
+  }
+  process.exit(0);
+}
+async function copyPublicFiles(publicPath, buildPathClient) {
+  return file.copy(publicPath, buildPathClient);
+}
+
+export { copyPublicFiles, Build as default, runBuild };

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

@@ -0,0 +1,18 @@
+import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
+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>;
+    };
+    static args: {
+        name: string;
+        description: string;
+        required: boolean;
+        options: string[];
+    }[];
+    run(): Promise<void>;
+}
+
+export { GenerateRoute as default };

package/dist/commands/hydrogen/check.js

@@ -0,0 +1,35 @@
+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';
+
+class GenerateRoute extends Command {
+  static description = "Returns diagnostic information about a Hydrogen storefront.";
+  static flags = {
+    path: commonFlags.path
+  };
+  static args = [
+    {
+      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();
+    if (args.resource === "routes") {
+      await runCheckRoutes({ directory });
+    } else {
+      throw new Error("Invalid command argument.");
+    }
+  }
+}
+async function runCheckRoutes({ directory }) {
+  const remixConfig = await getRemixConfig(directory);
+  logMissingRoutes(findMissingRoutes(remixConfig));
+}
+
+export { GenerateRoute as default };

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

@@ -0,0 +1,15 @@
+import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
+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>;
+        "disable-virtual-routes": _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+        host: _oclif_core_lib_interfaces_parser_js.OptionFlag<unknown>;
+    };
+    run(): Promise<void>;
+}
+
+export { Dev as default };

package/dist/commands/hydrogen/dev.js

@@ -0,0 +1,134 @@
+import path from 'path';
+import fs from 'fs/promises';
+import { output, file } from '@shopify/cli-kit';
+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 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';
+
+const LOG_INITIAL_BUILD = "\n\u{1F3C1} Initial build";
+const LOG_REBUILDING = "\u{1F9F1} Rebuilding...";
+const LOG_REBUILT = "\u{1F680} Rebuilt";
+class Dev extends Command {
+  static description = "Runs Hydrogen storefront in an Oxygen worker for development.";
+  static flags = {
+    path: commonFlags.path,
+    port: commonFlags.port,
+    ["disable-virtual-routes"]: Flags.boolean({
+      description: "Disable rendering fallback routes when a route file doesn't exist",
+      env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_VIRTUAL_ROUTES",
+      default: false
+    }),
+    host: deprecated("--host")()
+  };
+  async run() {
+    const { flags } = await this.parse(Dev);
+    const directory = flags.path ? path.resolve(flags.path) : process.cwd();
+    await runDev({ ...flagsToCamelObject(flags), path: directory });
+  }
+}
+async function runDev({
+  port,
+  path: appPath,
+  disableVirtualRoutes
+}) {
+  if (!process.env.NODE_ENV)
+    process.env.NODE_ENV = "development";
+  muteDevLogs();
+  console.time(LOG_INITIAL_BUILD);
+  const { root, publicPath, buildPathClient, buildPathWorkerFile } = getProjectPaths(appPath);
+  const checkingHydrogenVersion = checkHydrogenVersion(root);
+  const copyingFiles = copyPublicFiles(publicPath, buildPathClient);
+  const reloadConfig = async () => {
+    const config = await getRemixConfig(root);
+    return disableVirtualRoutes ? config : addVirtualRoutes(config);
+  };
+  const getFilePaths = (file2) => {
+    const fileRelative = path.relative(root, file2);
+    return [fileRelative, path.resolve(root, fileRelative)];
+  };
+  const serverBundleExists = () => file.exists(buildPathWorkerFile);
+  let miniOxygenStarted = false;
+  async function safeStartMiniOxygen() {
+    if (miniOxygenStarted)
+      return;
+    await startMiniOxygen({
+      root,
+      port,
+      watch: true,
+      buildPathWorkerFile,
+      buildPathClient
+    });
+    miniOxygenStarted = true;
+    const showUpgrade = await checkingHydrogenVersion;
+    if (showUpgrade)
+      showUpgrade();
+  }
+  const { watch } = await import('@remix-run/dev/dist/compiler/watch.js');
+  await watch(await reloadConfig(), {
+    reloadConfig,
+    mode: process.env.NODE_ENV,
+    async onInitialBuild() {
+      await copyingFiles;
+      if (!await serverBundleExists()) {
+        const { renderFatalError } = await import('@shopify/cli-kit/node/ui');
+        return renderFatalError({
+          name: "BuildError",
+          type: 0,
+          message: "MiniOxygen cannot start because the server bundle has not been generated.",
+          tryMessage: "This is likely due to an error in your app and Remix is unable to compile. Try fixing the app and MiniOxygen will start."
+        });
+      }
+      console.timeEnd(LOG_INITIAL_BUILD);
+      await safeStartMiniOxygen();
+    },
+    async onFileCreated(file2) {
+      const [relative, absolute] = getFilePaths(file2);
+      output.info(`
+\u{1F4C4} File created: ${relative}`);
+      if (absolute.startsWith(publicPath)) {
+        await copyPublicFiles(
+          absolute,
+          absolute.replace(publicPath, buildPathClient)
+        );
+      }
+    },
+    async onFileChanged(file2) {
+      const [relative, absolute] = getFilePaths(file2);
+      output.info(`
+\u{1F4C4} File changed: ${relative}`);
+      if (absolute.startsWith(publicPath)) {
+        await copyPublicFiles(
+          absolute,
+          absolute.replace(publicPath, buildPathClient)
+        );
+      }
+    },
+    async onFileDeleted(file2) {
+      const [relative, absolute] = getFilePaths(file2);
+      output.info(`
+\u{1F4C4} File deleted: ${relative}`);
+      if (absolute.startsWith(publicPath)) {
+        await fs.unlink(absolute.replace(publicPath, buildPathClient));
+      }
+    },
+    onRebuildStart() {
+      output.info(LOG_REBUILDING);
+      console.time(LOG_REBUILT);
+    },
+    async onRebuildFinish() {
+      console.timeEnd(LOG_REBUILT);
+      if (!miniOxygenStarted && await serverBundleExists()) {
+        console.log("");
+        await safeStartMiniOxygen();
+      }
+    }
+  });
+}
+
+export { Dev as default };

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

@@ -0,0 +1,34 @@
+import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
+import Command from '@shopify/cli-kit/node/base-command';
+
+declare const GENERATOR_TEMPLATES_DIR = "generator-templates";
+interface Result {
+    operation: 'generated' | 'skipped' | 'overwritten';
+}
+declare class GenerateRoute extends Command {
+    static description: string;
+    static flags: {
+        adapter: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        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>;
+    };
+    static hidden: true;
+    static args: {
+        name: string;
+        description: string;
+        required: boolean;
+        options: string[];
+        env: string;
+    }[];
+    run(): Promise<void>;
+}
+declare function runGenerate(route: string, { directory, typescript, force, adapter, templatesRoot, }: {
+    directory: string;
+    typescript?: boolean;
+    force?: boolean;
+    adapter?: string;
+    templatesRoot?: string;
+}): Promise<Result>;
+
+export { GENERATOR_TEMPLATES_DIR, GenerateRoute as default, runGenerate };

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

@@ -0,0 +1,166 @@
+import { fileURLToPath } from 'url';
+import Command from '@shopify/cli-kit/node/base-command';
+import { path, file, ui } from '@shopify/cli-kit';
+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';
+
+const GENERATOR_TEMPLATES_DIR = "generator-templates";
+const ROUTE_MAP = {
+  home: "/index",
+  page: "/pages/$pageHandle",
+  cart: "/cart",
+  products: "/products/$productHandle",
+  collections: "/collections/$collectionHandle",
+  policies: ["/policies/index", "/policies/$policyHandle"],
+  robots: "/[robots.txt]",
+  sitemap: "/[sitemap.xml]",
+  account: ["/account/login", "/account/register"]
+};
+const ROUTES = [...Object.keys(ROUTE_MAP), "all"];
+class GenerateRoute extends Command {
+  static description = "Generates a standard Shopify route.";
+  static flags = {
+    adapter: Flags.string({
+      description: "Remix adapter used in the route. The default is `@shopify/remix-oxygen`.",
+      env: "SHOPIFY_HYDROGEN_FLAG_ADAPTER"
+    }),
+    typescript: Flags.boolean({
+      description: "Generate TypeScript files",
+      env: "SHOPIFY_HYDROGEN_FLAG_TYPESCRIPT"
+    }),
+    force: commonFlags.force,
+    path: commonFlags.path
+  };
+  static hidden;
+  static args = [
+    {
+      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 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 routesArray = Array.isArray(routePath) ? routePath : [routePath];
+    try {
+      for (const item of routesArray) {
+        result.set(
+          item,
+          await runGenerate(item, {
+            directory,
+            typescript: isTypescript,
+            force: flags.force,
+            adapter: flags.adapter
+          })
+        );
+      }
+    } catch (err) {
+      throw new AbortError(err.message);
+    }
+    const extension = isTypescript ? ".tsx" : ".jsx";
+    const success = Array.from(result.values()).filter(
+      (result2) => result2.operation !== "skipped"
+    );
+    renderSuccess({
+      headline: `${success.length} of ${result.size} route${result.size > 1 ? "s" : ""} generated`,
+      body: {
+        list: {
+          items: Array.from(result.entries()).map(
+            ([path2, { operation }]) => `[${operation}] app/routes${path2}${extension}`
+          )
+        }
+      }
+    });
+  }
+}
+async function runGenerate(route, {
+  directory,
+  typescript,
+  force,
+  adapter,
+  templatesRoot = fileURLToPath(new URL("../../../", import.meta.url))
+}) {
+  let operation;
+  const extension = typescript ? ".tsx" : ".jsx";
+  const templatePath = path.join(
+    templatesRoot,
+    GENERATOR_TEMPLATES_DIR,
+    "routes",
+    `${route}.tsx`
+  );
+  const destinationPath = path.join(
+    directory,
+    "app",
+    "routes",
+    `${route}${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";
+    if (operation === "skipped") {
+      return { operation };
+    }
+  } else {
+    operation = "generated";
+  }
+  let templateContent = await file.read(templatePath);
+  if (!typescript) {
+    const jsConfigPath = path.join(directory, "jsconfig.json");
+    const config = await file.exists(jsConfigPath) ? JSON.parse(
+      (await file.read(jsConfigPath, { encoding: "utf8" })).replace(
+        /^\s*\/\/.*$/gm,
+        ""
+      )
+    ) : void 0;
+    templateContent = transpileFile(templateContent, config?.compilerOptions);
+  }
+  if (adapter) {
+    templateContent = templateContent.replace(
+      /@shopify\/remix-oxygen/g,
+      adapter
+    );
+  }
+  templateContent = format(
+    templateContent,
+    await resolveFormatConfig(destinationPath),
+    destinationPath
+  );
+  if (!await file.exists(path.dirname(destinationPath))) {
+    await file.mkdir(path.dirname(destinationPath));
+  }
+  await file.write(destinationPath, templateContent);
+  return {
+    operation
+  };
+}
+
+export { GENERATOR_TEMPLATES_DIR, GenerateRoute as default, runGenerate };

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,126 @@
+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';
+
+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()
+        }
+      };
+    });
+  });
+  it("generates a route file", async () => {
+    await temporaryDirectoryTask(async (tmpDir) => {
+      const route = "pages/$pageHandle";
+      const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
+        files: [],
+        templates: [[route, `const str = "hello world"`]]
+      });
+      await runGenerate(route, {
+        directory: appRoot,
+        templatesRoot
+      });
+      expect(
+        await file.read(path.join(appRoot, "app/routes", `${route}.jsx`))
+      ).toContain(`const str = 'hello world'`);
+    });
+  });
+  it("produces a typescript file when typescript argument is true", async () => {
+    await temporaryDirectoryTask(async (tmpDir) => {
+      const route = "pages/$pageHandle";
+      const { appRoot, templatesRoot } = await createHydrogen(tmpDir, {
+        files: [],
+        templates: [[route, 'const str = "hello typescript"']]
+      });
+      await runGenerate(route, {
+        directory: appRoot,
+        templatesRoot,
+        typescript: true
+      });
+      expect(
+        await file.read(path.join(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" };
+      });
+      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, {
+        directory: appRoot,
+        templatesRoot
+      });
+      expect(ui.prompt).toHaveBeenCalledWith(
+        expect.arrayContaining([
+          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" };
+      });
+      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, {
+        directory: appRoot,
+        templatesRoot,
+        force: true
+      });
+      expect(ui.prompt).not.toHaveBeenCalled();
+    });
+  });
+});
+async function createHydrogen(directory, {
+  files,
+  templates
+} = {
+  files: [],
+  templates: []
+}) {
+  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);
+  }
+  for (const item of templates) {
+    const [filePath, fileContent] = item;
+    const fullFilePath = path.join(
+      directory,
+      GENERATOR_TEMPLATES_DIR,
+      "routes",
+      `${filePath}.tsx`
+    );
+    await file.mkdir(path.dirname(fullFilePath));
+    await file.write(fullFilePath, fileContent);
+  }
+  return {
+    appRoot: path.join(directory, "app"),
+    templatesRoot: directory
+  };
+}