typecheck packages/repl (#44)

* fix some type errors

* well that was broken

* fixes

* fix

* fixes

* fixes

* fix

* clean bill of health

* fix

Author: Rich-Harris

packages/repl/package.json

@@ -46,6 +46,7 @@
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "4.0.0-next.3",
+		"@types/estree": "^1.0.5",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.4",
 		"publint": "^0.1.9",

packages/repl/src/lib/Input/ModuleEditor.svelte

@@ -2,10 +2,10 @@
 	import { get_repl_context } from '$lib/context.js';
 	import CodeMirror from '../CodeMirror.svelte';
 
-	/** @type {any} */ // TODO
+	/** @type {import('svelte/compiler').CompileError} */
 	export let error;
 
-	/** @type {any[]} */ // TODO
+	/** @type {import('svelte/compiler').Warning[]} */
 	export let warnings;
 
 	/** @type {boolean} */

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

@@ -3,10 +3,10 @@
 	import { tick } from 'svelte';
 
 	export let key = '';
-	/** @type {import('svelte/types/compiler/interfaces').Ast} */
+	/** @type {import('svelte/compiler').CompileResult['ast']} */
 	export let value;
 	export let collapsed = true;
-	/** @type {import('svelte/types/compiler/interfaces').Ast[]} */
+	/** @type {import('svelte/compiler').CompileResult['ast'][]} */
 	export let path_nodes = [];
 	export let autoscroll = true;
 

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

@@ -3,7 +3,7 @@
 	import AstNode from './AstNode.svelte';
 	import { cursorIndex } from '../CodeMirror.svelte';
 
-	/** @type {import('svelte/types/compiler/interfaces').Ast} */
+	/** @type {import('svelte/compiler').CompileResult['ast']} */
 	export let ast;
 	export let autoscroll = true;
 
@@ -15,8 +15,8 @@
 
 	/**
 	 * @param {number} cursor
-	 * @param {import('svelte/types/compiler/interfaces').Ast[]} paths
-	 * @returns {import('svelte/types/compiler/interfaces').Ast[] | undefined}
+	 * @param {import('svelte/compiler').CompileResult['ast'][]} paths
+	 * @returns {import('svelte/compiler').CompileResult['ast'][] | undefined}
 	 */
 	function find_deepest_path(cursor, paths) {
 		const value = paths[paths.length - 1];
@@ -42,7 +42,7 @@
 		}
 	}
 
-	/** @param {import('svelte/types/compiler/interfaces').Ast} ast */
+	/** @param {import('svelte/compiler').CompileResult['ast']} ast */
 	function get_ast_max_end(ast) {
 		let max_end = 0;
 

packages/repl/src/lib/Output/Compiler.js

@@ -24,14 +24,14 @@ export default class Compiler {
 		this.worker.addEventListener(
 			'message',
 			/**
-			 * @param {MessageEvent<import('$lib/workers/workers').CompileMessageData>} event
+			 * @param {MessageEvent<any>} event
 			 */
 			(event) => {
 				const handler = this.handlers.get(event.data.id);
 
 				if (handler) {
 					// if no handler, was meant for a different REPL
-					handler(event.data);
+					handler(event.data.result);
 					this.handlers.delete(event.data.id);
 				}
 			}
@@ -42,7 +42,7 @@ export default class Compiler {
 	 * @param {import('$lib/types').File} file
 	 * @param {import('svelte/compiler').CompileOptions} options
 	 * @param {boolean} return_ast
-	 * @returns {Promise<import('$lib/workers/workers').CompileMessageData>}
+	 * @returns {Promise<import('$lib/workers/workers').CompilerOutput>}
 	 */
 	compile(file, options, return_ast) {
 		return new Promise((fulfil) => {
@@ -53,23 +53,25 @@ export default class Compiler {
 			this.worker.postMessage({
 				id,
 				type: 'compile',
-				source: file.source,
-				options: Object.assign(
-					{
-						name: file.name,
-						filename: `${file.name}.${file.type}`
-					},
-					options
-				),
-				entry: file.name === 'App',
-				return_ast
+				payload: {
+					source: file.source,
+					options: Object.assign(
+						{
+							name: file.name,
+							filename: `${file.name}.${file.type}`
+						},
+						options
+					),
+					entry: file.name === 'App',
+					return_ast
+				}
 			});
 		});
 	}
 
 	/**
 	 * @param {import('$lib/types').File} file
-	 * @returns {Promise<import('$lib/workers/workers').MigrateMessageData>}
+	 * @returns {Promise<import('$lib/workers/workers').MigrateOutput>}
 	 */
 	migrate(file) {
 		return new Promise((fulfil) => {
@@ -80,7 +82,9 @@ export default class Compiler {
 			this.worker.postMessage({
 				id,
 				type: 'migrate',
-				source: file.source
+				payload: {
+					source: file.source
+				}
 			});
 		});
 	}

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

@@ -31,18 +31,18 @@
 	/** @type {import('../types').File | null} */
 	export let selected;
 
-	/** @type {import('../workers/workers').CompileMessageData | null} */
+	/** @type {import('../workers/workers').CompilerOutput | null} */
 	export let compiled;
 
 	$: if (selected && js_editor && css_editor) {
 		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' });
 		} else if (selected.type === 'md') {
-			markdown = marked(selected.source);
+			markdown = /** @type {string} */ (marked(selected.source));
 		} else if (compiled) {
-			js_editor.set({ code: compiled.result.js, lang: 'js' });
-			css_editor.set({ code: compiled.result.css, lang: 'css' });
+			js_editor.set({ code: compiled.js, lang: 'js' });
+			css_editor.set({ code: compiled.css, lang: 'css' });
 		}
 	}
 
@@ -58,7 +58,7 @@
 	let view = 'result';
 	let markdown = '';
 
-	$: ast = compiled?.result?.ast;
+	$: ast = compiled?.ast;
 </script>
 
 <div class="view-toggle">

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

@@ -7,12 +7,12 @@
 	/** @type {string} */
 	export let panel;
 
-	/** @type {Exclude<import('@rich_harris/svelte-split-pane/dist/SplitPane.svelte').SplitPaneProps['max'], undefined>} */
+	/** @type {Exclude<import('svelte').ComponentProps<SplitPane>['pos'], undefined>} */
 	export let pos = '90%';
 
 	$: previous_pos = Math.min(+pos.replace(UNIT_REGEX, '$1'), 70);
 
-	/** @type {Exclude<import('@rich_harris/svelte-split-pane/dist/SplitPane.svelte').SplitPaneProps['max'], undefined>} */
+	/** @type {Exclude<import('svelte').ComponentProps<SplitPane>['max'], undefined>} */
 	let max = '90%';
 
 	// we can't bind to the spring itself, but we

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

@@ -183,7 +183,7 @@
 	}`;
 
 	/**
-	 * @param {import('$lib/types').Error & { loc: { line: number; column: number } }} e
+	 * @param {import('svelte/compiler').CompileError & { loc: { line: number; column: number } }} e
 	 */
 	function show_error(e) {
 		const map = $bundle?.client?.map;

packages/repl/src/lib/Repl.svelte

@@ -27,7 +27,6 @@
 	export let previewTheme = 'light';
 	export let showModified = false;
 	export let showAst = false;
-	export let autocomplete = true;
 	/** @type {boolean} */
 	export let vim;
 
@@ -267,7 +266,7 @@
 
 	const compiler = BROWSER ? new Compiler(svelteUrl) : null;
 
-	/** @type {import('./workers/workers').CompileMessageData | null} */
+	/** @type {import('./workers/workers').CompilerOutput | null} */
 	let compiled = null;
 
 	/**
@@ -279,7 +278,7 @@
 
 		if ($selected.type === 'svelte' || $selected.type === 'js') {
 			compiled = await compiler.compile($selected, $compile_options, true);
-			runes = compiled.result.metadata?.runes ?? false;
+			runes = compiled.metadata?.runes ?? false;
 		} else {
 			runes = false;
 		}
@@ -350,12 +349,7 @@
 		>
 			<section slot="a">
 				<ComponentSelector show_modified={showModified} {runes} on:add on:remove />
-				<ModuleEditor
-					{autocomplete}
-					error={compiled?.result.error}
-					warnings={compiled?.result.warnings ?? []}
-					{vim}
-				/>
+				<ModuleEditor error={compiled?.error} warnings={compiled?.warnings ?? []} {vim} />
 			</section>
 
 			<section slot="b" style="height: 100%;">

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

@@ -26,15 +26,6 @@ const ready = new Promise((f) => {
 	fulfil_ready = f;
 });
 
-/**
- * @type {{
- *   compile: typeof import('svelte/compiler').compile;
- *   compileModule: typeof import('svelte/compiler').compileModule;
- *   VERSION: string;
- * }}
- */
-let svelte;
-
 self.addEventListener(
 	'message',
 	/** @param {MessageEvent<import('../workers.js').BundleMessageData>} event */ async (event) => {
@@ -48,8 +39,6 @@ self.addEventListener(
 				const compiler = await fetch(`${svelte_url}/compiler/index.js`).then((r) => r.text());
 				(0, eval)(compiler + '\n//# sourceURL=compiler/index.js@' + version);
 
-				svelte = globalThis.svelte;
-
 				fulfil_ready();
 				break;
 			}
@@ -174,13 +163,12 @@ async function resolve_from_pkg(pkg, subpath, uid, pkg_url_base) {
 	// modern
 	if (pkg.exports) {
 		try {
-			const [resolved] =
-				resolve.exports(pkg, subpath, {
-					browser: true,
-					conditions: ['svelte', 'development']
-				}) ?? [];
+			const resolved = resolve.exports(pkg, subpath, {
+				browser: true,
+				conditions: ['svelte', 'development']
+			});
 
-			return resolved;
+			return resolved?.[0];
 		} catch {
 			throw `no matched export path was found in "${pkg.name}/package.json"`;
 		}
@@ -451,7 +439,9 @@ async function get_bundle(uid, mode, cache, local_files_lookup) {
 					'process.env.NODE_ENV': JSON.stringify('production')
 				})
 			],
-			inlineDynamicImports: true,
+			output: {
+				inlineDynamicImports: true
+			},
 			onwarn(warning) {
 				all_warnings.push({
 					message: warning.message