svelte head, let directive, tweaks

Author: dummdidumm

packages/svelte/src/compiler/errors.js

@@ -132,6 +132,7 @@ const special_elements = {
 	'invalid-customElement-shadow-attribute': () => '"shadow" must be either "open" or "none"',
 	'unknown-svelte-option-attribute': /** @param {string} name */ (name) =>
 		`<svelte:options> unknown attribute '${name}'`,
+	'illegal-svelte-head-attribute': () => '<svelte:head> cannot have attributes nor directives',
 	'invalid-svelte-fragment-attribute': () =>
 		`<svelte:fragment> can only have a slot attribute and (optionally) a let: directive`,
 	'invalid-svelte-fragment-slot': () => `<svelte:fragment> slot attribute must have a static value`,
@@ -214,8 +215,8 @@ const elements = {
 	 * @param {string} parent
 	 */
 	'invalid-node-placement': (node, parent) => `${node} is invalid inside <${parent}>`,
-	'title-illegal-attribute': () => '<title> cannot have attributes',
-	'title-invalid-content': () => '<title> can only contain text and {tags}'
+	'illegal-title-attribute': () => '<title> cannot have attributes nor directives',
+	'invalid-title-content': () => '<title> can only contain text and {tags}'
 };
 
 /** @satisfies {Errors} */
@@ -265,7 +266,8 @@ const attributes = {
 			: `An element cannot have both ${describe(directive1)} directive and ${describe(
 					directive2
 			  )} directive`;
-	}
+	},
+	'invalid-let-directive-placement': () => 'let directive at invalid position'
 };
 
 /** @satisfies {Errors} */

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

@@ -477,6 +477,20 @@ export const validation = {
 			error(node, 'invalid-const-placement');
 		}
 	},
+	LetDirective(node, context) {
+		const parent = context.path.at(-1);
+		if (
+			parent === undefined ||
+			(parent.type !== 'Component' &&
+				parent.type !== 'RegularElement' &&
+				parent.type !== 'SvelteElement' &&
+				parent.type !== 'SvelteComponent' &&
+				parent.type !== 'SvelteSelf' &&
+				parent.type !== 'SvelteFragment')
+		) {
+			error(node, 'invalid-let-directive-placement');
+		}
+	},
 	RegularElement(node, context) {
 		if (node.name === 'textarea' && node.fragment.nodes.length > 0) {
 			for (const attribute of node.attributes) {
@@ -514,6 +528,12 @@ export const validation = {
 			parent_element: node.name
 		});
 	},
+	SvelteHead(node) {
+		const attribute = node.attributes[0];
+		if (attribute) {
+			error(attribute, 'illegal-svelte-head-attribute');
+		}
+	},
 	SvelteElement(node, context) {
 		validate_element(node, context);
 		context.next({
@@ -568,12 +588,12 @@ export const validation = {
 	TitleElement(node) {
 		const attribute = node.attributes[0];
 		if (attribute) {
-			error(attribute, 'title-illegal-attribute');
+			error(attribute, 'illegal-title-attribute');
 		}
 
 		const child = node.fragment.nodes.find((n) => n.type !== 'Text' && n.type !== 'ExpressionTag');
 		if (child) {
-			error(child, 'title-invalid-content');
+			error(child, 'invalid-title-content');
 		}
 	},
 	ExpressionTag(node, context) {

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

@@ -2753,19 +2753,9 @@ export const template_visitors = {
 			serialize_event_attribute(node, context);
 		}
 	},
-	LetDirective(node, { state, path }) {
+	LetDirective(node, { state }) {
 		// let:x        -->  const x = $.derived(() => $.unwrap($$slotProps).x);
 		// let:x={{y, z}}  -->  const derived_x = $.derived(() => { const { y, z } = $.unwrap($$slotProps).x; return { y, z }));
-		const parent = path.at(-1);
-		if (
-			parent === undefined ||
-			(parent.type !== 'Component' &&
-				parent.type !== 'RegularElement' &&
-				parent.type !== 'SvelteFragment')
-		) {
-			error(node, 'INTERNAL', 'let directive at invalid position');
-		}
-
 		if (node.expression && node.expression.type !== 'Identifier') {
 			const name = state.scope.generate(node.name);
 			const bindings = state.scope.get_bindings(node);

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

@@ -1495,17 +1495,7 @@ const template_visitors = {
 		state.template.push(t_statement(call));
 		state.template.push(t_expression(id));
 	},
-	LetDirective(node, { state, path }) {
-		const parent = path.at(-1);
-		if (
-			parent === undefined ||
-			(parent.type !== 'Component' &&
-				parent.type !== 'RegularElement' &&
-				parent.type !== 'SvelteFragment')
-		) {
-			error(node, 'INTERNAL', 'let directive at invalid position');
-		}
-
+	LetDirective(node, { state }) {
 		if (node.expression && node.expression.type !== 'Identifier') {
 			const name = state.scope.generate(node.name);
 			const bindings = state.scope.get_bindings(node);

packages/svelte/tests/validator/samples/let-directive/errors.json

@@ -0,0 +1,8 @@
+[
+	{
+		"code": "invalid-let-directive-placement",
+		"message": "let directive at invalid position",
+		"start": { "line": 6, "column": 15 },
+		"end": { "line": 6, "column": 20 }
+	}
+]

packages/svelte/tests/validator/samples/let-directive/input.svelte

@@ -0,0 +1,6 @@
+{#if foo}
+	<svelte:self let:x></svelte:self>
+{/if}
+<Component let:x></Component>
+<div let:x></div><!-- strictly speaking this is invalid, but it was never checked in Svelte 3/4 either, and is now deprecated, so don't mind -->
+<svelte:window let:x></svelte:window>

packages/svelte/tests/validator/samples/svelte-head-attributes/errors.json

@@ -0,0 +1,8 @@
+[
+	{
+		"code": "illegal-svelte-head-attribute",
+		"message": "<svelte:head> cannot have attributes nor directives",
+		"start": { "line": 1, "column": 13 },
+		"end": { "line": 1, "column": 14 }
+	}
+]

packages/svelte/tests/validator/samples/svelte-head-attributes/input.svelte

@@ -0,0 +1 @@
+<svelte:head x></svelte:head>

packages/svelte/tests/validator/samples/title-no-attributes/errors.json

@@ -1,7 +1,7 @@
 [
 	{
-		"code": "title-illegal-attribute",
-		"message": "<title> cannot have attributes",
+		"code": "illegal-title-attribute",
+		"message": "<title> cannot have attributes nor directives",
 		"start": {
 			"line": 2,
 			"column": 8

packages/svelte/tests/validator/samples/title-no-children/errors.json

@@ -1,6 +1,6 @@
 [
 	{
-		"code": "title-invalid-content",
+		"code": "invalid-title-content",
 		"message": "<title> can only contain text and {tags}",
 		"start": {
 			"line": 2,