vue3-core/packages/vue-vapor/examples/composition/todomvc.html

<script src="../../dist/vue-vapor.global.js"></script>
<link rel="stylesheet" href="../../../../node_modules/todomvc-app-css/index.css">

<div id="app"></div>

<script>
const { createVaporApp, defineComponent, reactive, computed, watchEffect, onMounted, onUnmounted, nextTick } = VueVapor

const STORAGE_KEY = 'todos-vuejs-3.x'
const todoStorage = {
  fetch () {
    const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
    todos.forEach((todo, index) => {
      todo.id = index
    })
    todoStorage.uid = todos.length
    return todos
  },
  save (todos) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
  }
}

const filters = {
  all (todos) {
    return todos
  },
  active (todos) {
    return todos.filter((todo) => {
      return !todo.completed
    })
  },
  completed (todos) {
    return todos.filter(function (todo) {
      return todo.completed
    })
  }
}

function pluralize (n) {
  return n === 1 ? 'item' : 'items'
}

const _sfc_main = defineComponent({
  setup() {
    const state = reactive({
      todos: todoStorage.fetch(),
      editedTodo: null,
      newTodo: '',
      beforeEditCache: '',
      visibility: 'all',
      remaining: computed(() => {
        return filters.active(state.todos).length
      }),
      remainingText: computed(() => {
        return ` ${pluralize(state.remaining)} left`
      }),
      filteredTodos: computed(() => {
        return filters[state.visibility](state.todos)
      }),
      allDone: computed({
        get: function () {
          return state.remaining === 0
        },
        set: function (value) {
          state.todos.forEach(todo => {
            todo.completed = value
          })
        },
      }),
    })

    watchEffect(() => {
      todoStorage.save(state.todos)
    })

    onMounted(() => {
      window.addEventListener('hashchange', onHashChange)
      onHashChange()
    })

    onUnmounted(() => {
      window.removeEventListener('hashchange', onHashChange)
    })

    function onHashChange() {
      const visibility = window.location.hash.replace(/#\/?/, '')
      if (filters[visibility]) {
        state.visibility = visibility
      } else {
        window.location.hash = ''
        state.visibility = 'all'
      }
    }

    function addTodo() {
      const value = state.newTodo && state.newTodo.trim()
      if (!value) {
        return
      }
      state.todos.push({
        id: todoStorage.uid++,
        title: value,
        completed: false,
      })
      state.newTodo = ''
    }

    function removeTodo(todo) {
      state.todos.splice(state.todos.indexOf(todo), 1)
    }

    async function editTodo(todo) {
      state.beforeEditCache = todo.title
      state.editedTodo = todo
      await nextTick()
      document.getElementById(`todo-${todo.id}-input`).focus()
    }

    function doneEdit(todo) {
      if (!state.editedTodo) {
        return
      }
      state.editedTodo = null
      todo.title = todo.title.trim()
      if (!todo.title) {
        removeTodo(todo)
      }
    }

    function cancelEdit(todo) {
      state.editedTodo = null
      todo.title = state.beforeEditCache
    }

    function removeCompleted() {
      state.todos = filters.active(state.todos)
    }

    return {
      state,
      addTodo,
      removeTodo,
      editTodo,
      doneEdit,
      cancelEdit,
      removeCompleted,
    }
  },
})

const { children: _children, vModelText: _vModelText, withDirectives: _withDirectives, vShow: _vShow, next: _next, delegate: _delegate, on: _on, renderEffect: _renderEffect, setDynamicProp: _setDynamicProp, setText: _setText, setClass: _setClass, createFor: _createFor, insert: _insert, delegateEvents: _delegateEvents, template: _template } = VueVapor
const t0 = _template("<li><div class=\"view\"><input class=\"toggle\" type=\"checkbox\"><label></label><button class=\"destroy\"></button></div><input class=\"edit\" type=\"text\"></li>")
const t1 = _template("<section class=\"todoapp\"><header class=\"header\"><h1>todos</h1><input class=\"new-todo\" autofocus autocomplete=\"off\" placeholder=\"What needs to be done?\"></header><section class=\"main\"><input id=\"toggle-all\" class=\"toggle-all\" type=\"checkbox\"><label for=\"toggle-all\">Mark all as complete</label><ul class=\"todo-list\"></ul></section><footer class=\"footer\"><span class=\"todo-count\"><strong></strong><span></span></span><ul class=\"filters\"><li><a href=\"#/all\">All</a></li><li><a href=\"#/active\">Active</a></li><li><a href=\"#/completed\">Completed</a></li></ul><button class=\"clear-completed\"> Clear completed </button></footer></section>")
_delegateEvents("keyup", "dblclick", "click", "input")

function _sfc_render(_ctx) {
  const n18 = t1()
  const n0 = _children(n18, 0, 1)
  _withDirectives(n0, [[_vModelText, () => _ctx.state.newTodo]])
  const n10 = _children(n18, 1)
  _withDirectives(n10, [[_vShow, () => _ctx.state.todos.length]])
  const n1 = n10.firstChild
  const n9 = _next(n1, 2)
  const n17 = n10.nextSibling
  _withDirectives(n17, [[_vShow, () => _ctx.state.todos.length]])
  const n11 = _children(n17, 0, 0)
  const n12 = n11.nextSibling
  const n13 = _children(n17, 1, 0, 0)
  const n14 = _children(n17, 1, 1, 0)
  const n15 = _children(n17, 1, 2, 0)
  const n16 = _children(n17, 2)
  _withDirectives(n16, [[_vShow, () => _ctx.state.todos.length > _ctx.state.remaining]])
  _delegate(n0, "update:modelValue", () => $event => (_ctx.state.newTodo = $event))
  _delegate(n0, "keyup", () => _ctx.addTodo, {
    keys: ["enter"]
  })
  _on(n1, "change", () => $event => (_ctx.state.allDone = $event.target.checked))
  const n2 = _createFor(() => (_ctx.state.filteredTodos), (_ctx2) => {
    const n8 = t0()
    const n4 = _children(n8, 0, 0)
    const n5 = n4.nextSibling
    const n6 = n5.nextSibling
    const n7 = _children(n8, 1)
    _on(n4, "change", () => $event => (_ctx2[0].completed = $event.target.checked))
    _delegate(n5, "dblclick", () => $event => (_ctx.editTodo(_ctx2[0])))
    _delegate(n6, "click", () => $event => (_ctx.removeTodo(_ctx2[0])))
    _delegate(n7, "input", () => $event => (_ctx2[0].title = $event.target.value))
    _on(n7, "blur", () => $event => (_ctx.doneEdit(_ctx2[0])))
    _delegate(n7, "keyup", () => $event => (_ctx.doneEdit(_ctx2[0])), {
      keys: ["enter"]
    })
    _delegate(n7, "keyup", () => $event => (_ctx.cancelEdit(_ctx2[0])), {
      keys: ["escape"]
    })
    _renderEffect(() => _setDynamicProp(n4, "checked", _ctx2[0].completed))
    _renderEffect(() => {
      _setText(n5, _ctx2[0].title)
      _setDynamicProp(n7, "value", _ctx2[0].title)
    })
    _renderEffect(() => _setDynamicProp(n7, "id", `todo-${_ctx2[0].id}-input`))
    _renderEffect(() => _setClass(n8, ["todo", {
            completed: _ctx2[0].completed,
            editing: _ctx2[0] === _ctx.state.editedTodo,
          }]))
    return n8
  }, (todo) => (todo.id))
  _insert(n2, n9)
  _delegate(n16, "click", () => _ctx.removeCompleted)
  _renderEffect(() => _setDynamicProp(n1, "checked", _ctx.state.allDone))
  _renderEffect(() => _setText(n11, _ctx.state.remaining))
  _renderEffect(() => _setText(n12, _ctx.state.remainingText))
  _renderEffect(() => _setClass(n13, { selected: _ctx.state.visibility === 'all' }))
  _renderEffect(() => _setClass(n14, { selected: _ctx.state.visibility === 'active' }))
  _renderEffect(() => _setClass(n15, { selected: _ctx.state.visibility === 'completed' }))
  return n18
}

_sfc_main.render = _sfc_render
const app = createVaporApp(_sfc_main, {})
app.mount('#app')
</script>