rhysd / vim.wasm

Vim editor ported to WebAssembly

vim.wasm: Vim Ported to WebAssembly

This project is an experimental fork of Vim editor by @rhysd to compile it into WebAssembly using emscripten and binaryen. Vim runs on Web Worker and interacts with the main thread via SharedArrayBuffer.

The goal of this project is running Vim editor on browsers without losing Vim's powerful functionalities by compiling Vim C sources into WebAssembly.

Try it with your browser

• USAGE

  • Almost all Vim's powerful features (syntax highlighting, Vim script, text objects, ...) including the latest features (popup window, ...) are supported.
  • Drag&Drop files to browser tab opens them in Vim.
  • :write only writes file on memory. Download current buffer by :export or specific file by :export {file}.
  • Clipboard register "* is supported. For example, paste system clipboard text to Vim with "*p or :put *, and copy text in Vim to system clipboard with "*y or :yank *. If you want to synchronize Vim's clipboard with system clipboard, :set clipboard=unnamed should work like normal Vim.
  • Files under ~/.vim directory is persistently stored in Indexed DB. Please write your favorite configuration in ~/.vim/vimrc (NOT ~/.vimrc).
  • file={filepath}={url} fetches a file from {url} to {filepath}. Arbitrary remote files can be opened (care about CORS).
  • Default colorscheme is onedark.vim, but vim-monokai is also available as high-contrast colorscheme.
  • :!/path/to/file.js evaluates the JavaScript code in browser. :!% evaluates current buffer.
  • vimtutor is available by :e tutor.
  • Add arg= query parameters (e.g. ?arg=~%2f.vim%2fvimrc&arg=hello.txt) to add vim command line arguments.
  • Please read the usage documentation for more details.

• NOTICE

  • Please access from desktop Chrome, Firefox, Safari or Chromium based browsers since this project uses SharedArrayBuffer and Atomics. On Firefox or Safari, feature flags (javascript.options.shared_memory for Firefox) must be enabled for now.
  • vim.wasm takes key inputs from DOM keydown event. Please disable your browser extensions which intercept key events (incognito mode would be the best).
  • This project is very early phase of experiment. You may notice soon on trying it... it's buggy :)
  • If inputting something does not change anything, please try to click somewhere in the page. Vim may have lost the focus.
  • Vim exits on :quit, but it does not close a browser tab. Please close it manually :)

This project is packaged as vim-wasm npm pacakge to be used in web application easily. Please read the documentation for more details.

The current ported Vim version is 8.2.0055 with 'normal' and 'small' features sets. Please check changelog for update history.

Related Projects

Following projects are related to this npm package and may be more suitable for your use case.

• react-vim-wasm: React component for vim.wasm. Vim editor can be embedded in your React web application.
• vimwasm-try-plugin: Command line tool to open vim.wasm including specified Vim plugin instantly. You can try Vim plugin without installing it!
• vim.wasm.ipynb: Jupyter Notebook integration with vim.wasm. Try it online!

Presentations and Blog Posts

• Presentation slides
  • (English) VimConf 2018 (Nov. 24th, 2018)
  • (Japanese) Emscripten&WebAssembly night!! #8 (Jul. 24th, 2019)
• Japanese blog posts 1 2

How It Works

User Interaction

In worker thread, Vim is running by compiled into Wasm. The worker thread is spawned as dedicated Web Worker from main thread when opening the page.

Let's say you input something with keyboard. Browser takes it as KeyboardEvent on keydown event. JavaScript in main thread catches the event and store keydown information to a shared memory buffer.

The buffer is shared with the worker thread. Vim waits and gets the keydown information by polling the shared memory buffer via JavaScript's Atomics API. When key information is found in the buffer, it loads the information and calculates key sequence. Via JS to Wasm API thanks to emscripten, the sequence is added to Vim's input buffer in Wasm.

The sequence in input buffer is processed by core editor logic (update buffer, screen, ...). Due to the updates, some draw events happen such as draw text, draw rects, scroll regions, ...

These draw events are sent to JavaScript in worker thread from Wasm thanks to emscripten's JS to C API. Considering device pixel ratio and <canvas/> API, how to render the events is calculated and these calculated rendering events are passed from worker thread to main thread via message passing with postMessage().

Main thread JavaScript receives and enqueues these rendering events. On animation frame, it renders them to <canvas/>.

Finally you can see the rendered screen in the page.

Build Process

WebAssembly frontend for Vim is implemented as a new GUI frontend of Vim like other GUI such as GTK frontend. C sources are compiled to each LLVM bitcode files and then they are linked to one bitcode file vim.bc by emcc. emcc will finally compile the vim.bc into vim.wasm binary using binaryen and generates HTML/JavaScript runtime.

The difference I faced at first was the lack of terminal library such as ncurses. I modified configure script to ignore the terminal library check. It's OK since GUI frontend for Wasm is always used instead of CUI frontend. I needed many workarounds to pass configure checks.

emscripten provides Unix-like environment. So os_unix.c can support Wasm. However, some features are not supported by emscripten. I added many #ifdef FEAT_GUI_WASM guards to disable features which cannot be supported by Wasm (i.e. fork (2) support, PTY support, signal handlers are stubbed, ...etc).

I created gui_wasm.c heavily referencing gui_mac.c and gui_w32.c. Event loop (gui_mch_update() and gui_mch_wait_for_chars()) is simply implemented with blocking wait. And almost all UI rendering events are passed to JavaScript layer by calling JavaScript functions from C thanks to emscripten.

C sources are compiled (with many optimizations) into LLVM bitcode with Clang which is integrated to emscripten. Then all bitcode files (.o) are linked to one bitcode file vim.bc with llvm-link linker (also integrated to emscripten).

And I created JavaScript runtime in TypeScript to draw the rendering events sent from C. JavaScript runtime is separated into two parts; main thread and worker thread. wasm/main.ts is for main thread. It starts Vim in worker thread and draws Vim screen to <canvas> receiving draw events from Vim. wasm/runtime.ts and wasm/pre.ts are for worker thread. They are written using emscripten API.

emcc (emscripten's C compiler) compiles the vim.bc and runtime.js into vim.wasm, vim.js and vim.data with preloaded Vim runtime files (i.e. colorscheme) using binaryen. Runtime files are loaded on a virtual file system provided on a browser by emscripten. Here, these files are compiled for worker thread. wasm/main.js starts a dedicated Web Worker loading vim.js.

Finally, I created a small wasm/index.html which contains <canvas/> to render Vim screen and load wasm/main.js.

Now hosting wasm/index.html with a web server and accessing to it with browser opens Vim. It works.

How to sleep() on JavaScript

The hardest part for this porting was how to implement blocking wait (usually done with sleep()).

Since blocking main thread on web page means blocking user interaction, it is basically prohibited. Almost all operations taking time are implemented as asynchronous API in JavaScript. Wasm running on main thread cannot block the thread except for busy loop.

But C programs casually use sleep() function so it is a problem when porting the programs. Vim's GUI frontend is also expected to wait user input with blocking wait.

emscripten provides workaround for this problem, Emterpreter. With Emterpreter, emscripten provides (pseudo) blocking wait functions such as emscripten_sleep(). When they are used in C function, emcc compiles the function into Emterpreter byte code instead of Wasm. And at runtime, the byte code is run on an interpreter (on Wasm). When the interpreter reaches at the point calling emscripten_sleep(), it suspends byte code execution and sets timer (with setTimeout JS function). After time expires, the interpreter resumes state and continues execution.

By this mechanism, JavaScript's asynchronous wait looks as if synchronous wait from C world. At first I used Emterpreter and it worked. However, there were several issues.

• It splits Vim sources into two parts; pure Wasm code directly run and Emterpreter byte code run on an interpreter. I needed to maintain large functions list which should be compiled into Emterpreter byte code. When the list is wrong, Vim crashes
• Emterpreter is not so fast so it slows entire application
• Emterpreter makes program unstable. For example JS and C interactions don't work in some situations
• Emterpreter makes built binary bigger and compilation longer. Compiling C code into Emterpreter byte code is very slow since it requires massive code transformations. Emterpreter byte code is very simple so its binary size is bigger

I looked for an alternative and found Atomics.wait(). Atomics.wait() is a low-level synchronous primitive function. It waits until a specific byte in shared memory buffer is updated. It's blocking wait. Of course it is not available on main thread. It must be used on a worker thread.

I moved Wasm code base into Web Worker running on worker thread, though rendering <canvas/> is still done in main thread.

Vim uses Atomics.wait() for waiting user input by watching a shared memory buffer. When a key event happens, main thread stores key event data to the shared memory buffer and notifies that a new key event came by Atomics.notify(). Worker thread detects that the buffer was updated by Atomics.wait() and loads the key event data from the buffer. Vim calculates a key sequence from the data and add it to input buffer. Finally Vim handles the event and sends draw events to main thread via JavaScript.

As a bonus, user interaction is no longer prevented since almost all logic including entire Vim are run in worker thread.

Development

Please make sure that Emscripten (I'm using 1.38.37) and binaryen (I'm using v84) are installed. If you use macOS, they can be installed with brew install emscripten binaryen.

Please use build.sh script to hack this project. Just after cloning this repository, simply run ./build.sh. It builds vim.wasm in wasm/ directory. It takes time and CPU power a lot.

Finally host the wasm/ directly on localhost with a web server such as python -m http.server 1234. Accessing to localhost:1234?debug will start Vim with debug logs. Note that it's much slower than release build since many debug features are enabled. Please read wasm/README.md for more details.

Please note that this repository's wasm branch frequently merges the latest vim/vim master branch. If you want to hack this project, please ensure to create your own branch and merge wasm branch into your branch by git merge.

Known Issues

• WebAssembly nor JavaScript does not provide sleep(). By default, emscripten compiles sleep() into a busy loop. So vim.wasm is using Emterpreter which provides emscripten_sleep(). Some whitelisted functions are run with Emterpreter. But this feature is not so stable. It makes built binaries larger and compilation longer. This was fixed at #30
• JavaScript to C does not fully work with Emterpreter. For example, calling some C APIs breaks Emterpreter stack. This also means that calling C functions from JavaScript passing a string parameter does not work. This was fixed at #30
• Only Chrome and Chromium based browsers are supported by default. Firefox and Safari require enabling feature flags. This is because SharedArrayBuffer is disabled due to Spectre security vulnerability. This can be fixed with Asyncify. The work is in progress and tracked at PR #35.

TODO

Development is managed in GitHub Projects.

• Consider to support larger feature set ('big' and 'huge')
• Use WebAssembly's multi-threads support with Atomic instructions instead of JavaScript Atomics API
• Render <canvas/> in worker thread using Offscreen Canvas Currently not available. Please read notes.
• Mouse support
• IME support
• Packaging vim.wasm as Web Component

Special Thanks

This project was heavily inspired by impressive project vim.js by Lu Wang.

License

All additional files in this repository are licensed under the same license as Vim (VIM LICENSE). Please see :help license for more detail.

Original README is following.

---

For translations of this README see the end.

What is Vim?

Vim is a greatly improved version of the good old UNIX editor Vi. Many new features have been added: multi-level undo, syntax highlighting, command line history, on-line help, spell checking, filename completion, block operations, script language, etc. There is also a Graphical User Interface (GUI) available. Still, Vi compatibility is maintained, those who have Vi "in the fingers" will feel at home. See runtime/doc/vi_diff.txt for differences with Vi.

This editor is very useful for editing programs and other plain text files. All commands are given with normal keyboard characters, so those who can type with ten fingers can work very fast. Additionally, function keys can be mapped to commands by the user, and the mouse can be used.

Vim runs under MS-Windows (NT, 2000, XP, Vista, 7, 8, 10), Macintosh, VMS and almost all flavours of UNIX. Porting to other systems should not be very difficult. Older versions of Vim run on MS-DOS, MS-Windows 95/98/Me, Amiga DOS, Atari MiNT, BeOS, RISC OS and OS/2. These are no longer maintained.

Distribution

You can often use your favorite package manager to install Vim. On Mac and Linux a small version of Vim is pre-installed, you still need to install Vim if you want more features.

There are separate distributions for Unix, PC, Amiga and some other systems. This README.md file comes with the runtime archive. It includes the documentation, syntax files and other files that are used at runtime. To run Vim you must get either one of the binary archives or a source archive. Which one you need depends on the system you want to run it on and whether you want or must compile it yourself. Check http://www.vim.org/download.php for an overview of currently available distributions.

Some popular places to get the latest Vim:

• Check out the git repository from github.
• Get the source code as an archive.
• Get a Windows executable from the vim-win32-installer repository.

Compiling

If you obtained a binary distribution you don't need to compile Vim. If you obtained a source distribution, all the stuff for compiling Vim is in the src directory. See src/INSTALL for instructions.

Installation

See one of these files for system-specific instructions. Either in the READMEdir directory (in the repository) or the top directory (if you unpack an archive):

README_ami.txt		Amiga
README_unix.txt		Unix
README_dos.txt		MS-DOS and MS-Windows
README_mac.txt		Macintosh
README_vms.txt		VMS

There are other README_*.txt files, depending on the distribution you used.

Documentation

The Vim tutor is a one hour training course for beginners. Often it can be started as vimtutor. See :help tutor for more information.

The best is to use :help in Vim. If you don't have an executable yet, read runtime/doc/help.txt. It contains pointers to the other documentation files. The User Manual reads like a book and is recommended to learn to use Vim. See :help user-manual.

Copying

Vim is Charityware. You can use and copy it as much as you like, but you are encouraged to make a donation to help orphans in Uganda. Please read the file runtime/doc/uganda.txt for details (do :help uganda inside Vim).

Summary of the license: There are no restrictions on using or distributing an unmodified copy of Vim. Parts of Vim may also be distributed, but the license text must always be included. For modified versions a few restrictions apply. The license is GPL compatible, you may compile Vim with GPL libraries and distribute it.

Sponsoring

Fixing bugs and adding new features takes a lot of time and effort. To show your appreciation for the work and motivate Bram and others to continue working on Vim please send a donation.

Since Bram is back to a paid job the money will now be used to help children in Uganda. See runtime/doc/uganda.txt. But at the same time donations increase Bram's motivation to keep working on Vim!

For the most recent information about sponsoring look on the Vim web site: http://www.vim.org/sponsor/

Contributing

If you would like to help making Vim better, see the CONTRIBUTING.md file.

Information

The latest news about Vim can be found on the Vim home page: http://www.vim.org/

If you have problems, have a look at the Vim documentation or tips: http://www.vim.org/docs.php http://vim.wikia.com/wiki/Vim_Tips_Wiki

If you still have problems or any other questions, use one of the mailing lists to discuss them with Vim users and developers: http://www.vim.org/maillist.php

If nothing else works, report bugs directly: Bram Moolenaar [email protected]

Main author

Send any other comments, patches, flowers and suggestions to: Bram Moolenaar [email protected]

This is README.md for version 8.2 of Vim: Vi IMproved.

Translations of this README

Korean

vim.wasm's Issues

vim.wasm installation process

What is an issue which you want to solve with your feature request?

The installation process of vim.wasm is not documented.

Describe the solution you'd like

Provide installation instruction or provide a Dockerfile for quick deployement.

Thank you, very neat project.

up arrow for command history instead prints <Up>

Describe the bug
In vim previous commands entered (possibly only the ones that executed successfully, I'm not too sure I'm afraid) can be replayed by pressing up in command mode.

Steps To Reproduce
type
:%s/foo/bar/
then press enter
then type (colon, then press up arrow)
:<Up>

Expected behavior
:%s/foo/bar/
is in the command bar, ready to be executed by pressing enter

Actual behavior
prints a literal
:<Up>
to the command bar, rather than displaying previous command -> :%s/foo/bar/

Screenshots/DevTools console (if possible)
see bottom, sorry there's a lot on the console

Your environment:

• OS: ubuntu 18.04
• Browser: firefox
• Browser Version: 62.0.3

Additional context (if any)

The Components object is deprecated. It will soon be removed. vim.wasm
Error detected while processing /usr/local/share/vim/colors/desert.vim:
index.js:1:40840
put_char
https://rhysd.github.io/vim.wasm/index.js:1:40840
write
https://rhysd.github.io/vim.wasm/index.js:1:39443
write
https://rhysd.github.io/vim.wasm/index.js:1:83857
doWritev
https://rhysd.github.io/vim.wasm/index.js:1:104304
___syscall146
https://rhysd.github.io/vim.wasm/index.js:1:130894
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:369608:2147484861
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:341315:2147484806
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:435028:2147485154
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:6738:2147483759
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:519447:2147485385
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:34464:2147483767
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:10477:2147483767
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:10477:2147483767
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:10477:2147483767
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:6322:2147483748
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:38261:2147483791
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:229175:2147484476
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:59596:2147483929
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:136844:2147484169
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:5720:2147483736
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:15509:2147483767
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:10477:2147483767
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:74271:2147483986
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:48355:2147483856
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:591698:2147485518
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:199388:2147484373
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:327296:2147484791
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:91933:2147484029
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:470186:2147485272
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:606034:2147485606
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:15298:2147483767
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:10477:2147483767
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:74271:2147483986
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:48355:2147483856
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:533302:2147485417
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:32642:2147483767
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:615257:2147485673
Module._main
https://rhysd.github.io/vim.wasm/index.js:1:170474
callMain
https://rhysd.github.io/vim.wasm/index.js:1:172730
doRun
https://rhysd.github.io/vim.wasm/index.js:1:173529
run
https://rhysd.github.io/vim.wasm/index.js:1:173715
runCaller
https://rhysd.github.io/vim.wasm/index.js:1:172316
removeRunDependency
https://rhysd.github.io/vim.wasm/index.js:1:23053
receiveInstance
https://rhysd.github.io/vim.wasm/index.js:1:25621
receiveInstantiatedSource
https://rhysd.github.io/vim.wasm/index.js:1:25929
line   22:
index.js:1:40840
put_char
https://rhysd.github.io/vim.wasm/index.js:1:40840
write
https://rhysd.github.io/vim.wasm/index.js:1:39443
write
https://rhysd.github.io/vim.wasm/index.js:1:83857
doWritev
https://rhysd.github.io/vim.wasm/index.js:1:104304
___syscall146
https://rhysd.github.io/vim.wasm/index.js:1:130894
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:369608:2147484861
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:341315:2147484806
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:435028:2147485154
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:6738:2147483759
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:519447:2147485385
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:34464:2147483767
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:10477:2147483767
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:10477:2147483767
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:10477:2147483767
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:6322:2147483748
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:38261:2147483791
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:229175:2147484476
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:59596:2147483929
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:5736:2147483736
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:15509:2147483767
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:10477:2147483767
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:74271:2147483986
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:48355:2147483856
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:591698:2147485518
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:199388:2147484373
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:327296:2147484791
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:91933:2147484029
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:470186:2147485272
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:606034:2147485606
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:15298:2147483767
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:10477:2147483767
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:74271:2147483986
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:48355:2147483856
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:533302:2147485417
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:32642:2147483767
<anonymous>
https://rhysd.github.io/vim.wasm/index.wasm:615257:2147485673
Module._main
https://rhysd.github.io/vim.wasm/index.js:1:170474
callMain
https://rhysd.github.io/vim.wasm/index.js:1:172730
doRun
https://rhysd.github.io/vim.wasm/index.js:1:173529
run
https://rhysd.github.io/vim.wasm/index.js:1:173715
runCaller
https://rhysd.github.io/vim.wasm/index.js:1:172316
removeRunDependency
https://rhysd.github.io/vim.wasm/index.js:1:23053
receiveInstance
https://rhysd.github.io/vim.wasm/index.js:1:25621
receiveInstantiatedSource
https://rhysd.github.io/vim.wasm/index.js:1:25929
index.js:1:40543
TODO: set_shellsize 1288 910 65 184 index.js:1:40543 

diw not working

To replicate:

1. Hit "i" to go to insert mode and try writing something
2. Hit to go back to normal mode
3. Move to the middle of a word
4. Try typing "diw" to delete inner word in normal mode

Nothing happens.

Replacing with option c (confirm) freezes the navigator tab

On https://rhysd.github.io/vim.wasm/ page,
I type the following sequence
ihohoho<esc>
:%s/o/i/gc<enter>

I then cannot do anything else, page seem to be "frozen".

Add support (or instruction) for pasting from clipboard

Is your feature request related to a problem? Please describe.

I couldn't paste some code I wanted to reformat. Felt like vim.wasm could possibly do this, (mostly for convenience) on a Chromebook. 😄

In particular, I wanted a simple reformat, which I knew I could do quickly in Vim:

In:

#Array
#Complex
#Float
#Hash
#Integer
#Rational
#String

Out:

(`Array()`, `Complex()`, `Float()`, `Hash()`, `Integer()`, `Rational()`, `String()`)

Describe the solution you'd like

Add support for pasting via Ctrl-V/Cmd-V, "+p, or another solution. Add a short blurb somewhere on the page describing this.

Additional context (if any)

n/a

" '' should be object " appears when starting firefox

Describe the bug

The page stays black when accessing https://rhysd.github.io/vim.wasm/ with firefox.
" '' should be object " appears on the bottom of the page as shown in the attached image.

Steps To Reproduce

1. Access https://rhysd.github.io/vim.wasm/ with firefox: will stay black (nothing be shown on the page).
2. Restart firefox, then you'll the screen as shown attached.

Expected behavior

The screen like vim will appear.

Actual behavior

The page stays black.

Screenshots/DevTools console (if possible)

Your environment

• OS: Windows 10
• Browser: Firefox
• Browser Version: 72.0.1 (64 bit)

`.cmdline()` method not working

In most cases, the vimWasm.cmdline() method does not work as expected. I anticipate that cmdline() should function similarly to manually using Vim's execution mode.

Here are examples of bugs:

• vimWasm.cmdline('startinsert') should change Vim to insert mode, but it does not work.

• vimWasm.cmdline('2') is supposed to move the cursor to line 2, but I don't see the cursor updating. Even after trying to redraw vimWasm.cmdline('2 | redraw'), it still doesn't work.

@rhysd Please help to find solutions. Thanks

Any relationship to coolwanglu/vim.js ?

I looked in the readme, but didn't see anything. Is there any relationship between this project and https://github.com/coolwanglu/vim.js ?

Great work! 👏

Resizing the browser window

Resizing the browser window isn't triggered as resizing the terminal, instead it just squishes and stretches the rendering.

wasm-ld: error: unknown file type: vim.bc

Describe the bug

Error when running build.sh

Steps To Reproduce

Run build.sh

Expected behavior

No error . .

Actual behavior

Error

Your environment

• OS: Fedora 33
• Browser: - why does that matter?
• Browser Version:

Additional context (if any)

BTW, this project is a great idea! - I have been wondering for years how getting Vim going in the browser might be done!

Phil.

Saving should trigger a file download

This is not an issue, nor appropriated for the Vim mailing list. However, since this is basically a version of Vim for the web it would make sense to offer some of the features you would expect from a web editor, such as saving. The :w command could for example trigger a file download. Likewise, opening a file could ask the user to select a file to upload.

Uncaught abort("Assertion failed: undefined")

Describe the bug crash

Steps To Reproduce write text, shift-v down arrow / up arrow, y/d, p, repeat

Expected behavior works fine

Actual behavior crashes at some point

Screenshots/DevTools console (if possible)

Your environment:

• OS: macOS
• Browser: Chrome
• Browser Version: 76 (canary)

Additional context (if any) I'm not sure exactly of the steps to reproduce

/usr/local/share/vim/autoload/dist does not exist

Describe the bug

On setting filetype dist#... function does not exist and causes an error

Steps To Reproduce

1. Visit https://rhysd.github.io/vim.wasm
2. Open foo.html

Expected behavior

html filetype is set

Actual behavior

Error as follows

Error detected while processing BufNewFile Autocommands for "*.html":
E117: Unknown function: dist#ft#FThtml

Screenshots/DevTools console (if possible)

Your environment

• OS: macOS 10.12
• Browser: Chrome 76
• Browser Version:

Additional context (if any)

VimWasm.cmdline() does not update screen

Describe the bug

VimWasm.cmdline() runs given command, but screen is not updated. To avoid this, appending | redraw to the command is necessary.

Steps To Reproduce

1. Visit https://rhysd.github.io/vim.wasm/?debug=1
2. Open DevTools console
3. Run vim.cmdline('edit ~/.vim/vimrc')

Expected behavior

Screen renders the content of ~/.vim/vimrc

Actual behavior

Screen is not updated though only statusline is updated to notify opening ~/.vim/vimrc

Screenshots/DevTools console (if possible)

Your environment

• OS: macOS 10.12
• Browser: Chrome (stable)
• Browser Version: 75

Additional context (if any)

Typing ":w foo" (and Enter) makes the tab unusable

Describe the bug

Typing ":w foo" (and Enter) makes the tab unusable

Steps To Reproduce

:w foo and Enter

Expected behavior

Actual behavior

Tab gets stuck and nothing responds.

Screenshots/DevTools console (if possible)

Your environment:

• OS: mageia v7 x86-64
• Browser: firefox-66.0.3-1.mga7
• Browser Version: 66.0.3

Additional context (if any)

PDCurses.js integration

There is a project called PDCurses.js which actually allows linking with lcurses. Just wondering if you have considered using it instead of writing the terminal interaction manually. The advantage would be to compile the original project without the need to hack the original files and its compiled size is small too.

Feature Request: embed .wasm file inside of vim.html so you have a single html file with everything. Like vim.html

What is an issue which you want to solve with your feature request?

I want to have a single "vim.html" where everything is contained, even if it makes the file bigger. I already embedded the "VimWasm.js" inside a <script>.

So in this I only have to "import" the "vim.js" file like this:

const screenCanvasElement = document.getElementById('vim-screen');
const vim = new VimWasm({ // VimWasm is available in the global scope via window.VimWasm(loaded via <script>)
    workerScriptPath: './node_modules/vim-wasm/small/vim.js',
    canvas: screenCanvasElement,
    input: document.getElementById('vim-input'),
});

The problem is that when you're inside of vim.js it uses fetch to get the vim.wasm binary so you need a server running to have this working.

Describe the solution you'd like

The solutions would be that you can actually embed .wasm inside of a .html file via base64 encoding, this might not be the most good for performance but for portability it's great!( see https://stackoverflow.com/questions/52582367/a-single-file-webassembly-html-demo and https://gist.github.com/dio/ae79cf546e808a9bc46515bf9400ad5d)

I have tried edit the code myself but it uses both WebAssembly.instantiate and WebAssembly.instantiateStreaming so I'm not exactly sure what to do thus I'm opening this issue.

Additional context (if any)

Backspace の動作不具合

Backspace（以下BS）で文字を消すことができなかったのでご報告致します

OS : Windows 10
Browser : Firefox (プライベートブラウズも試しました)

再現方法 :
a → 適当な文字列を打つ → BS（この時カーソルは一文字戻りますが、文字が消えません。また、戻ったカーソルにさらに文字を打つと上書きするような動きをします）

そのあと、 Esc → a → 適当な文字列を打つ → BS（この時はBS自体が利かなくなります）

<C-D> in the command-line mode is not giving the possible completions.

try:

:colo ((press C-D))

it does not output the possible completions.
The options are shown using , as expected, though.

Async event loop to disable Emterpreter

As described in known issues, disabling Emterpreter would make execution more stable and faster. For that, an event loop for waiting user input must be async to use JavaScript's setTimeout().

Eisu/Japanese key inputs broken sequence to buffer

How to reproduce

1. Open https://rhysd.github.io/vim.wasm
2. Type i to enter insert mode
3. Type 'Eisu/Japanese' key

Environment

• OS: macOS 10.12
• Chrome 67

Build sometimes fails with bad memory access

Describe the bug

An exception is sometimes thrown as #28 (comment) reported.

Steps To Reproduce

Not sure, but sending key input sometimes causes this.

Expected behavior

Not crash

Actual behavior

Crash with exception thrown

Screenshots/DevTools console (if possible)

Shown above

Your environment

• OS: macOS 10.12
• Browser: Chrome
• Browser Version: 75

Additional context (if any)

Text artifacts on changes

Describe the bug
Text artifacts are visible on any large changes to text.

Steps To Reproduce
Open vim.wasm, enter insert mode to remove the starter text.

Expected behavior
All previous text should be gone and no white marks of a previous text should be visible.

Actual behavior
There are white marks of the previous text

Screenshots/DevTools console (if possible)
https://i.imgur.com/IwlLIJv.gif

Your environment:

• OS: Windows 10
• Browser: Firefox and Edge
• Browser Version: 66.0.3 and 44.17763.1.0

Additional context (if any)
Tested with both browsers at different window sizes.
Tested on 1920x1080 and 3840x2160 resolution
Testing device has embedded graphics and a dedicated GPU

Unable to switch splits in the browser

Describe the bug

When trying to use the regular command to switch splits, the browser intercepts the command and tries to close the browser window

Workaround

In the help text, introduce the ':winc " for moving between splits.

Steps To Reproduce

Open vim.wasm
split a window ( :sp )
Try to use ctrl-w to move windows

• The browser will try to close the browser tab

Expected behavior

Actual behavior

Screenshots/DevTools console (if possible)

Your environment

• OS: Windows
• Browser: Opera
• Browser Version: 81.0.4044.138

Additional context (if any)

Message area is not properly rendered

Repro

1. Open https://rhysd.github.io/vim.wasm
2. Enter :version<CR>
3. Check message output

Environment

• OS: macOS 10.12
• Browser: Chrome 67.0.3

Note

Thanks to @tyru for the report

SharedArrayBuffer restricted in new browser versions

Describe the bug

A downstream project as well as the demo on https://rhysd.github.io/vim.wasm/ are now broken on most browsers, since SharedArrayBuffer has been disabled

Steps To Reproduce

Run https://rhysd.github.io/vim.wasm/

Expected behavior

vim opens up

Actual behavior

Alert popup with message FATAL: SharedArrayBuffer is not supported by this browser. If you're using Firefox or Safari, please enable feature flag.

Screenshots/DevTools console (if possible)

Your environment

• OS: Win10
• Browser: Chrome
• Browser Version: 93

Additional context (if any)

https://caniuse.com/?search=SharedArrayBuffer
https://hacks.mozilla.org/2020/07/safely-reviving-shared-memory/

Can't generate from release tarball

vim.wasm/build.sh

Lines 5 to 8 in 97335e7

	if [ ! -d .git ]; then
	echo 'build.sh must be run from repository root' 1>&2
	exit 1
	fi

Trying to generate the vim.wasm file from a release tarball, I get an error because there's no .git folder. I understand this behaviour is to prevent errors, but in that case, I think is superfluous and should be removed.

vim.wasm with networking protocol: IPFS, Remote-storage?

What is an issue which you want to solve with your feature request?

One of the problems with vim.wasm is that there is no facility to choose where to save the typed code. This is a problem when you write code and want the copy to be kept somewhere else for backup or for data security reasons.

Describe the solution you'd like

I would like to have an option in vim.wasm to choose the storage location. For example, I could save all the code I'm typing in vim.wasm directly to google drive, dropbox, trezorit or I could save it through a protocol like IPFS, FTP etc.

Additional context (if any)

• IPFS
• Google drive api
• dropbox api
• ftp
• remote-storage

build from vim/vim

Hello,

Is there any instruction how to rebase from vim/vim to fetch the latest changes?

Attempting to close the browser tab should not be possible

Ideally this would result in an alert saying "Type :qa! and press to abandon all changes and exit vim". Anything else is simply not true to the vim experience (ignoring for the moment that :q doesn't actually work, which it probably should)

Can not input chinese characters

Describe the bug
I Can not input chinese characters with vim.wasm

Steps To Reproduce

1. Open https://rhysd.github.io/vim.wasm/
2. Try to input chinese,like " 你好，世界"
3. It shows "nihao,shijie" in the vim.wasm.

Expected behavior
It shows "你好，世界" in the vim.wasm.

Actual behavior
It shows "nihao,shijie" in the vim.wasm.

Screenshots/DevTools console (if possible)

Your environment:

• OS: macos
• Browser: chrome
• Browser Version: 73.0.3683.103

Additional context (if any)
None

Potential PWA App

What is an issue which you want to solve with your feature request?

Allow the live demo to be installed as a PWA (Progressive Web App).

Allowing the live demo to be installed could include great features such as:

• Offline Support.
• Open text/script files directly from the file system (https://web.dev/file-handling/).
• Open vim.wasm into a clear buffer (without a tryit.js buffer) (https://web.dev/app-shortcuts/).

Describe the solution you'd like

Implement a service worker to cache vim.wasm and the files to run it in the browser.
Add a web manifest to help the browser install it.

Additional context (if any)

Some good tutorials can be found at web.dev (https://web.dev/tags/progressive-web-apps/)

Vim crashes with empty string argument

Describe the bug

When passing an empty string as command line argument of Vim, Vim crashes on start.

Steps To Reproduce

import { VimWasm } from '/path/to/vim-wasm/vimwasm.js';

const vim = new VimWasm({ ... });

vim.start({ debug: true, cmdArgs: [ '' ] });

Run above script in browser and check console in DevTools.

Or access to http://rhysd.github.io/vim.wasm/?arg=

Expected behavior

Vim normally starts with an unnamed buffer

Actual behavior

Vim crashes with following abort error:

worker: Error was thrown in worker: abort("TypeError: Cannot read property 'mode' of null") at Error
    at jsStackTrace (http://localhost:1234/vim.js:1374:13)
    at stackTrace (http://localhost:1234/vim.js:1391:12)
    at abort (http://localhost:1234/vim.js:8200:44)
    at ___syscall33 (http://localhost:1234/vim.js:5581:69)
    at _access (wasm-function[4982]:59)
    at _readfile (wasm-function[1636]:2316)
    at _open_buffer (wasm-function[175]:1086)
    at _create_windows (wasm-function[4640]:792)
    at _vim_main2 (wasm-function[4638]:1543)
    at _wasm_main (wasm-function[4629]:1356)

Screenshots/DevTools console (if possible)

Your environment

• OS: macOS 10.12
• Browser: Chrome
• Browser Version: 75.0.3770.100

Additional context (if any)

colorscheme

Is there a reason why there is only a single colorscheme; https://github.com/rhysd/vim.wasm/tree/wasm/wasm/usr/local/share/vim/colors

Is it possible to have more colorschemes; https://github.com/vim/vim/tree/master/runtime/colors

Add sound support

What is an issue which you want to solve with your feature request?

A vim plugin like killersheep does not fully work.

Describe the solution you'd like

Support sound feature (enable sound feature in :version) using Web Audio API.

Additional context (if any)

None

(in chrome) arrow keys in command mode not working correctly

If you enter a command like :w filename, and hit enter, then press : to get back to command mode and press the up arrow key, it should go back in the command history and pull up :w filename, but instead it inserts :<Up>. This happens with all four arrow keys.

:help missing

:help isn't working

Cross origin isolation

What is an issue which you want to solve with your feature request?

Working in Firefox (And maybe other browsers).

Describe the solution you'd like

• Host somewhere that support custom headers (like netlify)
• Add coop and coep headers

vimtutor

Could you create a page that pre-populates this with the text of vimtutor?
http://www2.geog.ucl.ac.uk/~plewis/teaching/unix/vimtutor

This would be a really cool tool for trying out vim!

bug? Visual-mode cursor is not removed

Repro.

1. Write something multiline
2. Into the Visual-mode
3. Select an area
4. Do replace or something to selected area

Screenshot

Build not working

After cloning the repo and building it using ./build.sh, running a local server and hosting vim.html raises quite a few errors.

Following the steps under Development of the README file, raised these errors.

Vim should run without any problems in the browser

But what I see is a blank screen with multiple errors in the console

Your environment:

• OS: Ubuntu 18.04
• Browser: Google Chrome
• Browser Version: 74.0.3729.169

Line number does not show

Repro

1. Open https://rhysd.github.io/vim.wasm
2. Type :set number<CR>
3. Check line number is not shown at line 1

Environment

OS: macOS 10.12
Browser: Chrome 67.0.3

Clipboard read on visual select

Describe the bug

When I visual select some code, I notice that it's triggering the onWriteClipboard

Steps To Reproduce

1. Visual select some text
2. See your clipboard (or use the debug)

Expected behavior

No clipboard when visual selecting

Actual behavior

Clipboard when visual selecting

Your environment

• OS: macOS
• Browser: chrome
• Browser Version: 109

Additional context (if any)

Access to vim api and context from a containing app

What is an issue which you want to solve with your feature request?

We have a Qt-based desktop application for medical image processing and we use python code as a kind of macro language to extend and automate the program.

We'd like to be able to use a full featured editor integrated within the application to work with our python code.

Because our app uses Qt, we have the QWebEngine available and can embed a full featured web browser in our app, and we can call browser's javascript environment from python (e.g. like in this test code). Note that it's all asynchronous on both the javascript and python sides.

Recently the question came up about using a full editor to edit the python code in our app, and I found that I can run you vim.wasm code in our embedded browser:

https://discourse.slicer.org/t/directly-interacting-with-python-console/34455/7

But I don't see any easy way to get/set the contents of the editor window or be notified in javascript of vim events.

Describe the solution you'd like

I'd like to be able to start the vim.wasm context in the browser and then call a javascript function to populate the current text buffer for editing. Then I'd like to be able to use vim keystrokes to trigger javascript code in the browser that would make calls back to the python code, for example to send selection buffers to python for execution.

Additional context (if any)

I tried using the ?debug argument to set the vim object as window.vim and while I could access vim in the debug console I didn't see any way to set or get the values of the current vim buffers. It would be great if window.vim were available to interact with the browser's javascript enviornment.

Thanks in advance - I'm a long-time vi/vim user and having this available would make me very happy : )