Merge pull request #49 from tomoam/update-up-to-20240426

2024/04/26 迄の更新に追従

Author: tomoam

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

@@ -41,7 +41,7 @@ title: onMount
 ```js
 /// file: App.svelte
 onMount(() => {
-	const canvas = document.querySelector('canvas')
+	const canvas = document.querySelector('canvas');
 	const context = canvas.getContext('2d');
 
 	+++let frame =+++ requestAnimationFrame(function loop(t) {

content/tutorial/03-sveltekit/08-stores/02-navigating-store/README.md

@@ -2,7 +2,7 @@
 title: navigating
 ---
 
-`navigating` store は現在のナビゲーションを表しています。ナビゲーションを開始するとき — 例えばリンクをクリックしたり、ブラウザの '戻る/進む'、またはプログラムで `goto` を呼んだとき — `navigation` の値は以下のプロパティを持つオブジェクトになります:
+`navigating` store は現在のナビゲーションを表しています。ナビゲーションを開始するとき — 例えばリンクをクリックしたり、ブラウザの '戻る/進む'、またはプログラムで `goto` を呼んだとき — `navigating` の値は以下のプロパティを持つオブジェクトになります:
 
 - `from` と `to` — `params`、`route`、`url` プロパティを持つオブジェクト
 - `type` — ナビゲーションのタイプ。例えば `link`、`popstate`、`goto`
@@ -32,4 +32,4 @@ title: navigating
 </nav>
 
 <slot />
-```
+```

src/lib/client/adapters/webcontainer/index.js

@@ -131,7 +131,7 @@ export async function create(base, error, progress, logs, warnings) {
 			await run_dev();
 
 			async function run_dev() {
-				const process = await vm.spawn('turbo', ['run', 'dev']);
+				const process = await vm.spawn('npm', ['run', 'dev']);
 
 				// TODO differentiate between stdout and stderr (sets `vite_error` to `true`)
 				// https://github.com/stackblitz/webcontainer-core/issues/971

src/routes/tutorial/[slug]/Loading.svelte

@@ -1,7 +1,8 @@
 <script>
-	import { afterNavigate } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { Icon } from '@sveltejs/site-kit/components';
+	import { load_webcontainer, reset } from './adapter';
+	import { files } from './state';
 
 	/** @type {boolean} */
 	export let initial;
@@ -62,6 +63,23 @@
 						<code>chrome://settings/cookies</code> and add <code>learn.svelte.jp</code> to 'Sites that
 						can always use cookies'.
 					</p>
+					<!-- TODO: remove this when webcontainers are properly supported on iOS
+				see https://github.com/stackblitz/webcontainer-core/issues/1120 -->
+				{:else if /iphone/i.test(navigator.userAgent)}
+					<p>
+						We couldn't start the app. It seems that you're using iOS, which does not support
+						WebContainers.
+					</p>
+					<p>
+						If this is not the case, you can try loading it by <button
+							type="button"
+							on:click={async () => {
+								error = null;
+								load_webcontainer();
+								await reset($files);
+							}}>clicking here</button
+						>.
+					</p>
 				{:else}
 					<p>
 						We couldn't start the app. Please ensure third party cookies are enabled for this site.
@@ -70,7 +88,7 @@
 
 				{#if is_svelte}
 					<a href="https://svelte.dev/tutorial/{$page.data.exercise.slug}">
-						Go to the legacy svelte tutorial instead <Icon name="arrow-right" />
+						Or go to the legacy svelte tutorial instead <Icon name="arrow-right" />
 					</a>
 				{/if}
 			</div>
@@ -148,6 +166,16 @@
 		margin: 0 0 1em 0;
 	}
 
+	button {
+		color: var(--sk-theme-1);
+		padding: 0 0 1px;
+		position: relative;
+	}
+
+	button:hover {
+		text-decoration: underline;
+	}
+
 	small {
 		font-size: var(--sk-text-xs);
 		color: var(--sk-text-3);

src/routes/tutorial/[slug]/adapter.js

@@ -21,9 +21,22 @@ export const warnings = writable({});
 /** @type {Promise<import('$lib/types').Adapter>} */
 let ready = new Promise(() => {});
 
+let initial_load = true;
+
 if (browser) {
+	load_webcontainer();
+	initial_load = false;
+}
+
+export function load_webcontainer() {
 	ready = new Promise(async (fulfil, reject) => {
 		try {
+			// TODO: remove this when webcontainers are properly supported on iOS
+			// see https://github.com/stackblitz/webcontainer-core/issues/1120
+			if (initial_load && /iphone/i.test(navigator.userAgent)) {
+				throw new Error('iOS does not support WebContainers');
+			}
+
 			const module = await import('$lib/client/adapters/webcontainer/index.js');
 			const adapter = await module.create(base, error, progress, logs, warnings);