kyuwoo-choi

import createStore from 'redux-zero';
const initialState = { route: '', todoList: [] };
const store = createStore(initialState);
export default store;
import store from './store';
function actionCreator(action) {
  return function() {
    let state = store.getState();
    state = action(state, ...arguments);
    store.setState(state);

kyuwoo-choi

// todoList.js
  render() {
...
    const todoItems = todoList
      .filter(todo => {
        return (
          route === '' ||
          (route === 'completed' && todo.completed) ||
          (route === 'active' && !todo.completed)
        );

kyuwoo-choi

render() {
    const todo = this.todo;
    const classCompleted = todo.completed ? ' completed' : '';
    const inputToggle = todo.completed
      ? html`<input class="toggle" type="checkbox" checked>`
      : html`<input class="toggle" type="checkbox">`;
    const classEditing = this._editing ? ' editing' : '';
    return html`
      ${style}
      <div data-id$="${todo.id}" class$="${'item' +

kyuwoo-choi

import { toggle, remove, replace } from '../libs/actions';
...
class TodoItem extends LitRender(HTMLElement) {
...
  connectedCallback() {
    const root = this.shadowRoot;
...
    root.addEventListener('click', handlers.onClick);
...
  }

kyuwoo-choi

import { render } from '../../node_modules/lit-html/lib/lit-extended';
export default base =>
  class extends base {
    render() {}
    async invalidate(instant) {
      if (!this.needsRender) {
        if (!instant) {
          this.needsRender = true;
          await 0;
          this.needsRender = false;

kyuwoo-choi

customElements.define('todo-app', TodoApp);

kyuwoo-choi

...
  render() {
    return html`
      <style>
        host: {
          display: block;
        }
        section {
          background: #fff;
          margin: 130px 0 40px 0;

kyuwoo-choi

...
  add(title) {
    add(title);
  }
...
  get length() {
    const todoList = store.getState().todoList;
    return todoList.length;
  }
...

kyuwoo-choi

...
class TodoApp extends LitRender(HTMLElement) {
  constructor(name) {
    super();
    this.attachShadow({ mode: 'open' });
    this.invalidate();
  }
...

kyuwoo-choi

import { html } from 'lit-html';
import LitRender from '../libs/litRender';
import store from '../libs/store';
import {
  add,
  toggle,
  remove,
  toggleAll,
  clearCompleted,
  replace