Merge branch 'multi-features' into wasm

rhysd · Jul 18, 2019 · 68f7b4a · 68f7b4a
2 parents 943ac4e + f103618
commit 68f7b4a
Show file tree

Hide file tree

Showing 13 changed files with 421 additions and 60 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -23,12 +23,21 @@ before_script:
   - emcc --version
 
 script:
-  - echo -e "\\033[33;1mBuilding and Linting\\033[0m" && echo -en "travis_fold:start:BUILD\\r\\033[0K"
+  - echo -e "\\033[33;1mBuilding Normal Vim\\033[0m" && echo -en "travis_fold:start:BUILD_NORMAL\\r\\033[0K"
   - ./build.sh
-  - echo -en "travis_fold:end:BUILD\\r\\033[0K"
+  - echo -en "travis_fold:end:BUILD_NORMAL\\r\\033[0K"
+  - cd ./wasm
   - echo -e "\\033[33;1mRunning Tests\\033[0m" && echo -en "travis_fold:start:TEST\\r\\033[0K"
-  - cd ./wasm && npm test -- --travisci
+  - "npm test -- --travisci | tee log.txt | grep -v 'LOG: '"
   - echo -en "travis_fold:end:TEST\\r\\033[0K"
+  - cd -
+  - echo -e "\\033[33;1mBuilding Small Vim\\033[0m" && echo -en "travis_fold:start:BUILD_SMALL\\r\\033[0K"
+  - make clean && VIM_FEATURE=small ./build.sh configure make emcc
+  - echo -en "travis_fold:end:BUILD_SMALL\\r\\033[0K"
+
+after_failure:
+  - if [ -f ./wasm/log.txt ]; then cat ./wasm/log.txt; fi
+  - if [ -f ./log.txt ]; then cat ./log.txt; fi
 
 before_cache:
   - brew cleanup

diff --git a/README.md b/README.md
@@ -6,14 +6,15 @@
 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`][shared-array-buffer].
+This project is packaged as [npm pacakge][npm-package].
 
-<img alt="Main Screen" src="./wasm-readme-images/main-screen.png" width=662 height=487/>
+<img alt="Main Screen" src="./wasm-readme-images/main-screen.png" width=662 height=487 />
 
 ### [Try it with your browser][try it]
 
 - **USAGE**
-  - Almost all Vim features (text objects, syntax highlighting, Vim script, ...)
-    and latest features (popup window, text properties, ...) are supported.
+  - 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}`.
@@ -29,10 +30,10 @@ and interacts with the main thread via [`SharedArrayBuffer`][shared-array-buffer
   - `:!/path/to/file.js` evaluates the JavaScript code in browser.  `:!%` evaluates
     current buffer.
   - vimtutor is available by `:e tutor`.
-  - [`vim-wasm` npm pacakge][npm-package] is available to use vim.wasm in web application.
-    Please read [wasm/ directory](./wasm) for more details.
   - Add `arg=` query parameters (e.g. `?arg=~%2f.vim%2fvimrc&arg=hello.txt`) to
     add `vim` command line arguments.
+  - [`vim-wasm` npm pacakge][npm-package] is available to use vim.wasm in web application.
+    Please read [wasm/ directory](./wasm) for more details.
   - Please read [wasm/README.md](./wasm/README.md) for more details.
 
 - **NOTICE**
@@ -52,8 +53,8 @@ and interacts with the main thread via [`SharedArrayBuffer`][shared-array-buffer
 The goal of this project is running Vim editor on browsers without losing Vim's powerful
 functionalities by compiling Vim C sources into WebAssembly.
 
-The current ported Vim version is 8.1.1661 with 'normal' features set.  Please check
-[changelog](./wasm/CHANGELOG.md) for update history.
+The current ported Vim version is 8.1.1661 with 'normal' and 'small' features sets.
+Please check [changelog](./wasm/CHANGELOG.md) for update history.
 
 - [English Presentation Slide at VimConf 2018](https://speakerdeck.com/rhysd/vim-ported-to-webassembly-vimconf-2018)
 - Japanese Blogpost [1](https://rhysd.hatenablog.com/entry/2018/07/09/090115) [2](https://rhysd.hatenablog.com/entry/2019/06/13/090519)

diff --git a/build.sh b/build.sh
@@ -7,12 +7,22 @@ if [ ! -d .git ]; then
     exit 1
 fi
 
+message() {
+    echo "[1;93mbuild.sh: ${*}[0m"
+}
+
 run_configure() {
-    echo "build.sh: Running ./configure"
+    local feature
+    if [[ "$VIM_FEATURE" == "" ]]; then
+        feature='normal'
+    else
+        feature="$VIM_FEATURE"
+    fi
+    message "Running ./configure: feature=${feature}"
     CPP="gcc -E" emconfigure ./configure \
         --enable-fail-if-missing \
         --enable-gui=wasm \
-        --with-features=normal \
+        "--with-features=${feature}" \
         --with-x=no \
         --with-vim-name=vim.bc \
         --with-modified-by=rhysd \
@@ -58,20 +68,31 @@ run_configure() {
 }
 
 run_make() {
-    echo "build.sh: Running make"
+    message "Running make"
     local cflags
     if [[ "$RELEASE" == "" ]]; then
         cflags="-O1 -g -DGUI_WASM_DEBUG"
     else
         cflags="-Os"
     fi
     emmake make -j CFLAGS="$cflags"
-    echo "build.sh: Copying bitcode to wasm/"
+    message "Copying bitcode to wasm/"
     cp src/vim.bc wasm/
 }
 
 run_emcc() {
-    echo "build.sh: Building JS/Wasm for web worker with emcc"
+    local feature
+    local prefix
+    local src_prefix
+    if [[ "$VIM_FEATURE" == "" ]]; then
+        feature='normal'
+        prefix=''
+        src_prefix=''
+    else
+        feature="$VIM_FEATURE"
+        prefix="${VIM_FEATURE}/"
+        src_prefix='../'
+    fi
 
     local extraflags
     if [[ "$RELEASE" == "" ]]; then
@@ -81,23 +102,25 @@ run_emcc() {
         extraflags="-Os"
     fi
 
+    message "Running emcc: feature=${feature} flags=${extraflags}"
+
     if [[ "$PRELOAD_HOME_DIR" != "" ]]; then
         cp ./wasm/README.md ./wasm/home/web_user/
         extraflags="${extraflags} --preload-file home"
     fi
 
-    cd wasm/
+    cd "wasm/$prefix"
 
     if [ ! -f tutor ]; then
-        cp ../runtime/tutor/tutor .
+        cp "${src_prefix}../runtime/tutor/tutor" .
     fi
 
     # Note: ALLOW_MEMORY_GROWTH is necessary because 'normal' feature build requires larger memory size
-    emcc vim.bc \
+    emcc "${src_prefix}vim.bc" \
         -v \
         -o vim.js \
-        --pre-js pre.js \
-        --js-library runtime.js \
+        --pre-js "${src_prefix}pre.js" \
+        --js-library "${src_prefix}runtime.js" \
         -s INVOKE_RUN=1 \
         -s EXIT_RUNTIME=1 \
         -s ALLOW_MEMORY_GROWTH=1 \
@@ -108,32 +131,47 @@ run_emcc() {
         $extraflags
 
     if [[ "$RELEASE" != "" ]]; then
-        npm run minify
+        if [[ "$feature" == "normal" ]]; then
+            npm run minify
+        else
+            npm run minify:small
+        fi
     fi
 
     cd -
 }
 
 run_release() {
-    echo "build.sh: Cleaning built files"
+    message "Cleaning built files"
     rm -rf wasm/*
     git checkout wasm/
-    export RELEASE=true
-    echo "build.sh: Start release build"
-    bash build.sh
-    echo "build.sh: Release build done"
+    message "Start release build"
+    RELEASE=true ./build.sh
+    message "Release build done"
+}
+
+# Build both normal feature and small feature
+run_release-all() {
+    message "Release builds for all features: normal, small"
+
+    run_release
+
+    message "Start release build for small feature"
+    make clean
+    RELEASE=true VIM_FEATURE=small ./build.sh configure make emcc
+    message "Release build done for small feature"
 }
 
 run_build_runtime() {
-    echo "build.sh: Building runtime JavaScript sources"
+    message "Building runtime JavaScript sources"
     cd wasm/
     npm install
     npm run build
     cd -
 }
 
 run_check() {
-    echo "build.sh: Checking built artifacts"
+    message "Checking built artifacts"
     cd wasm/
     npm run lint
     if [[ "$RELEASE" != "" ]]; then
@@ -143,7 +181,7 @@ run_check() {
 }
 
 run_gh-pages() {
-    echo "build.sh: Preparing new commit on gh-pages branch"
+    message "Preparing new commit on gh-pages branch"
     local hash
     hash="$(git rev-parse HEAD)"
 
@@ -175,25 +213,25 @@ run_gh-pages() {
 
     git add vim.* index.html style.css main.js vimwasm.js images
     git commit -m "Deploy from ${hash}"
-    echo "build.sh: New commit created from ${hash}. Please check diff with 'git show' and deploy it with 'git push'"
+    message "New commit created from ${hash}. Please check diff with 'git show' and deploy it with 'git push'"
 }
 
 run_deploy() {
-    echo "build.sh: Before deploying gh-pages, run release build"
+    message "Before deploying gh-pages, run release build"
     export PRELOAD_HOME_DIR=true
     run_release
 
-    echo "build.sh: Deploying gh-pages"
+    message "Deploying gh-pages"
     run_gh-pages
 }
 
 run_merge-upstream() {
-    echo "build.sh: Running tools/merge_upstream_for_wasm.bash"
+    message "Running tools/merge_upstream_for_wasm.bash"
     ./tools/merge_upstream_for_wasm.bash
 }
 
 run_prepare-preload() {
-    echo "build.sh: Running tools/prepare_preload_dirs.bash"
+    message "Running tools/prepare_preload_dirs.bash"
     ./tools/prepare_preload_dir.bash
 }
 
@@ -210,4 +248,4 @@ else
     run_check
 fi
 
-echo "Done."
+message "Done."
diff --git a/wasm/.gitignore b/wasm/.gitignore
@@ -16,3 +16,5 @@
 /example/package-lock.json
 /example/node_modules
 /home/web_user/README.md
+/small/tutor
+/small/vim.*
diff --git a/wasm/README.md b/wasm/README.md
@@ -49,6 +49,7 @@ import { VimWasm } from '/path/to/vim-wasm/vimwasm.js';
 const vim = new VimWasm({
     canvas: document.getElementById('vim-canvas'),
     input: document.getElementById('vim-input'),
+    workerScriptPath: '/path/to/vim-wasm/vim.js',
 });
 
 // Setup callbacks if you need...
@@ -59,6 +60,10 @@ vim.start();
 
 `VimWasm` class is provided to manage Vim lifecycle. Please import it from `vimwasm.js` ES Module.
 
+`workerScriptPath` is the most important option value which represents a file path to worker script
+which runs Vim in Web Worker. By switching path to scripts for 'normal' feature Vim and 'small' feature
+Vim, you can switch feature set of Vim. Please read following 'Normal Feature and Small Feature' section.
+
 `VimWasm` provides several callbacks to interact with Vim running in Web Worker. Please check
 [example code](./example/index.js) for the callbacks setup.
 
@@ -79,6 +84,39 @@ Following projects are related to this npm package and may be more suitable for
 - [react-vim-wasm](https://github.com/rhysd/react-vim-wasm): [React](https://reactjs.org/) component for [vim.wasm][project].
   Vim editor can be embedded in your React web application.
 
+## Normal Feature and Small Feature
+
+This package contains two binaries for 'normal' feature set and 'small' feature set.
+'normal' feature set provides almost all Vim's powerful features but binary size is 4x bigger than
+'small' feature set. 'small' feature set only provides basic features but binary size is much smaller.
+
+|                 | Normal Feature      | Small Feature                                                                      |
+|-----------------|---------------------|------------------------------------------------------------------------------------|
+| **Script path** | `vim-wasm/vim.js`   | `vim-wasm/small/vim.js`                                                            |
+| **Data size**   | 1.3 MB              | 13 KB                                                                              |
+| **Wasm size**   | 709 KB              | 374 KB                                                                             |
+| **Features**    | Almost all features | Not including syntax highlight, indentation, Vim script support, text objects, ... |
+
+Data size is significantly different because 'normal' feature set includes syntax highlighting and indentation
+support for all filetypes. In contrast 'small' feature set only includes colorscheme and minimal vimrc.
+
+By passing a worker script path for each feature to `workerScriptPath` option, you can specify a feature set.
+Please choose one considering your application's requirements.
+
+```javascript
+const normalVim = new VimWasm({
+    canvas,
+    input,
+    workerScriptPath: '/path/to/vim-wasm/vim.js',
+});
+
+const smallVim = new VimWasm({
+    canvas,
+    input,
+    workerScriptPath: '/path/to/vim-wasm/small/vim.js',
+});
+```
+
 ## Check Browser Compatibility
 
 This npm package runs Vim in Web Worker and the main thread communicates with the worker thread via `SharedArrayBuffer`.
@@ -291,7 +329,7 @@ npm run karma -- --browsers ChromeDebug
 ## Ported Vim
 
 - Current version: 8.1.1661
-- Current feature: normal
+- Current feature: normal and small
 
 ## Notes
 

diff --git a/wasm/home/web_user/tryit.js b/wasm/home/web_user/tryit.js
@@ -76,9 +76,6 @@ class MinHeap {
     }
 
     _heapifyDown(startIdx = 0) {
-        // Compare the parent element to its children and swap parent with the appropriate
-        // child (smallest child for MinHeap, largest child for MaxHeap).
-        // Do the same for next children after swap.
         let idx = startIdx;
         let nextIdx = null;
 

diff --git a/wasm/main.ts b/wasm/main.ts
@@ -12,7 +12,7 @@
  * main.ts: TypeScript main thread runtime for Wasm port of Vim by @rhysd.
  */
 
-import { VimWasm, checkBrowserCompatibility, VIM_VERSION, VIM_FEATURE } from './vimwasm.js';
+import { VimWasm, checkBrowserCompatibility, VIM_VERSION } from './vimwasm.js';
 
 declare global {
     interface Window {
@@ -46,6 +46,7 @@ const screenCanvasElement = document.getElementById('vim-screen') as HTMLCanvasE
 const vim = new VimWasm({
     canvas: screenCanvasElement,
     input: document.getElementById('vim-input') as HTMLInputElement,
+    workerScriptPath: './vim.js',
 });
 
 // Handle drag and drop
@@ -143,6 +144,5 @@ if (debugging) {
     window.vim = vim;
     /* eslint-disable no-console */
     console.log('main: Vim version:', VIM_VERSION);
-    console.log('main: Vim feature:', VIM_FEATURE);
     /* eslint-enable no-console */
 }
diff --git a/wasm/package.json b/wasm/package.json
@@ -12,6 +12,7 @@
     "watch:worker": "tsc -p tsconfig.worker.json --watch",
     "watch": "npm-run-all -p watch:main watch:worker",
     "minify": "uglifyjs --output vim.js vim.js && uglifyjs --output main.js main.js && uglifyjs --output vimwasm.js vimwasm.js",
+    "minify:small": "uglifyjs --output small/vim.js small/vim.js",
     "prettier": "prettier --check --ignore-path .gitignore '*.ts'",
     "eslint": "eslint --ignore-path .gitignore '*.ts' 'test/*.ts'",
     "stylelint": "stylelint style.css",
@@ -21,7 +22,8 @@
     "fix": "npm-run-all -p fix:prettier fix:eslint",
     "karma": "karma start",
     "test": "karma start --single-run",
-    "prepublishOnly": "npm-run-all build minify"
+    "prepublishOnly": "npm-run-all build minify",
+    "preversion": "cd .. && ./build.sh release-all"
   },
   "repository": {
     "type": "git",
@@ -46,7 +48,10 @@
     "vimwasm.js.map",
     "vimwasm.ts",
     "vimwasm.d.ts",
-    "common.d.ts"
+    "common.d.ts",
+    "small/vim.wasm",
+    "small/vim.data",
+    "small/vim.js"
   ],
   "types": "./vimwasm.d.ts",
   "devDependencies": {