@sveltejs/vite-plugin-svelte 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -46,7 +46,7 @@
     "deepmerge": "^4.2.2",
     "kleur": "^4.1.5",
     "magic-string": "^0.26.3",
-    "svelte-hmr": "^0.14.12"
+    "svelte-hmr": "^0.15.0"
   },
   "peerDependencies": {
     "diff-match-patch": "^1.0.5",
@@ -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

@@ -4,7 +4,7 @@
 	// eslint-disable-next-line node/no-missing-import
 	import options from 'virtual:svelte-inspector-options';
 	const toggle_combo = options.toggleKeyCombo?.toLowerCase().split('-');
-
+	const nav_keys = Object.values(options.navKeys).map((k) => k.toLowerCase());
 	let enabled = false;
 
 	const icon = `data:image/svg+xml;base64,${btoa(
@@ -25,7 +25,6 @@
 	let x, y, w;
 
 	let active_el;
-	let toggle_el;
 
 	let enabled_ts;
 
@@ -37,18 +36,65 @@
 		y = event.y;
 	}
 
-	function findMetaEl(el) {
-		while (el) {
-			const file = el.__svelte_meta?.loc?.file;
-			if (el !== toggle_el && file && !file.includes('node_modules/')) {
+	function find_selectable_parent(el) {
+		do {
+			el = el.parentNode;
+			if (is_selectable(el)) {
 				return el;
 			}
-			el = el.parentNode;
+		} while (el);
+	}
+
+	function find_selectable_child(el) {
+		return [...el.querySelectorAll('*')].find(is_selectable);
+	}
+
+	function find_selectable_sibling(el, prev = false) {
+		do {
+			el = prev ? el.previousElementSibling : el.nextElementSibling;
+			if (is_selectable(el)) {
+				return el;
+			}
+		} while (el);
+	}
+
+	function find_selectable_for_nav(key) {
+		const el = active_el;
+		if (!el) {
+			return find_selectable_child(document?.body);
 		}
+		switch (key) {
+			case options.navKeys.parent:
+				return find_selectable_parent(el);
+			case options.navKeys.child:
+				return find_selectable_child(el);
+			case options.navKeys.next:
+				return find_selectable_sibling(el) || find_selectable_parent(el);
+			case options.navKeys.prev:
+				return find_selectable_sibling(el, true) || find_selectable_parent(el);
+			default:
+				return;
+		}
+	}
+
+	function is_selectable(el) {
+		const file = el?.__svelte_meta?.loc?.file;
+		if (!file || file.includes('node_modules/')) {
+			return false; // no file or 3rd party
+		}
+		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 = findMetaEl(event.target);
+		const el = find_selectable_parent(event.target);
+		activate(el, false);
+	}
+
+	function activate(el, set_bubble_pos = true) {
 		if (options.customStyles && el !== active_el) {
 			if (active_el) {
 				active_el.classList.remove('svelte-inspector-active-target');
@@ -64,13 +110,16 @@
 			file_loc = null;
 		}
 		active_el = el;
+		if (set_bubble_pos) {
+			const pos = el.getBoundingClientRect();
+			x = Math.ceil(pos.left);
+			y = Math.ceil(pos.bottom - 20);
+		}
 	}
 
-	function click(event) {
+	function open_editor(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();
@@ -94,10 +143,24 @@
 		return toggle_combo?.every((key) => is_key_active(key, event));
 	}
 
+	function is_nav(event) {
+		return nav_keys?.some((key) => is_key_active(key, event));
+	}
+
+	function is_open(event) {
+		return options.openKey && options.openKey.toLowerCase() === event.key.toLowerCase();
+	}
+
 	function is_holding() {
 		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 +171,14 @@
 			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 (is_open(event)) {
+			open_editor(event);
 		}
 	}
 
@@ -131,7 +202,7 @@
 		const l = enabled ? body.addEventListener : body.removeEventListener;
 		l('mousemove', mousemove);
 		l('mouseover', mouseover);
-		l('click', click, true);
+		l('click', open_editor, true);
 	}
 
 	function enable() {
@@ -141,6 +212,32 @@
 			b.classList.add('svelte-inspector-enabled');
 		}
 		listeners(b, enabled);
+		activate_initial_el();
+	}
+
+	function activate_initial_el() {
+		const hov = innermost_hover_el();
+		let el = is_selectable(hov) ? hov : find_selectable_parent(hov);
+		if (!el) {
+			const act = document.activeElement;
+			el = is_selectable(act) ? act : find_selectable_parent(act);
+		}
+		if (!el) {
+			el = find_selectable_child(document.body);
+		}
+		if (el) {
+			activate(el);
+		}
+	}
+
+	function innermost_hover_el() {
+		let e = document.body.querySelector(':hover');
+		let result;
+		while (e) {
+			result = e;
+			e = e.querySelector(':hover');
+		}
+		return result;
 	}
 
 	function disable() {
@@ -185,25 +282,29 @@
 </script>
 
 {#if show_toggle}
-	<div
-		class="svelte-inspector-toggle"
+	<button
+		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 && file_loc}
+{#if enabled && active_el && file_loc}
+	{@const loc = active_el.__svelte_meta.loc}
 	<div
-		class="svelte-inspector-overlay"
-		style:left="{Math.min(x + 3, document.body.clientWidth - w - 10)}px"
-		style:top="{y + 30}px"
+		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}
 	>
-		{file_loc}
+		&lt;{active_el.tagName.toLowerCase()}&gt;&nbsp;{file_loc}
+	</div>
+	<div id="svelte-inspector-announcer" aria-live="assertive" aria-atomic="true">
+		{active_el.tagName.toLowerCase()} in file {loc.file} on line {loc.line} column {loc.column}
 	</div>
 {/if}
 
@@ -215,16 +316,18 @@
 		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;
 		position: fixed;
@@ -236,10 +339,22 @@
 		cursor: pointer;
 	}
 
-	.svelte-inspector-toggle:not(.enabled) {
+	#svelte-inspector-announcer {
+		position: absolute;
+		left: 0px;
+		top: 0px;
+		clip: rect(0px, 0px, 0px, 0px);
+		clip-path: inset(50%);
+		overflow: hidden;
+		white-space: nowrap;
+		width: 1px;
+		height: 1px;
+	}
+
+	#svelte-inspector-toggle:not(.enabled) {
 		filter: grayscale(1);
 	}
-	.svelte-inspector-toggle:hover {
+	#svelte-inspector-toggle:hover {
 		background-color: #facece;
 	}
 </style>

package/src/ui/inspector/plugin.ts

@@ -8,6 +8,8 @@ import { idToFile } from './utils';
 
 const defaultInspectorOptions: InspectorOptions = {
 	toggleKeyCombo: process.platform === 'win32' ? 'control-shift' : 'meta-shift',
+	navKeys: { parent: 'ArrowUp', child: 'ArrowDown', next: 'ArrowRight', prev: 'ArrowLeft' },
+	openKey: 'Enter',
 	holdMode: false,
 	showToggleButton: 'active',
 	toggleButtonPos: 'top-right',

package/src/utils/options.ts

@@ -170,7 +170,12 @@ export function resolveOptions(
 	viteConfig: ResolvedConfig
 ): ResolvedOptions {
 	const defaultOptions: Partial<Options> = {
-		hot: viteConfig.isProduction ? false : { injectCss: !preResolveOptions.emitCss },
+		hot: viteConfig.isProduction
+			? false
+			: {
+					injectCss: !preResolveOptions.emitCss,
+					partialAccept: !!viteConfig.experimental?.hmrPartialAccept
+			  },
 		compilerOptions: {
 			css: !preResolveOptions.emitCss,
 			dev: !viteConfig.isProduction
@@ -331,6 +336,17 @@ export function buildExtraViteConfig(
 	// @ts-ignore
 	extraViteConfig.ssr = buildSSROptionsForSvelte(svelteDeps, options, config, extraViteConfig);
 
+	// enable hmrPartialAccept if not explicitly disabled
+	if (
+		(options.hot == null ||
+			options.hot === true ||
+			(options.hot && options.hot.partialAccept !== false)) && // deviate from svelte-hmr, default to true
+		config.experimental?.hmrPartialAccept !== false
+	) {
+		log.debug('enabling "experimental.hmrPartialAccept" in vite config');
+		extraViteConfig.experimental = { hmrPartialAccept: true };
+	}
+
 	return extraViteConfig;
 }
 
@@ -500,7 +516,7 @@ export interface PluginOptions {
 	 * @see https://github.com/rixo/svelte-hmr#options
 	 * @default true for development, always false for production
 	 */
-	hot?: boolean | { injectCss?: boolean; [key: string]: any };
+	hot?: boolean | { injectCss?: boolean; partialAccept?: boolean; [key: string]: any };
 
 	/**
 	 * Some Vite plugins can contribute additional preprocessors by defining `api.sveltePreprocess`.
@@ -643,6 +659,32 @@ export interface InspectorOptions {
 	 */
 	toggleKeyCombo?: string;
 
+	/**
+	 * define keys to select elements with via keyboard
+	 * @default {parent: 'ArrowUp', child: 'ArrowDown', next: 'ArrowRight', prev: 'ArrowLeft' }
+	 *
+	 * improves accessibility and also helps when you want to select elements that do not have a hoverable surface area
+	 * due to tight wrapping
+	 *
+	 * A note for users of screen-readers:
+	 * If you are using arrow keys to navigate the page itself, change the navKeys to avoid conflicts.
+	 * e.g. navKeys: {parent: 'w', prev: 'a', child: 's', next: 'd'}
+	 *
+	 *
+	 * parent: select closest parent
+	 * child: select first child (or grandchild)
+	 * next: next sibling (or parent if no next sibling exists)
+	 * prev: previous sibling (or parent if no prev sibling exists)
+	 */
+	navKeys?: { parent: string; child: string; next: string; prev: string };
+
+	/**
+	 * define key to open the editor for the currently selected dom node
+	 *
+	 * @default 'Enter'
+	 */
+	openKey?: string;
+
 	/**
 	 * inspector is automatically disabled when releasing toggleKeyCombo after holding it for a longpress
 	 * @default false