Merge pull request #31 from tomoam/update-up-to-20230319

2023/03/19 迄の更新に追従

Author: tomoam

README.md

@@ -25,3 +25,7 @@ The next steps depend on whether you want to run this locally in filesystem mode
 ## Creating new tutorials
 
 Tutorials live inside `content`. Each tutorial consists of a `README.md`, which is the text to the left, and `app-a` and `app-b` folders, which represent the initial and solved state. Files that stay the same can be omitted from `app-b`. Files are marked as deleted in `app-b` if they start with `__delete`. Folders that are marked as deleted in `app-b` if they contain a file named `__delete`.
+
+## Bumping tutorial dependencies
+
+Bump the dependency (for example Svelte) in both the root and the `content/common` `package.json`. In the root do `pnpm i` (to update `pnpm-lock.yaml`), in `content/common` do `npm i` (to update `package-lock.json`). After deployment things might be out of date because Vercel caches things, redeploy without cache in that case.

content/tutorial/01-svelte/05-events/05-event-forwarding/README.md

@@ -30,5 +30,5 @@ DOM イベントとは異なり、コンポーネントのイベントは *バ
 	import Inner from './Inner.svelte';
 </script>
 
-<Inner on:message/>
+<Inner +++on:message+++/>
 ```

content/tutorial/03-advanced-svelte/09-special-elements/01-svelte-self/app-a/src/lib/Folder.svelte

@@ -10,9 +10,7 @@
 	}
 </script>
 
-<span class:expanded on:click={toggle}
-	>{name}</span
->
+<button class:expanded on:click={toggle}>{name}</button>
 
 {#if expanded}
 	<ul>
@@ -29,13 +27,14 @@
 {/if}
 
 <style>
-	span {
+	button {
 		padding: 0 0 0 1.5em;
-		background: url(/tutorial/icons/folder.svg) 0
-			0.1em no-repeat;
+		background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
 		background-size: 1em 1em;
 		font-weight: bold;
 		cursor: pointer;
+		border: none;
+		margin: 0;
 	}
 
 	.expanded {

content/tutorial/03-advanced-svelte/09-special-elements/01-svelte-self/app-b/src/lib/File.svelte

@@ -10,9 +10,7 @@
 	}
 </script>
 
-<span class:expanded on:click={toggle}
-	>{name}</span
->
+<button class:expanded on:click={toggle}>{name}</button>
 
 {#if expanded}
 	<ul>
@@ -29,13 +27,14 @@
 {/if}
 
 <style>
-	span {
+	button {
 		padding: 0 0 0 1.5em;
-		background: url(/tutorial/icons/folder.svg) 0
-			0.1em no-repeat;
+		background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
 		background-size: 1em 1em;
 		font-weight: bold;
 		cursor: pointer;
+		border: none;
+		margin: 0;
 	}
 
 	.expanded {

content/tutorial/03-advanced-svelte/09-special-elements/01-svelte-self/app-b/src/lib/Folder.svelte

@@ -0,0 +1,23 @@
+---
+title: <svelte:element>
+---
+
+どの種類の DOM 要素をレンダリングするのか事前にわからない場合があります。この場合は `<svelte:element>` が便利です。`if` ブロックを何個も並べる代わりに…
+
+```html
+{#if selected === 'h1'}
+	<h1>I'm a h1 tag</h1>
+{:else if selected === 'h3'}
+	<h3>I'm a h3 tag</h3>
+{:else if selected === 'p'}
+	<p>I'm a p tag</p>
+{/if}
+```
+
+…動的なコンポーネントを1つ置きます:
+
+```html
+<svelte:element this={selected}>I'm a {selected} tag</svelte:element>
+```
+
+`this` の値は任意の文字列、または falsy な値です。falsy である場合、要素がレンダリングされません。

content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-element/README.md

@@ -0,0 +1,18 @@
+<script>
+	const options = ['h1', 'h3', 'p'];
+	let selected = options[0];
+</script>
+
+<select bind:value={selected}>
+	{#each options as option}
+		<option value={option}>{option}</option>
+	{/each}
+</select>
+
+{#if selected === 'h1'}
+	<h1>I'm a h1 tag</h1>
+{:else if selected === 'h3'}
+	<h3>I'm a h3 tag</h3>
+{:else if selected === 'p'}
+	<p>I'm a p tag</p>
+{/if}

content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-element/app-a/src/lib/App.svelte

@@ -0,0 +1,12 @@
+<script>
+	const options = ['h1', 'h3', 'p'];
+	let selected = options[0];
+</script>
+
+<select bind:value={selected}>
+	{#each options as option}
+		<option value={option}>{option}</option>
+	{/each}
+</select>
+
+<svelte:element this={selected}>I'm a {selected} tag</svelte:element>