Verovio

Using Verovio for Neon.js

Neon's rendering and editing backbone is Verovio. Ultimately the fork used here tends to differ from the upstream version. Here are some tips for using Verovio in the context of developing for Neon.js:

Toolkit and EditorToolkit

There are two toolkit classes in Verovio, the toolkit (vrv::Toolkit) and the editor toolkit (vrv::EditorToolkit). The toolkit is the class closest to the frontend and is what is called by both main.cpp in the CLI and which is given Javascript bindings by emscripten. The editor toolkit adds the experimental editor actions that Neon relies on, and is accessed through the edit function of the regular toolkit (vrv::Toolkit::Edit). Editor actions are send to the editor toolkit through a JSON object.

Building for size

Verovio is big, especially when built in javascript. There are two things that can reliably minimize the Verovio package: change optimizations and remove features unused in Neon. This means cutting out unused fonts and not building extra loaders for non-MEI formats and replacing the -O3 optimization in emscripten with -Os. Or, instead of building with

./buildToolkit -H

you build with

sed -i '' "s/-O3/-Os/" buildToolkit
./buildToolkit -x "Gootville,Leipzig,Petaluma" -DHPX

This can get the size down to 3.9 MB from 6.0 MB.

A note on the Node and Standalone Versions

Because of some issues with webpack (#326) we use a standalone toolkit of Verovio for production. But for testing we use the NPM package in src/verovio-dev since it integrates better with Jest. Ultimately both versions use the file verovio-util/verovio.js which is the raw emscripten output, but with some different helpers added (see setup-verovio, which draws from the build file for Verovio).