From f6d7007e972f3956673ffd7cc8d1b4204fb4035a Mon Sep 17 00:00:00 2001
From: Dominik G <dominik.goepel@gmx.de>
Date: Sat, 17 Sep 2022 17:28:58 +0200
Subject: [PATCH] fix: update svelte-hmr and enable partial accept (#440)

* fix: update svelte-hmr and enable partial accept to allow context=module updates, see issue #134

* test: harden partialAccept test (#441)

* refactor: improve test logic to avoid jest syntax from hell

Co-authored-by: rixo <rixo@rixo.fr>
---
 .changeset/little-ligers-look.md              |  5 +++++
 packages/e2e-tests/hmr/__tests__/hmr.spec.ts  | 17 ++++++++++++++++
 packages/e2e-tests/hmr/src/App.svelte         |  4 ++++
 .../partial-hmr/ModuleContext.svelte          | 12 +++++++++++
 .../components/partial-hmr/PartialHmr.svelte  |  7 +++++++
 .../components/partial-hmr/UsingNamed.svelte  |  5 +++++
 .../partial-hmr/UsingOnlyDefault.svelte       |  5 +++++
 packages/e2e-tests/testUtils.ts               |  6 +++++-
 .../kit-demo-app/src/routes/about/+page.js    |  2 +-
 packages/vite-plugin-svelte/package.json      |  2 +-
 .../vite-plugin-svelte/src/utils/options.ts   | 20 +++++++++++++++++--
 pnpm-lock.yaml                                |  8 ++++----
 12 files changed, 84 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/little-ligers-look.md
 create mode 100644 packages/e2e-tests/hmr/src/components/partial-hmr/ModuleContext.svelte
 create mode 100644 packages/e2e-tests/hmr/src/components/partial-hmr/PartialHmr.svelte
 create mode 100644 packages/e2e-tests/hmr/src/components/partial-hmr/UsingNamed.svelte
 create mode 100644 packages/e2e-tests/hmr/src/components/partial-hmr/UsingOnlyDefault.svelte

diff --git a/.changeset/little-ligers-look.md b/.changeset/little-ligers-look.md
new file mode 100644
index 000000000..62a6686f8
--- /dev/null
+++ b/.changeset/little-ligers-look.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+update svelte-hmr and enable partial hmr accept by default (fixes #134)
diff --git a/packages/e2e-tests/hmr/__tests__/hmr.spec.ts b/packages/e2e-tests/hmr/__tests__/hmr.spec.ts
index d1fc383f9..241ed8ff5 100644
--- a/packages/e2e-tests/hmr/__tests__/hmr.spec.ts
+++ b/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');
diff --git a/packages/e2e-tests/hmr/src/App.svelte b/packages/e2e-tests/hmr/src/App.svelte
index 995c1e178..399824ca6 100644
--- a/packages/e2e-tests/hmr/src/App.svelte
+++ b/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;
diff --git a/packages/e2e-tests/hmr/src/components/partial-hmr/ModuleContext.svelte b/packages/e2e-tests/hmr/src/components/partial-hmr/ModuleContext.svelte
new file mode 100644
index 000000000..74d037761
--- /dev/null
+++ b/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>
diff --git a/packages/e2e-tests/hmr/src/components/partial-hmr/PartialHmr.svelte b/packages/e2e-tests/hmr/src/components/partial-hmr/PartialHmr.svelte
new file mode 100644
index 000000000..45bbce756
--- /dev/null
+++ b/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 />
diff --git a/packages/e2e-tests/hmr/src/components/partial-hmr/UsingNamed.svelte b/packages/e2e-tests/hmr/src/components/partial-hmr/UsingNamed.svelte
new file mode 100644
index 000000000..5c7eee9ca
--- /dev/null
+++ b/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>
diff --git a/packages/e2e-tests/hmr/src/components/partial-hmr/UsingOnlyDefault.svelte b/packages/e2e-tests/hmr/src/components/partial-hmr/UsingOnlyDefault.svelte
new file mode 100644
index 000000000..d5474f66a
--- /dev/null
+++ b/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" />
diff --git a/packages/e2e-tests/testUtils.ts b/packages/e2e-tests/testUtils.ts
index fa398bfd9..ffdd68751 100644
--- a/packages/e2e-tests/testUtils.ts
+++ b/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;
diff --git a/packages/playground/kit-demo-app/src/routes/about/+page.js b/packages/playground/kit-demo-app/src/routes/about/+page.js
index 3e094ec8e..d08ebec1b 100644
--- a/packages/playground/kit-demo-app/src/routes/about/+page.js
+++ b/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...
diff --git a/packages/vite-plugin-svelte/package.json b/packages/vite-plugin-svelte/package.json
index 69cd4ed4b..71ee567ce 100644
--- a/packages/vite-plugin-svelte/package.json
+++ b/packages/vite-plugin-svelte/package.json
@@ -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",
diff --git a/packages/vite-plugin-svelte/src/utils/options.ts b/packages/vite-plugin-svelte/src/utils/options.ts
index ea49f1fdf..a896c9ae9 100644
--- a/packages/vite-plugin-svelte/src/utils/options.ts
+++ b/packages/vite-plugin-svelte/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`.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a0807d0ac..8529e7de2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -473,7 +473,7 @@ importers:
       magic-string: ^0.26.3
       rollup: ^2.79.0
       svelte: ^3.50.0
-      svelte-hmr: ^0.14.12
+      svelte-hmr: ^0.15.0
       tsup: ^6.2.3
       vite: ^3.1.0
     dependencies:
@@ -482,7 +482,7 @@ importers:
       deepmerge: 4.2.2
       kleur: 4.1.5
       magic-string: 0.26.3
-      svelte-hmr: 0.14.12_svelte@3.50.0
+      svelte-hmr: 0.15.0_svelte@3.50.0
     devDependencies:
       '@types/debug': 4.1.7
       '@types/diff-match-patch': 1.0.32
@@ -5112,8 +5112,8 @@ packages:
       - sugarss
     dev: true
 
-  /svelte-hmr/0.14.12_svelte@3.50.0:
-    resolution: {integrity: sha512-4QSW/VvXuqVcFZ+RhxiR8/newmwOCTlbYIezvkeN6302YFRE8cXy0naamHcjz8Y9Ce3ITTZtrHrIL0AGfyo61w==}
+  /svelte-hmr/0.15.0_svelte@3.50.0:
+    resolution: {integrity: sha512-Aw21SsyoohyVn4yiKXWPNCSW2DQNH/76kvUnE9kpt4h9hcg9tfyQc6xshx9hzgMfGF0kVx0EGD8oBMWSnATeOg==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
     peerDependencies:
       svelte: '>=3.19.0'