get rid of $bundle store

Author: Rich-Harris

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

@@ -3,25 +3,12 @@ import Bundler from '@sveltejs/repl/bundler';
 import * as yootils from 'yootils';
 import type { Adapter } from '$lib/tutorial';
 import type { File, Item } from '@sveltejs/repl/workspace';
-import type { BundleResult } from '@sveltejs/repl';
 
-/** Rollup bundler singleton */
-let bundler: Bundler;
+let done = false;
 
 export const state = new (class RollupState {
 	progress = $state.raw({ value: 0, text: 'initialising' });
-	bundle = $state.raw<BundleResult | null>(null);
-})();
-
-/**
- * @returns {Promise<import('$lib/tutorial').Adapter>}
- */
-export async function create(): Promise<Adapter> {
-	state.progress = { value: 0, text: 'loading files' };
-
-	let done = false;
-
-	bundler ??= new Bundler({
+	bundler = new Bundler({
 		svelte_version: 'latest',
 		onstatus(val) {
 			if (!done && val === null) {
@@ -30,14 +17,19 @@ export async function create(): Promise<Adapter> {
 			}
 		}
 	});
+})();
 
+/**
+ * @returns {Promise<import('$lib/tutorial').Adapter>}
+ */
+export async function create(): Promise<Adapter> {
 	state.progress = { value: 0.5, text: 'loading svelte compiler' };
 
 	/** Paths and contents of the currently loaded file stubs */
 	let current_files: Item[] = [];
 
 	async function compile() {
-		state.bundle = await bundler.bundle(
+		await state.bundler.bundle(
 			current_files
 				// TODO we can probably remove all the SvelteKit specific stuff from the tutorial content once this settles down
 				.filter((f): f is File => f.name.startsWith('/src/lib/') && f.type === 'file')

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

@@ -6,9 +6,6 @@
 	import Chrome from './Chrome.svelte';
 	import Loading from './Loading.svelte';
 	import { adapter_state, update } from './adapter.svelte';
-	import { toStore } from 'svelte/store';
-
-	const bundle = toStore(() => adapter_state.bundle);
 
 	let terminal_visible = $state(false);
 	let logs = $state<Log[]>([]);
@@ -34,7 +31,7 @@
 			relaxed
 			can_escape
 			onLog={(l: Log[]) => (logs = l)}
-			{bundle}
+			bundler={adapter_state.bundler}
 			theme={theme.current}
 			injectedCSS="@import '/tutorial/shared.css';"
 			error={null}

apps/svelte.dev/src/routes/tutorial/[...slug]/adapter.svelte.ts

@@ -21,8 +21,8 @@ export const adapter_state = new (class {
 	/** Logs from the web container instance. Irrelevant for Rollup */
 	logs = $derived(wc_state.logs || []);
 
-	/** Result of a rollup compile. Irrelevant for web containers */
-	bundle = $derived(rollup_state.bundle);
+	/** Irrelevant for web containers */
+	bundler = $derived(rollup_state.bundler);
 
 	/** Startup progress */
 	progress = $derived(

packages/repl/package.json

@@ -29,8 +29,8 @@
 			"default": "./src/lib/index.ts"
 		},
 		"./bundler": {
-			"types": "./src/lib/Bundler.ts",
-			"default": "./src/lib/Bundler.ts"
+			"types": "./src/lib/Bundler.svelte.ts",
+			"default": "./src/lib/Bundler.svelte.ts"
 		},
 		"./editor": {
 			"types": "./src/lib/Editor/Editor.svelte",

packages/repl/src/lib/Bundler.ts renamed to packages/repl/src/lib/Bundler.svelte.ts

@@ -1,11 +1,12 @@
-import type { BundleMessageData, BundleResult } from './workers/workers';
+import type { BundleResult } from './public';
 import type { File } from './Workspace.svelte';
 
 let uid = 1;
 
 export default class Bundler {
 	#worker: Worker;
-	#handlers = new Map<number, (data: BundleMessageData) => void>(); // TODO this is leaky, we don't always remove handlers
+
+	result = $state.raw<BundleResult | null>(null);
 
 	constructor({
 		svelte_version,
@@ -22,7 +23,7 @@ export default class Bundler {
 			type: 'module'
 		});
 
-		this.#worker.onmessage = (event: MessageEvent<BundleMessageData>) => {
+		this.#worker.onmessage = (event) => {
 			if (event.data.type === 'status') {
 				onstatus(event.data.message);
 				return;
@@ -39,28 +40,20 @@ export default class Bundler {
 			}
 
 			onstatus(null);
-
-			const handler = this.#handlers.get(event.data.uid)!;
-			this.#handlers.delete(event.data.uid);
-
-			handler(event.data);
+			this.result = event.data;
 		};
 
 		this.#worker.postMessage({ type: 'init', svelte_version });
 	}
 
-	bundle(files: File[], options: { tailwind?: boolean }): Promise<BundleResult> {
-		return new Promise<any>((fulfil) => {
-			this.#handlers.set(uid, fulfil);
-
-			this.#worker.postMessage({
-				uid,
-				type: 'bundle',
-				files,
-				options
-			});
-
-			uid += 1;
+	bundle(files: File[], options: { tailwind?: boolean }) {
+		this.#worker.postMessage({
+			uid,
+			type: 'bundle',
+			files,
+			options
 		});
+
+		uid += 1;
 	}
 }

packages/repl/src/lib/Output/Viewer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { get_repl_context } from '../context';
 	import { BROWSER } from 'esm-env';
-	import { onMount } from 'svelte';
+	import { onMount, untrack } from 'svelte';
 	import Message from '../Message.svelte';
 	import PaneWithPanel from './PaneWithPanel.svelte';
 	import ReplProxy from './ReplProxy.js';
@@ -11,8 +11,8 @@
 	import srcdoc_styles from './srcdoc/styles.css?raw';
 	import ErrorOverlay from './ErrorOverlay.svelte';
 	import type { CompileError } from 'svelte/compiler';
-	import type { Writable } from 'svelte/store';
 	import type { BundleResult } from '$lib/public';
+	import type Bundler from '$lib/Bundler.svelte';
 
 	interface Props {
 		error: Error | null;
@@ -27,8 +27,8 @@
 		/** Any additional CSS you may want to inject */
 		injectedCSS?: string;
 		theme: 'light' | 'dark';
-		/** A store containing the current bundle result. Takes precedence over REPL context, if set */
-		bundle?: Writable<BundleResult | null> | undefined;
+		/** The current bundler. Takes precedence over REPL context, if set */
+		bundler?: Bundler;
 		/** Called everytime a log is pushed. If this is set, the built-in console coming with the Viewer isn't shown */
 		onLog?: ((logs: Log[]) => void) | undefined;
 	}
@@ -41,12 +41,12 @@
 		injectedJS = '',
 		injectedCSS = '',
 		theme,
-		bundle = $bindable(undefined),
+		bundler,
 		onLog = undefined
 	}: Props = $props();
 
-	const context = get_repl_context();
-	bundle ??= context.bundle;
+	let context = get_repl_context();
+	let bundle = $derived((bundler ?? context?.bundler)?.result);
 
 	let logs: Log[] = $state([]);
 	let log_group_stack: Log[][] = [];
@@ -119,13 +119,13 @@
 		}
 	});
 
-	async function apply_bundle($bundle: BundleResult | null | undefined) {
-		if (!$bundle) return;
+	async function apply_bundle(bundle: BundleResult | null) {
+		if (!bundle) return;
 
 		try {
 			clear_logs();
 
-			if (!$bundle.error) {
+			if (!bundle.error) {
 				await proxy?.eval(
 					`
 					${injectedJS}
@@ -175,7 +175,7 @@
 						window._svelteTransitionManager = null;
 					}
 
-					const __repl_exports = ${$bundle.client?.code};
+					const __repl_exports = ${bundle.client?.code};
 					{
 						const { mount, unmount, App, untrack } = __repl_exports;
 
@@ -204,7 +204,7 @@
 					}
 					//# sourceURL=playground:output
 				`,
-					$bundle?.tailwind ?? srcdoc_styles
+					bundle?.tailwind ?? srcdoc_styles
 				);
 				error = null;
 			}
@@ -218,7 +218,12 @@
 
 	$effect(() => {
 		if (ready) {
-			apply_bundle($bundle);
+			const b = bundle;
+
+			// TODO tidy up
+			untrack(() => {
+				apply_bundle(b);
+			});
 		}
 	});
 
@@ -235,7 +240,7 @@
 	});
 
 	function show_error(e: CompileError & { loc: { line: number; column: number } }) {
-		const map = $bundle?.client?.map;
+		const map = bundle?.client?.map;
 
 		// @ts-ignore INVESTIGATE
 		const loc = map && getLocationFromStack(e.stack, map);
@@ -316,8 +321,8 @@
 		srcdoc={BROWSER ? srcdoc : ''}
 	></iframe>
 
-	{#if $bundle?.error}
-		<ErrorOverlay error={$bundle.error} />
+	{#if bundle?.error}
+		<ErrorOverlay error={bundle.error} />
 	{/if}
 {/snippet}
 
@@ -351,7 +356,7 @@
 	<div class="overlay">
 		{#if error}
 			<Message kind="error" details={error} />
-		{:else if status || !$bundle}
+		{:else if status || !bundle}
 			<Message kind="info" truncate>{status || 'loading Svelte compiler...'}</Message>
 		{/if}
 	</div>

packages/repl/src/lib/Repl.svelte

@@ -3,7 +3,7 @@
 	import { ScreenToggle } from '@sveltejs/site-kit/components';
 	import { BROWSER } from 'esm-env';
 	import { writable } from 'svelte/store';
-	import Bundler from './Bundler.js';
+	import Bundler from './Bundler.svelte.js';
 	import ComponentSelector from './Input/ComponentSelector.svelte';
 	import Output from './Output/Output.svelte';
 	import { set_repl_context } from './context.js';
@@ -67,7 +67,7 @@
 	// TODO get rid
 	export function toJSON() {
 		return {
-			imports: $bundle?.imports ?? [],
+			imports: bundler.result?.imports ?? [],
 			files: workspace.files,
 			tailwind: workspace.tailwind
 		};
@@ -83,18 +83,10 @@
 		workspace.mark_saved();
 	}
 
-	const bundle: ReplContext['bundle'] = writable(null);
 	const toggleable: ReplContext['toggleable'] = writable(false);
 
-	set_repl_context({
-		bundle,
-		toggleable,
-		workspace,
-		svelteVersion
-	});
-
 	async function rebundle() {
-		$bundle = await bundler!.bundle(workspace.files as File[], {
+		bundler!.bundle(workspace.files as File[], {
 			tailwind: workspace.tailwind
 		});
 	}
@@ -143,6 +135,13 @@
 			})
 		: null;
 
+	set_repl_context({
+		bundler,
+		toggleable,
+		workspace,
+		svelteVersion
+	});
+
 	function before_unload(event: BeforeUnloadEvent) {
 		if (Object.keys(workspace.modified).length > 0) {
 			event.preventDefault();

packages/repl/src/lib/types.d.ts

@@ -31,12 +31,12 @@ export type File = {
 
 export type ReplState = {
 	bundle: BundleResult | null;
-	bundler: import('./Bundler').default | null;
+	bundler: import('./Bundler.svelte').default | null;
 	toggleable: boolean;
 };
 
 export type ReplContext = {
-	bundle: Writable<ReplState['bundle']>;
+	bundler: Bundler;
 	toggleable: Writable<ReplState['toggleable']>;
 	workspace: Workspace;
 	svelteVersion: string;

packages/repl/src/lib/workers/bundler/index.ts

@@ -12,7 +12,7 @@ import svg from './plugins/svg';
 import replace from './plugins/replace';
 import loop_protect from './plugins/loop-protect';
 import type { Plugin, RollupCache, TransformResult } from '@rollup/browser';
-import type { BundleMessageData, BundleOptions, BundleResult } from '../workers';
+import type { BundleMessageData, BundleOptions } from '../workers';
 import type { Warning } from '../../types';
 import type { CompileError, CompileResult } from 'svelte/compiler';
 import type { File } from '../../Workspace.svelte';
@@ -28,6 +28,7 @@ import {
 	resolve_subpath,
 	resolve_version
 } from '../npm';
+import type { BundleResult } from '$lib/public';
 
 // hack for magic-string and rollup inline sourcemaps
 // do not put this into a separate module and import it, would be treeshaken in prod

packages/repl/src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Repl } from '$lib/Repl.svelte';
+	import Repl from '$lib/Repl.svelte';
 	import { onMount } from 'svelte';
 	import '@sveltejs/site-kit/styles/index.css';