Skip to content

Commit cfd8ef2

Browse files
Rich-HarrisRich-Harris
committed
merge main
2 parents ac05b73 + 707682e commit cfd8ef2

File tree

185 files changed

+1585
-440
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

185 files changed

+1585
-440
lines changed

‎documentation/docs/02-runes/05-$props.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ On the other side, inside `MyComponent.svelte`, we can receive props with the `$
3737

3838
## Fallback values
3939

40-
Destructuring allows us to declare fallback values, which are used if the parent component does not set a given prop:
40+
Destructuring allows us to declare fallback values, which are used if the parent component does not set a given prop (or the value is `undefined`):
4141

4242
```js
4343
let { adjective = 'happy' } = $props();
@@ -219,4 +219,4 @@ This is useful for linking elements via attributes like `for` and `aria-labelled
219219
<label for="{uid}-lastname">Last Name: </label>
220220
<input id="{uid}-lastname" type="text" />
221221
</form>
222-
```
222+
```

‎documentation/docs/03-template-syntax/01-basic-markup.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,8 @@ A JavaScript expression can be included as text by surrounding it with curly bra
154154
{expression}
155155
```
156156

157+
Expressions that are `null` or `undefined` will be omitted; all others are [coerced to strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion).
158+
157159
Curly braces can be included in a Svelte template by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings: `&lbrace;`, `&lcub;`, or `&#123;` for `{` and `&rbrace;`, `&rcub;`, or `&#125;` for `}`.
158160

159161
If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses.

‎documentation/docs/03-template-syntax/06-snippet.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,8 @@ Snippets can reference themselves and each other ([demo](/playground/untitled#H4
112112

113113
## Passing snippets to components
114114

115+
### Explicit props
116+
115117
Within the template, snippets are values just like any other. As such, they can be passed to components as props ([demo](/playground/untitled#H4sIAAAAAAAAE3VS247aMBD9lZGpBGwDASRegonaPvQL2qdlH5zYEKvBNvbQLbL875VzAcKyj3PmzJnLGU8UOwqSkd8KJdaCk4TsZS0cyV49wYuJuQiQpGd-N2bu_ooaI1YwJ57hpVYoFDqSEepKKw3mO7VDeTTaIvxiRS1gb_URxvO0ibrS8WanIrHUyiHs7Vmigy28RmyHHmKvDMbMmFq4cQInvGSwTsBYWYoMVhCSB2rBFFPsyl0uruTlR3JZCWvlTXl1Yy_mawiR_rbZKZrellJ-5JQ0RiBUgnFhJ9OGR7HKmwVoilXeIye8DOJGfYCgRlZ3iE876TBsZPX7hPdteO75PC4QaIo8vwNPePmANQ2fMeEFHrLD7rR1jTNkW986E8C3KwfwVr8HSHOSEBT_kGRozyIkn_zQveXDL3rIfPJHtUDwzShJd_Qk3gQCbOGLsdq4yfTRJopRuin3I7nv6kL7ARRjmLdBDG3uv1mhuLA3V2mKtqNEf_oCn8p9aN-WYqH5peP4kWBl1UwJzAEPT9U7K--0fRrrWnPTXpCm1_EVdXjpNmlA8G1hPPyM1fKgMqjFHjctXGjLhZ05w0qpDhksGrybuNEHtJnCalZWsuaTlfq6nPaaBSv_HKw-K57BjzOiVj9ZKQYKzQjZodYFqydYTRN4gPhVzTDO2xnma3HsVWjaLjT8nbfwHy7Q5f2dBAAA)):
116118

117119
```svelte
@@ -144,6 +146,8 @@ Within the template, snippets are values just like any other. As such, they can
144146

145147
Think about it like passing content instead of data to a component. The concept is similar to slots in web components.
146148

149+
### Implicit props
150+
147151
As an authoring convenience, snippets declared directly _inside_ a component implicitly become props _on_ the component ([demo](/playground/untitled#H4sIAAAAAAAAE3VSTa_aMBD8Kyu_SkAbCA-JSzBR20N_QXt6vIMTO8SqsY29tI2s_PcqTiB8vaPHs7MzuxuIZgdBMvJLo0QlOElIJZXwJHsLBBvb_XUASc7Mb9Yu_B-hsMMK5sUzvDQahUZPMkJ96aTFfKd3KA_WOISfrFACKmcOMFmk8TWUTjY73RFLoz1C5U4SPWzhrcN2GKDrlcGEWauEnyRwxCaDdQLWyVJksII2uaMWTDPNLtzX5YX8-kgua-GcHJVXI3u5WEPb0d83O03TMZSmfRzOkG1Db7mNacOL19JagVALxoWbztq-H8U6j0SaYp2P2BGbOyQ2v8PQIFMXLKRDk177pq0zf6d8bMrzwBdd0pamyPMb-IjNEzS2f86Gz_Dwf-2F9nvNSUJQ_EOSoTuJNvngqK5v4Pas7n4-OCwlEEJcQTIMO-nSQwtb-GSdsX46e9gbRoP9yGQ11I0rEuycunu6PHx1QnPhxm3SFN15MOlYEFJZtf0dUywMbwZOeBGsrKNLYB54-1R9WNqVdki7usim6VmQphf7mnpshiQRhNAXdoOfMyX3OgMlKtz0cGEcF27uLSul3mewjPjgOOoDukxjPS9rqfh0pb-8zs6aBSt_7505aZ7B9xOi0T9YKW4UooVsr0zB1BTrWQJ3EL-oWcZ572GxFoezCk37QLe3897-B2i2U62uBAAA)):
148152

149153
```svelte
@@ -165,6 +169,8 @@ As an authoring convenience, snippets declared directly _inside_ a component imp
165169
</Table>
166170
```
167171

172+
### Implicit `children` snippet
173+
168174
Any content inside the component tags that is _not_ a snippet declaration implicitly becomes part of the `children` snippet ([demo](/playground/untitled#H4sIAAAAAAAAE3WOQQrCMBBFrzIMggql3ddY1Du4si5sOmIwnYRkFKX07lKqglqX8_7_w2uRDw1hjlsWI5ZqTPBoLEXMdy3K3fdZDzB5Ndfep_FKVnpWHSKNce1YiCVijirqYLwUJQOYxrsgsLmIOIZjcA1M02w4n-PpomSVvTclqyEutDX6DA2pZ7_ABIVugrmEC3XJH92P55_G39GodCmWBFrQJ2PrQAwdLGHig_NxNv9xrQa1dhWIawrv1Wzeqawa8953D-8QOmaEAQAA)):
169175

170176
```svelte
@@ -184,6 +190,8 @@ Any content inside the component tags that is _not_ a snippet declaration implic
184190

185191
> [!NOTE] Note that you cannot have a prop called `children` if you also have content inside the component — for this reason, you should avoid having props with that name
186192
193+
### Optional snippet props
194+
187195
You can declare snippet props as being optional. You can either use optional chaining to not render anything if the snippet isn't set...
188196

189197
```svelte

‎documentation/docs/98-reference/.generated/compile-errors.md

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,31 @@ A top-level `:global {...}` block can only contain rules, not declarations
235235
### css_global_block_invalid_list
236236

237237
```
238-
A `:global` selector cannot be part of a selector list with more than one item
238+
A `:global` selector cannot be part of a selector list with entries that don't contain `:global`
239+
```
240+
241+
The following CSS is invalid:
242+
243+
```css
244+
:global, x {
245+
y {
246+
color: red;
247+
}
248+
}
249+
```
250+
251+
This is mixing a `:global` block, which means "everything in here is unscoped", with a scoped selector (`x` in this case). As a result it's not possible to transform the inner selector (`y` in this case) into something that satisfies both requirements. You therefore have to split this up into two selectors:
252+
253+
```css
254+
:global {
255+
y {
256+
color: red;
257+
}
258+
}
259+
260+
x y {
261+
color: red;
262+
}
239263
```
240264

241265
### css_global_block_invalid_modifier

‎documentation/docs/98-reference/.generated/shared-errors.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,43 @@ Certain lifecycle methods can only be used during component initialisation. To f
6060
<button onclick={handleClick}>click me</button>
6161
```
6262

63+
### snippet_without_render_tag
64+
65+
```
66+
Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.
67+
```
68+
69+
A component throwing this error will look something like this (`children` is not being rendered):
70+
71+
```svelte
72+
<script>
73+
let { children } = $props();
74+
</script>
75+
76+
{children}
77+
```
78+
79+
...or like this (a parent component is passing a snippet where a non-snippet value is expected):
80+
81+
```svelte
82+
<!--- file: Parent.svelte --->
83+
<ChildComponent>
84+
{#snippet label()}
85+
<span>Hi!</span>
86+
{/snippet}
87+
</ChildComponent>
88+
```
89+
90+
```svelte
91+
<!--- file: Child.svelte --->
92+
<script>
93+
let { label } = $props();
94+
</script>
95+
96+
<!-- This component doesn't expect a snippet, but the parent provided one -->
97+
<p>{label}</p>
98+
```
99+
63100
### store_invalid_shape
64101

65102
```

‎documentation/docs/98-reference/21-svelte-reactivity.md

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,6 @@
22
title: svelte/reactivity
33
---
44

5-
Svelte provides reactive versions of various built-ins like `SvelteMap`, `SvelteSet` and `SvelteURL`. These can be imported from `svelte/reactivity` and used just like their native counterparts.
6-
7-
```svelte
8-
<script>
9-
import { SvelteURL } from 'svelte/reactivity';
10-
11-
const url = new SvelteURL('https://example.com/path');
12-
</script>
13-
14-
<!-- changes to these... -->
15-
<input bind:value={url.protocol} />
16-
<input bind:value={url.hostname} />
17-
<input bind:value={url.pathname} />
18-
19-
<hr />
20-
21-
<!-- will update `href` and vice versa -->
22-
<input bind:value={url.href} />
23-
```
5+
Svelte provides reactive versions of various built-ins like [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) and [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) that can be used just like their native counterparts, as well as a handful of additional utilities for handling reactivity.
246

257
> MODULE: svelte/reactivity

‎packages/svelte/CHANGELOG.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,49 @@
11
# svelte
22

3+
## 5.27.2
4+
5+
### Patch Changes
6+
7+
- chore: use pkg.imports for common modules ([#15787](https://github.com/sveltejs/svelte/pull/15787))
8+
9+
## 5.27.1
10+
11+
### Patch Changes
12+
13+
- chore: default params for html blocks ([#15778](https://github.com/sveltejs/svelte/pull/15778))
14+
15+
- fix: correct suggested type for custom events without detail ([#15763](https://github.com/sveltejs/svelte/pull/15763))
16+
17+
- fix: Throw on unrendered snippets in `dev` ([#15766](https://github.com/sveltejs/svelte/pull/15766))
18+
19+
- fix: avoid unnecessary read version increments ([#15777](https://github.com/sveltejs/svelte/pull/15777))
20+
21+
## 5.27.0
22+
23+
### Minor Changes
24+
25+
- feat: partially evaluate certain expressions ([#15494](https://github.com/sveltejs/svelte/pull/15494))
26+
27+
### Patch Changes
28+
29+
- fix: relax `:global` selector list validation ([#15762](https://github.com/sveltejs/svelte/pull/15762))
30+
31+
## 5.26.3
32+
33+
### Patch Changes
34+
35+
- fix: correctly validate head snippets on the server ([#15755](https://github.com/sveltejs/svelte/pull/15755))
36+
37+
- fix: ignore mutation validation for props that are not proxies in more cases ([#15759](https://github.com/sveltejs/svelte/pull/15759))
38+
39+
- fix: allow self-closing tags within math namespace ([#15761](https://github.com/sveltejs/svelte/pull/15761))
40+
41+
## 5.26.2
42+
43+
### Patch Changes
44+
45+
- fix: correctly validate `undefined` snippet params with default value ([#15750](https://github.com/sveltejs/svelte/pull/15750))
46+
347
## 5.26.1
448

549
### Patch Changes

‎packages/svelte/messages/compile-errors/style.md

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,31 @@
1616
1717
## css_global_block_invalid_list
1818

19-
> A `:global` selector cannot be part of a selector list with more than one item
19+
> A `:global` selector cannot be part of a selector list with entries that don't contain `:global`
20+
21+
The following CSS is invalid:
22+
23+
```css
24+
:global, x {
25+
y {
26+
color: red;
27+
}
28+
}
29+
```
30+
31+
This is mixing a `:global` block, which means "everything in here is unscoped", with a scoped selector (`x` in this case). As a result it's not possible to transform the inner selector (`y` in this case) into something that satisfies both requirements. You therefore have to split this up into two selectors:
32+
33+
```css
34+
:global {
35+
y {
36+
color: red;
37+
}
38+
}
39+
40+
x y {
41+
color: red;
42+
}
43+
```
2044

2145
## css_global_block_invalid_modifier
2246

‎packages/svelte/messages/shared-errors/errors.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,41 @@ Certain lifecycle methods can only be used during component initialisation. To f
5252
<button onclick={handleClick}>click me</button>
5353
```
5454

55+
## snippet_without_render_tag
56+
57+
> Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.
58+
59+
A component throwing this error will look something like this (`children` is not being rendered):
60+
61+
```svelte
62+
<script>
63+
let { children } = $props();
64+
</script>
65+
66+
{children}
67+
```
68+
69+
...or like this (a parent component is passing a snippet where a non-snippet value is expected):
70+
71+
```svelte
72+
<!--- file: Parent.svelte --->
73+
<ChildComponent>
74+
{#snippet label()}
75+
<span>Hi!</span>
76+
{/snippet}
77+
</ChildComponent>
78+
```
79+
80+
```svelte
81+
<!--- file: Child.svelte --->
82+
<script>
83+
let { label } = $props();
84+
</script>
85+
86+
<!-- This component doesn't expect a snippet, but the parent provided one -->
87+
<p>{label}</p>
88+
```
89+
5590
## store_invalid_shape
5691

5792
> `%name%` is not a store with a `subscribe` method

‎packages/svelte/package.json

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "svelte",
33
"description": "Cybernetically enhanced web apps",
44
"license": "MIT",
5-
"version": "5.26.1",
5+
"version": "5.27.2",
66
"type": "module",
77
"types": "./types/index.d.ts",
88
"engines": {
@@ -103,6 +103,17 @@
103103
"default": "./src/events/index.js"
104104
}
105105
},
106+
"imports": {
107+
"#client": "./src/internal/client/types.d.ts",
108+
"#client/constants": "./src/internal/client/constants.js",
109+
"#compiler": {
110+
"types": "./src/compiler/private.d.ts",
111+
"default": "./src/compiler/index.js"
112+
},
113+
"#compiler/builders": "./src/compiler/utils/builders.js",
114+
"#server": "./src/internal/server/types.d.ts",
115+
"#shared": "./src/internal/shared/types.d.ts"
116+
},
106117
"repository": {
107118
"type": "git",
108119
"url": "git+https://github.com/sveltejs/svelte.git",

‎packages/svelte/scripts/generate-types.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,12 @@ await createBundle({
2424
output: `${dir}/types/index.d.ts`,
2525
compilerOptions: {
2626
// so that types/properties with `@internal` (and its dependencies) are removed from the output
27-
stripInternal: true
27+
stripInternal: true,
28+
paths: Object.fromEntries(
29+
Object.entries(pkg.imports).map(([key, value]) => {
30+
return [key, [value.types ?? value.default ?? value]];
31+
})
32+
)
2833
},
2934
modules: {
3035
[pkg.name]: `${dir}/src/index.d.ts`,

‎packages/svelte/src/compiler/errors.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -555,12 +555,12 @@ export function css_global_block_invalid_declaration(node) {
555555
}
556556

557557
/**
558-
* A `:global` selector cannot be part of a selector list with more than one item
558+
* A `:global` selector cannot be part of a selector list with entries that don't contain `:global`
559559
* @param {null | number | NodeLike} node
560560
* @returns {never}
561561
*/
562562
export function css_global_block_invalid_list(node) {
563-
e(node, 'css_global_block_invalid_list', `A \`:global\` selector cannot be part of a selector list with more than one item\nhttps://svelte.dev/e/css_global_block_invalid_list`);
563+
e(node, 'css_global_block_invalid_list', `A \`:global\` selector cannot be part of a selector list with entries that don't contain \`:global\`\nhttps://svelte.dev/e/css_global_block_invalid_list`);
564564
}
565565

566566
/**

‎packages/svelte/src/compiler/migrate/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/** @import { VariableDeclarator, Node, Identifier, AssignmentExpression, LabeledStatement, ExpressionStatement } from 'estree' */
22
/** @import { Visitors } from 'zimmerframe' */
33
/** @import { ComponentAnalysis } from '../phases/types.js' */
4-
/** @import { Scope, ScopeRoot } from '../phases/scope.js' */
4+
/** @import { Scope } from '../phases/scope.js' */
55
/** @import { AST, Binding, ValidatedCompileOptions } from '#compiler' */
66
import MagicString from 'magic-string';
77
import { walk } from 'zimmerframe';

‎packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/** @import { Context, Visitors } from 'zimmerframe' */
22
/** @import { FunctionExpression, FunctionDeclaration } from 'estree' */
33
import { walk } from 'zimmerframe';
4-
import * as b from '../../utils/builders.js';
4+
import * as b from '#compiler/builders';
55
import * as e from '../../errors.js';
66

77
/**

0 commit comments

Comments
 (0)