refactor: simplify tsconfig with @tsconfig/bases for vite react, move 'features' into 'components'

package.json

@@ -24,6 +24,7 @@
 	},
 	"devDependencies": {
 		"@tauri-apps/cli": "^2",
+		"@tsconfig/vite-react": "^7.0.0",
 		"@types/react": "^18.3.1",
 		"@types/react-dom": "^18.3.1",
 		"@vitejs/plugin-react": "^4.3.4",

pnpm-lock.yaml

@@ -42,6 +42,9 @@ importers:
       '@tauri-apps/cli':
         specifier: ^2
         version: 2.6.2
+      '@tsconfig/vite-react':
+        specifier: ^7.0.0
+        version: 7.0.0
       '@types/react':
         specifier: ^18.3.1
         version: 18.3.23
@@ -679,6 +682,9 @@ packages:
   '@tauri-apps/plugin-opener@2.4.0':
     resolution: {integrity: sha512-43VyN8JJtvKWJY72WI/KNZszTpDpzHULFxQs0CJBIYUdCRowQ6Q1feWTDb979N7nldqSuDOaBupZ6wz2nvuWwQ==}
 
+  '@tsconfig/vite-react@7.0.0':
+    resolution: {integrity: sha512-fiuTviENxttMlo8BHuVWgPe/DRwcuU722oVvQ/HLfI3pxXfX4uBjvj9tHm1fbj5+iYbcPmdGENXOUks6yKF2Ug==}
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -1863,6 +1869,8 @@ snapshots:
     dependencies:
       '@tauri-apps/api': 2.6.0
 
+  '@tsconfig/vite-react@7.0.0': {}
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.28.0

src/App.tsx

@@ -1,7 +1,7 @@
-import { useDragDropPaths } from "./hooks/useDragDropPaths.js";
+import { useDragDropPaths } from "./hooks/useDragDropPaths";
-import Graph from "./features/graph/graph.js";
+import Graph from "./components/graph";
-import DropOverlay from "./features/drop/drop-overlay.js";
+import DropOverlay from "./components/drop-overlay";
-import type { Frame } from "./types/graph.js";
+import type { Frame } from "./types/graph";
 
 function App() {
 	const data: Frame[] = [];

src/components/drop-overlay.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useRef, useState } from "react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
 import { match, P } from "ts-pattern";
 import {
 	CheckCircle,
@@ -10,8 +10,8 @@ import {
 	Music,
 	XCircle,
 } from "lucide-react";
-import { commands } from "../../bindings";
+import { commands } from "../bindings";
-import type { MediaType, StreamDetail } from "../../bindings";
+import type { MediaType, StreamDetail } from "../bindings";
 
 type DropOverlayProps = {
 	paths: string[];

src/components/graph.tsx

@@ -1,6 +1,6 @@
 import { ResponsiveLine } from "@nivo/line";
-import { formatBytes } from "../../lib/format.js";
+import { formatBytes } from "@/lib/format";
-import type { Frame } from "../../types/graph.js";
+import type { Frame } from "@/types/graph";
 
 type GraphProps = {
 	data: Frame[];

tsconfig.json

@@ -1,25 +1,10 @@
 {
+	"extends": "@tsconfig/vite-react/tsconfig.json",
 	"compilerOptions": {
-		"target": "ES2020",
+		/* Paths */
-		"useDefineForClassFields": true,
+		"paths": {
-		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+			"@/*": ["./src/*"]
-		"module": "ESNext",
+		}
-		"skipLibCheck": true,
-
-		/* Bundler mode */
-		"moduleResolution": "bundler",
-		"allowImportingTsExtensions": true,
-		"resolveJsonModule": true,
-		"isolatedModules": true,
-		"noEmit": true,
-		"jsx": "react-jsx",
-
-		/* Linting */
-		"strict": true,
-		"noUnusedLocals": true,
-		"noUnusedParameters": true,
-		"noFallthroughCasesInSwitch": true
 	},
-	"include": ["src"],
+	"include": ["src"]
-	"references": [{ "path": "./tsconfig.node.json" }]
 }

vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
+import path from "path";
 
 // @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST;
@@ -8,6 +9,11 @@ const host = process.env.TAURI_DEV_HOST;
 // https://vite.dev/config/
 export default defineConfig(async () => ({
 	plugins: [react(), tailwindcss()],
+	resolve: {
+		alias: {
+			"@": path.resolve(__dirname, "src"),
+		},
+	},
 
 	// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
 	//