diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/index.md index 227b9a6bc6..d9331e47aa 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/index.md +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/index.md @@ -44,6 +44,8 @@ Before we can use the snippet for the rest of our monkeys, we need to pass data ``` +> [!NOTE] You can also use destructured parameters, if you like. + Add the rest of the monkeys: - `'πŸ™ˆ', 'see no evil'` diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/App.svelte similarity index 63% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-a/src/lib/App.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/App.svelte index 1a7c9c9d58..61dd6cd525 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-a/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/App.svelte @@ -1,33 +1,35 @@ - -
+> + +{#snippet header()} +
name hex rgb hsl
+{/snippet} +{#snippet row(d)}
- - {row.name} - {row.hex} - {row.rgb} - {row.hsl} + + {d.name} + {d.hex} + {d.rgb} + {d.hsl}
- +{/snippet} \ No newline at end of file + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-b/src/lib/FilterableList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/FilteredList.svelte similarity index 58% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-b/src/lib/FilterableList.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/FilteredList.svelte index 3496c3063c..9c929d0c77 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-b/src/lib/FilterableList.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/FilteredList.svelte @@ -1,11 +1,14 @@
@@ -14,12 +17,12 @@
- +

TODO add header

- +
- {#each data.filter(matches) as item} - + {#each filtered as d} +

TODO add row

{/each}
@@ -42,4 +45,4 @@ padding-top: 0.5em; border-top: 1px solid var(--bg-2); } - \ No newline at end of file + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-a/src/lib/colors.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/data.js similarity index 97% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-a/src/lib/colors.js rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/data.js index ea4d1aa614..7ad9153d7b 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-a/src/lib/colors.js +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/data.js @@ -155,7 +155,7 @@ export const colors = data.map(({ hex, name }) => { let g = parseInt(hex.slice(3, 5), 16); let b = parseInt(hex.slice(5, 7), 16); - const rgb = `rgb(${r}, ${g}, ${b})`; + const rgb = `rgb(${r} ${g} ${b})`; // calculate hsl r /= 255; @@ -182,7 +182,7 @@ export const colors = data.map(({ hex, name }) => { h /= 6; } - const hsl = `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`; + const hsl = `hsl(${Math.round(h * 360)} ${Math.round(s * 100)} ${Math.round(l * 100)})`; return { name, @@ -190,4 +190,4 @@ export const colors = data.map(({ hex, name }) => { rgb, hsl }; -}); \ No newline at end of file +}); diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-b/src/lib/App.svelte similarity index 63% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-b/src/lib/App.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-b/src/lib/App.svelte index 34c173fff0..a01300d84f 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-b/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-b/src/lib/App.svelte @@ -1,32 +1,37 @@ - -
+ {header} + {row} +> + +{#snippet header()} +
name hex rgb hsl
+{/snippet} +{#snippet row(d)}
- - {row.name} - {row.hex} - {row.rgb} - {row.hsl} + + {d.name} + {d.hex} + {d.rgb} + {d.hsl}
- +{/snippet} \ No newline at end of file + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-a/src/lib/FilterableList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-b/src/lib/FilteredList.svelte similarity index 58% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-a/src/lib/FilterableList.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-b/src/lib/FilteredList.svelte index 023dc62cd4..42ea57fee2 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-a/src/lib/FilterableList.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-b/src/lib/FilteredList.svelte @@ -1,11 +1,14 @@
@@ -14,12 +17,12 @@
- + {@render header()}
- +
- {#each data.filter(matches) as item} - + {#each filtered as d} + {@render row(d)} {/each}
@@ -42,4 +45,4 @@ padding-top: 0.5em; border-top: 1px solid var(--bg-2); } - \ No newline at end of file + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/index.md new file mode 100644 index 0000000000..53335d34c2 --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/index.md @@ -0,0 +1,47 @@ +--- +title: Passing snippets to components +--- + +Since snippets β€” like functions β€”Β are just values, they can be passed to components as props. + +Take this `` component. Its job is to filter the `data` that gets passed into it, but it has no opinions about how that data should be rendered β€” that's the responsibility of the parent component. + +We've already got some snippets defined. Begin by passing them into the ``: + +```svelte +/// file: App.svelte + +``` + +Then, on the other side, declare `header` and `row` as props: + +```svelte +/// file: FilteredList.svelte + +``` + +Finally, replace the placeholder content with render tags: + +```svelte +/// file: FilteredList.svelte +
+ +++{@render header()}+++ +
+ +
+ {#each filtered as d} + +++{@render row(d)}+++ + {/each} +
+``` + +Never again will you have to memorize the hex code for `MistyRose` or `PeachPuff`. diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-snippet-parameters/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-snippet-parameters/index.md deleted file mode 100644 index db3c605526..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-snippet-parameters/index.md +++ /dev/null @@ -1,3 +0,0 @@ ---- -title: Snippet parameters ---- diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/03-implicit-snippet-props/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/03-implicit-snippet-props/+assets/app-b/src/lib/App.svelte new file mode 100644 index 0000000000..0a9fcb9beb --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/03-implicit-snippet-props/+assets/app-b/src/lib/App.svelte @@ -0,0 +1,74 @@ + + + +
+ + name + hex + rgb + hsl +
+ + {#snippet row(d)} +
+ + {d.name} + {d.hex} + {d.rgb} + {d.hsl} +
+ {/snippet} + + + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/+assets/app-b/src/lib/FilterableList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/03-implicit-snippet-props/+assets/app-b/src/lib/FilteredList.svelte similarity index 53% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/+assets/app-b/src/lib/FilterableList.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/03-implicit-snippet-props/+assets/app-b/src/lib/FilteredList.svelte index 55f0c00fed..502ac24369 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/+assets/app-b/src/lib/FilterableList.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/03-implicit-snippet-props/+assets/app-b/src/lib/FilteredList.svelte @@ -1,11 +1,14 @@
@@ -13,15 +16,13 @@ Filter: - {#if $$slots.header} -
- -
- {/if} - +
+ {@render children()} +
+
- {#each data.filter(matches) as item} - + {#each filtered as d} + {@render row(d)} {/each}
@@ -44,4 +45,4 @@ padding-top: 0.5em; border-top: 1px solid var(--bg-2); } - \ No newline at end of file + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/03-implicit-snippet-props/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/03-implicit-snippet-props/index.md new file mode 100644 index 0000000000..2b68c182e8 --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/03-implicit-snippet-props/index.md @@ -0,0 +1,67 @@ +--- +title: Implicit snippet props +--- + +As an authoring convenience, snippets declared directly inside components become props _on_ those components. Take the `header` and `row` snippets and move them inside ``: + +```svelte +/// file: App.svelte + + +++{#snippet header()}...{/snippet}+++ + + +++{#snippet row(d)}...{/snippet}+++ + + +---{#snippet header()}...{/snippet}--- + +---{#snippet row(d)}...{/snippet}--- +``` + +We can now remove them from the explicit props: + +```svelte +/// file: App.svelte + + {#snippet header()}...{/snippet} + + {#snippet row(d)}...{/snippet} + +``` + +Any content inside a component that is _not_ part of a declared snippet becomes a special `children` snippet. Since `header` has no parameters, we can turn it into `children` by removing the block tags... + +```svelte +/// file: App.svelte +---(#snippet header()}--- +
+ + name + hex + rgb + hsl +
+---{/snippet}--- +``` + +...and renaming the `header` prop to `children` on the other side: + +```svelte +/// file: FilteredList.svelte + +``` + +```svelte +/// file: FilteredList.svelte +
+ +++{@render children()}+++ +
+``` diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/App.svelte deleted file mode 100644 index d17baea618..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/App.svelte +++ /dev/null @@ -1,18 +0,0 @@ - - -
- - - -
- - \ No newline at end of file diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/Card.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/Card.svelte deleted file mode 100644 index 7d7eb81033..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/Card.svelte +++ /dev/null @@ -1,41 +0,0 @@ -
- -
- - diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/paper.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/paper.svg deleted file mode 100644 index f8f704fdf5..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/paper.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/wood.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/wood.svg deleted file mode 100644 index 5157ea83b5..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/wood.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-b/src/lib/App.svelte deleted file mode 100644 index 377be5167f..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-b/src/lib/App.svelte +++ /dev/null @@ -1,19 +0,0 @@ - - -
- - Patrick BATEMAN - Vice President - -
- - \ No newline at end of file diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-b/src/lib/Card.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-b/src/lib/Card.svelte deleted file mode 100644 index e0083f0c62..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-b/src/lib/Card.svelte +++ /dev/null @@ -1,41 +0,0 @@ -
- -
- - diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/index.md deleted file mode 100644 index 3e83297f2e..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/index.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Slots ---- - -Just like elements can have children... - -```html -
-

I'm a child of the div

-
-``` - -...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the `` element. Put this inside `Card.svelte`: - -```svelte -/// file: Card.svelte -
- ++++++ -
-``` - -You can now put things on the card: - -```svelte -/// file: App.svelte - - +++Patrick BATEMAN+++ - +++Vice President+++ - -``` diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/App.svelte deleted file mode 100644 index a9bde36e57..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/App.svelte +++ /dev/null @@ -1,28 +0,0 @@ - - -
- - Patrick BATEMAN - Vice President - - 212 555 6342 - - - Pierce & Pierce - Mergers and Aquisitions - - - 358 Exchange Place, New York, N.Y. 10099 fax 212 555 6390 telex 10 4534 - -
- - \ No newline at end of file diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/Card.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/Card.svelte deleted file mode 100644 index e0083f0c62..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/Card.svelte +++ /dev/null @@ -1,41 +0,0 @@ -
- -
- - diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/paper.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/paper.svg deleted file mode 100644 index 5dba50c15f..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/paper.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/wood.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/wood.svg deleted file mode 100644 index 5157ea83b5..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/wood.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-b/src/lib/App.svelte deleted file mode 100644 index 6ddf52dcca..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-b/src/lib/App.svelte +++ /dev/null @@ -1,34 +0,0 @@ - - -
- - Patrick BATEMAN - Vice President - - 212 555 6342 - - - Pierce & Pierce - Mergers and Aquisitions - - - 358 Exchange Place, New York, N.Y. 10099 fax 212 555 6390 telex 10 4534 - -
- - \ No newline at end of file diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-b/src/lib/Card.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-b/src/lib/Card.svelte deleted file mode 100644 index 7395157ba0..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-b/src/lib/Card.svelte +++ /dev/null @@ -1,50 +0,0 @@ -
-
- - -
- - - -
- -
-
- - diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/index.md deleted file mode 100644 index 901e987ce4..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/index.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Named slots ---- - -The previous example contained a _default slot_, which renders the direct children of a component. Sometimes you will need more control over placement. In those cases, we can use _named slots_. - -Inside `App.svelte`, we're rendering a `` component that contains `` and others for `company` and `address`. Let's add the corresponding named slots in `Card.svelte`: - -```svelte -/// file: Card.svelte -
-+++
- - -
+++ - - - -+++
- -
+++ -
-``` - -We need to add some styles to the `` element in `App.svelte` so that it occupies its own line. The contents of `` inherit styles from `Card.svelte`, such as `font-family` (the lettering is something called ['Silian Rail'](https://www.youtube.com/watch?v=aZVkW9p-cCU)), but normal scoping rules apply β€” we need to add the styles to `App.svelte` because that's where the element is: - -```svelte -/// file: App.svelte - -``` - -Alternatively, we could use the `:global` modifier inside `Card.svelte` to target all `small` elements inside `.card`: - -```svelte -/// file: Card.svelte - -``` diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-a/src/lib/App.svelte deleted file mode 100644 index b7b99912ff..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-a/src/lib/App.svelte +++ /dev/null @@ -1,46 +0,0 @@ - - -
- - Patrick BATEMAN - Vice President - - 212 555 6342 - - - Pierce & Pierce - Mergers and Aquisitions - - - 358 Exchange Place, New York, N.Y. 10099 fax 212 555 6390 telex 10 4534 - - - -
- - \ No newline at end of file diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-a/src/lib/Card.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-a/src/lib/Card.svelte deleted file mode 100644 index 7395157ba0..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-a/src/lib/Card.svelte +++ /dev/null @@ -1,50 +0,0 @@ -
-
- - -
- - - -
- -
-
- - diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-a/src/lib/paper.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-a/src/lib/paper.svg deleted file mode 100644 index f8f704fdf5..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-a/src/lib/paper.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-a/src/lib/wood.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-a/src/lib/wood.svg deleted file mode 100644 index 5157ea83b5..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-a/src/lib/wood.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-b/src/lib/Card.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-b/src/lib/Card.svelte deleted file mode 100644 index 221d2f148e..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-b/src/lib/Card.svelte +++ /dev/null @@ -1,59 +0,0 @@ -
-
- - (telephone) - - - - (company name) - -
- - - (name) - - -
- - (address) - -
-
- - diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/index.md deleted file mode 100644 index 05bf05214d..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/index.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Slot fallbacks ---- - -A component can specify _fallbacks_ for any slots that are left empty, by putting content inside the `` element: - -```svelte -/// file: Card.svelte -
-
- - +++(telephone)+++ - - - - +++(company name)+++ - -
- - - +++(name)+++ - - -
- - +++(address)+++ - -
-
-``` diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/index.md deleted file mode 100644 index b766b74fe0..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/index.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Slot props ---- - -Components can pass data _back_ to their slotted content via _slot props_. In this app, we have a list of named CSS colours. Typing into the `` will filter the list. - -Right now every row is showing `AliceBlue`, and as lovely a colour as it is, that's not what we want. - -Open `FilterableList.svelte`. The `` is being rendered for each filtered item in the list. Pass the data into the slot: - -```svelte -/// file: FilterableList.svelte -
- {#each data.filter(matches) as item} - - {/each} -
-``` - -(As in other contexts, `{item}` is shorthand for `item={item}`.) - -Then, on the other side, expose the data to the slotted content with the `let:` directive: - -```svelte -/// file: App.svelte - -
- - {row.name} - {row.hex} - {row.rgb} - {row.hsl} -
- -``` - -Finally, get rid of the placeholder variable, which we no longer need: - -```svelte -/// file: App.svelte - -``` - -> [!NOTE] Named slots can also have props; use the `let` directive on an element with a `slot="..."` attribute, instead of on the component itself. diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/+assets/app-b/src/lib/App.svelte deleted file mode 100644 index 0dde933278..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/+assets/app-b/src/lib/App.svelte +++ /dev/null @@ -1,72 +0,0 @@ - - - -
- - {row.name} - {row.hex} - {row.rgb} - {row.hsl} -
- - - \ No newline at end of file diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/index.md deleted file mode 100644 index c9c219f693..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/index.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Checking for slot content ---- - -In some cases, you may want to control parts of your component based on whether slotted content was passed in. For example, if we remove the `
` from `App.svelte`... - -```svelte -/// file: App.svelte ----
- - name - hex - rgb - hsl -
--- - -
- - {row.name} - {row.hex} - {row.rgb} - {row.hsl} -
-``` - -...we're left with an ugly double border because `FilterableList.svelte` is still rendering the `
`. - -We can fix that by using the special `$$slots` variable in `FilterableList.svelte`: - -```svelte -/// file: FilterableList.svelte -+++{#if $$slots.header}+++ -
- -
-+++{/if}+++ -``` diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/index.md deleted file mode 100644 index 7c7ba5f0c3..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/index.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Component composition -scope: { 'prefix': '/src/lib/', 'name': 'src' } -focus: /src/lib/App.svelte ----