Lightning App that uses JointJS no longer works if Locker Service is activated

Question

I am trying to load Joint.js and its dependencies libraries into my Lightning App (Locker Service is activated) and I got this error:

[Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.]

Joint.js error line number is 1400 and the code is:

   append: function(el) {
        var els = el;
        if (Object.prototype.toString.call(el) !== '[object Array]') {
            els = [el];
        }

        for (var i = 0, len = els.length; i < len; i++) {
            el = els[i];
            this.node.appendChild(el instanceof VElement ? el.node : el);  ERROR
        }
        return this;
    },

I use these version JointJS: JointJS v0.9.6 (joint.min.js and joint.min.css)

And JointJS dependencies: jQuery v2.0.3 lodash 3.10.1 backbone-min.js

Is anyone already experiencing this error or can help me solve this problem?

Thanks!

Here is my Lightning Code:

1) myTestApp.app

<aura:application >
    <c:myCompTest/>
</aura:application>

2) myCompTest.cmp

<aura:component >
    <ltng:require      styles="/resource/JointJS_Resources/joint.css,/resource/JointJS_Resources/qa.css"
        scripts='
            /resource/jquery.min.js,
            /resource/lodash.min.js,
            /resource/backbone-min.js,
            /resource/joint.min.js'
        afterScriptsLoaded="{!c.doAfterScriptsLoaded}"
    />
    <div id="mypaper"></div>
</aura:component>

3) myCompTestController.js

({
    doAfterScriptsLoaded :function(component, event, helper){
        console.log('doAfterScriptsLoaded called...');
        console.log('before...');
        helper.loadAppScripts(component,event);
        console.log('after...');
    }
})

4) myCompTestHelper.js

({
    loadAppScripts : function(component, event) {
        console.log('loadAppScripts...');

        var graph = new joint.dia.Graph;

        var paper = new joint.dia.Paper({
            el: $('#mypaper'),
            width: 600,
            height: 200,
            model: graph,
            gridSize: 1
        });

        var rect = new joint.shapes.basic.Rect({
            position: { x: 100, y: 30 },
            size: { width: 100, height: 30 },
            attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
        });

        var rect2 = rect.clone();
        rect2.translate(300);

        var link = new joint.dia.Link({
            source: { id: rect.id },
            target: { id: rect2.id }
        });

        graph.addCells([rect, rect2, link]);

    }

})

And an error occurs when I created var paper = new joint.dia.Paper (...)

Any idea?

Answer 1

Does JointJs meet the Lightning Securty requirements:

• ES5 Strict Mode compliant
• Content Security Policy compliant (does not use unsafe inline or any form of eval)

?

Currently instanceof is also listed as unsupported but we have managed to find a way to support it (not yet released). For example with Spring'17 we've seen only one library (Momentjs) so far that has a single problematic use of instanceof Function.

Can you please provide a link to the library/docs for Joint?