Skip to content

Commit 6fb7411

Browse files
Sync svelte docs (#922)
sync svelte docs Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com>
1 parent 04be0aa commit 6fb7411

File tree

3 files changed

+77
-0
lines changed

3 files changed

+77
-0
lines changed

apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,23 @@ We can tighten things up further by declaring a generic, so that `data` and `row
246246
</script>
247247
```
248248

249+
## Exporting snippets
250+
251+
Snippets declared at the top level of a `.svelte` file can be exported from a `<script module>` for use in other components, provided they don't reference any declarations in a non-module `<script>` (whether directly or indirectly, via other snippets) ([demo](/playground/untitled#H4sIAAAAAAAAE3WPwY7CMAxEf8UyB1hRgdhjl13Bga8gHFJipEqtGyUGFUX5dxJUtEB3b9bYM_MckHVLWOKut50TMuC5tpbEY4GnuiGP5T6gXG0-ykLSB8vW2oW_UCNZq7Snv_Rjx0Kc4kpc-6OrrfwoVlK3uQ4CaGMgwsl1LUwXy0f54J9-KV4vf20cNo7YkMu22aqAz4-oOLUI9YKluDPF4h_at-hX5PFyzA1tZ84N3fGpf8YfUU6GvDumLqDKmEqCjjCHUEX4hqDTWCU5PJ6Or38c4g1cPu9tnAEAAA==)):
252+
253+
```svelte
254+
<script module>
255+
export { add };
256+
</script>
257+
258+
{#snippet add(a, b)}
259+
{a} + {b} = {a + b}
260+
{/snippet}
261+
```
262+
263+
> [!NOTE]
264+
> This requires Svelte 5.5.0 or newer
265+
249266
## Programmatic snippets
250267

251268
Snippets can be created programmatically with the [`createRawSnippet`](svelte#createRawSnippet) API. This is intended for advanced use cases.

apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -400,6 +400,12 @@ Expected token %token%
400400
Expected whitespace
401401
```
402402

403+
### export_undefined
404+
405+
```
406+
`%name%` is not defined
407+
```
408+
403409
### global_reference_invalid
404410

405411
```
@@ -694,6 +700,30 @@ Cannot use `<slot>` syntax and `{@render ...}` tags in the same component. Migra
694700
Cannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block
695701
```
696702

703+
### snippet_invalid_export
704+
705+
```
706+
An exported snippet can only reference things declared in a `<script module>`, or other exportable snippets
707+
```
708+
709+
It's possible to export a snippet from a `<script module>` block, but only if it doesn't reference anything defined inside a non-module-level `<script>`. For example you can't do this...
710+
711+
```svelte
712+
<script module>
713+
export { greeting };
714+
</script>
715+
716+
<script>
717+
let message = 'hello';
718+
</script>
719+
720+
{#snippet greeting(name)}
721+
<p>{message} {name}!</p>
722+
{/snippet}
723+
```
724+
725+
...because `greeting` references `message`, which is defined in the second `<script>`.
726+
697727
### snippet_invalid_rest_parameter
698728

699729
```

apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -404,6 +404,12 @@ Expected token %token%
404404
Expected whitespace
405405
```
406406

407+
### export_undefined
408+
409+
```
410+
`%name%` is not defined
411+
```
412+
407413
### global_reference_invalid
408414

409415
```
@@ -698,6 +704,30 @@ Cannot use `<slot>` syntax and `{@render ...}` tags in the same component. Migra
698704
Cannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block
699705
```
700706

707+
### snippet_invalid_export
708+
709+
```
710+
An exported snippet can only reference things declared in a `<script module>`, or other exportable snippets
711+
```
712+
713+
It's possible to export a snippet from a `<script module>` block, but only if it doesn't reference anything defined inside a non-module-level `<script>`. For example you can't do this...
714+
715+
```svelte
716+
<script module>
717+
export { greeting };
718+
</script>
719+
720+
<script>
721+
let message = 'hello';
722+
</script>
723+
724+
{#snippet greeting(name)}
725+
<p>{message} {name}!</p>
726+
{/snippet}
727+
```
728+
729+
...because `greeting` references `message`, which is defined in the second `<script>`.
730+
701731
### snippet_invalid_rest_parameter
702732

703733
```

0 commit comments

Comments
 (0)