feat(remix-dev): add option to remove typescript types during project creation

integration/helpers/create-fixture.tsx

@@ -23,7 +23,16 @@ const REMIX_SOURCE_BUILD_DIR = path.join(process.cwd(), "build");
 
 interface FixtureInit {
   files: { [filename: string]: string };
-  template?: string;
+  template?:
+    | "arc"
+    | "cloudflare-pages"
+    | "cloudflare-workers"
+    | "deno"
+    | "express"
+    | "fly"
+    | "netlify"
+    | "remix"
+    | "vercel";
 }
 
 export type Fixture = Awaited<ReturnType<typeof createFixture>>;

integration/helpers/global-setup.ts

@@ -2,7 +2,7 @@ import fs from "fs/promises";
 import path from "path";
 import setupPuppeteer from "jest-environment-puppeteer/setup";
 
-export const TMP_DIR = path.join(process.cwd(), ".tmp");
+export const TMP_DIR = path.join(process.cwd(), ".tmp", "integration");
 
 // TODO: get rid of React Router `console.warn` when no routes match when testing
 console.warn = () => {};
@@ -13,5 +13,5 @@ export default async function setup(globalConfig: any) {
     force: true,
     recursive: true,
   });
-  await fs.mkdir(TMP_DIR);
+  await fs.mkdir(TMP_DIR, { recursive: true });
 }

jest.config.js

@@ -32,6 +32,7 @@ module.exports = {
       setupFilesAfterEnv: [
         "<rootDir>/packages/remix-dev/__tests__/setupAfterEnv.ts",
       ],
+      globalSetup: process.env.CI ? undefined : "<rootDir>/jest/buildRemix.ts",
     },
     {
       displayName: "remix-express",

packages/remix-dev/__tests__/cli-test.ts

@@ -16,11 +16,16 @@ const remix = path.resolve(
   "../../../build/node_modules/@remix-run/dev/cli.js"
 );
 
+const TEMP_DIR = path.join(process.cwd(), ".tmp", "create-remix");
+
 describe("remix cli", () => {
-  beforeAll(() => {
+  beforeAll(async () => {
     if (!fs.existsSync(remix)) {
       throw new Error(`Cannot run Remix CLI tests w/out building Remix`);
     }
+
+    await fsp.rm(TEMP_DIR, { force: true, recursive: true });
+    await fsp.mkdir(TEMP_DIR, { recursive: true });
   });
 
   describe("the --help flag", () => {
@@ -161,8 +166,7 @@ describe("remix cli", () => {
 
     function getProjectDir(name: string) {
       return path.join(
-        process.cwd(),
-        ".tmp",
+        TEMP_DIR,
         `${name}-${Math.random().toString(32).slice(2)}`
       );
     }
@@ -251,7 +255,7 @@ describe("remix cli", () => {
         `💿 That's it! \`cd\` into "${projectDir}" and check the README for development and deploy instructions!`
       );
       expect(fs.existsSync(path.join(projectDir, "package.json"))).toBeTruthy();
-      expect(fs.existsSync(path.join(projectDir, "app/root.jsx"))).toBeTruthy();
+      expect(fs.existsSync(path.join(projectDir, "app/root.tsx"))).toBeTruthy();
     });
 
     it("works for a path to a tarball on disk", async () => {
@@ -290,6 +294,25 @@ describe("remix cli", () => {
       expect(fs.existsSync(path.join(projectDir, "app/root.tsx"))).toBeTruthy();
     });
 
+    it("converts a template to javascript", async () => {
+      let projectDir = getProjectDir("template-to-js");
+      let { stdout } = await execFile("node", [
+        remix,
+        "create",
+        projectDir,
+        "--template",
+        "blues-stack",
+        "--no-install",
+        "--no-typescript",
+      ]);
+      expect(stdout.trim()).toBe(
+        `💿 You've opted out of running the remix.init script, you can run it manually with \`npx remix init\`
+💿 That's it! \`cd\` into "${projectDir}" and check the README for development and deploy instructions!`
+      );
+      expect(fs.existsSync(path.join(projectDir, "package.json"))).toBeTruthy();
+      expect(fs.existsSync(path.join(projectDir, "app/root.tsx"))).toBeTruthy();
+    });
+
     it("works for a file path to a directory on disk", async () => {
       let projectDir = getProjectDir("local-directory");
       let { stdout } = await execFile("node", [

packages/remix-dev/cli/create.ts

@@ -9,6 +9,13 @@ import * as semver from "semver";
 import { fileURLToPath } from "url";
 import { execSync } from "child_process";
 import sortPackageJSON from "sort-package-json";
+import glob from "fast-glob";
+import * as babel from "@babel/core";
+// @ts-expect-error these modules dont have types
+import babelPluginSyntaxJSX from "@babel/plugin-syntax-jsx";
+// @ts-expect-error these modules dont have types
+import babelPresetTypeScript from "@babel/preset-typescript";
+import prettier from "prettier";
 
 import packageJson from "../package.json";
 
@@ -28,7 +35,7 @@ export async function createApp({
   projectDir,
   remixVersion = remixDevPackageVersion,
   installDeps,
-  useTypeScript,
+  useTypeScript = true,
   githubToken = process.env.GITHUB_TOKEN,
 }: CreateAppArgs) {
   // Check the node version
@@ -135,15 +142,10 @@ export async function createApp({
   appPkg = sortPackageJSON(appPkg);
   await fse.writeJSON(path.join(projectDir, "package.json"), appPkg, {
     spaces: 2,
-    replacer: null,
   });
 
   if (!useTypeScript) {
-    // TODO:
-    // 1. Convert all .ts files in the template to .js
-    // 2. Rename the tsconfig.json to jsconfig.json
-    // 3. Remove @types/* and typescript from package.json
-    // 4. Remove typecheck npm script from package.json
+    await deTypeScriptify(projectDir);
   }
 
   if (installDeps) {
@@ -198,9 +200,7 @@ async function downloadAndExtractTemplateOrExample(
 
   let cwd = path.dirname(projectDir);
   let desiredDir = path.basename(projectDir);
-  let exampleOrTemplateName =
-    type === "templates" && options.useTypeScript ? `${name}-ts` : name;
-  let templateDir = path.join(desiredDir, type, exampleOrTemplateName);
+  let templateDir = path.join(desiredDir, type, name);
   await pipeline(
     response.body.pipe(gunzip()),
     tar.extract(cwd, {
@@ -391,9 +391,8 @@ async function isRemixTemplate(
     );
   }
   let results = await promise.json();
-  let possibleTemplateName = useTypeScript ? `${name}-ts` : name;
   let template = results.find((result: any) => {
-    return result.name === possibleTemplateName;
+    return result.name === name;
   });
   if (!template) return undefined;
   return template.name;
@@ -415,7 +414,9 @@ async function isRemixExample(name: string, token?: string) {
     );
   }
   let results = await promise.json();
-  let example = results.find((result: any) => result.name === name);
+  let example = results.find((result: any) => {
+    return result.name === name;
+  });
   if (!example) return undefined;
   return example.name;
 }
@@ -451,3 +452,80 @@ async function detectTemplateType(
   }
   return "remoteTarball";
 }
+
+function untype(filename: string, source: string, projectDir: string): string {
+  let result = babel.transformSync(source, {
+    filename,
+    presets: [[babelPresetTypeScript, { jsx: "preserve" }]],
+    plugins: [babelPluginSyntaxJSX],
+    compact: false,
+    retainLines: true,
+    cwd: projectDir,
+  });
+
+  if (!result || !result.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(result.code, { parser: "babel-ts" });
+}
+
+async function deTypeScriptify(projectDir: string) {
+  // 1. Convert all .ts files in the template to .js
+  let entries = glob.sync("**/*.+(ts|tsx)", {
+    cwd: projectDir,
+    absolute: true,
+  });
+  for (let entry of entries) {
+    if (entry.endsWith(".d.ts")) {
+      fse.removeSync(entry);
+      continue;
+    }
+
+    let contents = fse.readFileSync(entry, "utf8");
+    let filename = path.basename(entry);
+    let untyped = untype(filename, contents, projectDir);
+
+    fse.writeFileSync(entry, untyped, "utf8");
+    if (entry.endsWith(".tsx")) {
+      fse.renameSync(entry, entry.replace(/\.tsx?$/, ".jsx"));
+    } else {
+      fse.renameSync(entry, entry.replace(/\.ts?$/, ".js"));
+    }
+  }
+
+  // 2. Rename the tsconfig.json to jsconfig.json
+  if (fse.existsSync(path.join(projectDir, "tsconfig.json"))) {
+    fse.renameSync(
+      path.join(projectDir, "tsconfig.json"),
+      path.join(projectDir, "jsconfig.json")
+    );
+  }
+
+  // 3. Remove @types/* and typescript from package.json
+  let packageJson = path.join(projectDir, "package.json");
+  if (!fse.existsSync(packageJson)) {
+    throw new Error("Could not find package.json");
+  }
+  let pkg = JSON.parse(fse.readFileSync(packageJson, "utf8"));
+  let devDeps = pkg.devDependencies || {};
+  let newPackageJson = {
+    ...pkg,
+    devDependencies: Object.fromEntries(
+      Object.entries(devDeps).filter(([name]) => {
+        return !name.startsWith("@types/") && name !== "typescript";
+      })
+    ),
+  };
+  // 4. Remove typecheck npm script from package.json
+  if (pkg.scripts && pkg.scripts.typecheck) {
+    delete pkg.scripts.typecheck;
+  }
+  fse.writeJSONSync(path.join(projectDir, "package.json"), newPackageJson, {
+    spaces: 2,
+  });
+}