Skip to content

Commit 3b9ac36

Browse files
committed
fix
1 parent 1cd357c commit 3b9ac36

File tree

4 files changed

+55
-32
lines changed

4 files changed

+55
-32
lines changed

documentation/docs/98-reference/30-compiler-errors.md

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,6 @@ Cannot reference store value outside a `.svelte` file
263263

264264
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.
265265

266-
267266
## typescript_invalid_feature
268267

269268
```
@@ -633,11 +632,11 @@ Mixing old (on:%name%) and new syntaxes for event handling is not allowed. Use o
633632
%thing% is invalid inside `<%parent%>`
634633
```
635634

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+
636637
- `<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)
637638
- `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
638639
- `<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-
641640

642641
## render_tag_invalid_call_expression
643642

@@ -869,7 +868,6 @@ Tag name must be lowercase and hyphenated
869868

870869
See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names
871870

872-
873871
## svelte_options_reserved_tagname
874872

875873
```
@@ -878,7 +876,6 @@ Tag name is reserved
878876

879877
See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names
880878

881-
882879
## svelte_options_unknown_attribute
883880

884881
```

documentation/docs/98-reference/30-compiler-warnings.md

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -450,12 +450,13 @@ Using `on:%name%` to listen to the %name% event is deprecated. Use the event att
450450
%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
451451
```
452452

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+
454455
- `<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)
455456
- `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
456457
- `<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:
458458

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.
459460

460461
## script_context_deprecated
461462

@@ -481,6 +482,24 @@ Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags
481482
`<svelte:component>` is deprecated in runes mode — components are dynamic by default
482483
```
483484

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+
484503
```diff
485504
<script>
486505
...
@@ -490,19 +509,6 @@ Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags
490509
- <svelte:component this={condition ? Y : Z} />
491510
+ <Component />
492511
```
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.
505-
506512

507513
## svelte_element_invalid_this
508514

documentation/docs/98-reference/30-runtime-warnings.md

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ generated: 'generated by process-messages/index.js'
1818
Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead
1919
```
2020

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.
2221
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.
2322

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.
2424

2525
## event_handler_invalid
2626

@@ -85,16 +85,18 @@ Mutating a value outside the component that created it is strongly discouraged.
8585
Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
8686
```
8787

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+
9290
```svelte
9391
<script>
9492
let value = { foo: 'bar' };
9593
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`:
9794
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.
98100

99101
## dynamic_void_element_content
100102

@@ -109,6 +111,5 @@ Value cannot be cloned with `$state.snapshot` — the original value was returne
109111
```
110112
```
111113
The following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:
112-
113114
%properties%
114115
```

packages/svelte/scripts/process-messages/index.js

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,29 @@ for (const category of fs.readdirSync('messages')) {
3131

3232
sorted.push({ code, _ });
3333

34-
const sections = text.trim().split('\n\n');
34+
const lines = text.trim().split('\n');
35+
let current_section = '';
36+
let sections = [];
3537
let details = '';
36-
while (!sections[sections.length - 1].startsWith('> ')) {
37-
details += /** @type {string} */ (sections.pop()) + '\n';
38+
39+
for (let i = 0; i < lines.length; i++) {
40+
const line = lines[i];
41+
42+
if (line.startsWith('> ')) {
43+
current_section += line.slice(2) + '\n';
44+
} else if (line === '' && lines[i + 1]) {
45+
if (lines[i + 1].startsWith('> ')) {
46+
sections.push(current_section.trim());
47+
current_section = '';
48+
} else {
49+
details = lines.slice(i + 1).join('\n');
50+
break;
51+
}
52+
}
53+
}
54+
55+
if (current_section.length > 0) {
56+
sections.push(current_section.trim());
3857
}
3958

4059
if (sections.length === 0) {
@@ -43,8 +62,8 @@ for (const category of fs.readdirSync('messages')) {
4362

4463
seen.add(code);
4564
messages[category][code] = {
46-
messages: sections.map((section) => section.replace(/^> /gm, '').replace(/^>\n/gm, '\n')),
47-
details
65+
messages: sections,
66+
details: details
4867
};
4968
}
5069

0 commit comments

Comments
 (0)