From d6f461804051603f9b7be6792c361b41580d4233 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 21 Oct 2024 23:21:22 -0400 Subject: [PATCH] tweaks --- .../docs/99-legacy/20-legacy-slots.md | 108 ++++++++---------- .../docs/99-legacy/21-legacy-$$slots.md | 15 ++- .../99-legacy/22-legacy-svelte-fragment.md | 10 +- .../99-legacy/30-legacy-svelte-component.md | 22 +--- .../docs/99-legacy/31-legacy-svelte-self.md | 4 +- .../docs/99-legacy/40-legacy-component-api.md | 4 +- 6 files changed, 74 insertions(+), 89 deletions(-) diff --git a/documentation/docs/99-legacy/20-legacy-slots.md b/documentation/docs/99-legacy/20-legacy-slots.md index a82d8435bf..5189f2017d 100644 --- a/documentation/docs/99-legacy/20-legacy-slots.md +++ b/documentation/docs/99-legacy/20-legacy-slots.md @@ -2,85 +2,75 @@ title: --- -```svelte - -``` +In Svelte 5, content can be passed to components in the form of [snippets](snippet) and rendered using [render tags](@render). -```svelte - -``` +In legacy mode, content inside component tags is considered _slotted content_, which can be rendered by the component using a `` element: ```svelte - -``` - -Components can have child content, in the same way that elements can. + + -The content is exposed in the child component using the `` element, which can contain fallback content that is rendered if no children are provided. +This is some slotted content +``` ```svelte - -
- - this fallback content will be rendered when no content is provided, like in the first example - + +
+
- - - - - - -

this is some child content that will overwrite the default slot content

- ``` -Note: If you want to render regular `` element, You can use ``. - -> [!NOTE] -> In Svelte 5+, use snippets instead +> [!NOTE] If you want to render a regular `` element, you can use ``. -## `` +## Named slots -Named slots allow consumers to target specific areas. They can also have fallback content. +A component can have _named_ slots in addition to the default slot. On the parent side, add a `slot="..."` attribute to an element, component or [``](legacy-svelte-fragment) directly inside the component tags. ```svelte - -
- No header was provided -

Some content between header and footer

- -
- - - -

Hello

-

Copyright (c) 2019 Svelte Industries

- + + + +{#if open} + + This is some slotted content + + +++
+++ + + +++
+++ + +{/if} ``` -Components can be placed in a named slot using the syntax ``. -In order to place content in a slot without using a wrapper element, you can use the special element ``. +On the child side, add a corresponding `` element: ```svelte - -
- No header was provided -

Some content between header and footer

- + +
+ +
+ ++++++
+``` - - - - -

All rights reserved.

-

Copyright (c) 2019 Svelte Industries

- - +## Fallback content + +If no slotted content is provided, a component can define fallback content by putting it inside the `` element: + +```svelte + + This will be rendered if no slotted content is provided + ``` -## `` +## Passing data to slotted content Slots can be rendered zero or more times and can pass values _back_ to the parent using props. The parent exposes the values to the slot template using the `let:` directive. @@ -122,3 +112,5 @@ Named slots can also expose values. The `let:` directive goes on the element wit

Copyright (c) 2019 Svelte Industries

``` + + diff --git a/documentation/docs/99-legacy/21-legacy-$$slots.md b/documentation/docs/99-legacy/21-legacy-$$slots.md index ad5fce6c80..7ca1cef844 100644 --- a/documentation/docs/99-legacy/21-legacy-$$slots.md +++ b/documentation/docs/99-legacy/21-legacy-$$slots.md @@ -2,27 +2,26 @@ title: $$slots --- -`$$slots` is an object whose keys are the names of the slots passed into the component by the parent. If the parent does not pass in a slot with a particular name, that name will not be present in `$$slots`. This allows components to render a slot (and other elements, like wrappers for styling) only if the parent provides it. +In runes mode, we know which [snippets](snippet) were provided to a component, as they're just normal props. -Note that explicitly passing in an empty named slot will add that slot's name to `$$slots`. For example, if a parent passes `
` to a child component, `$$slots.title` will be truthy within the child. +In legacy mode, the way to know if content was provided for a given slot is with the `$$slots` object, whose keys are the names of the slots passed into the component by the parent. ```svelte - +
{#if $$slots.description} - +
{/if}
+``` - +```svelte +

Blog Post Title

 ``` - -> [!NOTE] -> In Svelte 5+, this concept is obsolete, as you pass snippets as component props and can check whether or not that prop is set diff --git a/documentation/docs/99-legacy/22-legacy-svelte-fragment.md b/documentation/docs/99-legacy/22-legacy-svelte-fragment.md index 99fe192f5a..8827ab53cb 100644 --- a/documentation/docs/99-legacy/22-legacy-svelte-fragment.md +++ b/documentation/docs/99-legacy/22-legacy-svelte-fragment.md @@ -5,14 +5,20 @@ title: The `` element allows you to place content in a [named slot](/docs/special-elements#slot-slot-name-name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact. ```svelte - +
No header was provided

Some content between header and footer

+``` + +```svelte + + -

Hello

diff --git a/documentation/docs/99-legacy/30-legacy-svelte-component.md b/documentation/docs/99-legacy/30-legacy-svelte-component.md index 2c04238f2d..5d385a9c02 100644 --- a/documentation/docs/99-legacy/30-legacy-svelte-component.md +++ b/documentation/docs/99-legacy/30-legacy-svelte-component.md @@ -2,26 +2,12 @@ title: --- -```svelte - -``` +In runes mode, `` will re-render if the value of `MyComponent` changes. -The `` element renders a component dynamically, using the component constructor specified as the `this` property. When the property changes, the component is destroyed and recreated. - -If `this` is falsy, no component is rendered. +In legacy mode, it won't — we must use ``, which destroys and recreates the component instance when the value of its `this` expression changes: ```svelte - + ``` -> [!NOTE] -> In Svelte 5+, this concept is obsolete, as you can just reference `$state` or `$derived` variables containing components -> ```svelte -> -> -> -> -> -> ``` +If `this` is falsy, no component is rendered. diff --git a/documentation/docs/99-legacy/31-legacy-svelte-self.md b/documentation/docs/99-legacy/31-legacy-svelte-self.md index b601eae62a..bfd140ac49 100644 --- a/documentation/docs/99-legacy/31-legacy-svelte-self.md +++ b/documentation/docs/99-legacy/31-legacy-svelte-self.md @@ -20,14 +20,14 @@ It cannot appear at the top level of your markup; it must be inside an if or eac ``` > [!NOTE] -> This concept is obsolete, as you can just self-import components +> This concept is obsolete, as components can import themselves: > ```svelte > > -> +> > {#if count > 0} >

counting down... {count}

> diff --git a/documentation/docs/99-legacy/40-legacy-component-api.md b/documentation/docs/99-legacy/40-legacy-component-api.md index 26b3a31071..5bbe7e7237 100644 --- a/documentation/docs/99-legacy/40-legacy-component-api.md +++ b/documentation/docs/99-legacy/40-legacy-component-api.md @@ -2,6 +2,8 @@ title: Imperative component API --- +In Svelte 3 and 4, the API for interacting with a component is different than in Svelte 5. Note that this page does _not_ apply to legacy mode components in a Svelte 5 application. + ## Creating a component ```ts @@ -156,7 +158,7 @@ Unlike client-side components, server-side components don't have a lifespan afte A server-side component exposes a `render` method that can be called with optional props. It returns an object with `head`, `html`, and `css` properties, where `head` contains the contents of any `` elements encountered. -You can import a Svelte component directly into Node using [`svelte/register`](/docs/svelte-register). +You can import a Svelte component directly into Node using `svelte/register`. ```js // @noErrors