(feat) add vim keybindings to REPL component (#501)

* Add vim mode

* fix conflicts

* add changesets

Author: paoloricciuti

.changeset/nine-bottles-scream.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/repl': minor
+---
+
+add vim keybindings

packages/repl/package.json

@@ -75,6 +75,7 @@
 		"@lezer/highlight": "^1.1.6",
 		"@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.1",
 		"@rollup/browser": "^3.25.3",
 		"@sveltejs/site-kit": "5.2.2",

packages/repl/src/lib/CodeMirror.svelte

@@ -24,6 +24,9 @@
 	/** @type {boolean} */
 	export let autocomplete = true;
 
+	/** @type {boolean} */
+	export let vim = false;
+
 	/** @type {ReturnType<typeof createEventDispatcher<{ change: { value: string } }>>} */
 	const dispatch = createEventDispatcher();
 
@@ -179,6 +182,30 @@
 	/** @type {import('@codemirror/state').Extension[]} */
 	let extensions = [];
 
+	$: getExtensions(vim).then((resolvedExtensions) => {
+		extensions = resolvedExtensions;
+	});
+
+	/**
+	 * 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;
+	}
+
 	let cursor_pos = 0;
 
 	$: {
@@ -232,7 +259,7 @@
 		lint: diagnostics,
 		lintOptions: { delay: 200 },
 		autocomplete,
-		extensions: [watcher],
+		extensions,
 		instanceStore: cmInstance
 	}}
 	on:codemirror:textChange={({ detail: value }) => {

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

@@ -9,6 +9,8 @@
 
 	/** @type {boolean} */
 	export let autocomplete;
+	/** @type {boolean} */
+	export let vim;
 
 	export function focus() {
 		$module_editor?.focus();
@@ -61,6 +63,7 @@
 			bind:this={$module_editor}
 			{errorLoc}
 			{autocomplete}
+			{vim}
 			{diagnostics}
 			on:change={handle_change}
 		/>

packages/repl/src/lib/Repl.svelte

@@ -27,6 +27,7 @@
 	export let showModified = false;
 	export let showAst = false;
 	export let autocomplete = true;
+	export let vim = false;
 
 	export function toJSON() {
 		return {
@@ -344,7 +345,7 @@
 		>
 			<section slot="a">
 				<ComponentSelector show_modified={showModified} on:add on:remove />
-				<ModuleEditor errorLoc={sourceErrorLoc} {autocomplete} />
+				<ModuleEditor errorLoc={sourceErrorLoc} {autocomplete} {vim} />
 			</section>
 
 			<section slot="b" style="height: 100%;">

packages/repl/src/routes/+page.svelte

@@ -36,7 +36,7 @@
 </script>
 
 <main>
-	<Repl bind:this={repl} showAst autocomplete={true} previewTheme="dark" />
+	<Repl vim bind:this={repl} showAst autocomplete={true} previewTheme="dark" />
 </main>
 
 <style>