refactor(dev): only support ts->js conversion for app code

packages/remix-dev/cli/create.ts

@@ -16,7 +16,7 @@ import * as colors from "../colors";
 import invariant from "../invariant";
 import packageJson from "../package.json";
 import { getPreferredPackageManager } from "./getPreferredPackageManager";
-import { convertToJavaScript } from "./migrate/migrations/convert-to-javascript";
+import * as useJavascript from "./useJavascript";
 
 const remixDevPackageVersion = packageJson.version;
 const defaultAgent = new ProxyAgent();
@@ -201,8 +201,8 @@ export async function createApp({
     !useTypeScript &&
     fse.existsSync(path.join(projectDir, "tsconfig.json"))
   ) {
-    let spinner = ora("Migrating template to JavaScript…").start();
-    await convertToJavaScript(projectDir, { interactive: false });
+    let spinner = ora("Converting template to JavaScript…").start();
+    await useJavascript.convert(projectDir);
     spinner.stop();
     spinner.clear();
   }

packages/remix-dev/cli/useJavascript.ts

@@ -0,0 +1,62 @@
+import path from "node:path";
+import glob from "fast-glob";
+import fs from "fs-extra";
+import * as babel from "@babel/core";
+// @ts-expect-error These modules don't have types
+import babelPluginSyntaxJSX from "@babel/plugin-syntax-jsx";
+// @ts-expect-error These modules don't have types
+import babelPresetTypeScript from "@babel/preset-typescript";
+import prettier from "prettier";
+
+import { readConfig } from "../config";
+
+export let convert = async (projectDir: string) => {
+  let config = await readConfig(projectDir);
+
+  let remixEnvD = path.join(config.rootDirectory, "remix.env.d.ts");
+  if (fs.pathExistsSync(remixEnvD)) {
+    fs.rmSync(remixEnvD);
+  }
+
+  let entries = await glob("**/*.+(ts|tsx)", {
+    absolute: true,
+    cwd: config.appDirectory,
+  });
+  for (let entry of entries) {
+    if (entry.endsWith(".d.ts")) {
+      fs.rmSync(entry);
+      continue;
+    }
+    let tsx = await fs.readFile(entry, "utf8");
+    let mjs = transpile(tsx, {
+      filename: path.basename(entry),
+      cwd: projectDir,
+    });
+    fs.rmSync(entry);
+    await fs.writeFile(entry.replace(/\.tsx?$/, ".js"), mjs, "utf8");
+  }
+};
+
+let transpile = (
+  tsx: string,
+  options: {
+    cwd?: string;
+    filename?: string;
+  } = {}
+): string => {
+  let mjs = babel.transformSync(tsx, {
+    compact: false,
+    cwd: options.cwd,
+    filename: options.filename,
+    plugins: [babelPluginSyntaxJSX],
+    presets: [[babelPresetTypeScript, { jsx: "preserve" }]],
+    retainLines: true,
+  });
+  if (!mjs || !mjs.code) throw new Error("Could not parse TypeScript");
+
+  /**
+   * Babel's `compact` and `retainLines` options are both bad at formatting code.
+   * Use Prettier for nicer formatting.
+   */
+  return prettier.format(mjs.code, { parser: "babel" });
+};