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

fixes sveltejs#8359

Author: xxkl1

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/;

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, '');

test/runtime/samples/html-entities-inside-component-slot/Component.svelte

@@ -0,0 +1,3 @@
+<div>
+<slot />
+</div>

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>
+`
+};

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>