init

.eslintrc

@@ -0,0 +1,177 @@
+{
+  "env": {
+    "browser": true,
+    "node": true
+  },
+
+  "ecmaFeatures": {
+    "arrowFunctions": true,
+    "destructuring": true,
+    "classes": true,
+    "defaultParams": true,
+    "blockBindings": true,
+    "modules": true,
+    "objectLiteralComputedProperties": true,
+    "objectLiteralShorthandMethods": true,
+    "objectLiteralShorthandProperties": true,
+    "restParams": true,
+    "spread": true,
+    "templateStrings": true
+  },
+
+  "rules": {
+    "accessor-pairs": 2,
+    "array-bracket-spacing": 0,
+    "block-scoped-var": 0,
+    "brace-style": [2, "1tbs", { "allowSingleLine": true }],
+    "camelcase": 0,
+    "comma-dangle": [2, "never"],
+    "comma-spacing": [2, { "before": false, "after": true }],
+    "comma-style": [2, "last"],
+    "complexity": 0,
+    "computed-property-spacing": 0,
+    "consistent-return": 0,
+    "consistent-this": 0,
+    "constructor-super": 2,
+    "curly": [2, "multi-line"],
+    "default-case": 0,
+    "dot-location": [2, "property"],
+    "dot-notation": 0,
+    "eol-last": 2,
+    "eqeqeq": [2, "allow-null"],
+    "func-names": 0,
+    "func-style": 0,
+    "generator-star-spacing": [2, { "before": true, "after": true }],
+    "guard-for-in": 0,
+    "handle-callback-err": [2, "^(err|error)$" ],
+    "indent": [2, 2, { "SwitchCase": 1 }],
+    "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+    "linebreak-style": 0,
+    "lines-around-comment": 0,
+    "max-nested-callbacks": 0,
+    "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
+    "new-parens": 2,
+    "newline-after-var": 0,
+    "no-alert": 0,
+    "no-array-constructor": 2,
+    "no-caller": 2,
+    "no-catch-shadow": 0,
+    "no-cond-assign": 2,
+    "no-console": 0,
+    "no-constant-condition": 0,
+    "no-continue": 0,
+    "no-control-regex": 2,
+    "no-debugger": 2,
+    "no-delete-var": 2,
+    "no-div-regex": 0,
+    "no-dupe-args": 2,
+    "no-dupe-keys": 2,
+    "no-duplicate-case": 2,
+    "no-else-return": 0,
+    "no-empty": 0,
+    "no-empty-character-class": 2,
+    "no-empty-label": 2,
+    "no-eq-null": 0,
+    "no-eval": 2,
+    "no-ex-assign": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-extra-boolean-cast": 2,
+    "no-extra-parens": 0,
+    "no-extra-semi": 0,
+    "no-fallthrough": 2,
+    "no-floating-decimal": 2,
+    "no-func-assign": 2,
+    "no-implied-eval": 2,
+    "no-inline-comments": 0,
+    "no-inner-declarations": [2, "functions"],
+    "no-invalid-regexp": 2,
+    "no-irregular-whitespace": 2,
+    "no-iterator": 2,
+    "no-label-var": 2,
+    "no-labels": 2,
+    "no-lone-blocks": 2,
+    "no-lonely-if": 0,
+    "no-loop-func": 0,
+    "no-mixed-requires": 0,
+    "no-mixed-spaces-and-tabs": 2,
+    "no-multi-spaces": 2,
+    "no-multi-str": 2,
+    "no-multiple-empty-lines": [2, { "max": 1 }],
+    "no-native-reassign": 2,
+    "no-negated-in-lhs": 2,
+    "no-nested-ternary": 0,
+    "no-new": 2,
+    "no-new-func": 0,
+    "no-new-object": 2,
+    "no-new-require": 2,
+    "no-new-wrappers": 2,
+    "no-obj-calls": 2,
+    "no-octal": 2,
+    "no-octal-escape": 2,
+    "no-param-reassign": 0,
+    "no-path-concat": 0,
+    "no-process-env": 0,
+    "no-process-exit": 0,
+    "no-proto": 0,
+    "no-redeclare": 2,
+    "no-regex-spaces": 2,
+    "no-restricted-modules": 0,
+    "no-return-assign": 2,
+    "no-script-url": 0,
+    "no-self-compare": 2,
+    "no-sequences": 2,
+    "no-shadow": 0,
+    "no-shadow-restricted-names": 2,
+    "no-spaced-func": 2,
+    "no-sparse-arrays": 2,
+    "no-sync": 0,
+    "no-ternary": 0,
+    "no-this-before-super": 2,
+    "no-throw-literal": 2,
+    "no-trailing-spaces": 2,
+    "no-undef": 2,
+    "no-undef-init": 2,
+    "no-undefined": 0,
+    "no-underscore-dangle": 0,
+    "no-unexpected-multiline": 2,
+    "no-unneeded-ternary": 2,
+    "no-unreachable": 2,
+    "no-unused-expressions": 0,
+    "no-unused-vars": [2, { "vars": "all", "args": "none" }],
+    "no-use-before-define": 0,
+    "no-var": 0,
+    "no-void": 0,
+    "no-warning-comments": 0,
+    "no-with": 2,
+    "object-curly-spacing": 0,
+    "object-shorthand": 0,
+    "one-var": [2, { "initialized": "never" }],
+    "operator-assignment": 0,
+    "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }],
+    "padded-blocks": 0,
+    "prefer-const": 0,
+    "quote-props": 0,
+    "quotes": [2, "single", "avoid-escape"],
+    "radix": 2,
+    "semi": [2, "never"],
+    "semi-spacing": 0,
+    "sort-vars": 0,
+    "space-after-keywords": [2, "always"],
+    "space-before-blocks": [2, "always"],
+    "space-before-function-paren": [2, "always"],
+    "space-in-parens": [2, "never"],
+    "space-infix-ops": 2,
+    "space-return-throw-case": 2,
+    "space-unary-ops": [2, { "words": true, "nonwords": false }],
+    "spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!"] }],
+    "strict": 0,
+    "use-isnan": 2,
+    "valid-jsdoc": 0,
+    "valid-typeof": 2,
+    "vars-on-top": 0,
+    "wrap-iife": [2, "any"],
+    "wrap-regex": 0,
+    "yoda": [2, "never"]
+  }
+}

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+TODO.md

README.md

@@ -0,0 +1,8 @@
+## Principles
+
+- Terse
+- Testable
+- Reactive
+- Single State Tree
+- Hot Reloading
+- Time Travel

examples/todomvc/components/App.vue

@@ -0,0 +1,96 @@
+<style src="todomvc-app-css/index.css"></style>
+
+<template>
+  <section class="todoapp">
+    <!-- header -->
+    <header class="header">
+      <h1>todos</h1>
+      <input class="new-todo"
+        autofocus
+        autocomplete="off"
+        placeholder="What needs to be done?"
+        @keyup.enter="addTodo">
+    </header>
+    <!-- main section -->
+    <section class="main" v-show="todos.length">
+      <input class="toggle-all"
+        type="checkbox"
+        :checked="allChecked"
+        @change="toggleAll(!allChecked)">
+      <ul class="todo-list">
+        <todo v-for="todo in filteredTodos" :todo="todo"></todo>
+      </ul>
+    </section>
+    <!-- footer -->
+    <footer class="footer" v-show="todos.length">
+      <span class="todo-count">
+        <strong>{{ remaining }}</strong>
+        {{ remaining | pluralize 'item' }} left
+      </span>
+      <ul class="filters">
+        <li v-for="(key, val) in filters">
+          <a href="#/{{$key}}"
+            :class="{ selected: visibility === key }"
+            @click="visibility = key">
+            {{ key | capitalize }}
+          </a>
+        </li>
+      </ul>
+      <button class="clear-completed"
+        v-show="todos.length > remaining"
+        @click="clearCompleted">
+        Clear completed
+      </button>
+    </footer>
+  </section>
+</template>
+
+<script>
+import vuex from '../vuex'
+import Todo from './Todo.vue'
+
+const {
+  addTodo,
+  toggleAll,
+  clearCompleted
+} = vuex.actions
+
+const filters = {
+  all: (todos) => todos,
+  active: (todos) => todos.filter(todo => !todo.done),
+  completed: (todos) => todos.filter(todo => todo.done)
+}
+
+export default {
+  components: { Todo },
+  data () {
+    return {
+      todos: vuex.get('todos'),
+      visibility: 'all',
+      filters: filters
+    }
+  },
+  computed: {
+    allChecked () {
+      return this.todos.every(todo => todo.done)
+    },
+    filteredTodos () {
+      return filters[this.visibility](this.todos)
+    },
+    remaining () {
+      return this.todos.filter(todo => !todo.done).length
+    }
+  },
+  methods: {
+    addTodo (e) {
+      var text = e.target.value
+      if (text.trim()) {
+        addTodo(text)
+      }
+      e.target.value = ''
+    },
+    toggleAll,
+    clearCompleted
+  }
+}
+</script>

examples/todomvc/components/Todo.vue

@@ -0,0 +1,63 @@
+<template>
+  <li class="todo" :class="{ completed: todo.done, editing: editing }">
+    <div class="view">
+      <input class="toggle"
+        type="checkbox"
+        :checked="todo.done"
+        @change="toggleTodo(todo)">
+      <label v-text="todo.text" @dblclick="editing = true"></label>
+      <button class="destroy" @click="deleteTodo(todo)"></button>
+    </div>
+    <input class="edit"
+      v-show="editing"
+      v-focus="editing"
+      :value="todo.text"
+      @keyup.enter="doneEdit"
+      @keyup.esc="cancelEdit"
+      @blur="doneEdit">
+  </li>
+</template>
+
+<script>
+import vuex from '../vuex'
+const {
+  toggleTodo,
+  deleteTodo,
+  editTodo
+} = vuex.actions
+
+export default {
+  props: ['todo'],
+  data () {
+    return {
+      editing: false
+    }
+  },
+  directives: {
+    focus (value) {
+      if (value) {
+        this.vm.$nextTick(() => {
+          this.el.focus()
+        })
+      }
+    }
+  },
+  methods: {
+    toggleTodo,
+    deleteTodo,
+    doneEdit (e) {
+      var value = e.target.value.trim()
+      if (!value) {
+        deleteTodo(this.todo)
+      } else if (this.editing) {
+        editTodo(this.todo, value)
+        this.editing = false
+      }
+    },
+    cancelEdit (e) {
+      e.target.value = this.todo.text
+      this.editing = false
+    }
+  }
+}
+</script>

examples/todomvc/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>vue store example</title>
+  </head>
+  <body>
+    <app></app>
+    <script src="example.build.js"></script>
+  </body>
+</html>

examples/todomvc/main.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import App from './components/App.vue'
+
+new Vue({
+  el: 'body',
+  components: { App }
+})

examples/todomvc/vuex/actions.js

@@ -0,0 +1,8 @@
+export default {
+  addTodo: 'ADD_TODO',
+  deleteTodo: 'DELETE_TODO',
+  toggleTodo: 'TOGGLE_TODO',
+  editTodo: 'EDIT_TODO',
+  toggleAll: 'TOGGLE_ALL',
+  clearCompleted: 'CLEAR_COMPLETED'
+}