diff --git a/.changeset/big-apes-smell.md b/.changeset/big-apes-smell.md new file mode 100644 index 0000000000..1612e5e601 --- /dev/null +++ b/.changeset/big-apes-smell.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +feat: deprecate `svelte:component` diff --git a/packages/svelte/messages/compile-warnings/template.md b/packages/svelte/messages/compile-warnings/template.md index 58a251c729..19fd8979fd 100644 --- a/packages/svelte/messages/compile-warnings/template.md +++ b/packages/svelte/messages/compile-warnings/template.md @@ -54,6 +54,14 @@ This code will work when the component is rendered on the client (which is why t > Using `` to render parent content is deprecated. Use `{@render ...}` tags instead +## svelte_component_deprecated + +> `` is deprecated in runes mode — components are dynamic by default + +In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `` to re-render when `X` changed, you would either have to use `` or put the component inside a `{#key X}...{/key}` block. + +In Svelte 5 this is no longer true — if `X` changes, `` re-renders. For more complex expressions like `condition ? Y : Z` you can use a derived value instead. + ## svelte_element_invalid_this > `this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteComponent.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteComponent.js index 97f78e9d85..99cfda4a3e 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteComponent.js +++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteComponent.js @@ -1,5 +1,6 @@ /** @import { SvelteComponent } from '#compiler' */ /** @import { Context } from '../types' */ +import * as w from '../../../warnings.js'; import { visit_component } from './shared/component.js'; /** @@ -7,5 +8,9 @@ import { visit_component } from './shared/component.js'; * @param {Context} context */ export function SvelteComponent(node, context) { + if (context.state.analysis.runes) { + w.svelte_component_deprecated(node); + } + visit_component(node, context); } diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js index facd53cdec..9a2628068b 100644 --- a/packages/svelte/src/compiler/warnings.js +++ b/packages/svelte/src/compiler/warnings.js @@ -117,6 +117,7 @@ export const codes = [ "event_directive_deprecated", "node_invalid_placement_ssr", "slot_element_deprecated", + "svelte_component_deprecated", "svelte_element_invalid_this" ]; @@ -767,6 +768,14 @@ export function slot_element_deprecated(node) { w(node, "slot_element_deprecated", "Using `` to render parent content is deprecated. Use `{@render ...}` tags instead"); } +/** + * `` is deprecated in runes mode — components are dynamic by default + * @param {null | NodeLike} node + */ +export function svelte_component_deprecated(node) { + w(node, "svelte_component_deprecated", "`` is deprecated in runes mode — components are dynamic by default"); +} + /** * `this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte * @param {null | NodeLike} node diff --git a/packages/svelte/tests/validator/samples/attribute-quoted/warnings.json b/packages/svelte/tests/validator/samples/attribute-quoted/warnings.json index 3411a14cbe..d324e9f60f 100644 --- a/packages/svelte/tests/validator/samples/attribute-quoted/warnings.json +++ b/packages/svelte/tests/validator/samples/attribute-quoted/warnings.json @@ -11,6 +11,18 @@ "line": 13 } }, + { + "code": "svelte_component_deprecated", + "end": { + "column": 45, + "line": 15 + }, + "message": "`` is deprecated in runes mode — components are dynamic by default", + "start": { + "column": 0, + "line": 15 + } + }, { "code": "attribute_quoted", "message": "Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes", diff --git a/packages/svelte/tests/validator/samples/svelte-component-deprecated/input.svelte b/packages/svelte/tests/validator/samples/svelte-component-deprecated/input.svelte new file mode 100644 index 0000000000..f570c71f90 --- /dev/null +++ b/packages/svelte/tests/validator/samples/svelte-component-deprecated/input.svelte @@ -0,0 +1,7 @@ + + + + + diff --git a/packages/svelte/tests/validator/samples/svelte-component-deprecated/warnings.json b/packages/svelte/tests/validator/samples/svelte-component-deprecated/warnings.json new file mode 100644 index 0000000000..66490b0654 --- /dev/null +++ b/packages/svelte/tests/validator/samples/svelte-component-deprecated/warnings.json @@ -0,0 +1,14 @@ +[ + { + "code": "svelte_component_deprecated", + "message": "`` is deprecated in runes mode — components are dynamic by default", + "start": { + "line": 7, + "column": 0 + }, + "end": { + "line": 7, + "column": 29 + } + } +]