fix(inspector): use runes and force runes mode (#1004)

* fix(inspector) use runes and force runes mode to avoid issues in client apps that set runes mode globally

* Update .changeset/cold-hats-leave.md

Co-authored-by: Bjorn Lu <[email protected]>

* fix: disable prefer-const rule for svelte files as it does not handle deriveds well

---------

Co-authored-by: Bjorn Lu <[email protected]>

Author: dominikg

.changeset/cold-hats-leave.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte-inspector': patch
+---
+
+fix(inspector): migrate client component to runes and force runes mode

eslint.config.js

@@ -116,7 +116,8 @@ export default [
 		},
 
 		rules: {
-			'n/no-missing-import': 'off' // n doesn't know some vite specifics or monorepo imports.
+			'n/no-missing-import': 'off', // n doesn't know some vite specifics or monorepo imports.
+			'prefer-const': 'off' // this turns let foo = $derived into a const otherwise
 		}
 	},
 	{

packages/vite-plugin-svelte-inspector/src/runtime/Inspector.svelte

@@ -1,3 +1,5 @@
+<svelte:options runes={true} />
+
 <script>
 	// do not use TS here so that this component works in non-ts projects too
 	import { onMount } from 'svelte';
@@ -8,8 +10,8 @@
 	const nav_keys = Object.values(options.navKeys).map((k) => k?.toLowerCase());
 	const open_key = options.openKey?.toLowerCase();
 
-	let enabled = false;
-	let has_opened = false;
+	let enabled = $state(false);
+	let has_opened = $state(false);
 
 	const icon = `data:image/svg+xml;base64,${btoa(
 		`
@@ -24,17 +26,19 @@
 	)}`;
 
 	// location of code in file
-	let file_loc;
+	let file_loc = $state();
 	// cursor pos and width for file_loc overlay positioning
-	let x, y, w;
+	let x = $state(),
+		y = $state(),
+		w = $state();
 
-	let active_el;
+	let active_el = $state();
 
-	let hold_start_ts;
+	let hold_start_ts = $state();
 
-	$: show_toggle =
-		// eslint-disable-next-line svelte/valid-compile
-		options.showToggleButton === 'always' || (options.showToggleButton === 'active' && enabled);
+	let show_toggle = $derived(
+		options.showToggleButton === 'always' || (options.showToggleButton === 'active' && enabled)
+	);
 
 	function mousemove(e) {
 		x = e.x;