Skip to content

more tutorial stuff #454

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 18, 2024
Merged

more tutorial stuff #454

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9fc3835
add snippet exercise
Rich-Harris Oct 18, 2024
5d5576e
add implicit snippet props exercise
Rich-Harris Oct 18, 2024
13bcaaa
remove slot exercises
Rich-Harris Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions ...nt/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ Before we can use the snippet for the rest of our monkeys, we need to pass data
</tbody>
```

> [!NOTE] You can also use destructured parameters, if you like.

Add the rest of the monkeys:

- `'🙈', 'see no evil'`
Expand Down
38 changes: 20 additions & 18 deletions ...ot-props/+assets/app-a/src/lib/App.svelte → ...snippets/+assets/app-a/src/lib/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,35 @@
<script>
import FilterableList from './FilterableList.svelte';
import { colors } from './colors.js';

let row = colors[0];
import FilteredList from './FilteredList.svelte';
import { colors } from './data.js';
</script>

<FilterableList
<FilteredList
data={colors}
field="name"
>
<header slot="header" class="row">
></FilteredList>

{#snippet header()}
<header>
<span class="color"></span>
<span class="name">name</span>
<span class="hex">hex</span>
<span class="rgb">rgb</span>
<span class="hsl">hsl</span>
</header>
{/snippet}

{#snippet row(d)}
<div class="row">
<span class="color" style="background-color: {row.hex}"></span>
<span class="name">{row.name}</span>
<span class="hex">{row.hex}</span>
<span class="rgb">{row.rgb}</span>
<span class="hsl">{row.hsl}</span>
<span class="color" style="background-color: {d.hex}"></span>
<span class="name">{d.name}</span>
<span class="hex">{d.hex}</span>
<span class="rgb">{d.rgb}</span>
<span class="hsl">{d.hsl}</span>
</div>
</FilterableList>
{/snippet}

<style>
.row {
header, .row {
display: grid;
align-items: center;
grid-template-columns: 2em 4fr 3fr;
Expand All @@ -41,7 +43,7 @@
font-weight: bold;
}

.row:not(header):hover {
.row:hover {
background: var(--bg-2);
}

Expand All @@ -56,7 +58,7 @@
}

@media (min-width: 40rem) {
.row {
header, .row {
grid-template-columns: 2em 4fr 3fr 3fr;
}

Expand All @@ -66,12 +68,12 @@
}

@media (min-width: 60rem) {
.row {
header, .row {
grid-template-columns: 2em 4fr 3fr 3fr 3fr;
}

.hsl {
display: block;
}
}
</style>
</style>
23 changes: 13 additions & 10 deletions ...ssets/app-b/src/lib/FilterableList.svelte → ...+assets/app-a/src/lib/FilteredList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
<script>
export let data;
export let field;
let { data, field } = $props();

let search = '';
let search = $state('');

$: regex = search ? new RegExp(search, 'i') : null;
$: matches = (item) => regex ? regex.test(item[field]) : true;
let filtered = $derived.by(() => {
if (search === '') return data;

const regex = new RegExp(search, 'i');
return data.filter((d) => regex.test(d[field]));
});
</script>

<div class="list">
Expand All @@ -14,12 +17,12 @@
</label>

<div class="header">
<slot name="header"/>
<p>TODO add header</p>
</div>

<div class="content">
{#each data.filter(matches) as item}
<slot {item} />
{#each filtered as d}
<p>TODO add row</p>
{/each}
</div>
</div>
Expand All @@ -42,4 +45,4 @@
padding-top: 0.5em;
border-top: 1px solid var(--bg-2);
}
</style>
</style>
6 changes: 3 additions & 3 deletions ...lot-props/+assets/app-a/src/lib/colors.js → ...ng-snippets/+assets/app-a/src/lib/data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -182,12 +182,12 @@ 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,
hex,
rgb,
hsl
};
});
});
41 changes: 21 additions & 20 deletions ...ot-props/+assets/app-b/src/lib/App.svelte → ...snippets/+assets/app-b/src/lib/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,37 @@
<script>
import FilterableList from './FilterableList.svelte';
import { colors } from './colors.js';
import FilteredList from './FilteredList.svelte';
import { colors } from './data.js';
</script>

<FilterableList
<FilteredList
data={colors}
field="name"
let:item={row}
>
<header slot="header" class="row">
{header}
{row}
></FilteredList>

{#snippet header()}
<header>
<span class="color"></span>
<span class="name">name</span>
<span class="hex">hex</span>
<span class="rgb">rgb</span>
<span class="hsl">hsl</span>
</header>
{/snippet}

{#snippet row(d)}
<div class="row">
<span class="color" style="background-color: {row.hex}"></span>
<span class="name">{row.name}</span>
<span class="hex">{row.hex}</span>
<span class="rgb">{row.rgb}</span>
<span class="hsl">{row.hsl}</span>
<span class="color" style="background-color: {d.hex}"></span>
<span class="name">{d.name}</span>
<span class="hex">{d.hex}</span>
<span class="rgb">{d.rgb}</span>
<span class="hsl">{d.hsl}</span>
</div>
</FilterableList>
{/snippet}

<style>
.row {
header, .row {
display: grid;
align-items: center;
grid-template-columns: 2em 4fr 3fr;
Expand All @@ -40,10 +45,6 @@
font-weight: bold;
}

.row:not(header):hover {
background: var(--bg-2);
}

.row:hover {
background: var(--bg-2);
}
Expand All @@ -59,7 +60,7 @@
}

@media (min-width: 40rem) {
.row {
header, .row {
grid-template-columns: 2em 4fr 3fr 3fr;
}

Expand All @@ -69,12 +70,12 @@
}

@media (min-width: 60rem) {
.row {
header, .row {
grid-template-columns: 2em 4fr 3fr 3fr 3fr;
}

.hsl {
display: block;
}
}
</style>
</style>
23 changes: 13 additions & 10 deletions ...ssets/app-a/src/lib/FilterableList.svelte → ...+assets/app-b/src/lib/FilteredList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
<script>
export let data;
export let field;
let { data, field, header, row } = $props();

let search = '';
let search = $state('');

$: regex = search ? new RegExp(search, 'i') : null;
$: matches = (item) => regex ? regex.test(item[field]) : true;
let filtered = $derived.by(() => {
if (search === '') return data;

const regex = new RegExp(search, 'i');
return data.filter((d) => regex.test(d[field]));
});
</script>

<div class="list">
Expand All @@ -14,12 +17,12 @@
</label>

<div class="header">
<slot name="header"/>
{@render header()}
</div>

<div class="content">
{#each data.filter(matches) as item}
<slot />
{#each filtered as d}
{@render row(d)}
{/each}
</div>
</div>
Expand All @@ -42,4 +45,4 @@
padding-top: 0.5em;
border-top: 1px solid var(--bg-2);
}
</style>
</style>
47 changes: 47 additions & 0 deletions ...ev/content/tutorial/02-advanced-svelte/02-snippets/02-passing-snippets/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 `<FilteredList>` 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 `<FilteredList>`:

```svelte
/// file: App.svelte
<FilteredList
data={colors}
field="name"
+++{header}+++
+++{row}+++
></FilteredList>
```

Then, on the other side, declare `header` and `row` as props:

```svelte
/// file: FilteredList.svelte
<script>
let { data, field, +++header, row+++ } = $props();

// ...
</script>
```

Finally, replace the placeholder content with render tags:

```svelte
/// file: FilteredList.svelte
<div class="header">
+++{@render header()}+++
</div>

<div class="content">
{#each filtered as d}
+++{@render row(d)}+++
{/each}
</div>
```

Never again will you have to memorize the hex code for `MistyRose` or `PeachPuff`.
3 changes: 0 additions & 3 deletions .../content/tutorial/02-advanced-svelte/02-snippets/02-snippet-parameters/index.md
View file
Open in desktop

This file was deleted.

Loading
Loading