fix: render undefined html as the empty string (#13092)

Fix #13069 --------- Co-authored-by: adiGuba <[email protected]> Co-authored-by: Rich Harris <[email protected]>
sveltejs · Sep 1, 2024 · b70d12c · b70d12c
1 parent d776e52
commit b70d12c
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 4 deletions.
diff --git a/.changeset/eighty-mails-develop.md b/.changeset/eighty-mails-develop.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: render undefined html as the empty string
diff --git a/packages/svelte/src/internal/client/dom/blocks/html.js b/packages/svelte/src/internal/client/dom/blocks/html.js
@@ -50,7 +50,7 @@ export function html(node, get_value, svg, mathml, skip_warning) {
 	var effect;
 
 	block(() => {
-		if (value === (value = get_value())) {
+		if (value === (value = get_value() ?? '')) {
 			if (hydrating) {
 				hydrate_next();
 			}

diff --git a/packages/svelte/src/internal/server/blocks/html.js b/packages/svelte/src/internal/server/blocks/html.js
@@ -5,6 +5,7 @@ import { hash } from '../../../utils.js';
  * @param {string} value
  */
 export function html(value) {
-	var open = DEV ? `<!--${hash(String(value ?? ''))}-->` : '<!---->';
-	return `${open}${value}<!---->`;
+	var html = String(value ?? '');
+	var open = DEV ? `<!--${hash(html)}-->` : '<!---->';
+	return open + html + '<!---->';
 }
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-contenteditable-html-initial/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-contenteditable-html-initial/_config.js
@@ -15,7 +15,7 @@ export default test({
 
 	ssrHtml: `
 		<editor contenteditable="true"><b>world</b></editor>
-		<p>hello null</p>
+		<p>hello </p>
 	`,
 
 	async test({ assert, component, target, window }) {

diff --git a/packages/svelte/tests/runtime-runes/samples/html-tag-empty/_config.js b/packages/svelte/tests/runtime-runes/samples/html-tag-empty/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: ''
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/html-tag-empty/main.svelte b/packages/svelte/tests/runtime-runes/samples/html-tag-empty/main.svelte
@@ -0,0 +1 @@
+{@html undefined}