fix: update svelte-hmr to solve dom reordering issue (#82)

* test: add testcase for dom order to kit suite

* fix: update svelte-hmr to 0.14.5-0 to fix dom reordering

* chore: remove svelte-hmr devDependency

* chore: update deps

Author: dominikg

package.json

@@ -27,7 +27,7 @@
     "@changesets/cli": "^2.16.0",
     "@types/fs-extra": "^9.0.12",
     "@types/jest": "^26.0.24",
-    "@types/node": "^16.0.1",
+    "@types/node": "^16.3.0",
     "@types/semver": "^7.3.7",
     "@typescript-eslint/eslint-plugin": "^4.28.2",
     "@typescript-eslint/parser": "^4.28.2",

packages/e2e-tests/autoprefixer-browerslist/package.json

@@ -16,8 +16,7 @@
     "postcss": "^8.3.5",
     "postcss-load-config": "^3.1.0",
     "svelte": "^3.38.3",
-    "svelte-hmr": "^0.14.4",
-    "svelte-preprocess": "^4.7.3",
+    "svelte-preprocess": "^4.7.4",
     "vite": "^2.4.1"
   }
 }

packages/e2e-tests/configfile-custom/package.json

@@ -13,7 +13,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.38.3",
-    "svelte-hmr": "^0.14.4",
     "vite": "^2.4.1"
   }
 }

packages/e2e-tests/configfile-esm/package.json

@@ -13,8 +13,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.38.3",
-    "svelte-hmr": "^0.14.4",
-    "svelte-preprocess": "^4.7.3",
+    "svelte-preprocess": "^4.7.4",
     "vite": "^2.4.1"
   },
   "type": "module"

packages/e2e-tests/custom-extensions/package.json

@@ -10,7 +10,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.38.3",
-    "svelte-hmr": "^0.14.4",
     "vite": "^2.4.1"
   }
 }

packages/e2e-tests/hmr/package.json

@@ -13,7 +13,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.38.3",
-    "svelte-hmr": "^0.14.4",
     "vite": "^2.4.1",
     "node-fetch": "^2.6.1"
   }

packages/e2e-tests/kit-node/__tests__/kit.spec.ts

@@ -139,8 +139,24 @@ describe('kit-node', () => {
 					await expect(await getText(`#hmr-test2`)).toBe('bar');
 				});
 
-				describe('Counter.svelte', () => {
+				describe('child component update', () => {
+					const updateChild = editFileAndWaitForHmrComplete.bind(null, 'src/lib/Child.svelte');
 					const updateCounter = editFileAndWaitForHmrComplete.bind(null, 'src/lib/Counter.svelte');
+					it('should preserve dom order', async () => {
+						expect(await getText('#before-child')).toBe('before-child');
+						expect(await getText('#test-child')).toBe('test-child');
+						expect(await getText('#after-child')).toBe('after-child');
+						expect(await getEl('#before-child + #test-child')).not.toBe(null);
+						expect(await getEl('#test-child + #after-child')).not.toBe(null);
+						await updateChild((content) =>
+							content.replace('<!-- HMR-TEMPLATE-INJECT -->', '-foo<!-- HMR-TEMPLATE-INJECT -->')
+						);
+						expect(await getText('#before-child')).toBe('before-child');
+						expect(await getText('#test-child')).toBe('test-child-foo');
+						expect(await getText('#after-child')).toBe('after-child');
+						expect(await getEl('#before-child + #test-child')).not.toBe(null);
+						expect(await getEl('#test-child + #after-child')).not.toBe(null);
+					});
 					it('should render additional html', async () => {
 						// add div 1
 						expect(await getEl('#hmr-test3')).toBe(null);

packages/e2e-tests/kit-node/package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-node": "^1.0.0-next.32",
-    "@sveltejs/kit": "^1.0.0-next.122",
+    "@sveltejs/kit": "^1.0.0-next.123",
     "svelte": "^3.38.3"
   },
   "type": "module",

packages/e2e-tests/kit-node/src/lib/Child.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let testId;
+</script>
+
+<div id={testId}>{testId}<!-- HMR-TEMPLATE-INJECT --></div>

packages/e2e-tests/kit-node/src/routes/index.svelte

@@ -2,6 +2,8 @@
 	import { onMount } from 'svelte';
 	// eslint-disable-next-line node/no-missing-import
 	import Counter from '$lib/Counter.svelte';
+	// eslint-disable-next-line node/no-missing-import
+	import Child from '$lib/Child.svelte';
 
 	onMount(async () => {
 		const isSSR = (await import('../client-only-module.js')).default;
@@ -15,6 +17,10 @@
 	<Counter />
 
 	<p>Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte apps.</p>
+
+	<div id="before-child">before-child</div>
+	<Child testId="test-child" />
+	<div id="after-child">after-child</div>
 </main>
 
 <!-- HMR-TEMPLATE-INJECT -->