fix: allow async {@const} in more places (#16643)

Implemented by reusing the `async_body` function inside `Fragment.js`. Also removes the ability to reference a `{@const ...}` of an implicit child inside a boundary pending/failed snippet:
- existing duplication of consts can have unintended side effects, e.g. async consts would unexpectedly called multiple times
- what if a const is the reason for the failure of a boundary, but is then referenced in the failed snippet?
- what if an async const is referenced in a pending snippet? deadlock
- inconsistent with how it behaves for components where this already does not work

Implemented via the experimental flag so the behavior change only applies there as this is a breaking change strictly speaking. Also added a compiler error for this.

closes #16462

Author: dummdidumm

.changeset/light-camels-push.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow async `{@const}` in more places

documentation/docs/98-reference/.generated/compile-errors.md

@@ -196,6 +196,51 @@ Cyclical dependency detected: %cycle%
 `{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary` or `<Component>`
 ```
 
+### const_tag_invalid_reference
+
+```
+The `{@const %name% = ...}` declaration is not available in this snippet 
+```
+
+The following is an error:
+
+```svelte
+<svelte:boundary>
+    {@const foo = 'bar'}
+
+    {#snippet failed()}
+        {foo}
+    {/snippet}
+</svelte:boundary>
+```
+
+Here, `foo` is not available inside `failed`. The top level code inside `<svelte:boundary>` becomes part of the implicit `children` snippet, in other words the above code is equivalent to this:
+
+```svelte
+<svelte:boundary>
+    {#snippet children()}
+        {@const foo = 'bar'}
+    {/snippet}
+
+    {#snippet failed()}
+        {foo}
+    {/snippet}
+</svelte:boundary>
+```
+
+The same applies to components:
+
+```svelte
+<Component>
+    {@const foo = 'bar'}
+
+    {#snippet someProp()}
+        <!-- error -->
+        {foo}
+    {/snippet}
+</Component>
+```
+
 ### constant_assignment
 
 ```

packages/svelte/messages/compile-errors/template.md

@@ -124,6 +124,49 @@
 
 > `{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary` or `<Component>`
 
+## const_tag_invalid_reference
+
+> The `{@const %name% = ...}` declaration is not available in this snippet 
+
+The following is an error:
+
+```svelte
+<svelte:boundary>
+    {@const foo = 'bar'}
+
+    {#snippet failed()}
+        {foo}
+    {/snippet}
+</svelte:boundary>
+```
+
+Here, `foo` is not available inside `failed`. The top level code inside `<svelte:boundary>` becomes part of the implicit `children` snippet, in other words the above code is equivalent to this:
+
+```svelte
+<svelte:boundary>
+    {#snippet children()}
+        {@const foo = 'bar'}
+    {/snippet}
+
+    {#snippet failed()}
+        {foo}
+    {/snippet}
+</svelte:boundary>
+```
+
+The same applies to components:
+
+```svelte
+<Component>
+    {@const foo = 'bar'}
+
+    {#snippet someProp()}
+        <!-- error -->
+        {foo}
+    {/snippet}
+</Component>
+```
+
 ## debug_tag_invalid_arguments
 
 > {@debug ...} arguments must be identifiers, not arbitrary expressions

packages/svelte/src/compiler/errors.js

@@ -985,6 +985,16 @@ export function const_tag_invalid_placement(node) {
 	e(node, 'const_tag_invalid_placement', `\`{@const}\` must be the immediate child of \`{#snippet}\`, \`{#if}\`, \`{:else if}\`, \`{:else}\`, \`{#each}\`, \`{:then}\`, \`{:catch}\`, \`<svelte:fragment>\`, \`<svelte:boundary\` or \`<Component>\`\nhttps://svelte.dev/e/const_tag_invalid_placement`);
 }
 
+/**
+ * The `{@const %name% = ...}` declaration is not available in this snippet 
+ * @param {null | number | NodeLike} node
+ * @param {string} name
+ * @returns {never}
+ */
+export function const_tag_invalid_reference(node, name) {
+	e(node, 'const_tag_invalid_reference', `The \`{@const ${name} = ...}\` declaration is not available in this snippet \nhttps://svelte.dev/e/const_tag_invalid_reference`);
+}
+
 /**
  * {@debug ...} arguments must be identifiers, not arbitrary expressions
  * @param {null | number | NodeLike} node

packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js

@@ -7,6 +7,7 @@ import * as w from '../../../warnings.js';
 import { is_rune } from '../../../../utils.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
 import { get_rune } from '../../scope.js';
+import { is_component_node } from '../../nodes.js';
 
 /**
  * @param {Identifier} node
@@ -155,5 +156,37 @@ export function Identifier(node, context) {
 		) {
 			w.reactive_declaration_module_script_dependency(node);
 		}
+
+		if (binding.metadata?.is_template_declaration && context.state.options.experimental.async) {
+			let snippet_name;
+
+			// Find out if this references a {@const ...} declaration of an implicit children snippet
+			// when it is itself inside a snippet block at the same level. If so, error.
+			for (let i = context.path.length - 1; i >= 0; i--) {
+				const parent = context.path[i];
+				const grand_parent = context.path[i - 1];
+
+				if (parent.type === 'SnippetBlock') {
+					snippet_name = parent.expression.name;
+				} else if (
+					snippet_name &&
+					grand_parent &&
+					parent.type === 'Fragment' &&
+					(is_component_node(grand_parent) ||
+						(grand_parent.type === 'SvelteBoundary' &&
+							(snippet_name === 'failed' || snippet_name === 'pending')))
+				) {
+					if (
+						is_component_node(grand_parent)
+							? grand_parent.metadata.scopes.default === binding.scope
+							: context.state.scopes.get(parent) === binding.scope
+					) {
+						e.const_tag_invalid_reference(node, node.name);
+					} else {
+						break;
+					}
+				}
+			}
+		}
 	}
 }

packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js

@@ -51,7 +51,6 @@ export function Fragment(node, context) {
 	const has_await = context.state.init !== null && (node.metadata.has_await || false);
 
 	const template_name = context.state.scope.root.unique('root'); // TODO infer name from parent
-	const unsuspend = b.id('$$unsuspend');
 
 	/** @type {Statement[]} */
 	const body = [];
@@ -151,10 +150,6 @@ export function Fragment(node, context) {
 		}
 	}
 
-	if (has_await) {
-		body.push(b.var(unsuspend, b.call('$.suspend')));
-	}
-
 	body.push(...state.consts);
 
 	if (has_await) {
@@ -182,8 +177,8 @@ export function Fragment(node, context) {
 	}
 
 	if (has_await) {
-		body.push(b.stmt(b.call(unsuspend)));
+		return b.block([b.stmt(b.call('$.async_body', b.arrow([], b.block(body), true)))]);
+	} else {
+		return b.block(body);
 	}
-
-	return b.block(body);
 }

packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBoundary.js

@@ -39,40 +39,60 @@ export function SvelteBoundary(node, context) {
 	/** @type {Statement[]} */
 	const hoisted = [];
 
+	let has_const = false;
+
 	// const tags need to live inside the boundary, but might also be referenced in hoisted snippets.
 	// to resolve this we cheat: we duplicate const tags inside snippets
+	// We'll revert this behavior in the future, it was a mistake to allow this (Component snippets also don't do this).
 	for (const child of node.fragment.nodes) {
 		if (child.type === 'ConstTag') {
-			context.visit(child, { ...context.state, consts: const_tags });
+			has_const = true;
+			if (!context.state.options.experimental.async) {
+				context.visit(child, { ...context.state, consts: const_tags });
+			}
 		}
 	}
 
 	for (const child of node.fragment.nodes) {
 		if (child.type === 'ConstTag') {
+			if (context.state.options.experimental.async) {
+				nodes.push(child);
+			}
 			continue;
 		}
 
 		if (child.type === 'SnippetBlock') {
-			/** @type {Statement[]} */
-			const statements = [];
-
-			context.visit(child, { ...context.state, init: statements });
-
-			const snippet = /** @type {VariableDeclaration} */ (statements[0]);
-
-			const snippet_fn = dev
-				? // @ts-expect-error we know this shape is correct
-					snippet.declarations[0].init.arguments[1]
-				: snippet.declarations[0].init;
-
-			snippet_fn.body.body.unshift(
-				...const_tags.filter((node) => node.type === 'VariableDeclaration')
-			);
-
-			hoisted.push(snippet);
-
-			if (['failed', 'pending'].includes(child.expression.name)) {
-				props.properties.push(b.prop('init', child.expression, child.expression));
+			if (
+				context.state.options.experimental.async &&
+				has_const &&
+				!['failed', 'pending'].includes(child.expression.name)
+			) {
+				// we can't hoist snippets as they may reference const tags, so we just keep them in the fragment
+				nodes.push(child);
+			} else {
+				/** @type {Statement[]} */
+				const statements = [];
+
+				context.visit(child, { ...context.state, init: statements });
+
+				const snippet = /** @type {VariableDeclaration} */ (statements[0]);
+
+				const snippet_fn = dev
+					? // @ts-expect-error we know this shape is correct
+						snippet.declarations[0].init.arguments[1]
+					: snippet.declarations[0].init;
+
+				if (!context.state.options.experimental.async) {
+					snippet_fn.body.body.unshift(
+						...const_tags.filter((node) => node.type === 'VariableDeclaration')
+					);
+				}
+
+				if (['failed', 'pending'].includes(child.expression.name)) {
+					props.properties.push(b.prop('init', child.expression, child.expression));
+				}
+
+				hoisted.push(snippet);
 			}
 
 			continue;
@@ -83,7 +103,9 @@ export function SvelteBoundary(node, context) {
 
 	const block = /** @type {BlockStatement} */ (context.visit({ ...node.fragment, nodes }));
 
-	block.body.unshift(...const_tags);
+	if (!context.state.options.experimental.async) {
+		block.body.unshift(...const_tags);
+	}
 
 	const boundary = b.stmt(
 		b.call('$.boundary', context.state.node, props, b.arrow([b.id('$$anchor')], block))

packages/svelte/src/compiler/phases/nodes.js

@@ -23,6 +23,15 @@ export function is_element_node(node) {
 	return element_nodes.includes(node.type);
 }
 
+/**
+ * Returns true for all component-like nodes
+ * @param {AST.SvelteNode} node
+ * @returns {node is AST.Component |  AST.SvelteComponent | AST.SvelteSelf}
+ */
+export function is_component_node(node) {
+	return ['Component', 'SvelteComponent', 'SvelteSelf'].includes(node.type);
+}
+
 /**
  * @param {AST.RegularElement | AST.SvelteElement} node
  * @returns {boolean}

packages/svelte/src/compiler/phases/scope.js

@@ -122,7 +122,7 @@ export class Binding {
 
 	/**
 	 * Additional metadata, varies per binding type
-	 * @type {null | { inside_rest?: boolean }}
+	 * @type {null | { inside_rest?: boolean; is_template_declaration?: boolean }}
 	 */
 	metadata = null;
 
@@ -1121,6 +1121,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 						node.kind,
 						declarator.init
 					);
+					binding.metadata = { is_template_declaration: true };
 					bindings.push(binding);
 				}
 			}

packages/svelte/tests/compiler-errors/samples/const-tag-snippet-invalid-reference-1/_config.js

@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	async: true,
+	error: {
+		code: 'const_tag_invalid_reference',
+		message: 'The `{@const foo = ...}` declaration is not available in this snippet ',
+		position: [376, 379]
+	}
+});