Merge pull request #40 from tomoam/update-up-to-20230505

Author: tomoam

content/tutorial/01-svelte/02-reactivity/02-reactive-declarations/README.md

@@ -23,4 +23,6 @@ let count = 0;
 +++<p>{count} doubled is {doubled}</p>+++
 ```
 
-もちろん、代わりに `{count * 2}` とマークアップに書くだけでもよいでしょう。リアクティブな値を使用する必要はありません。リアクティブな値は、複数回参照する必要がある場合や、*他の* リアクティブな値に依存する値がある場合に特に価値があります。
+もちろん、代わりに `{count * 2}` とマークアップに書くだけでもよいでしょう。リアクティブな値を使用する必要はありません。リアクティブな値は、複数回参照する必要がある場合や、*他の* リアクティブな値に依存する値がある場合に使用する価値があります。
+
+> リアクティブ宣言(reactive declarations)とリアクティブステートメント(reactive statements)は、他のスクリプトコードの後、かつコンポーネントのマークアップがレンダリングされる前に実行されることにご注意ください。

content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/README.md

@@ -67,7 +67,7 @@ export const actions = {
 データを保存している間は、メッセージを表示することができます:
 
 ```svelte
-/// file: App.svelte
+/// file: src/routes/+page.svelte
 <ul class="todos">
 	<!-- ... -->
 </ul>

content/tutorial/03-sveltekit/09-errors-and-redirects/02-error-pages/README.md

@@ -19,8 +19,6 @@ title: Error pages
 </span>
 ```
 
-> `page` store を使用していますが、これは後の章で詳細に学習します。
-
 `+error.svelte` コンポーネントは最上位(root)の `+layout.svelte` の内側でレンダリングされます。よりきめ細やかな `+error.svelte` 境界を作ることもできます。
 
 ```svelte

content/tutorial/04-advanced-sveltekit/01-hooks/04-handleerror/README.md

@@ -49,4 +49,4 @@ export function handleError({ event, error }) {
 <h1>{$page.status}</h1>
 <p>{$page.error.message}</p>
 <p>error code: {$page.error.code}</p>
-```
+```

content/tutorial/common/src/__client.js

@@ -97,8 +97,4 @@ if (import.meta.hot) {
 	import.meta.hot.on('vite:beforeUpdate', (event) => {
 		post({ type: 'hmr', data: event.updates });
 	});
-
-	import.meta.hot.on('svelte:warnings', (data) => {
-		post({ type: 'warnings', data });
-	});
 }

content/tutorial/common/svelte.config.js

@@ -8,10 +8,11 @@ const config = {
 	},
 
 	vitePlugin: {
-		experimental: {
-			// This feature enables compile-time warnings to be
-			// visible in the learn.svelte.dev editor
-			sendWarningsToBrowser: true
+		// This enables compile-time warnings to be
+		// visible in the learn.svelte.dev editor
+		onwarn: (warning, defaultHandler) => {
+			console.log('svelte:warnings:%s', JSON.stringify(warning));
+			defaultHandler(warning);
 		}
 	}
 };

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

@@ -5,6 +5,10 @@ import * as yootils from 'yootils';
 import { escape_html, get_depth } from '../../../utils.js';
 import { ready } from '../common/index.js';
 
+/**
+ * @typedef {import("../../../../routes/tutorial/[slug]/state.js").CompilerWarning} CompilerWarning
+ */
+
 const converter = new AnsiToHtml({
 	fg: 'var(--sk-text-3)'
 });
@@ -17,9 +21,10 @@ let vm;
  * @param {import('svelte/store').Writable<Error | null>} error
  * @param {import('svelte/store').Writable<{ value: number, text: string }>} progress
  * @param {import('svelte/store').Writable<string[]>} logs
+ * @param {import('svelte/store').Writable<Record<string, CompilerWarning[]>>} warnings
  * @returns {Promise<import('$lib/types').Adapter>}
  */
-export async function create(base, error, progress, logs) {
+export async function create(base, error, progress, logs, warnings) {
 	if (/safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent)) {
 		throw new Error('WebContainers are not supported by Safari');
 	}
@@ -45,12 +50,40 @@ export async function create(base, error, progress, logs) {
 		}
 	});
 
+	/** @type {Record<string, CompilerWarning[]>} */
+	let $warnings;
+	warnings.subscribe((value) => $warnings = value);
+
+	/** @type {any} */
+	let timeout;
+
+	/** @param {number} msec */
+	function schedule_to_update_warning(msec) {
+		clearTimeout(timeout);
+		timeout = setTimeout(() => warnings.set($warnings), msec);
+	}
+
 	const log_stream = () =>
 		new WritableStream({
 			write(chunk) {
 				if (chunk === '\x1B[1;1H') {
 					// clear screen
 					logs.set([]);
+
+				} else if (chunk?.startsWith('svelte:warnings:')) {
+					/** @type {CompilerWarning} */
+					const warn = JSON.parse(chunk.slice(16));
+					const current = $warnings[warn.filename];
+
+					if (!current) {
+						$warnings[warn.filename] = [warn];
+					// the exact same warning may be given multiple times in a row
+					} else if (!current.some((s) => (s.code === warn.code && s.pos === warn.pos))) {
+						current.push(warn);
+					}
+
+					schedule_to_update_warning(100);
+
 				} else {
 					const log = converter.toHtml(escape_html(chunk)).replace(/\n/g, '<br>');
 					logs.update(($logs) => [...$logs, log]);
@@ -154,6 +187,17 @@ export async function create(base, error, progress, logs) {
 					...force_delete
 				];
 
+				// initialize warnings of written files
+				to_write
+					.filter((stub) => stub.type === 'file' && $warnings[stub.name])
+					.forEach((stub) => $warnings[stub.name] = []);
+				// remove warnings of deleted files
+				to_delete
+					.filter((stubname) => $warnings[stubname])
+					.forEach((stubname) => delete $warnings[stubname]);
+
+				warnings.set($warnings);
+
 				current_stubs = stubs_to_map(stubs);
 
 				// For some reason, server-ready is fired again when the vite dev server is restarted.
@@ -221,6 +265,10 @@ export async function create(base, error, progress, logs) {
 
 				tree[basename] = to_file(file);
 
+				// initialize warnings of this file
+				$warnings[file.name] = [];
+				schedule_to_update_warning(100);
+
 				await vm.mount(root);
 
 				current_stubs.set(file.name, file);

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

@@ -15,7 +15,8 @@
 	import { HighlightStyle } from '@codemirror/language';
 	import { syntaxHighlighting } from '@codemirror/language';
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
-	import { files, selected_file, selected_name, update_file, warnings } from './state.js';
+	import { files, selected_file, selected_name, update_file } from './state.js';
+	import { warnings } from './adapter.js';
 	import './codemirror.css';
 
 	/** @type {HTMLDivElement} */

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

@@ -5,7 +5,6 @@
 	import Chrome from './Chrome.svelte';
 	import Loading from './Loading.svelte';
 	import { base, error, logs, progress, subscribe } from './adapter';
-	import { warnings } from './state';
 
 	/** @type {import('$lib/types').Exercise} */
 	export let exercise;
@@ -63,11 +62,6 @@
 			}, 1000);
 		} else if (e.data.type === 'ping-pause') {
 			clearTimeout(timeout);
-		} else if (e.data.type === 'warnings') {
-			warnings.update(($warnings) => ({
-				...$warnings,
-				[e.data.data.normalizedFilename]: e.data.data.allWarnings
-			}));
 		}
 	}
 

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

@@ -142,6 +142,10 @@
 		--color: rgba(255, 0, 0, 0.1);
 	}
 
+	:global(body.dark) .text :global(pre) :global(.highlight.remove) {
+		--color: rgba(255, 0, 0, 0.27);
+	}
+
 	/** this probably belongs in site-kit */
 	.text :global(p) :global(a) :global(code) {
 		color: var(--sk-theme-1);