Using NPM packages in V8

What is V8 (not)

The R package V8 provides a direct interface to Google’s high performance JavaScript engine. The V8 engine is also used in Chrome, NodeJS, MongoDB, and many other software.

However each of these programs actually implements most JavaScript functionality on top of V8. The naked V8 engine only provides pure ECMAscript, which does not include a lot of things that you might be used to. There is no I/O (network/disk) and no DOM (window).

Recent versions of V8 do have an event loop (required for async in ES6) and WASM support.

Using JavaScript libraries

You can load JavaScript libraries in V8, but beware that not all packages will work out of the box. Most libraries in npm are primarily written for Node or the browser. Functionality that requires internet connectivity, a browser window, or file access won’t work, but there is a lot of stuff that does work.

ct <- v8()
ct$source('https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js')

[1] "true"

ct$call("_.filter", mtcars, JS("function(x){return x.mpg < 15}"))

                     mpg cyl disp  hp drat    wt  qsec vs am gear carb
Duster 360          14.3   8  360 245 3.21 3.570 15.84  0  0    3    4
Cadillac Fleetwood  10.4   8  472 205 2.93 5.250 17.98  0  0    3    4
Lincoln Continental 10.4   8  460 215 3.00 5.424 17.82  0  0    3    4
Chrysler Imperial   14.7   8  440 230 3.23 5.345 17.42  0  0    3    4
Camaro Z28          13.3   8  350 245 3.73 3.840 15.41  0  0    3    4

JS libraries that don’t do anything online or graphical generally work out of the box.

NPM and browserify

Most NPM packages have many dependencies, but to load it in V8 we need a single .js file. The same holds for browsers, so most libraries provide a bundled version for each release. Also CDN services like cdnjs or jsdelivr provide a large archive of bundled versions of most JavaScript libraries. If the library you need can be found here, this is a good place to start.

If no bundle is available for your library, you might be able to create one from the NPM package. However NPM assumes disk access to load dependencies in require() statements. How is that going to work?

browserify logo

Browserify is a tool to bundle an npm package with all of its dependencies into a single js file that does not require disk access. It is mainly designed to make npm packages suitable for use on a webpage but it is useful with embedded V8 as well.

Browserify example: js-beautify

First we need to install browserify itself:

npm install -g browserify

Now let’s find an example library to browserify. Beautify-js is a simple npm package to fix linebreaks and indentation in JavaScript, HTML or CSS code. To bundle it up, run these three lines in a shell:

npm install js-beautify
echo "global.beautify = require('js-beautify');" > in.js
browserify in.js -o bundle.js

The first line will install js-beautify in a the current dir under node_modules. The second line creates the input file for browserify. In this case it consists of only one line that imports the js-beautify library and exports it to the global environment. The third line runs browserify and saves the output to a new file bundle.js.

We now have a file that we can load in V8. Assuming you ran the above commands in your Desktop directory:

ct <- v8()
ct$source("~/Desktop/bundle.js")

Let’s see whats in our global environment now:

ct$get(JS('Object.keys(global)'))

[1] "print"         "console"       "global"        "js_beautify"  
[5] "html_beautify" "beautify"     

The beautify library is available now. To beautify JavaScript we need to use the js_beautify function. See the package homepage for a full list of options.

test <- "(function(x,y){x = x || 1; y = y || 1; return y * x;})(4, 9)"
pretty_test <- ct$call("beautify.js_beautify", test, list(indent_size = 2))
cat(pretty_test)

(function(x, y) {
  x = x || 1;
  y = y || 1;
  return y * x;
})(4, 9)

The package also includes functions to beautify css and html:

html <- "<ul><li>one</li><li>two</li><li>three</li></ul>"
cat(ct$call("beautify.html_beautify", html))

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>