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

tomoam · tomoam · commit 40035467883c · 2023-06-07T22:27:47.000+09:00
diff --git a/content/tutorial/01-svelte/02-reactivity/02-reactive-declarations/README.md b/content/tutorial/01-svelte/02-reactivity/02-reactive-declarations/README.md
@@ -12,6 +12,8 @@ let count = 0;
 +++$: doubled = count * 2;+++
 ```
 
+リアクティブステートメント(reactive statement)が未宣言の変数への代入だけで構成されている場合、Svelte はあなたのかわりに `let` 宣言を注入します。
+
 > これが少し異質に見えても心配しないでください。これは（見慣れないかもしれませんが） [正しい](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/label) JavaScript で、Svelte は「参照される値が変わるたびにこのコードを再実行する」という意味だと解釈します。一度慣れてしまえば、もう戻れません。
 
 マークアップで `doubled` を使ってみましょう。
diff --git a/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md b/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md
@@ -11,7 +11,7 @@ title: Each blocks
 <div>
 	+++{#each colors as color}+++
 		<button
-			aria-current="{selected === 'red' ? 'true' : undefined}"
+			aria-current={selected === 'red'}
 			aria-label="red"
 			style="background: red"
 			on:click={() => selected = 'red'}
@@ -29,7 +29,7 @@ title: Each blocks
 <div>
 	{#each colors as color}
 		<button
-			aria-current="{selected === +++color+++ ? 'true' : undefined}"
+			aria-current={selected === +++color+++}
 			aria-label=+++{color}+++
 			style="background: +++{color}+++"
 			on:click={() => selected = +++color+++}
@@ -45,7 +45,7 @@ title: Each blocks
 <div>
 	{#each colors as color, +++i}+++
 		<button
-			aria-current="{selected === color ? 'true' : undefined}"
+			aria-current={selected === color}
 			aria-label={color}
 			style="background: {color}"
 			on:click={() => selected = color}
diff --git a/content/tutorial/03-sveltekit/05-shared-modules/01-lib/README.md b/content/tutorial/03-sveltekit/05-shared-modules/01-lib/README.md
@@ -28,4 +28,4 @@ SvelteKit はディレクトリベースのルーティングを使用してい
 
 <h1>home</h1>
 <p>{message}</p>
-```
+```
diff --git a/content/tutorial/04-advanced-sveltekit/05-advanced-loading/03-await-parent/README.md b/content/tutorial/04-advanced-sveltekit/05-advanced-loading/03-await-parent/README.md
@@ -30,7 +30,7 @@ export async function load(+++{ parent }+++) {
 最後に、`src/routes/sum/+page.js` で、両方の `load` 関数から返される親のデータを取得しましょう。
 
 ```js
-/// file: src/sum/+page.js
+/// file: src/routes/sum/+page.js
 export async function load(+++{ parent }+++) {
 	+++const { a, b } = await parent();+++
 	return { +++c: a + b+++ };
diff --git a/content/tutorial/common/src/__client.js b/content/tutorial/common/src/__client.js
@@ -49,6 +49,8 @@ window.addEventListener('focusin', (e) => {
 	post({ type: 'iframe_took_focus' });
 });
 
+let previous_href = location.href;
+
 window.addEventListener('click', (e) => {
 	let node = e.target;
 	while (node) {
@@ -60,7 +62,10 @@ window.addEventListener('click', (e) => {
 				e.preventDefault();
 				window.open(url, '_blank');
 			} else {
-				update_path(url.pathname + url.search + url.hash);
+				if (location.href !== url.href) {
+					previous_href = url.href;
+					update_path(url.pathname + url.search + url.hash);
+				}
 			}
 		}
 		node = node.parent;
@@ -75,8 +80,6 @@ window.addEventListener('visibilitychange', () => {
 	}
 });
 
-let previous_href = location.href;
-
 const url_observer = new MutationObserver(() => {
 	if (location.href !== previous_href) {
 		previous_href = location.href;
diff --git a/src/lib/client/adapters/webcontainer/index.js b/src/lib/client/adapters/webcontainer/index.js
@@ -4,7 +4,6 @@ import AnsiToHtml from 'ansi-to-html';
 import * as yootils from 'yootils';
 import { escape_html, get_depth } from '../../../utils.js';
 import { ready } from '../common/index.js';
-import { isWebContainerSupported } from './utils.js';
 
 /**
  * @typedef {import("../../../../routes/tutorial/[slug]/state.js").CompilerWarning} CompilerWarning
@@ -26,10 +25,6 @@ let vm;
  * @returns {Promise<import('$lib/types').Adapter>}
  */
 export async function create(base, error, progress, logs, warnings) {
-	if (!isWebContainerSupported()) {
-		throw new Error('WebContainers are not supported by Safari 16.3 or earlier');
-	}
-
 	progress.set({ value: 0, text: 'loading files' });
 
 	const q = yootils.queue(1);
diff --git a/src/lib/client/adapters/webcontainer/utils.js b/src/lib/client/adapters/webcontainer/utils.js
diff --git a/src/routes/tutorial/[slug]/Loading.svelte b/src/routes/tutorial/[slug]/Loading.svelte
@@ -1,6 +1,4 @@
 <script>
-	import { isWebContainerSupported } from "$lib/client/adapters/webcontainer/utils.js";
-
 	/** @type {boolean} */
 	export let initial;
 
@@ -14,54 +12,59 @@
 	export let status;
 </script>
 
-<div class="loading" class:error>
+<div class="loading">
 	{#if error}
-		{#if !isWebContainerSupported()}
-			<p>This app requires modern web platform features. Please use a browser other than Safari.</p>
-		{:else}
+		<div class="error">
+			<div>
+				<h2>Yikes!</h2>
+				{#if error.message === 'Your browser does not support all necessary features'}
+					<p>
+						This app requires modern web platform features. Please use a browser other than Safari.
+					</p>
+				{:else if /firefox/i.test(navigator.userAgent)}
+					<p>
+						We couldn't start the app. Please ensure
+						<a
+							target="_blank"
+							rel="noreferrer"
+							href="https://support.mozilla.org/en-US/kb/third-party-cookies-firefox-tracking-protection"
+						>
+							third party cookies
+						</a> are enabled for this site, and disable Enhanced Tracking Protection.
+					</p>
+					<p>
+						If you have 'Delete cookies and site data when Firefox is closed' enabled in
+						<code>about:preferences#privacy</code>, make sure <code>learn.svelte.dev</code> is included
+						as an exception.
+					</p>
+				{:else if /chrome/i.test(navigator.userAgent) && !/edg/i.test(navigator.userAgent)}
+					<p>
+						We couldn't start the app. Please ensure third party cookies are enabled for this site —
+						click the
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 24 24"
+							style="width: 1em; height: 1em; position: relative; top: 0.1em; margin: 0 0.2em; transform: scale(1.2)"
+						>
+							<title>eye</title>
+							<path
+								fill="#666"
+								d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
+							/>
+						</svg>
+						icon in the URL bar or go to
+						<code>chrome://settings/cookies</code> and add <code>learn.svelte.jp</code> to 'Sites that
+						can always use cookies'.
+					</p>
+				{:else}
+					<p>
+						We couldn't start the app. Please ensure third party cookies are enabled for this site.
+					</p>
+				{/if}
+			</div>
+
 			<small>{error.message}</small>
-			<h2>Yikes!</h2>
-			{#if /firefox/i.test(navigator.userAgent)}
-				<p>
-					We couldn't start the app. Please ensure
-					<a
-						target="_blank"
-						rel="noreferrer"
-						href="https://support.mozilla.org/en-US/kb/third-party-cookies-firefox-tracking-protection"
-					>
-						third party cookies
-					</a> are enabled for this site, and disable Enhanced Tracking Protection.
-				</p>
-				<p>
-					If you have 'Delete cookies and site data when Firefox is closed' enabled in
-					<code>about:preferences#privacy</code>, make sure <code>learn.svelte.jp</code> is included
-					as an exception.
-				</p>
-			{:else if /chrome/i.test(navigator.userAgent) && !/edg/i.test(navigator.userAgent)}
-				<p>
-					We couldn't start the app. Please ensure third party cookies are enabled for this site —
-					click the
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						style="width: 1em; height: 1em; position: relative; top: 0.1em; margin: 0 0.2em; transform: scale(1.2)"
-					>
-						<title>eye</title>
-						<path
-							fill="#666"
-							d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
-						/>
-					</svg>
-					icon in the URL bar or go to
-					<code>chrome://settings/cookies</code> and add <code>learn.svelte.jp</code> to 'Sites that
-					can always use cookies'.
-				</p>
-			{:else}
-				<p>
-					We couldn't start the app. Please ensure third party cookies are enabled for this site.
-				</p>
-			{/if}
-		{/if}
+		</div>
 	{:else}
 		<svg width="107" height="128" viewBox="0 0 107 128">
 			<path
@@ -118,8 +121,11 @@
 	}
 
 	.error {
-		align-items: start;
-		justify-content: start;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
 	}
 
 	h2 {
