Setup absolute paths in Vite/TS config

src/App.tsx

@@ -1,16 +1,14 @@
-import { createShapeId, TLUiComponents } from "@tldraw/tldraw";
 import "@tldraw/tldraw/tldraw.css";
-import "./css/style.css"
+import "@/css/style.css"
-import React, { useEffect, useState } from "react";
+import React, { } from "react";
 import ReactDOM from "react-dom/client";
-import { HTMLShape } from "./ts/shapes/HTMLShapeUtil";
+import { Default } from "@/ts/components/Default";
-import { Default } from "./ts/components/Default";
+import { Canvas } from "@/ts/components/Canvas";
-import { Canvas } from "./ts/components/Canvas";
+import { Toggle } from "@/ts/components/Toggle";
-import { Toggle } from "./ts/components/Toggle";
+import { usePhysics } from "@/ts/hooks/usePhysics.ts"
-import { usePhysics } from "./ts/hooks/usePhysics.ts"
+import { createShapes } from "@/utils";
-import { createShapes } from "./utils";
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { Contact } from "./ts/components/Contact.tsx";
+import { Contact } from "@/ts/components/Contact.tsx";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
 

src/ts/components/Canvas.tsx

@@ -1,6 +1,6 @@
 import { Tldraw, TLShape, TLUiComponents } from "@tldraw/tldraw";
-import { SimController } from "../physics/PhysicsControls";
+import { SimController } from "@/ts/physics/PhysicsControls";
-import { HTMLShapeUtil } from "../shapes/HTMLShapeUtil";
+import { HTMLShapeUtil } from "@/ts/shapes/HTMLShapeUtil";
 
 const components: TLUiComponents = {
   HelpMenu: null,

src/ts/components/Toggle.tsx

@@ -2,7 +2,7 @@ export function Toggle() {
   return (
     <>
       <button id="toggle-physics" onClick={() => window.dispatchEvent(new CustomEvent('togglePhysicsEvent'))}>
-        <img src="src/assets/gravity.svg" alt="Toggle Physics" />
+        <img src="assets/gravity.svg" alt="Toggle Physics" />
       </button>
     </>
   );

tsconfig.json

@@ -1,5 +1,10 @@
 {
   "compilerOptions": {
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["*"],
+      "src/*": ["./src/*"],
+    },
     "target": "ES2020",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
@@ -21,5 +26,6 @@
     "noFallthroughCasesInSwitch": true
   },
   "include": ["src"],
+  
   "references": [{ "path": "./tsconfig.node.json" }]
 }

vite.config.ts

@@ -9,4 +9,9 @@ export default defineConfig({
     wasm(),
     topLevelAwait()
   ],
+  resolve: {
+    alias: {
+      '@': '/src',
+    },
+  },
 })