als-component/examples/todos/App.js

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

class App extends Component {
   constructor(props) { 
      super(props)
      if (!this.Component.isBrowser) return
      let { todos } = this.props
      if (todos === undefined) {
         todos = localStorage.getItem('todos') || '[]'
         todos = JSON.parse(todos)
         this.props.todos = todos
      }
   }

   add(element) {
      this.props.todos.push({
         name: element.value,
         completed: false,
         id: (Math.random() + 1).toString(36).substring(7)
      })
      element.value = ''
      this.todosComponent.update()
   }

   render() {
      this.todosComponent = new Todos({todos:this.props.todos})
      return /*html*/`<div>
         <input type="text" placeholder="add todo" change="${this.action('change',(event) => this.add(event.target))}">
         ${this.todosComponent.call()}
      </div>`
   }
}