convert REPL components to typescript (#47)

* convert stuff to ts

* more

* more

Author: Rich-Harris

packages/repl/src/lib/Checkbox.svelte

@@ -1,5 +1,5 @@
-<script>
-	export let checked = false;
+<script lang="ts">
+	let { checked = $bindable() }: { checked: boolean } = $props();
 </script>
 
 <input type="checkbox" bind:checked />

packages/repl/src/lib/CodeMirror.svelte

@@ -2,7 +2,7 @@
 	export const cursorIndex = writable(0);
 </script>
 
-<script>
+<script lang="ts">
 	import { historyField } from '@codemirror/commands';
 	import { EditorState, Range, StateEffect, StateEffectType, StateField } from '@codemirror/state';
 	import { Decoration, EditorView } from '@codemirror/view';
@@ -15,33 +15,28 @@
 	import Message from './Message.svelte';
 	import { svelteTheme } from './theme.js';
 	import { autocomplete } from './autocomplete.js';
+	import type { LintSource } from '@codemirror/lint';
+	import type { Extension } from '@codemirror/state';
+	import { CompletionContext } from '@codemirror/autocomplete';
+	import type { Lang } from './types';
 
-	/** @type {import('@codemirror/lint').LintSource | undefined} */
-	export let diagnostics = undefined;
-
+	export let diagnostics: LintSource | undefined = undefined;
 	export let readonly = false;
 	export let tab = true;
 	export let vim = false;
 
-	/** @type {ReturnType<typeof createEventDispatcher<{ change: { value: string } }>>} */
-	const dispatch = createEventDispatcher();
+	const dispatch: ReturnType<typeof createEventDispatcher<{ change: { value: string } }>> =
+		createEventDispatcher();
 
 	let code = '';
 
-	/** @type {import('./types').Lang} */
-	let lang = 'svelte';
+	let lang: Lang = 'svelte';
 
-	/**
-	 * @param {{ code: string; lang: import('./types').Lang }} options
-	 */
-	export async function set(options) {
+	export async function set(options: { code: string; lang: Lang }) {
 		update(options);
 	}
 
-	/**
-	 * @param {{ code?: string; lang?: import('./types').Lang }} options
-	 */
-	export async function update(options) {
+	export async function update(options: { code?: string; lang?: Lang }) {
 		await isReady;
 
 		if (!$cmInstance.view) return;
@@ -65,15 +60,11 @@
 		}
 	}
 
-	/**
-	 * @param {number} pos
-	 */
-	export function setCursor(pos) {
+	export function setCursor(pos: number) {
 		cursor_pos = pos;
 	}
 
-	/** @type {(...val: any) => void} */
-	let fulfil_module_editor_ready;
+	let fulfil_module_editor_ready: (...val: any) => void;
 	export const isReady = new Promise((f) => (fulfil_module_editor_ready = f));
 
 	export function resize() {
@@ -88,10 +79,7 @@
 		return $cmInstance.view?.state.toJSON({ history: historyField });
 	}
 
-	/**
-	 * @param {any} state
-	 */
-	export function setEditorState(state) {
+	export function setEditorState(state: any) {
 		if (!$cmInstance.view) return;
 
 		$cmInstance.view.setState(
@@ -113,8 +101,7 @@
 		});
 	}
 
-	/** @type {StateEffectType<Range<Decoration>[]>} */
-	const addMarksDecoration = StateEffect.define();
+	const addMarksDecoration: StateEffectType<Range<Decoration>[]> = StateEffect.define();
 
 	// This value must be added to the set of extensions to enable this
 	const markField = StateField.define({
@@ -136,13 +123,15 @@
 		provide: (f) => EditorView.decorations.from(f)
 	});
 
-	/**
-	 * @param {object} param0
-	 * @param {number} param0.from
-	 * @param {number} param0.to
-	 * @param {string} [param0.className]
-	 */
-	export function markText({ from, to, className = 'mark-text' }) {
+	export function markText({
+		from,
+		to,
+		className = 'mark-text'
+	}: {
+		from: number;
+		to: number;
+		className?: string;
+	}) {
 		const executedMark = Decoration.mark({
 			class: className
 		});
@@ -163,23 +152,20 @@
 
 	const cmInstance = withCodemirrorInstance();
 
-	/** @type {number} */
-	let w;
-	/** @type {number} */
-	let h;
+	let w: number;
+	let h: number;
 
 	let marked = false;
 
 	let updating_externally = false;
 
-	/** @type {import('@codemirror/state').Extension[]} */
-	let extensions = [];
+	let extensions: Extension[] = [];
 
 	/**
 	 * update the extension if and when vim changes
-	 * @param {boolean} vimEnabled if vim it's included in the set of extensions
+	 * @param vimEnabled if vim it's included in the set of extensions
 	 */
-	async function getExtensions(vimEnabled) {
+	async function getExtensions(vimEnabled: boolean) {
 		let extensions = [watcher];
 		if (vimEnabled) {
 			const { vim } = await import('@replit/codemirror-vim').then((vimModule) => ({
@@ -221,13 +207,11 @@
 	const { files, selected } = get_repl_context();
 
 	const svelte_rune_completions = svelteLanguage.data.of({
-		/** @param {import('@codemirror/autocomplete').CompletionContext} context */
-		autocomplete: (context) => autocomplete(context, $selected, $files)
+		autocomplete: (context: CompletionContext) => autocomplete(context, $selected, $files)
 	});
 
 	const js_rune_completions = javascriptLanguage.data.of({
-		/** @param {import('@codemirror/autocomplete').CompletionContext} context */
-		autocomplete: (context) => autocomplete(context, $selected, $files)
+		autocomplete: (context: CompletionContext) => autocomplete(context, $selected, $files)
 	});
 </script>
 

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

@@ -1,21 +1,20 @@
-<script>
+<script lang="ts">
 	import { get_repl_context } from '$lib/context.js';
 	import { get_full_filename } from '$lib/utils.js';
 	import { createEventDispatcher, tick } from 'svelte';
 	import RunesInfo from './RunesInfo.svelte';
 	import Migrate from './Migrate.svelte';
+	import type { File } from '$lib/types';
 
-	/** @type {boolean}  */
-	export let show_modified;
+	export let show_modified: boolean;
+	export let runes: boolean;
 
-	/** @type {boolean} */
-	export let runes;
-
-	/** @type {ReturnType<typeof createEventDispatcher<{
-	 * remove: { files: import('$lib/types').File[]; diff: import('$lib/types').File },
-	 * add: { files: import('$lib/types').File[]; diff: import('$lib/types').File },
-	 * }>>} */
-	const dispatch = createEventDispatcher();
+	const dispatch: ReturnType<
+		typeof createEventDispatcher<{
+			remove: { files: import('$lib/types').File[]; diff: import('$lib/types').File };
+			add: { files: import('$lib/types').File[]; diff: import('$lib/types').File };
+		}>
+	> = createEventDispatcher();
 
 	const {
 		files,
@@ -27,21 +26,17 @@
 		EDITOR_STATE_MAP
 	} = get_repl_context();
 
-	/** @type {string | null} */
-	let editing_name = null;
-
+	let editing_name: string | null = null;
 	let input_value = '';
 
-	/** @param {string} filename */
-	function select_file(filename) {
+	function select_file(filename: string) {
 		if ($selected_name !== filename) {
 			editing_name = null;
 			handle_select(filename);
 		}
 	}
 
-	/** @param {import('$lib/types').File} file */
-	function edit_tab(file) {
+	function edit_tab(file: File) {
 		if ($selected_name === get_full_filename(file)) {
 			editing_name = get_full_filename(file);
 			input_value = file.name;
@@ -110,10 +105,7 @@
 		rebundle();
 	}
 
-	/**
-	 * @param {string} filename
-	 */
-	function remove(filename) {
+	function remove(filename: string) {
 		const file = $files.find((val) => get_full_filename(val) === filename);
 		const idx = $files.findIndex((val) => get_full_filename(val) === filename);
 
@@ -133,8 +125,7 @@
 		handle_select($selected_name);
 	}
 
-	/** @param {FocusEvent & { currentTarget: HTMLInputElement }} event */
-	async function select_input(event) {
+	async function select_input(event: FocusEvent & { currentTarget: HTMLInputElement }) {
 		await tick();
 
 		event.currentTarget.select();
@@ -165,31 +156,25 @@
 		$files = $files;
 	}
 
-	/** @param {import('$lib/types').File} editing */
-	function is_file_name_used(editing) {
+	function is_file_name_used(editing: File) {
 		return $files.find(
 			(file) => JSON.stringify(file) !== JSON.stringify($selected) && file.name === editing.name
 		);
 	}
 
 	// drag and drop
-	/** @type {string | null} */
-	let from = null;
-
-	/** @type {string | null} */
-	let over = null;
+	let from: string | null = null;
+	let over: string | null = null;
 
-	/** @param {DragEvent & { currentTarget: HTMLDivElement }} event */
-	function dragStart(event) {
+	function dragStart(event: DragEvent & { currentTarget: HTMLDivElement }) {
 		from = event.currentTarget.id;
 	}
 
 	function dragLeave() {
 		over = null;
 	}
 
-	/** @param {DragEvent & { currentTarget: HTMLDivElement }} event */
-	function dragOver(event) {
+	function dragOver(event: DragEvent & { currentTarget: HTMLDivElement }) {
 		over = event.currentTarget.id;
 	}
 

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

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { get_repl_context } from '$lib/context.js';
 
 	const { migrate } = get_repl_context();

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

@@ -1,15 +1,11 @@
-<script>
+<script lang="ts">
 	import { get_repl_context } from '$lib/context.js';
 	import CodeMirror from '../CodeMirror.svelte';
+	import type { CompileError, Warning } from 'svelte/compiler';
 
-	/** @type {import('svelte/compiler').CompileError} */
-	export let error;
-
-	/** @type {import('svelte/compiler').Warning[]} */
-	export let warnings;
-
-	/** @type {boolean} */
-	export let vim;
+	export let error: CompileError;
+	export let warnings: Warning[];
+	export let vim: boolean;
 
 	export function focus() {
 		$module_editor?.focus();

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

@@ -1,22 +1,21 @@
-<script>
+<script lang="ts">
 	import { get_repl_context } from '$lib/context.js';
 
-	/** @type {boolean} */
-	export let runes;
+	let { runes }: { runes: boolean } = $props();
 
-	let open = false;
+	let open = $state(false);
 
 	const { selected_name } = get_repl_context();
 </script>
 
 <svelte:window
-	on:keydown={(e) => {
+	onkeydown={(e) => {
 		if (e.key === 'Escape') open = false;
 	}}
 />
 
 <div class="container">
-	<button class:active={runes} class:open on:click={() => (open = !open)}>
+	<button class:active={runes} class:open onclick={() => (open = !open)}>
 		<svg viewBox="0 0 24 24">
 			<path d="M9.4,1H19l-5.9,7.7h8L8.3,23L11,12.6H3.5L9.4,1z" />
 		</svg>
@@ -27,7 +26,7 @@
 	{#if open}
 		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions
 			(This is taken care of by the <svelte:window> above) -->
-		<div class="modal-backdrop" on:click={() => (open = false)}></div>
+		<div class="modal-backdrop" onclick={() => (open = false)}></div>
 		<div class="popup">
 			{#if $selected_name.endsWith('.svelte.js')}
 				<p>

packages/repl/src/lib/InputOutputToggle.svelte

@@ -1,7 +1,7 @@
-<script>
-	export let checked = false;
-
+<script lang="ts">
 	import Checkbox from './Checkbox.svelte';
+
+	let { checked = $bindable() }: { checked: boolean } = $props();
 </script>
 
 <!-- svelte-ignore a11y_label_has_associated_control -->

packages/repl/src/lib/Message.svelte

@@ -1,22 +1,16 @@
-<script>
+<script lang="ts">
 	import { slide } from 'svelte/transition';
 	import { get_repl_context } from './context.js';
+	import type { MessageDetails } from './types.js';
 
-	/** @type {'info' | 'warning' | 'error'} */
-	export let kind = 'info';
-
-	/** @type {import('./types').MessageDetails | undefined} */
-	export let details = undefined;
-
-	/** @type {string | undefined} */
-	export let filename = undefined;
-
+	export let kind: 'info' | 'warning' | 'error' = 'info';
+	export let details: MessageDetails | undefined = undefined;
+	export let filename: string | undefined = undefined;
 	export let truncate = false;
 
 	const { go_to_warning_pos } = get_repl_context();
 
-	/** @param {import('./types').MessageDetails} details */
-	function message(details) {
+	function message(details: MessageDetails) {
 		let str = details.message || '[missing message]';
 
 		let loc = [];