Merge remote-tracking branch 'sveltejs/main' into update-up-to-20240216

Author: tomoam

.github/workflows/node.js.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md

@@ -38,8 +38,9 @@ function addNumber() {
 
 ```js
 /// no-file
+const obj = { foo: { bar: 1 } };
 const foo = obj.foo;
-foo.bar = 'baz';
+foo.bar = 2;
 ```
 
 …`obj.foo.bar` に対するリアクティビティはトリガーされません。もしトリガーしたければ、`obj = obj` を続けて書く必要があります。

content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md

@@ -2,13 +2,18 @@
 title: Keyed each blocks
 ---
 
-デフォルトでは、`each` ブロックの値を変更すると、ブロックの *末尾* にアイテムを追加・削除し、変更された値を更新します。これはあなたが望むものではないかもしれません。
+デフォルトでは、`each` ブロックの値を変更すると、ブロックの *末尾* で DOM ノードが追加・削除され、変更された値が更新されます。これはあなたが期待した動作ではないかもしれません。
 
-説明するより見ていただいたほうがおわかり頂けるでしょう。'Remove first thing' ボタンを何度かクリックして、何が起きるか確認してください。先頭の `<Thing>` コンポーネントは削除されず、 _末尾の_ DOM ノードが削除されます。そして残りの DOM ノードの `name` の値は更新されますが、絵文字は更新されません。この絵文字は、それぞれの `<Thing>` が作成されるときに固定されているのです。
+説明するより見ていただいたほうがおわかり頂けるでしょう。この `<Thing>` コンポーネントでは初期化時に絵文字を定数としてセットしていますが、name は prop として渡されています。
+
+'Remove first thing' ボタンを何回かクリックすると、以下のことが発生します:
+
+1. 一番最後のコンポーネントが削除される
+2. 残りの DOM ノードの `name` の値が更新されるが、絵文字は更新されず、それぞれの `<Thing>` が作成されたときのまま固定されている
 
 代わりに、先頭の `<Thing>` コンポーネントとその DOM ノードだけを削除して、残りには影響を与えないようにしたいと思います。
 
-そのためには、`each` ブロックに一意な識別子 (または"key") を指定します。
+そのためには、`each` ブロックの each イテレーションに一意な識別子 (または"key") を指定します。
 
 ```svelte
 /// file: App.svelte
@@ -17,6 +22,6 @@ title: Keyed each blocks
 {/each}
 ```
 
-ここで、`(thing.id)` は *key* であり、コンポーネントが更新されたときに変更するDOMノードを特定する方法を Svelte に伝えます。
+ここで、`(thing.id)` は _key_ であり、値 (この例では `name`) が更新されたときに何を更新するのか Svelte に指示しています。
 
 > Svelte は内部的に `Map` を使用しているので、どんなオブジェクトでもキーとして使用できます。つまり `(thing.id)` の代わりに `(thing)` を使うことができます。しかし、文字列または数値を使用する方が一般的に安全です。なぜなら、例えばAPIサーバーからの新しいデータで更新する場合に、参照が等しくなくても同一性が持続することを意味するからです。

content/tutorial/01-svelte/05-events/02-inline-handlers/README.md

@@ -20,7 +20,7 @@ title: Inline handlers
 		m = { x: e.clientX, y: e.clientY };
 	}+++}
 >
-	The mouse position is {m.x} x {m.y}
+	The pointer is at {m.x} x {m.y}
 </div>
 ```
 

content/tutorial/01-svelte/05-events/06-dom-event-forwarding/app-a/src/lib/App.svelte

@@ -6,6 +6,7 @@
 	audio.src = horn;
 
 	function handleClick() {
+		audio.load();
 		audio.play();
 	}
 </script>

content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md

@@ -14,7 +14,7 @@ title: onMount
 </script>
 ```
 
-そして、コンポーネントがマウントされるときに実行する関数を追加しましょう:
+そして、コンポーネントがマウントされるときに実行されるコールバックを追加しましょう:
 
 ```svelte
 /// file: App.svelte

content/tutorial/01-svelte/common/src/routes/+error.svelte

@@ -11,7 +11,7 @@
 		code
 		<a
 			target="_blank"
-			href="https://httpstatusdogs.com/{$page.status}"
+			href="https://http.dog/{$page.status}"
 			>{$page.status}</a
 		>
 	</p>

content/tutorial/02-advanced-svelte/01-motion/01-tweens/README.md

@@ -6,7 +6,7 @@ title: Tweens
 
 値を設定して DOM が自動的に更新されるのを見るのは最高です。もっと最高なのは？それらの値を *トゥイーン(Tween)* することです。Svelte には、変化を表すアニメーションを用いたスムーズなユーザーインターフェースを構築するためのツールがあります。
 
-まず `progress` store を `tweened` 値に変更してみましょう。
+まず `progress` store を `tweened` store に変更してみましょう。
 
 ```svelte
 /// file: App.svelte

content/tutorial/02-advanced-svelte/01-motion/02-springs/app-a/src/lib/App.svelte

@@ -11,6 +11,7 @@
 	}}
 	on:mousedown={() => size.set(30)}
 	on:mouseup={() => size.set(10)}
+	role="presentation"
 >
 	<circle
 		cx={$coords.x}

content/tutorial/02-advanced-svelte/01-motion/02-springs/app-b/src/lib/App.svelte

@@ -15,6 +15,7 @@
 	}}
 	on:mousedown={() => size.set(30)}
 	on:mouseup={() => size.set(10)}
+	role="presentation"
 >
 	<circle
 		cx={$coords.x}

content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/app-a/src/lib/App.svelte

@@ -16,10 +16,10 @@
 	<input
 		placeholder="what needs to be done?"
 		on:keydown={(e) => {
-			if (e.key === 'Enter') {
-				todos.add(e.currentTarget.value);
-				e.currentTarget.value = '';
-			}
+			if (e.key !== 'Enter') return;
+
+			todos.add(e.currentTarget.value);
+			e.currentTarget.value = '';
 		}}
 	/>
 

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

@@ -65,7 +65,7 @@ function seek(e) {
 
 `<audio>` と `<video>` のバインディングの完全なセットは以下の通りです — 7つの _読み取り専用(readonly)_ のバインディング…
 
-- `duration` (readonly) — ビデオの総再生時間 (秒単位)
+- `duration` (readonly) — 総再生時間 (秒単位)
 - `buffered` (readonly) — `{start, end}` オブジェクトの配列
 - `seekable` (readonly) — 同上
 - `played` (readonly) — 同上
@@ -75,8 +75,8 @@ function seek(e) {
 
 …と5つの _双方向_ バインディングです:
 
-- `currentTime` — ビデオ内の現在のポイント (秒単位)
-- `playbackRate` — ビデオの再生速度 (`1` が 'normal')
+- `currentTime` — 再生マーカー (playhead) の現在の位置 (秒単位)
+- `playbackRate` — 再生速度を上げるか遅くするか (`1` が 'normal')
 - `paused` — これは自明ですね
 - `volume` — 0 から 1 の値
 - `muted` — boolean で、true はミュートを意味します

content/tutorial/02-advanced-svelte/07-composition/01-slots/README.md

@@ -15,7 +15,7 @@ title: Slots
 
 ```svelte
 /// file: Card.svelte
-<div class="card ">
+<div class="card">
 	+++<slot />+++
 </div>
 ```

content/tutorial/02-advanced-svelte/07-composition/02-named-slots/app-a/src/lib/paper.svg

@@ -27,7 +27,7 @@ title: <svelte:component>
 	{/each}
 </select>
 
-+++<svelte:component this={selected.component}/>+++
++++<svelte:component this={selected.component} />+++
 ```
 
 `this` 値には任意のコンポーネントコンストラクタ、または falsy な値を指定できます。falsy の値を指定した場合、コンポーネントはレンダリングされません。

content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/README.md

@@ -21,6 +21,7 @@ title: Exports
 /// file: App.svelte
 <script>
 	import AudioPlayer, +++{ stopAll }+++ from './AudioPlayer.svelte';
+	import { tracks } from './tracks.js';
 </script>
 ```
 

content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/README.md

@@ -11,7 +11,7 @@
 		code
 		<a
 			target="_blank"
-			href="https://httpstatusdogs.com/{$page.status}"
+			href="https://http.dog/{$page.status}"
 			>{$page.status}</a
 		>
 	</p>

content/tutorial/02-advanced-svelte/common/src/routes/+error.svelte

@@ -7,7 +7,7 @@ path: /blog
 
 1. **ルーティング(Routing)** — 受け取ったリクエストにどのルートがマッチするかを判断する
 2. **ローディング(Loading)** — ルートが必要とするデータを取得する
-3. **レンダリング(Rendering)** - (サーバー上で) HTML を生成する、または (ブラウザで) DOMを更新する
+3. **レンダリング(Rendering)** — (サーバー上で) HTML を生成する、または (ブラウザで) DOMを更新する
 
 これまで、ルーティングとレンダリングがどのように動作するか見てきました。ここではその中間のローディングについて説明します。
 

content/tutorial/03-sveltekit/03-loading-data/01-page-data/README.md

@@ -12,7 +12,7 @@ export function load(+++{ cookies }+++) {
 	+++const visited = cookies.get('visited');+++
 
 	return {
-		visited
+		visited: visited === 'true'
 	};
 }
 ```
@@ -27,7 +27,7 @@ export function load({ cookies }) {
 	+++cookies.set('visited', 'true', { path: '/' });+++
 
 	return {
-		visited
+		visited: visited === 'true'
 	};
 }
 ```

content/tutorial/03-sveltekit/04-headers-and-cookies/02-cookies/README.md

@@ -1,7 +1,7 @@
 export function load() {
-	const visited = false;
+	const visited = 'false';
 
 	return {
-		visited
+		visited: visited === 'true'
 	};
 }

content/tutorial/03-sveltekit/04-headers-and-cookies/02-cookies/app-a/src/routes/+page.server.js

@@ -2,7 +2,7 @@
 title: The <form> element
 ---
 
-[Loading Data の章](page-data)では、データをサーバーからブラウザに取得してくる方法を見てきました。時には、その逆方向にデータを送信する必要があります。そこで、web プラットフォームにおけるデータ送信方法である `<form>` の登場です。
+[loading data](page-data) の章では、データをサーバーからブラウザに取得してくる方法を見てきました。時には、その逆方向にデータを送信する必要があります。そこで、web プラットフォームにおけるデータ送信方法である `<form>` の登場です。
 
 todo アプリを作ってみましょう。すでに `src/lib/server/database.js` にセットアップ済みのインメモリデータベースがあり、`src/routes/+page.server.js` の `load` 関数で [`cookies`](https://kit.svelte.jp/docs/load#cookies) API を使用しているためユーザーごとの todo リストを持つことができるようになっています。ここでは新しい todo を作成するための `<form>` を追加する必要があります。
 

content/tutorial/03-sveltekit/06-forms/01-the-form-element/README.md

@@ -1,13 +1,14 @@
 import * as db from '$lib/server/database.js';
 
 export function load({ cookies }) {
-	const id = cookies.get('userid');
+	let id = cookies.get('userid');
 
 	if (!id) {
-		cookies.set('userid', crypto.randomUUID(), { path: '/' });
+		id = crypto.randomUUID();
+		cookies.set('userid', id, { path: '/' });
 	}
 
 	return {
-		todos: db.getTodos(id) ?? []
+		todos: db.getTodos(id)
 	};
 }

content/tutorial/03-sveltekit/06-forms/01-the-form-element/app-a/src/routes/+page.server.js

@@ -1,14 +1,15 @@
 import * as db from '$lib/server/database.js';
 
 export function load({ cookies }) {
-	const id = cookies.get('userid');
+	let id = cookies.get('userid');
 
 	if (!id) {
-		cookies.set('userid', crypto.randomUUID(), { path: '/' });
+		id = crypto.randomUUID();
+		cookies.set('userid', id, { path: '/' });
 	}
 
 	return {
-		todos: db.getTodos(id) ?? []
+		todos: db.getTodos(id)
 	};
 }
 

content/tutorial/03-sveltekit/06-forms/01-the-form-element/app-b/src/routes/+page.server.js

@@ -1,14 +1,15 @@
 import * as db from '$lib/server/database.js';
 
 export function load({ cookies }) {
-	const id = cookies.get('userid');
+	let id = cookies.get('userid');
 
 	if (!id) {
-		cookies.set('userid', crypto.randomUUID(), { path: '/' });
+		id = crypto.randomUUID();
+		cookies.set('userid', id, { path: '/' });
 	}
 
 	return {
-		todos: db.getTodos(id) ?? []
+		todos: db.getTodos(id)
 	};
 }
 

content/tutorial/03-sveltekit/06-forms/02-named-form-actions/app-b/src/routes/+page.server.js

@@ -82,23 +82,24 @@ export const actions = {
 	+++export let form;+++
 </script>
 
-<h1>todos</h1>
-
-+++{#if form?.error}
-	<p class="error">{form.error}</p>
-{/if}+++
-
-<form method="POST" action="?/create">
-	<label>
-		add a todo:
-		<input
-			name="description"
-			+++value={form?.description ?? ''}+++
-			autocomplete="off"
-			required
-		/>
-	</label>
-</form>
+<div class="centered">
+	<h1>todos</h1>
+	
+	+++{#if form?.error}
+		<p class="error">{form.error}</p>
+	{/if}+++
+	
+	<form method="POST" action="?/create">
+		<label>
+			add a todo:
+			<input
+				name="description"
+				+++value={form?.description ?? ''}+++
+				autocomplete="off"
+				required
+			/>
+		</label>
+	</form>
 ```
 
 > `fail` でラップしなくても、action から値を返すことができます。例えば、データが保存されたときに 'success!' というメッセージを返すこともできます。それも `form` プロパティを介してアクセスすることができます。

content/tutorial/03-sveltekit/06-forms/03-form-validation/README.md

@@ -2,14 +2,15 @@ import { fail } from '@sveltejs/kit';
 import * as db from '$lib/server/database.js';
 
 export function load({ cookies }) {
-	const id = cookies.get('userid');
+	let id = cookies.get('userid');
 
 	if (!id) {
-		cookies.set('userid', crypto.randomUUID(), { path: '/' });
+		id = crypto.randomUUID();
+		cookies.set('userid', id, { path: '/' });
 	}
 
 	return {
-		todos: db.getTodos(id) ?? []
+		todos: db.getTodos(id)
 	};
 }
 

content/tutorial/03-sveltekit/06-forms/03-form-validation/app-b/src/routes/+page.server.js

@@ -66,4 +66,12 @@
 		opacity: 0.5;
 		transition: opacity 0.2s;
 	}
+
+	button:hover {
+		opacity: 1;
+	}
+
+	.saving {
+		opacity: 0.5;
+	}
 </style>

content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/app-b/src/routes/+page.svelte

@@ -2,14 +2,15 @@ import { fail } from '@sveltejs/kit';
 import * as db from '$lib/server/database.js';
 
 export function load({ cookies }) {
-	const id = cookies.get('userid');
+	let id = cookies.get('userid');
 
 	if (!id) {
-		cookies.set('userid', crypto.randomUUID(), { path: '/' });
+		id = crypto.randomUUID();
+		cookies.set('userid', id, { path: '/' });
 	}
 
 	return {
-		todos: db.getTodos(id) ?? []
+		todos: db.getTodos(id)
 	};
 }