Merge remote-tracking branch 'origin/main' into thunkify-deriveds-on-server

Author: paoloricciuti

.changeset/strong-coins-peel.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve error message for migration errors when slot would be renamed

.changeset/wild-bulldogs-move.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow characters in the supplementary special-purpose plane

documentation/docs/02-runes/07-$inspect.md

@@ -52,6 +52,7 @@ This rune, added in 5.14, causes the surrounding function to be _traced_ in deve
 	import { doSomeWork } from './elsewhere';
 
 	$effect(() => {
+		+++// $inspect.trace must be the first statement of a function body+++
 		+++$inspect.trace();+++
 		doSomeWork();
 	});

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

@@ -274,6 +274,12 @@ A `:global` selector cannot modify an existing selector
 A `:global` selector can only be modified if it is a descendant of other selectors
 ```
 
+### css_global_block_invalid_placement
+
+```
+A `:global` selector cannot be inside a pseudoclass
+```
+
 ### css_global_invalid_placement
 
 ```

packages/svelte/CHANGELOG.md

@@ -1,5 +1,33 @@
 # svelte
 
+## 5.28.2
+
+### Patch Changes
+
+- fix: don't mark selector lists inside `:global` with multiple items as unused ([#15817](https://github.com/sveltejs/svelte/pull/15817))
+
+## 5.28.1
+
+### Patch Changes
+
+- fix: ensure `<svelte:boundary>` properly removes error content in production mode ([#15793](https://github.com/sveltejs/svelte/pull/15793))
+
+- fix: `update_version` after `delete` if `source` is `undefined` and `prop` in `target` ([#15796](https://github.com/sveltejs/svelte/pull/15796))
+
+- fix: emit error on wrong placement of the `:global` block selector ([#15794](https://github.com/sveltejs/svelte/pull/15794))
+
+## 5.28.0
+
+### Minor Changes
+
+- feat: partially evaluate more expressions ([#15781](https://github.com/sveltejs/svelte/pull/15781))
+
+## 5.27.3
+
+### Patch Changes
+
+- fix: use function declaration for snippets in server output to avoid TDZ violation ([#15789](https://github.com/sveltejs/svelte/pull/15789))
+
 ## 5.27.2
 
 ### Patch Changes

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

@@ -50,6 +50,10 @@ x y {
 
 > A `:global` selector can only be modified if it is a descendant of other selectors
 
+## css_global_block_invalid_placement
+
+> A `:global` selector cannot be inside a pseudoclass
+
 ## css_global_invalid_placement
 
 > `:global(...)` can be at the start or end of a selector sequence, but not in the middle

packages/svelte/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.27.2",
+  "version": "5.28.2",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {

packages/svelte/src/compiler/errors.js

@@ -581,6 +581,15 @@ export function css_global_block_invalid_modifier_start(node) {
 	e(node, 'css_global_block_invalid_modifier_start', `A \`:global\` selector can only be modified if it is a descendant of other selectors\nhttps://svelte.dev/e/css_global_block_invalid_modifier_start`);
 }
 
+/**
+ * A `:global` selector cannot be inside a pseudoclass
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function css_global_block_invalid_placement(node) {
+	e(node, 'css_global_block_invalid_placement', `A \`:global\` selector cannot be inside a pseudoclass\nhttps://svelte.dev/e/css_global_block_invalid_placement`);
+}
+
 /**
  * `:global(...)` can be at the start or end of a selector sequence, but not in the middle
  * @param {null | number | NodeLike} node

packages/svelte/src/compiler/migrate/index.js

@@ -1307,7 +1307,7 @@ const template = {
 			name = state.scope.generate(slot_name);
 			if (name !== slot_name) {
 				throw new MigrationError(
-					'This migration would change the name of a slot making the component unusable'
+					`This migration would change the name of a slot (${slot_name} to ${name}) making the component unusable`
 				);
 			}
 		}
@@ -1880,7 +1880,7 @@ function handle_identifier(node, state, path) {
 				let new_name = state.scope.generate(name);
 				if (new_name !== name) {
 					throw new MigrationError(
-						'This migration would change the name of a slot making the component unusable'
+						`This migration would change the name of a slot (${name} to ${new_name}) making the component unusable`
 					);
 				}
 			}

packages/svelte/src/compiler/phases/1-parse/utils/html.js

@@ -72,6 +72,8 @@ const NUL = 0;
 // to replace them ourselves
 //
 // Source: http://en.wikipedia.org/wiki/Character_encodings_in_HTML#Illegal_characters
+// Also see: https://en.wikipedia.org/wiki/Plane_(Unicode)
+// Also see: https://html.spec.whatwg.org/multipage/parsing.html#preprocessing-the-input-stream
 
 /** @param {number} code */
 function validate_code(code) {
@@ -116,5 +118,10 @@ function validate_code(code) {
 		return code;
 	}
 
+	// supplementary special-purpose plane 0xe0000 - 0xe07f and 0xe0100 - 0xe01ef
+	if ((code >= 917504 && code <= 917631) || (code >= 917760 && code <= 917999)) {
+		return code;
+	}
+
 	return NUL;
 }

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

@@ -68,8 +68,12 @@ const css_visitors = {
 			const global = node.children.find(is_global);
 
 			if (global) {
-				const idx = node.children.indexOf(global);
+				const is_nested = context.path.at(-2)?.type === 'PseudoClassSelector';
+				if (is_nested && !global.selectors[0].args) {
+					e.css_global_block_invalid_placement(global.selectors[0]);
+				}
 
+				const idx = node.children.indexOf(global);
 				if (global.selectors[0].args !== null && idx !== 0 && idx !== node.children.length - 1) {
 					// ensure `:global(...)` is not used in the middle of a selector (but multiple `global(...)` in sequence are ok)
 					for (let i = idx + 1; i < node.children.length; i++) {

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

@@ -69,11 +69,17 @@ export function build_template_chunk(
 				node.metadata.expression
 			);
 
-			has_state ||= node.metadata.expression.has_state;
+			const evaluated = state.scope.evaluate(value);
+
+			has_state ||= node.metadata.expression.has_state && !evaluated.is_known;
 
 			if (values.length === 1) {
 				// If we have a single expression, then pass that in directly to possibly avoid doing
 				// extra work in the template_effect (instead we do the work in set_text).
+				if (evaluated.is_known) {
+					value = b.literal(evaluated.value);
+				}
+
 				return { value, has_state };
 			}
 
@@ -89,8 +95,6 @@ export function build_template_chunk(
 				}
 			}
 
-			const evaluated = state.scope.evaluate(value);
-
 			if (evaluated.is_known) {
 				quasi.value.cooked += evaluated.value + '';
 			} else {

packages/svelte/src/compiler/phases/3-transform/css/index.js

@@ -196,9 +196,12 @@ const visitors = {
 		next();
 	},
 	SelectorList(node, { state, next, path }) {
+		const parent = path.at(-1);
+
 		// Only add comments if we're not inside a complex selector that itself is unused or a global block
 		if (
-			(!is_in_global_block(path) || node.children.length > 1) &&
+			(!is_in_global_block(path) ||
+				(node.children.length > 1 && parent?.type === 'Rule' && parent.metadata.is_global_block)) &&
 			!path.find((n) => n.type === 'ComplexSelector' && !n.metadata.used)
 		) {
 			const children = node.children;
@@ -260,7 +263,6 @@ const visitors = {
 
 		// if this selector list belongs to a rule, require a specificity bump for the
 		// first scoped selector but only if we're at the top level
-		let parent = path.at(-1);
 		if (parent?.type === 'Rule') {
 			specificity = { bumped: false };
 
@@ -376,7 +378,6 @@ const visitors = {
 };
 
 /**
- *
  * @param {Array<AST.CSS.Node>} path
  */
 function is_in_global_block(path) {

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

@@ -1,4 +1,4 @@
-/** @import { ArrowFunctionExpression, BlockStatement, CallExpression } from 'estree' */
+/** @import { BlockStatement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import { dev } from '../../../../state.js';
@@ -9,27 +9,21 @@ import * as b from '#compiler/builders';
  * @param {ComponentContext} context
  */
 export function SnippetBlock(node, context) {
-	const body = /** @type {BlockStatement} */ (context.visit(node.body));
+	let fn = b.function_declaration(
+		node.expression,
+		[b.id('$$payload'), ...node.parameters],
+		/** @type {BlockStatement} */ (context.visit(node.body))
+	);
 
-	if (dev) {
-		body.body.unshift(b.stmt(b.call('$.validate_snippet_args', b.id('$$payload'))));
-	}
+	// @ts-expect-error - TODO remove this hack once $$render_inner for legacy bindings is gone
+	fn.___snippet = true;
 
-	/** @type {ArrowFunctionExpression | CallExpression} */
-	let fn = b.arrow([b.id('$$payload'), ...node.parameters], body);
+	const statements = node.metadata.can_hoist ? context.state.hoisted : context.state.init;
 
 	if (dev) {
-		fn = b.call('$.prevent_snippet_stringification', fn);
+		fn.body.body.unshift(b.stmt(b.call('$.validate_snippet_args', b.id('$$payload'))));
+		statements.push(b.stmt(b.call('$.prevent_snippet_stringification', fn.id)));
 	}
 
-	const declaration = b.declaration('const', [b.declarator(node.expression, fn)]);
-
-	// @ts-expect-error - TODO remove this hack once $$render_inner for legacy bindings is gone
-	fn.___snippet = true;
-
-	if (node.metadata.can_hoist) {
-		context.state.hoisted.push(declaration);
-	} else {
-		context.state.init.push(declaration);
-	}
+	statements.push(fn);
 }