chore: include todomvc examples (need tests!)

packages/vue/examples/todomvc-classic.html

@@ -0,0 +1,198 @@
+<script src="../dist/vue.global.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/todomvc-app-css/index.css">
+
+<div id="app">
+  <section class="todoapp">
+    <header class="header">
+      <h1>todos</h1>
+      <input class="new-todo"
+              autofocus autocomplete="off"
+              placeholder="What needs to be done?"
+              v-model="newTodo"
+              @keyup.enter="addTodo">
+    </header>
+    <section class="main" v-if="todos.length">
+      <input id="toggle-all" class="toggle-all" type="checkbox" v-model="allDone">
+      <label for="toggle-all">Mark all as complete</label>
+      <ul class="todo-list">
+        <li v-for="todo in filteredTodos"
+            class="todo"
+            :key="todo.id"
+            :class="{ completed: todo.completed, editing: todo === editedTodo }">
+          <div class="view">
+            <input class="toggle" type="checkbox" v-model="todo.completed">
+            <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
+            <button class="destroy" @click="removeTodo(todo)"></button>
+          </div>
+          <input class="edit" type="text"
+                  v-model="todo.title"
+                  v-todo-focus="todo === editedTodo"
+                  @blur="doneEdit(todo)"
+                  @keyup.enter="doneEdit(todo)"
+                  @keyup.escape="cancelEdit(todo)"
+          >
+        </li>
+      </ul>
+    </section>
+    <footer class="footer" v-if="todos.length">
+        <span class="todo-count">
+          <strong>{{ remaining }}</strong> <span>{{ pluralize(remaining) }} left</span>
+        </span>
+      <ul class="filters">
+        <li><a href="#/all" :class="{ selected: visibility === 'all' }">All</a></li>
+        <li><a href="#/active" :class="{ selected: visibility === 'active' }">Active</a></li>
+        <li><a href="#/completed" :class="{ selected: visibility === 'completed' }">Completed</a></li>
+      </ul>
+      <button class="clear-completed" @click="removeCompleted" v-if="todos.length > remaining">
+        Clear completed
+      </button>
+    </footer>
+  </section>
+</div>
+
+<script>
+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
+    })
+  }
+}
+
+const App = {
+  // app initial state
+  data: {
+    todos: todoStorage.fetch(),
+    newTodo: '',
+    editedTodo: null,
+    visibility: 'all'
+  },
+
+  // watch todos change for localStorage persistence
+  watch: {
+    todos: {
+      handler(todos) {
+        todoStorage.save(todos)
+      },
+      deep: true
+    }
+  },
+
+  mounted() {
+    window.addEventListener('hashchange', this.onHashChange)
+    this.onHashChange()
+  },
+
+  computed: {
+    filteredTodos() {
+      return filters[this.visibility](this.todos)
+    },
+    remaining() {
+      return filters.active(this.todos).length
+    },
+    allDone: {
+      get() {
+        return this.remaining === 0
+      },
+      set(value) {
+        this.todos.forEach(function (todo) {
+          todo.completed = value
+        })
+      }
+    }
+  },
+
+  // methods that implement data logic.
+  // note there's no DOM manipulation here at all.
+  methods: {
+    addTodo() {
+      var value = this.newTodo && this.newTodo.trim()
+      if (!value) {
+        return
+      }
+      this.todos.push({
+        id: todoStorage.uid++,
+        title: value,
+        completed: false
+      })
+      this.newTodo = ''
+    },
+
+    removeTodo(todo) {
+      this.todos.splice(this.todos.indexOf(todo), 1)
+    },
+
+    editTodo(todo) {
+      this.beforeEditCache = todo.title
+      this.editedTodo = todo
+    },
+
+    doneEdit(todo) {
+      if (!this.editedTodo) {
+        return
+      }
+      this.editedTodo = null
+      todo.title = todo.title.trim()
+      if (!todo.title) {
+        this.removeTodo(todo)
+      }
+    },
+
+    cancelEdit(todo) {
+      this.editedTodo = null
+      todo.title = this.beforeEditCache
+    },
+
+    removeCompleted() {
+      this.todos = filters.active(this.todos)
+    },
+
+    onHashChange() {
+      var visibility = window.location.hash.replace(/#\/?/, '')
+      if (filters[visibility]) {
+        this.visibility = visibility
+      } else {
+        window.location.hash = ''
+        this.visibility = 'all'
+      }
+    },
+
+    pluralize (n) {
+      return n === 1 ? 'item' : 'items'
+    }
+  },
+
+  directives: {
+    'todo-focus'(el, binding) {
+      if (binding.value) {
+        el.focus()
+      }
+    }
+  }
+}
+
+Vue.createApp().mount(App, '#app')
+</script>

packages/vue/examples/todomvc-composition.html

@@ -0,0 +1,207 @@
+<script src="../dist/vue.global.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/todomvc-app-css/index.css">
+
+<div id="app">
+  <section class="todoapp">
+    <header class="header">
+      <h1>todos</h1>
+      <input class="new-todo"
+              autofocus autocomplete="off"
+              placeholder="What needs to be done?"
+              v-model="state.newTodo"
+              @keyup.enter="addTodo">
+    </header>
+    <section class="main" v-if="state.todos.length">
+      <input id="toggle-all" class="toggle-all" type="checkbox" v-model="state.allDone">
+      <label for="toggle-all">Mark all as complete</label>
+      <ul class="todo-list">
+        <li v-for="todo in state.filteredTodos"
+            class="todo"
+            :key="todo.id"
+            :class="{ completed: todo.completed, editing: todo === state.editedTodo }">
+          <div class="view">
+            <input class="toggle" type="checkbox" v-model="todo.completed">
+            <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
+            <button class="destroy" @click="removeTodo(todo)"></button>
+          </div>
+          <input class="edit" type="text"
+                  v-model="todo.title"
+                  v-todo-focus="todo === state.editedTodo"
+                  @blur="doneEdit(todo)"
+                  @keyup.enter="doneEdit(todo)"
+                  @keyup.escape="cancelEdit(todo)"
+          >
+        </li>
+      </ul>
+    </section>
+    <footer class="footer" v-if="state.todos.length">
+        <span class="todo-count">
+          <strong>{{ state.remaining }}</strong>
+          <span>{{ state.remainingText }}</span>
+        </span>
+      <ul class="filters">
+        <li><a href="#/all" :class="{ selected: state.visibility === 'all' }">All</a></li>
+        <li><a href="#/active" :class="{ selected: state.visibility === 'active' }">Active</a></li>
+        <li><a href="#/completed" :class="{ selected: state.visibility === 'completed' }">Completed</a></li>
+      </ul>
+      <button class="clear-completed" @click="removeCompleted" v-if="state.todos.length > remaining">
+        Clear completed
+      </button>
+    </footer>
+  </section>
+</div>
+
+<script>
+const { createApp, reactive, computed, watch, onMounted, onUnmounted } = Vue
+
+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 App = {
+  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
+          })
+        }
+      })
+    })
+
+    watch(() => {
+      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)
+    }
+
+    function editTodo (todo) {
+      state.beforeEditCache = todo.title
+      state.editedTodo = todo
+    }
+
+    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
+    }
+  },
+
+  directives: {
+    'todo-focus': (el, { value }) => {
+      if (value) {
+        el.focus()
+      }
+    }
+  }
+}
+
+createApp().mount(App, '#app')
+</script>