Merge pull request #42 from tomoam/update-up-to-20230510

2023/05/10 迄の更新に追従

Author: tomoam

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

@@ -56,7 +56,14 @@
 		flex: 1;
 	}
 
-	.saving {
+	button {
+		border: none;
+		background: url(./remove.svg) no-repeat 50% 50%;
+		background-size: 1rem 1rem;
+		cursor: pointer;
+		height: 100%;
+		aspect-ratio: 1;
 		opacity: 0.5;
+		transition: opacity 0.2s;
 	}
 </style>

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

@@ -4,6 +4,7 @@ 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
@@ -25,13 +26,15 @@ let vm;
  * @returns {Promise<import('$lib/types').Adapter>}
  */
 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');
+	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);
+	/** @type {Map<string, Array<import('$lib/types').FileStub>>} */
+	const q_per_file = new Map();
 
 	/** Paths and contents of the currently loaded file stubs */
 	let current_stubs = stubs_to_map([]);
@@ -203,25 +206,9 @@ export async function create(base, error, progress, logs, warnings) {
 				// For some reason, server-ready is fired again when the vite dev server is restarted.
 				// We need to wait for it to finish before we can continue, else we might
 				// request files from Vite before it's ready, leading to a timeout.
-				const will_restart = launched && to_write.some(will_restart_vite_dev_server);
-				const promise = will_restart
-					? new Promise((fulfil, reject) => {
-							const error_unsub = vm.on('error', (error) => {
-								error_unsub();
-								reject(new Error(error.message));
-							});
-
-							const ready_unsub = vm.on('server-ready', (port, base) => {
-								ready_unsub();
-								console.log(`server ready on port ${port} at ${performance.now()}: ${base}`);
-								fulfil(undefined);
-							});
-
-							setTimeout(() => {
-								reject(new Error('Timed out resetting WebContainer'));
-							}, 10000);
-					  })
-					: Promise.resolve();
+				const will_restart = launched &&
+					(to_write.some(is_config) || to_delete.some(is_config_path));
+				const promise = will_restart ? wait_for_restart_vite() : Promise.resolve();
 
 				for (const file of to_delete) {
 					await vm.fs.rm(file, { force: true, recursive: true });
@@ -241,6 +228,15 @@ export async function create(base, error, progress, logs, warnings) {
 			});
 		},
 		update: (file) => {
+
+			let queue = q_per_file.get(file.name);
+			if (queue) {
+				queue.push(file);
+				return Promise.resolve(false);
+			}
+
+			q_per_file.set(file.name, queue = [file]);
+
 			return q.add(async () => {
 				/** @type {import('@webcontainer/api').FileSystemTree} */
 				const root = {};
@@ -263,22 +259,35 @@ export async function create(base, error, progress, logs, warnings) {
 					tree = /** @type {import('@webcontainer/api').DirectoryNode} */ (tree[part]).directory;
 				}
 
-				tree[basename] = to_file(file);
+				const will_restart = is_config(file);
+
+				while (queue && queue.length > 0) {
 
-				// initialize warnings of this file
-				$warnings[file.name] = [];
-				schedule_to_update_warning(100);
+					// if the file is updated many times rapidly, get the most recently updated one
+					const file = /** @type {import('$lib/types').FileStub} */ (queue.pop());
+					queue.length = 0
 
-				await vm.mount(root);
+					tree[basename] = to_file(file);
 
-				current_stubs.set(file.name, file);
+					// initialize warnings of this file
+					$warnings[file.name] = [];
+					schedule_to_update_warning(100);
+
+					await vm.mount(root);
+
+					if (will_restart) await wait_for_restart_vite();
+
+					current_stubs.set(file.name, file);
+
+					// we need to stagger sequential updates, just enough that the HMR
+					// wires don't get crossed. 50ms seems to be enough of a delay
+					// to avoid glitches without noticeably affecting update speed
+					await new Promise((f) => setTimeout(f, 50));
+				}
 
-				// we need to stagger sequential updates, just enough that the HMR
-				// wires don't get crossed. 50ms seems to be enough of a delay
-				// to avoid glitches without noticeably affecting update speed
-				await new Promise((f) => setTimeout(f, 50));
+				q_per_file.delete(file.name)
 
-				return will_restart_vite_dev_server(file);
+				return will_restart;
 			});
 		}
 	};
@@ -287,11 +296,34 @@ export async function create(base, error, progress, logs, warnings) {
 /**
  * @param {import('$lib/types').Stub} file
  */
-function will_restart_vite_dev_server(file) {
-	return (
-		file.type === 'file' &&
-		(file.name === '/vite.config.js' || file.name === '/svelte.config.js' || file.name === '/.env')
-	);
+function is_config(file) {
+	return file.type === 'file' && is_config_path(file.name);
+}
+
+/**
+ * @param {string} path
+ */
+function is_config_path(path) {
+	return ['/vite.config.js', '/svelte.config.js', '/.env'].includes(path);
+}
+
+function wait_for_restart_vite() {
+	return new Promise((fulfil, reject) => {
+		const error_unsub = vm.on('error', (error) => {
+			error_unsub();
+			reject(new Error(error.message));
+		});
+
+		const ready_unsub = vm.on('server-ready', (port, base) => {
+			ready_unsub();
+			console.log(`server ready on port ${port} at ${performance.now()}: ${base}`);
+			fulfil(undefined);
+		});
+
+		setTimeout(() => {
+			reject(new Error('Timed out resetting WebContainer'));
+		}, 10000);
+	});
 }
 
 /**

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

@@ -0,0 +1,30 @@
+/**
+ * Checks if WebContainer is supported on the current browser.
+ * This function is borrowed from [stackblitz/webcontainer-docs](https://github.com/stackblitz/webcontainer-docs/blob/369dd58b2749b085ed7642f22108a9bcbcd68fc4/docs/.vitepress/theme/components/Examples/WCEmbed/utils.ts#L4-L29)
+ */
+export function isWebContainerSupported() {
+	const hasSharedArrayBuffer = 'SharedArrayBuffer' in window;
+	const looksLikeChrome = navigator.userAgent.toLowerCase().includes('chrome');
+	const looksLikeFirefox = navigator.userAgent.includes('Firefox');
+	const looksLikeSafari = navigator.userAgent.includes('Safari');
+
+	if (hasSharedArrayBuffer && (looksLikeChrome || looksLikeFirefox)) {
+		return true;
+	}
+
+	if (hasSharedArrayBuffer && looksLikeSafari) {
+		// we only support Safari 16.4 and up so we check for the version here
+		const match = navigator.userAgent.match(/Version\/(\d+)\.(\d+) (?:Mobile\/.*?)?Safari/);
+		const majorVersion = match ? Number(match?.[1]) : 0;
+		const minorVersion = match ? Number(match?.[2]) : 0;
+
+		return majorVersion > 16 || (majorVersion === 16 && minorVersion >= 4);
+	}
+
+	// Allow overriding the support check with localStorage.webcontainer_any_ua = 1
+	try {
+		return Boolean(localStorage.getItem('webcontainer_any_ua'));
+	} catch {
+		return false;
+	}
+}

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

@@ -17,6 +17,7 @@
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import { files, selected_file, selected_name, update_file } from './state.js';
 	import { warnings } from './adapter.js';
+	import { autocomplete_for_svelte } from './autocompletion.js';
 	import './codemirror.css';
 
 	/** @type {HTMLDivElement} */
@@ -127,16 +128,16 @@
 				let lang;
 
 				if (file.name.endsWith('.js') || file.name.endsWith('.json')) {
-					lang = javascript();
+					lang = [javascript()];
 				} else if (file.name.endsWith('.html')) {
-					lang = html();
+					lang = [html()];
 				} else if (file.name.endsWith('.svelte')) {
-					lang = svelte();
+					lang = [svelte(), ...autocomplete_for_svelte()];
 				}
 
 				state = EditorState.create({
 					doc: file.contents,
-					extensions: lang ? [...extensions, lang] : extensions
+					extensions: lang ? [...extensions, ...lang] : extensions
 				});
 
 				editor_states.set(file.name, state);

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

@@ -1,4 +1,6 @@
 <script>
+	import { isWebContainerSupported } from "$lib/client/adapters/webcontainer/utils.js";
+
 	/** @type {boolean} */
 	export let initial;
 
@@ -14,7 +16,7 @@
 
 <div class="loading" class:error>
 	{#if error}
-		{#if /safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent)}
+		{#if !isWebContainerSupported()}
 			<p>This app requires modern web platform features. Please use a browser other than Safari.</p>
 		{:else}
 			<small>{error.message}</small>