Merge branch 'main' into ensure-reactivity

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,15 @@
 # svelte
 
+## 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

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.28.0",
+  "version": "5.28.1",
   "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/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/internal/client/proxy.js

@@ -100,6 +100,7 @@ export function proxy(value) {
 						prop,
 						with_parent(() => source(UNINITIALIZED, stack))
 					);
+					update_version(version);
 				}
 			} else {
 				// When working with arrays, we need to also ensure we update the length when removing

packages/svelte/src/internal/client/runtime.js

@@ -291,31 +291,21 @@ export function handle_error(error, effect, previous_effect, component_context)
 		is_throwing_error = true;
 	}
 
-	if (
-		!DEV ||
-		component_context === null ||
-		!(error instanceof Error) ||
-		handled_errors.has(error)
-	) {
-		propagate_error(error, effect);
-		return;
-	}
-
-	handled_errors.add(error);
+	if (DEV && component_context !== null && error instanceof Error && !handled_errors.has(error)) {
+		handled_errors.add(error);
 
-	const component_stack = [];
+		const component_stack = [];
 
-	const effect_name = effect.fn?.name;
+		const effect_name = effect.fn?.name;
 
-	if (effect_name) {
-		component_stack.push(effect_name);
-	}
+		if (effect_name) {
+			component_stack.push(effect_name);
+		}
 
-	/** @type {ComponentContext | null} */
-	let current_context = component_context;
+		/** @type {ComponentContext | null} */
+		let current_context = component_context;
 
-	while (current_context !== null) {
-		if (DEV) {
+		while (current_context !== null) {
 			/** @type {string} */
 			var filename = current_context.function?.[FILENAME];
 
@@ -323,35 +313,36 @@ export function handle_error(error, effect, previous_effect, component_context)
 				const file = filename.split('/').pop();
 				component_stack.push(file);
 			}
+
+			current_context = current_context.p;
 		}
 
-		current_context = current_context.p;
-	}
+		const indent = is_firefox ? '  ' : '\t';
+		define_property(error, 'message', {
+			value:
+				error.message + `\n${component_stack.map((name) => `\n${indent}in ${name}`).join('')}\n`
+		});
+		define_property(error, 'component_stack', {
+			value: component_stack
+		});
 
-	const indent = is_firefox ? '  ' : '\t';
-	define_property(error, 'message', {
-		value: error.message + `\n${component_stack.map((name) => `\n${indent}in ${name}`).join('')}\n`
-	});
-	define_property(error, 'component_stack', {
-		value: component_stack
-	});
-
-	const stack = error.stack;
-
-	// Filter out internal files from callstack
-	if (stack) {
-		const lines = stack.split('\n');
-		const new_lines = [];
-		for (let i = 0; i < lines.length; i++) {
-			const line = lines[i];
-			if (line.includes('svelte/src/internal')) {
-				continue;
+		const stack = error.stack;
+
+		// Filter out internal files from callstack
+		if (stack) {
+			const lines = stack.split('\n');
+			const new_lines = [];
+			for (let i = 0; i < lines.length; i++) {
+				const line = lines[i];
+				if (line.includes('svelte/src/internal')) {
+					continue;
+				}
+				new_lines.push(line);
 			}
-			new_lines.push(line);
+			define_property(error, 'stack', {
+				value: new_lines.join('\n')
+			});
 		}
-		define_property(error, 'stack', {
-			value: new_lines.join('\n')
-		});
 	}
 
 	propagate_error(error, effect);

packages/svelte/src/version.js

@@ -4,5 +4,5 @@
  * The current version, as set in package.json.
  * @type {string}
  */
-export const VERSION = '5.28.0';
+export const VERSION = '5.28.1';
 export const PUBLIC_VERSION = '5';

packages/svelte/tests/compiler-errors/samples/css-global-block-in-pseudoclass/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'css_global_block_invalid_placement',
+		message: 'A `:global` selector cannot be inside a pseudoclass',
+		position: [28, 35]
+	}
+});

packages/svelte/tests/compiler-errors/samples/css-global-block-in-pseudoclass/main.svelte

@@ -0,0 +1,4 @@
+<style>
+	/* invalid */
+	:is(:global) { color: red }
+</style>

packages/svelte/tests/runtime-runes/samples/delete-proxy-key/_config.js

@@ -0,0 +1,13 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	html: `<button>delete</button><p>test</p>`,
+
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => btn?.click());
+		assert.htmlEqual(target.innerHTML, '<button>delete</button>');
+	}
+});

packages/svelte/tests/runtime-runes/samples/delete-proxy-key/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	let obj = $state({test: 0})
+
+	let keys = $derived(Object.keys(obj));
+</script>
+
+<button onclick={() => delete obj.test}>
+	delete
+</button>
+
+{#each keys as key}
+	<p>{key}</p>
+{/each}

packages/svelte/tests/runtime-runes/samples/error-boundary-22/Child.svelte

@@ -0,0 +1,3 @@
+<script>
+	throw new Error();
+</script>

packages/svelte/tests/runtime-runes/samples/error-boundary-22/_config.js

@@ -0,0 +1,11 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	test({ assert, target }) {
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, '<p>error occurred</p>');
+	}
+});

packages/svelte/tests/runtime-runes/samples/error-boundary-22/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	import Child from "./Child.svelte"
+</script>
+
+<svelte:boundary>
+	<p>This should be removed</p>
+
+	{#if true}
+		<Child />
+	{/if}
+
+	{#snippet failed()}
+		<p>error occurred</p>
+	{/snippet}
+</svelte:boundary>