From 5916531bb96b5fb641722d29e950c903210ed160 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 17 Oct 2024 18:15:25 -0400 Subject: [PATCH 1/3] note --- .../01-advanced-reactivity/02-reactive-classes/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/02-reactive-classes/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/02-reactive-classes/index.md index b6fbd60601..b6d26710a8 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/02-reactive-classes/index.md +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/02-reactive-classes/index.md @@ -31,3 +31,5 @@ class Box { // ... } ``` + +> [!NOTE] In addition to `$state` and `$derived`, you can use `$state.raw` and `$derived.by` to define reactive fields. From d95c3df52074596bd0f931694f5b0f2cbb6712b1 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 18 Oct 2024 09:04:34 -0400 Subject: [PATCH 2/3] snippet placeholder --- .../+assets/app-a/src/lib/App.svelte | 0 .../02-snippets/01-snippets-and-render-tags/index.md | 5 +++++ .../02-snippets/02-snippet-parameters/index.md | 3 +++ .../content/tutorial/02-advanced-svelte/02-snippets/index.md | 5 +++++ 4 files changed, 13 insertions(+) create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/+assets/app-a/src/lib/App.svelte create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/index.md create 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/index.md diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/+assets/app-a/src/lib/App.svelte new file mode 100644 index 0000000000..e69de29bb2 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 new file mode 100644 index 0000000000..e860f9c78d --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/index.md @@ -0,0 +1,5 @@ +--- +title: Snippets and render tags +--- + +TODO 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 new file mode 100644 index 0000000000..db3c605526 --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/02-snippet-parameters/index.md @@ -0,0 +1,3 @@ +--- +title: Snippet parameters +--- diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/index.md new file mode 100644 index 0000000000..9ec81e4f90 --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/index.md @@ -0,0 +1,5 @@ +--- +title: Reusing content +scope: { 'prefix': '/src/lib/', 'name': 'src' } +focus: /src/lib/App.svelte +--- From add3c1b012fd36626f22030493f5dcc3f491842c Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 18 Oct 2024 10:54:10 -0400 Subject: [PATCH 3/3] add snippet exercise --- .../+assets/app-a/src/lib/App.svelte | 35 +++++++++++ .../+assets/app-b/src/lib/App.svelte | 36 +++++++++++ .../01-snippets-and-render-tags/index.md | 60 ++++++++++++++++++- 3 files changed, 130 insertions(+), 1 deletion(-) create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/+assets/app-b/src/lib/App.svelte diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/+assets/app-a/src/lib/App.svelte index e69de29bb2..de8fb4b1b8 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/+assets/app-a/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/+assets/app-a/src/lib/App.svelte @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + +
emojidescriptionunicode escape sequencehtml entity
{emoji}{description}\u{emoji.charCodeAt(0).toString(16)}\u{emoji.charCodeAt(1).toString(16)}&#{emoji.codePointAt(0)}
+ + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/+assets/app-b/src/lib/App.svelte new file mode 100644 index 0000000000..e0786c4420 --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-snippets/01-snippets-and-render-tags/+assets/app-b/src/lib/App.svelte @@ -0,0 +1,36 @@ + + + + + + + + + + + + {#snippet monkey(emoji, description)} + + + + + + + {/snippet} + + {@render monkey('🙈', 'see no evil')} + {@render monkey('🙉', 'hear no evil')} + {@render monkey('🙊', 'speak no evil')} + +
emojidescriptionunicode escape sequencehtml entity
{emoji}{description}\u{emoji.charCodeAt(0).toString(16)}\u{emoji.charCodeAt(1).toString(16)}&#{emoji.codePointAt(0)}
+ + 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 e860f9c78d..227b9a6bc6 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 @@ -2,4 +2,62 @@ title: Snippets and render tags --- -TODO +Snippets allow you to reuse content within a component, without extracting it out into a separate file. + +In this exercise, we're creating a table of the [three wise monkeys](https://en.wikipedia.org/wiki/Three_wise_monkeys), along with their unicode escape sequences and HTML entities. So far, we have but a single monkey. + +We could duplicate the markup, of course. Or we could create an array of `{ emoji, description }` objects and pass it into an `{#each ...}` block. But a neater solution is to encapsulate the markup in a reusable block. + +Begin by _declaring a snippet_: + +```svelte +/// file: App.svelte ++++{#snippet monkey()}+++ + + {emoji} + see no evil + \u{emoji.charCodeAt(0).toString(16)}\u{emoji.charCodeAt(1).toString(16)} + &#{emoji.codePointAt(0)} + ++++{/snippet}+++ +``` + +The monkey is no longer visible until we _render_ it. Let's do that: + +```svelte +/// file: App.svelte + + {#snippet monkey()}...{/snippet} + + +++{@render monkey()}+++ + +``` + +Before we can use the snippet for the rest of our monkeys, we need to pass data into the snippet. Snippets can have zero or more parameters: + +```svelte +/// file: App.svelte + + +++{#snippet monkey(emoji, description)}...{/snippet}+++ + + +++{@render monkey('🙈', 'see no evil')}+++ + +``` + +Add the rest of the monkeys: + +- `'🙈', 'see no evil'` +- `'🙉', 'hear no evil'` +- `'🙊', 'speak no evil'` + +Finally, delete the `--- +``` + +> [!NOTE] Snippets can be declared anywhere in your component, but, like functions, are only visible to render tags in the same 'scope' or a child scope.