[feature] Node.js support

[kubawolanin]

Hey @panarch!

Thank you for your work. I've seen your posts on https://github.com/0xfe/vexflow/issues/338 and at the same time I've discovered your standalone-vexflow-context npm package.

I'm desperately looking for a way to generate VexFlow images server-side. For this task I'm using Firebase Cloud Functions. I've planned to use vexflow on Node.js context as it is, but turns out I need a DOM element to operate on. Here's my code:

const scoreImage = functions.https.onRequest((request, response) => {
    // Generate a canvas
    const Canvas = require('canvas-prebuilt');
    const Vex = require('vexflow');
    const cWidth = 500;
    const cHeight = 200;
    const canvas = new Canvas(cWidth, cHeight);
    const ctx = canvas.getContext('2d');

    const VF = Vex.Flow;
    const vf = new VF.Factory({
       // no idea what to put there :(
    });
    const score = vf.EasyScore();
    const vfSystem = vf.System();

    vfSystem.addStave({
        voices: [
            score.voice(
                score.notes('C4/8, D4, E4, F#4, G#4, A4, B4/q', {
                    stem: 'up'
                })
            )
        ]
    }).addClef('treble').addTimeSignature('4/4');

    vf.setContext(ctx).draw();

    response.set('Cache-Control', 'public, max-age=60, s-maxage=31536000');
    response.writeHead(200, {
        'Content-Type': 'image/png'
    });
    canvas.pngStream().pipe(response);
});

Could you share any advice on how to utilize your package on the Node.js context? Note that I'm not using React Native here - just simple canvas-prebuilt that I'm streaming into HTTP response.

The other idea I had was to incorporate SVG backend from VexFlow, and then using jsdom extract the <svg> element with matching content-type.

Cheers, Kuba

[andiejs]

Did you ever get anywhere with this? I'd like to use vexflow to create images as well.

[panarch]

@kubawolanin @andiejs

Please use this repo below, you can very simply use VexFlow on Node.js. https://github.com/panarch/node-vexflow

Firstly I made this standalone-vexflow-context, I thought that it’s better to maintain a single repository to provide react-native and node.js support, but now it looks better not to do it.

I made a new repository node-vexflow, now only html5 canvas context supported. (no svg support for now)