JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/muut/riotjs/master/riot.js"></script>
<link rel="stylesheet" href="https://rawgit.com/jimsparkman/RiotControl/master/demo/todo.css">
<todoapp></todoapp>

JavaScript

var RiotControl = {
  _stores: [],
  addStore: function(store) {
    this._stores.push(store)
  },
  trigger: function() {
    var args = [].slice.call(arguments)
    this._stores.forEach(function(el,i,a){
      el.trigger.apply(null, args)
    })
  },
  on: function(ev, callback) {
    console.log('problem')
    this._stores.forEach(function(el,i,a){
      el.on(ev, callback)
    })
  }
}

var itemsCount = 500;
// TodoStore definition.
// Flux stores house application logic and state that relate to a specific domain.
// In this case, a list of todo items.
function TodoStore() {
  riot.observable(this) // Riot provides our event emitter.
  
  var self = this
  self.todos = [];
  

  // Our store's event handlers / API.
  // This is where we would use AJAX calls to interface with the server.
  // Any number of views can emit actions/events without knowing the specifics of the back-end.
  // This store can easily be swapped for another, while the view components remain untouched.

  self.on('todo_add', function(newTodo) {
    self.todos.push(newTodo) 
    self.trigger('todos_changed', self.todos)        
  })

  self.on('todo_remove', function() {
    self.todos.pop()
    self.trigger('todos_changed', self.todos)
  })

  self.on('todo_init', function() {
    self.trigger('todos_changed', self.todos)
  })

  // The store emits change events to any listening views, so that they may react and redraw themselves.

}


riot.tag('todo', '<h3>{ opts.title }</h3> <ul> <li each="{ items }"> <label class="{ completed: done }"> <input type="checkbox" __checked="{ done }" onclick="{ parent.toggle }"> { title } </label> </li> </ul> <form onsubmit="{ add }"> <input name="input" onkeyup="{ edit }"> <button __disabled="{ !text }">Add #{ items.length + 1 }</button> </form> <button __disabled="{ !items.length }" onclick="{ remove }">Remove</button>', function(opts) {
  var self = this
  self.disabled = true
  self.items = []

  self.on('mount', function() {
   ...