From d64aee7432550ae84417a78e8ab15a0e5c4b1ed7 Mon Sep 17 00:00:00 2001
From: brunnerh <brunnerh@users.noreply.github.com>
Date: Thu, 15 Aug 2024 19:00:07 +0200
Subject: [PATCH] docs: Add `<svelte:component>` deprecation section also to
 preview docs. (#12862)

---
 .../content/03-appendix/03-deprecations.md    | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/03-deprecations.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/03-deprecations.md
index b4a170ccb7..73e966af38 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/03-deprecations.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/03-deprecations.md
@@ -82,6 +82,36 @@ When authoring custom elements, use the new [host rune](/docs/runes#$host) to di
 >greet</button>
 ```
 
+## `<svelte:component>` in runes mode
+
+In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `<X>` to re-render when `X` changed, you would either have to use `<svelte:component this={X}>` or put the component inside a `{#key X}...{/key}` block.
+
+In Svelte 5 this is no longer true — if `X` changes, `<X>` re-renders.
+
+In some cases `<object.property>` syntax can be used as a replacement; a lowercased variable with property access is recognized as a component in Svelte 5.
+
+For complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where `@const` can be used:
+
+```diff
+{#each items as item}
+-	<svelte:component this={item.condition ? Y : Z} />
++	{@const Component = item.condition ? Y : Z}
++	<Component />
+{/each}
+```
+
+A derived value may be used in other contexts:
+
+```diff
+<script>
+	...
+	let condition = $state(false);
++	const Component = $derived(condition ? Y : Z);
+</script>
+- <svelte:component this={condition ? Y : Z} />
++ <Component />
+```
+
 Note that using `$props` and `$host` will put you in [runes mode](/docs/runes) — be sure to update your props and state accordingly.
 
 ## `immutable`