simplify a whole bunch of stuff

Author: Rich-Harris

sites/svelte-5-preview/src/lib/Output/Compiler.js

@@ -40,9 +40,9 @@ export default class Compiler {
 
 	/**
 	 * @param {import('$lib/types').File} file
-	 * @param {import('svelte/types/compiler').CompileOptions} options
+	 * @param {import('svelte/compiler').CompileOptions} options
 	 * @param {boolean} return_ast
-	 * @returns
+	 * @returns {Promise<import('$lib/workers/workers').CompileMessageData>}
 	 */
 	compile(file, options, return_ast) {
 		return new Promise((fulfil) => {

sites/svelte-5-preview/src/lib/Output/Output.svelte

@@ -1,16 +1,12 @@
 <script>
 	import { get_repl_context } from '$lib/context.js';
-	import { BROWSER } from 'esm-env';
 	import { marked } from 'marked';
 	import CodeMirror from '../CodeMirror.svelte';
 	import AstView from './AstView.svelte';
-	import Compiler from './Compiler.js';
 	import CompilerOptions from './CompilerOptions.svelte';
 	import PaneWithPanel from './PaneWithPanel.svelte';
 	import Viewer from './Viewer.svelte';
 
-	export let svelteUrl;
-
 	/** @type {string | null} */
 	export let status;
 
@@ -35,62 +31,29 @@
 	/** @type {'light' | 'dark'} */
 	export let previewTheme;
 
-	/**
-	 * @param {import('$lib/types').File} file
-	 * @param {import('svelte/compiler').CompileOptions} options
-	 */
-	export async function set(file, options) {
-		selected_type = file.type;
+	/** @type {import('../types').File | null} */
+	export let selected;
+
+	/** @type {import('../workers/workers').CompileMessageData | null} */
+	export let compiled;
 
-		if (file.type === 'json') {
+	$: if (selected) {
+		if (selected.type === 'json') {
 			js_editor.set({ code: `/* Select a component to see its compiled code */`, lang: 'js' });
 			css_editor.set({ code: `/* Select a component to see its compiled code */`, lang: 'css' });
-			return;
-		}
-
-		if (file.type === 'md') {
-			markdown = marked(file.source);
-			return;
 		}
 
-		if (!compiler) return console.error('Compiler not initialized.');
-
-		const compiled = await compiler.compile(file, options, showAst);
-		if (!js_editor) return; // unmounted
-
-		js_editor.set({
-			code: compiled.js,
-			lang: 'js'
-		});
-		css_editor.set({ code: compiled.css, lang: 'css' });
-		ast = compiled.ast;
-	}
-
-	/**
-	 * @param {import('$lib/types').File} selected
-	 * @param {import('svelte/compiler').CompileOptions} options
-	 */
-	export async function update(selected, options) {
-		if (selected.type === 'json') return;
-
-		if (selected.type === 'md') {
+		else if (selected.type=== 'md') {
 			markdown = marked(selected.source);
-			return;
 		}
 
-		if (!compiler) return console.error('Compiler not initialized.');
-
-		const { result, metadata } = await compiler.compile(selected, options, showAst);
-
-		js_editor.update({ code: result.js, lang: 'js' });
-		css_editor.update({ code: result.css, lang: 'css' });
-		$runes_mode = metadata?.runes;
-		ast = result.ast;
+		else if (compiled) {
+			js_editor.set({ code: compiled.result.js, lang: 'js' });
+			css_editor.set({ code: compiled.result.css, lang: 'css' });
+		}
 	}
 
-	const { module_editor, runes_mode } = get_repl_context();
-
-	const compiler = BROWSER ? new Compiler(svelteUrl) : null;
+	const { module_editor } = get_repl_context();
 
 	/** @type {CodeMirror} */
 	let js_editor;
@@ -100,15 +63,14 @@
 
 	/** @type {'result' | 'js' | 'css' | 'ast'} */
 	let view = 'result';
-	let selected_type = '';
 	let markdown = '';
 
 	/** @type {import('svelte/types/compiler/interfaces').Ast} */
 	let ast;
 </script>
 
 <div class="view-toggle">
-	{#if selected_type === 'md'}
+	{#if selected?.type === 'md'}
 		<button class="active">Markdown</button>
 	{:else}
 		<button class:active={view === 'result'} on:click={() => (view = 'result')}>Result</button>
@@ -121,7 +83,7 @@
 </div>
 
 <!-- component viewer -->
-<div class="tab-content" class:visible={selected_type !== 'md' && view === 'result'}>
+<div class="tab-content" class:visible={selected?.type !== 'md' && view === 'result'}>
 	<Viewer
 		bind:error={runtimeError}
 		{status}
@@ -133,7 +95,7 @@
 </div>
 
 <!-- js output -->
-<div class="tab-content" class:visible={selected_type !== 'md' && view === 'js'}>
+<div class="tab-content" class:visible={selected?.type !== 'md' && view === 'js'}>
 	{#if embedded}
 		<CodeMirror bind:this={js_editor} errorLoc={sourceErrorLoc} readonly />
 	{:else}
@@ -150,22 +112,22 @@
 </div>
 
 <!-- css output -->
-<div class="tab-content" class:visible={selected_type !== 'md' && view === 'css'}>
+<div class="tab-content" class:visible={selected?.type !== 'md' && view === 'css'}>
 	<CodeMirror bind:this={css_editor} errorLoc={sourceErrorLoc} readonly />
 </div>
 
 <!-- ast output -->
 {#if showAst}
-	<div class="tab-content" class:visible={selected_type !== 'md' && view === 'ast'}>
+	<div class="tab-content" class:visible={selected?.type !== 'md' && view === 'ast'}>
 		<!-- ast view interacts with the module editor, wait for it first -->
 		{#if $module_editor}
-			<AstView {ast} autoscroll={selected_type !== 'md' && view === 'ast'} />
+			<AstView {ast} autoscroll={selected?.type !== 'md' && view === 'ast'} />
 		{/if}
 	</div>
 {/if}
 
 <!-- markdown output -->
-<div class="tab-content" class:visible={selected_type === 'md'}>
+<div class="tab-content" class:visible={selected?.type === 'md'}>
 	<iframe title="Markdown" srcdoc={markdown} />
 </div>
 

sites/svelte-5-preview/src/lib/Repl.svelte

@@ -11,6 +11,7 @@
 	import Output from './Output/Output.svelte';
 	import { set_repl_context } from './context.js';
 	import { get_full_filename } from './utils.js';
+	import Compiler from './Output/Compiler.js';
 
 	export let packagesUrl = 'https://unpkg.com';
 	export let svelteUrl = `${BROWSER ? location.origin : ''}/svelte`;
@@ -64,32 +65,6 @@
 		$files = $files.map((val) => ({ ...val, modified: false }));
 	}
 
-	/** @param {{ files: import('./types').File[], css?: string }} data */
-	export function update(data) {
-		$files = data.files;
-
-		const matched_file = data.files.find((file) => get_full_filename(file) === $selected_name);
-
-		$selected_name = matched_file ? get_full_filename(matched_file) : 'App.svelte';
-
-		injectedCSS = data.css ?? '';
-
-		if (matched_file) {
-			$module_editor?.update({
-				code: matched_file.source,
-				lang: matched_file.type
-			});
-
-			$output?.update?.(matched_file, $compile_options);
-
-			$module_editor?.clearEditorState();
-		}
-
-		populate_editor_state();
-
-		dispatch('change', { files: $files });
-	}
-
 	/** @type {ReturnType<typeof createEventDispatcher<{ change: { files: import('./types').File[] } }>>} */
 	const dispatch = createEventDispatcher();
 
@@ -135,9 +110,6 @@
 	/** @type {ReplContext['module_editor']} */
 	const module_editor = writable(null);
 
-	/** @type {ReplContext['output']} */
-	const output = writable(null);
-
 	/** @type {ReplContext['toggleable']} */
 	const toggleable = writable(false);
 
@@ -160,7 +132,6 @@
 		compile_options,
 		cursor_pos,
 		module_editor,
-		output,
 		toggleable,
 		runes_mode,
 
@@ -206,8 +177,6 @@
 			$module_editor?.clearEditorState();
 		}
 
-		$output?.set($selected, $compile_options);
-
 		is_select_changing = false;
 	}
 
@@ -273,8 +242,18 @@
 		}
 	}
 
-	$: if ($output && $selected) {
-		$output?.update?.($selected, $compile_options);
+	const compiler = BROWSER ? new Compiler(svelteUrl) : null;
+
+	/** @type {import('./workers/workers').CompileMessageData | null} */
+	let compiled = null;
+
+	$: if (compiler && $selected) {
+		if ($selected.type === 'svelte' || $selected.type === 'js') {
+			compiler.compile($selected, $compile_options, false).then((data) => {
+				compiled = data;
+				$runes_mode = data.metadata?.runes ?? false;
+			});
+		}
 	}
 
 	$: mobile = width < 540;
@@ -347,15 +326,15 @@
 
 			<section slot="b" style="height: 100%;">
 				<Output
-					bind:this={$output}
-					{svelteUrl}
 					status={status_visible ? status : null}
 					{embedded}
 					{relaxed}
 					{injectedJS}
 					{injectedCSS}
 					{showAst}
 					{previewTheme}
+					selected={$selected}
+					{compiled}
 				/>
 			</section>
 		</SplitPane>

sites/svelte-5-preview/src/lib/types.d.ts

@@ -47,7 +47,6 @@ export type ReplState = {
 	cursor_pos: number;
 	toggleable: boolean;
 	module_editor: import('./CodeMirror.svelte').default | null;
-	output: import('./Output/Output.svelte').default | null;
 	runes_mode: boolean;
 };
 
@@ -62,7 +61,6 @@ export type ReplContext = {
 	cursor_pos: Writable<ReplState['cursor_pos']>;
 	toggleable: Writable<ReplState['toggleable']>;
 	module_editor: Writable<ReplState['module_editor']>;
-	output: Writable<ReplState['output']>;
 	runes_mode: Writable<ReplState['runes_mode']>;
 
 	EDITOR_STATE_MAP: Map<string, EditorState>;

sites/svelte-5-preview/src/lib/workers/compiler/index.js

@@ -62,13 +62,14 @@ function compile({ id, source, options, return_ast }) {
 				generate: options.generate
 			});
 
-			const { js, css, metadata } = compiled;
+			const { js, css, warnings, metadata } = compiled;
 
 			return {
 				id,
 				result: {
 					js: js.code,
-					css: css?.code || `/* Add a <sty` + `le> tag to see compiled CSS */`
+					css: css?.code || `/* Add a <sty` + `le> tag to see compiled CSS */`,
+					warnings
 				},
 				metadata
 			};
@@ -83,7 +84,8 @@ function compile({ id, source, options, return_ast }) {
 					id,
 					result: {
 						js: compiled.js.code,
-						css
+						css,
+						warnings: compiled.warnings
 					},
 					metadata: compiled.metadata
 				};