update warning, include mutation location

Author: Rich-Harris

documentation/docs/98-reference/.generated/client-warnings.md

@@ -171,7 +171,7 @@ To fix it, `bind:` to the value instead of just passing a property (i.e. in this
 ### ownership_invalid_mutation
 
 ```
-%component% mutated property `%name%` from parent component %owner%, which did not declare it as a binding. This is strongly discouraged. Consider passing props to child components that mutate them with `bind:` (e.g. `bind:%prop%={...}` instead of `%prop%={...}`), or use a callback instead
+Mutating unbound props (`%name%`, at %location%) is strongly discouraged. Consider using `bind:%prop%={...}` in %parent% (or using a callback) instead
 ```
 
 Consider the following code:

packages/svelte/messages/client-warnings/warnings.md

@@ -140,7 +140,7 @@ To fix it, `bind:` to the value instead of just passing a property (i.e. in this
 
 ## ownership_invalid_mutation
 
-> %component% mutated property `%name%` from parent component %owner%, which did not declare it as a binding. This is strongly discouraged. Consider passing props to child components that mutate them with `bind:` (e.g. `bind:%prop%={...}` instead of `%prop%={...}`), or use a callback instead
+> Mutating unbound props (`%name%`, at %location%) is strongly discouraged. Consider using `bind:%prop%={...}` in %parent% (or using a callback) instead
 
 Consider the following code:
 

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

@@ -341,10 +341,14 @@ export function validate_mutation(node, context, expression) {
 
 	path.unshift(b.literal(name.name));
 
+	const loc = locator(/** @type {number} */ (left.start));
+
 	return b.call(
 		'$$ownership_validator.mutation',
 		b.literal(binding.prop_alias),
 		b.array(path),
-		expression
+		expression,
+		loc && b.literal(loc.line),
+		loc && b.literal(loc.column)
 	);
 }

packages/svelte/src/internal/client/dev/ownership.js

@@ -5,6 +5,7 @@ import { LEGACY_PROPS, STATE_SYMBOL } from '../constants.js';
 import { FILENAME } from '../../../constants.js';
 import { component_context } from '../context.js';
 import * as w from '../warnings.js';
+import { sanitize_location } from '../../../utils.js';
 
 /** @type {Record<string, Array<{ start: Location, end: Location, component: Function }>>} */
 const boundaries = {};
@@ -118,8 +119,10 @@ export function create_ownership_validator(props) {
 		 * @param {string} prop
 		 * @param {any[]} path
 		 * @param {any} result
+		 * @param {number} line
+		 * @param {number} column
 		 */
-		mutation: (prop, path, result) => {
+		mutation: (prop, path, result, line, column) => {
 			const name = path[0];
 			if (is_bound(props, name) || !parent) {
 				return result;
@@ -134,7 +137,9 @@ export function create_ownership_validator(props) {
 				value = value[path[i]];
 			}
 
-			w.ownership_invalid_mutation(component[FILENAME], name, parent[FILENAME], prop);
+			const location = sanitize_location(`${component[FILENAME]}:${line}:${column}`);
+
+			w.ownership_invalid_mutation(name, location, prop, parent[FILENAME]);
 
 			return result;
 		},

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

@@ -144,15 +144,15 @@ export function ownership_invalid_binding(parent, prop, child, owner) {
 }
 
 /**
- * %component% mutated property `%name%` from parent component %owner%, which did not declare it as a binding. This is strongly discouraged. Consider passing props to child components that mutate them with `bind:` (e.g. `bind:%prop%={...}` instead of `%prop%={...}`), or use a callback instead
- * @param {string} component
+ * Mutating unbound props (`%name%`, at %location%) is strongly discouraged. Consider using `bind:%prop%={...}` in %parent% (or using a callback) instead
  * @param {string} name
- * @param {string} owner
+ * @param {string} location
  * @param {string} prop
+ * @param {string} parent
  */
-export function ownership_invalid_mutation(component, name, owner, prop) {
+export function ownership_invalid_mutation(name, location, prop, parent) {
 	if (DEV) {
-		console.warn(`%c[svelte] ownership_invalid_mutation\n%c${component} mutated property \`${name}\` from parent component ${owner}, which did not declare it as a binding. This is strongly discouraged. Consider passing props to child components that mutate them with \`bind:\` (e.g. \`bind:${prop}={...}\` instead of \`${prop}={...}\`), or use a callback instead\nhttps://svelte.dev/e/ownership_invalid_mutation`, bold, normal);
+		console.warn(`%c[svelte] ownership_invalid_mutation\n%cMutating unbound props (\`${name}\`, at ${location}) is strongly discouraged. Consider using \`bind:${prop}={...}\` in ${parent} (or using a callback) instead\nhttps://svelte.dev/e/ownership_invalid_mutation`, bold, normal);
 	} else {
 		console.warn(`https://svelte.dev/e/ownership_invalid_mutation`);
 	}

packages/svelte/src/utils.js

@@ -465,8 +465,10 @@ export function is_raw_text_element(name) {
 
 /**
  * Prevent devtools trying to make `location` a clickable link by inserting a zero-width space
- * @param {string | undefined} location
+ * @template {string | undefined} T
+ * @param {T} location
+ * @returns {T};
  */
 export function sanitize_location(location) {
-	return location?.replace(/\//g, '/\u200b');
+	return /** @type {T} */ (location?.replace(/\//g, '/\u200b'));
 }

packages/svelte/tests/runtime-runes/samples/non-local-mutation-discouraged/_config.js

@@ -10,7 +10,7 @@ export default test({
 
 	test({ assert, target, warnings }) {
 		const warning =
-			'Counter.svelte mutated property `object` from parent component main.svelte, which did not declare it as a binding. This is strongly discouraged. Consider passing props to child components that mutate them with `bind:` (e.g. `bind:object={...}` instead of `object={...}`), or use a callback instead';
+			'Mutating unbound props (`object`, at Counter.svelte:5:23) is strongly discouraged. Consider using `bind:object={...}` in main.svelte (or using a callback) instead';
 		const [btn1, btn2] = target.querySelectorAll('button');
 
 		btn1.click();

packages/svelte/tests/runtime-runes/samples/non-local-mutation-with-binding-3/_config.js

@@ -33,7 +33,7 @@ export default test({
 		assert.htmlEqual(target.innerHTML, `<button>clicks: 1</button><button>clicks: 1</button>`);
 
 		assert.deepEqual(warnings, [
-			'Counter.svelte mutated property `notshared` from parent component main.svelte, which did not declare it as a binding. This is strongly discouraged. Consider passing props to child components that mutate them with `bind:` (e.g. `bind:notshared={...}` instead of `notshared={...}`), or use a callback instead'
+			'Mutating unbound props (`notshared`, at Counter.svelte:10:23) is strongly discouraged. Consider using `bind:notshared={...}` in main.svelte (or using a callback) instead'
 		]);
 	}
 });