2023/02/21 迄の更新に追従

content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/app-a/src/lib/Thing.svelte

@@ -1,4 +1,6 @@
 <script>
+	import { onDestroy } from 'svelte';
+
 	const emojis = {
 		apple: '🍎',
 		banana: '🍌',
@@ -12,6 +14,11 @@
 
 	// ...but the "emoji" variable is fixed upon initialisation of the component
 	const emoji = emojis[name];
+
+	// observe in the console which entry is removed
+	onDestroy(() => {
+		console.log('thing destroyed: ' + name);
+	});
 </script>
 
 <p>

content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/app-b/src/lib/Thing.svelte

@@ -1,4 +1,6 @@
 <script>
+	import { onDestroy } from 'svelte';
+
 	const emojis = {
 		apple: '🍎',
 		banana: '🍌',
@@ -12,6 +14,11 @@
 
 	// ...but the "emoji" variable is fixed upon initialisation of the component
 	const emoji = emojis[name];
+
+	// observe in the console which entry is removed
+	onDestroy(() => {
+		console.log('thing destroyed: ' + name);
+	});
 </script>
 
 <p>

content/tutorial/01-svelte/01-introduction/06-html-tags/README.md → content/tutorial/03-advanced-svelte/11-special-tags/02-html-tags/README.md

@@ -12,4 +12,4 @@ Svelteでは、`{@html ...}` という特別なタグを使ってこれを行い
 <p>{+++@html+++ string}</p>
 ```
 
-> Svelte は DOM に挿入される前に `{@html ...}` 内の式のサニタイズを行いません。言い換えると、この機能を使用する場合は信頼できないソースから来た HTML を手動でエスケープすることが重要です、そうしなければユーザーを<a href="https://owasp.org/www-community/attacks/xss/" target="_blank">Cross-Site Scripting</a> (XSS) 攻撃にさらす危険性があります。
+> **Warning!** Svelte は DOM に挿入される前に `{@html ...}` 内の式のサニタイズを行いません。言い換えると、この機能を使用する場合は信頼できないソースから来た HTML を手動でエスケープすることが重要です、そうしないとユーザーを<a href="https://owasp.org/www-community/attacks/xss/" target="_blank">Cross-Site Scripting</a> (XSS) 攻撃にさらす危険性があります。

package.json

@@ -34,7 +34,7 @@
 	"type": "module",
 	"dependencies": {
 		"@fontsource/roboto-mono": "^4.5.10",
-		"@webcontainer/api": "^0.0.8",
+		"@webcontainer/api": "^1.0.2",
 		"adm-zip": "^0.5.10",
 		"base64-js": "^1.5.1",
 		"marked": "^4.2.12",

src/app.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="@sveltejs/kit" />
-
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
-declare namespace App {
-	// interface Locals {}
-	// interface Platform {}
-	// interface Session {}
-	interface Stuff {
-		index: import('$lib/types').PartStub[];
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
 	}
 }
+
+export {};

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

@@ -1,11 +1,20 @@
-import { load } from '@webcontainer/api';
+import { WebContainer } from '@webcontainer/api';
 import base64 from 'base64-js';
 import { get_depth } from '../../../utils.js';
 import { ready } from '../common/index.js';
 
 /** @type {import('@webcontainer/api').WebContainer} Web container singleton */
 let vm;
 
+/** @param {string} label */
+function console_stream(label) {
+	return new WritableStream({
+		write(chunk) {
+			console.log(`[${label}] ${chunk}`);
+		}
+	});
+}
+
 /**
  * @param {import('$lib/types').Stub[]} stubs
  * @param {(progress: number, status: string) => void} callback
@@ -31,15 +40,12 @@ export async function create(stubs, callback) {
 	/** @type {boolean} Track whether there was an error from vite dev server */
 	let vite_error = false;
 
-	callback(1 / 6, 'loading webcontainer');
-	const WebContainer = await load();
-
-	callback(2 / 6, 'booting webcontainer');
+	callback(1 / 5, 'booting webcontainer');
 	vm = await WebContainer.boot();
 
-	callback(3 / 6, 'writing virtual files');
+	callback(2 / 5, 'writing virtual files');
 	const common = await ready;
-	await vm.loadFiles({
+	await vm.mount({
 		'common.zip': {
 			file: { contents: new Uint8Array(common.zipped) }
 		},
@@ -49,24 +55,18 @@ export async function create(stubs, callback) {
 		...convert_stubs_to_tree(stubs)
 	});
 
-	callback(4 / 6, 'unzipping files');
-	const unzip = await vm.run(
-		{
-			command: 'node',
-			args: ['unzip.cjs']
-		},
-		{
-			stderr: (data) => console.error(`[unzip] ${data}`)
-		}
-	);
-	const code = await unzip.onExit;
+	callback(3 / 5, 'unzipping files');
+	const unzip = await vm.spawn('node', ['unzip.cjs']);
+	unzip.output.pipeTo(console_stream('unzip'));
+	const code = await unzip.exit;
+
 	if (code !== 0) {
 		throw new Error('Failed to initialize WebContainer');
 	}
 
-	await vm.run({ command: 'chmod', args: ['a+x', 'node_modules/vite/bin/vite.js'] });
+	await vm.spawn('chmod', ['a+x', 'node_modules/vite/bin/vite.js']);
 
-	callback(5 / 6, 'starting dev server');
+	callback(4 / 5, 'starting dev server');
 	const base = await new Promise(async (fulfil, reject) => {
 		const error_unsub = vm.on('error', (error) => {
 			error_unsub();
@@ -75,27 +75,21 @@ export async function create(stubs, callback) {
 
 		const ready_unsub = vm.on('server-ready', (port, base) => {
 			ready_unsub();
-			callback(6 / 6, 'ready');
+			callback(5 / 5, 'ready');
 			fulfil(base); // this will be the last thing that happens if everything goes well
 		});
 
 		await run_dev();
 
 		async function run_dev() {
-			const process = await vm.run(
-				{ command: 'turbo', args: ['run', 'dev'] },
-				{
-					stdout: (data) => {
-						console.log(`[dev] ${data}`);
-					},
-					stderr: (data) => {
-						vite_error = true;
-						console.error(`[dev] ${data}`);
-					}
-				}
-			);
+			const process = await vm.spawn('turbo', ['run', 'dev']);
+
+			// TODO differentiate between stdout and stderr (sets `vite_error` to `true`)
+			// https://github.com/stackblitz/webcontainer-core/issues/971
+			process.output.pipeTo(console_stream('dev'));
+
 			// keep restarting dev server (can crash in case of illegal +files for example)
-			process.onExit.then((code) => {
+			process.exit.then((code) => {
 				if (code !== 0) {
 					setTimeout(() => {
 						run_dev();
@@ -185,10 +179,10 @@ export async function create(stubs, callback) {
 			// This will invoke a restart of Vite. Hacky but it works.
 			// TODO: remove when https://github.com/vitejs/vite/issues/12127 is closed
 			if (!previous_env && current_stubs.has('/.env')) {
-				await vm.run({ command: 'touch', args: ['.env']});
+				await vm.spawn('touch', ['.env']);
 			}
 
-			await vm.loadFiles(convert_stubs_to_tree(to_write));
+			await vm.mount(convert_stubs_to_tree(to_write));
 			await promise;
 			await new Promise((f) => setTimeout(f, 200)); // wait for chokidar
 
@@ -220,13 +214,13 @@ export async function create(stubs, callback) {
 						};
 					}
 
-					tree = /** @type {import('@webcontainer/api').DirectoryEntry} */ (tree[part]).directory;
+					tree = /** @type {import('@webcontainer/api').DirectoryNode} */ (tree[part]).directory;
 				}
 
 				tree[basename] = to_file(stub);
 			}
 
-			await vm.loadFiles(root);
+			await vm.mount(root);
 
 			stubs_to_map(stubs, current_stubs);
 
@@ -236,8 +230,6 @@ export async function create(stubs, callback) {
 		},
 		destroy: async () => {
 			vm.teardown();
-			// @ts-ignore
-			vm = null;
 		}
 	};
 }

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

@@ -30,16 +30,29 @@
 						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
-					<a
-						target="_blank"
-						rel="noreferrer"
-						href="https://support.mozilla.org/en-US/kb/third-party-cookies-firefox-tracking-protection"
+					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)"
 					>
-						third party cookies
-					</a> are enabled for this site.
+						<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.dev</code> to 'Sites that
+					can always use cookies'.
 				</p>
 			{:else}
 				<p>

tests/env_file.spec.ts

@@ -5,6 +5,8 @@ const chromium_flags = ['--enable-features=SharedArrayBuffer'];
 const iframe_selector = 'iframe[src*="webcontainer.io/"]';
 
 test('.env file: no timeout error occurs when switching a tutorials without a .env file to one with it', async () => {
+	test.setTimeout(60000);
+
 	const context = await chromium.launchPersistentContext('', { args: chromium_flags });
 	const page = context.pages()[0];
 	await page.bringToFront();