JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<script src="https://rawgit.com/muut/riotjs/master/riot.js"></script>
<title>RIOT example</title>

<timetable>
</timetable>

JavaScript

riot.tag('timetable', '<button onclick="{ up }">up</button><p><timer start="{item}" each="{ item, i in items }"></timer></p>', function (opts) {
    this.items = [];
    for(var i = 1; i < 1000; i++) {
        this.items.push(i);
    }
    this.up = function() {
      this.items = [];
      for(var i = 20; i < 100; i++) {
        this.items.push(i);
       }
        this.update({ items: this.items });
    }.bind(this)
});



riot.tag('timer', '<p>Seconds Elapsed: { time }</p>', function (opts) {
    this.time = opts.start || 0;
    

    this.tick = (function () {
        //console.log(this.time);
        this.time++;
        this.update({ time: this.time });
    }).bind(this);

    this.timer = setInterval(function() { 
        this.tick();
    }.bind(this), 1000);
    
    this.on("unmount", function() {
        clearInterval(this.timer);
        console.log("clear timer");
    }.bind(this));
});

var start = new Date().getTime();
riot.mount('*');

var end = new Date().getTime();
var time = end - start;
console.log('Execution time: ' + time);