fix: improve consttag ordering in non-runes mode

.changeset/cold-lamps-accept.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve consttag ordering in non-runes mode

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -772,6 +772,20 @@ const legacy_scope_tweaker = {
 				binding = state.scope.get(node.name.slice(1));
 			}
 
+			if (
+				binding?.kind === 'derived' &&
+				binding.declaration_kind === 'const' &&
+				binding.node !== node
+			) {
+				const const_tag = /** @type {import('../../types/template.js').ConstTag} */ (
+					path.findLast((n) => n.type === 'ConstTag')
+				);
+				if (const_tag !== undefined) {
+					const_tag.metadata ||= { dependencies: new Set() };
+					const_tag.metadata.dependencies.add(node.name);
+				}
+			}
+
 			if (
 				binding !== null &&
 				binding.kind === 'normal' &&

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

@@ -1043,6 +1043,7 @@ function create_block(parent, fragment, name, nodes, context) {
 		nodes,
 		context.path,
 		namespace,
+		context.state.options.runes,
 		context.state.preserve_whitespace,
 		context.state.options.preserveComments
 	);
@@ -2116,6 +2117,7 @@ export const template_visitors = {
 			node.fragment.nodes,
 			context.path,
 			child_metadata.namespace,
+			context.state.options.runes,
 			node.name === 'script' || state.preserve_whitespace,
 			state.options.preserveComments
 		);

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

@@ -254,6 +254,7 @@ function create_block(parent, fragment, nodes, context, anchor) {
 		nodes,
 		context.path,
 		namespace,
+		context.state.options.runes,
 		context.state.preserve_whitespace,
 		context.state.options.preserveComments
 	);
@@ -1382,6 +1383,7 @@ const template_visitors = {
 			node.fragment.nodes,
 			inner_context.path,
 			metadata.namespace,
+			context.state.options.runes,
 			state.preserve_whitespace,
 			state.options.preserveComments
 		);

packages/svelte/src/compiler/phases/3-transform/utils.js

@@ -5,6 +5,7 @@ import {
 } from '../patterns.js';
 import * as b from '../../utils/builders.js';
 import { walk } from 'zimmerframe';
+import { extract_identifiers } from '../../utils/ast.js';
 
 /**
  * @param {import('estree').Node} node
@@ -21,6 +22,62 @@ export function is_hoistable_function(node) {
 	return false;
 }
 
+/**
+ * @param {import("#compiler").SvelteNode[]} nodes
+ */
+function sort_const_tags(nodes) {
+	// If we are in a legacy component, attempt to re-order any ConstTag template nodes
+	// so that they're in topological order given their dependencies.
+	const const_tags = [];
+	const deps = new Set();
+	const tag_ids = new Map();
+	const other = [];
+	for (const node of nodes) {
+		if (node.type === 'ConstTag') {
+			const ids = extract_identifiers(node.declaration.declarations[0].id);
+			for (const id of ids) {
+				deps.add(id.name);
+			}
+			tag_ids.set(node, ids);
+			const_tags.push(node);
+		} else {
+			other.push(node);
+		}
+	}
+
+	if (const_tags.length > 1) {
+		let attempts = 0;
+		const new_nodes = [];
+		while (const_tags.length > 0) {
+			// Worst case-scenario we prevent an infinite loop
+			if (attempts > 100) {
+				new_nodes.push(...const_tags);
+				break;
+			}
+			attempts++;
+			const_loop: for (let i = const_tags.length - 1; i >= 0; i--) {
+				const node = const_tags[i];
+				const dependencies = node.metadata?.dependencies;
+				if (dependencies) {
+					for (const dep of dependencies) {
+						if (deps.has(dep)) {
+							continue const_loop;
+						}
+					}
+				}
+				const ids = tag_ids.get(node);
+				for (const id of ids) {
+					deps.delete(id.name);
+				}
+				const_tags.splice(i, 1);
+				new_nodes.push(node);
+			}
+		}
+		return [...new_nodes, ...other];
+	}
+	return nodes;
+}
+
 /**
  * Extract nodes that are hoisted and trim whitespace according to the following rules:
  * - trim leading and trailing whitespace, regardless of surroundings
@@ -32,6 +89,7 @@ export function is_hoistable_function(node) {
  * @param {import('#compiler').SvelteNode[]} nodes
  * @param {import('#compiler').SvelteNode[]} path
  * @param {import('#compiler').Namespace} namespace
+ * @param {boolean} runes
  * @param {boolean} preserve_whitespace
  * @param {boolean} preserve_comments
  */
@@ -40,9 +98,13 @@ export function clean_nodes(
 	nodes,
 	path,
 	namespace = 'html',
+	runes = false,
 	preserve_whitespace,
 	preserve_comments
 ) {
+	if (!runes) {
+		nodes = sort_const_tags(nodes);
+	}
 	/** @type {import('#compiler').SvelteNode[]} */
 	const hoisted = [];
 

packages/svelte/src/compiler/types/template.d.ts

@@ -140,6 +140,9 @@ export interface ConstTag extends BaseNode {
 	declaration: VariableDeclaration & {
 		declarations: [VariableDeclarator & { id: Pattern; init: Expression }];
 	};
+	metadata?: {
+		dependencies: Set<string>;
+	};
 }
 
 /** A `{@debug ...}` tag */

packages/svelte/tests/runtime-legacy/samples/const-tag/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<h1>Hello worldworld!</h1>'
+});

packages/svelte/tests/runtime-legacy/samples/const-tag/main.svelte

@@ -0,0 +1,7 @@
+<svelte:options runes={false} />
+{#if true}
+	{@const foo = bar}
+	{@const yoo = foo}
+	{@const bar = 'world'}
+	<h1>Hello {bar}{yoo}!</h1>
+{/if}

packages/svelte/types/index.d.ts

@@ -1448,6 +1448,9 @@ declare module 'svelte/compiler' {
 		declaration: VariableDeclaration & {
 			declarations: [VariableDeclarator & { id: Pattern; init: Expression }];
 		};
+		metadata?: {
+			dependencies: Set<string>;
+		};
 	}
 
 	/** A `{@debug ...}` tag */