From 9fc383584b431ee5f304487e7692698824a61d0a Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 18 Oct 2024 12:19:00 -0400 Subject: [PATCH 1/3] add snippet exercise --- .../01-snippets-and-render-tags/index.md | 2 + .../+assets/app-a/src/lib/App.svelte | 79 +++++++ .../+assets/app-a/src/lib/FilteredList.svelte | 48 +++++ .../+assets/app-a/src/lib/data.js | 193 ++++++++++++++++++ .../+assets/app-b/src/lib/App.svelte | 81 ++++++++ .../+assets/app-b/src/lib/FilteredList.svelte | 48 +++++ .../02-snippets/02-passing-snippets/index.md | 47 +++++ 7 files changed, 498 insertions(+) create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/App.svelte create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/FilteredList.svelte create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/data.js create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-b/src/lib/App.svelte create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-b/src/lib/FilteredList.svelte create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/index.md 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/02-snippets/02-passing-snippets/+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 new file mode 100644 index 0000000000..61dd6cd525 --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/App.svelte @@ -0,0 +1,79 @@ + + + + +{#snippet header()} +
+ + name + hex + rgb + hsl +
+{/snippet} + +{#snippet row(d)} +
+ + {d.name} + {d.hex} + {d.rgb} + {d.hsl} +
+{/snippet} + + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/FilteredList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/FilteredList.svelte new file mode 100644 index 0000000000..9c929d0c77 --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/FilteredList.svelte @@ -0,0 +1,48 @@ + + +
+ + +
+

TODO add header

+
+ +
+ {#each filtered as d} +

TODO add row

+ {/each} +
+
+ + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/data.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/data.js new file mode 100644 index 0000000000..7ad9153d7b --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-a/src/lib/data.js @@ -0,0 +1,193 @@ +const data = [ + { hex: '#f0f8ff', name: 'AliceBlue' }, + { hex: '#faebd7', name: 'AntiqueWhite' }, + { hex: '#00ffff', name: 'Aqua' }, + { hex: '#7fffd4', name: 'Aquamarine' }, + { hex: '#f0ffff', name: 'Azure' }, + { hex: '#f5f5dc', name: 'Beige' }, + { hex: '#ffe4c4', name: 'Bisque' }, + { hex: '#000000', name: 'Black' }, + { hex: '#ffebcd', name: 'BlanchedAlmond' }, + { hex: '#0000ff', name: 'Blue' }, + { hex: '#8a2be2', name: 'BlueViolet' }, + { hex: '#a52a2a', name: 'Brown' }, + { hex: '#deb887', name: 'BurlyWood' }, + { hex: '#5f9ea0', name: 'CadetBlue' }, + { hex: '#7fff00', name: 'Chartreuse' }, + { hex: '#d2691e', name: 'Chocolate' }, + { hex: '#ff7f50', name: 'Coral' }, + { hex: '#6495ed', name: 'CornflowerBlue' }, + { hex: '#fff8dc', name: 'Cornsilk' }, + { hex: '#dc143c', name: 'Crimson' }, + { hex: '#00ffff', name: 'Cyan' }, + { hex: '#00008b', name: 'DarkBlue' }, + { hex: '#008b8b', name: 'DarkCyan' }, + { hex: '#b8860b', name: 'DarkGoldenRod' }, + { hex: '#a9a9a9', name: 'DarkGray' }, + { hex: '#a9a9a9', name: 'DarkGrey' }, + { hex: '#006400', name: 'DarkGreen' }, + { hex: '#bdb76b', name: 'DarkKhaki' }, + { hex: '#8b008b', name: 'DarkMagenta' }, + { hex: '#556b2f', name: 'DarkOliveGreen' }, + { hex: '#ff8c00', name: 'DarkOrange' }, + { hex: '#9932cc', name: 'DarkOrchid' }, + { hex: '#8b0000', name: 'DarkRed' }, + { hex: '#e9967a', name: 'DarkSalmon' }, + { hex: '#8fbc8f', name: 'DarkSeaGreen' }, + { hex: '#483d8b', name: 'DarkSlateBlue' }, + { hex: '#2f4f4f', name: 'DarkSlateGray' }, + { hex: '#2f4f4f', name: 'DarkSlateGrey' }, + { hex: '#00ced1', name: 'DarkTurquoise' }, + { hex: '#9400d3', name: 'DarkViolet' }, + { hex: '#ff1493', name: 'DeepPink' }, + { hex: '#00bfff', name: 'DeepSkyBlue' }, + { hex: '#696969', name: 'DimGray' }, + { hex: '#696969', name: 'DimGrey' }, + { hex: '#1e90ff', name: 'DodgerBlue' }, + { hex: '#b22222', name: 'FireBrick' }, + { hex: '#fffaf0', name: 'FloralWhite' }, + { hex: '#228b22', name: 'ForestGreen' }, + { hex: '#ff00ff', name: 'Fuchsia' }, + { hex: '#dcdcdc', name: 'Gainsboro' }, + { hex: '#f8f8ff', name: 'GhostWhite' }, + { hex: '#ffd700', name: 'Gold' }, + { hex: '#daa520', name: 'GoldenRod' }, + { hex: '#808080', name: 'Gray' }, + { hex: '#808080', name: 'Grey' }, + { hex: '#008000', name: 'Green' }, + { hex: '#adff2f', name: 'GreenYellow' }, + { hex: '#f0fff0', name: 'HoneyDew' }, + { hex: '#ff69b4', name: 'HotPink' }, + { hex: '#cd5c5c', name: 'IndianRed' }, + { hex: '#4b0082', name: 'Indigo' }, + { hex: '#fffff0', name: 'Ivory' }, + { hex: '#f0e68c', name: 'Khaki' }, + { hex: '#e6e6fa', name: 'Lavender' }, + { hex: '#fff0f5', name: 'LavenderBlush' }, + { hex: '#7cfc00', name: 'LawnGreen' }, + { hex: '#fffacd', name: 'LemonChiffon' }, + { hex: '#add8e6', name: 'LightBlue' }, + { hex: '#f08080', name: 'LightCoral' }, + { hex: '#e0ffff', name: 'LightCyan' }, + { hex: '#fafad2', name: 'LightGoldenRodYellow' }, + { hex: '#d3d3d3', name: 'LightGray' }, + { hex: '#d3d3d3', name: 'LightGrey' }, + { hex: '#90ee90', name: 'LightGreen' }, + { hex: '#ffb6c1', name: 'LightPink' }, + { hex: '#ffa07a', name: 'LightSalmon' }, + { hex: '#20b2aa', name: 'LightSeaGreen' }, + { hex: '#87cefa', name: 'LightSkyBlue' }, + { hex: '#778899', name: 'LightSlateGray' }, + { hex: '#778899', name: 'LightSlateGrey' }, + { hex: '#b0c4de', name: 'LightSteelBlue' }, + { hex: '#ffffe0', name: 'LightYellow' }, + { hex: '#00ff00', name: 'Lime' }, + { hex: '#32cd32', name: 'LimeGreen' }, + { hex: '#faf0e6', name: 'Linen' }, + { hex: '#ff00ff', name: 'Magenta' }, + { hex: '#800000', name: 'Maroon' }, + { hex: '#66cdaa', name: 'MediumAquaMarine' }, + { hex: '#0000cd', name: 'MediumBlue' }, + { hex: '#ba55d3', name: 'MediumOrchid' }, + { hex: '#9370db', name: 'MediumPurple' }, + { hex: '#3cb371', name: 'MediumSeaGreen' }, + { hex: '#7b68ee', name: 'MediumSlateBlue' }, + { hex: '#00fa9a', name: 'MediumSpringGreen' }, + { hex: '#48d1cc', name: 'MediumTurquoise' }, + { hex: '#c71585', name: 'MediumVioletRed' }, + { hex: '#191970', name: 'MidnightBlue' }, + { hex: '#f5fffa', name: 'MintCream' }, + { hex: '#ffe4e1', name: 'MistyRose' }, + { hex: '#ffe4b5', name: 'Moccasin' }, + { hex: '#ffdead', name: 'NavajoWhite' }, + { hex: '#000080', name: 'Navy' }, + { hex: '#fdf5e6', name: 'OldLace' }, + { hex: '#808000', name: 'Olive' }, + { hex: '#6b8e23', name: 'OliveDrab' }, + { hex: '#ffa500', name: 'Orange' }, + { hex: '#ff4500', name: 'OrangeRed' }, + { hex: '#da70d6', name: 'Orchid' }, + { hex: '#eee8aa', name: 'PaleGoldenRod' }, + { hex: '#98fb98', name: 'PaleGreen' }, + { hex: '#afeeee', name: 'PaleTurquoise' }, + { hex: '#db7093', name: 'PaleVioletRed' }, + { hex: '#ffefd5', name: 'PapayaWhip' }, + { hex: '#ffdab9', name: 'PeachPuff' }, + { hex: '#cd853f', name: 'Peru' }, + { hex: '#ffc0cb', name: 'Pink' }, + { hex: '#dda0dd', name: 'Plum' }, + { hex: '#b0e0e6', name: 'PowderBlue' }, + { hex: '#800080', name: 'Purple' }, + { hex: '#663399', name: 'RebeccaPurple' }, + { hex: '#ff0000', name: 'Red' }, + { hex: '#bc8f8f', name: 'RosyBrown' }, + { hex: '#4169e1', name: 'RoyalBlue' }, + { hex: '#8b4513', name: 'SaddleBrown' }, + { hex: '#fa8072', name: 'Salmon' }, + { hex: '#f4a460', name: 'SandyBrown' }, + { hex: '#2e8b57', name: 'SeaGreen' }, + { hex: '#fff5ee', name: 'SeaShell' }, + { hex: '#a0522d', name: 'Sienna' }, + { hex: '#c0c0c0', name: 'Silver' }, + { hex: '#87ceeb', name: 'SkyBlue' }, + { hex: '#6a5acd', name: 'SlateBlue' }, + { hex: '#708090', name: 'SlateGray' }, + { hex: '#708090', name: 'SlateGrey' }, + { hex: '#fffafa', name: 'Snow' }, + { hex: '#00ff7f', name: 'SpringGreen' }, + { hex: '#4682b4', name: 'SteelBlue' }, + { hex: '#d2b48c', name: 'Tan' }, + { hex: '#008080', name: 'Teal' }, + { hex: '#d8bfd8', name: 'Thistle' }, + { hex: '#ff6347', name: 'Tomato' }, + { hex: '#40e0d0', name: 'Turquoise' }, + { hex: '#ee82ee', name: 'Violet' }, + { hex: '#f5deb3', name: 'Wheat' }, + { hex: '#ffffff', name: 'White' }, + { hex: '#f5f5f5', name: 'WhiteSmoke' }, + { hex: '#ffff00', name: 'Yellow' }, + { hex: '#9acd32', name: 'YellowGreen' } +]; + +export const colors = data.map(({ hex, name }) => { + // calculate rgb + let r = parseInt(hex.slice(1, 3), 16); + let g = parseInt(hex.slice(3, 5), 16); + let b = parseInt(hex.slice(5, 7), 16); + + const rgb = `rgb(${r} ${g} ${b})`; + + // calculate hsl + r /= 255; + g /= 255; + b /= 255; + + const max = Math.max(r, g, b); + const min = Math.min(r, g, b); + + let h = 0; + let s = 0; + const l = (max + min) / 2; + + if (max > min) { + const d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + + switch (max) { + case r: h = (g - b) / d + (g < b ? 6 : 0); break; + case g: h = (b - r) / d + 2; break; + case b: h = (r - g) / d + 4; break; + } + + h /= 6; + } + + const hsl = `hsl(${Math.round(h * 360)} ${Math.round(s * 100)} ${Math.round(l * 100)})`; + + return { + name, + hex, + rgb, + hsl + }; +}); diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+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 new file mode 100644 index 0000000000..a01300d84f --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-b/src/lib/App.svelte @@ -0,0 +1,81 @@ + + + + +{#snippet header()} +
+ + name + hex + rgb + hsl +
+{/snippet} + +{#snippet row(d)} +
+ + {d.name} + {d.hex} + {d.rgb} + {d.hsl} +
+{/snippet} + + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-b/src/lib/FilteredList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-b/src/lib/FilteredList.svelte new file mode 100644 index 0000000000..42ea57fee2 --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/+assets/app-b/src/lib/FilteredList.svelte @@ -0,0 +1,48 @@ + + +
+ + +
+ {@render header()} +
+ +
+ {#each filtered as d} + {@render row(d)} + {/each} +
+
+ + 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`. From 5d5576e01e9a6de88265d293dcd524e662729fcd Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 18 Oct 2024 12:31:36 -0400 Subject: [PATCH 2/3] add implicit snippet props exercise --- .../02-snippet-parameters/index.md | 3 - .../+assets/app-b/src/lib/App.svelte | 74 +++++++++++++++++++ .../+assets/app-b/src/lib/FilteredList.svelte | 48 ++++++++++++ .../03-implicit-snippet-props/index.md | 67 +++++++++++++++++ 4 files changed, 189 insertions(+), 3 deletions(-) delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-snippet-parameters/index.md create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/03-implicit-snippet-props/+assets/app-b/src/lib/App.svelte create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/03-implicit-snippet-props/+assets/app-b/src/lib/FilteredList.svelte create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/03-implicit-snippet-props/index.md 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/02-snippets/03-implicit-snippet-props/+assets/app-b/src/lib/FilteredList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/03-implicit-snippet-props/+assets/app-b/src/lib/FilteredList.svelte new file mode 100644 index 0000000000..502ac24369 --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/03-implicit-snippet-props/+assets/app-b/src/lib/FilteredList.svelte @@ -0,0 +1,48 @@ + + +
+ + +
+ {@render children()} +
+ +
+ {#each filtered as d} + {@render row(d)} + {/each} +
+
+ + 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()}+++ +
+``` From 13bcaaa2151be897d8560f7c3298e6f329019635 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 18 Oct 2024 12:32:42 -0400 Subject: [PATCH 3/3] remove slot exercises --- .../01-slots/+assets/app-a/src/lib/App.svelte | 18 -- .../+assets/app-a/src/lib/Card.svelte | 41 ---- .../01-slots/+assets/app-a/src/lib/paper.svg | 10 - .../01-slots/+assets/app-a/src/lib/wood.svg | 10 - .../01-slots/+assets/app-b/src/lib/App.svelte | 19 -- .../+assets/app-b/src/lib/Card.svelte | 41 ---- .../07-composition/01-slots/index.md | 30 --- .../+assets/app-a/src/lib/App.svelte | 28 --- .../+assets/app-a/src/lib/Card.svelte | 41 ---- .../+assets/app-a/src/lib/paper.svg | 10 - .../+assets/app-a/src/lib/wood.svg | 10 - .../+assets/app-b/src/lib/App.svelte | 34 --- .../+assets/app-b/src/lib/Card.svelte | 50 ----- .../07-composition/02-named-slots/index.md | 58 ------ .../+assets/app-a/src/lib/App.svelte | 46 ----- .../+assets/app-a/src/lib/Card.svelte | 50 ----- .../+assets/app-a/src/lib/paper.svg | 10 - .../+assets/app-a/src/lib/wood.svg | 10 - .../+assets/app-b/src/lib/Card.svelte | 59 ------ .../07-composition/03-slot-fallbacks/index.md | 30 --- .../+assets/app-a/src/lib/App.svelte | 77 ------- .../app-a/src/lib/FilterableList.svelte | 45 ---- .../+assets/app-a/src/lib/colors.js | 193 ------------------ .../+assets/app-b/src/lib/App.svelte | 80 -------- .../app-b/src/lib/FilterableList.svelte | 45 ---- .../07-composition/04-slot-props/index.md | 53 ----- .../+assets/app-b/src/lib/App.svelte | 72 ------- .../app-b/src/lib/FilterableList.svelte | 47 ----- .../07-composition/05-optional-slots/index.md | 37 ---- .../07-composition/index.md | 5 - 30 files changed, 1259 deletions(-) delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/App.svelte delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/Card.svelte delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/paper.svg delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/wood.svg delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-b/src/lib/App.svelte delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-b/src/lib/Card.svelte delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/index.md delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/App.svelte delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/Card.svelte delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/paper.svg delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/wood.svg delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-b/src/lib/App.svelte delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-b/src/lib/Card.svelte delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/index.md delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-a/src/lib/App.svelte delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-a/src/lib/Card.svelte delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-a/src/lib/paper.svg delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-a/src/lib/wood.svg delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/+assets/app-b/src/lib/Card.svelte delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/index.md delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-a/src/lib/App.svelte delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-a/src/lib/FilterableList.svelte delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-a/src/lib/colors.js delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-b/src/lib/App.svelte delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-b/src/lib/FilterableList.svelte delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/index.md delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/+assets/app-b/src/lib/App.svelte delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/+assets/app-b/src/lib/FilterableList.svelte delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/index.md delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/index.md 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/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-a/src/lib/App.svelte deleted file mode 100644 index 1a7c9c9d58..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-a/src/lib/App.svelte +++ /dev/null @@ -1,77 +0,0 @@ - - - -
- - name - hex - rgb - hsl -
- -
- - {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/04-slot-props/+assets/app-a/src/lib/FilterableList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-a/src/lib/FilterableList.svelte deleted file mode 100644 index 023dc62cd4..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-a/src/lib/FilterableList.svelte +++ /dev/null @@ -1,45 +0,0 @@ - - -
- - -
- -
- -
- {#each data.filter(matches) as item} - - {/each} -
-
- - \ 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/07-composition/04-slot-props/+assets/app-a/src/lib/colors.js deleted file mode 100644 index ea4d1aa614..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-a/src/lib/colors.js +++ /dev/null @@ -1,193 +0,0 @@ -const data = [ - { hex: '#f0f8ff', name: 'AliceBlue' }, - { hex: '#faebd7', name: 'AntiqueWhite' }, - { hex: '#00ffff', name: 'Aqua' }, - { hex: '#7fffd4', name: 'Aquamarine' }, - { hex: '#f0ffff', name: 'Azure' }, - { hex: '#f5f5dc', name: 'Beige' }, - { hex: '#ffe4c4', name: 'Bisque' }, - { hex: '#000000', name: 'Black' }, - { hex: '#ffebcd', name: 'BlanchedAlmond' }, - { hex: '#0000ff', name: 'Blue' }, - { hex: '#8a2be2', name: 'BlueViolet' }, - { hex: '#a52a2a', name: 'Brown' }, - { hex: '#deb887', name: 'BurlyWood' }, - { hex: '#5f9ea0', name: 'CadetBlue' }, - { hex: '#7fff00', name: 'Chartreuse' }, - { hex: '#d2691e', name: 'Chocolate' }, - { hex: '#ff7f50', name: 'Coral' }, - { hex: '#6495ed', name: 'CornflowerBlue' }, - { hex: '#fff8dc', name: 'Cornsilk' }, - { hex: '#dc143c', name: 'Crimson' }, - { hex: '#00ffff', name: 'Cyan' }, - { hex: '#00008b', name: 'DarkBlue' }, - { hex: '#008b8b', name: 'DarkCyan' }, - { hex: '#b8860b', name: 'DarkGoldenRod' }, - { hex: '#a9a9a9', name: 'DarkGray' }, - { hex: '#a9a9a9', name: 'DarkGrey' }, - { hex: '#006400', name: 'DarkGreen' }, - { hex: '#bdb76b', name: 'DarkKhaki' }, - { hex: '#8b008b', name: 'DarkMagenta' }, - { hex: '#556b2f', name: 'DarkOliveGreen' }, - { hex: '#ff8c00', name: 'DarkOrange' }, - { hex: '#9932cc', name: 'DarkOrchid' }, - { hex: '#8b0000', name: 'DarkRed' }, - { hex: '#e9967a', name: 'DarkSalmon' }, - { hex: '#8fbc8f', name: 'DarkSeaGreen' }, - { hex: '#483d8b', name: 'DarkSlateBlue' }, - { hex: '#2f4f4f', name: 'DarkSlateGray' }, - { hex: '#2f4f4f', name: 'DarkSlateGrey' }, - { hex: '#00ced1', name: 'DarkTurquoise' }, - { hex: '#9400d3', name: 'DarkViolet' }, - { hex: '#ff1493', name: 'DeepPink' }, - { hex: '#00bfff', name: 'DeepSkyBlue' }, - { hex: '#696969', name: 'DimGray' }, - { hex: '#696969', name: 'DimGrey' }, - { hex: '#1e90ff', name: 'DodgerBlue' }, - { hex: '#b22222', name: 'FireBrick' }, - { hex: '#fffaf0', name: 'FloralWhite' }, - { hex: '#228b22', name: 'ForestGreen' }, - { hex: '#ff00ff', name: 'Fuchsia' }, - { hex: '#dcdcdc', name: 'Gainsboro' }, - { hex: '#f8f8ff', name: 'GhostWhite' }, - { hex: '#ffd700', name: 'Gold' }, - { hex: '#daa520', name: 'GoldenRod' }, - { hex: '#808080', name: 'Gray' }, - { hex: '#808080', name: 'Grey' }, - { hex: '#008000', name: 'Green' }, - { hex: '#adff2f', name: 'GreenYellow' }, - { hex: '#f0fff0', name: 'HoneyDew' }, - { hex: '#ff69b4', name: 'HotPink' }, - { hex: '#cd5c5c', name: 'IndianRed' }, - { hex: '#4b0082', name: 'Indigo' }, - { hex: '#fffff0', name: 'Ivory' }, - { hex: '#f0e68c', name: 'Khaki' }, - { hex: '#e6e6fa', name: 'Lavender' }, - { hex: '#fff0f5', name: 'LavenderBlush' }, - { hex: '#7cfc00', name: 'LawnGreen' }, - { hex: '#fffacd', name: 'LemonChiffon' }, - { hex: '#add8e6', name: 'LightBlue' }, - { hex: '#f08080', name: 'LightCoral' }, - { hex: '#e0ffff', name: 'LightCyan' }, - { hex: '#fafad2', name: 'LightGoldenRodYellow' }, - { hex: '#d3d3d3', name: 'LightGray' }, - { hex: '#d3d3d3', name: 'LightGrey' }, - { hex: '#90ee90', name: 'LightGreen' }, - { hex: '#ffb6c1', name: 'LightPink' }, - { hex: '#ffa07a', name: 'LightSalmon' }, - { hex: '#20b2aa', name: 'LightSeaGreen' }, - { hex: '#87cefa', name: 'LightSkyBlue' }, - { hex: '#778899', name: 'LightSlateGray' }, - { hex: '#778899', name: 'LightSlateGrey' }, - { hex: '#b0c4de', name: 'LightSteelBlue' }, - { hex: '#ffffe0', name: 'LightYellow' }, - { hex: '#00ff00', name: 'Lime' }, - { hex: '#32cd32', name: 'LimeGreen' }, - { hex: '#faf0e6', name: 'Linen' }, - { hex: '#ff00ff', name: 'Magenta' }, - { hex: '#800000', name: 'Maroon' }, - { hex: '#66cdaa', name: 'MediumAquaMarine' }, - { hex: '#0000cd', name: 'MediumBlue' }, - { hex: '#ba55d3', name: 'MediumOrchid' }, - { hex: '#9370db', name: 'MediumPurple' }, - { hex: '#3cb371', name: 'MediumSeaGreen' }, - { hex: '#7b68ee', name: 'MediumSlateBlue' }, - { hex: '#00fa9a', name: 'MediumSpringGreen' }, - { hex: '#48d1cc', name: 'MediumTurquoise' }, - { hex: '#c71585', name: 'MediumVioletRed' }, - { hex: '#191970', name: 'MidnightBlue' }, - { hex: '#f5fffa', name: 'MintCream' }, - { hex: '#ffe4e1', name: 'MistyRose' }, - { hex: '#ffe4b5', name: 'Moccasin' }, - { hex: '#ffdead', name: 'NavajoWhite' }, - { hex: '#000080', name: 'Navy' }, - { hex: '#fdf5e6', name: 'OldLace' }, - { hex: '#808000', name: 'Olive' }, - { hex: '#6b8e23', name: 'OliveDrab' }, - { hex: '#ffa500', name: 'Orange' }, - { hex: '#ff4500', name: 'OrangeRed' }, - { hex: '#da70d6', name: 'Orchid' }, - { hex: '#eee8aa', name: 'PaleGoldenRod' }, - { hex: '#98fb98', name: 'PaleGreen' }, - { hex: '#afeeee', name: 'PaleTurquoise' }, - { hex: '#db7093', name: 'PaleVioletRed' }, - { hex: '#ffefd5', name: 'PapayaWhip' }, - { hex: '#ffdab9', name: 'PeachPuff' }, - { hex: '#cd853f', name: 'Peru' }, - { hex: '#ffc0cb', name: 'Pink' }, - { hex: '#dda0dd', name: 'Plum' }, - { hex: '#b0e0e6', name: 'PowderBlue' }, - { hex: '#800080', name: 'Purple' }, - { hex: '#663399', name: 'RebeccaPurple' }, - { hex: '#ff0000', name: 'Red' }, - { hex: '#bc8f8f', name: 'RosyBrown' }, - { hex: '#4169e1', name: 'RoyalBlue' }, - { hex: '#8b4513', name: 'SaddleBrown' }, - { hex: '#fa8072', name: 'Salmon' }, - { hex: '#f4a460', name: 'SandyBrown' }, - { hex: '#2e8b57', name: 'SeaGreen' }, - { hex: '#fff5ee', name: 'SeaShell' }, - { hex: '#a0522d', name: 'Sienna' }, - { hex: '#c0c0c0', name: 'Silver' }, - { hex: '#87ceeb', name: 'SkyBlue' }, - { hex: '#6a5acd', name: 'SlateBlue' }, - { hex: '#708090', name: 'SlateGray' }, - { hex: '#708090', name: 'SlateGrey' }, - { hex: '#fffafa', name: 'Snow' }, - { hex: '#00ff7f', name: 'SpringGreen' }, - { hex: '#4682b4', name: 'SteelBlue' }, - { hex: '#d2b48c', name: 'Tan' }, - { hex: '#008080', name: 'Teal' }, - { hex: '#d8bfd8', name: 'Thistle' }, - { hex: '#ff6347', name: 'Tomato' }, - { hex: '#40e0d0', name: 'Turquoise' }, - { hex: '#ee82ee', name: 'Violet' }, - { hex: '#f5deb3', name: 'Wheat' }, - { hex: '#ffffff', name: 'White' }, - { hex: '#f5f5f5', name: 'WhiteSmoke' }, - { hex: '#ffff00', name: 'Yellow' }, - { hex: '#9acd32', name: 'YellowGreen' } -]; - -export const colors = data.map(({ hex, name }) => { - // calculate rgb - let r = parseInt(hex.slice(1, 3), 16); - let g = parseInt(hex.slice(3, 5), 16); - let b = parseInt(hex.slice(5, 7), 16); - - const rgb = `rgb(${r}, ${g}, ${b})`; - - // calculate hsl - r /= 255; - g /= 255; - b /= 255; - - const max = Math.max(r, g, b); - const min = Math.min(r, g, b); - - let h = 0; - let s = 0; - const l = (max + min) / 2; - - if (max > min) { - const d = max - min; - s = l > 0.5 ? d / (2 - max - min) : d / (max + min); - - switch (max) { - case r: h = (g - b) / d + (g < b ? 6 : 0); break; - case g: h = (b - r) / d + 2; break; - case b: h = (r - g) / d + 4; break; - } - - h /= 6; - } - - const hsl = `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`; - - return { - name, - hex, - 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/07-composition/04-slot-props/+assets/app-b/src/lib/App.svelte deleted file mode 100644 index 34c173fff0..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-b/src/lib/App.svelte +++ /dev/null @@ -1,80 +0,0 @@ - - - -
- - name - hex - rgb - hsl -
- -
- - {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/04-slot-props/+assets/app-b/src/lib/FilterableList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-b/src/lib/FilterableList.svelte deleted file mode 100644 index 3496c3063c..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/+assets/app-b/src/lib/FilterableList.svelte +++ /dev/null @@ -1,45 +0,0 @@ - - -
- - -
- -
- -
- {#each data.filter(matches) as item} - - {/each} -
-
- - \ No newline at end of file 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/+assets/app-b/src/lib/FilterableList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/+assets/app-b/src/lib/FilterableList.svelte deleted file mode 100644 index 55f0c00fed..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/+assets/app-b/src/lib/FilterableList.svelte +++ /dev/null @@ -1,47 +0,0 @@ - - -
- - - {#if $$slots.header} -
- -
- {/if} - -
- {#each data.filter(matches) as item} - - {/each} -
-
- - \ 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 ----