Merge pull request #43 from tomoam/update-up-to-20230522

2023/05/22 迄の更新に追従

Author: tomoam

content/tutorial/01-svelte/05-events/04-component-events/README.md

@@ -28,4 +28,4 @@ title: Component events
 <Inner +++on:message={handleMessage}+++ />
 ```
 
-> イベント名を他のものに変更してみることもできます。例えば、`Inner.svelte` の `dispatch('message')` を `dispatch('greet')` に変更し、`App.svelte` の属性名を `on:message` から `on:greet` に変更します。
+> イベント名を別の名前に変更してみることもできます。例えば、`Inner.svelte` の `dispatch('message', {...})` を `dispatch('greet', {...})` に変更し、`App.svelte` の属性名を `on:message` から `on:greet` に変更します。

content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/README.md

@@ -4,7 +4,7 @@ title: Key blocks
 
 Key ブロックは、式の値が変更されたときにその中身を破棄して再作成します。これは、要素がDOMに出入りしたときだけでなく、値が変化したときにトランジションしたい場合に便利です。
 
-ここでは例えば、`transition.js` の `typewriter` トランジションを、ローディングメッセージが変わる度に再生させたいと思います。`<p>` 要素を key ブロックで囲みます。
+ここでは例えば、`transition.js` の `typewriter` トランジションを、ローディングメッセージが変わる度に、つまり `i` が変わる度に再生させたいと思います。`<p>` 要素を key ブロックで囲みます。
 
 ```svelte
 /// file: App.svelte

content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/README.md

@@ -4,13 +4,13 @@ title: Media elements
 
 `<audio>` 要素と `<video>` 要素のプロパティをバインドすることができるので、(例えば) `AudioPlayer.svelte` のようなカスタムのプレーヤー UI をとても簡単に作ることができます。
 
-最初に、`<audio>` 要素とそのバインディングを追加します (`duration` と `paused` は短縮形を使います):
+最初に、`<audio>` 要素とそのバインディングを追加します (`src` と `duration` と `paused` は短縮形を使います):
 
 ```svelte
 /// file: AudioPlayer.svelte
 <div class="player" class:paused>
 +++	<audio
-		src={src}
+		{src}
 		bind:currentTime={time}
 		bind:duration
 		bind:paused
@@ -53,7 +53,7 @@ function seek(e) {
 ```svelte
 /// file: AudioPlayer.svelte
 <audio
-	src={src}
+	{src}
 	bind:currentTime={time}
 	bind:duration
 	bind:paused

content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/app-b/src/lib/AudioPlayer.svelte

@@ -19,7 +19,7 @@
 
 <div class="player" class:paused>
 	<audio
-		src={src}
+		{src}
 		bind:currentTime={time}
 		bind:duration
 		bind:paused

content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/README.md

@@ -7,7 +7,8 @@ title: Dimensions
 ```svelte
 /// file: App.svelte
 <div +++bind:clientWidth={w} bind:clientHeight={h}+++>
-	<span style="font-size: {size}px">{text}</span>
+	<span style="font-size: {size}px" contenteditable>{text}</span>
+	<span class="size">{w} x {h}px</span>
 </div>
 ```
 

content/tutorial/common/src/app.html

@@ -19,8 +19,10 @@
 				--link-hover: hsl(208, 77%, 55%);
 				--link-active: hsl(208, 77%, 40%);
 				--border-radius: 4px;
-				--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-				--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+				--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+					'Open Sans', 'Helvetica Neue', sans-serif;
+				--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
+					'DejaVu Sans Mono', monospace;
 				background: var(--bg-1);
 				color: var(--fg-1);
 				font-family: var(--font);
@@ -107,14 +109,17 @@
 				opacity: 0.4;
 			}
 
-			input, textarea, select {
+			input,
+			textarea,
+			select {
 				padding: 0.5rem;
 				border: 1px solid var(--bg-2);
 				border-radius: var(--border-radius);
 				box-sizing: border-box;
 			}
 
-			input, textarea {
+			input,
+			textarea {
 				background: var(--bg-1);
 			}
 
@@ -160,7 +165,7 @@
 				text-decoration: none;
 			}
 
-			nav a[aria-current="true"] {
+			nav a[aria-current='true'] {
 				border-bottom: 2px solid;
 			}
 
@@ -208,7 +213,7 @@
 				border-radius: 5px;
 				user-select: none;
 				background: var(--bg-1);
-				filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.1));
+				filter: drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.1));
 				transition: filter 0.2s, opacity 0.2s;
 			}
 
@@ -236,22 +241,27 @@
 				opacity: 1;
 			}
 
-			@media (prefers-color-scheme: dark) {
-				body {
-					--bg-1: hsl(0, 0%, 18%);
-					--bg-2: hsl(0, 0%, 30%);
-					--bg-3: hsl(0, 0%, 40%);
-					--fg-1: hsl(0, 0%, 90%);
-					--fg-2: hsl(0, 0%, 70%);
-					--fg-3: hsl(0, 0%, 60%);
-					--link: hsl(206, 96%, 72%);
-					--link-hover: hsl(206, 96%, 78%);
-					--link-active: hsl(206, 96%, 64%);
-				}
+			body.dark {
+				--bg-1: hsl(0, 0%, 18%);
+				--bg-2: hsl(0, 0%, 30%);
+				--bg-3: hsl(0, 0%, 40%);
+				--fg-1: hsl(0, 0%, 90%);
+				--fg-2: hsl(0, 0%, 70%);
+				--fg-3: hsl(0, 0%, 60%);
+				--link: hsl(206, 96%, 72%);
+				--link-hover: hsl(206, 96%, 78%);
+				--link-active: hsl(206, 96%, 64%);
 			}
 		</style>
 	</head>
 	<body>
 		<div style="display: contents">%sveltekit.body%</div>
+
+		<script>
+			const theme = new URL(window.location).searchParams.get('theme');
+
+			document.body.classList.remove('light', 'dark');
+			document.body.classList.add(theme || 'light');
+		</script>
 	</body>
 </html>

jsconfig.json

@@ -6,7 +6,7 @@
 		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,
 		"lib": ["es2020", "DOM"],
-		"moduleResolution": "node",
+		"moduleResolution": "bundler",
 		"module": "es2022",
 		"resolveJsonModule": true,
 		"skipLibCheck": true,

package.json

@@ -16,7 +16,7 @@
 		"@playwright/test": "^1.31.2",
 		"@sveltejs/adapter-vercel": "2.3.1",
 		"@sveltejs/kit": "^1.15.4",
-		"@sveltejs/site-kit": "^4.0.1",
+		"@sveltejs/site-kit": "^5.0.4",
 		"@types/diff": "^5.0.2",
 		"@types/marked": "^4.0.8",
 		"@types/prismjs": "^1.26.0",