@sveltejs/vite-plugin-svelte 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -62,11 +62,11 @@
     "@types/debug": "^4.1.7",
     "@types/diff-match-patch": "^1.0.32",
     "diff-match-patch": "^1.0.5",
-    "esbuild": "^0.15.7",
+    "esbuild": "^0.15.8",
     "rollup": "^2.79.0",
-    "svelte": "^3.50.0",
+    "svelte": "^3.50.1",
     "tsup": "^6.2.3",
-    "vite": "^3.1.0"
+    "vite": "^3.1.2"
   },
   "scripts": {
     "dev": "pnpm build:ci --sourcemap --watch src",

package/src/ui/inspector/Inspector.svelte

@@ -25,7 +25,6 @@
 	let x, y, w;
 
 	let active_el;
-	let toggle_el;
 
 	let enabled_ts;
 
@@ -37,13 +36,16 @@
 		y = event.y;
 	}
 
-	function find_selectable_parent(el) {
-		do {
+	function find_selectable_parent(el, include_self = false) {
+		if (!include_self) {
 			el = el.parentNode;
+		}
+		while (el) {
 			if (is_selectable(el)) {
 				return el;
 			}
-		} while (el);
+			el = el.parentNode;
+		}
 	}
 
 	function find_selectable_child(el) {
@@ -79,21 +81,19 @@
 	}
 
 	function is_selectable(el) {
-		if (el === toggle_el) {
-			return false; // toggle is our own
-		}
 		const file = el?.__svelte_meta?.loc?.file;
 		if (!file || file.includes('node_modules/')) {
 			return false; // no file or 3rd party
 		}
-		if (['svelte-announcer', 'svelte-inspector-announcer'].includes(el.getAttribute('id'))) {
+		const id = el.getAttribute('id');
+		if (id === 'svelte-announcer' || id?.startsWith('svelte-inspector-')) {
 			return false; // ignore some elements by id that would be selectable from keyboard nav otherwise
 		}
 		return true;
 	}
 
-	function mouseover(event) {
-		const el = find_selectable_parent(event.target);
+	function mouseover({ target }) {
+		const el = find_selectable_parent(target, true);
 		activate(el, false);
 	}
 
@@ -174,14 +174,16 @@
 			if (options.holdMode && enabled) {
 				enabled_ts = Date.now();
 			}
-		} else if (is_nav(event)) {
-			const el = find_selectable_for_nav(event.key);
-			if (el) {
-				activate(el);
-				stop(event);
+		} else if (enabled) {
+			if (is_nav(event)) {
+				const el = find_selectable_for_nav(event.key);
+				if (el) {
+					activate(el);
+					stop(event);
+				}
+			} else if (is_open(event)) {
+				open_editor(event);
 			}
-		} else if (is_open(event)) {
-			open_editor(event);
 		}
 	}
 
@@ -220,10 +222,10 @@
 
 	function activate_initial_el() {
 		const hov = innermost_hover_el();
-		let el = is_selectable(hov) ? hov : find_selectable_parent(hov);
+		let el = find_selectable_parent(hov, true);
 		if (!el) {
 			const act = document.activeElement;
-			el = is_selectable(act) ? act : find_selectable_parent(act);
+			el = find_selectable_parent(act, true);
 		}
 		if (!el) {
 			el = find_selectable_child(document.body);
@@ -286,21 +288,20 @@
 
 {#if show_toggle}
 	<button
-		class="svelte-inspector-toggle"
+		id="svelte-inspector-toggle"
 		class:enabled
 		style={`background-image: var(--svelte-inspector-icon);${options.toggleButtonPos
 			.split('-')
 			.map((p) => `${p}: 8px;`)
 			.join('')}`}
 		on:click={() => toggle()}
-		bind:this={toggle_el}
 		aria-label={`${enabled ? 'disable' : 'enable'} svelte-inspector`}
 	/>
 {/if}
 {#if enabled && active_el && file_loc}
 	{@const loc = active_el.__svelte_meta.loc}
 	<div
-		class="svelte-inspector-overlay"
+		id="svelte-inspector-overlay"
 		style:left="{Math.min(x + 3, document.documentElement.clientWidth - w - 10)}px"
 		style:top="{document.documentElement.clientHeight < y + 50 ? y - 30 : y + 30}px"
 		bind:offsetWidth={w}
@@ -320,16 +321,17 @@
 		outline: 2px dashed #ff3e00 !important;
 	}
 
-	.svelte-inspector-overlay {
+	#svelte-inspector-overlay {
 		position: fixed;
 		background-color: rgba(0, 0, 0, 0.8);
 		color: #fff;
 		padding: 2px 4px;
 		border-radius: 5px;
 		z-index: 999999;
+		pointer-events: none;
 	}
 
-	.svelte-inspector-toggle {
+	#svelte-inspector-toggle {
 		all: unset;
 		border: 1px solid #ff3e00;
 		border-radius: 8px;
@@ -354,10 +356,10 @@
 		height: 1px;
 	}
 
-	.svelte-inspector-toggle:not(.enabled) {
+	#svelte-inspector-toggle:not(.enabled) {
 		filter: grayscale(1);
 	}
-	.svelte-inspector-toggle:hover {
+	#svelte-inspector-toggle:hover {
 		background-color: #facece;
 	}
 </style>