fix: properly hydrate await in `{@html}` (alternative) (#17528)

* fix: properly hydrate await in `{@html}`

* fix: skip no async

* revert runtime changes

* wrap html blocks in hydration comments

* prettier

---------

Co-authored-by: paoloricciuti <ricciutipaolo@gmail.com>

.changeset/bright-pants-send.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: properly hydrate await in `{@html}`

packages/svelte/src/compiler/phases/3-transform/server/visitors/HtmlTag.js

@@ -2,7 +2,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import * as b from '#compiler/builders';
-import { create_push } from './shared/utils.js';
+import { block_close, block_open, create_push } from './shared/utils.js';
 
 /**
  * @param {AST.HtmlTag} node
@@ -12,5 +12,15 @@ export function HtmlTag(node, context) {
 	const expression = /** @type {Expression} */ (context.visit(node.expression));
 	const call = b.call('$.html', expression);
 
+	const has_await = node.metadata.expression.has_await;
+
+	if (has_await) {
+		context.state.template.push(block_open);
+	}
+
 	context.state.template.push(create_push(call, node.metadata.expression, true));
+
+	if (has_await) {
+		context.state.template.push(block_close);
+	}
 }

packages/svelte/tests/runtime-runes/samples/await-html-hydration/_config.js

@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	mode: ['hydrate'],
+	async test() {}
+});

packages/svelte/tests/runtime-runes/samples/await-html-hydration/main.svelte

@@ -0,0 +1 @@
+<div>{@html await Promise.resolve(`<span>Foo</span>`)}</div>