JSFiddle - React, Tailwind, and code Playground

by eigenjoy

HTML

<div>
  <todos></todos>
</div>

CSS

</style>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<style>
.complete {
  text-decoration: line-through;
}

Babel + JSX

const todos = {
  template: `
  	<div>
    	<todo-form 
        new-todo="$ctrl.newTodo"
        on-add="$ctrl.addTodo">
      </todo-form>
      <todo-list 
        todos="$ctrl.todos" 
        on-complete="$ctrl.completeTodo"
        on-delete="$ctrl.removeTodo">
      </todo-list>
    </div>
  `,
  controller: class TodoController {
    constructor(TodoService) {
    	this.todoService = TodoService;
      this.completeTodo = this.completeTodo.bind(this);
      this.removeTodo = this.removeTodo.bind(this);
      this.addTodo = this.addTodo.bind(this);
    }
  	$onInit() {
    	this.todos = this.todoService.getTodos();
    }
    addTodo({ label }) {
      this.todos = [{ label, id: this.todos.length + 1 }, ...this.todos];
    }
    completeTodo({ todo }) {
      this.todos = this.todos.map(
        item => item.id === todo.id ? Object.assign({}, item, { complete: true }) : item
      );
    }
    removeTodo({ todo }) {
      this.todos = this.todos.filter(({ id }) => id !== todo.id);
    }
  }
};

const todoForm = {
  bindings: {
    onAdd: '<'
  },
  template: `
    <form ng-submit="$ctrl.submit();">
      <input ng-model="$ctrl.label">
      <button type="submit">Add todo</button>
    </form>
  `,
  controller: class TodoFormController {
    constructor() {}
  	submit(label) {
      if (!this.label) return;
    	this.onAdd({ label: this.label });
      this.label = '';
    };
  }
};

const todoList = {
  bindings: {
    todos: '<',
    onComplete: '<',
    onDelete: '<'
  },
	template: `
    <ul>
	    <li ng-repeat="todo in $ctrl.todos">
  	    <todo 
    	    item="todo" 
      	  on-change="$ctrl.onComplete"
        	on-remove="$ctrl.onDelete">
	      </todo>
  	  </li>
    </ul>
  `
};

const todo = {
	bindings: {
  	item: '<',
    onChange: '<',
    onRemove: '<'
  },
  template: `
  	<div>
      <span ng-class="{ complete: $ctrl.item.complete }">{{ $ctrl.item.label }}</span>
      <button 
        type="button" 
        ng-click="$ctrl.onChange({ todo:...