als-component/examples/todos/Todos.js

lightweight JavaScript library for creating reactive, server-rendered, and browser-based components.

class Todos extends Component {
   constructor(props, inner) {
      super(props, inner)
   }

   remove(id) {
      const index = this.props.todos.findIndex(obj => obj.id === id)
      if(index !== -1) {
         this.props.todos.splice(index,1)
         this.update()
      }
   }

   completed(id) {
      const index = this.props.todos.findIndex(obj => obj.id === id)
      if(index !== -1) {
         this.props.todos[index].completed = !this.props.todos[index].completed
         this.update()
      }
   }

   before() {
      if (!this.Component.isBrowser) return
      let { todos } = this.props
      todos.sort((a, b) => a.completed > b.completed ? 1 : -1);
      localStorage.setItem('todos', JSON.stringify(todos))
   }

   render() {
      this.before()
      const { todos } = this.props
      return /*html*/`<div>
         ${todos.map(todo => new Todo({ todo, key: todo.id, todos: this }).call()).join('')}
      </div>`
   }
}