chore(remix-dev): when using jsconfig, include js in jsconfig files instead of ts

integration/helpers/create-fixture.ts

@@ -206,6 +206,12 @@ async function writeTestFiles(init: FixtureInit, dir: string) {
       let filePath = path.join(dir, filename);
       await fse.ensureDir(path.dirname(filePath));
       let file = init.files![filename];
+      // if we have a jsconfig we don't want the tsconfig to exist
+      if (filename.endsWith("jsconfig.json")) {
+        let parsed = path.parse(filePath);
+        await fse.remove(path.join(parsed.dir, "tsconfig.json"));
+      }
+
       if (typeof file === "string") {
         await fse.writeFile(filePath, stripIndent(file));
       } else {

integration/tsconfig-test.ts

@@ -6,9 +6,12 @@ import type { TsConfigJson } from "type-fest";
 
 import { createFixture, json } from "./helpers/create-fixture";
 
-async function getTsConfig(projectDir: string) {
-  let tsconfigPath = path.join(projectDir, "tsconfig.json");
-  let config = await fse.readFile(tsconfigPath, "utf8");
+async function getTsConfig(
+  projectDir: string,
+  configType: "tsconfig.json" | "jsconfig.json" = "tsconfig.json"
+) {
+  let configPath = path.join(projectDir, configType);
+  let config = await fse.readFile(configPath, "utf8");
   return JSON5.parse(config);
 }
 
@@ -119,3 +122,21 @@ test("allows for `extends` in tsconfig", async () => {
     ...expected,
   });
 });
+
+test("works with jsconfig", async () => {
+  let config = {
+    compilerOptions: DEFAULT_CONFIG.compilerOptions,
+  };
+
+  let fixture = await createFixture({
+    files: {
+      "jsconfig.json": json(config),
+    },
+  });
+
+  let jsconfig = await getTsConfig(fixture.projectDir, "jsconfig.json");
+  expect(jsconfig).toEqual({
+    ...config,
+    include: ["**/*.js", "**/*.jsx"],
+  });
+});

packages/remix-dev/__tests__/fixtures/stack/tsconfig.json

@@ -1,6 +1,8 @@
 {
   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
     "lib": ["DOM", "DOM.Iterable", "ES2019"],
     "isolatedModules": true,
     "esModuleInterop": true,
@@ -9,8 +11,6 @@
     "resolveJsonModule": true,
     "target": "ES2019",
     "strict": true,
-    "allowJs": true,
-    "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
     "paths": {
       "~/*": ["./app/*"]

packages/remix-dev/compiler/plugins/serverBareModulesPlugin.ts

@@ -13,7 +13,7 @@ import { createMatchPath } from "../utils/tsconfig";
 
 /**
  * A plugin responsible for resolving bare module ids based on server target.
- * This includes externalizing for node based plaforms, and bundling for single file
+ * This includes externalizing for node based platforms, and bundling for single file
  * environments such as cloudflare.
  */
 export function serverBareModulesPlugin(

packages/remix-dev/compiler/utils/tsconfig/index.ts

@@ -1,7 +1,5 @@
 import tsConfigPaths from "tsconfig-paths";
 
-import { writeConfigDefaults } from "./write-config-defaults";
-
 export function createMatchPath(tsconfigPath: string | undefined) {
   // There is no tsconfig to match paths against.
   if (!tsconfigPath) {
@@ -22,8 +20,6 @@ export function createMatchPath(tsconfigPath: string | undefined) {
     return undefined;
   }
 
-  writeConfigDefaults(configLoaderResult.configFileAbsolutePath);
-
   return tsConfigPaths.createMatchPath(
     configLoaderResult.absoluteBaseUrl,
     configLoaderResult.paths,

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

@@ -56,7 +56,10 @@ export function writeConfigDefaults(configPath: string) {
     return;
   }
 
-  let configType = path.basename(configPath);
+  let configType = path.basename(configPath) as
+    | "jsconfig.json"
+    | "tsconfig.json";
+
   // sanity checks to make sure we can write the compilerOptions
   if (!fullConfig.compilerOptions) fullConfig.compilerOptions = {};
   if (!config.compilerOptions) config.compilerOptions = {};
@@ -65,12 +68,21 @@ export function writeConfigDefaults(configPath: string) {
   let requiredChanges = [];
 
   if (!("include" in fullConfig)) {
-    config.include = ["remix.env.d.ts", "**/*.ts", "**/*.tsx"];
-    suggestedChanges.push(
-      colors.blue("include") +
-        " was set to " +
-        colors.bold(`['remix.env.d.ts', '**/*.ts', '**/*.tsx']`)
-    );
+    if (configType === "jsconfig.json") {
+      config.include = ["**/*.js", "**/*.jsx"];
+      suggestedChanges.push(
+        colors.blue("include") +
+          " was set to " +
+          colors.bold(`['**/*.js', '**/*.jsx']`)
+      );
+    } else {
+      config.include = ["remix.env.d.ts", "**/*.ts", "**/*.tsx"];
+      suggestedChanges.push(
+        colors.blue("include") +
+          " was set to " +
+          colors.bold(`['remix.env.d.ts', '**/*.ts', '**/*.tsx']`)
+      );
+    }
   }
   // TODO: check for user's typescript version and only add baseUrl if < 4.1
   if (!("baseUrl" in fullConfig.compilerOptions)) {

packages/remix-dev/config.ts

@@ -8,6 +8,7 @@ import { defineRoutes } from "./config/routes";
 import { defineConventionalRoutes } from "./config/routesConvention";
 import { ServerMode, isValidServerMode } from "./config/serverModes";
 import { serverBuildVirtualModule } from "./compiler/virtualModules";
+import { writeConfigDefaults } from "./compiler/utils/tsconfig/write-config-defaults";
 
 export interface RemixMdxConfig {
   rehypePlugins?: any[];
@@ -467,6 +468,10 @@ export async function readConfig(
     tsconfigPath = rootJsConfig;
   }
 
+  if (tsconfigPath) {
+    writeConfigDefaults(tsconfigPath);
+  }
+
   return {
     appDirectory,
     cacheDirectory,