support type for const tag

Author: baseballyama

.changeset/seven-ravens-check.md

@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: support type definition in {@const}

packages/svelte/src/compiler/phases/1-parse/state/tag.js

@@ -2,8 +2,8 @@ import read_context from '../read/context.js';
 import read_expression from '../read/expression.js';
 import { error } from '../../../errors.js';
 import { create_fragment } from '../utils/create.js';
-import { parse_expression_at } from '../acorn.js';
 import { walk } from 'zimmerframe';
+import { parse } from '../acorn.js';
 
 const regex_whitespace_with_closing_curly_brace = /^\s*}/;
 
@@ -532,21 +532,55 @@ function special(parser) {
 		// {@const a = b}
 		parser.require_whitespace();
 
-		const expression = read_expression(parser);
+		const CONST_LENGTH = 'const '.length;
+		parser.index = parser.index - CONST_LENGTH;
+
+		let end_index = parser.index;
+		/** @type {import('estree').VariableDeclaration | undefined} */
+		let declaration = undefined;
 
-		if (!(expression.type === 'AssignmentExpression' && expression.operator === '=')) {
+		const dummy_spaces = parser.template.substring(0, parser.index).replace(/[^\n]/g, ' ');
+		while (true) {
+			end_index = parser.template.indexOf('}', end_index + 1);
+			if (end_index === -1) break;
+			try {
+				const node = parse(
+					dummy_spaces + parser.template.substring(parser.index, end_index),
+					parser.ts
+				).body[0];
+				if (node?.type === 'VariableDeclaration') {
+					declaration = node;
+					break;
+				}
+			} catch (e) {
+				continue;
+			}
+		}
+
+		if (
+			declaration === undefined ||
+			declaration.declarations.length !== 1 ||
+			declaration.declarations[0].init === undefined
+		) {
 			error(start, 'invalid-const');
 		}
 
-		parser.allow_whitespace();
+		parser.index = end_index;
 		parser.eat('}', true);
 
 		parser.append(
 			/** @type {import('#compiler').ConstTag} */ ({
 				type: 'ConstTag',
 				start,
 				end: parser.index,
-				expression
+				expression: {
+					type: 'AssignmentExpression',
+					start: (declaration.start ?? 0) + CONST_LENGTH,
+					end: declaration.end ?? 0,
+					operator: '=',
+					left: declaration.declarations[0].id,
+					right: declaration.declarations[0].init
+				}
 			})
 		);
 	}

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

@@ -11,7 +11,8 @@ import type {
 	Node,
 	ObjectExpression,
 	Pattern,
-	Program
+	Program,
+	VariableDeclaration
 } from 'estree';
 
 export interface BaseNode {

packages/svelte/tests/runtime-runes/samples/typescript-const1/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<p>10 * 10 = 100</p><p>20 * 20 = 400</p>'
+});

packages/svelte/tests/runtime-runes/samples/typescript-const1/main.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	const boxes = [ { width: 10, height: 10 }, { width: 20, height: 20 } ];
+</script>
+
+{#each boxes as box}
+	{@const area: number = box.width * box.height}
+	<p>{box.width} * {box.height} = {area}</p>
+{/each}

packages/svelte/tests/runtime-runes/samples/typescript-const2/_config.js

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

packages/svelte/tests/runtime-runes/samples/typescript-const2/main.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+</script>
+
+{@const name: string = "{}"}
+<p>{name}</p>