diff --git a/documentation/docs/98-reference/30-compiler-errors.md b/documentation/docs/98-reference/30-compiler-errors.md
index f8ec9cf906..ebcaa28ef8 100644
--- a/documentation/docs/98-reference/30-compiler-errors.md
+++ b/documentation/docs/98-reference/30-compiler-errors.md
@@ -263,7 +263,6 @@ Cannot reference store value outside a `.svelte` file
Using a `$` prefix to refer to the value of a store is only possible inside `.svelte` files, where Svelte can automatically create subscriptions when a component is mounted and unsubscribe when the component is unmounted. Consider migrating to runes instead.
-
## typescript_invalid_feature
```
@@ -633,11 +632,11 @@ Mixing old (on:%name%) and new syntaxes for event handling is not allowed. Use o
%thing% is invalid inside `<%parent%>`
```
+HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
+
- `
hello
world
` will result in `
hello
world
` for example (the `
` autoclosed the `
` because `
` cannot contain block-level elements)
- `` will result in `` (the `
` is removed)
- `
cell
` will result in `
cell
` (a `` is auto-inserted)
-HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
-
## render_tag_invalid_call_expression
@@ -869,7 +868,6 @@ Tag name must be lowercase and hyphenated
See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names
-
## svelte_options_reserved_tagname
```
@@ -878,7 +876,6 @@ Tag name is reserved
See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names
-
## svelte_options_unknown_attribute
```
diff --git a/documentation/docs/98-reference/30-compiler-warnings.md b/documentation/docs/98-reference/30-compiler-warnings.md
index add2365b70..da87329157 100644
--- a/documentation/docs/98-reference/30-compiler-warnings.md
+++ b/documentation/docs/98-reference/30-compiler-warnings.md
@@ -450,12 +450,13 @@ Using `on:%name%` to listen to the %name% event is deprecated. Use the event att
%thing% is invalid inside `<%parent%>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
```
-This code will work when the component is rendered on the client (which is why this is a warning rather than an error), but if you use server rendering it will cause hydration to fail.
+HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
+
- `
hello
world
` will result in `
hello
world
` for example (the `
` autoclosed the `
` because `
` cannot contain block-level elements)
- `` will result in `` (the `
` is removed)
- `
cell
` will result in `
cell
` (a `` is auto-inserted)
-HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
+This code will work when the component is rendered on the client (which is why this is a warning rather than an error), but if you use server rendering it will cause hydration to fail.
## script_context_deprecated
@@ -481,6 +482,24 @@ Using `` to render parent content is deprecated. Use `{@render ...}` tags
`` 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.
+
+In some cases `` 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}
+-
++ {@const Component = item.condition ? Y : Z}
++
+{/each}
+```
+
+A derived value may be used in other contexts:
+
```diff
-```
+`$state(...)` creates a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) of the value it is passed. The proxy and the value have different identities, meaning equality checks will always return `false`:
+
```svelte
+```
+
+To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
## dynamic_void_element_content
@@ -109,6 +111,5 @@ Value cannot be cloned with `$state.snapshot` — the original value was returne
```
```
The following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:
-
%properties%
```
diff --git a/packages/svelte/scripts/process-messages/index.js b/packages/svelte/scripts/process-messages/index.js
index 557b77920d..889c4b7e18 100644
--- a/packages/svelte/scripts/process-messages/index.js
+++ b/packages/svelte/scripts/process-messages/index.js
@@ -31,10 +31,29 @@ for (const category of fs.readdirSync('messages')) {
sorted.push({ code, _ });
- const sections = text.trim().split('\n\n');
+ const lines = text.trim().split('\n');
+ let current_section = '';
+ let sections = [];
let details = '';
- while (!sections[sections.length - 1].startsWith('> ')) {
- details += /** @type {string} */ (sections.pop()) + '\n';
+
+ for (let i = 0; i < lines.length; i++) {
+ const line = lines[i];
+
+ if (line.startsWith('> ')) {
+ current_section += line.slice(2) + '\n';
+ } else if (line === '' && lines[i + 1]) {
+ if (lines[i + 1].startsWith('> ')) {
+ sections.push(current_section.trim());
+ current_section = '';
+ } else {
+ details = lines.slice(i + 1).join('\n');
+ break;
+ }
+ }
+ }
+
+ if (current_section.length > 0) {
+ sections.push(current_section.trim());
}
if (sections.length === 0) {
@@ -43,8 +62,8 @@ for (const category of fs.readdirSync('messages')) {
seen.add(code);
messages[category][code] = {
- messages: sections.map((section) => section.replace(/^> /gm, '').replace(/^>\n/gm, '\n')),
- details
+ messages: sections,
+ details: details
};
}