Update TS config

Author: ArnaudBarre

templates/base/README.md.ejs

@@ -61,7 +61,7 @@ With this set up you should be able to navigate to `/about` and see the about pa
 Of course you don't need to implement the About page in the `main.<%= jsx %>` file. You can create that component in another file and import it into the `main.<%= jsx %>` file, then use it in the `component` property of the `createRoute` call, like so:
 
 ```tsx
-import About from "./components/About";
+import About from "./components/About.<%= jsx %>";
 
 const aboutRoute = createRoute({
   getParentRoute: () => rootRoute,
@@ -298,7 +298,7 @@ import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { routeTree } from "./routeTree.gen";
 
 import "./styles.css";
-import reportWebVitals from "./reportWebVitals";
+import reportWebVitals from "./reportWebVitals.<%= js %>";
 
 // Create a new router instance
 const router = createRouter({ routeTree });

templates/base/package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "start": "vite --port 3000",
-    "build": "vite build && tsc --noEmit",
+    "build": "vite build && tsc",
     "serve": "vite preview",
     "test": "vitest run"
   },

templates/base/src/App.test.tsx.ejs

@@ -1,6 +1,6 @@
 import { describe, expect, test } from "vitest";
 import { render, screen } from "@testing-library/react";
-import App from "./App";
+import App from "./App.<%= jsx %>";
 
 describe("App", () => {
   test("renders", () => {

templates/base/tsconfig.dev.json

@@ -1,10 +1,24 @@
 {
+  "include": ["**/*.ts", "**/*.tsx"],
   "compilerOptions": {
-    "strict": true,
-    "types": ["vite/client", "node"],
-    "esModuleInterop": true,
+    "target": "ES2022",
     "jsx": "react-jsx",
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "skipLibCheck": true
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    /* Linting */
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
   }
 }

templates/base/tsconfig.json

@@ -10,9 +10,9 @@ import {
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
 
 import "./styles.css";
-import reportWebVitals from "./reportWebVitals";
+import reportWebVitals from "./reportWebVitals.<%= js %>";
 
-import App from "./App";
+import App from "./App.<%= jsx %>";
 
 const rootRoute = createRootRoute({
   component: () => (

templates/code-router/src/main.tsx.ejs

@@ -6,7 +6,7 @@ import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { routeTree } from "./routeTree.gen";
 
 import "./styles.css";
-import reportWebVitals from "./reportWebVitals";
+import reportWebVitals from "./reportWebVitals.<%= js %>";
 
 // Create a new router instance
 const router = createRouter({ routeTree });