add location information to warnings

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

@@ -58,3 +58,15 @@ function assign_locations(node, filename, locations) {
 		node = node.nextSibling;
 	}
 }
+
+/**
+ * @param {Element} element
+ */
+export function print_location(element) {
+	// @ts-expect-error
+	const loc = element.__svelte_meta.loc;
+	if (!loc) return;
+
+	// add a zero-width space after `/` characters to prevent Chrome devtools printing it as a link
+	return `${loc.file.replaceAll('/', '/' + String.fromCharCode(8203))}:${loc.line}:${loc.column}`;
+}

packages/svelte/src/internal/client/dom/blocks/html.js

@@ -9,6 +9,7 @@ import { hash } from '../../../../utils.js';
 import { DEV } from 'esm-env';
 import { dev_current_component_function } from '../../runtime.js';
 import { get_first_child, get_next_sibling } from '../operations.js';
+import { print_location } from '../../dev/elements.js';
 
 /**
  * @param {Element} element
@@ -20,11 +21,11 @@ function check_hash(element, server_hash, value) {
 
 	let location;
 
-	// @ts-expect-error
+	const loc = print_location(element);
-	const loc = element.__svelte_meta?.loc;
 	if (loc) {
-		location = `near ${loc.file}:${loc.line}:${loc.column}`;
+		location = `near ${loc}`;
 	} else if (dev_current_component_function?.[FILENAME]) {
+		// TODO can this happen?
 		location = `in ${dev_current_component_function[FILENAME]}`;
 	}
 

packages/svelte/src/internal/client/dom/elements/attributes.js

@@ -8,6 +8,7 @@ import * as w from '../../warnings.js';
 import { LOADING_ATTR_SYMBOL } from '../../constants.js';
 import { queue_idle_task, queue_micro_task } from '../task.js';
 import { is_capture_event, is_delegated, normalize_attribute } from '../../../../utils.js';
+import { print_location } from '../../dev/elements.js';
 
 /**
  * The value/checked attribute in the template actually corresponds to the defaultValue property, so we need
@@ -131,7 +132,7 @@ export function set_xlink_attribute(dom, attribute, value) {
  */
 export function warn_if_attribute(element, name) {
 	if (!get_setters(element).includes(name)) {
-		w.custom_element_invalid_property(element.localName, name); // TODO variant with location
+		w.custom_element_invalid_property(element.localName, name, print_location(element));
 	}
 }
 
@@ -145,7 +146,7 @@ export function warn_if_property(element, name) {
 	);
 
 	if (get_setters(element).includes(name) && !attributes.includes(name)) {
-		w.custom_element_invalid_attribute(element.localName, name); // TODO variant with location
+		w.custom_element_invalid_attribute(element.localName, name, print_location(element));
 	}
 }