Skip to content

Commit

Permalink
(feat) add vim keybindings to REPL component (#501)
Browse files Browse the repository at this point in the history
* Add vim mode

* fix conflicts

* add changesets
  • Loading branch information
paoloricciuti authored Aug 22, 2023
1 parent 9b897f0 commit f86a6fe
Show file tree
Hide file tree
Showing 7 changed files with 343 additions and 850 deletions.
5 changes: 5 additions & 0 deletions .changeset/nine-bottles-scream.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/repl': minor
---

add vim keybindings
1 change: 1 addition & 0 deletions packages/repl/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
29 changes: 28 additions & 1 deletion packages/repl/src/lib/CodeMirror.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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;
$: {
Expand Down Expand Up @@ -232,7 +259,7 @@
lint: diagnostics,
lintOptions: { delay: 200 },
autocomplete,
extensions: [watcher],
extensions,
instanceStore: cmInstance
}}
on:codemirror:textChange={({ detail: value }) => {
Expand Down
3 changes: 3 additions & 0 deletions packages/repl/src/lib/Input/ModuleEditor.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
/** @type {boolean} */
export let autocomplete;
/** @type {boolean} */
export let vim;
export function focus() {
$module_editor?.focus();
Expand Down Expand Up @@ -61,6 +63,7 @@
bind:this={$module_editor}
{errorLoc}
{autocomplete}
{vim}
{diagnostics}
on:change={handle_change}
/>
Expand Down
3 changes: 2 additions & 1 deletion packages/repl/src/lib/Repl.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
export let showModified = false;
export let showAst = false;
export let autocomplete = true;
export let vim = false;
export function toJSON() {
return {
Expand Down Expand Up @@ -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%;">
Expand Down
2 changes: 1 addition & 1 deletion packages/repl/src/routes/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading

2 comments on commit f86a6fe

@vercel
Copy link

@vercel vercel bot commented on f86a6fe Aug 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

hn – ./sites/hn.svelte.dev

sites-zeta.vercel.app
hn-svelte.vercel.app
hn.svelte.dev
hn-git-master-svelte.vercel.app

@vercel
Copy link

@vercel vercel bot commented on f86a6fe Aug 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

repl – ./packages/repl

svelte-rappel.vercel.app
repl-svelte.vercel.app
repl-zeta.vercel.app
repl-git-master-svelte.vercel.app

Please sign in to comment.