JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script type="text/javascript" src="http://angularlight.org/bin/alight.last.min.js"></script>
<script type="text/javascript" src="http://angularlight.org/bin/alight_0.8.last.min.js"></script>

JavaScript

window.alightInitCallback = function(alight) {
    if(!alight.version) alight = alight();
    
    // app
    var app = alight.Scope();
    app.version = alight.version;
    app.result = '';
    var element = document.createElement('div');
    element.innerHTML = '<div> <button al-click="run()">run {{=version}}</button> {{r1}} {{r2}} </div>';
    document.body.appendChild(element);
    alight.applyBindings(app, element);
    
    // init test
    var scope = alight.Scope({useObserver: true});
    var count = 0;
    function callback() {
        count++;
    };
    for(var i=0;i<2000;i++) {        
        for(var list = [], j=0;j<2000;j++,list.push({}));
        scope['ar_'+i] = list;
        scope.$watch('ar_'+i, callback, {isArray: true});
    };
    
    app.run = function() {
        console.log('run');
        scope.$scan();
        count = 0;
        
        // test 1
        var start = performance.now();
        scope.$scan(function() {
            if(count !== 0) console.error('Error count', count);
            app.r1 = (performance.now() - start).toFixed(2);
            app.$scan();
            
            // test 2
            start = performance.now();
            for(var i=0;i<100;i++)
                scope['ar_'+i][15] = {};
            scope.$scan(function() {
                if(count !== 100) console.error('Error count', count);
                app.r2 = (performance.now() - start).toFixed(2);
                app.$scan();
            });
        })
    };
    
};