get svelte.dev fully typechecked (#42)

Author: Rich-Harris

apps/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte

@@ -11,7 +11,7 @@
 	import type { Gist, User } from '$lib/db/types';
 
 	interface Props {
-		user: User;
+		user: User | null;
 		repl: Repl;
 		gist: Gist;
 		name: string;

apps/svelte.dev/src/routes/(authed)/repl/[id]/embed/+page.svelte

@@ -72,6 +72,7 @@
 			showAst
 			previewTheme={$theme.current}
 			embedded
+			vim={false}
 		/>
 	{/if}
 </div>

apps/svelte.dev/src/routes/_components/Example.svelte

@@ -32,6 +32,7 @@
 				relaxed
 				showAst
 				previewTheme={$theme.current}
+				vim={false}
 			/>
 		{/if}
 	</IntersectionObserver>

packages/repl/package.json

@@ -70,6 +70,7 @@
 		"@lezer/highlight": "^1.2.0",
 		"@neocodemirror/svelte": "^0.0.15",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
+		"@replit/codemirror-vim": "^6.0.14",
 		"@rich_harris/svelte-split-pane": "^1.1.3",
 		"@rollup/browser": "^4.17.2",
 		"@sveltejs/kit": "^2.0.0",

packages/repl/src/lib/CodeMirror.svelte

@@ -21,6 +21,7 @@
 
 	export let readonly = false;
 	export let tab = true;
+	export let vim = false;
 
 	/** @type {ReturnType<typeof createEventDispatcher<{ change: { value: string } }>>} */
 	const dispatch = createEventDispatcher();
@@ -174,6 +175,30 @@
 	/** @type {import('@codemirror/state').Extension[]} */
 	let extensions = [];
 
+	/**
+	 * update the extension if and when vim changes
+	 * @param {boolean} vimEnabled if vim it's included in the set of extensions
+	 */
+	async function getExtensions(vimEnabled) {
+		let extensions = [watcher];
+		if (vimEnabled) {
+			const { vim } = await import('@replit/codemirror-vim').then((vimModule) => ({
+				vim: vimModule.vim
+			}));
+
+			extensions.unshift(
+				vim({
+					status: true
+				})
+			);
+		}
+		return extensions;
+	}
+
+	$: getExtensions(vim).then((ext) => {
+		extensions = ext;
+	});
+
 	let cursor_pos = 0;
 
 	$: if ($cmInstance.view) {

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

@@ -8,6 +8,9 @@
 	/** @type {any[]} */ // TODO
 	export let warnings;
 
+	/** @type {boolean} */
+	export let vim;
+
 	export function focus() {
 		$module_editor?.focus();
 	}
@@ -59,6 +62,7 @@
 
 				return [];
 			}}
+			{vim}
 			on:change={handle_change}
 		/>
 	</div>

packages/repl/src/lib/Repl.svelte

@@ -28,6 +28,8 @@
 	export let showModified = false;
 	export let showAst = false;
 	export let autocomplete = true;
+	/** @type {boolean} */
+	export let vim;
 
 	let runes = false;
 
@@ -352,6 +354,7 @@
 					{autocomplete}
 					error={compiled?.result.error}
 					warnings={compiled?.result.warnings ?? []}
+					{vim}
 				/>
 			</section>