From a178aa0b1f678e9dc0c824c55d0bcd51cdb35caa Mon Sep 17 00:00:00 2001
From: Henry Blyth <blyth.henry@gmail.com>
Date: Sun, 1 Dec 2019 16:16:51 +0000
Subject: [PATCH] Include examples of if/else around text nodes

Where if/else isn't the lesson being taught, in some cases show how it
can be wrapped around text nodes. This is to teach users about Svelte's
template compilation whilst not obfuscating the lessons.
---
 site/content/docs/02-template-syntax.md        | 18 +++++++++++-------
 .../tutorial/04-logic/02-else-blocks/text.md   |  9 ++++++++-
 .../04-group-inputs/app-a/App.svelte           | 16 ++++++++--------
 .../04-group-inputs/app-b/App.svelte           | 16 ++++++++--------
 .../app-a/App.svelte                           | 16 ++++++++--------
 .../app-b/App.svelte                           | 16 ++++++++--------
 6 files changed, 51 insertions(+), 40 deletions(-)

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index aeabeb7a51..363bbac6e4 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -193,15 +193,19 @@ Content that is conditionally rendered can be wrapped in an if block.
 Additional conditions can be added with `{:else if expression}`, optionally ending in an `{:else}` clause.
 
 ```sv
-{#if porridge.temperature > 100}
-	<p>too hot!</p>
-{:else if 80 > porridge.temperature}
-	<p>too cold!</p>
-{:else}
-	<p>just right!</p>
-{/if}
+<p>
+	{#if porridge.temperature > 100}
+		too hot!
+	{:else if 80 > porridge.temperature}
+		too cold!
+	{:else}
+		just right!
+	{/if}
+</p>
 ```
 
+(Blocks don't have to wrap elements, they can also wrap text within elements!)
+
 
 ### {#each ...}
 
diff --git a/site/content/tutorial/04-logic/02-else-blocks/text.md b/site/content/tutorial/04-logic/02-else-blocks/text.md
index d25a7d3897..2c494704bc 100644
--- a/site/content/tutorial/04-logic/02-else-blocks/text.md
+++ b/site/content/tutorial/04-logic/02-else-blocks/text.md
@@ -16,4 +16,11 @@ Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are
 {/if}
 ```
 
-> A `#` character always indicates a *block opening* tag. A `/` character always indicates a *block closing* tag. A `:` character, as in `{:else}`, indicates a *block continuation* tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML.
\ No newline at end of file
+> A `#` character always indicates a *block opening* tag. A `/` character always indicates a *block closing* tag. A `:` character, as in `{:else}`, indicates a *block continuation* tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML.
+
+Svelte is really good at surgically updating only the parts of the DOM that need changing, including text nodes. However, it does not optimise common code in if/else blocks like this, so the `<button>` element will be replaced whenever the condition is changed. To further improve this example, we can wrap just the text:
+```html
+<button on:click="{toggle}">
+	Log {#if user.loggedIn}out{:else}in{/if}
+</button>
+```
diff --git a/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
index 3a29f89484..31677a6d0a 100644
--- a/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
+++ b/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
@@ -42,13 +42,13 @@
 	Raspberry ripple
 </label>
 
-{#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
-{:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
-{:else}
-	<p>
+<p>
+	{#if flavours.length === 0}
+		Please select at least one flavour
+	{:else if flavours.length > scoops}
+		Can't order more flavours than scoops!
+	{:else}
 		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
 		of {join(flavours)}
-	</p>
-{/if}
\ No newline at end of file
+	{/if}
+</p>
diff --git a/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
index d97db41f0b..f1f98be382 100644
--- a/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
+++ b/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
@@ -40,13 +40,13 @@
 	</label>
 {/each}
 
-{#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
-{:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
-{:else}
-	<p>
+<p>
+	{#if flavours.length === 0}
+		Please select at least one flavour
+	{:else if flavours.length > scoops}
+		Can't order more flavours than scoops!
+	{:else}
 		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
 		of {join(flavours)}
-	</p>
-{/if}
\ No newline at end of file
+	{/if}
+</p>
diff --git a/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte b/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
index a46c61c7e7..a36010a0bc 100644
--- a/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
+++ b/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
@@ -40,13 +40,13 @@
 	</label>
 {/each}
 
-{#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
-{:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
-{:else}
-	<p>
+<p>
+	{#if flavours.length === 0}
+		Please select at least one flavour
+	{:else if flavours.length > scoops}
+		Can't order more flavours than scoops!
+	{:else}
 		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
 		of {join(flavours)}
-	</p>
-{/if}
+	{/if}
+</p>
diff --git a/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte b/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
index d808850158..21320c87a7 100644
--- a/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
+++ b/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
@@ -41,13 +41,13 @@
 	{/each}
 </select>
 
-{#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
-{:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
-{:else}
-	<p>
+<p>
+	{#if flavours.length === 0}
+		Please select at least one flavour
+	{:else if flavours.length > scoops}
+		Can't order more flavours than scoops!
+	{:else}
 		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
 		of {join(flavours)}
-	</p>
-{/if}
+	{/if}
+</p>