You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: documentation/docs/98-reference/30-compiler-errors.md
+2-5Lines changed: 2 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -263,7 +263,6 @@ Cannot reference store value outside a `.svelte` file
263
263
264
264
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.
265
265
266
-
267
266
## typescript_invalid_feature
268
267
269
268
```
@@ -633,11 +632,11 @@ Mixing old (on:%name%) and new syntaxes for event handling is not allowed. Use o
633
632
%thing% is invalid inside `<%parent%>`
634
633
```
635
634
635
+
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:
636
+
636
637
-`<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
637
638
-`<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
638
639
-`<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
639
-
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:
640
-
641
640
642
641
## render_tag_invalid_call_expression
643
642
@@ -869,7 +868,6 @@ Tag name must be lowercase and hyphenated
869
868
870
869
See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names
871
870
872
-
873
871
## svelte_options_reserved_tagname
874
872
875
873
```
@@ -878,7 +876,6 @@ Tag name is reserved
878
876
879
877
See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names
Copy file name to clipboardExpand all lines: documentation/docs/98-reference/30-compiler-warnings.md
+21-15Lines changed: 21 additions & 15 deletions
Original file line number
Diff line number
Diff line change
@@ -450,12 +450,13 @@ Using `on:%name%` to listen to the %name% event is deprecated. Use the event att
450
450
%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
451
451
```
452
452
453
-
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.
453
+
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:
454
+
454
455
-`<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
455
456
-`<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
456
457
-`<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
457
-
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:
458
458
459
+
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.
459
460
460
461
## script_context_deprecated
461
462
@@ -481,6 +482,24 @@ Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags
481
482
`<svelte:component>` is deprecated in runes mode — components are dynamic by default
482
483
```
483
484
485
+
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.
486
+
487
+
In Svelte 5 this is no longer true — if `X` changes, `<X>` re-renders.
488
+
489
+
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.
490
+
491
+
For complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where `@const` can be used:
492
+
493
+
```diff
494
+
{#each items as item}
495
+
- <svelte:component this={item.condition ? Y : Z} />
496
+
+ {@const Component = item.condition ? Y : Z}
497
+
+ <Component />
498
+
{/each}
499
+
```
500
+
501
+
A derived value may be used in other contexts:
502
+
484
503
```diff
485
504
<script>
486
505
...
@@ -490,19 +509,6 @@ Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags
490
509
- <svelte:component this={condition ? Y : Z} />
491
510
+ <Component />
492
511
```
493
-
A derived value may be used in other contexts:
494
-
```diff
495
-
{#each items as item}
496
-
- <svelte:component this={item.condition ? Y : Z} />
497
-
+ {@const Component = item.condition ? Y : Z}
498
-
+ <Component />
499
-
{/each}
500
-
```
501
-
For complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where `@const` can be used:
502
-
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.
503
-
In Svelte 5 this is no longer true — if `X` changes, `<X>` re-renders.
504
-
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.
Copy file name to clipboardExpand all lines: documentation/docs/98-reference/30-runtime-warnings.md
+8-7Lines changed: 8 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -18,9 +18,9 @@ generated: 'generated by process-messages/index.js'
18
18
Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead
19
19
```
20
20
21
-
The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte-5-preview.vercel.app/docs/runes#$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte-5-preview.vercel.app/docs/runes#$state-snapshot) to take a snapshot of the current value.
22
21
When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing.
23
22
23
+
The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte-5-preview.vercel.app/docs/runes#$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte-5-preview.vercel.app/docs/runes#$state-snapshot) to take a snapshot of the current value.
24
24
25
25
## event_handler_invalid
26
26
@@ -85,16 +85,18 @@ Mutating a value outside the component that created it is strongly discouraged.
85
85
Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
86
86
```
87
87
88
-
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.
89
-
value === proxy; // always false
90
-
</script>
91
-
```
88
+
`$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`:
89
+
92
90
```svelte
93
91
<script>
94
92
let value = { foo: 'bar' };
95
93
let proxy = $state(value);
96
-
`$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`:
97
94
95
+
value === proxy; // always false
96
+
</script>
97
+
```
98
+
99
+
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.
98
100
99
101
## dynamic_void_element_content
100
102
@@ -109,6 +111,5 @@ Value cannot be cloned with `$state.snapshot` — the original value was returne
109
111
```
110
112
```
111
113
The following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:
0 commit comments