diff --git a/packages/svelte/src/internal/client/dev/elements.js b/packages/svelte/src/internal/client/dev/elements.js index bf75e6e5cc..8f7b5ecd79 100644 --- a/packages/svelte/src/internal/client/dev/elements.js +++ b/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}`; +} diff --git a/packages/svelte/src/internal/client/dom/blocks/html.js b/packages/svelte/src/internal/client/dom/blocks/html.js index cdfa1baa71..79d5a47ec5 100644 --- a/packages/svelte/src/internal/client/dom/blocks/html.js +++ b/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 = element.__svelte_meta?.loc; + const loc = print_location(element); 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]}`; } diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js index 82a750004d..e510f9e001 100644 --- a/packages/svelte/src/internal/client/dom/elements/attributes.js +++ b/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)); } }