From dc6e808054959d50b558ab7a07457014fefcb184 Mon Sep 17 00:00:00 2001
From: "Dominik G." <dominik.goepel@gmx.de>
Date: Wed, 23 Oct 2024 15:31:04 +0200
Subject: [PATCH] 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 <bjornlu.dev@gmail.com>

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

---------

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
---
 .changeset/cold-hats-leave.md                 |  5 +++++
 eslint.config.js                              |  3 ++-
 .../src/runtime/Inspector.svelte              | 22 +++++++++++--------
 3 files changed, 20 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/cold-hats-leave.md

diff --git a/.changeset/cold-hats-leave.md b/.changeset/cold-hats-leave.md
new file mode 100644
index 000000000..f55bcc903
--- /dev/null
+++ b/.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
diff --git a/eslint.config.js b/eslint.config.js
index 442abea63..3b3c3eb3d 100644
--- a/eslint.config.js
+++ b/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
 		}
 	},
 	{
diff --git a/packages/vite-plugin-svelte-inspector/src/runtime/Inspector.svelte b/packages/vite-plugin-svelte-inspector/src/runtime/Inspector.svelte
index 2d0740f56..9a03c49c7 100644
--- a/packages/vite-plugin-svelte-inspector/src/runtime/Inspector.svelte
+++ b/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;