fix(remix-dev): stop automatically updating tsconfig.json

.changeset/cyan-onions-wave.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+Remix no longer updates your projects TSConfig file unless the `--fix` flag is specified when running `$ remix dev`.

contributors.yml

@@ -431,6 +431,7 @@
 - scottybrown
 - sdavids
 - sean-roberts
+- SeanGroff
 - sebz
 - selfish
 - sergiocarneiro

docs/other-api/dev.md

@@ -84,6 +84,10 @@ remix dev
 
 Attaches a [Node inspector][node-inspector] to develop your app in debug mode.
 
+### `remix dev --fix`
+
+Updates the TSConfig within your application if any of the mandatory or suggested compiler options are missing.
+
 ### `remix dev --port`
 
 Launches the app server on a given port.

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

@@ -114,6 +114,7 @@ describe("remix CLI", () => {
             --sourcemap         Generate source maps for production
           \`dev\` Options:
             --debug             Attach Node.js inspector
+            --fix               Fix TSConfig.json automatically
             --port, -p          Choose the port from which to run your app
           \`init\` Options:
             --no-delete         Skip deleting the \`remix.init\` script
@@ -169,6 +170,7 @@ describe("remix CLI", () => {
             $ remix dev
             $ remix dev my-app
             $ remix dev --debug
+            $ remix dev --fix
 
           Start your server separately and watch for changes:
 

packages/remix-dev/cli/commands.ts

@@ -202,9 +202,9 @@ export async function watch(
 export async function dev(
   remixRoot: string,
   modeArg?: string,
-  flags: { port?: number; appServerPort?: number } = {}
+  flags: { port?: number; appServerPort?: number; fix?: boolean } = {}
 ) {
-  let config = await readConfig(remixRoot);
+  let config = await readConfig(remixRoot, flags.fix);
   let mode = compiler.parseMode(modeArg ?? "", "development");
 
   if (config.future.unstable_dev !== false) {

packages/remix-dev/cli/run.ts

@@ -41,6 +41,7 @@ ${colors.logoBlue("R")} ${colors.logoGreen("E")} ${colors.logoYellow(
     --sourcemap         Generate source maps for production
   \`dev\` Options:
     --debug             Attach Node.js inspector
+    --fix               Fix TSConfig.json automatically
     --port, -p          Choose the port from which to run your app
   \`init\` Options:
     --no-delete         Skip deleting the \`remix.init\` script
@@ -96,6 +97,7 @@ ${colors.logoBlue("R")} ${colors.logoGreen("E")} ${colors.logoYellow(
     $ remix dev
     $ remix dev my-app
     $ remix dev --debug
+    $ remix dev --fix
 
   ${colors.heading("Start your server separately and watch for changes")}:
 
@@ -139,7 +141,12 @@ const npxInterop = {
 
 async function dev(
   projectDir: string,
-  flags: { debug?: boolean; port?: number; appServerPort?: number }
+  flags: {
+    debug?: boolean;
+    fix?: boolean;
+    port?: number;
+    appServerPort?: number;
+  }
 ) {
   if (!process.env.NODE_ENV) process.env.NODE_ENV = "development";
 
@@ -164,6 +171,7 @@ export async function run(argv: string[] = process.argv.slice(2)) {
     {
       "--app-server-port": Number,
       "--debug": Boolean,
+      "--fix": Boolean,
       "--no-delete": Boolean,
       "--dry": Boolean,
       "--force": Boolean,

packages/remix-dev/compiler/utils/tsconfig/write-config-defaults.ts

@@ -7,7 +7,7 @@ import JSON5 from "json5";
 
 import * as colors from "../../../colors";
 
-// These are suggested values and will be set when not present in the
+// These values are suggested when not present in the
 // tsconfig.json
 let suggestedCompilerOptions: TsConfigJson.CompilerOptions = {
   allowJs: true,
@@ -33,7 +33,10 @@ function objectKeys<Type extends object>(value: Type): Array<ObjectKeys<Type>> {
   return Object.keys(value) as Array<ObjectKeys<Type>>;
 }
 
-export function writeConfigDefaults(configPath: string) {
+export function writeConfigDefaults(
+  configPath: string,
+  fixFlag: boolean = false
+) {
   // check files exist
   if (!fse.existsSync(configPath)) return;
 
@@ -66,19 +69,21 @@ export function writeConfigDefaults(configPath: string) {
   let suggestedChanges = [];
   let requiredChanges = [];
 
+  let actionMessage = fixFlag ? " was set to " : " -> ";
+
   if (!("include" in fullConfig)) {
     if (configType === "jsconfig.json") {
       config.include = ["**/*.js", "**/*.jsx"];
       suggestedChanges.push(
         colors.blue("include") +
-          " was set to " +
+          actionMessage +
           colors.bold(`['**/*.js', '**/*.jsx']`)
       );
     } else {
       config.include = ["remix.env.d.ts", "**/*.ts", "**/*.tsx"];
       suggestedChanges.push(
         colors.blue("include") +
-          " was set to " +
+          actionMessage +
           colors.bold(`['remix.env.d.ts', '**/*.ts', '**/*.tsx']`)
       );
     }
@@ -89,7 +94,7 @@ export function writeConfigDefaults(configPath: string) {
     config.compilerOptions.baseUrl = baseUrl;
     requiredChanges.push(
       colors.blue("compilerOptions.baseUrl") +
-        " was set to " +
+        actionMessage +
         colors.bold(`'${baseUrl}'`)
     );
   }
@@ -98,7 +103,7 @@ export function writeConfigDefaults(configPath: string) {
       config.compilerOptions[key] = suggestedCompilerOptions[key] as any;
       suggestedChanges.push(
         colors.blue("compilerOptions." + key) +
-          " was set to " +
+          actionMessage +
           colors.bold(`'${suggestedCompilerOptions[key]}'`)
       );
     }
@@ -109,7 +114,7 @@ export function writeConfigDefaults(configPath: string) {
       config.compilerOptions[key] = requiredCompilerOptions[key] as any;
       requiredChanges.push(
         colors.blue("compilerOptions." + key) +
-          " was set to " +
+          actionMessage +
           colors.bold(`'${requiredCompilerOptions[key]}'`)
       );
     }
@@ -120,7 +125,7 @@ export function writeConfigDefaults(configPath: string) {
     config.compilerOptions.moduleResolution = "node";
     requiredChanges.push(
       colors.blue("compilerOptions.moduleResolution") +
-        " was set to " +
+        actionMessage +
         colors.bold(`'node'`)
     );
   }
@@ -134,40 +139,49 @@ export function writeConfigDefaults(configPath: string) {
 
     requiredChanges.push(
       colors.blue("compilerOptions.moduleResolution") +
-        " was set to " +
+        actionMessage +
         colors.bold(`'node'`)
     );
   }
 
-  if (suggestedChanges.length > 0 || requiredChanges.length > 0) {
-    fse.writeFileSync(
-      configPath,
-      prettier.format(JSON.stringify(config, null, 2), {
-        parser: "json",
-      })
-    );
-  }
-  if (suggestedChanges.length > 0) {
+  if (requiredChanges.length > 0) {
     console.log(
-      `The following suggested values were added to your ${colors.blue(
-        `"${configType}"`
-      )}. These values ${colors.bold(
-        "can be changed"
-      )} to fit your project's needs:\n`
+      `The following ${colors.bold("mandatory changes")} ${
+        fixFlag ? "were" : "should be"
+      } made to your ${colors.blue(configType)}:\n`
     );
 
-    suggestedChanges.forEach((change) => console.log(`\t- ${change}`));
+    requiredChanges.forEach((change) => console.log(`\t- ${change}`));
     console.log("");
   }
 
-  if (requiredChanges.length > 0) {
-    console.log(
-      `The following ${colors.bold(
-        "mandatory changes"
-      )} were made to your ${colors.blue(configType)}:\n`
-    );
+  if (suggestedChanges.length > 0) {
+    fixFlag
+      ? console.log(
+          `The following suggested values were added to your ${colors.blue(
+            `"${configType}"`
+          )}. These values ${colors.bold(
+            "can be changed"
+          )} to fit your project's needs:\n`
+        )
+      : console.log(
+          `We suggest adding the following values to your ${colors.blue(
+            `"${configType}"`
+          )}:\n`
+        );
 
-    requiredChanges.forEach((change) => console.log(`\t- ${change}`));
+    suggestedChanges.forEach((change) => console.log(`\t- ${change}`));
     console.log("");
   }
+
+  if (fixFlag) {
+    if (suggestedChanges.length > 0 || requiredChanges.length > 0) {
+      fse.writeFileSync(
+        configPath,
+        prettier.format(JSON.stringify(config, null, 2), {
+          parser: "json",
+        })
+      );
+    }
+  }
 }

packages/remix-dev/config.ts

@@ -366,6 +366,7 @@ export interface RemixConfig {
  */
 export async function readConfig(
   remixRoot?: string,
+  fixFlag?: boolean,
   serverMode = ServerMode.Production
 ): Promise<RemixConfig> {
   if (!isValidServerMode(serverMode)) {
@@ -624,7 +625,7 @@ export async function readConfig(
   }
 
   if (tsconfigPath) {
-    writeConfigDefaults(tsconfigPath);
+    writeConfigDefaults(tsconfigPath, fixFlag);
   }
 
   let future: FutureConfig = {