fix: html space entities lost in component slot (#8464)

fixes #8359
sveltejs · Apr 11, 2023 · 765023d · 765023d
1 parent cd690e0
commit 765023d
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 8 deletions.
diff --git a/src/compiler/utils/patterns.ts b/src/compiler/utils/patterns.ts
@@ -4,7 +4,7 @@ export const regex_starts_with_whitespace = /^\s/;
 export const regex_starts_with_whitespaces = /^[ \t\r\n]*/;
 export const regex_ends_with_whitespace = /\s$/;
 export const regex_ends_with_whitespaces = /[ \t\r\n]*$/;
-export const regex_only_whitespaces = /^\s+$/;
+export const regex_only_whitespaces = /^[ \t\n\r\f]+$/;
 
 export const regex_whitespace_characters = /\s/g;
 export const regex_non_whitespace_character = /\S/;

diff --git a/test/helpers.ts b/test/helpers.ts
@@ -109,11 +109,11 @@ function cleanChildren(node) {
 				node.removeChild(child);
 			}
 
-			child.data = child.data.replace(/\s+/g, '\n');
+			child.data = child.data.replace(/[ \t\n\r\f]+/g, '\n');
 
 			if (previous && previous.nodeType === 3) {
 				previous.data += child.data;
-				previous.data = previous.data.replace(/\s+/g, '\n');
+				previous.data = previous.data.replace(/[ \t\n\r\f]+/g, '\n');
 
 				node.removeChild(child);
 				child = previous;
@@ -130,13 +130,13 @@ function cleanChildren(node) {
 
 	// collapse whitespace
 	if (node.firstChild && node.firstChild.nodeType === 3) {
-		node.firstChild.data = node.firstChild.data.replace(/^\s+/, '');
-		if (!node.firstChild.data) node.removeChild(node.firstChild);
+		node.firstChild.data = node.firstChild.data.replace(/^[ \t\n\r\f]+/, '');
+		if (!node.firstChild.data.length) node.removeChild(node.firstChild);
 	}
 
 	if (node.lastChild && node.lastChild.nodeType === 3) {
-		node.lastChild.data = node.lastChild.data.replace(/\s+$/, '');
-		if (!node.lastChild.data) node.removeChild(node.lastChild);
+		node.lastChild.data = node.lastChild.data.replace(/[ \t\n\r\f]+$/, '');
+		if (!node.lastChild.data.length) node.removeChild(node.lastChild);
 	}
 }
 
@@ -145,7 +145,7 @@ export function normalizeHtml(window, html, preserveComments = false) {
 		const node = window.document.createElement('div');
 		node.innerHTML = html
 			.replace(/(<!--.*?-->)/g, preserveComments ? '$1' : '')
-			.replace(/>[\s\r\n]+</g, '><')
+			.replace(/>[ \t\n\r\f]+</g, '><')
 			.trim();
 		cleanChildren(node);
 		return node.innerHTML.replace(/<\/?noscript\/?>/g, '');

diff --git a/test/runtime/samples/html-entities-inside-component-slot/Component.svelte b/test/runtime/samples/html-entities-inside-component-slot/Component.svelte
@@ -0,0 +1,3 @@
+<div>
+	<slot />
+</div>
diff --git a/test/runtime/samples/html-entities-inside-component-slot/_config.js b/test/runtime/samples/html-entities-inside-component-slot/_config.js
@@ -0,0 +1,11 @@
+export default {
+	html: `
+		<div>&nbsp;</div>
+
+		<div>
+			<span>&nbsp;</span>
+		</div>
+
+		<div>&nbsp;</div>
+	`
+};
diff --git a/test/runtime/samples/html-entities-inside-component-slot/main.svelte b/test/runtime/samples/html-entities-inside-component-slot/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Component from './Component.svelte'
+</script>
+
+<Component>&nbsp;</Component>
+
+<Component>
+	<span>&nbsp;</span>
+</Component>
+
+<Component>
+	{@html "&nbsp;"}
+</Component>