From 2517e537e5f93809fc1f5d2c124b135840a8dc74 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 ++++++++-
 .../03-checkbox-inputs/app-a/App.svelte        | 14 ++++++++------
 .../03-checkbox-inputs/app-b/App.svelte        | 14 ++++++++------
 .../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 ++++++++--------
 8 files changed, 67 insertions(+), 52 deletions(-)

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index 89506753d6..ac2c618075 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -167,15 +167,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.
 
 ```html
-{#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/03-checkbox-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte
index 2847dad485..8415c5c8ef 100644
--- a/site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte
+++ b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte
@@ -7,12 +7,14 @@
 	Yes! Send me regular email spam
 </label>
 
-{#if yes}
-	<p>Thank you. We will bombard your inbox and sell your personal details.</p>
-{:else}
-	<p>You must opt in to continue. If you're not paying, you're the product.</p>
-{/if}
+<p>
+	{#if yes}
+		Thank you. We will bombard your inbox and sell your personal details.
+	{:else}
+		You must opt in to continue. If you're not paying, you're the product.
+	{/if}
+</p>
 
 <button disabled={!yes}>
 	Subscribe
-</button>
\ No newline at end of file
+</button>
diff --git a/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
index b82d31e783..36376b7fe9 100644
--- a/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
+++ b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
@@ -7,12 +7,14 @@
 	Yes! Send me regular email spam
 </label>
 
-{#if yes}
-	<p>Thank you. We will bombard your inbox and sell your personal details.</p>
-{:else}
-	<p>You must opt in to continue. If you're not paying, you're the product.</p>
-{/if}
+<p>
+	{#if yes}
+		Thank you. We will bombard your inbox and sell your personal details.
+	{:else}
+		You must opt in to continue. If you're not paying, you're the product.
+	{/if}
+</p>
 
 <button disabled={!yes}>
 	Subscribe
-</button>
\ No newline at end of file
+</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 5ea04f4e95..13732e5671 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}
+	{/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 a46c61c7e7..a36010a0bc 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}
+	{/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>