From f20d9554b751ea655d7f17d9e01697b5161db937 Mon Sep 17 00:00:00 2001 From: Cameron Messinides Date: Sat, 15 Aug 2020 17:48:11 -0400 Subject: [PATCH 1/5] site: add documentation for $$slots --- site/content/docs/02-template-syntax.md | 21 +++++++++ .../04-optional-slots/app-a/App.svelte | 14 ++++++ .../app-a/ContactCard.svelte | 47 +++++++++++++++++++ .../04-optional-slots/app-b/App.svelte | 14 ++++++ .../app-b/ContactCard.svelte | 47 +++++++++++++++++++ .../14-composition/04-optional-slots/text.md | 25 ++++++++++ .../app-a/App.svelte | 0 .../app-a/Hoverable.svelte | 0 .../app-b/App.svelte | 0 .../app-b/Hoverable.svelte | 0 .../{04-slot-props => 05-slot-props}/text.md | 0 11 files changed, 168 insertions(+) create mode 100644 site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte create mode 100644 site/content/tutorial/14-composition/04-optional-slots/app-a/ContactCard.svelte create mode 100644 site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte create mode 100644 site/content/tutorial/14-composition/04-optional-slots/app-b/ContactCard.svelte create mode 100644 site/content/tutorial/14-composition/04-optional-slots/text.md rename site/content/tutorial/14-composition/{04-slot-props => 05-slot-props}/app-a/App.svelte (100%) rename site/content/tutorial/14-composition/{04-slot-props => 05-slot-props}/app-a/Hoverable.svelte (100%) rename site/content/tutorial/14-composition/{04-slot-props => 05-slot-props}/app-b/App.svelte (100%) rename site/content/tutorial/14-composition/{04-slot-props => 05-slot-props}/app-b/Hoverable.svelte (100%) rename site/content/tutorial/14-composition/{04-slot-props => 05-slot-props}/text.md (100%) diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md index cfc7d7ba7a35..e2d01bba8955 100644 --- a/site/content/docs/02-template-syntax.md +++ b/site/content/docs/02-template-syntax.md @@ -1289,6 +1289,27 @@ Named slots allow consumers to target specific areas. They can also have fallbac ``` +--- + +`$$slots` is an object whose keys are the names of the slots passed into the component by the parent. If the parent leaves a named slot empty, `$$slots` will not have a key for that slot. This allows components to render a slot (and other elements, like wrappers for styling) only if the parent provides children for it. + +```sv + + +

Blog Post Title

+ + + +
+ + {#if $$slots.description} + +
+ + {/if} +
+``` + #### [``](slot_let) --- diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte new file mode 100644 index 000000000000..620b602ecaee --- /dev/null +++ b/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte @@ -0,0 +1,14 @@ + + + + + P. Sherman + + + + 42 Wallaby Way
+ Sydney + + \ No newline at end of file diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-a/ContactCard.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-a/ContactCard.svelte new file mode 100644 index 000000000000..1acf2909430f --- /dev/null +++ b/site/content/tutorial/14-composition/04-optional-slots/app-a/ContactCard.svelte @@ -0,0 +1,47 @@ + + +
+

+ + Unknown name + +

+ +
+ + Unknown address + +
+ + +
\ No newline at end of file diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte new file mode 100644 index 000000000000..aa6d225905a9 --- /dev/null +++ b/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte @@ -0,0 +1,14 @@ + + + + + P. Sherman + + + + 42 Wallaby Way
+ Sydney + + diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-b/ContactCard.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-b/ContactCard.svelte new file mode 100644 index 000000000000..9bdb48953be1 --- /dev/null +++ b/site/content/tutorial/14-composition/04-optional-slots/app-b/ContactCard.svelte @@ -0,0 +1,47 @@ + + +
+

+ + Unknown name + +

+ + {#if $$slots.address} +
+ +
+ {/if} + + {#if $$slots.email} + + {/if} +
diff --git a/site/content/tutorial/14-composition/04-optional-slots/text.md b/site/content/tutorial/14-composition/04-optional-slots/text.md new file mode 100644 index 000000000000..8d095bc21160 --- /dev/null +++ b/site/content/tutorial/14-composition/04-optional-slots/text.md @@ -0,0 +1,25 @@ +--- +title: Optional slots +--- + +In the previous example, the contact card rendered fallback text if a named slot was left empty. But for some slots, perhaps you don't want to render anything at all. We can do this by checking the properties of the special `$$slots` variable. + +`$$slots` is an object whose keys are the names of the slots passed in by the parent component. If the parent leaves a slot empty, then `$$slots` will not have an entry for that slot. + +In `ContactCard.svelte`, wrap the `address` and `email` slots in `if` blocks that check `$$slots`, and remove the fallbacks from each ``: + +```html +{#if $$slots.address} +
+ +
+{/if} + +{#if $$slots.email} + +{/if} +``` + +Now the email row won't render at all when the `` leaves that slot empty. diff --git a/site/content/tutorial/14-composition/04-slot-props/app-a/App.svelte b/site/content/tutorial/14-composition/05-slot-props/app-a/App.svelte similarity index 100% rename from site/content/tutorial/14-composition/04-slot-props/app-a/App.svelte rename to site/content/tutorial/14-composition/05-slot-props/app-a/App.svelte diff --git a/site/content/tutorial/14-composition/04-slot-props/app-a/Hoverable.svelte b/site/content/tutorial/14-composition/05-slot-props/app-a/Hoverable.svelte similarity index 100% rename from site/content/tutorial/14-composition/04-slot-props/app-a/Hoverable.svelte rename to site/content/tutorial/14-composition/05-slot-props/app-a/Hoverable.svelte diff --git a/site/content/tutorial/14-composition/04-slot-props/app-b/App.svelte b/site/content/tutorial/14-composition/05-slot-props/app-b/App.svelte similarity index 100% rename from site/content/tutorial/14-composition/04-slot-props/app-b/App.svelte rename to site/content/tutorial/14-composition/05-slot-props/app-b/App.svelte diff --git a/site/content/tutorial/14-composition/04-slot-props/app-b/Hoverable.svelte b/site/content/tutorial/14-composition/05-slot-props/app-b/Hoverable.svelte similarity index 100% rename from site/content/tutorial/14-composition/04-slot-props/app-b/Hoverable.svelte rename to site/content/tutorial/14-composition/05-slot-props/app-b/Hoverable.svelte diff --git a/site/content/tutorial/14-composition/04-slot-props/text.md b/site/content/tutorial/14-composition/05-slot-props/text.md similarity index 100% rename from site/content/tutorial/14-composition/04-slot-props/text.md rename to site/content/tutorial/14-composition/05-slot-props/text.md From 54527f07ccaacc70bcf6e9f16e2fb36f3dd8afd2 Mon Sep 17 00:00:00 2001 From: Cameron Messinides Date: Mon, 17 Aug 2020 21:24:00 -0400 Subject: [PATCH 2/5] site: revise $$slots tutorial chapter --- .../04-optional-slots/app-a/App.svelte | 63 +++++++++++++++--- .../04-optional-slots/app-a/Comment.svelte | 56 ++++++++++++++++ .../app-a/ContactCard.svelte | 47 -------------- .../04-optional-slots/app-a/Project.svelte | 62 ++++++++++++++++++ .../04-optional-slots/app-b/App.svelte | 63 +++++++++++++++--- .../04-optional-slots/app-b/Comment.svelte | 56 ++++++++++++++++ .../app-b/ContactCard.svelte | 47 -------------- .../04-optional-slots/app-b/Project.svelte | 64 +++++++++++++++++++ .../14-composition/04-optional-slots/text.md | 27 ++++---- 9 files changed, 359 insertions(+), 126 deletions(-) mode change 100644 => 100755 site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte create mode 100755 site/content/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte delete mode 100644 site/content/tutorial/14-composition/04-optional-slots/app-a/ContactCard.svelte create mode 100755 site/content/tutorial/14-composition/04-optional-slots/app-a/Project.svelte mode change 100644 => 100755 site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte create mode 100755 site/content/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte delete mode 100644 site/content/tutorial/14-composition/04-optional-slots/app-b/ContactCard.svelte create mode 100755 site/content/tutorial/14-composition/04-optional-slots/app-b/Project.svelte diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte old mode 100644 new mode 100755 index 620b602ecaee..80a4df59f865 --- a/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte +++ b/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte @@ -1,14 +1,57 @@ - - - P. Sherman - + + +

+ Projects +

+ +
    +
  • + +
    + +

    Those interface tests are now passing.

    +     +
    +     +
    • +
  • + +
    • +
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte new file mode 100755 index 000000000000..8d15ffa882ad --- /dev/null +++ b/site/content/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte @@ -0,0 +1,56 @@ + + + + +
+
+ +
+

{name}

+ +
+
+
+ +
+
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-a/ContactCard.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-a/ContactCard.svelte deleted file mode 100644 index 1acf2909430f..000000000000 --- a/site/content/tutorial/14-composition/04-optional-slots/app-a/ContactCard.svelte +++ /dev/null @@ -1,47 +0,0 @@ - - -
-

- - Unknown name - -

- -
- - Unknown address - -
- - -
\ No newline at end of file diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-a/Project.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-a/Project.svelte new file mode 100755 index 000000000000..38d19fc6389a --- /dev/null +++ b/site/content/tutorial/14-composition/04-optional-slots/app-a/Project.svelte @@ -0,0 +1,62 @@ + + + + +
+
+

{title}

+

{tasksCompleted}/{totalTasks} tasks completed

+
+
+

Comments

+ +
+
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte old mode 100644 new mode 100755 index aa6d225905a9..80a4df59f865 --- a/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte +++ b/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte @@ -1,14 +1,57 @@ - - - P. Sherman - + + +

+ Projects +

+ +
    +
  • + +
    + +

    Those interface tests are now passing.

    +     +
    +     +
    • +
  • + +
    • +
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte new file mode 100755 index 000000000000..8d15ffa882ad --- /dev/null +++ b/site/content/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte @@ -0,0 +1,56 @@ + + + + +
+
+ +
+

{name}

+ +
+
+
+ +
+
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-b/ContactCard.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-b/ContactCard.svelte deleted file mode 100644 index 9bdb48953be1..000000000000 --- a/site/content/tutorial/14-composition/04-optional-slots/app-b/ContactCard.svelte +++ /dev/null @@ -1,47 +0,0 @@ - - -
-

- - Unknown name - -

- - {#if $$slots.address} -
- -
- {/if} - - {#if $$slots.email} - - {/if} -
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-b/Project.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-b/Project.svelte new file mode 100755 index 000000000000..87a1d0c3ac01 --- /dev/null +++ b/site/content/tutorial/14-composition/04-optional-slots/app-b/Project.svelte @@ -0,0 +1,64 @@ + + + + +
+
+

{title}

+

{tasksCompleted}/{totalTasks} tasks completed

+
+ {#if $$slots.comments} +
+

Comments

+ +
+ {/if} +
diff --git a/site/content/tutorial/14-composition/04-optional-slots/text.md b/site/content/tutorial/14-composition/04-optional-slots/text.md index 8d095bc21160..5f77c89f110a 100644 --- a/site/content/tutorial/14-composition/04-optional-slots/text.md +++ b/site/content/tutorial/14-composition/04-optional-slots/text.md @@ -1,25 +1,28 @@ --- -title: Optional slots +title: Checking slots --- -In the previous example, the contact card rendered fallback text if a named slot was left empty. But for some slots, perhaps you don't want to render anything at all. We can do this by checking the properties of the special `$$slots` variable. +In some cases, you may want to control parts of your component based on whether the parent passes in content for a certain slot. Perhaps you have a wrapper around that slot, and you don't want to render it if the slot is empty. Or perhaps you'd like to apply a class only if the slot is present. You can do this by checking the properties of the special `$$slots` variable. `$$slots` is an object whose keys are the names of the slots passed in by the parent component. If the parent leaves a slot empty, then `$$slots` will not have an entry for that slot. -In `ContactCard.svelte`, wrap the `address` and `email` slots in `if` blocks that check `$$slots`, and remove the fallbacks from each ``: +Notice that both instances of `` in this example render a container for comments and a notification dot, even though only one has comments. We want to use `$$slots` to make sure we only render these elements when the parent `` passes in content for the `comments` slot. + +In `Project.svelte`, update the `class:has-discussion` directive on the `
`: ```html -{#if $$slots.address} -
- -
-{/if} +
+``` + +Next, wrap the `comments` slot and its wrapping `
` in an `if` block that checks `$$slots`: -{#if $$slots.email} - ``` +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. + #### [``](slot_let) --- From 8b8271b0eab65bb85bbf8c3826a0766682b3c826 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Thu, 29 Oct 2020 16:19:57 -0400 Subject: [PATCH 4/5] slightly rearrange $$slots section in API docs --- site/content/docs/02-template-syntax.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md index 72b654a5e3bc..119488aacc26 100644 --- a/site/content/docs/02-template-syntax.md +++ b/site/content/docs/02-template-syntax.md @@ -1317,10 +1317,14 @@ Named slots allow consumers to target specific areas. They can also have fallbac
``` +#### [`$$slots`](slots_object) + --- `$$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 a present in `$$slots`. This allows components to render a slot (and other elements, like wrappers for styling) only if the parent provides it. +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. + ```sv @@ -1338,8 +1342,6 @@ Named slots allow consumers to target specific areas. They can also have fallbac
``` -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. - #### [``](slot_let) --- From be85397ca155e1c010a7c77e96ced804abd644f3 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Thu, 29 Oct 2020 16:23:14 -0400 Subject: [PATCH 5/5] rename tutorial 'Checking slots' -> 'Checking for slot content' --- site/content/tutorial/14-composition/04-optional-slots/text.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/tutorial/14-composition/04-optional-slots/text.md b/site/content/tutorial/14-composition/04-optional-slots/text.md index 5f77c89f110a..b875f4c87d4c 100644 --- a/site/content/tutorial/14-composition/04-optional-slots/text.md +++ b/site/content/tutorial/14-composition/04-optional-slots/text.md @@ -1,5 +1,5 @@ --- -title: Checking slots +title: Checking for slot content --- In some cases, you may want to control parts of your component based on whether the parent passes in content for a certain slot. Perhaps you have a wrapper around that slot, and you don't want to render it if the slot is empty. Or perhaps you'd like to apply a class only if the slot is present. You can do this by checking the properties of the special `$$slots` variable.