diff --git a/documentation/docs/98-reference/.generated/compile-warnings.md b/documentation/docs/98-reference/.generated/compile-warnings.md index 7dfbe75888..82678d0585 100644 --- a/documentation/docs/98-reference/.generated/compile-warnings.md +++ b/documentation/docs/98-reference/.generated/compile-warnings.md @@ -703,6 +703,12 @@ See [the migration guide](v5-migration-guide#Event-changes) for more info. Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%` ``` +### head_in_component + +``` +Using `` (%location%) will likely lead to runtime errors. Use [``](https://svelte.dev/e/head_in_component) instead +``` + ### legacy_code ``` diff --git a/packages/svelte/messages/compile-warnings/template.md b/packages/svelte/messages/compile-warnings/template.md index 3650e07b47..8fe754ce56 100644 --- a/packages/svelte/messages/compile-warnings/template.md +++ b/packages/svelte/messages/compile-warnings/template.md @@ -83,6 +83,10 @@ In a future version of Svelte, self-closing tags may be upgraded from a warning See [the migration guide](v5-migration-guide#Event-changes) for more info. +## head_in_component + +> Using `` (%location%) will likely lead to runtime errors. Use [``](https://svelte.dev/e/head_in_component) instead + ## node_invalid_placement_ssr > %message%. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a `hydration_mismatch` warning diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js index 17f1aed59c..bf65b106eb 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js +++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js @@ -17,7 +17,7 @@ import { check_element } from './shared/a11y/index.js'; import { validate_element } from './shared/element.js'; import { mark_subtree_dynamic } from './shared/fragment.js'; import { object } from '../../../utils/ast.js'; -import { component_name, filename, locator, runes } from '../../../state.js'; +import { component_name, filename, locate_node, locator, runes } from '../../../state.js'; /** * @param {AST.RegularElement} node @@ -127,7 +127,7 @@ export function RegularElement(node, context) { } if (node.name === 'head' && !context.state.parent_element) { - w.head_in_component(node, filename, component_name, `${locator(node.start).line}`); + w.head_in_component(node, locate_node(node)); } node.metadata.has_spread = node.attributes.some( diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js index 27da0465ba..5e1ec79964 100644 --- a/packages/svelte/src/compiler/warnings.js +++ b/packages/svelte/src/compiler/warnings.js @@ -787,14 +787,12 @@ export function event_directive_deprecated(node, name) { } /** - * A `` tag was detected in file `%filename%`, component `%component%`, at line %line%. This can lead to runtime errors. Did you mean to use ``? + * Using `` (%location%) will likely lead to runtime errors. Use [``](https://svelte.dev/e/head_in_component) instead * @param {null | NodeLike} node - * @param {string} filename - * @param {string} component - * @param {string} line + * @param {string} location */ -export function head_in_component(node, filename, component, line) { - w(node, 'head_in_component', `A \`\` tag was detected in file \`${filename}\`, component \`${component}\`, at line ${line}. This can lead to runtime errors. Did you mean to use \`\`?\nhttps://svelte.dev/e/head_in_component`); +export function head_in_component(node, location) { + w(node, 'head_in_component', `Using \`\` (${location}) will likely lead to runtime errors. Use [\`\`](https://svelte.dev/e/head_in_component) instead\nhttps://svelte.dev/e/head_in_component`); } /**