feat: include rest props object name in error message (#10868)

* tweak error message for readonly rest props

* remove property in prod

* Update packages/svelte/src/internal/client/reactivity/props.js

---------

Co-authored-by: Simon H <[email protected]>

Author: Rich-Harris

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

@@ -220,16 +220,17 @@ export const javascript_visitors_runes = {
 						}
 					} else {
 						// RestElement
-						declarations.push(
-							b.declarator(
-								property.argument,
-								b.call(
-									'$.rest_props',
-									b.id('$$props'),
-									b.array(seen.map((name) => b.literal(name)))
-								)
-							)
-						);
+						/** @type {import('estree').Expression[]} */
+						const args = [b.id('$$props'), b.array(seen.map((name) => b.literal(name)))];
+
+						if (state.options.dev) {
+							// include rest name, so we can provide informative error messages
+							args.push(
+								b.literal(/** @type {import('estree').Identifier} */ (property.argument).name)
+							);
+						}
+
+						declarations.push(b.declarator(property.argument, b.call('$.rest_props', ...args)));
 					}
 				}
 

packages/svelte/src/internal/client/reactivity/props.js

@@ -36,19 +36,18 @@ export function update_pre_prop(fn, d = 1) {
 /**
  * The proxy handler for rest props (i.e. `const { x, ...rest } = $props()`).
  * Is passed the full `$$props` object and excludes the named props.
- * @type {ProxyHandler<{ props: Record<string | symbol, unknown>, exclude: Array<string | symbol> }>}}
+ * @type {ProxyHandler<{ props: Record<string | symbol, unknown>, exclude: Array<string | symbol>, name?: string }>}}
  */
 const rest_props_handler = {
 	get(target, key) {
 		if (target.exclude.includes(key)) return;
 		return target.props[key];
 	},
-	set(_, key) {
+	set(target, key) {
 		if (DEV) {
-			throw new Error(
-				`Cannot write to property '${String(key)}' of rest element of $props(). It is always readonly.`
-			);
+			throw new Error(`Rest element properties of $props() such as ${target.name}.${String(key)} are readonly`);
 		}
+
 		return false;
 	},
 	getOwnPropertyDescriptor(target, key) {
@@ -72,11 +71,12 @@ const rest_props_handler = {
 
 /**
  * @param {Record<string, unknown>} props
- * @param {string[]} rest
+ * @param {string[]} exclude
+ * @param {string} [name]
  * @returns {Record<string, unknown>}
  */
-export function rest_props(props, rest) {
-	return new Proxy({ props, exclude: rest }, rest_props_handler);
+export function rest_props(props, exclude, name) {
+	return new Proxy(DEV ? { props, exclude, name } : { props, exclude }, rest_props_handler);
 }
 
 /**