stores -> runes for adapter state in order to better combine them; most usage locations untouched deliberately (they can be adjusted later on)

Author: dummdidumm

apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.ts renamed to apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts

@@ -1,50 +1,48 @@
 import type { Adapter, FileStub, Stub, Warning } from '$lib/tutorial';
 import Bundler from '@sveltejs/repl/bundler';
-import type { Writable } from 'svelte/store';
 // @ts-ignore package exports don't have types
 import * as yootils from 'yootils';
 
 /** Rollup bundler singleton */
-let vm: Bundler;
+let bundler: Bundler;
+
+export const state = new (class RollupState {
+	progress = $state.raw({ value: 0, text: 'initialising' });
+	bundle = $state.raw<any>(null);
+	error = $state.raw<Error | null>(null); // TODO wire this up? Is this the correct place?
+	logs = $state.raw<string[]>([]); // TODO wire this up?
+	warnings = $state.raw<Record<string, Warning[]>>({});
+})();
 
 /**
- * @param {import('svelte/store').Writable<any>} bundle
- * @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, import('$lib/tutorial').Warning[]>>} warnings
  * @returns {Promise<import('$lib/tutorial').Adapter>}
  */
-export async function create(
-	bundle: Writable<any>,
-	error: Writable<Error | null>, // TODO wire this up? Is this the correct place?
-	progress: Writable<{ value: number; text: string }>,
-	logs: Writable<string[]>, // TODO write to this somehow instead of the console viewer?
-	warnings: Writable<Record<string, Warning[]>>
-): Promise<Adapter> {
-	progress.set({ value: 0, text: 'loading files' });
+export async function create(): Promise<Adapter> {
+	bundler?.destroy();
+
+	state.progress = { value: 0, text: 'loading files' };
 
 	let done = false;
 
-	vm = new Bundler({
+	bundler = new Bundler({
 		packages_url: 'https://unpkg.com',
 		svelte_url: `https://unpkg.com/svelte@next`, // TODO remove @next once 5.0 is released
 		// svelte_url: `${browser ? location.origin : ''}/svelte`, // TODO think about bringing back main-build for Playground?
 		onstatus(val) {
 			if (!done && val === null) {
 				done = true;
-				progress.set({ value: 1, text: 'ready' });
+				state.progress = { value: 1, text: 'ready' };
 			}
 		}
 	});
 
-	progress.set({ value: 0.5, text: 'loading svelte compiler' });
+	state.progress = { value: 0.5, text: 'loading svelte compiler' };
 
 	/** Paths and contents of the currently loaded file stubs */
 	let current_stubs = stubs_to_map([]);
 
 	async function compile() {
-		const result = await vm.bundle(
+		const result = await bundler.bundle(
 			[...current_stubs.values()]
 				// TODO we can probably remove all the SvelteKit specific stuff from the tutorial content once this settles down
 				.filter((f): f is FileStub => f.name.startsWith('/src/lib/') && f.type === 'file')
@@ -54,15 +52,15 @@ export async function create(
 					type: f.name.split('.').pop() ?? 'svelte'
 				}))
 		);
-		bundle.set(result);
+		state.bundle = result;
 
 		const _warnings: Record<string, any> = {};
 		for (const warning of result?.warnings ?? []) {
 			const file = '/src/lib/' + warning.filename;
 			_warnings[file] = _warnings[file] || [];
 			_warnings[file].push(warning);
 		}
-		warnings.set(_warnings);
+		state.warnings = _warnings;
 	}
 
 	const q = yootils.queue(1);

apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.js renamed to apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.js

@@ -14,16 +14,23 @@ const converter = new AnsiToHtml({
 /** @type {import('@webcontainer/api').WebContainer} Web container singleton */
 let vm;
 
+export const state = new (class WCState {
+	progress = $state.raw({ value: 0, text: 'initialising' });
+	/** @type {string | null} */
+	base = $state.raw(null);
+	/** @type {Error | null} */
+	error = $state.raw(null);
+	/** @type {string[]} */
+	logs = $state.raw([]);
+	/** @type {Record<string, import('$lib/tutorial').Warning[]>} */
+	warnings = $state.raw({});
+})();
+
 /**
- * @param {import('svelte/store').Writable<string | null>} base
- * @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, import('$lib/tutorial').Warning[]>>} warnings
  * @returns {Promise<import('$lib/tutorial').Adapter>}
  */
-export async function create(base, error, progress, logs, warnings) {
-	progress.set({ value: 0, text: 'loading files' });
+export async function create() {
+	state.progress = { value: 0, text: 'loading files' };
 
 	const q = yootils.queue(1);
 	/** @type {Map<string, Array<import('$lib/tutorial').FileStub>>} */
@@ -32,10 +39,10 @@ export async function create(base, error, progress, logs, warnings) {
 	/** Paths and contents of the currently loaded file stubs */
 	let current_stubs = stubs_to_map([]);
 
-	progress.set({ value: 1 / 5, text: 'booting webcontainer' });
+	state.progress = { value: 1 / 5, text: 'booting webcontainer' };
 	vm = await WebContainer.boot();
 
-	progress.set({ value: 2 / 5, text: 'writing virtual files' });
+	state.progress = { value: 2 / 5, text: 'writing virtual files' };
 	const common = await ready;
 	await vm.mount({
 		'common.zip': {
@@ -47,32 +54,31 @@ export async function create(base, error, progress, logs, warnings) {
 	});
 
 	/** @type {Record<string, import('$lib/tutorial').Warning[]>} */
-	let $warnings;
-	warnings.subscribe((value) => ($warnings = value));
+	let warnings = {};
 
 	/** @type {any} */
 	let timeout;
 
 	/** @param {number} msec */
 	function schedule_to_update_warning(msec) {
 		clearTimeout(timeout);
-		timeout = setTimeout(() => warnings.set($warnings), msec);
+		timeout = setTimeout(() => (state.warnings = { ...warnings }), msec);
 	}
 
 	const log_stream = () =>
 		new WritableStream({
 			write(chunk) {
 				if (chunk === '\x1B[1;1H') {
 					// clear screen
-					logs.set([]);
+					state.logs = [];
 				} else if (chunk?.startsWith('svelte:warnings:')) {
 					/** @type {import('$lib/tutorial').Warning} */
 					const warn = JSON.parse(chunk.slice(16));
 					const filename = warn.filename.startsWith('/') ? warn.filename : '/' + warn.filename;
-					const current = $warnings[filename];
+					const current = warnings[filename];
 
 					if (!current) {
-						$warnings[filename] = [warn];
+						warnings[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);
@@ -81,12 +87,12 @@ export async function create(base, error, progress, logs, warnings) {
 					schedule_to_update_warning(100);
 				} else {
 					const log = converter.toHtml(escape_html(chunk)).replace(/\n/g, '<br>');
-					logs.update(($logs) => [...$logs, log]);
+					state.logs = [...state.logs, log];
 				}
 			}
 		});
 
-	progress.set({ value: 3 / 5, text: 'unzipping files' });
+	state.progress = { value: 3 / 5, text: 'unzipping files' };
 	const unzip = await vm.spawn('node', ['unzip.cjs']);
 	unzip.output.pipeTo(log_stream());
 	const code = await unzip.exit;
@@ -98,11 +104,11 @@ export async function create(base, error, progress, logs, warnings) {
 	await vm.spawn('chmod', ['a+x', 'node_modules/vite/bin/vite.js']);
 
 	vm.on('server-ready', (_port, url) => {
-		base.set(url);
+		state.base = url;
 	});
 
 	vm.on('error', ({ message }) => {
-		error.set(new Error(message));
+		state.error = new Error(message);
 	});
 
 	let launched = false;
@@ -111,7 +117,7 @@ export async function create(base, error, progress, logs, warnings) {
 		if (launched) return;
 		launched = true;
 
-		progress.set({ value: 4 / 5, text: 'starting dev server' });
+		state.progress = { value: 4 / 5, text: 'starting dev server' };
 
 		await new Promise(async (fulfil, reject) => {
 			const error_unsub = vm.on('error', (error) => {
@@ -121,7 +127,7 @@ export async function create(base, error, progress, logs, warnings) {
 
 			const ready_unsub = vm.on('server-ready', (_port, base) => {
 				ready_unsub();
-				progress.set({ value: 5 / 5, text: 'ready' });
+				state.progress = { value: 5 / 5, text: 'ready' };
 				fulfil(base); // this will be the last thing that happens if everything goes well
 			});
 
@@ -182,14 +188,14 @@ export async function create(base, error, progress, logs, warnings) {
 
 				// initialize warnings of written files
 				to_write
-					.filter((stub) => stub.type === 'file' && $warnings[stub.name])
-					.forEach((stub) => ($warnings[stub.name] = []));
+					.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]);
+					.filter((stubname) => warnings[stubname])
+					.forEach((stubname) => delete warnings[stubname]);
 
-				warnings.set($warnings);
+				state.warnings = { ...warnings };
 
 				current_stubs = stubs_to_map(stubs);
 
@@ -260,7 +266,7 @@ export async function create(base, error, progress, logs, warnings) {
 					tree[basename] = to_file(file);
 
 					// initialize warnings of this file
-					$warnings[file.name] = [];
+					warnings[file.name] = [];
 					schedule_to_update_warning(100);
 
 					await vm.mount(root);

apps/svelte.dev/src/routes/tutorial/[slug]/+page.svelte

@@ -2,7 +2,7 @@
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import { SplitPane } from '@rich_harris/svelte-split-pane';
 	import { Icon } from '@sveltejs/site-kit/components';
-	import { reset } from './adapter.js';
+	import { reset } from './adapter.svelte';
 	import Editor from './Editor.svelte';
 	import ContextMenu from './filetree/ContextMenu.svelte';
 	import Filetree from './filetree/Filetree.svelte';

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

@@ -13,10 +13,11 @@
 	import { svelteTheme } from '@sveltejs/repl/theme';
 	import { basicSetup } from 'codemirror';
 	import { onMount, tick } from 'svelte';
-	import { warnings } from './adapter.js';
+	import { adapter_state } from './adapter.svelte';
 	import { autocomplete_for_svelte } from './autocompletion.js';
 	import './codemirror.css';
 	import { files, selected_file, selected_name, update_file } from './state.js';
+	import { toStore } from 'svelte/store';
 
 	/** @type {HTMLDivElement} */
 	let container;
@@ -33,6 +34,8 @@
 	/** @type {import('@codemirror/view').EditorView} */
 	let editor_view;
 
+	const warnings = toStore(() => adapter_state.warnings);
+
 	const extensions = [
 		basicSetup,
 		EditorState.tabSize.of(2),

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { load_webcontainer, reset } from './adapter.js';
+	import { load_webcontainer, reset } from './adapter.svelte';
 	import { files } from './state.js';
 
 	interface Props {

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

@@ -5,7 +5,13 @@
 	import { onMount } from 'svelte';
 	import Chrome from './Chrome.svelte';
 	import Loading from './Loading.svelte';
-	import { base, error, logs, progress, subscribe } from './adapter.js';
+	import { adapter_state, subscribe } from './adapter.svelte';
+	import { toStore } from 'svelte/store';
+
+	const base = toStore(() => adapter_state.base);
+	const error = toStore(() => adapter_state.error);
+	const logs = toStore(() => adapter_state.logs);
+	const progress = toStore(() => adapter_state.progress);
 
 	/** @type {import('$lib/tutorial').Exercise} */
 	export let exercise;

apps/svelte.dev/src/routes/tutorial/[slug]/OutputRollup.svelte

@@ -5,7 +5,10 @@
 	import { theme } from '@sveltejs/site-kit/stores';
 	import Chrome from './Chrome.svelte';
 	import Loading from './Loading.svelte';
-	import { bundle, logs, progress } from './adapter.js';
+	import { adapter_state } from './adapter.svelte';
+	import { toStore } from 'svelte/store';
+
+	const bundle = toStore(() => adapter_state.bundle);
 
 	let initial = $state(true);
 	let terminal_visible = $state(false);
@@ -19,13 +22,17 @@
 		<Viewer {bundle} theme={$theme.current} />
 	{/if}
 
-	{#if $progress.value !== 1}
+	{#if adapter_state.progress.value !== 1}
 		<!-- TODO is there any startup error we should worry about and forward to the Loading component? -->
-		<Loading {initial} progress={$progress.value} status={$progress.text} />
+		<Loading
+			{initial}
+			progress={adapter_state.progress.value}
+			status={adapter_state.progress.text}
+		/>
 	{/if}
 
 	<div class="terminal" class:visible={terminal_visible}>
-		{#each $logs as log}
+		{#each adapter_state.logs as log}
 			<div>{@html log}</div>
 		{/each}
 	</div>