Merge 94c47847b4 into 2344b4052e

.changeset/curvy-colts-occur.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: make hydration less whitespace sensitive

.gitignore

@@ -14,9 +14,13 @@ coverage
 # dotenv environment variables file
 .env
 .env.test
+flake.nix
+flake.lock
+.envrc
 
 # build output
 .vercel
+.direnv
 
 # OS-specific
 .DS_Store

packages/svelte/src/internal/client/dom/blocks/await.js

@@ -41,7 +41,7 @@ const CATCH = 2;
  */
 export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 	if (hydrating) {
-		hydrate_next();
+		hydrate_next(true);
 	}
 
 	var anchor = node;

packages/svelte/src/internal/client/dom/hydration.js

@@ -1,6 +1,6 @@
 /** @import { TemplateNode } from '#client' */
 
-import { COMMENT_NODE } from '#client/constants';
+import { COMMENT_NODE, TEXT_NODE } from '#client/constants';
 import {
 	HYDRATION_END,
 	HYDRATION_ERROR,
@@ -40,8 +40,30 @@ export function set_hydrate_node(node) {
 	return (hydrate_node = node);
 }
 
-export function hydrate_next() {
-	return set_hydrate_node(/** @type {TemplateNode} */ (get_next_sibling(hydrate_node)));
+/**
+ * Moove to the next node to be hydrated. Empty text nodes will be skipped,
+ * unless `allow_text` is set to true.
+ *
+ * Skipping whitespace helps to sucessful hydrate even if some middleware added
+ * arbitrary whitespace into the html. This was at least twice an issue:
+ *
+ * - https://github.com/sveltejs/svelte/issues/15819
+ * - https://github.com/sveltejs/svelte/issues/16242
+ *
+ * Removing empty text nodes should be finde, as required text nodes will be
+ * added on demand. Doing so is necessary because an empty text on the server
+ * side will result in a missing text nodes as well.
+ *
+ * @param {boolean} allow_text
+ */
+export function hydrate_next(allow_text = false) {
+	var node = set_hydrate_node(/** @type {TemplateNode} */(get_next_sibling(hydrate_node)));
+	while (!allow_text && node.nodeType === TEXT_NODE && !node.nodeValue?.trim()) {
+		var next_sibling = get_next_sibling(hydrate_node)
+		hydrate_node.parentElement?.removeChild(hydrate_node)
+		node = set_hydrate_node(/** @type {TemplateNode} */(next_sibling))
+	}
+	return node
 }
 
 /** @param {TemplateNode} node */

packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_config.js

@@ -1,6 +0,0 @@
-import { test } from '../../test';
-
-// https://github.com/sveltejs/svelte/issues/15819
-export default test({
-	expect_hydration_error: true
-});

packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_expected.html

@@ -1 +0,0 @@
-<p>start</p><p>cond</p><!---->

packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/main.svelte

@@ -1,4 +1,5 @@
 <script>
+	// https://github.com/sveltejs/svelte/issues/15819
 	const cond = true;
 </script>
 

packages/svelte/tests/hydration/samples/whitespace-before-child/Nested.svelte

@@ -0,0 +1 @@
+<p>nested</p>

packages/svelte/tests/hydration/samples/whitespace-before-child/_override.html

@@ -0,0 +1,2 @@
+<!--[-->
+<main><p>nested</p><!----></main><!--]-->

packages/svelte/tests/hydration/samples/whitespace-before-child/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	// https://github.com/sveltejs/svelte/issues/16242
+	import Nested from './Nested.svelte';
+</script>
+<main>
+	<Nested />
+</main>