4 |
5 | _(Results for Chrome 51 + OSX 10.10.5 on a Macbook Pro)_
6 |
7 | # Try
8 | https://developit.github.io/preact-perf
9 |
10 | # Setup
11 | ```
12 | npm run install
13 | ```
14 | # Develop
15 | ```
16 | npm run start
17 | ```
18 | # TODO
19 | - [ ] Collect client info.
20 | - [ ] Average test.
21 | - [ ] Size comparison.
22 | - [ ] Add more framework.
23 | - [ ] DRY test.
24 | - [ ] Better UI/UX.
25 |
--------------------------------------------------------------------------------
/todomvc/elm17/elm-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "1.0.0",
3 | "summary": "TodoMVC created with Elm and elm-html",
4 | "repository": "https://github.com/evancz/elm-todomvc.git",
5 | "license": "BSD3",
6 | "source-directories": [
7 | "."
8 | ],
9 | "exposed-modules": [],
10 | "dependencies": {
11 | "elm-lang/core": "4.0.0 <= v < 5.0.0",
12 | "elm-lang/html": "1.0.0 <= v < 2.0.0"
13 | },
14 | "elm-version": "0.17.0 <= v < 0.18.0"
15 | }
16 |
--------------------------------------------------------------------------------
/todomvc/vue/js/routes.js:
--------------------------------------------------------------------------------
1 | /*global app, Router */
2 |
3 | (function (app, Router) {
4 |
5 | 'use strict';
6 |
7 | var router = new Router();
8 |
9 | ['all', 'active', 'completed'].forEach(function (visibility) {
10 | router.on(visibility, function () {
11 | app.visibility = visibility;
12 | });
13 | });
14 |
15 | router.configure({
16 | notfound: function () {
17 | window.location.hash = '';
18 | app.visibility = 'all';
19 | }
20 | });
21 |
22 | router.init();
23 |
24 | })(app, Router);
25 |
--------------------------------------------------------------------------------
/todomvc/mithril/bower_components/mithril/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mithril",
3 | "version": "0.1.0",
4 | "scripts": {
5 | "test": "grunt test"
6 | },
7 | "devDependencies": {
8 | "grunt-cli": "*",
9 | "grunt-contrib-copy": "*",
10 | "grunt-contrib-uglify": "*",
11 | "grunt-contrib-clean": "*",
12 | "grunt-contrib-concat": "*",
13 | "grunt-contrib-watch": "*",
14 | "grunt-execute": "*",
15 | "grunt-md2html": "*",
16 | "grunt-replace": "*",
17 | "grunt-contrib-qunit": "*",
18 | "grunt-contrib-connect": "*",
19 | "grunt-zip": "*"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/todomvc/om/readme.md:
--------------------------------------------------------------------------------
1 | # Om TodoMVC Example
2 |
3 | > Om is a ClojureScript UI component library over React.
4 |
5 | > _[Om - github.com/swannodette/om](http://github.com/swannodette/om)_
6 |
7 | ## Running
8 |
9 | Install ClojureScript from master by cloning and running
10 | `script/build`. You may need to tweak the `project.clj` so that the
11 | ClojureScript version matches what gets install into your `.m2`
12 | directory. Install Om by cloning and running `lein install`. Then
13 | clone this repo and run `lein cljsbuild once release`. Open
14 | `index.html` in your favorite browser.
15 |
--------------------------------------------------------------------------------
/todomvc/knockoutjs/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/director/*
2 | node_modules/director/build/*
3 | !node_modules/director/build
4 | !node_modules/director/build/director.js
5 |
6 | node_modules/knockout/*
7 | !node_modules/knockout/build
8 | node_modules/knockout/build/*
9 | !node_modules/knockout/build/output/
10 | node_modules/knockout/build/output/*
11 | !node_modules/knockout/build/output/knockout-latest.js
12 |
13 | node_modules/todomvc-app-css/*
14 | !node_modules/todomvc-app-css/index.css
15 |
16 | node_modules/todomvc-common/*
17 | !node_modules/todomvc-common/base.css
18 | !node_modules/todomvc-common/base.js
19 |
--------------------------------------------------------------------------------
/todomvc/angularjs-perf/js/directives/todoFocus.js:
--------------------------------------------------------------------------------
1 | /* jshint undef: true, unused: true */
2 | /*global angular */
3 | (function () {
4 | 'use strict';
5 |
6 | angular.module('todoFocus', [])
7 |
8 | /**
9 | * Directive that places focus on the element it is applied to when the expression it binds to evaluates to true
10 | */
11 | .directive('todoFocus', function ($timeout) {
12 | return function (scope, elem, attrs) {
13 | scope.$watch(attrs.todoFocus, function (newVal) {
14 | if (newVal) {
15 | $timeout(function () {
16 | elem[0].focus();
17 | }, 0, false);
18 | }
19 | });
20 | };
21 | });
22 | })();
23 |
--------------------------------------------------------------------------------
/todomvc/angularjs-perf/js/services/todoStorage.js:
--------------------------------------------------------------------------------
1 | /* jshint undef: true, unused: true */
2 | /*global angular */
3 | (function () {
4 | 'use strict';
5 |
6 | angular.module('todoStorage', [])
7 |
8 | /**
9 | * Services that persists and retrieves TODOs from localStorage
10 | */
11 | .factory('todoStorage', function () {
12 | var STORAGE_ID = 'todos-angularjs-perf';
13 |
14 | return {
15 | get: function () {
16 | return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]');
17 | },
18 |
19 | put: function (todos) {
20 | localStorage.setItem(STORAGE_ID, JSON.stringify(todos));
21 | }
22 | };
23 | });
24 | })();
25 |
--------------------------------------------------------------------------------
/todomvc/backbone/js/routers/router.js:
--------------------------------------------------------------------------------
1 | /*global Backbone */
2 | var app = app || {};
3 |
4 | (function () {
5 | 'use strict';
6 |
7 | // Todo Router
8 | // ----------
9 | var TodoRouter = Backbone.Router.extend({
10 | routes: {
11 | '*filter': 'setFilter'
12 | },
13 |
14 | setFilter: function (param) {
15 | // Set the current filter to be used
16 | app.TodoFilter = param || '';
17 |
18 | // Trigger a collection filter event, causing hiding/unhiding
19 | // of Todo view items
20 | app.todos.trigger('filter');
21 | }
22 | });
23 |
24 | app.TodoRouter = new TodoRouter();
25 | Backbone.history.start();
26 | })();
27 |
--------------------------------------------------------------------------------
/todomvc/ractive/js/routes.js:
--------------------------------------------------------------------------------
1 | /*global window, Router, todoList */
2 | (function (window, Router, todoList) {
3 | 'use strict';
4 |
5 | // We're using https://github.com/flatiron/director for routing
6 |
7 | var router = new Router({
8 | '/active': function () {
9 | todoList.set('currentFilter', 'active');
10 | },
11 | '/completed': function () {
12 | todoList.set('currentFilter', 'completed');
13 | }
14 | });
15 |
16 | router.configure({
17 | notfound: function () {
18 | window.location.hash = '';
19 | todoList.set('currentFilter', 'all');
20 | }
21 | });
22 |
23 | router.init();
24 |
25 | })(window, Router, todoList);
26 |
--------------------------------------------------------------------------------
/todomvc/backbone/js/models/todo.js:
--------------------------------------------------------------------------------
1 | /*global Backbone */
2 | var app = app || {};
3 |
4 | (function () {
5 | 'use strict';
6 |
7 | // Todo Model
8 | // ----------
9 |
10 | // Our basic **Todo** model has `title`, `order`, and `completed` attributes.
11 | app.Todo = Backbone.Model.extend({
12 | // Default attributes for the todo
13 | // and ensure that each todo created has `title` and `completed` keys.
14 | defaults: {
15 | title: '',
16 | completed: false
17 | },
18 |
19 | // Toggle the `completed` state of this todo item.
20 | toggle: function () {
21 | this.save({
22 | completed: !this.get('completed')
23 | });
24 | }
25 | });
26 | })();
27 |
--------------------------------------------------------------------------------
/todomvc/preact/src/util.js:
--------------------------------------------------------------------------------
1 | export function uuid() {
2 | let uuid = '';
3 | for (let i=0; i<32; i++) {
4 | let random = Math.random() * 16 | 0;
5 | if (i === 8 || i === 12 || i === 16 || i === 20) {
6 | uuid += '-';
7 | }
8 | uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random)).toString(16);
9 | }
10 | return uuid;
11 | }
12 |
13 | export function pluralize(count, word) {
14 | return count === 1 ? word : word + 's';
15 | }
16 |
17 | export function store(namespace, data) {
18 | if (data) {
19 | return localStorage.setItem(namespace, JSON.stringify(data));
20 | }
21 |
22 | let store = localStorage.getItem(namespace);
23 | return (store && JSON.parse(store)) || [];
24 | }
25 |
--------------------------------------------------------------------------------
/todomvc/mercury/lib/raf-listen.js:
--------------------------------------------------------------------------------
1 | var raf = require('raf/polyfill');
2 |
3 | module.exports = rafListen;
4 |
5 | function rafListen(observ, fn) {
6 | var sending = false;
7 | var currValue;
8 |
9 | return observ(onvalue);
10 |
11 | function onvalue(value) {
12 | currValue = value;
13 | if (sending) {
14 | return;
15 | }
16 |
17 | sending = true;
18 | raf(send);
19 | }
20 |
21 | function send() {
22 | var oldValue = currValue;
23 | fn(currValue);
24 | sending = false;
25 |
26 | if (oldValue !== currValue) {
27 | sending = true;
28 | raf(send);
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/todomvc/mithril/js/views/single-view.js:
--------------------------------------------------------------------------------
1 | var app = app || {};
2 |
3 | (function () {
4 | 'use strict';
5 |
6 | // Single todo view
7 | app.single = function(ctrl, task, index) {
8 | return m('li', { class: task.completed() ? 'completed' : ''}, [
9 | m('.view', [
10 | m('input.toggle[type=checkbox]', {
11 | onclick: m.withAttr('checked', task.completed),
12 | checked: task.completed()
13 | }),
14 | m('label', task.title()),
15 | m('button.destroy', { onclick: ctrl.remove.bind(ctrl, index)})
16 | ]),
17 | m('input.edit')
18 | ]);
19 | };
20 |
21 | })();
22 |
--------------------------------------------------------------------------------
/todomvc/mercury/input.js:
--------------------------------------------------------------------------------
1 | var window = require("global/window")
2 | var HashRouter = require("hash-router")
3 | var Event = require("geval")
4 |
5 | var mercury = require("../../index.js")
6 |
7 | module.exports = createInput
8 |
9 | function createInput() {
10 | var events = mercury.input([
11 | "toggleAll", "add", "setTodoField", "toggle", "destroy",
12 | "startEdit", "finishEdit", "cancelEdit", "clearCompleted"
13 | ])
14 |
15 | events.setRoute = EventRouter()
16 |
17 | return events
18 | }
19 |
20 | function EventRouter() {
21 | var router = HashRouter()
22 | window.addEventListener("hashchange", router)
23 |
24 | return Event(function (emit) {
25 | router.on("hash", emit)
26 | })
27 | }
28 |
--------------------------------------------------------------------------------
/todomvc/preact/src/header.js:
--------------------------------------------------------------------------------
1 | import { h, Component } from 'preact';
2 | import linkState from 'linkstate';
3 |
4 | const ENTER_KEY = 13;
5 |
6 | export default class TodoHeader extends Component {
7 | handleKey = e => {
8 | if (e.keyCode!==ENTER_KEY) return;
9 | e.preventDefault();
10 |
11 | let text = this.state.text.trim();
12 | if (text) {
13 | this.props.addTodo(text);
14 | this.setState({ text: '' });
15 | }
16 | };
17 |
18 | render({ }, { text }) {
19 | return (
20 | 
This work by Sindre Sorhus is licensed under a Creative Commons Attribution 4.0 International License. 29 | -------------------------------------------------------------------------------- /todomvc/vue/readme.md: -------------------------------------------------------------------------------- 1 | # Vue.js TodoMVC Example 2 | 3 | > Vue.js is a library for building interactive web interfaces. 4 | It provides data-driven, nestable view components with a simple and flexible API. 5 | 6 | > _[Vue.js - vuejs.org](http://vuejs.org)_ 7 | 8 | ## Learning Vue.js 9 | 10 | The [Vue.js website](http://vuejs.org/) is a great resource to get started. 11 | 12 | Here are some links you may find helpful: 13 | 14 | * [Official Guide](http://vuejs.org/guide/) 15 | * [API Reference](http://vuejs.org/api/) 16 | * [Examples](http://vuejs.org/examples/) 17 | * [Building Larger Apps with Vue.js](http://vuejs.org/guide/application.html) 18 | 19 | Get help from other Vue.js users: 20 | 21 | * [Vue.js on Twitter](https://twitter.com/vuejs) 22 | * [Vue.js on Gitter](https://gitter.im/vuejs/vue) 23 | * [Vue.js Forum](http://forum.vuejs.org) 24 | 25 | _If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._ 26 | 27 | ## Credit 28 | 29 | This TodoMVC application was created by [Evan You](http://evanyou.me). 30 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 Matt Esch. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /todomvc/emberjs/js/router.js: -------------------------------------------------------------------------------- 1 | /*global Ember, Todos */ 2 | 'use strict'; 3 | 4 | Todos.Router.map(function () { 5 | this.resource('todos', { path: '/' }, function () { 6 | this.route('active'); 7 | this.route('completed'); 8 | }); 9 | }); 10 | 11 | Todos.TodosRoute = Ember.Route.extend({ 12 | model: function () { 13 | return this.store.find('todo'); 14 | } 15 | }); 16 | 17 | Todos.TodosIndexRoute = Ember.Route.extend({ 18 | setupController: function () { 19 | this.controllerFor('todos').set('filteredTodos', this.modelFor('todos')); 20 | } 21 | }); 22 | 23 | Todos.TodosActiveRoute = Ember.Route.extend({ 24 | setupController: function () { 25 | var todos = this.store.filter('todo', function (todo) { 26 | return !todo.get('isCompleted'); 27 | }); 28 | 29 | this.controllerFor('todos').set('filteredTodos', todos); 30 | } 31 | }); 32 | 33 | Todos.TodosCompletedRoute = Ember.Route.extend({ 34 | setupController: function () { 35 | var todos = this.store.filter('todo', function (todo) { 36 | return todo.get('isCompleted'); 37 | }); 38 | 39 | this.controllerFor('todos').set('filteredTodos', todos); 40 | } 41 | }); 42 | -------------------------------------------------------------------------------- /todomvc/mercury/state.js: -------------------------------------------------------------------------------- 1 | var cuid = require("cuid") 2 | var extend = require("xtend") 3 | var mercury = require("../../index.js") 4 | 5 | var TodoApp = { 6 | todos: [], 7 | route: "all", 8 | field: { 9 | text: "" 10 | } 11 | } 12 | 13 | var TodoItem = { 14 | id: null, 15 | title: "", 16 | editing: false, 17 | completed: false 18 | } 19 | 20 | module.exports = { 21 | todoApp: todoApp, 22 | todoItem: todoItem 23 | } 24 | 25 | function todoApp(events, initialState) { 26 | var state = extend(TodoApp, initialState) 27 | 28 | return mercury.hash({ 29 | todos: mercury.array(state.todos.map(todoItem)), 30 | route: mercury.value(state.route), 31 | field: mercury.hash({ 32 | text :mercury.value(state.field.text) 33 | }), 34 | events: events 35 | }) 36 | } 37 | 38 | function todoItem(item) { 39 | var state = extend(TodoItem, item) 40 | 41 | return mercury.hash({ 42 | id: cuid(), 43 | title: mercury.value(state.title), 44 | editing: mercury.value(state.editing), 45 | completed: mercury.value(state.completed) 46 | }) 47 | } 48 | -------------------------------------------------------------------------------- /todomvc/mithril/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Jean-Philippe Monette 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /todomvc/om/bower_components/director/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2011 Nodejitsu Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. -------------------------------------------------------------------------------- /todomvc/om/bower_components/director/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "director", 3 | "description": "A client Side/Server Side Router", 4 | "author": "Nodejitsu Inc.
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/todomvc/react/js/utils.js:
--------------------------------------------------------------------------------
1 | var app = app || {};
2 |
3 | (function () {
4 | 'use strict';
5 |
6 | app.Utils = {
7 | uuid: function () {
8 | /*jshint bitwise:false */
9 | var i, random;
10 | var uuid = '';
11 |
12 | for (i = 0; i < 32; i++) {
13 | random = Math.random() * 16 | 0;
14 | if (i === 8 || i === 12 || i === 16 || i === 20) {
15 | uuid += '-';
16 | }
17 | uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random))
18 | .toString(16);
19 | }
20 |
21 | return uuid;
22 | },
23 |
24 | pluralize: function (count, word) {
25 | return count === 1 ? word : word + 's';
26 | },
27 |
28 | store: function (namespace, data) {
29 | if (data) {
30 | return localStorage.setItem(namespace, JSON.stringify(data));
31 | }
32 |
33 | var store = localStorage.getItem(namespace);
34 | return (store && JSON.parse(store)) || [];
35 | },
36 |
37 | extend: function () {
38 | var newObj = {};
39 | for (var i = 0; i < arguments.length; i++) {
40 | var obj = arguments[i];
41 | for (var key in obj) {
42 | if (obj.hasOwnProperty(key)) {
43 | newObj[key] = obj[key];
44 | }
45 | }
46 | }
47 | return newObj;
48 | }
49 | };
50 | })();
51 |
--------------------------------------------------------------------------------
/todomvc/mithril/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | todos
13 | 14 |
27 |
28 |
29 |
TodoMVC Benchmark v1.0.0
30 |31 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /todomvc/ractive/readme.md: -------------------------------------------------------------------------------- 1 | # Ractive.js TodoMVC app 2 | 3 | > Ractive.js solves some of the biggest headaches in web development – data binding, efficient DOM updates, event handling – and does so with almost no learning curve. 4 | 5 | > _[Ractive.js - ractivejs.org](http://ractivejs.org)_ 6 | 7 | 8 | ## Learning Ractive.js 9 | 10 | [Try the 60 second setup](https://github.com/Rich-Harris/Ractive/wiki/60-second-setup), or [follow the interactive tutorials](http://learn.ractivejs.org). 11 | 12 | You can find the [API documentation on GitHub](https://github.com/Rich-Harris/Ractive/wiki). 13 | 14 | If you have questions, try [Stack Overflow](http://stackoverflow.com/questions/tagged/ractivejs) or [@RactiveJS on Twitter](http://twitter.com/RactiveJS). 15 | 16 | _If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._ 17 | 18 | 19 | ## Implementation 20 | 21 | Ractive.js isn't an MVC framework in the traditional sense. There are no Model classes, just a plain old array of task objects, and there is only one view object. The app lives in a single file, with two tiny extra files to handle persistence and routing. 22 | 23 | This is because Ractive is optimised for developer sanity (as well as performance!). It was initially developed to create interactive news apps at [theguardian.com](http://theguardian.com), which have to be built against punishing deadlines and moving goalposts. Because it embraces reactive programming principles, the developer has less to worry about. Ractive's API is totally straightforward - you can learn it in 5 minutes and master it in a few hours. 24 | 25 | It has a number of innovative features: animations, easier event handling, declarative transitions, first-class SVG support, logical expressions in templates with sophisticated dependency tracking. For many developers, it hits the sweet spot between the flexibility of a library like Backbone and the power of a framework like Angular. 26 | 27 | 28 | ## Credit 29 | 30 | This TodoMVC application was created by [Rich Harris](http://rich-harris.co.uk). 31 | -------------------------------------------------------------------------------- /todomvc/om/bower_components/director/lib/director/cli.js: -------------------------------------------------------------------------------- 1 | 2 | var util = require('util'), 3 | director = require('../director'); 4 | 5 | var Router = exports.Router = function (routes) { 6 | director.Router.call(this, routes); 7 | this.recurse = false; 8 | }; 9 | 10 | // 11 | // Inherit from `director.Router`. 12 | // 13 | util.inherits(Router, director.Router); 14 | 15 | // 16 | // ### function configure (options) 17 | // #### @options {Object} **Optional** Options to configure this instance with 18 | // Configures this instance with the specified `options`. 19 | // 20 | Router.prototype.configure = function (options) { 21 | options = options || {}; 22 | director.Router.prototype.configure.call(this, options); 23 | 24 | // 25 | // Delimiter must always be `\s` in CLI routing. 26 | // e.g. `jitsu users create` 27 | // 28 | this.delimiter = '\\s'; 29 | return this; 30 | }; 31 | 32 | // 33 | // ### function dispatch (method, path) 34 | // #### @method {string} Method to dispatch 35 | // #### @path {string} Path to dispatch 36 | // Finds a set of functions on the traversal towards 37 | // `method` and `path` in the core routing table then 38 | // invokes them based on settings in this instance. 39 | // 40 | Router.prototype.dispatch = function (method, path, tty, callback) { 41 | // 42 | // Prepend a single space onto the path so that the traversal 43 | // algorithm will recognize it. This is because we always assume 44 | // that the `path` begins with `this.delimiter`. 45 | // 46 | path = ' ' + path; 47 | var fns = this.traverse(method, path, this.routes, ''); 48 | if (!fns || fns.length === 0) { 49 | if (typeof this.notfound === 'function') { 50 | this.notfound.call({ tty: tty, cmd: path }, callback); 51 | } 52 | else if (callback) { 53 | callback(new Error('Could not find path: ' + path)); 54 | } 55 | 56 | return false; 57 | } 58 | 59 | if (this.recurse === 'forward') { 60 | fns = fns.reverse(); 61 | } 62 | 63 | this.invoke(this.runlist(fns), { tty: tty, cmd: path }, callback); 64 | return true; 65 | }; 66 | -------------------------------------------------------------------------------- /todomvc/preact/src/item.js: -------------------------------------------------------------------------------- 1 | import { h, Component } from 'preact'; 2 | import linkState from 'linkstate'; 3 | 4 | const ESCAPE_KEY = 27; 5 | const ENTER_KEY = 13; 6 | 7 | export default class TodoItem extends Component { 8 | handleSubmit = () => { 9 | let val = this.state.editText.trim(), 10 | { todo, onSave, onDestroy } = this.props; 11 | if (val) { 12 | onSave(todo, val); 13 | this.setState({ editText: val }); 14 | } 15 | else { 16 | onDestroy(todo); 17 | } 18 | }; 19 | 20 | handleEdit = () => { 21 | let { todo, onEdit } = this.props; 22 | onEdit(todo); 23 | this.setState({ editText: todo.title }); 24 | }; 25 | 26 | toggle = e => { 27 | let { todo, onToggle } = this.props; 28 | onToggle(todo); 29 | e.preventDefault(); 30 | }; 31 | 32 | handleKeyDown = e => { 33 | let { todo, onCancel } = this.props; 34 | if (e.which===ESCAPE_KEY) { 35 | this.setState({ editText: todo.title }); 36 | onCancel(todo); 37 | } 38 | else if (e.which===ENTER_KEY) { 39 | this.handleSubmit(todo); 40 | } 41 | }; 42 | 43 | destroy = () => { 44 | let { todo, onDestroy } = this.props; 45 | onDestroy(todo); 46 | }; 47 | 48 | focus(c) { 49 | if (c) setTimeout(() => c.focus(), 1); 50 | } 51 | 52 | // componentDidUpdate({ editing }) { 53 | // let node = editing && this.base && this.base.querySelector('.edit'); 54 | // if (node) node.focus(); 55 | // } 56 | 57 | render({ todo:{ title, completed }, editing }, { editText }) { 58 | return ( 59 |
61 |
67 |
68 |
69 |
70 | { editing && (
71 |
79 | ) }
80 | todos
13 | 14 |
21 |
22 |
23 |
24 |
25 | todos
14 | 15 |-
19 |
-
20 | 21 | 22 | 23 | 24 |25 | 26 |
27 |
todos
13 | 14 |-
19 |
-
20 | 21 | 22 | 23 | 24 |25 | 26 |
27 |
61 |
62 |
64 |
65 |
69 |
75 |
90 | ) : null }
91 |
92 | { (activeTodoCount || completedCount) ? (
93 |
101 | );
102 | }
103 | }
104 |
105 |
106 | // just a fake component we can feed to router. yay.
107 | const Noop = () => null;
108 |
--------------------------------------------------------------------------------
/todomvc/vue/js/app.js:
--------------------------------------------------------------------------------
1 | /*global Vue, todoStorage */
2 |
3 | (function (exports) {
4 |
5 | 'use strict';
6 |
7 | var filters = {
8 | all: function (todos) {
9 | return todos;
10 | },
11 | active: function (todos) {
12 | return todos.filter(function (todo) {
13 | return !todo.completed;
14 | });
15 | },
16 | completed: function (todos) {
17 | return todos.filter(function (todo) {
18 | return todo.completed;
19 | });
20 | }
21 | };
22 |
23 | exports.app = new Vue({
24 |
25 | // the root element that will be compiled
26 | el: '.todoapp',
27 |
28 | // app initial state
29 | data: {
30 | todos: todoStorage.fetch(),
31 | newTodo: '',
32 | editedTodo: null,
33 | visibility: 'all'
34 | },
35 |
36 | // watch todos change for localStorage persistence
37 | watch: {
38 | todos: {
39 | deep: true,
40 | handler: todoStorage.save
41 | }
42 | },
43 |
44 | // computed properties
45 | // http://vuejs.org/guide/computed.html
46 | computed: {
47 | filteredTodos: function () {
48 | return filters[this.visibility](this.todos);
49 | },
50 | remaining: function () {
51 | return filters.active(this.todos).length;
52 | },
53 | allDone: {
54 | get: function () {
55 | return this.remaining === 0;
56 | },
57 | set: function (value) {
58 | this.todos.forEach(function (todo) {
59 | todo.completed = value;
60 | });
61 | }
62 | }
63 | },
64 |
65 | // methods that implement data logic.
66 | // note there's no DOM manipulation here at all.
67 | methods: {
68 |
69 | addTodo: function () {
70 | var value = this.newTodo && this.newTodo.trim();
71 | if (!value) {
72 | return;
73 | }
74 | this.todos.push({ title: value, completed: false });
75 | this.newTodo = '';
76 | },
77 |
78 | removeTodo: function (todo) {
79 | this.todos.$remove(todo);
80 | },
81 |
82 | editTodo: function (todo) {
83 | this.beforeEditCache = todo.title;
84 | this.editedTodo = todo;
85 | },
86 |
87 | doneEdit: function (todo) {
88 | if (!this.editedTodo) {
89 | return;
90 | }
91 | this.editedTodo = null;
92 | todo.title = todo.title.trim();
93 | if (!todo.title) {
94 | this.removeTodo(todo);
95 | }
96 | },
97 |
98 | cancelEdit: function (todo) {
99 | this.editedTodo = null;
100 | todo.title = this.beforeEditCache;
101 | },
102 |
103 | removeCompleted: function () {
104 | this.todos = filters.active(this.todos);
105 | }
106 | },
107 |
108 | // a custom directive to wait for the DOM to be updated
109 | // before focusing on the input field.
110 | // http://vuejs.org/guide/custom-directive.html
111 | directives: {
112 | 'todo-focus': function (value) {
113 | if (!value) {
114 | return;
115 | }
116 | var el = this.el;
117 | Vue.nextTick(function () {
118 | el.focus();
119 | });
120 | }
121 | }
122 | });
123 |
124 | })(window);
125 |
--------------------------------------------------------------------------------
/todomvc/emberjs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | -
76 | { shownTodos.map( todo => (
77 |
todos
14 | 17 |-
22 |
-
24 | 25 | 26 | 27 | 28 |29 | 37 |
38 |
85 |
91 |
94 |
95 |
96 |
104 | \n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t- `.
78 | addOne: function (todo) {
79 | var view = new app.TodoView({ model: todo });
80 | this.$list.append(view.render().el);
81 | },
82 |
83 | // Add all items in the **Todos** collection at once.
84 | addAll: function () {
85 | this.$list.html('');
86 | app.todos.each(this.addOne, this);
87 | },
88 |
89 | filterOne: function (todo) {
90 | todo.trigger('visible');
91 | },
92 |
93 | filterAll: function () {
94 | app.todos.each(this.filterOne, this);
95 | },
96 |
97 | // Generate the attributes for a new Todo item.
98 | newAttributes: function () {
99 | return {
100 | title: this.$input.val().trim(),
101 | order: app.todos.nextOrder(),
102 | completed: false
103 | };
104 | },
105 |
106 | // If you hit return in the main input field, create new **Todo** model,
107 | // persisting it to *localStorage*.
108 | createOnEnter: function (e) {
109 | if (e.which === ENTER_KEY && this.$input.val().trim()) {
110 | app.todos.create(this.newAttributes());
111 | this.$input.val('');
112 | }
113 | },
114 |
115 | // Clear all completed todo items, destroying their models.
116 | clearCompleted: function () {
117 | _.invoke(app.todos.completed(), 'destroy');
118 | return false;
119 | },
120 |
121 | toggleAllComplete: function () {
122 | var completed = this.allCheckbox.checked;
123 |
124 | app.todos.each(function (todo) {
125 | todo.save({
126 | 'completed': completed
127 | });
128 | });
129 | }
130 | });
131 | })(jQuery);
132 |
--------------------------------------------------------------------------------
/todomvc/backbone/js/views/todo-view.js:
--------------------------------------------------------------------------------
1 | /*global Backbone, jQuery, _, ENTER_KEY, ESC_KEY */
2 | var app = app || {};
3 |
4 | (function ($) {
5 | 'use strict';
6 |
7 | // Todo Item View
8 | // --------------
9 |
10 | // The DOM element for a todo item...
11 | app.TodoView = Backbone.View.extend({
12 | //... is a list tag.
13 | tagName: 'li',
14 |
15 | // Cache the template function for a single item.
16 | template: _.template($('#item-template').html()),
17 |
18 | // The DOM events specific to an item.
19 | events: {
20 | 'click .toggle': 'toggleCompleted',
21 | 'dblclick label': 'edit',
22 | 'click .destroy': 'clear',
23 | 'keypress .edit': 'updateOnEnter',
24 | 'keydown .edit': 'revertOnEscape',
25 | 'blur .edit': 'close'
26 | },
27 |
28 | // The TodoView listens for changes to its model, re-rendering. Since there's
29 | // a one-to-one correspondence between a **Todo** and a **TodoView** in this
30 | // app, we set a direct reference on the model for convenience.
31 | initialize: function () {
32 | this.listenTo(this.model, 'change', this.render);
33 | this.listenTo(this.model, 'destroy', this.remove);
34 | this.listenTo(this.model, 'visible', this.toggleVisible);
35 | },
36 |
37 | // Re-render the titles of the todo item.
38 | render: function () {
39 | // Backbone LocalStorage is adding `id` attribute instantly after creating a model.
40 | // This causes our TodoView to render twice. Once after creating a model and once on `id` change.
41 | // We want to filter out the second redundant render, which is caused by this `id` change.
42 | // It's known Backbone LocalStorage bug, therefore we've to create a workaround.
43 | // https://github.com/tastejs/todomvc/issues/469
44 | if (this.model.changed.id !== undefined) {
45 | return;
46 | }
47 |
48 | this.$el.html(this.template(this.model.toJSON()));
49 | this.$el.toggleClass('completed', this.model.get('completed'));
50 | this.toggleVisible();
51 | this.$input = this.$('.edit');
52 | return this;
53 | },
54 |
55 | toggleVisible: function () {
56 | this.$el.toggleClass('hidden', this.isHidden());
57 | },
58 |
59 | isHidden: function () {
60 | var isCompleted = this.model.get('completed');
61 | return (// hidden cases only
62 | (!isCompleted && app.TodoFilter === 'completed') ||
63 | (isCompleted && app.TodoFilter === 'active')
64 | );
65 | },
66 |
67 | // Toggle the `"completed"` state of the model.
68 | toggleCompleted: function () {
69 | this.model.toggle();
70 | },
71 |
72 | // Switch this view into `"editing"` mode, displaying the input field.
73 | edit: function () {
74 | this.$el.addClass('editing');
75 | this.$input.focus();
76 | },
77 |
78 | // Close the `"editing"` mode, saving changes to the todo.
79 | close: function () {
80 | var value = this.$input.val();
81 | var trimmedValue = value.trim();
82 |
83 | // We don't want to handle blur events from an item that is no
84 | // longer being edited. Relying on the CSS class here has the
85 | // benefit of us not having to maintain state in the DOM and the
86 | // JavaScript logic.
87 | if (!this.$el.hasClass('editing')) {
88 | return;
89 | }
90 |
91 | if (trimmedValue) {
92 | this.model.save({ title: trimmedValue });
93 |
94 | if (value !== trimmedValue) {
95 | // Model values changes consisting of whitespaces only are not causing change to be triggered
96 | // Therefore we've to compare untrimmed version with a trimmed one to chech whether anything changed
97 | // And if yes, we've to trigger change event ourselves
98 | this.model.trigger('change');
99 | }
100 | } else {
101 | this.clear();
102 | }
103 |
104 | this.$el.removeClass('editing');
105 | },
106 |
107 | // If you hit `enter`, we're through editing the item.
108 | updateOnEnter: function (e) {
109 | if (e.which === ENTER_KEY) {
110 | this.close();
111 | }
112 | },
113 |
114 | // If you're pressing `escape` we revert your change by simply leaving
115 | // the `editing` state.
116 | revertOnEscape: function (e) {
117 | if (e.which === ESC_KEY) {
118 | this.$el.removeClass('editing');
119 | }
120 | },
121 |
122 | // Remove the item, destroy the model from *localStorage* and delete its view.
123 | clear: function () {
124 | this.model.destroy();
125 | }
126 | });
127 | })(jQuery);
128 |
--------------------------------------------------------------------------------
/todomvc/ractive/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
-
144 | {todoItems}
145 |
152 |
153 |
163 | {main}
164 | {footer}
165 |
166 | );
167 | }
168 | });
169 |
170 | var model = new app.TodoModel('react-todos');
171 |
172 | function render() {
173 | ReactDOM.render(
174 |