Generate JavaScript entries at build time (#15373)

Assisted-By: devx/09e6ec2a-279b-4e17-8759-2626d088d051

Author: brophdawg11

integration/cli-test.ts

@@ -213,7 +213,7 @@ const helpText = dedent`
       --json              Print the routes as JSON
     \`reveal\` Options:
       --config, -c        Use specified Vite config file (string)
-      --no-typescript     Generate plain JavaScript files
+      --no-typescript     Generate plain JavaScript files (deprecated; will be removed in v9)
     \`typegen\` Options:
       --watch             Automatically regenerate types whenever route config (\`routes.ts\`) or route modules change
 
@@ -461,10 +461,46 @@ test.describe("cli", () => {
       expect(existsSync(entryServerFile)).toBeFalsy();
       expect(existsSync(entryClientFile)).toBeFalsy();
 
-      run(["reveal", "--no-typescript"], { cwd });
+      let { stderr, status } = run(["reveal", "--no-typescript"], {
+        cwd,
+        env: {
+          ...process.env,
+          FORCE_COLOR: undefined,
+          NO_COLOR: "1",
+        },
+      });
 
       expect(existsSync(entryServerFile)).toBeTruthy();
       expect(existsSync(entryClientFile)).toBeTruthy();
+      expect(readFileSync(entryServerFile, "utf-8")).toContain(
+        "renderToPipeableStream",
+      );
+      expect(readFileSync(entryServerFile, "utf-8")).not.toContain(
+        "import type",
+      );
+      expect(stderr.toString().trim()).toBe(
+        "The --no-typescript flag is deprecated and will be removed in React Router v9.",
+      );
+      expect(status).toBe(0);
+      expect(build({ cwd }).status).toBe(0);
+    });
+
+    test("generates a web JavaScript server entry for non-Node projects", async () => {
+      const cwd = await createProject();
+      let packageJsonPath = path.join(cwd, "package.json");
+      let pkg = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+      delete pkg.dependencies["@react-router/express"];
+      delete pkg.dependencies["@react-router/node"];
+      delete pkg.dependencies["@react-router/serve"];
+      writeFileSync(packageJsonPath, JSON.stringify(pkg, null, 2));
+
+      let entryServerFile = path.join(cwd, "app", "entry.server.jsx");
+
+      run(["reveal", "entry.server", "--no-typescript"], { cwd });
+
+      expect(readFileSync(entryServerFile, "utf-8")).toContain(
+        "renderToReadableStream",
+      );
     });
   });
 

packages/react-router-dev/.changes/patch.prebuild-javascript-entries.md

@@ -0,0 +1,3 @@
+Generate JavaScript entry files at package build time so `react-router reveal --no-typescript` does not require Prettier at runtime
+
+- Deprecate the `--no-typescript` flag ahead of its removal in React Router v9

packages/react-router-dev/cli/commands.ts

@@ -14,7 +14,6 @@ import type { ViteBuildOptions } from "../vite/build";
 import { hasNodeDependency, loadConfig } from "../config/config";
 import { formatRoutes } from "../config/format";
 import type { RoutesFormat } from "../config/format";
-import { transpile as convertFileToJS } from "./useJavascript";
 import * as profiler from "../vite/profiler";
 import * as Typegen from "../typegen";
 import { preloadVite, getVite } from "../vite/vite";
@@ -177,18 +176,20 @@ export async function generateEntry(
     await copyFile(defaultEntry, outputFile);
   } else {
     let pkgJson = await readPackageJSON(rootDirectory);
+    let useTypeScript = flags.typescript ?? true;
+    let outputExtension = useTypeScript ? "tsx" : "jsx";
 
     let defaultEntryClient = path.resolve(
       defaultsDirectory,
-      "entry.client.tsx",
+      `entry.client.${outputExtension}`,
     );
 
     let defaultEntryServer = path.resolve(
       defaultsDirectory,
       hasNodeDependency(pkgJson.dependencies) &&
         !configResult.value.future.unstable_enableNodeReadableStream
-        ? `entry.server.node.tsx`
-        : `entry.server.web.tsx`,
+        ? `entry.server.node.${outputExtension}`
+        : `entry.server.web.${outputExtension}`,
     );
 
     let isServerEntry = entry === "entry.server";
@@ -201,20 +202,10 @@ export async function generateEntry(
           defaultEntryClient,
         );
 
-    let useTypeScript = flags.typescript ?? true;
-    let outputExtension = useTypeScript ? "tsx" : "jsx";
     let outputEntry = `${entry}.${outputExtension}`;
     outputFile = path.resolve(appDirectory, outputEntry);
 
-    if (!useTypeScript) {
-      let javascript = await convertFileToJS(contents, {
-        cwd: rootDirectory,
-        filename: isServerEntry ? defaultEntryServer : defaultEntryClient,
-      });
-      await writeFile(outputFile, javascript, "utf-8");
-    } else {
-      await writeFile(outputFile, contents, "utf-8");
-    }
+    await writeFile(outputFile, contents, "utf-8");
   }
 
   console.log(

packages/react-router-dev/cli/run.ts

@@ -45,7 +45,7 @@ ${colors.blueBright("react-router")}
     --json              Print the routes as JSON
   \`reveal\` Options:
     --config, -c        Use specified Vite config file (string)
-    --no-typescript     Generate plain JavaScript files
+    --no-typescript     Generate plain JavaScript files (deprecated; will be removed in v9)
   \`typegen\` Options:
     --watch             Automatically regenerate types whenever route config (\`routes.ts\`) or route modules change
 
@@ -198,6 +198,11 @@ export async function run(
 
   flags.interactive = flags.interactive ?? isMain;
   if (values["no-typescript"]) {
+    console.warn(
+      colors.yellow(
+        "The --no-typescript flag is deprecated and will be removed in React Router v9.",
+      ),
+    );
     flags.typescript = false;
   }
 

packages/react-router-dev/package.json

@@ -92,8 +92,6 @@
     "@babel/core": "^7.29.7",
     "@babel/generator": "^7.29.7",
     "@babel/parser": "^7.29.7",
-    "@babel/plugin-syntax-jsx": "^7.29.7",
-    "@babel/preset-typescript": "^7.29.7",
     "@babel/traverse": "^7.29.7",
     "@babel/types": "^7.29.7",
     "@react-router/node": "workspace:*",
@@ -110,14 +108,15 @@
     "pathe": "^2.0.3",
     "picocolors": "^1.1.1",
     "pkg-types": "^2.3.1",
-    "prettier": "^3.8.3",
     "react-refresh": "^0.18.0",
     "semver": "^7.8.1",
     "tinyglobby": "^0.2.16",
     "valibot": "^1.4.1"
   },
   "devDependencies": {
     "@react-router/serve": "workspace:*",
+    "@babel/plugin-syntax-jsx": "^7.29.7",
+    "@babel/preset-typescript": "^7.29.7",
     "@types/babel__core": "^7.20.5",
     "@types/babel__generator": "^7.27.0",
     "@types/babel__traverse": "^7.28.0",
@@ -132,6 +131,7 @@
     "esbuild-register": "^3.6.0",
     "execa": "9.6.1",
     "fast-glob": "3.3.3",
+    "prettier": "^3.8.3",
     "react-router": "workspace:^",
     "tsdown": "catalog:",
     "typescript": "catalog:",

packages/react-router-dev/tsdown.config.ts

@@ -4,6 +4,7 @@ import { defineConfig } from "tsdown";
 
 // @ts-ignore - out of scope
 import { createBanner } from "../../build.utils.ts";
+import { transpile as convertFileToJS } from "./cli/useJavascript.ts";
 
 import pkg from "./package.json" with { type: "json" };
 
@@ -34,6 +35,16 @@ async function copyBuildAssets() {
       `config/defaults/${file}`,
       `dist/config/defaults/${file}`,
     );
+    if (file.endsWith(".tsx")) {
+      let inputFile = `config/defaults/${file}`;
+      let tsx = await fsp.readFile(inputFile, "utf-8");
+      let jsx = await convertFileToJS(tsx, { filename: inputFile });
+      await fsp.writeFile(
+        `dist/config/defaults/${file.replace(/\.tsx$/, ".jsx")}`,
+        jsx,
+        "utf-8",
+      );
+    }
   }
 
   await fsp.mkdir("dist/config/default-rsc-entries", {