feat(create-react-router): add Deno support (#12327)

* Add Deno as a supported package manager in create-react-router

* Update contributors.yml

Author: redabacha

.changeset/blue-owls-deliver.md

@@ -0,0 +1,5 @@
+---
+"create-react-router": minor
+---
+
+Add Deno as a supported and detectable package manager. Note that this detection will only work with Deno versions 2.0.5 and above. If you are using an older version version of Deno then you must specify the --package-manager CLI flag set to `deno`.

contributors.yml

@@ -292,6 +292,7 @@
 - pruszel
 - pwdcd
 - pyitphyoaung
+- redabacha
 - refusado
 - renyu-io
 - reyronald

packages/create-react-router/__tests__/create-react-router-test.ts

@@ -697,6 +697,39 @@ describe("create-react-router CLI", () => {
     process.env.npm_config_user_agent = originalUserAgent;
   });
 
+  it("recognizes when Deno was used to run the command", async () => {
+    let originalUserAgent = process.env.npm_config_user_agent;
+    process.env.npm_config_user_agent =
+      "deno/2.0.6 npm/? deno/2.0.6 linux x86_64";
+
+    let projectDir = getProjectDir("deno-create-from-user-agent");
+
+    let execa = require("execa");
+    execa.mockImplementation(async () => {});
+
+    // Suppress terminal output
+    let stdoutMock = jest
+      .spyOn(process.stdout, "write")
+      .mockImplementation(() => true);
+
+    await createReactRouter([
+      projectDir,
+      "--template",
+      path.join(__dirname, "fixtures", "blank"),
+      "--no-git-init",
+      "--yes",
+    ]);
+
+    stdoutMock.mockReset();
+
+    expect(execa).toHaveBeenCalledWith(
+      "deno",
+      expect.arrayContaining(["install"]),
+      expect.anything()
+    );
+    process.env.npm_config_user_agent = originalUserAgent;
+  });
+
   it("supports specifying the package manager, regardless of user agent", async () => {
     let originalUserAgent = process.env.npm_config_user_agent;
     process.env.npm_config_user_agent =

packages/create-react-router/index.ts

@@ -151,7 +151,7 @@ async function getContext(argv: string[]): Promise<Context> {
     noMotion,
     pkgManager: validatePackageManager(
       pkgManager ??
-        // npm, pnpm, Yarn, and Bun set the user agent environment variable that can be used
+        // npm, pnpm, Yarn, Bun and Deno (v2.0.5+) set the user agent environment variable that can be used
         // to determine which package manager ran the command.
         (process.env.npm_config_user_agent ?? "npm").split("/")[0]
     ),
@@ -514,19 +514,11 @@ async function doneStep(ctx: Context) {
   await sleep(200);
 }
 
-type PackageManager = "npm" | "yarn" | "pnpm" | "bun";
-
-const packageManagerExecScript: Record<PackageManager, string> = {
-  npm: "npx",
-  yarn: "yarn",
-  pnpm: "pnpm exec",
-  bun: "bunx",
-};
+const validPackageManagers = ["npm", "yarn", "pnpm", "bun", "deno"] as const;
+type PackageManager = (typeof validPackageManagers)[number];
 
 function validatePackageManager(pkgManager: string): PackageManager {
-  return packageManagerExecScript.hasOwnProperty(pkgManager)
-    ? (pkgManager as PackageManager)
-    : "npm";
+  return validPackageManagers.find((name) => pkgManager === name) ?? "npm";
 }
 
 async function installDependencies({