feat: add drilling and tag display to inspector (#436)

* feat: add drilling and tag display to inspector

* feat: add config option for svelte-inspector drill keys and stop key event if drilling occurs

Author: dominikg

.changeset/fair-dodos-dance.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+svelte-inspector: use arrow up/down to allow selecting parent/child elements that cannot be moused over (see #435)

.changeset/light-readers-leave.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+svelte-inspector: display active element tag

docs/config.md

@@ -305,6 +305,14 @@ export default {
      */
     toggleKeyCombo?: string;
 
+    /**
+     * define keys to drill from the active element (up selects parent, down selects child).
+     * @default {up: 'ArrowUp',down: 'ArrowDown'}
+     *
+     * This is useful when components wrap another one without providing any hoverable area between them
+     */
+    drillKeys?: { up: string; down: string };
+
     /**
      * inspector is automatically disabled when releasing toggleKeyCombo after holding it for a longpress
      * @default false

packages/playground/kit-demo-app/svelte.config.js

@@ -9,6 +9,11 @@ const config = {
 		methodOverride: {
 			allowed: ['PATCH', 'DELETE']
 		}
+	},
+	vitePlugin: {
+		experimental: {
+			inspector: true
+		}
 	}
 };
 

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

@@ -37,18 +37,30 @@
 		y = event.y;
 	}
 
-	function findMetaEl(el) {
+	function find_parent_with_meta(el) {
 		while (el) {
-			const file = el.__svelte_meta?.loc?.file;
-			if (el !== toggle_el && file && !file.includes('node_modules/')) {
+			if (has_meta(el)) {
 				return el;
 			}
 			el = el.parentNode;
 		}
 	}
 
+	function find_child_with_meta(el) {
+		return [...el.querySelectorAll('*')].find(has_meta);
+	}
+
+	function has_meta(el) {
+		const file = el.__svelte_meta?.loc?.file;
+		return el !== toggle_el && file && !file.includes('node_modules/');
+	}
+
 	function mouseover(event) {
-		const el = findMetaEl(event.target);
+		const el = find_parent_with_meta(event.target);
+		activate(el);
+	}
+
+	function activate(el) {
 		if (options.customStyles && el !== active_el) {
 			if (active_el) {
 				active_el.classList.remove('svelte-inspector-active-target');
@@ -68,9 +80,7 @@
 
 	function click(event) {
 		if (file_loc) {
-			event.preventDefault();
-			event.stopPropagation();
-			event.stopImmediatePropagation();
+			stop(event);
 			fetch(`/__open-in-editor?file=${encodeURIComponent(file_loc)}`);
 			if (options.holdMode && is_holding()) {
 				disable();
@@ -98,6 +108,12 @@
 		return enabled_ts && Date.now() - enabled_ts > 250;
 	}
 
+	function stop(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		event.stopImmediatePropagation();
+	}
+
 	function keydown(event) {
 		if (event.repeat || event.key == null) {
 			return;
@@ -108,6 +124,18 @@
 			if (options.holdMode && enabled) {
 				enabled_ts = Date.now();
 			}
+		} else if (event.key === options.drillKeys.up && active_el) {
+			const el = find_parent_with_meta(active_el.parentNode);
+			if (el) {
+				activate(el);
+				stop(event);
+			}
+		} else if (event.key === options.drillKeys.down && active_el) {
+			const el = find_child_with_meta(active_el);
+			if (el) {
+				activate(el);
+				stop(event);
+			}
 		}
 	}
 
@@ -203,7 +231,7 @@
 		style:top="{y + 30}px"
 		bind:offsetWidth={w}
 	>
-		{file_loc}
+		<{active_el.tagName.toLowerCase()}> {file_loc}
 	</div>
 {/if}
 

packages/vite-plugin-svelte/src/ui/inspector/plugin.ts

@@ -8,6 +8,7 @@ import { idToFile } from './utils';
 
 const defaultInspectorOptions: InspectorOptions = {
 	toggleKeyCombo: process.platform === 'win32' ? 'control-shift' : 'meta-shift',
+	drillKeys: { up: 'ArrowUp', down: 'ArrowDown' },
 	holdMode: false,
 	showToggleButton: 'active',
 	toggleButtonPos: 'top-right',

packages/vite-plugin-svelte/src/utils/options.ts

@@ -643,6 +643,14 @@ export interface InspectorOptions {
 	 */
 	toggleKeyCombo?: string;
 
+	/**
+	 * define keys to drill from the active element (up selects parent, down selects child).
+	 * @default {up: 'ArrowUp',down: 'ArrowDown'}
+	 *
+	 * This is useful when components wrap another one without providing any hoverable area between them
+	 */
+	drillKeys?: { up: string; down: string };
+
 	/**
 	 * inspector is automatically disabled when releasing toggleKeyCombo after holding it for a longpress
 	 * @default false