more js -> ts conversion (#48)

* convert some .js files to .ts

* more

* fix

Author: Rich-Harris

packages/repl/src/lib/Bundler.js

@@ -0,0 +1,68 @@
+import type { File } from './types';
+import Worker from './workers/bundler/index.js?worker';
+import type { BundleMessageData } from './workers/workers';
+
+const workers = new Map();
+
+let uid = 1;
+
+export default class Bundler {
+	worker: Worker;
+	handlers: Map<number, (data: BundleMessageData) => void>;
+
+	constructor({
+		packages_url,
+		svelte_url,
+		onstatus
+	}: {
+		packages_url: string;
+		svelte_url: string;
+		onstatus: (val: string | null) => void;
+	}) {
+		const hash = `${packages_url}:${svelte_url}`;
+
+		if (!workers.has(hash)) {
+			const worker = new Worker();
+			worker.postMessage({ type: 'init', packages_url, svelte_url });
+			workers.set(hash, worker);
+		}
+
+		this.worker = workers.get(hash);
+
+		this.handlers = new Map();
+
+		this.worker.addEventListener('message', (event: MessageEvent<BundleMessageData>) => {
+			const handler = this.handlers.get(event.data.uid);
+
+			if (handler) {
+				// if no handler, was meant for a different REPL
+				if (event.data.type === 'status') {
+					onstatus(event.data.message);
+					return;
+				}
+
+				onstatus(null);
+				handler(event.data);
+				this.handlers.delete(event.data.uid);
+			}
+		});
+	}
+
+	bundle(files: File[]) {
+		return new Promise((fulfil) => {
+			this.handlers.set(uid, fulfil);
+
+			this.worker.postMessage({
+				uid,
+				type: 'bundle',
+				files
+			});
+
+			uid += 1;
+		});
+	}
+
+	destroy() {
+		this.worker.terminate();
+	}
+}

packages/repl/src/lib/Bundler.ts

@@ -1,18 +1,17 @@
+import type { File } from '$lib/types';
+import type { CompileOptions } from 'svelte/compiler';
 import Worker from '../workers/compiler/index.js?worker';
+import type { CompilerOutput, MigrateOutput } from '$lib/workers/workers';
 
 const workers = new Map();
 
 let uid = 1;
 
 export default class Compiler {
-	/** @type {Worker} */
-	worker;
+	worker: Worker;
+	handlers: Map<number, (...arg: any) => void> = new Map();
 
-	/** @type {Map<number, (...arg: any) => void>} */
-	handlers = new Map();
-
-	/** @param {string} svelte_url */
-	constructor(svelte_url) {
+	constructor(svelte_url: string) {
 		if (!workers.has(svelte_url)) {
 			const worker = new Worker();
 			worker.postMessage({ type: 'init', svelte_url });
@@ -21,30 +20,18 @@ export default class Compiler {
 
 		this.worker = workers.get(svelte_url);
 
-		this.worker.addEventListener(
-			'message',
-			/**
-			 * @param {MessageEvent<any>} event
-			 */
-			(event) => {
-				const handler = this.handlers.get(event.data.id);
+		this.worker.addEventListener('message', (event: MessageEvent<any>) => {
+			const handler = this.handlers.get(event.data.id);
 
-				if (handler) {
-					// if no handler, was meant for a different REPL
-					handler(event.data.result);
-					this.handlers.delete(event.data.id);
-				}
+			if (handler) {
+				// if no handler, was meant for a different REPL
+				handler(event.data.result);
+				this.handlers.delete(event.data.id);
 			}
-		);
+		});
 	}
 
-	/**
-	 * @param {import('$lib/types').File} file
-	 * @param {import('svelte/compiler').CompileOptions} options
-	 * @param {boolean} return_ast
-	 * @returns {Promise<import('$lib/workers/workers').CompilerOutput>}
-	 */
-	compile(file, options, return_ast) {
+	compile(file: File, options: CompileOptions, return_ast: boolean): Promise<CompilerOutput> {
 		return new Promise((fulfil) => {
 			const id = uid++;
 
@@ -69,11 +56,7 @@ export default class Compiler {
 		});
 	}
 
-	/**
-	 * @param {import('$lib/types').File} file
-	 * @returns {Promise<import('$lib/workers/workers').MigrateOutput>}
-	 */
-	migrate(file) {
+	migrate(file: File): Promise<MigrateOutput> {
 		return new Promise((fulfil) => {
 			const id = uid++;
 

packages/repl/src/lib/Output/Compiler.js renamed to packages/repl/src/lib/Output/Compiler.ts

@@ -1,17 +1,14 @@
+import type { Handlers } from './proxy';
+
 let uid = 1;
 
 export default class ReplProxy {
-	/** @type {HTMLIFrameElement} */
-	iframe;
-
-	/** @type {import("./proxy").Handlers} */
-	handlers;
-
-	/** @type {Map<number, { resolve: (value: any) => void, reject: (value: any) => void }>} */
-	pending_cmds = new Map();
+	iframe: HTMLIFrameElement;
+	handlers: Handlers;
+	pending_cmds: Map<number, { resolve: (value: any) => void; reject: (value: any) => void }> =
+		new Map();
 
-	/** @param {MessageEvent<any>} event */
-	handle_event = (event) => {
+	handle_event = (event: MessageEvent<any>) => {
 		if (event.source !== this.iframe.contentWindow) return;
 
 		const { action, args } = event.data;
@@ -31,11 +28,7 @@ export default class ReplProxy {
 		}
 	};
 
-	/**
-	 * @param {HTMLIFrameElement} iframe
-	 * @param {import("./proxy").Handlers} handlers
-	 */
-	constructor(iframe, handlers) {
+	constructor(iframe: HTMLIFrameElement, handlers: Handlers) {
 		this.iframe = iframe;
 		this.handlers = handlers;
 
@@ -46,11 +39,7 @@ export default class ReplProxy {
 		window.removeEventListener('message', this.handle_event);
 	}
 
-	/**
-	 * @param {string} action
-	 * @param {any} args
-	 */
-	iframe_command(action, args) {
+	iframe_command(action: string, args: any) {
 		return new Promise((resolve, reject) => {
 			const cmd_id = uid++;
 
@@ -60,10 +49,13 @@ export default class ReplProxy {
 		});
 	}
 
-	/**
-	 * @param {{ action: string; cmd_id: number; message: string; stack: any; args: any; }} cmd_data
-	 */
-	handle_command_message(cmd_data) {
+	handle_command_message(cmd_data: {
+		action: string;
+		cmd_id: number;
+		message: string;
+		stack: any;
+		args: any;
+	}) {
 		let action = cmd_data.action;
 		let id = cmd_data.cmd_id;
 		let handler = this.pending_cmds.get(id);
@@ -85,8 +77,7 @@ export default class ReplProxy {
 		}
 	}
 
-	/** @param {string} script */
-	eval(script) {
+	eval(script: string) {
 		return this.iframe_command('eval', { script });
 	}
 

packages/repl/src/lib/Output/ReplProxy.js renamed to packages/repl/src/lib/Output/ReplProxy.ts

@@ -1,11 +1,7 @@
-import { decode } from '@jridgewell/sourcemap-codec';
-
-/**
- * @param {string} stack
- * @param {import('@jridgewell/sourcemap-codec').SourceMapMappings} map
- * @returns
- */
-export default function getLocationFromStack(stack, map) {
+import type { StartOrEnd } from '$lib/types';
+import { decode, type SourceMapMappings } from '@jridgewell/sourcemap-codec';
+
+export default function getLocationFromStack(stack: string, map: SourceMapMappings) {
 	if (!stack) return;
 	const last = stack.split('\n')[1];
 	const match = /<anonymous>:(\d+):(\d+)\)$/.exec(last);
@@ -18,13 +14,7 @@ export default function getLocationFromStack(stack, map) {
 	return trace({ line, column }, map);
 }
 
-/**
- *
- * @param {Omit<import('$lib/types').StartOrEnd, 'character'>} loc
- * @param {*} map
- * @returns
- */
-function trace(loc, map) {
+function trace(loc: Omit<StartOrEnd, 'character'>, map) {
 	const mappings = decode(map.mappings);
 	const segments = mappings[loc.line - 1];
 

packages/repl/src/lib/Output/get-location-from-stack.js renamed to packages/repl/src/lib/Output/get-location-from-stack.ts

@@ -12,7 +12,7 @@
 	import { set_repl_context } from './context.js';
 	import { get_full_filename } from './utils.js';
 	import Compiler from './Output/Compiler.js';
-	import type { File, MessageDetails, ReplContext } from './types.js';
+	import type { Bundle, File, MessageDetails, ReplContext } from './types.js';
 	import type { CompileOptions } from 'svelte/compiler';
 	import type { CompilerOutput } from './workers/workers.js';
 
@@ -129,7 +129,7 @@
 			resolver = resolve;
 		});
 		const result = await $bundler?.bundle($files);
-		if (result && token === current_token) $bundle = result;
+		if (result && token === current_token) $bundle = result as Bundle;
 		resolver();
 	}