Webview - Add Import Path Aliasing (RooCodeInc#2673)

* add import path aliasing

* changeset

* shared directory path aliasing

Author: celestial-vault

.changeset/olive-months-decide.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Add import path aliasing to the webview

webview-ui/src/App.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react"
 import { useEvent } from "react-use"
-import { ExtensionMessage } from "../../src/shared/ExtensionMessage"
+import { ExtensionMessage } from "@shared/ExtensionMessage"
 import ChatView from "./components/chat/ChatView"
 import HistoryView from "./components/history/HistoryView"
 import SettingsView from "./components/settings/SettingsView"

webview-ui/src/components/mcp/tabs/AddRemoteServerForm.tsx

@@ -2,7 +2,7 @@ import { useCallback, useRef, useState } from "react"
 import { vscode } from "../../../utils/vscode"
 import { VSCodeButton, VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import { useEvent } from "react-use"
-import { LINKS } from "../../../constants"
+import { LINKS } from "@/constants"
 const AddRemoteServerForm = ({ onServerAdded }: { onServerAdded: () => void }) => {
 	const [serverName, setServerName] = useState("")
 	const [serverUrl, setServerUrl] = useState("")

webview-ui/tsconfig.app.json

@@ -18,7 +18,17 @@
 		/* Linting */
 		"strict": true,
 		"noFallthroughCasesInSwitch": true,
-		"noUncheckedSideEffectImports": true
+		"noUncheckedSideEffectImports": true,
+
+		/* Aliasing */
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["src/*"],
+			"@components/*": ["src/components/*"],
+			"@context/*": ["src/context/*"],
+			"@shared/*": ["../src/shared/*"],
+			"@utils/*": ["src/utils/*"]
+		}
 	},
 	"include": ["src"],
 	"exclude": ["src/**/__tests__/**"]

webview-ui/vite.config.ts

@@ -3,6 +3,7 @@
 import { defineConfig } from "vite"
 import tailwindcss from "@tailwindcss/vite"
 import react from "@vitejs/plugin-react-swc"
+import { resolve } from "path"
 
 export default defineConfig({
 	plugins: [react(), tailwindcss()],
@@ -45,4 +46,13 @@ export default defineConfig({
 			IS_DEV: JSON.stringify(process.env.IS_DEV),
 		},
 	},
+	resolve: {
+		alias: {
+			"@": resolve(__dirname, "./src"),
+			"@components": resolve(__dirname, "./src/components"),
+			"@context": resolve(__dirname, "./src/context"),
+			"@shared": resolve(__dirname, "../src/shared"),
+			"@utils": resolve(__dirname, "./src/utils"),
+		},
+	},
 })