docs/config.md

@@ -98,7 +98,7 @@ These options are specific to the Svelte compiler and are generally shared acros
 
 ### preprocess
 
-- **Type:** `PreprocessorGroup | PreprocessorGroup[]` - See [svelte.preprocess](https://svelte.dev/docs#svelte_preprocess)
+- **Type:** `PreprocessorGroup | PreprocessorGroup[]` - See [svelte.preprocess](https://svelte.dev/docs#compile-time-svelte-preprocess)
 
   An array of preprocessors to transform the Svelte source code before compilation.
 
@@ -305,6 +305,27 @@ export default {
      */
     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
+     *
+     * 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

packages/e2e-tests/hmr/__tests__/hmr.spec.ts

@@ -4,6 +4,7 @@ import {
 	getEl,
 	getText,
 	editFileAndWaitForHmrComplete,
+	hmrCount,
 	untilMatches,
 	sleep,
 	getColor,
@@ -54,6 +55,10 @@ test('should respect transforms', async () => {
 if (!isBuild) {
 	describe('hmr', () => {
 		const updateHmrTest = editFileAndWaitForHmrComplete.bind(null, 'src/components/HmrTest.svelte');
+		const updateModuleContext = editFileAndWaitForHmrComplete.bind(
+			null,
+			'src/components/partial-hmr/ModuleContext.svelte'
+		);
 		const updateApp = editFileAndWaitForHmrComplete.bind(null, 'src/App.svelte');
 		const updateStore = editFileAndWaitForHmrComplete.bind(null, 'src/stores/hmr-stores.js');
 
@@ -136,6 +141,18 @@ if (!isBuild) {
 			expect(await getText(`#hmr-test-3 .counter`)).toBe('0');
 		});
 
+		test('should work when editing script context="module"', async () => {
+			expect(await getText(`#hmr-with-context`)).toContain('x=0 y=1 slot=1');
+			expect(await getText(`#hmr-without-context`)).toContain('x=0 y=1 slot=');
+			expect(hmrCount('UsingNamed.svelte'), 'updates for UsingNamed.svelte').toBe(0);
+			expect(hmrCount('UsingDefault.svelte'), 'updates for UsingDefault.svelte').toBe(0);
+			await updateModuleContext((content) => content.replace('y = 1', 'y = 2'));
+			expect(await getText(`#hmr-with-context`)).toContain('x=0 y=2 slot=2');
+			expect(await getText(`#hmr-without-context`)).toContain('x=0 y=2 slot=');
+			expect(hmrCount('UsingNamed.svelte'), 'updates for UsingNamed.svelte').toBe(1);
+			expect(hmrCount('UsingDefault.svelte'), 'updates for UsingDefault.svelte').toBe(0);
+		});
+
 		test('should work with emitCss: false in vite config', async () => {
 			await editViteConfig((c) => c.replace('svelte()', 'svelte({emitCss:false})'));
 			expect(await getText(`#hmr-test-1 .counter`)).toBe('0');

packages/e2e-tests/hmr/src/App.svelte

@@ -2,6 +2,7 @@
 	import StaticImport from './components/StaticImport.svelte';
 	import Dependency from 'e2e-test-dep-svelte-simple';
 	import HmrTest from './components/HmrTest.svelte';
+	import PartialHmr from './components/partial-hmr/PartialHmr.svelte';
 	const jsTransform = '__JS_TRANSFORM_1__';
 	let dynamicImportComponent;
 	function importDynamic() {
@@ -25,6 +26,9 @@
 <HmrTest id="hmr-test-2" />
 
 <!-- HMR-TEMPLATE-INJECT -->
+
+<PartialHmr />
+
 <style>
 	h1 {
 		color: #111111;

packages/e2e-tests/hmr/src/components/partial-hmr/ModuleContext.svelte

@@ -0,0 +1,12 @@
+<script context="module">
+	export let y = 1;
+</script>
+
+<script>
+	export let id;
+	let x = 0;
+</script>
+
+<pre {id}>
+  x={x} y={y} slot=<slot />
+</pre>

packages/e2e-tests/hmr/src/components/partial-hmr/PartialHmr.svelte

@@ -0,0 +1,7 @@
+<script>
+	import UsingNamed from './UsingNamed.svelte';
+	import UsingOnlyDefault from './UsingOnlyDefault.svelte';
+</script>
+
+<UsingNamed />
+<UsingOnlyDefault />

packages/e2e-tests/hmr/src/components/partial-hmr/UsingNamed.svelte

@@ -0,0 +1,5 @@
+<script>
+	import ModuleContext, { y } from './ModuleContext.svelte';
+</script>
+
+<ModuleContext id="hmr-with-context">{y}</ModuleContext>

packages/e2e-tests/hmr/src/components/partial-hmr/UsingOnlyDefault.svelte

@@ -0,0 +1,5 @@
+<script>
+	import ModuleContext from './ModuleContext.svelte';
+</script>
+
+<ModuleContext id="hmr-without-context" />

packages/e2e-tests/testUtils.ts

@@ -7,7 +7,7 @@ import colors from 'css-color-names';
 import { ElementHandle } from 'playwright-core';
 import fetch from 'node-fetch';
 
-import { isBuild, isWin, isCI, page, testDir, viteTestUrl } from './vitestSetup';
+import { isBuild, isWin, isCI, page, testDir, viteTestUrl, browserLogs } from './vitestSetup';
 
 export * from './vitestSetup';
 
@@ -177,6 +177,10 @@ export async function editFileAndWaitForHmrComplete(file, replacer, fileUpdateTo
 	}
 }
 
+export function hmrCount(file) {
+	return browserLogs.filter((line) => line.includes('hot updated') && line.includes(file)).length;
+}
+
 export async function saveScreenshot(name: string) {
 	if (!page) {
 		return;

packages/playground/kit-demo-app/src/routes/about/+page.js

@@ -1,4 +1,4 @@
-import { browser, dev } from '$app/env';
+import { browser, dev } from '$app/environment';
 
 // we don't need any JS on this page, though we'll load
 // it in dev so that we get hot module replacement...

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/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @sveltejs/vite-plugin-svelte
 
+## 1.0.6
+
+### Patch Changes
+
+- update svelte-hmr and enable partial hmr accept by default (fixes [#134](https://github.com/sveltejs/vite-plugin-svelte/issues/134)) ([#440](https://github.com/sveltejs/vite-plugin-svelte/pull/440))
+
+- svelte-inspector: add keyboard navigation, select element on activation, improve a11y and info bubble position/content ([#438](https://github.com/sveltejs/vite-plugin-svelte/pull/438))
+
 ## 1.0.5
 
 ### Patch Changes

packages/vite-plugin-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -51,7 +51,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",