├── .gitignore
├── README.md
├── css
    ├── interface.css
    └── interface.less
├── gulpfile.js
├── index.html
├── package.json
├── resources
    ├── benchmark.js
    ├── bluebird.min.js
    ├── highcharts.js
    ├── loader.imba
    ├── loader.js
    ├── lodash.js
    └── shared
    │   ├── api.js
    │   └── app.css
├── results.png
├── results@2x.png
├── server.js
└── todomvc
    ├── backbone
        ├── .gitignore
        ├── index.html
        ├── js
        │   ├── api.js
        │   ├── app.js
        │   ├── collections
        │   │   └── todos.js
        │   ├── models
        │   │   └── todo.js
        │   ├── routers
        │   │   └── router.js
        │   └── views
        │   │   ├── app-view.js
        │   │   └── todo-view.js
        ├── package.json
        └── readme.md
    ├── imba-0.14.3
        ├── imba
        │   ├── app.imba
        │   ├── todoItem.imba
        │   └── todoModel.imba
        ├── index.html
        ├── js
        │   ├── api.js
        │   ├── app.js
        │   ├── imba.min.js
        │   ├── todoItem.js
        │   └── todoModel.js
        ├── package.json
        └── readme.md
    ├── imba-dev
        ├── app.js
        ├── index.html
        ├── package.json
        ├── readme.md
        └── src
        │   ├── app.imba
        │   ├── store.imba
        │   └── todo.imba
    ├── mithril
        ├── .gitignore
        ├── ext
        │   └── mithril
        │   │   ├── mithril.js
        │   │   └── mithril.min.js
        ├── index.html
        ├── js
        │   ├── api.js
        │   ├── app.js
        │   ├── controllers
        │   │   └── todo.js
        │   ├── models
        │   │   ├── storage.js
        │   │   └── todo.js
        │   └── views
        │   │   ├── footer-view.js
        │   │   └── main-view.js
        ├── package.json
        └── readme.md
    └── react
        ├── changelog.md
        ├── external
            ├── director.js
            ├── react-with-addons.js
            └── react-with-addons.min.js
        ├── index.html
        ├── js
            ├── api.js
            ├── app.js
            ├── footer.js
            ├── todoItem.js
            ├── todoModel.js
            └── utils.js
        ├── package.json
        └── readme.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Benchmarking raw rendering performance of TodoMVC implementations.
 2 | 
 3 | The benchmark can be run [here](http://somebee.github.io/todomvc-render-benchmark/index.html)
 4 | 
 5 | ## Why
 6 | There has been a TodoMVC benchmark floating around earlier. It mainly tested the performance of your browser, by creating fake events and navigating the dom to insert, complete, and remove todos. Some frameworks such as elm and mithril outperformed React by a lot. The (only) reason for this was that they used asynchronous rendering, while React rendered / synchronized the whole view every time a todo was inserted, completed, and removed. Making rendering in React asynchronous would take 2 lines of code, and bring its performance up to the others. A better benchmark is needed.
 7 | 
 8 | ## Goal
 9 | The goal of this benchmark is to test the performance of pure rendering / [dom reconciliation](https://facebook.github.io/react/docs/reconciliation.html). It inserts, renames, toggles, moves, and removes todos through an API that must be custom made for each TodoMVC implementation. These actions should happen as low-level as possible, and should *not* trigger any sort of rendering. API.render() however should trigger a full forced rendering / reconciliation.
10 | 
11 | ## Results
12 | On OSX 10.10.4, Chrome:
13 | 
14 | ![Results](https://raw.githubusercontent.com/somebee/todomvc-render-benchmark/master/results%402x.png)
15 | 
16 | As you can see, Imba is *much* faster than the other implementations. So much faster in fact, that your first reaction is likely along the line "this seems fishy". Well, it really is that fast. It uses a very different approach from existing virtual dom implementations, by inlining and reusing actual dom nodes on subsequent renders. This is only practical to do in a compiled language (such as [Imba](http://imba.io)) - as the compiler can analyze the views, and do inline caching that would be very chaotic and cumbersome in plain js.
17 | 
18 | Imba enables a new way of writing web apps. Fully syncing the view is now so inexpensive that it is, for the first time, viable to simply render on every single frame, without any need for listeners, bindings, dependency tracking etc. Keeping the view 'in sync' is no longer an issue. It is like rendering templates on the server - where you always know the whole state/story on render. If you for some reason want to keep tracking and only rerendering subviews etc this is as easy as it ever was with React.
19 | 
20 | Even though it looks incredibly boring, the "Unchanged Render" is possibly the most interesting benchmark. All of these frameworks are plenty fast if they only render whenever something has changed. But if the frameworks are fast enough to render the whole app in 0.01ms, you could skip thinking about all sorts of tracking to keep the view in sync.
21 | 
22 | ## Spec
23 | A spec for the API is underway, but until then you can look at the default [api.js](https://github.com/somebee/todomvc-render-benchmark/blob/master/resources/api.js).
24 | 
25 | ## Contribute
26 | I am sure that the different implementations can be tweaked for better performance, and I'm happy to apply such improvements if you send a pull request. The improvements should however, adhere to the philosophy of the framework and maintain readability.
27 | 
28 | ## PS
29 | Neither Imba nor React are using their respective shouldComponentUpdate in this benchmark, as this would not be fair to Mithril. Again, this is intended to really compare the speeds of a full synchronous rendering of the whole app. The relative performance difference between Imba and React is not affected by this. When optimizations are active, both are slightly faster.
30 | 
31 | Some framework are not made for this at all, and it does not make sense to include them in this benchmark. This is meant to test the performance of bringing the whole view in sync with the models, like if you have no bindings or anything. Angular is included in the repo, but disabled for now.It does tons of stuff under the hood, and it is difficult for me to know what would be like a _full_ rerendering in Angular. It might not even be relevant.
32 | 


--------------------------------------------------------------------------------
/css/interface.css:
--------------------------------------------------------------------------------
  1 | html,
  2 | body {
  3 |   margin: 0;
  4 |   padding: 0;
  5 | }
  6 | div {
  7 |   box-sizing: border-box;
  8 | }
  9 | body {
 10 |   font-family: 'Lucida Grande', 'Trebuchet MS', 'Bitstream Vera Sans', Verdana, Helvetica, sans-serif;
 11 |   background-color: #fdfdfd;
 12 | }
 13 | ol {
 14 |   list-style: none;
 15 |   margin: 5px 0;
 16 |   padding: 0;
 17 | }
 18 | ol ol {
 19 |   margin-left: 2em;
 20 |   list-position: outside;
 21 | }
 22 | nav {
 23 |   position: absolute;
 24 |   right: 10px;
 25 | }
 26 | .button {
 27 |   -webkit-appearance: none;
 28 |   padding: 8px 20px;
 29 |   background-color: #4d596f;
 30 |   color: white;
 31 |   font-weight: bold;
 32 |   font-size: inherit;
 33 |   text-decoration: none;
 34 |   font-size: 12px;
 35 |   margin-right: 8px;
 36 |   border: none;
 37 |   border-radius: 2px;
 38 | }
 39 | .button:hover {
 40 |   background-color: #3B4A67;
 41 | }
 42 | .button[disabled] {
 43 |   opacity: 0.5;
 44 |   background-color: #3B4A67;
 45 | }
 46 | #top {
 47 |   position: relative;
 48 |   height: 64px;
 49 |   display: none;
 50 | }
 51 | button {
 52 |   -webkit-appearance: none;
 53 |   padding: 8px 20px;
 54 |   background-color: #4d596f;
 55 |   color: white;
 56 |   font-weight: bold;
 57 |   font-size: inherit;
 58 |   text-decoration: none;
 59 |   font-size: 12px;
 60 |   margin-right: 8px;
 61 |   border: none;
 62 |   border-radius: 2px;
 63 | }
 64 | button:hover {
 65 |   background-color: #3B4A67;
 66 | }
 67 | button[disabled] {
 68 |   opacity: 0.5;
 69 |   background-color: #3B4A67;
 70 | }
 71 | #controls {
 72 |   width: 100%;
 73 |   min-height: 64px;
 74 |   padding: 10px;
 75 |   vertical-align: top;
 76 |   background: #202837;
 77 |   color: white;
 78 |   position: relative;
 79 |   top: 0px;
 80 |   left: 0px;
 81 |   z-index: 1000;
 82 |   display: -webkit-flex;
 83 |   display: -ms-flexbox;
 84 |   display: flex;
 85 |   -webkit-flex-direction: row;
 86 |       -ms-flex-direction: row;
 87 |           flex-direction: row;
 88 |   -webkit-align-items: center;
 89 |       -ms-flex-align: center;
 90 |           align-items: center;
 91 |   -webkit-flex-wrap: wrap;
 92 |       -ms-flex-wrap: wrap;
 93 |           flex-wrap: wrap;
 94 | }
 95 | #controls button {
 96 |   margin: 10px;
 97 | }
 98 | footer {
 99 |   padding: 10px 20px;
100 | }
101 | #analysis {
102 |   padding: 10px 40px;
103 | }
104 | #analysis:empty {
105 |   display: none;
106 | }
107 | #analysis .chart {
108 |   height: 240px;
109 | }
110 | #apps {
111 |   padding: 10px 10px;
112 |   position: relative;
113 | }
114 | #apps > div {
115 |   width: 50%;
116 |   padding: 10px;
117 |   position: relative;
118 |   display: inline-block;
119 | }
120 | .running button {
121 |   pointer-events: none;
122 |   opacity: 0.5;
123 | }
124 | #apps > div > .header {
125 |   width: 100%;
126 |   position: relative;
127 |   height: 30px;
128 |   color: #202837;
129 |   background: #e8e8e8;
130 |   line-height: 30px;
131 |   padding: 0px 10px;
132 |   border-top-left-radius: 3px;
133 |   border-top-right-radius: 3px;
134 |   font-size: 12px;
135 |   font-weight: bold;
136 | }
137 | iframe {
138 |   border: 4px solid #e8e8e8;
139 |   border-top: none;
140 |   margin: 0;
141 |   padding: 0;
142 |   vertical-align: top;
143 |   width: 100%;
144 |   box-sizing: border-box;
145 |   height: 550px;
146 | }
147 | #apps > div.running iframe {
148 |   border-color: #202837;
149 | }
150 | #apps > div.running .header {
151 |   background-color: #202837;
152 |   color: white;
153 | }
154 | @media (max-width: 1000px) {
155 |   #apps > div {
156 |     width: 50%;
157 |   }
158 | }
159 | @media (max-width: 600px) {
160 |   #apps > div {
161 |     width: 100%;
162 |     display: block;
163 |   }
164 | }
165 | @media (max-width: 500px) {
166 |   #analysis {
167 |     padding: 10px 10px;
168 |   }
169 |   #analysis .chart {
170 |     height: 340px;
171 |   }
172 |   #controls {
173 |     position: relative;
174 |     height: auto;
175 |   }
176 |   #apps > div {
177 |     width: 100%;
178 |   }
179 |   #apps > div iframe {
180 |     display: none;
181 |   }
182 |   #apps > div.running iframe {
183 |     display: block;
184 |   }
185 | }
186 | 


--------------------------------------------------------------------------------
/css/interface.less:
--------------------------------------------------------------------------------
  1 | html,body {
  2 | 	margin: 0;
  3 | 	padding: 0;
  4 | }
  5 | 
  6 | div {
  7 | 	box-sizing: border-box;
  8 | }
  9 | 
 10 | body {
 11 | font-family: 'Lucida Grande','Trebuchet MS','Bitstream Vera Sans',Verdana,Helvetica,sans-serif;
 12 | background-color: rgb(253, 253, 253);
 13 | }
 14 | ol { list-style: none; margin: 5px 0; padding: 0; }
 15 | ol ol { margin-left: 2em; list-position: outside; }
 16 | nav { position: absolute; right: 10px; }
 17 | 
 18 | .button {
 19 | 	-webkit-appearance: none;
 20 | 	padding: 8px 20px;
 21 | 	background-color: rgb(77, 89, 111);
 22 | 	color: white;
 23 | 	font-weight: bold;
 24 | 	font-size: inherit;
 25 | 	text-decoration: none;
 26 | 	font-size: 12px;
 27 | 	margin-right: 8px;
 28 | 	border: none;
 29 | 	border-radius: 2px;
 30 | 
 31 | 	&:hover {
 32 | 		background-color: #3B4A67;
 33 | 	}
 34 | 
 35 | 	&[disabled] {
 36 | 		opacity: 0.5;
 37 | 		background-color: #3B4A67;
 38 | 	}
 39 | }
 40 | 
 41 | #top {
 42 | 	position: relative;
 43 | 	height: 64px;
 44 | 	display: none;
 45 | }
 46 | 
 47 | button {
 48 | 	.button;
 49 | }
 50 | 
 51 | #controls {
 52 | 	width: 100%;
 53 | 	min-height: 64px;
 54 | 	padding: 10px;
 55 | 	vertical-align: top;
 56 | 	background: #202837;
 57 | 	color: white;
 58 | 	position: relative;
 59 | 	top: 0px;
 60 | 	left: 0px;
 61 | 	z-index: 1000;
 62 | 	display: flex;
 63 | 	flex-direction: row;
 64 | 	align-items: center;
 65 | 	flex-wrap: wrap;
 66 | 
 67 | 	button {
 68 | 		margin: 10px;
 69 | 	}
 70 | }
 71 | 
 72 | footer {
 73 | 	padding: 10px 20px;
 74 | }
 75 | 
 76 | #analysis {
 77 | 	padding: 10px 40px;
 78 | 
 79 | 	&:empty { display: none; }
 80 | }
 81 | 
 82 | #analysis .chart {
 83 | 	height: 240px;
 84 | }
 85 | 
 86 | #apps {
 87 | 	padding: 10px 10px;
 88 | 	position: relative;
 89 | }
 90 | 
 91 | #apps > div {
 92 | 	
 93 | 	width:50%;
 94 | 	padding: 10px;
 95 | 	position: relative;
 96 | 	display: inline-block;
 97 | }
 98 | 
 99 | 
100 | 
101 | .running button {
102 | 	pointer-events: none;
103 | 	opacity: 0.5;
104 | }
105 | 
106 | #apps > div > .header {
107 | 	width: 100%;
108 | 	position: relative;
109 | 	height: 30px;
110 | 	color: #202837;
111 | 	background: rgb(232, 232, 232);
112 | 	line-height: 30px;
113 | 	padding: 0px 10px;
114 | 	border-top-left-radius: 3px;
115 | 	border-top-right-radius: 3px;
116 | 	font-size: 12px;
117 | 	font-weight: bold;
118 | }
119 | 
120 | iframe {
121 | 	border: 4px solid rgb(232, 232, 232);
122 | 	border-top: none;
123 | 	margin: 0;
124 | 	padding: 0;
125 | 	vertical-align: top;
126 | 	width: 100%;
127 | 	box-sizing: border-box;
128 | 	height: 550px;
129 | }
130 | 
131 | #apps > div.running iframe {
132 | 	border-color: #202837;
133 | }
134 | 
135 | #apps > div.running .header {
136 | 	background-color: #202837;
137 | 	color: white;
138 | }
139 | 
140 | 
141 | 
142 | @media (max-width: 1000px) {
143 | 	#apps > div { width: 50%; }
144 | }
145 | 
146 | @media (max-width: 600px) {
147 | 	#apps > div { width: 100%; display: block; }
148 | }
149 | 
150 | @media (max-width: 500px) {
151 |   	#analysis { padding: 10px 10px; }
152 | 	#analysis .chart {
153 | 		height: 340px;
154 | 	}
155 | 
156 | 	#controls { position: relative; height: auto; }
157 | 	#apps > div { width: 100%; }
158 | 	#apps > div iframe { display: none; }
159 | 	#apps > div.running iframe { display: block; }
160 | }


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var less = require('gulp-less');
 3 | 
 4 | var LessPluginAutoPrefix = require('less-plugin-autoprefix'),
 5 |     autoprefix = new LessPluginAutoPrefix({ browsers: ["last 2 versions"] });
 6 | 
 7 | 
 8 | gulp.task('less',function(){
 9 | 	gulp.src('./css/**/*.less')
10 | 		.pipe(less({plugins: [autoprefix]}))
11 | 		.pipe(gulp.dest('./css'));	
12 | })
13 | 
14 | gulp.task('watch',function(){
15 | 	gulp.watch('./css/**/*.less', ['less']);
16 | })


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>TodoMVC Render Benchmark</title>
 5 |     <meta charset="utf-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 8 |     <script src="resources/bluebird.min.js"></script>
 9 |     <script src="resources/highcharts.js"></script>
10 |     <script src="resources/lodash.js"></script>
11 |     <script src="resources/benchmark.js"></script>
12 |     <link rel="stylesheet" href="css/interface.css">
13 |   </head>
14 |   <body>
15 |     <div id="controls"></div>
16 |     <div id="top"></div>
17 |     <div id="analysis"></div>
18 |     <div id="apps"></div>
19 |     <footer>
20 |      More details at <a href="https://github.com/somebee/todomvc-render-benchmark">GitHub</a>
21 |     </footer>
22 |     <script src="resources/loader.js"></script>
23 |   </body>
24 | 
25 | </html>
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todomvc-render-perf",
 3 |   "description": "Benchmarking for TodoMVC",
 4 |   "keywords": [
 5 |     "imba",
 6 |     "react",
 7 |     "angular",
 8 |     "todomvc"
 9 |   ],
10 |   "author": "Sindre Aarsaether",
11 |   "bugs": "https://github.com/somebee/todomvc-render-perf/issues",
12 |   "version": "0.1.0",
13 |   "licenses": [
14 |     {
15 |       "type": "MIT",
16 |       "url": "http://github.com/somebee/todomvc-render-perf/raw/master/LICENSE"
17 |     }
18 |   ],
19 |   "engines": {
20 |     "node": ">=0.8.0"
21 |   },
22 |   "files": [],
23 |   "directories": {},
24 |   "main": "./index.js",
25 |   "homepage": "http://somebee.github.io/todomvc-render-perf/index.html",
26 |   "repository": {
27 |     "type": "git",
28 |     "url": "git://github.com/somebee/todomvc-render-perf.git"
29 |   },
30 |   "devDependencies": {
31 |     "marked": "^0.3.3"
32 |   },
33 |   "dependencies": {
34 |     "express": "^4.13.2",
35 |     "gulp": "^3.9.0",
36 |     "gulp-less": "^3.0.3",
37 |     "less": "^2.5.1",
38 |     "less-plugin-autoprefix": "^1.4.2"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/resources/loader.imba:
--------------------------------------------------------------------------------
  1 | 
  2 | Manager =
  3 | 	_apps: []
  4 | 	_suites: []
  5 | 
  6 | def Manager.add suite
  7 | 	@suites.push(suite)
  8 | 
  9 | def Manager.suites
 10 | 	@suites
 11 | 
 12 | def Manager.chart series
 13 | 	if @chart
 14 | 		@chart.addSeries(series)
 15 | 		return @chart
 16 | 
 17 | 	var categories = @suites.map(|suite| suite.option('label') )
 18 | 
 19 | 	@chart = Highcharts.Chart.new({
 20 | 		chart: { type: 'bar', renderTo: 'chart' }
 21 | 		title: { text: "Results" }
 22 | 		loading: {showDuration: 50 }
 23 | 		xAxis:
 24 | 			categories: [] # categories
 25 | 
 26 | 		yAxis:
 27 | 			min: 0
 28 | 			title: { text: 'ops / sec (higher is better)'}
 29 | 
 30 | 		tooltip:
 31 | 			pointFormatter: do |v| "{this:category} <b>" + this:y.toFixed(2) + "</b> ops/sec<br>"
 32 | 			shared: true
 33 | 
 34 | 		plotOptions: {bar: {dataLabels: { enabled: false}}}
 35 | 		credits: { enabled: false }
 36 | 		series: [series]
 37 | 	})
 38 | 
 39 | def div cls, text
 40 | 	var el = document.createElement('div')
 41 | 	el:className = cls or ''
 42 | 	el:textContent = text or ''
 43 | 	return el
 44 | 
 45 | class Framework
 46 | 
 47 | 	var dict = {}
 48 | 	var all = []
 49 | 
 50 | 	def self.get name
 51 | 		dict[name]
 52 | 
 53 | 	def self.map fn
 54 | 		all.map(fn)
 55 | 
 56 | 	def self.count
 57 | 		all:length
 58 | 
 59 | 	def self.build
 60 | 		@build ||= Promise.reduce(all) do |curr,next|
 61 | 			curr.build.then do 
 62 | 				Promise.delay(100).then do next.build
 63 | 
 64 | 	def name
 65 | 		@name
 66 | 
 67 | 	def title
 68 | 		@title
 69 | 
 70 | 	def initialize name, o = {}
 71 | 		dict[name] = self
 72 | 		all.push(self)
 73 | 		@name = name
 74 | 		@title = o:title or name
 75 | 		@options = o
 76 | 		@ready = false
 77 | 
 78 | 	def color
 79 | 		@options:color or 'red'
 80 | 		
 81 | 	def url
 82 | 		@options:url || "todomvc/{@name}/index.html"
 83 | 
 84 | 	def node
 85 | 		@node ||= div()
 86 | 
 87 | 	def iframe
 88 | 		@iframe ||= document.createElement('iframe')
 89 | 
 90 | 	def doc
 91 | 		@iframe:contentDocument
 92 | 
 93 | 	def win
 94 | 		@win ||= @iframe:contentWindow
 95 | 
 96 | 	def api
 97 | 		@api ||= @iframe:contentWindow.API
 98 | 
 99 | 	def build
100 | 		@build ||= Promise.new do |resolve|
101 | 			iframe:style:minHeight = '400px'
102 | 			iframe:src = url
103 | 			iframe:id = "{@name}_frame"
104 | 			window:apps.appendChild(node)
105 | 			node.appendChild(@header = div('header',title))
106 | 			node.appendChild(iframe)
107 | 
108 | 			var wait = do
109 | 				if doc.querySelector('#header h1,.header h1') && api.RENDERCOUNT > 0
110 | 					api.ready
111 | 					prepare
112 | 					return resolve(self)
113 | 				setTimeout(&,10) do wait()
114 | 			wait()
115 | 
116 | 	def prepare
117 | 		# win:localStorage.clear
118 | 		reset(6)
119 | 
120 | 	def reset count
121 | 		api.AUTORENDER = no
122 | 		# api.clearAllTodos
123 | 		api.addTodo(("Todo " + i)) for i in [1..count]
124 | 		@todoCount = count
125 | 		api.render(true)
126 | 		api.AUTORENDER = yes
127 | 		self
128 | 
129 | 	def deactivate
130 | 		node:classList.remove('running')
131 | 
132 | 	def activate
133 | 		node:classList.add('running')		
134 | 
135 | 	def status= status
136 | 		@header:textContent = status
137 | 		self
138 | 
139 | 
140 | class Bench
141 | 
142 | 	def option key
143 | 		@options[key]
144 | 
145 | 	def initialize o = {}
146 | 		@name = o:title
147 | 		@suite = Benchmark.Suite.new @name
148 | 		@options = o
149 | 		@step = -1
150 | 		@current = null
151 | 		@benchmarks = []
152 | 
153 | 		if o:step isa Function
154 | 			Framework.map do |app|
155 | 				@suite.add(app.name, o:step)
156 | 				var bm = @suite[@suite:length - 1]
157 | 				bm.App = app
158 | 				@benchmarks.push(bm)
159 | 
160 | 		console.log @suite
161 | 		Manager.add self
162 | 		bind
163 | 		self
164 | 
165 | 	def step idx
166 | 		@step = idx
167 | 		if @current
168 | 			@current.App.deactivate
169 | 
170 | 		if @current = @benchmarks[idx]
171 | 			@current.App.activate
172 | 		self
173 | 	
174 | 
175 | 	def bind
176 | 
177 | 		@suite.on 'start' do |e|
178 | 			console.log "start"
179 | 			document:body:classList.add('running')
180 | 
181 | 			Framework.map do |ex|
182 | 				ex.api.FULLRENDER = yes
183 | 				ex.api.RENDERCOUNT = -1
184 | 				ex.api.render(yes)
185 | 			step(0)
186 | 			return
187 | 
188 | 		@suite.on 'reset' do |e|
189 | 			console.log 'suite onReset'
190 | 			return
191 | 
192 | 		@suite.on 'cycle' do |event|
193 | 			console.log "cycle!"
194 | 			Framework.get(event:target:name).status = String(event:target)
195 | 			step(@step + 1)
196 | 			return
197 | 	
198 | 		@suite.on 'complete' do
199 | 			console.log('Fastest is ' + this.filter('fastest').pluck('name'))
200 | 			document:body:classList.remove('running')
201 | 			present
202 | 			return
203 | 
204 | 	def run
205 | 		Framework.build.then do
206 | 			# @benchmarks.map do |b| b:hz = Math.random * 40000
207 | 			# present
208 | 			@suite.run { async: true, queued: false }
209 | 
210 | 	def reset
211 | 		Framework.map do |ex|
212 | 			ex.api.FULLRENDER = yes
213 | 			ex.api.RENDERCOUNT = -1
214 | 			ex.api.render(yes)
215 | 		self
216 | 		
217 | 	def warmup times = 1000
218 | 		reset
219 | 		setTimeout(&,50) do
220 | 
221 | 			var fn = @options:step
222 | 			var apps = Framework.map do |app| app
223 | 			var step = do
224 | 				if var app = apps.shift
225 | 					var i = 0
226 | 					var bm = {App: app}
227 | 					var start = Date.new
228 | 					while i++ < times
229 | 						fn.call(bm)
230 | 					var elapsed = Date.new - start
231 | 					app.status = "{app.title} - {@name} - {times} iterations - {elapsed}ms"
232 | 					setTimeout(&,50) do step()
233 | 
234 | 			step()
235 | 
236 | 		return self
237 | 		
238 | 
239 | 	def present
240 | 		# create div
241 | 		console.log 'present'
242 | 		var el = div('chart')
243 | 		window:analysis.appendChild(el)
244 | 
245 | 		# find slowest
246 | 		var sorted = @benchmarks.slice.sort do |a,b| a:hz - b:hz
247 | 		var base = sorted[0][:hz]
248 | 		var series =  @benchmarks.map do |b| {type: 'bar', borderWidth: 0, name: b.App.title, data: [b:hz] }
249 | 
250 | 		@chart = Highcharts.Chart.new({
251 | 			chart: { type: 'bar', renderTo: el }
252 | 
253 | 			title:
254 | 				text: option('title')
255 | 				style:
256 | 					fontSize: "14px"
257 | 
258 | 			loading:
259 | 				showDuration: 0
260 | 
261 | 			xAxis:
262 | 				categories: [option('title')]
263 | 				tickColor: 'transparent'
264 | 				labels: { enabled: false }
265 | 
266 | 			yAxis:
267 | 				min: 0
268 | 				title: { text: 'ops / sec (higher is better)'}
269 | 
270 | 			tooltip:
271 | 				pointFormatter: do |v| "<b>" + this:y.toFixed(2) + "</b> ops/sec (<b>{(this:y / base).toFixed(2)}x</b>)<br>"
272 | 				# shared: true
273 | 
274 | 			legend:
275 | 				verticalAlign: 'top'
276 | 				y: 20
277 | 
278 | 			plotOptions: {bar: {dataLabels: { enabled: true, formatter: (|v| "<b>{(this:y / base).toFixed(2)}x</b>") }}}
279 | 			credits: { enabled: false }
280 | 			series: series.reverse
281 | 		})
282 | 
283 | 
284 | Framework.new('react', title: 'react v0.13.3')
285 | Framework.new('imba-0.14.3', title: 'imba v0.14.3')
286 | Framework.new('imba-dev', title: 'imba v0.15.0-alpha.1')
287 | Framework.new('mithril', title: 'mithril v0.2.0')
288 | 
289 | EVERYTHING = Bench.new
290 | 	label: 'Bench Everything'
291 | 	title: 'Everything (remove, toggle, append, rename)'
292 | 	step: do
293 | 		var len = this.App.@todoCount
294 | 		var api = this.App.api
295 | 		var idx = Math.round(Math.random * (len - 1))
296 | 
297 | 		# moving a random task
298 | 		var idx = api.RENDERCOUNT % len
299 | 		var idx = Math.min(0,len - 2)
300 | 		var todo = api.removeTodoAtIndex(idx)
301 | 		api.insertTodoAtIndex(todo,1000)
302 | 
303 | 		api.render(yes)
304 | 		api.toggleTodoAtIndex((idx) % len)
305 | 		api.render(yes)
306 | 		api.renameTodoAtIndex((idx + 1) % len,"Todo - {api.RENDERCOUNT}")
307 | 		api.render(yes)
308 | 		return
309 | 
310 | Bench.new
311 | 	label: 'Reorder'
312 | 	title: 'Reorder (shift+push)'
313 | 	step: do
314 | 		var api  = this.App.api
315 | 		var todo = api.removeTodoAtIndex(0)
316 | 		api.render(true)
317 | 		api.insertTodoAtIndex(todo,1000) # at the end
318 | 		api.render(true)
319 | 		return
320 | 
321 | # full rendering including todo-renaming
322 | Bench.new
323 | 	label: 'Rename todo'
324 | 	title: 'Rename random todo'
325 | 	step: do
326 | 		var api = this.App.api
327 | 		var i = 0
328 | 		var c = api.RENDERCOUNT
329 | 		var idx = Math.round(Math.random * (this.App.@todoCount - 1))
330 | 		api.renameTodoAtIndex(idx,"Todo {idx + 1} {c}",no)
331 | 		api.render(true) # render at the very end
332 | 		return
333 | 
334 | Bench.new
335 | 	label: 'Toggle todo'
336 | 	title: 'Toggle random todo'
337 | 	step: do
338 | 		var api  = this.App.api
339 | 		var idx = Math.round(Math.random * (this.App.@todoCount - 1))
340 | 		api.toggleTodoAtIndex(idx)
341 | 		api.render(true)
342 | 		return
343 | 
344 | 
345 | # full rendering
346 | Bench.new
347 | 	label: 'Unchanged render'
348 | 	title: 'Unchanged render'
349 | 	step: do this.App.api.render(yes)
350 | 
351 | 
352 | Manager.suites.map do |suite|
353 | 	var btn = document.createElement('button')
354 | 	btn:textContent = suite.option('label')
355 | 	btn:onclick = do
356 | 		btn:disabled = "disabled"
357 | 		suite.run
358 | 	window:controls.appendChild(btn)
359 | 
360 | 
361 | # window:runFullRender:onclick = do full.run
362 | # Suites.fullRender.run({ async: true, queued: false })
363 | 
364 | window:apps.setAttribute("data-count",Framework.count)
365 | 
366 | Framework.build.then do |res| 
367 | 	console.log "built",res
368 | 	Promise.delay(200).then do
369 | 		document.getElementsByTagName('button')[0].focus
370 | 


--------------------------------------------------------------------------------
/resources/loader.js:
--------------------------------------------------------------------------------
  1 | (function(){
  2 | 	
  3 | 	Manager = {
  4 | 		_apps: [],
  5 | 		_suites: []
  6 | 	};
  7 | 	
  8 | 	Manager.add = function (suite){
  9 | 		return this._suites.push(suite);
 10 | 	};
 11 | 	
 12 | 	Manager.suites = function (){
 13 | 		return this._suites;
 14 | 	};
 15 | 	
 16 | 	Manager.chart = function (series){
 17 | 		if (this._chart) {
 18 | 			this._chart.addSeries(series);
 19 | 			return this._chart;
 20 | 		};
 21 | 		
 22 | 		var categories = this._suites.map(function(suite) { return suite.option('label'); });
 23 | 		
 24 | 		return this._chart = new Highcharts.Chart({
 25 | 			chart: {type: 'bar',renderTo: 'chart'},
 26 | 			title: {text: "Results"},
 27 | 			loading: {showDuration: 50},
 28 | 			xAxis: {
 29 | 				categories: [] // categories
 30 | 			},
 31 | 			
 32 | 			yAxis: {
 33 | 				min: 0,
 34 | 				title: {text: 'ops / sec (higher is better)'}
 35 | 			},
 36 | 			
 37 | 			tooltip: {
 38 | 				pointFormatter: function(v) { return ("" + (this.category) + " <b>") + this.y.toFixed(2) + "</b> ops/sec<br>"; },
 39 | 				shared: true
 40 | 			},
 41 | 			
 42 | 			plotOptions: {bar: {dataLabels: {enabled: false}}},
 43 | 			credits: {enabled: false},
 44 | 			series: [series]
 45 | 		});
 46 | 	};
 47 | 	
 48 | 	function div(cls,text){
 49 | 		var el = document.createElement('div');
 50 | 		el.className = cls || '';
 51 | 		el.textContent = text || '';
 52 | 		return el;
 53 | 	};
 54 | 	
 55 | 	function Framework(name,o){
 56 | 		if(o === undefined) o = {};
 57 | 		dict[name] = this;
 58 | 		all.push(this);
 59 | 		this._name = name;
 60 | 		this._title = o.title || name;
 61 | 		this._options = o;
 62 | 		this._ready = false;
 63 | 	};
 64 | 	
 65 | 	var dict = {};
 66 | 	var all = [];
 67 | 	
 68 | 	Framework.get = function (name){
 69 | 		return dict[name];
 70 | 	};
 71 | 	
 72 | 	Framework.map = function (fn){
 73 | 		return all.map(fn);
 74 | 	};
 75 | 	
 76 | 	Framework.count = function (){
 77 | 		return all.length;
 78 | 	};
 79 | 	
 80 | 	Framework.build = function (){
 81 | 		return this._build || (this._build = Promise.reduce(all,function(curr,next) {
 82 | 			return curr.build().then(function() {
 83 | 				return Promise.delay(100).then(function() { return next.build(); });
 84 | 			});
 85 | 		}));
 86 | 	};
 87 | 	
 88 | 	Framework.prototype.name = function (){
 89 | 		return this._name;
 90 | 	};
 91 | 	
 92 | 	Framework.prototype.title = function (){
 93 | 		return this._title;
 94 | 	};
 95 | 	
 96 | 	Framework.prototype.color = function (){
 97 | 		return this._options.color || 'red';
 98 | 	};
 99 | 	
100 | 	Framework.prototype.url = function (){
101 | 		return this._options.url || ("todomvc/" + (this._name) + "/index.html");
102 | 	};
103 | 	
104 | 	Framework.prototype.node = function (){
105 | 		return this._node || (this._node = div());
106 | 	};
107 | 	
108 | 	Framework.prototype.iframe = function (){
109 | 		return this._iframe || (this._iframe = document.createElement('iframe'));
110 | 	};
111 | 	
112 | 	Framework.prototype.doc = function (){
113 | 		return this._iframe.contentDocument;
114 | 	};
115 | 	
116 | 	Framework.prototype.win = function (){
117 | 		return this._win || (this._win = this._iframe.contentWindow);
118 | 	};
119 | 	
120 | 	Framework.prototype.api = function (){
121 | 		return this._api || (this._api = this._iframe.contentWindow.API);
122 | 	};
123 | 	
124 | 	Framework.prototype.build = function (){
125 | 		var self = this;
126 | 		return self._build || (self._build = new Promise(function(resolve) {
127 | 			self.iframe().style.minHeight = '400px';
128 | 			self.iframe().src = self.url();
129 | 			self.iframe().id = ("" + (self._name) + "_frame");
130 | 			window.apps.appendChild(self.node());
131 | 			self.node().appendChild(self._header = div('header',self.title()));
132 | 			self.node().appendChild(self.iframe());
133 | 			
134 | 			var wait = function() {
135 | 				if (self.doc().querySelector('#header h1,.header h1') && self.api().RENDERCOUNT > 0) {
136 | 					self.api().ready();
137 | 					self.prepare();
138 | 					return resolve(self);
139 | 				};
140 | 				return setTimeout(function() { return wait(); },10);
141 | 			};
142 | 			return wait();
143 | 		}));
144 | 	};
145 | 	
146 | 	Framework.prototype.prepare = function (){
147 | 		// win:localStorage.clear
148 | 		return this.reset(6);
149 | 	};
150 | 	
151 | 	Framework.prototype.reset = function (count){
152 | 		this.api().AUTORENDER = false;
153 | 		// api.clearAllTodos
154 | 		for (var len = count, i = 1; i <= len; i++) {
155 | 			this.api().addTodo(("Todo " + i));
156 | 		};
157 | 		this._todoCount = count;
158 | 		this.api().render(true);
159 | 		this.api().AUTORENDER = true;
160 | 		return this;
161 | 	};
162 | 	
163 | 	Framework.prototype.deactivate = function (){
164 | 		return this.node().classList.remove('running');
165 | 	};
166 | 	
167 | 	Framework.prototype.activate = function (){
168 | 		return this.node().classList.add('running');
169 | 	};
170 | 	
171 | 	Framework.prototype.setStatus = function (status){
172 | 		this._header.textContent = status;
173 | 		this;
174 | 		return this;
175 | 	};
176 | 	
177 | 	
178 | 	function Bench(o){
179 | 		var self = this;
180 | 		if(o === undefined) o = {};
181 | 		this._name = o.title;
182 | 		this._suite = new Benchmark.Suite(this._name);
183 | 		this._options = o;
184 | 		this._step = -1;
185 | 		this._current = null;
186 | 		this._benchmarks = [];
187 | 		
188 | 		if (o.step instanceof Function) {
189 | 			Framework.map(function(app) {
190 | 				self._suite.add(app.name(),o.step);
191 | 				var bm = self._suite[self._suite.length - 1];
192 | 				bm.App = app;
193 | 				return self._benchmarks.push(bm);
194 | 			});
195 | 		};
196 | 		
197 | 		console.log(self._suite);
198 | 		Manager.add(self);
199 | 		self.bind();
200 | 		self;
201 | 	};
202 | 	
203 | 	Bench.prototype.option = function (key){
204 | 		return this._options[key];
205 | 	};
206 | 	
207 | 	Bench.prototype.step = function (idx){
208 | 		this._step = idx;
209 | 		if (this._current) {
210 | 			this._current.App.deactivate();
211 | 		};
212 | 		
213 | 		if (this._current = this._benchmarks[idx]) {
214 | 			this._current.App.activate();
215 | 		};
216 | 		return this;
217 | 	};
218 | 	
219 | 	
220 | 	Bench.prototype.bind = function (){
221 | 		
222 | 		var self = this;
223 | 		self._suite.on('start',function(e) {
224 | 			console.log("start");
225 | 			document.body.classList.add('running');
226 | 			
227 | 			Framework.map(function(ex) {
228 | 				ex.api().FULLRENDER = true;
229 | 				ex.api().RENDERCOUNT = -1;
230 | 				return ex.api().render(true);
231 | 			});
232 | 			self.step(0);
233 | 			return;
234 | 		});
235 | 		
236 | 		self._suite.on('reset',function(e) {
237 | 			console.log('suite onReset');
238 | 			return;
239 | 		});
240 | 		
241 | 		self._suite.on('cycle',function(event) {
242 | 			console.log("cycle!");
243 | 			Framework.get(event.target.name).setStatus(String(event.target));
244 | 			self.step(self._step + 1);
245 | 			return;
246 | 		});
247 | 		
248 | 		return self._suite.on('complete',function() {
249 | 			console.log('Fastest is ' + this.filter('fastest').pluck('name'));
250 | 			document.body.classList.remove('running');
251 | 			self.present();
252 | 			return;
253 | 		});
254 | 	};
255 | 	
256 | 	Bench.prototype.run = function (){
257 | 		var self = this;
258 | 		return Framework.build().then(function() {
259 | 			// @benchmarks.map do |b| b:hz = Math.random * 40000
260 | 			// present
261 | 			return self._suite.run({async: true,queued: false});
262 | 		});
263 | 	};
264 | 	
265 | 	Bench.prototype.reset = function (){
266 | 		Framework.map(function(ex) {
267 | 			ex.api().FULLRENDER = true;
268 | 			ex.api().RENDERCOUNT = -1;
269 | 			return ex.api().render(true);
270 | 		});
271 | 		return this;
272 | 	};
273 | 	
274 | 	Bench.prototype.warmup = function (times){
275 | 		var self = this;
276 | 		if(times === undefined) times = 1000;
277 | 		this.reset();
278 | 		setTimeout(function() {
279 | 			
280 | 			var fn = self._options.step;
281 | 			var apps = Framework.map(function(app) { return app; });
282 | 			var step = function() {
283 | 				var app;
284 | 				if (app = apps.shift()) {
285 | 					var i = 0;
286 | 					var bm = {App: app};
287 | 					var start = new Date();
288 | 					while (i++ < times){
289 | 						fn.call(bm);
290 | 					};
291 | 					var elapsed = new Date() - start;
292 | 					app.setStatus(("" + (app.title()) + " - " + (self._name) + " - " + times + " iterations - " + elapsed + "ms"));
293 | 					return setTimeout(function() { return step(); },50);
294 | 				};
295 | 			};
296 | 			
297 | 			return step();
298 | 		},50);
299 | 		
300 | 		return self;
301 | 	};
302 | 	
303 | 	
304 | 	Bench.prototype.present = function (){
305 | 		// create div
306 | 		console.log('present');
307 | 		var el = div('chart');
308 | 		window.analysis.appendChild(el);
309 | 		
310 | 		// find slowest
311 | 		var sorted = this._benchmarks.slice().sort(function(a,b) { return a.hz - b.hz; });
312 | 		var base = sorted[0].hz;
313 | 		var series = this._benchmarks.map(function(b) { return {type: 'bar',borderWidth: 0,name: b.App.title(),data: [b.hz]}; });
314 | 		
315 | 		return this._chart = new Highcharts.Chart({
316 | 			chart: {type: 'bar',renderTo: el},
317 | 			
318 | 			title: {
319 | 				text: this.option('title'),
320 | 				style: {
321 | 					fontSize: "14px"
322 | 				}
323 | 			},
324 | 			
325 | 			loading: {
326 | 				showDuration: 0
327 | 			},
328 | 			
329 | 			xAxis: {
330 | 				categories: [this.option('title')],
331 | 				tickColor: 'transparent',
332 | 				labels: {enabled: false}
333 | 			},
334 | 			
335 | 			yAxis: {
336 | 				min: 0,
337 | 				title: {text: 'ops / sec (higher is better)'}
338 | 			},
339 | 			
340 | 			tooltip: {
341 | 				pointFormatter: function(v) { return "<b>" + this.y.toFixed(2) + ("</b> ops/sec (<b>" + (this.y / base).toFixed(2) + "x</b>)<br>"); }
342 | 			// shared: true
343 | 			},
344 | 			
345 | 			legend: {
346 | 				verticalAlign: 'top',
347 | 				y: 20
348 | 			},
349 | 			
350 | 			plotOptions: {bar: {dataLabels: {enabled: true,formatter: function(v) { return ("<b>" + (this.y / base).toFixed(2) + "x</b>"); }}}},
351 | 			credits: {enabled: false},
352 | 			series: series.reverse()
353 | 		});
354 | 	};
355 | 	
356 | 	
357 | 	new Framework('react',{title: 'react v0.13.3'});
358 | 	new Framework('imba-0.14.3',{title: 'imba v0.14.3'});
359 | 	new Framework('imba-dev',{title: 'imba v0.15.0-alpha.1'});
360 | 	new Framework('mithril',{title: 'mithril v0.2.0'});
361 | 	
362 | 	EVERYTHING = new Bench(
363 | 		{label: 'Bench Everything',
364 | 		title: 'Everything (remove, toggle, append, rename)',
365 | 		step: function() {
366 | 			var len = this.App._todoCount;
367 | 			var api = this.App.api();
368 | 			var idx = Math.round(Math.random() * (len - 1));
369 | 			
370 | 			// moving a random task
371 | 			idx = api.RENDERCOUNT % len;
372 | 			idx = Math.min(0,len - 2);
373 | 			var todo = api.removeTodoAtIndex(idx);
374 | 			api.insertTodoAtIndex(todo,1000);
375 | 			
376 | 			api.render(true);
377 | 			api.toggleTodoAtIndex((idx) % len);
378 | 			api.render(true);
379 | 			api.renameTodoAtIndex((idx + 1) % len,("Todo - " + (api.RENDERCOUNT)));
380 | 			api.render(true);
381 | 			return;
382 | 		}}
383 | 	);
384 | 	
385 | 	new Bench(
386 | 		{label: 'Reorder',
387 | 		title: 'Reorder (shift+push)',
388 | 		step: function() {
389 | 			var api = this.App.api();
390 | 			var todo = api.removeTodoAtIndex(0);
391 | 			api.render(true);
392 | 			api.insertTodoAtIndex(todo,1000); // at the end
393 | 			api.render(true);
394 | 			return;
395 | 		}}
396 | 	);
397 | 	
398 | 	// full rendering including todo-renaming
399 | 	new Bench(
400 | 		{label: 'Rename todo',
401 | 		title: 'Rename random todo',
402 | 		step: function() {
403 | 			var api = this.App.api();
404 | 			var i = 0;
405 | 			var c = api.RENDERCOUNT;
406 | 			var idx = Math.round(Math.random() * (this.App._todoCount - 1));
407 | 			api.renameTodoAtIndex(idx,("Todo " + (idx + 1) + " " + c),false);
408 | 			api.render(true); // render at the very end
409 | 			return;
410 | 		}}
411 | 	);
412 | 	
413 | 	new Bench(
414 | 		{label: 'Toggle todo',
415 | 		title: 'Toggle random todo',
416 | 		step: function() {
417 | 			var api = this.App.api();
418 | 			var idx = Math.round(Math.random() * (this.App._todoCount - 1));
419 | 			api.toggleTodoAtIndex(idx);
420 | 			api.render(true);
421 | 			return;
422 | 		}}
423 | 	);
424 | 	
425 | 	
426 | 	// full rendering
427 | 	new Bench(
428 | 		{label: 'Unchanged render',
429 | 		title: 'Unchanged render',
430 | 		step: function() { return this.App.api().render(true); }}
431 | 	);
432 | 	
433 | 	
434 | 	Manager.suites().map(function(suite) {
435 | 		var btn = document.createElement('button');
436 | 		btn.textContent = suite.option('label');
437 | 		btn.onclick = function() {
438 | 			btn.disabled = "disabled";
439 | 			return suite.run();
440 | 		};
441 | 		return window.controls.appendChild(btn);
442 | 	});
443 | 	
444 | 	
445 | 	// window:runFullRender:onclick = do full.run
446 | 	// Suites.fullRender.run({ async: true, queued: false })
447 | 	
448 | 	window.apps.setAttribute("data-count",Framework.count());
449 | 	
450 | 	return Framework.build().then(function(res) {
451 | 		console.log("built",res);
452 | 		return Promise.delay(200).then(function() {
453 | 			return document.getElementsByTagName('button')[0].focus();
454 | 		});
455 | 	});
456 | 
457 | })();


--------------------------------------------------------------------------------
/resources/shared/api.js:
--------------------------------------------------------------------------------
 1 | 
 2 | API = {
 3 | 	// Always on for now	
 4 | 	AUTORENDER: true, 
 5 | 
 6 | 	AUTOPERSIST: false,
 7 | 
 8 | 	// Force full render / reconcile for apps
 9 | 	// that include manual shortcuts like
10 | 	// React.shouldComponentUpdate (same in Imba)
11 | 	FULLRENDER: true,
12 | 
13 | 	// This counter should always increase by one whenever
14 | 	// the implmenentation rerenders, and be displayed in
15 | 	// the actual view as part of the title (<h1>)
16 | 	// <h1>todos</h1> in regular TodoMVC becomes:
17 | 	// <h1>todos {{API.RENDERCOUNT}}</h1> or similar
18 | 	RENDERCOUNT: 0
19 | }
20 | 
21 | // clear the whole localStorage on load
22 | localStorage.clear();
23 | 
24 | API.ready = function(){
25 | 	// called after TodoMVC has been loaded
26 | 	// Could be useful for overriding stuff
27 | }
28 | 
29 | // synchronous render
30 | // should bring the view in sync with models++
31 | // no matter how or where the models have changed
32 | API.render = function(force){
33 | 	// render app
34 | 	return API.RENDERCOUNT;
35 | }
36 | 
37 | // Add todo with title
38 | // app should NOT render or persist to localstorage
39 | API.addTodo = function(title) {
40 | 	app.model.addTodo(title);
41 | }
42 | 
43 | // expose interface for renaming todo
44 | API.renameTodoAtIndex = function(index,title) {
45 | 	var todo = app.model.todos[index];
46 | 	todo.title = title;
47 | 	return todo;
48 | }
49 | 
50 | API.getTodoAtIndex = function (index){
51 | 	return app.model.todos[index];
52 | };
53 | 
54 | API.insertTodoAtIndex = function (todo,index){
55 | 	var list = app.model.todos;
56 | 	var len  = list.length;
57 | 	var from = list.indexOf(todo);
58 | 
59 | 	if (index >= len) {
60 | 		list.push(todo);
61 | 	} else {
62 | 		list.splice(index,0,todo);
63 | 	};
64 | 
65 | 	return todo;
66 | };
67 | 
68 | API.removeTodoAtIndex = function (index){
69 | 	var todo = API.getTodoAtIndex(index);
70 | 	app.model.todos.splice(index,1);
71 | 	return todo;
72 | };
73 | 
74 | API.clearAllTodos = function() {
75 | 	app.model.clearAll();
76 | }
77 | 
78 | // return plain array of actual todo items
79 | API.getTodos = function(){
80 | 	return app.model.todos;
81 | }
82 | 
83 | API.toggleTodoAtIndex = function(index) {
84 | 	var todo = API.getTodos()[index];
85 | 	todo.completed = !todo.completed;
86 | }


--------------------------------------------------------------------------------
/resources/shared/app.css:
--------------------------------------------------------------------------------
  1 | html,
  2 | body {
  3 | 	margin: 0;
  4 | 	padding: 0;
  5 | }
  6 | 
  7 | button {
  8 | 	margin: 0;
  9 | 	padding: 0;
 10 | 	border: 0;
 11 | 	background: none;
 12 | 	font-size: 100%;
 13 | 	vertical-align: baseline;
 14 | 	font-family: inherit;
 15 | 	font-weight: inherit;
 16 | 	color: inherit;
 17 | 	-webkit-appearance: none;
 18 | 	appearance: none;
 19 | 	-webkit-font-smoothing: antialiased;
 20 | 	-moz-font-smoothing: antialiased;
 21 | 	font-smoothing: antialiased;
 22 | }
 23 | 
 24 | body {
 25 | 	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
 26 | 	line-height: 1.4em;
 27 | 	background: #f5f5f5;
 28 | 	color: #4d4d4d;
 29 | 	min-width: 230px;
 30 | 	max-width: 550px;
 31 | 	margin: 0 auto;
 32 | 	-webkit-font-smoothing: antialiased;
 33 | 	-moz-font-smoothing: antialiased;
 34 | 	font-smoothing: antialiased;
 35 | 	font-weight: 300;
 36 | }
 37 | 
 38 | button,
 39 | input[type="checkbox"] {
 40 | 	outline: none;
 41 | }
 42 | 
 43 | .hidden {
 44 | 	display: none;
 45 | }
 46 | 
 47 | .todoapp {
 48 | 	background: #fff;
 49 | 	margin: 130px 0 40px 0;
 50 | 	position: relative;
 51 | 	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
 52 | 	            0 25px 50px 0 rgba(0, 0, 0, 0.1);
 53 | }
 54 | 
 55 | .todoapp input::-webkit-input-placeholder {
 56 | 	font-style: italic;
 57 | 	font-weight: 300;
 58 | 	color: #e6e6e6;
 59 | }
 60 | 
 61 | .todoapp input::-moz-placeholder {
 62 | 	font-style: italic;
 63 | 	font-weight: 300;
 64 | 	color: #e6e6e6;
 65 | }
 66 | 
 67 | .todoapp input::input-placeholder {
 68 | 	font-style: italic;
 69 | 	font-weight: 300;
 70 | 	color: #e6e6e6;
 71 | }
 72 | 
 73 | .todoapp h1 {
 74 | 	position: absolute;
 75 | 	top: -155px;
 76 | 	width: 100%;
 77 | 	font-size: 100px;
 78 | 	font-weight: 100;
 79 | 	text-align: center;
 80 | 	color: rgba(175, 47, 47, 0.15);
 81 | 	-webkit-text-rendering: optimizeLegibility;
 82 | 	-moz-text-rendering: optimizeLegibility;
 83 | 	text-rendering: optimizeLegibility;
 84 | }
 85 | 
 86 | .new-todo,
 87 | .edit {
 88 | 	position: relative;
 89 | 	margin: 0;
 90 | 	width: 100%;
 91 | 	font-size: 24px;
 92 | 	font-family: inherit;
 93 | 	font-weight: inherit;
 94 | 	line-height: 1.4em;
 95 | 	border: 0;
 96 | 	outline: none;
 97 | 	color: inherit;
 98 | 	padding: 6px;
 99 | 	border: 1px solid #999;
100 | 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
101 | 	box-sizing: border-box;
102 | 	-webkit-font-smoothing: antialiased;
103 | 	-moz-font-smoothing: antialiased;
104 | 	font-smoothing: antialiased;
105 | }
106 | 
107 | .new-todo {
108 | 	padding: 16px 16px 16px 60px;
109 | 	border: none;
110 | 	background: rgba(0, 0, 0, 0.003);
111 | 	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
112 | }
113 | 
114 | .main {
115 | 	position: relative;
116 | 	z-index: 2;
117 | 	border-top: 1px solid #e6e6e6;
118 | }
119 | 
120 | label[for='toggle-all'] {
121 | 	display: none;
122 | }
123 | 
124 | .toggle-all {
125 | 	position: absolute;
126 | 	top: -55px;
127 | 	left: -12px;
128 | 	width: 60px;
129 | 	height: 34px;
130 | 	text-align: center;
131 | 	border: none; /* Mobile Safari */
132 | }
133 | 
134 | .toggle-all:before {
135 | 	content: '❯';
136 | 	font-size: 22px;
137 | 	color: #e6e6e6;
138 | 	padding: 10px 27px 10px 27px;
139 | }
140 | 
141 | .toggle-all:checked:before {
142 | 	color: #737373;
143 | }
144 | 
145 | .todo-list {
146 | 	margin: 0;
147 | 	padding: 0;
148 | 	list-style: none;
149 | }
150 | 
151 | .todo-list li {
152 | 	position: relative;
153 | 	font-size: 24px;
154 | 	border-bottom: 1px solid #ededed;
155 | }
156 | 
157 | .todo-list li:last-child {
158 | 	border-bottom: none;
159 | }
160 | 
161 | .todo-list li.editing {
162 | 	border-bottom: none;
163 | 	padding: 0;
164 | }
165 | 
166 | .todo-list li.editing .edit {
167 | 	display: block;
168 | 	width: 506px;
169 | 	padding: 13px 17px 12px 17px;
170 | 	margin: 0 0 0 43px;
171 | }
172 | 
173 | .todo-list li.editing .view {
174 | 	display: none;
175 | }
176 | 
177 | .todo-list li .toggle {
178 | 	text-align: center;
179 | 	width: 40px;
180 | 	/* auto, since non-WebKit browsers doesn't support input styling */
181 | 	height: auto;
182 | 	position: absolute;
183 | 	top: 0;
184 | 	bottom: 0;
185 | 	margin: auto 0;
186 | 	border: none; /* Mobile Safari */
187 | 	-webkit-appearance: none;
188 | 	appearance: none;
189 | }
190 | 
191 | .todo-list li .toggle:after {
192 | 	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
193 | }
194 | 
195 | .todo-list li .toggle:checked:after {
196 | 	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
197 | }
198 | 
199 | .todo-list li label {
200 | 	white-space: pre;
201 | 	word-break: break-word;
202 | 	padding: 15px 60px 15px 15px;
203 | 	margin-left: 45px;
204 | 	display: block;
205 | 	line-height: 1.2;
206 | 	transition: color 0.4s;
207 | }
208 | 
209 | .todo-list li.completed label {
210 | 	color: #d9d9d9;
211 | 	text-decoration: line-through;
212 | }
213 | 
214 | .todo-list li .destroy {
215 | 	display: none;
216 | 	position: absolute;
217 | 	top: 0;
218 | 	right: 10px;
219 | 	bottom: 0;
220 | 	width: 40px;
221 | 	height: 40px;
222 | 	margin: auto 0;
223 | 	font-size: 30px;
224 | 	color: #cc9a9a;
225 | 	margin-bottom: 11px;
226 | 	transition: color 0.2s ease-out;
227 | }
228 | 
229 | .todo-list li .destroy:hover {
230 | 	color: #af5b5e;
231 | }
232 | 
233 | .todo-list li .destroy:after {
234 | 	content: '×';
235 | }
236 | 
237 | .todo-list li:hover .destroy {
238 | 	display: block;
239 | }
240 | 
241 | .todo-list li .edit {
242 | 	display: none;
243 | }
244 | 
245 | .todo-list li.editing:last-child {
246 | 	margin-bottom: -1px;
247 | }
248 | 
249 | .footer {
250 | 	color: #777;
251 | 	padding: 10px 15px;
252 | 	height: 20px;
253 | 	text-align: center;
254 | 	border-top: 1px solid #e6e6e6;
255 | }
256 | 
257 | .footer:before {
258 | 	content: '';
259 | 	position: absolute;
260 | 	right: 0;
261 | 	bottom: 0;
262 | 	left: 0;
263 | 	height: 50px;
264 | 	overflow: hidden;
265 | 	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
266 | 	            0 8px 0 -3px #f6f6f6,
267 | 	            0 9px 1px -3px rgba(0, 0, 0, 0.2),
268 | 	            0 16px 0 -6px #f6f6f6,
269 | 	            0 17px 2px -6px rgba(0, 0, 0, 0.2);
270 | }
271 | 
272 | .todo-count {
273 | 	float: left;
274 | 	text-align: left;
275 | }
276 | 
277 | .todo-count strong {
278 | 	font-weight: 300;
279 | }
280 | 
281 | .filters {
282 | 	margin: 0;
283 | 	padding: 0;
284 | 	list-style: none;
285 | 	position: absolute;
286 | 	right: 0;
287 | 	left: 0;
288 | }
289 | 
290 | .filters li {
291 | 	display: inline;
292 | }
293 | 
294 | .filters li a {
295 | 	color: inherit;
296 | 	margin: 3px;
297 | 	padding: 3px 7px;
298 | 	text-decoration: none;
299 | 	border: 1px solid transparent;
300 | 	border-radius: 3px;
301 | }
302 | 
303 | .filters li a.selected,
304 | .filters li a:hover {
305 | 	border-color: rgba(175, 47, 47, 0.1);
306 | }
307 | 
308 | .filters li a.selected {
309 | 	border-color: rgba(175, 47, 47, 0.2);
310 | }
311 | 
312 | .clear-completed,
313 | html .clear-completed:active {
314 | 	float: right;
315 | 	position: relative;
316 | 	line-height: 20px;
317 | 	text-decoration: none;
318 | 	cursor: pointer;
319 | 	position: relative;
320 | }
321 | 
322 | .clear-completed:hover {
323 | 	text-decoration: underline;
324 | }
325 | 
326 | .info {
327 | 	margin: 65px auto 0;
328 | 	color: #bfbfbf;
329 | 	font-size: 10px;
330 | 	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
331 | 	text-align: center;
332 | }
333 | 
334 | .info p {
335 | 	line-height: 1;
336 | }
337 | 
338 | .info a {
339 | 	color: inherit;
340 | 	text-decoration: none;
341 | 	font-weight: 400;
342 | }
343 | 
344 | .info a:hover {
345 | 	text-decoration: underline;
346 | }
347 | 
348 | /*
349 | 	Hack to remove background from Mobile Safari.
350 | 	Can't use it globally since it destroys checkboxes in Firefox
351 | */
352 | @media screen and (-webkit-min-device-pixel-ratio:0) {
353 | 	.toggle-all,
354 | 	.todo-list li .toggle {
355 | 		background: none;
356 | 	}
357 | 
358 | 	.todo-list li .toggle {
359 | 		height: 40px;
360 | 	}
361 | 
362 | 	.toggle-all {
363 | 		-webkit-transform: rotate(90deg);
364 | 		transform: rotate(90deg);
365 | 		-webkit-appearance: none;
366 | 		appearance: none;
367 | 	}
368 | }
369 | 
370 | @media (max-width: 430px) {
371 | 	.footer {
372 | 		height: 50px;
373 | 	}
374 | 
375 | 	.filters {
376 | 		bottom: 10px;
377 | 	}
378 | }
379 | 
380 | 
381 | .todoapp h1 {
382 | 	font-size: 16px;
383 | 	font-weight: bold;
384 | 	color: red;
385 | 	position: absolute;
386 | 	top: -2em;
387 | 	line-height: 2em;
388 | 	margin: 0;
389 | 	padding: 0;
390 | 
391 | 	transform: translate3d(0px,0px,0px);
392 | 	-moz-transform: translate3d(0px,0px,0px);
393 | 	-webkit-transform: translate3d(0px,0px,0px);
394 | 
395 | 	backface-visibility: hidden;
396 | 	-moz-backface-visibility: hidden;
397 | 	-webkit-backface-visibility: hidden;
398 | }
399 | 
400 | .todoapp {
401 | 	margin: 40px 0px;
402 | }
403 | 
404 | label {
405 | 	transform: translate3d(0px,0px,0px);
406 | 	-moz-transform: translate3d(0px,0px,0px);
407 | 	-webkit-transform: translate3d(0px,0px,0px);
408 | 
409 | 	backface-visibility: hidden;
410 | 	-moz-backface-visibility: hidden;
411 | 	-webkit-backface-visibility: hidden;
412 | 
413 | }


--------------------------------------------------------------------------------
/results.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/somebee/todomvc-render-benchmark/4fde09cb48756cfa24c4e75cfc6622d7b58117f1/results.png


--------------------------------------------------------------------------------
/results@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/somebee/todomvc-render-benchmark/4fde09cb48756cfa24c4e75cfc6622d7b58117f1/results@2x.png


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | 
2 | 'use strict';
3 | 
4 | var express = require('express');
5 | var fs = require('fs');
6 | var app = module.exports = express();
7 | app.use(express.static(__dirname));
8 | 
9 | app.listen(8080);


--------------------------------------------------------------------------------
/todomvc/backbone/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/backbone/*
 2 | !node_modules/backbone/backbone.js
 3 | 
 4 | node_modules/backbone.localstorage/*
 5 | !node_modules/backbone.localstorage/backbone.localStorage.js
 6 | 
 7 | node_modules/jquery/*
 8 | !node_modules/jquery/dist
 9 | node_modules/jquery/dist/*
10 | !node_modules/jquery/dist/jquery.js
11 | 
12 | node_modules/todomvc-app-css/*
13 | !node_modules/todomvc-app-css/index.css
14 | 
15 | node_modules/todomvc-common/*
16 | !node_modules/todomvc-common/base.css
17 | !node_modules/todomvc-common/base.js
18 | 
19 | node_modules/underscore/*
20 | !node_modules/underscore/underscore.js
21 | 


--------------------------------------------------------------------------------
/todomvc/backbone/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en" data-framework="backbonejs">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title>Backbone.js • TodoMVC</title>
 6 | 		<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
 7 | 		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
 8 | 		<link rel="stylesheet" href="../../resources/app.css">
 9 | 		<script src="../../resources/api.js"></script>
10 | 		<script src="js/api.js"></script>
11 | 	</head>
12 | 	<body>
13 | 		
14 | 		<script>
15 | 				
16 | 			API.render = function(force){
17 | 				API.AppView.render();
18 | 			}
19 | 
20 | 			API.addTodo = function(title,render){
21 | 				app.todos.create({
22 | 					title: title,
23 | 					completed: false,
24 | 					order: app.todos.nextOrder()
25 | 				});
26 | 			}
27 | 
28 | 			API.clearAllTodos = function(){
29 | 				_.invoke(app.todos.models.slice(), 'destroy');
30 | 			}
31 | 
32 | 		</script>
33 | 		<section id="todoapp">
34 | 			<header id="header">
35 | 				<h1>todos</h1>
36 | 				<input id="new-todo" placeholder="What needs to be done?" autofocus>
37 | 			</header>
38 | 			<section id="main">
39 | 				<input id="toggle-all" type="checkbox">
40 | 				<label for="toggle-all">Mark all as complete</label>
41 | 				<ul id="todo-list"></ul>
42 | 			</section>
43 | 			<footer id="footer"></footer>
44 | 		</section>
45 | 		<footer id="info">
46 | 			<p>Double-click to edit a todo</p>
47 | 			<p>Written by <a href="https://github.com/addyosmani">Addy Osmani</a></p>
48 | 			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
49 | 		</footer>
50 | 		<script type="text/template" id="item-template">
51 | 			<div class="view">
52 | 				<input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
53 | 				<label><%- title %></label>
54 | 				<button class="destroy"></button>
55 | 			</div>
56 | 			<input class="edit" value="<%- title %>">
57 | 		</script>
58 | 		<script type="text/template" id="stats-template">
59 | 			<span id="todo-count"><strong><%= remaining %></strong> <%= remaining === 1 ? 'item' : 'items' %> left</span>
60 | 			<ul id="filters">
61 | 				<li>
62 | 					<a class="selected" href="#/">All</a>
63 | 				</li>
64 | 				<li>
65 | 					<a href="#/active">Active</a>
66 | 				</li>
67 | 				<li>
68 | 					<a href="#/completed">Completed</a>
69 | 				</li>
70 | 			</ul>
71 | 			<% if (completed) { %>
72 | 			<button id="clear-completed">Clear completed</button>
73 | 			<% } %>
74 | 		</script>
75 | 		<!-- <script src="node_modules/todomvc-common/base.js"></script> -->
76 | 		<script src="node_modules/jquery/dist/jquery.js"></script>
77 | 		<script src="node_modules/underscore/underscore.js"></script>
78 | 		<script src="node_modules/backbone/backbone.js"></script>
79 | 		<script src="node_modules/backbone.localstorage/backbone.localStorage.js"></script>
80 | 		<script src="js/models/todo.js"></script>
81 | 		<script src="js/collections/todos.js"></script>
82 | 		<script src="js/views/todo-view.js"></script>
83 | 		<script src="js/views/app-view.js"></script>
84 | 		<script src="js/routers/router.js"></script>
85 | 		<script src="js/app.js"></script>
86 | 	</body>
87 | </html>
88 | 


--------------------------------------------------------------------------------
/todomvc/backbone/js/api.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/somebee/todomvc-render-benchmark/4fde09cb48756cfa24c4e75cfc6622d7b58117f1/todomvc/backbone/js/api.js


--------------------------------------------------------------------------------
/todomvc/backbone/js/app.js:
--------------------------------------------------------------------------------
 1 | /*global $ */
 2 | /*jshint unused:false */
 3 | var app = app || {};
 4 | var ENTER_KEY = 13;
 5 | var ESC_KEY = 27;
 6 | 
 7 | $(function () {
 8 | 	'use strict';
 9 | 
10 | 	// Drop localStorage for benchmarks
11 | 	Backbone.sync = function () {};
12 | 
13 | 	// kick things off by creating the `App`
14 | 	API.AppView = new app.AppView();
15 | 	API.AppView.render();
16 | 	API.isReady = true;
17 | });
18 | 


--------------------------------------------------------------------------------
/todomvc/backbone/js/collections/todos.js:
--------------------------------------------------------------------------------
 1 | /*global Backbone */
 2 | var app = app || {};
 3 | 
 4 | (function () {
 5 | 	'use strict';
 6 | 
 7 | 	// Todo Collection
 8 | 	// ---------------
 9 | 
10 | 	// The collection of todos is backed by *localStorage* instead of a remote
11 | 	// server.
12 | 	var Todos = Backbone.Collection.extend({
13 | 		// Reference to this collection's model.
14 | 		model: app.Todo,
15 | 
16 | 		// Save all of the todo items under the `"todos"` namespace.
17 | 		localStorage: new Backbone.LocalStorage('todos-backbone'),
18 | 
19 | 		// Filter down the list of all todo items that are finished.
20 | 		completed: function () {
21 | 			return this.where({completed: true});
22 | 		},
23 | 
24 | 		// Filter down the list to only todo items that are still not finished.
25 | 		remaining: function () {
26 | 			return this.where({completed: false});
27 | 		},
28 | 
29 | 		// We keep the Todos in sequential order, despite being saved by unordered
30 | 		// GUID in the database. This generates the next order number for new items.
31 | 		nextOrder: function () {
32 | 			return this.length ? this.last().get('order') + 1 : 1;
33 | 		},
34 | 
35 | 		// Todos are sorted by their original insertion order.
36 | 		comparator: 'order'
37 | 	});
38 | 
39 | 	// Create our global collection of **Todos**.
40 | 	app.todos = new Todos();
41 | })();
42 | 


--------------------------------------------------------------------------------
/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/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/backbone/js/views/app-view.js:
--------------------------------------------------------------------------------
  1 | /*global Backbone, jQuery, _, ENTER_KEY */
  2 | var app = app || {};
  3 | 
  4 | (function ($) {
  5 | 	'use strict';
  6 | 
  7 | 	// The Application
  8 | 	// ---------------
  9 | 
 10 | 	// Our overall **AppView** is the top-level piece of UI.
 11 | 	app.AppView = Backbone.View.extend({
 12 | 
 13 | 		// Instead of generating a new element, bind to the existing skeleton of
 14 | 		// the App already present in the HTML.
 15 | 		el: '#todoapp',
 16 | 
 17 | 		// Our template for the line of statistics at the bottom of the app.
 18 | 		statsTemplate: _.template($('#stats-template').html()),
 19 | 
 20 | 		// Delegated events for creating new items, and clearing completed ones.
 21 | 		events: {
 22 | 			'keypress #new-todo': 'createOnEnter',
 23 | 			'click #clear-completed': 'clearCompleted',
 24 | 			'click #toggle-all': 'toggleAllComplete'
 25 | 		},
 26 | 
 27 | 		// At initialization we bind to the relevant events on the `Todos`
 28 | 		// collection, when items are added or changed. Kick things off by
 29 | 		// loading any preexisting todos that might be saved in *localStorage*.
 30 | 		initialize: function () {
 31 | 			this.allCheckbox = this.$('#toggle-all')[0];
 32 | 			this.$input = this.$('#new-todo');
 33 | 			this.$h1 = this.$('#header h1')[0];
 34 | 			this.$footer = this.$('#footer');
 35 | 			this.$main = this.$('#main');
 36 | 			this.$list = $('#todo-list');
 37 | 
 38 | 			this.listenTo(app.todos, 'add', this.addOne);
 39 | 			this.listenTo(app.todos, 'reset', this.addAll);
 40 | 			this.listenTo(app.todos, 'change:completed', this.filterOne);
 41 | 			this.listenTo(app.todos, 'filter', this.filterAll);
 42 | 			this.listenTo(app.todos, 'all', _.debounce(this.render, 0));
 43 | 
 44 | 			// Suppresses 'add' events with {reset: true} and prevents the app view
 45 | 			// from being re-rendered for every model. Only renders when the 'reset'
 46 | 			// event is triggered at the end of the fetch.
 47 | 			app.todos.fetch({reset: true});
 48 | 		},
 49 | 
 50 | 		// Re-rendering the App just means refreshing the statistics -- the rest
 51 | 		// of the app doesn't change.
 52 | 		render: function () {
 53 | 			API.RENDERCOUNT++;
 54 | 
 55 | 			var completed = app.todos.completed().length;
 56 | 			var remaining = app.todos.remaining().length;
 57 | 
 58 | 			this.$h1.textContent = "todos "+API.RENDERCOUNT;
 59 | 
 60 | 			if (app.todos.length) {
 61 | 				this.$main.show();
 62 | 				this.$footer.show();
 63 | 
 64 | 				this.$footer.html(this.statsTemplate({
 65 | 					completed: completed,
 66 | 					remaining: remaining
 67 | 				}));
 68 | 
 69 | 				this.$('#filters li a')
 70 | 					.removeClass('selected')
 71 | 					.filter('[href="#/' + (app.TodoFilter || '') + '"]')
 72 | 					.addClass('selected');
 73 | 			} else {
 74 | 				this.$main.hide();
 75 | 				this.$footer.hide();
 76 | 			}
 77 | 
 78 | 			if(API.FULLRENDER){
 79 | 				app.todos.each(function(item){ item.$view.render(); });
 80 | 			}
 81 | 
 82 | 			this.allCheckbox.checked = !remaining;
 83 | 		},
 84 | 
 85 | 		// Add a single todo item to the list by creating a view for it, and
 86 | 		// appending its element to the `<ul>`.
 87 | 		addOne: function (todo) {
 88 | 			var view = new app.TodoView({ model: todo });
 89 | 			this.$list.append(view.render().el);
 90 | 		},
 91 | 
 92 | 		// Add all items in the **Todos** collection at once.
 93 | 		addAll: function () {
 94 | 			this.$list.html('');
 95 | 			app.todos.each(this.addOne, this);
 96 | 		},
 97 | 
 98 | 		filterOne: function (todo) {
 99 | 			todo.trigger('visible');
100 | 		},
101 | 
102 | 		filterAll: function () {
103 | 			app.todos.each(this.filterOne, this);
104 | 		},
105 | 
106 | 		// Generate the attributes for a new Todo item.
107 | 		newAttributes: function () {
108 | 			return {
109 | 				title: this.$input.val().trim(),
110 | 				order: app.todos.nextOrder(),
111 | 				completed: false
112 | 			};
113 | 		},
114 | 
115 | 		// If you hit return in the main input field, create new **Todo** model,
116 | 		// persisting it to *localStorage*.
117 | 		createOnEnter: function (e) {
118 | 			if (e.which === ENTER_KEY && this.$input.val().trim()) {
119 | 				app.todos.create(this.newAttributes());
120 | 				this.$input.val('');
121 | 			}
122 | 		},
123 | 
124 | 		// Clear all completed todo items, destroying their models.
125 | 		clearCompleted: function () {
126 | 			_.invoke(app.todos.completed(), 'destroy');
127 | 			return false;
128 | 		},
129 | 
130 | 		toggleAllComplete: function () {
131 | 			var completed = this.allCheckbox.checked;
132 | 
133 | 			app.todos.each(function (todo) {
134 | 				todo.save({
135 | 					completed: completed
136 | 				});
137 | 			});
138 | 		}
139 | 	});
140 | 
141 | 	API.APP = app;
142 | 
143 | 	API.clearAllTodos = function(){
144 | 		_.invoke(app.todos.models.slice(), 'destroy');
145 | 	}
146 | })(jQuery);
147 | 


--------------------------------------------------------------------------------
/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
 29 | 		// there's a one-to-one correspondence between a **Todo** and a
 30 | 		// **TodoView** in this app, we set a direct reference on the model for
 31 | 		// convenience.
 32 | 		initialize: function () {
 33 | 			// this.$el.$view = this;
 34 | 			this.model.$view = this;
 35 | 			this.listenTo(this.model, 'change', this.render);
 36 | 			this.listenTo(this.model, 'destroy', this.remove);
 37 | 			this.listenTo(this.model, 'visible', this.toggleVisible);
 38 | 		},
 39 | 
 40 | 		// Re-render the titles of the todo item.
 41 | 		render: function () {
 42 | 			// Backbone LocalStorage is adding `id` attribute instantly after
 43 | 			// creating a model.  This causes our TodoView to render twice. Once
 44 | 			// after creating a model and once on `id` change.  We want to
 45 | 			// filter out the second redundant render, which is caused by this
 46 | 			// `id` change.  It's known Backbone LocalStorage bug, therefore
 47 | 			// we've to create a workaround.
 48 | 			// https://github.com/tastejs/todomvc/issues/469
 49 | 			if (this.model.changed.id !== undefined) {
 50 | 				return;
 51 | 			}
 52 | 
 53 | 			this.$el.html(this.template(this.model.toJSON()));
 54 | 			this.$el.toggleClass('completed', this.model.get('completed'));
 55 | 			this.toggleVisible();
 56 | 			this.$input = this.$('.edit');
 57 | 			return this;
 58 | 		},
 59 | 
 60 | 		toggleVisible: function () {
 61 | 			this.$el.toggleClass('hidden', this.isHidden());
 62 | 		},
 63 | 
 64 | 		isHidden: function () {
 65 | 			return this.model.get('completed') ?
 66 | 				app.TodoFilter === 'active' :
 67 | 				app.TodoFilter === 'completed';
 68 | 		},
 69 | 
 70 | 		// Toggle the `"completed"` state of the model.
 71 | 		toggleCompleted: function () {
 72 | 			this.model.toggle();
 73 | 		},
 74 | 
 75 | 		// Switch this view into `"editing"` mode, displaying the input field.
 76 | 		edit: function () {
 77 | 			this.$el.addClass('editing');
 78 | 			this.$input.focus();
 79 | 		},
 80 | 
 81 | 		// Close the `"editing"` mode, saving changes to the todo.
 82 | 		close: function () {
 83 | 			var value = this.$input.val();
 84 | 			var trimmedValue = value.trim();
 85 | 
 86 | 			// We don't want to handle blur events from an item that is no
 87 | 			// longer being edited. Relying on the CSS class here has the
 88 | 			// benefit of us not having to maintain state in the DOM and the
 89 | 			// JavaScript logic.
 90 | 			if (!this.$el.hasClass('editing')) {
 91 | 				return;
 92 | 			}
 93 | 
 94 | 			if (trimmedValue) {
 95 | 				this.model.save({ title: trimmedValue });
 96 | 
 97 | 				if (value !== trimmedValue) {
 98 | 					// Model values changes consisting of whitespaces only are
 99 | 					// not causing change to be triggered Therefore we've to
100 | 					// compare untrimmed version with a trimmed one to check
101 | 					// whether anything changed
102 | 					// And if yes, we've to trigger change event ourselves
103 | 					this.model.trigger('change');
104 | 				}
105 | 			} else {
106 | 				this.clear();
107 | 			}
108 | 
109 | 			this.$el.removeClass('editing');
110 | 		},
111 | 
112 | 		// If you hit `enter`, we're through editing the item.
113 | 		updateOnEnter: function (e) {
114 | 			if (e.which === ENTER_KEY) {
115 | 				this.close();
116 | 			}
117 | 		},
118 | 
119 | 		// If you're pressing `escape` we revert your change by simply leaving
120 | 		// the `editing` state.
121 | 		revertOnEscape: function (e) {
122 | 			if (e.which === ESC_KEY) {
123 | 				this.$el.removeClass('editing');
124 | 				// Also reset the hidden input back to the original value.
125 | 				this.$input.val(this.model.get('title'));
126 | 			}
127 | 		},
128 | 
129 | 		// Remove the item, destroy the model from *localStorage* and delete its view.
130 | 		clear: function () {
131 | 			this.model.destroy();
132 | 		}
133 | 	});
134 | })(jQuery);
135 | 


--------------------------------------------------------------------------------
/todomvc/backbone/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "dependencies": {
 4 |     "backbone": "^1.1.2",
 5 |     "backbone.localstorage": "^1.1.16",
 6 |     "jquery": "^2.1.3",
 7 |     "todomvc-app-css": "^1.0.0",
 8 |     "todomvc-common": "^1.0.1",
 9 |     "underscore": "^1.7.0"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/todomvc/backbone/readme.md:
--------------------------------------------------------------------------------
 1 | # Backbone.js TodoMVC Example
 2 | 
 3 | > Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
 4 | 
 5 | > _[Backbone.js - backbonejs.org](http://backbonejs.org)_
 6 | 
 7 | 
 8 | ## Learning Backbone.js
 9 | 
10 | The [Backbone.js website](http://backbonejs.org) is a great resource for getting started.
11 | 
12 | Here are some links you may find helpful:
13 | 
14 | * [Annotated source code](http://backbonejs.org/docs/backbone.html)
15 | * [Applications built with Backbone.js](http://backbonejs.org/#examples)
16 | * [FAQ](http://backbonejs.org/#faq)
17 | 
18 | Articles and guides from the community:
19 | 
20 | * [Developing Backbone.js Applications](http://addyosmani.github.io/backbone-fundamentals)
21 | * [Collection of tutorials, blog posts, and example sites](https://github.com/documentcloud/backbone/wiki/Tutorials%2C-blog-posts-and-example-sites)
22 | 
23 | Get help from other Backbone.js users:
24 | 
25 | * [Backbone.js on StackOverflow](http://stackoverflow.com/questions/tagged/backbone.js)
26 | * [Google Groups mailing list](https://groups.google.com/forum/#!forum/backbonejs)
27 | * [Backbone.js on Twitter](http://twitter.com/documentcloud)
28 | 
29 | _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)._
30 | 


--------------------------------------------------------------------------------
/todomvc/imba-0.14.3/imba/app.imba:
--------------------------------------------------------------------------------
  1 | var ESCAPE_KEY = 27
  2 | var ENTER_KEY = 13
  3 | 
  4 | Todos = TodoModel.new('imba-todos')
  5 | 
  6 | tag app
  7 | 
  8 | 	def hash
  9 | 		@hash
 10 | 
 11 | 	def model
 12 | 		@model
 13 | 
 14 | 	def build
 15 | 		@model = Todos
 16 | 		@model.load
 17 | 		@model.subscribe do render
 18 | 		window.addEventListener 'hashchange' do
 19 | 			@hash = window:location:hash
 20 | 			render
 21 | 		render
 22 | 		self
 23 | 
 24 | 	def onkeydown e
 25 | 		return unless e.which == ENTER_KEY
 26 | 
 27 | 		if let value = e.target.value.trim
 28 | 			model.addTodo(value)
 29 | 			e.target.value = ""
 30 | 
 31 | 
 32 | 	def toggleAll e
 33 | 		model.toggleAll e.target.checked
 34 | 	
 35 | 	# remove all completed todos
 36 | 	def clearCompleted
 37 | 		%%(.toggle-all).checked = no
 38 | 		model.clearCompleted
 39 | 
 40 | 	def list items
 41 | 		for todo,i in items
 42 | 			<todo[todo]@{i}>
 43 | 
 44 | 	def render
 45 | 		API.RENDERCOUNT++
 46 | 
 47 | 		var all    = Todos.@items
 48 | 		var len    = all:length
 49 | 		var items  = all
 50 | 		var done   = []
 51 | 		var active = []
 52 | 
 53 | 		for todo in all
 54 | 			todo:completed ? done.push(todo) : active.push(todo)
 55 | 
 56 | 		if @hash == '#/completed'
 57 | 			items = done
 58 | 
 59 | 		elif @hash == '#/active'
 60 | 			items = active
 61 | 
 62 | 		<self>
 63 | 			<header.header>
 64 | 				<h1> "todos {API.RENDERCOUNT}"
 65 | 				<input.new-todo type='text' placeholder='What needs to be done?' autofocus=true>
 66 | 
 67 | 			if all:length > 0
 68 | 				<section.main>
 69 | 					<input.toggle-all type='checkbox' :change='toggleAll'>
 70 | 					<ul.todo-list> list(items)
 71 | 
 72 | 			if all:length > 0
 73 | 				<footer.footer>
 74 | 					<span.todo-count>
 75 | 						<strong> "{active:length} "
 76 | 						active:length == 1 ? 'item left' : 'items left'
 77 | 					<ul.filters>
 78 | 						<li> <a .selected=(items == all)    href='#/'> 'All'
 79 | 						<li> <a .selected=(items == active) href='#/active'> 'Active'
 80 | 						<li> <a .selected=(items == done)   href='#/completed'> 'Completed'
 81 | 					if done:length > 0
 82 | 						<button.clear-completed :tap='clearCompleted'> 'Clear completed'
 83 | 
 84 | 
 85 | 
 86 | # create an instance of the app (with id app)
 87 | var app = <app#app>
 88 | 
 89 | def API.addTodo title
 90 | 	Todos.addTodo(title)
 91 | 
 92 | def API.renameTodoAtIndex index, title
 93 | 	var todo = Todos.@items[index]
 94 | 	todo:title = title
 95 | 
 96 | def API.clearAllTodos
 97 | 	Todos.clearAll
 98 | 
 99 | def API.render
100 | 	app.render
101 | 	return API.RENDERCOUNT
102 | 
103 | def API.getTodoAtIndex index
104 | 	Todos.@items[index]
105 | 
106 | def API.removeTodoAtIndex index
107 | 	var todo = API.getTodoAtIndex(index)
108 | 	Todos.@items.splice(index,1)
109 | 	return todo
110 | 
111 | def API.insertTodoAtIndex todo, index
112 | 	var len = Todos.@items:length
113 | 	var from = Todos.@items.indexOf(todo)
114 | 	if index >= len
115 | 		Todos.@items.push(todo)
116 | 	else
117 | 		Todos.@items.splice(index,0,todo)
118 | 	return todo
119 | 
120 | # append it to the dom
121 | $$(.todoapp).append app
122 | 	
123 | 
124 | 
125 | 


--------------------------------------------------------------------------------
/todomvc/imba-0.14.3/imba/todoItem.imba:
--------------------------------------------------------------------------------
 1 | var ESCAPE_KEY = 27
 2 | var ENTER_KEY = 13
 3 | 
 4 | # this way of caching is not the 'Imba way' - it is merely a very simple way
 5 | # to do something similar to React 'shouldComponentUpdate'. You can implement
 6 | # this however you want - you merely try to figure out whether anything have
 7 | # changed inside tag#commit, and then rerender if it has.
 8 | tag todo < li
 9 | 
10 | 	def model
11 | 		up(%app).model
12 | 
13 | 	# commit is always called when a node is rendered as part of an outer tree
14 | 	# this is where we decide whether to cascade the render through to inner
15 | 	# parts of this.
16 | 
17 | 	# improvised alternative to React shouldComponentUpdate
18 | 	# you can do this however you want. In Imba there is really no reason
19 | 	# not to render (since it is so fast) - but to make it behave like
20 | 	# the react version we only render the content if we know it has changed
21 | 
22 | 	def commit
23 | 		return render if API.FULLRENDER 
24 | 
25 | 		if @hash != hash(object)
26 | 			@hash = hash(object)
27 | 			render
28 | 
29 | 		return self
30 | 
31 | 
32 | 	def hash o
33 | 		"" + o:title + o:completed + @editing
34 | 
35 | 	def render
36 | 		var todo = @object
37 | 
38 | 		<self .completed=(todo:completed) >
39 | 			<div.view>
40 | 				<label :dblclick='edit'> "{todo:title}"
41 | 				<input@toggle type='checkbox' :change='toggle' checked=(todo:completed)>
42 | 				<button.destroy :tap='drop'>
43 | 			<input@input.edit type='text'>
44 | 
45 | 	def edit
46 | 		@editing = yes
47 | 		flag(:editing)
48 | 		@input.value = object:title
49 | 		setTimeout(&,10) do @input.focus
50 | 		render # only need to render this
51 | 
52 | 	def drop
53 | 		model.destroy(object)
54 | 
55 | 	def toggle e
56 | 		object:completed = @toggle.checked
57 | 		model.inform
58 | 
59 | 	def submit
60 | 		@editing = no
61 | 		unflag(:editing)
62 | 		var title = @input.value.trim
63 | 		title ? model.rename(object,title) : model.destroy(object)
64 | 
65 | 	def onfocusout e
66 | 		submit if @editing
67 | 
68 | 	def cancel
69 | 		@editing = no
70 | 		unflag(:editing)
71 | 		@input.blur
72 | 		render
73 | 
74 | 	# onkeydown from inner element cascade through
75 | 	def onkeydown e
76 | 		e.halt
77 | 		submit if e.which == ENTER_KEY
78 | 		cancel if e.which == ESCAPE_KEY
79 | 
80 | 


--------------------------------------------------------------------------------
/todomvc/imba-0.14.3/imba/todoModel.imba:
--------------------------------------------------------------------------------
 1 | extern localStorage
 2 | 
 3 | global class TodoModel
 4 | 	
 5 | 	var id = 0
 6 | 
 7 | 	prop items
 8 | 	
 9 | 	def initialize key
10 | 		@key = key
11 | 		@items = []
12 | 		@listeners = []
13 | 
14 | 	def subscribe fn
15 | 		@listeners.push(fn)
16 | 
17 | 	def inform
18 | 		if API.AUTORENDER
19 | 			fn(self) for fn in @listeners
20 | 
21 | 		if API.AUTOPERSIST
22 | 			store
23 | 
24 | 		self
25 | 
26 | 	def addTodo title
27 | 		items.push(id: id++, title: title, completed: no)
28 | 		inform
29 | 
30 | 	def toggleAll state
31 | 		for item in items
32 | 			item:completed = state
33 | 		inform
34 | 
35 | 	def toggle item
36 | 		item:completed = !item:completed
37 | 		inform
38 | 
39 | 	def destroy item
40 | 		items.splice(items.indexOf(item),1)
41 | 		inform
42 | 
43 | 	def rename item, title
44 | 		item:title = title
45 | 		inform
46 | 
47 | 	def save item, title
48 | 		item:title = title
49 | 		inform
50 | 
51 | 	def clearCompleted
52 | 		items = items.filter do |item| !item:completed
53 | 		inform
54 | 
55 | 	def clearAll
56 | 		items = []
57 | 		inform
58 | 	
59 | 	def load
60 | 		items = JSON.parse(localStorage.getItem(@key) or '[]')
61 | 		(item:id = id++) for item in items # setting unique id
62 | 		inform
63 | 
64 | 	# persist todos to localstorage
65 | 	def store
66 | 		var json = JSON.stringify(items)
67 | 		localStorage.setItem(@key,@json = json) if json != @json
68 | 		self
69 | 		
70 | 
71 | 
72 | 		
73 | 		


--------------------------------------------------------------------------------
/todomvc/imba-0.14.3/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en" data-framework="imba">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title>Imba • TodoMVC</title>
 6 | 		<link rel="stylesheet" href="../../resources/shared/app.css">
 7 | 		<script src="../../resources/shared/api.js"></script>
 8 | 	</head>
 9 | 	<body>
10 | 		<script src="js/api.js"></script>
11 | 		<section class="todoapp"></section>
12 | 		<script src="js/imba.min.js"></script>
13 | 		<script src="js/todoModel.js"></script>
14 | 		<script src="js/todoItem.js"></script>
15 | 		<script src="js/app.js"></script>
16 | 	</body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/todomvc/imba-0.14.3/js/api.js:
--------------------------------------------------------------------------------
1 | 
2 | API.toggleTodoAtIndex = function(index, autorender) {
3 | 	var todo = Todos._items[index];
4 | 	todo.completed = !todo.completed;
5 | 	if(autorender) API.render(true);
6 | }


--------------------------------------------------------------------------------
/todomvc/imba-0.14.3/js/app.js:
--------------------------------------------------------------------------------
  1 | (function(){
  2 | 	function iter$(a){ return a ? (a.toArray ? a.toArray() : a) : []; };
  3 | 	var ESCAPE_KEY = 27;
  4 | 	var ENTER_KEY = 13;
  5 | 	
  6 | 	Todos = new TodoModel('imba-todos');
  7 | 	
  8 | 	tag$.defineTag('app', function(tag){
  9 | 		
 10 | 		tag.prototype.hash = function (){
 11 | 			return this._hash;
 12 | 		};
 13 | 		
 14 | 		tag.prototype.model = function (){
 15 | 			return this._model;
 16 | 		};
 17 | 		
 18 | 		tag.prototype.build = function (){
 19 | 			var self = this;
 20 | 			self._model = Todos;
 21 | 			self._model.load();
 22 | 			self._model.subscribe(function() { return self.render(); });
 23 | 			window.addEventListener('hashchange',function() {
 24 | 				self._hash = window.location.hash;
 25 | 				return self.render();
 26 | 			});
 27 | 			self.render();
 28 | 			return self;
 29 | 		};
 30 | 		
 31 | 		tag.prototype.onkeydown = function (e){
 32 | 			var value, v_;
 33 | 			if (e.which() != ENTER_KEY) { return };
 34 | 			
 35 | 			if (value = e.target().value().trim()) {
 36 | 				this.model().addTodo(value);
 37 | 				return (e.target().setValue(v_ = ""),v_);
 38 | 			};
 39 | 		};
 40 | 		
 41 | 		
 42 | 		tag.prototype.toggleAll = function (e){
 43 | 			return this.model().toggleAll(e.target().checked());
 44 | 		};
 45 | 		
 46 | 		// remove all completed todos
 47 | 		tag.prototype.clearCompleted = function (){
 48 | 			q$$('.toggle-all',this).setChecked(false);
 49 | 			return this.model().clearCompleted();
 50 | 		};
 51 | 		
 52 | 		tag.prototype.list = function (items){
 53 | 			for (var i = 0, ary = iter$(items), len = ary.length, res = []; i < len; i++) {
 54 | 				res.push((this['_' + i] = this['_' + i] || tag$.$todo()).setObject(ary[i]).end());
 55 | 			};
 56 | 			return res;
 57 | 		};
 58 | 		
 59 | 		tag.prototype.render = function (){
 60 | 			var t0, t1, t2, t3, t4, t5, t6, t7, t8, t9, t10;
 61 | 			API.RENDERCOUNT++;
 62 | 			
 63 | 			var all = Todos._items;
 64 | 			var len = all.length;
 65 | 			var items = all;
 66 | 			var done = [];
 67 | 			var active = [];
 68 | 			
 69 | 			for (var i = 0, ary = iter$(all), len_ = ary.length, todo; i < len_; i++) {
 70 | 				todo = ary[i];
 71 | 				todo.completed ? (done.push(todo)) : (active.push(todo));
 72 | 			};
 73 | 			
 74 | 			if (this._hash == '#/completed') {
 75 | 				items = done;
 76 | 			} else if (this._hash == '#/active') {
 77 | 				items = active;
 78 | 			};
 79 | 			
 80 | 			return this.setChildren([
 81 | 				(t0 = this.$a=this.$a || tag$.$header().flag('header')).setContent([
 82 | 					(t1 = t0.$$a=t0.$$a || tag$.$h1()).setContent(("todos " + (API.RENDERCOUNT)),3).end(),
 83 | 					(t0.$$b = t0.$$b || tag$.$input().flag('new-todo').setType('text').setPlaceholder('What needs to be done?').setAutofocus(true)).end()
 84 | 				],2).end(),
 85 | 				
 86 | 				(all.length > 0) ? (
 87 | 					(t2 = this.$b=this.$b || tag$.$section().flag('main')).setContent([
 88 | 						(t2.$$a = t2.$$a || tag$.$input().flag('toggle-all').setType('checkbox').setHandler('change','toggleAll',this)).end(),
 89 | 						(t3 = t2.$$b=t2.$$b || tag$.$ul().flag('todo-list')).setContent(this.list(items),3).end()
 90 | 					],2).end()
 91 | 				) : void(0),
 92 | 				
 93 | 				(all.length > 0) ? (
 94 | 					(t4 = this.$c=this.$c || tag$.$footer().flag('footer')).setContent([
 95 | 						(t5 = t4.$$a=t4.$$a || tag$.$span().flag('todo-count')).setContent([
 96 | 							(t6 = t5.$$a=t5.$$a || tag$.$strong()).setContent(("" + (active.length) + " "),3).end(),
 97 | 							active.length == 1 ? ('item left') : ('items left')
 98 | 						],1).end(),
 99 | 						(t7 = t4.$$b=t4.$$b || tag$.$ul().flag('filters')).setContent([
100 | 							(t8 = t7.$$a=t7.$$a || tag$.$li()).setContent((t8.$$a = t8.$$a || tag$.$a().setHref('#/')).flag('selected',(items == all)).setText('All').end(),2).end(),
101 | 							(t9 = t7.$$b=t7.$$b || tag$.$li()).setContent((t9.$$a = t9.$$a || tag$.$a().setHref('#/active')).flag('selected',(items == active)).setText('Active').end(),2).end(),
102 | 							(t10 = t7.$$c=t7.$$c || tag$.$li()).setContent((t10.$$a = t10.$$a || tag$.$a().setHref('#/completed')).flag('selected',(items == done)).setText('Completed').end(),2).end()
103 | 						],2).end(),
104 | 						(done.length > 0) ? (
105 | 							(t4.$$c = t4.$$c || tag$.$button().flag('clear-completed').setHandler('tap','clearCompleted',this)).setText('Clear completed').end()
106 | 						) : void(0)
107 | 					],1).end()
108 | 				) : void(0)
109 | 			],1).synced();
110 | 		};
111 | 	});
112 | 	
113 | 	
114 | 	
115 | 	// create an instance of the app (with id app)
116 | 	var app = tag$.$app().setId('app').end();
117 | 	
118 | 	API.addTodo = function (title){
119 | 		return Todos.addTodo(title);
120 | 	};
121 | 	
122 | 	API.renameTodoAtIndex = function (index,title){
123 | 		var todo = Todos._items[index];
124 | 		return todo.title = title;
125 | 	};
126 | 	
127 | 	API.clearAllTodos = function (){
128 | 		return Todos.clearAll();
129 | 	};
130 | 	
131 | 	API.render = function (){
132 | 		app.render();
133 | 		return API.RENDERCOUNT;
134 | 	};
135 | 	
136 | 	API.getTodoAtIndex = function (index){
137 | 		return Todos._items[index];
138 | 	};
139 | 	
140 | 	API.removeTodoAtIndex = function (index){
141 | 		var todo = API.getTodoAtIndex(index);
142 | 		Todos._items.splice(index,1);
143 | 		return todo;
144 | 	};
145 | 	
146 | 	API.insertTodoAtIndex = function (todo,index){
147 | 		var len = Todos._items.length;
148 | 		var from = Todos._items.indexOf(todo);
149 | 		if (index >= len) {
150 | 			Todos._items.push(todo);
151 | 		} else {
152 | 			Todos._items.splice(index,0,todo);
153 | 		};
154 | 		return todo;
155 | 	};
156 | 	
157 | 	// append it to the dom
158 | 	return q$$('.todoapp').append(app);
159 | 	
160 | 	
161 | 	
162 | 
163 | })()


--------------------------------------------------------------------------------
/todomvc/imba-0.14.3/js/todoItem.js:
--------------------------------------------------------------------------------
 1 | (function(){
 2 | 	var ESCAPE_KEY = 27;
 3 | 	var ENTER_KEY = 13;
 4 | 	
 5 | 	// this way of caching is not the 'Imba way' - it is merely a very simple way
 6 | 	// to do something similar to React 'shouldComponentUpdate'. You can implement
 7 | 	// this however you want - you merely try to figure out whether anything have
 8 | 	// changed inside tag#commit, and then rerender if it has.
 9 | 	return tag$.defineTag('todo', 'li', function(tag){
10 | 		
11 | 		tag.prototype.model = function (){
12 | 			return this.up(q$('._app',this)).model();
13 | 		};
14 | 		
15 | 		// commit is always called when a node is rendered as part of an outer tree
16 | 		// this is where we decide whether to cascade the render through to inner
17 | 		// parts of this.
18 | 		
19 | 		// improvised alternative to React shouldComponentUpdate
20 | 		// you can do this however you want. In Imba there is really no reason
21 | 		// not to render (since it is so fast) - but to make it behave like
22 | 		// the react version we only render the content if we know it has changed
23 | 		
24 | 		tag.prototype.commit = function (){
25 | 			if (API.FULLRENDER) { return this.render() };
26 | 			
27 | 			if (this._hash != this.hash(this.object())) {
28 | 				this._hash = this.hash(this.object());
29 | 				this.render();
30 | 			};
31 | 			
32 | 			return this;
33 | 		};
34 | 		
35 | 		
36 | 		tag.prototype.hash = function (o){
37 | 			return "" + o.title + o.completed + this._editing;
38 | 		};
39 | 		
40 | 		tag.prototype.render = function (){
41 | 			var t0, t1;
42 | 			var todo = this._object;
43 | 			
44 | 			return this.flag('completed',(todo.completed)).setChildren([
45 | 				(t0 = this.$a=this.$a || tag$.$div().flag('view')).setContent([
46 | 					(t1 = t0.$$a=t0.$$a || tag$.$label().setHandler('dblclick','edit',this)).setContent(("" + (todo.title)),3).end(),
47 | 					(this._toggle = this._toggle || tag$.$input().setRef('toggle',this).setType('checkbox').setHandler('change','toggle',this)).setChecked((todo.completed)).end(),
48 | 					(t0.$$c = t0.$$c || tag$.$button().flag('destroy').setHandler('tap','drop',this)).end()
49 | 				],2).end(),
50 | 				(this._input = this._input || tag$.$input().setRef('input',this).flag('edit').setType('text')).end()
51 | 			],2).synced();
52 | 		};
53 | 		
54 | 		tag.prototype.edit = function (){
55 | 			var self = this;
56 | 			this._editing = true;
57 | 			this.flag('editing');
58 | 			this._input.setValue(this.object().title);
59 | 			setTimeout(function() { return self._input.focus(); },10);
60 | 			return self.render(); // only need to render this
61 | 		};
62 | 		
63 | 		tag.prototype.drop = function (){
64 | 			return this.model().destroy(this.object());
65 | 		};
66 | 		
67 | 		tag.prototype.toggle = function (e){
68 | 			this.object().completed = this._toggle.checked();
69 | 			return this.model().inform();
70 | 		};
71 | 		
72 | 		tag.prototype.submit = function (){
73 | 			this._editing = false;
74 | 			this.unflag('editing');
75 | 			var title = this._input.value().trim();
76 | 			return title ? (this.model().rename(this.object(),title)) : (this.model().destroy(this.object()));
77 | 		};
78 | 		
79 | 		tag.prototype.onfocusout = function (e){
80 | 			if (this._editing) { return this.submit() };
81 | 		};
82 | 		
83 | 		tag.prototype.cancel = function (){
84 | 			this._editing = false;
85 | 			this.unflag('editing');
86 | 			this._input.blur();
87 | 			return this.render();
88 | 		};
89 | 		
90 | 		// onkeydown from inner element cascade through
91 | 		tag.prototype.onkeydown = function (e){
92 | 			e.halt();
93 | 			if (e.which() == ENTER_KEY) this.submit();
94 | 			if (e.which() == ESCAPE_KEY) { return this.cancel() };
95 | 		};
96 | 	});
97 | 	
98 | 
99 | })()


--------------------------------------------------------------------------------
/todomvc/imba-0.14.3/js/todoModel.js:
--------------------------------------------------------------------------------
 1 | (function(){
 2 | 	function iter$(a){ return a ? (a.toArray ? a.toArray() : a) : []; };
 3 | 	// externs;
 4 | 	
 5 | 	function TodoModel(key){
 6 | 		this._key = key;
 7 | 		this._items = [];
 8 | 		this._listeners = [];
 9 | 	};
10 | 	
11 | 	global.TodoModel = TodoModel; // global class 
12 | 	var id = 0;
13 | 	
14 | 	TodoModel.prototype.items = function(v){ return this._items; }
15 | 	TodoModel.prototype.setItems = function(v){ this._items = v; return this; };
16 | 	
17 | 	TodoModel.prototype.subscribe = function (fn){
18 | 		return this._listeners.push(fn);
19 | 	};
20 | 	
21 | 	TodoModel.prototype.inform = function (){
22 | 		if (API.AUTORENDER) {
23 | 			for (var i = 0, ary = iter$(this._listeners), len = ary.length; i < len; i++) {
24 | 				ary[i](this);
25 | 			};
26 | 		};
27 | 		
28 | 		if (API.AUTOPERSIST) {
29 | 			this.store();
30 | 		};
31 | 		
32 | 		return this;
33 | 	};
34 | 	
35 | 	TodoModel.prototype.addTodo = function (title){
36 | 		this.items().push({id: id++,title: title,completed: false});
37 | 		return this.inform();
38 | 	};
39 | 	
40 | 	TodoModel.prototype.toggleAll = function (state){
41 | 		for (var i = 0, ary = iter$(this.items()), len = ary.length; i < len; i++) {
42 | 			ary[i].completed = state;
43 | 		};
44 | 		return this.inform();
45 | 	};
46 | 	
47 | 	TodoModel.prototype.toggle = function (item){
48 | 		item.completed = !item.completed;
49 | 		return this.inform();
50 | 	};
51 | 	
52 | 	TodoModel.prototype.destroy = function (item){
53 | 		this.items().splice(this.items().indexOf(item),1);
54 | 		return this.inform();
55 | 	};
56 | 	
57 | 	TodoModel.prototype.rename = function (item,title){
58 | 		item.title = title;
59 | 		return this.inform();
60 | 	};
61 | 	
62 | 	TodoModel.prototype.save = function (item,title){
63 | 		item.title = title;
64 | 		return this.inform();
65 | 	};
66 | 	
67 | 	TodoModel.prototype.clearCompleted = function (){
68 | 		this.setItems(this.items().filter(function(item) { return !item.completed; }));
69 | 		return this.inform();
70 | 	};
71 | 	
72 | 	TodoModel.prototype.clearAll = function (){
73 | 		this.setItems([]);
74 | 		return this.inform();
75 | 	};
76 | 	
77 | 	TodoModel.prototype.load = function (){
78 | 		this.setItems(JSON.parse(localStorage.getItem(this._key) || '[]'));
79 | 		for (var i = 0, ary = iter$(this.items()), len = ary.length; i < len; i++) {
80 | 			ary[i].id = id++;
81 | 		}; // setting unique id
82 | 		return this.inform();
83 | 	};
84 | 	
85 | 	// persist todos to localstorage
86 | 	TodoModel.prototype.store = function (){
87 | 		var json = JSON.stringify(this.items());
88 | 		if (json != this._json) { localStorage.setItem(this._key,this._json = json) };
89 | 		return this;
90 | 	};
91 | 	return TodoModel;
92 | 	
93 | 	
94 | 	
95 | 	
96 | 
97 | })()


--------------------------------------------------------------------------------
/todomvc/imba-0.14.3/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "private": true,
3 |   "dependencies": {"imba": "0.14.3"}
4 | }


--------------------------------------------------------------------------------
/todomvc/imba-0.14.3/readme.md:
--------------------------------------------------------------------------------
 1 | # Imba • [TodoMVC](http://todomvc.com) example structured like React TodoMVC
 2 | 
 3 | ## Usage
 4 | 
 5 | Clone the repository and run npm install from inside the folder.
 6 | index.html and react.html can both be accessed directly as files (also without npm / node).
 7 | 
 8 | Imba sourcecode resides in imba/
 9 | To recompile the source, make sure you have [Imba](http://imba.io) installed and run `imba watch imba/ -o js/` from root of the folder.
10 | 
11 | The benchmarking part only focuses on the actual rendering.
12 | 
13 | ## Resources
14 | 
15 | - [Website](http://imba.io)
16 | - [Repo](http://github.com/somebee/imba)
17 | - [Issues](http://github.com/somebee/imba/issues)
18 | 
19 | ## Credit
20 | 
21 | Created by [Sindre Aarsaether](http://github.com/somebee)
22 | 


--------------------------------------------------------------------------------
/todomvc/imba-dev/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en" data-framework="imba">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title>Imba • TodoMVC</title>
 6 | 		<link rel="stylesheet" href="../../resources/shared/app.css">
 7 | 		<script src="../../resources/shared/api.js"></script>
 8 | 	</head>
 9 | 	<body>
10 | 		<section class="todoapp"></section>
11 | 		<script src="app.js"></script>
12 | 	</body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/todomvc/imba-dev/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "dependencies": {
 4 |     "imba": "^0.15.0-alpha.1"
 5 |   },
 6 |   "scripts": {
 7 |   	"build": "./node_modules/imba/bin/imbapack src/app.imba ./app.js",
 8 |   	"watch": "./node_modules/imba/bin/imbapack src/app.imba ./app.js --watch"
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/todomvc/imba-dev/readme.md:
--------------------------------------------------------------------------------
1 | # Imba • [TodoMVC](http://todomvc.com) example structured like React TodoMVC
2 | 
3 | ## Usage
4 | 
5 | `npm run watch`
6 | `npm run build`


--------------------------------------------------------------------------------
/todomvc/imba-dev/src/app.imba:
--------------------------------------------------------------------------------
  1 | 
  2 | require 'imba'
  3 | 
  4 | require './todo'
  5 | 
  6 | import Store from './store'
  7 | Todos = Store.new('imba-todos')
  8 | 
  9 | var ENTER_KEY = 13
 10 | 
 11 | tag app
 12 | 
 13 | 	def hash
 14 | 		@hash
 15 | 
 16 | 	def model
 17 | 		@model
 18 | 
 19 | 	def build
 20 | 		@model = Todos
 21 | 		@model.load
 22 | 		@model.subscribe do render
 23 | 		window.addEventListener 'hashchange' do
 24 | 			@hash = window:location:hash
 25 | 			render
 26 | 		render
 27 | 		self
 28 | 
 29 | 	def onkeydown e
 30 | 		return unless e.which == ENTER_KEY
 31 | 
 32 | 		if let value = e.target.value.trim
 33 | 			model.addTodo(value)
 34 | 			e.target.value = ""
 35 | 
 36 | 
 37 | 	def toggleAll e
 38 | 		model.toggleAll e.target.checked
 39 | 	
 40 | 	# remove all completed todos
 41 | 	def clearCompleted
 42 | 		%%(.toggle-all).checked = no
 43 | 		model.clearCompleted
 44 | 
 45 | 	def list items
 46 | 		for todo,i in items
 47 | 			<todo[todo]@{todo:id}>
 48 | 
 49 | 	def render
 50 | 		API.RENDERCOUNT++
 51 | 
 52 | 		var all    = Todos.@items
 53 | 		var items  = all
 54 | 		var done   = []
 55 | 		var active = []
 56 | 
 57 | 		for todo in all
 58 | 			todo:completed ? done.push(todo) : active.push(todo)
 59 | 
 60 | 		if @hash == '#/completed'
 61 | 			items = done
 62 | 
 63 | 		elif @hash == '#/active'
 64 | 			items = active
 65 | 
 66 | 		<self>
 67 | 			<header.header>
 68 | 				<h1> "todos {API.RENDERCOUNT}"
 69 | 				<input.new-todo type='text' placeholder='What needs to be done?' autofocus=true>
 70 | 
 71 | 			if all:length > 0
 72 | 				<section.main>
 73 | 					<input.toggle-all type='checkbox' :change='toggleAll'>
 74 | 					<ul.todo-list> list(items)
 75 | 
 76 | 			if all:length > 0
 77 | 				<footer.footer>
 78 | 					<span.todo-count>
 79 | 						<strong> "{active:length} "
 80 | 						active:length == 1 ? 'item left' : 'items left'
 81 | 					<ul.filters>
 82 | 						<li> <a .selected=(items == all)    href='#/'> 'All'
 83 | 						<li> <a .selected=(items == active) href='#/active'> 'Active'
 84 | 						<li> <a .selected=(items == done)   href='#/completed'> 'Completed'
 85 | 					if done:length > 0
 86 | 						<button.clear-completed :tap='clearCompleted'> 'Clear completed'
 87 | 
 88 | 
 89 | 
 90 | # create an instance of the app (with id app)
 91 | var app = <app#app>
 92 | 
 93 | def API.addTodo title
 94 | 	Todos.addTodo(title)
 95 | 
 96 | def API.renameTodoAtIndex index, title
 97 | 	var todo = Todos.@items[index]
 98 | 	todo:title = title
 99 | 
100 | def API.clearAllTodos
101 | 	Todos.clearAll
102 | 
103 | def API.render
104 | 	app.render
105 | 	return API.RENDERCOUNT
106 | 
107 | def API.getTodoAtIndex index
108 | 	Todos.@items[index]
109 | 
110 | def API.removeTodoAtIndex index
111 | 	var todo = API.getTodoAtIndex(index)
112 | 	Todos.@items.splice(index,1)
113 | 	return todo
114 | 
115 | def API.insertTodoAtIndex todo, index
116 | 	var len = Todos.@items:length
117 | 	var from = Todos.@items.indexOf(todo)
118 | 	if index >= len
119 | 		Todos.@items.push(todo)
120 | 	else
121 | 		Todos.@items.splice(index,0,todo)
122 | 	return todo
123 | 
124 | def API.toggleTodoAtIndex index, autorender
125 | 	var todo = Todos.@items[index]
126 | 	todo:completed = !todo:completed
127 | 	API.render(true) if autorender
128 | 
129 | # append it to the dom
130 | $$(.todoapp).append app
131 | 	
132 | 
133 | 
134 | 


--------------------------------------------------------------------------------
/todomvc/imba-dev/src/store.imba:
--------------------------------------------------------------------------------
 1 | extern localStorage
 2 | 
 3 | export class Store
 4 | 	
 5 | 	var id = 0
 6 | 
 7 | 	prop items
 8 | 	
 9 | 	def initialize key
10 | 		@key = key
11 | 		@items = []
12 | 		@listeners = []
13 | 
14 | 	def subscribe fn
15 | 		@listeners.push(fn)
16 | 
17 | 	def inform
18 | 		if API.AUTORENDER
19 | 			fn(self) for fn in @listeners
20 | 
21 | 		if API.AUTOPERSIST
22 | 			store
23 | 
24 | 		self
25 | 
26 | 	def addTodo title
27 | 		items.push(id: id++, title: title, completed: no)
28 | 		inform
29 | 
30 | 	def toggleAll state
31 | 		for item in items
32 | 			item:completed = state
33 | 		inform
34 | 
35 | 	def toggle item
36 | 		item:completed = !item:completed
37 | 		inform
38 | 
39 | 	def destroy item
40 | 		items.splice(items.indexOf(item),1)
41 | 		inform
42 | 
43 | 	def rename item, title
44 | 		item:title = title
45 | 		inform
46 | 
47 | 	def save item, title
48 | 		item:title = title
49 | 		inform
50 | 
51 | 	def clearCompleted
52 | 		items = items.filter do |item| !item:completed
53 | 		inform
54 | 
55 | 	def clearAll
56 | 		items = []
57 | 		inform
58 | 	
59 | 	def load
60 | 		items = JSON.parse(localStorage.getItem(@key) or '[]')
61 | 		(item:id = id++) for item in items # setting unique id
62 | 		inform
63 | 
64 | 	# persist todos to localstorage
65 | 	def store
66 | 		var json = JSON.stringify(items)
67 | 		localStorage.setItem(@key,@json = json) if json != @json
68 | 		self
69 | 		
70 | 
71 | 
72 | 		
73 | 		


--------------------------------------------------------------------------------
/todomvc/imba-dev/src/todo.imba:
--------------------------------------------------------------------------------
 1 | var ESCAPE_KEY = 27
 2 | var ENTER_KEY = 13
 3 | 
 4 | # this way of caching is not the 'Imba way' - it is merely a very simple way
 5 | # to do something similar to React 'shouldComponentUpdate'. You can implement
 6 | # this however you want - you merely try to figure out whether anything have
 7 | # changed inside tag#commit, and then rerender if it has.
 8 | tag todo < li
 9 | 
10 | 	def model
11 | 		up('._app').model
12 | 
13 | 	# commit is always called when a node is rendered as part of an outer tree
14 | 	# this is where we decide whether to cascade the render through to inner
15 | 	# parts of this.
16 | 
17 | 	# improvised alternative to React shouldComponentUpdate
18 | 	# you can do this however you want. In Imba there is really no reason
19 | 	# not to render (since it is so fast) - but to make it behave like
20 | 	# the react version we only render the content if we know it has changed
21 | 
22 | 	def commit
23 | 		return render if API.FULLRENDER 
24 | 
25 | 		if @hash != hash(object)
26 | 			@hash = hash(object)
27 | 			render
28 | 
29 | 		return self
30 | 
31 | 
32 | 	def hash o
33 | 		"" + o:title + o:completed + @editing
34 | 
35 | 	def render
36 | 		var todo = @object
37 | 
38 | 		<self .completed=(todo:completed) >
39 | 			<div.view>
40 | 				<label :dblclick='edit'> "{todo:title}"
41 | 				<input@toggle type='checkbox' :change='toggle' checked=(todo:completed)>
42 | 				<button.destroy :tap='drop'>
43 | 			<input@input.edit type='text'>
44 | 
45 | 	def edit
46 | 		@editing = yes
47 | 		flag(:editing)
48 | 		@input.value = object:title
49 | 		setTimeout(&,10) do @input.focus
50 | 		render # only need to render this
51 | 
52 | 	def drop
53 | 		model.destroy(object)
54 | 
55 | 	def toggle e
56 | 		object:completed = @toggle.checked
57 | 		model.inform
58 | 
59 | 	def submit
60 | 		@editing = no
61 | 		unflag(:editing)
62 | 		var title = @input.value.trim
63 | 		title ? model.rename(object,title) : model.destroy(object)
64 | 
65 | 	def onfocusout e
66 | 		submit if @editing
67 | 
68 | 	def cancel
69 | 		@editing = no
70 | 		unflag(:editing)
71 | 		@input.blur
72 | 		render
73 | 
74 | 	# onkeydown from inner element cascade through
75 | 	def onkeydown e
76 | 		e.halt
77 | 		submit if e.which == ENTER_KEY
78 | 		cancel if e.which == ESCAPE_KEY
79 | 
80 | 


--------------------------------------------------------------------------------
/todomvc/mithril/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/todomvc-app-css/*
 2 | !node_modules/todomvc-app-css/index.css
 3 | 
 4 | node_modules/todomvc-common/*
 5 | !node_modules/todomvc-common/base.js
 6 | !node_modules/todomvc-common/base.css
 7 | 
 8 | node_modules/mithril/*
 9 | !node_modules/mithril/mithril.js
10 | 


--------------------------------------------------------------------------------
/todomvc/mithril/ext/mithril/mithril.js:
--------------------------------------------------------------------------------
   1 | var m = (function app(window, undefined) {
   2 | 	var OBJECT = "[object Object]", ARRAY = "[object Array]", STRING = "[object String]", FUNCTION = "function";
   3 | 	var type = {}.toString;
   4 | 	var parser = /(?:(^|#|\.)([^#\.\[\]]+))|(\[.+?\])/g, attrParser = /\[(.+?)(?:=("|'|)(.*?)\2)?\]/;
   5 | 	var voidElements = /^(AREA|BASE|BR|COL|COMMAND|EMBED|HR|IMG|INPUT|KEYGEN|LINK|META|PARAM|SOURCE|TRACK|WBR)$/;
   6 | 
   7 | 	// caching commonly used variables
   8 | 	var $document, $location, $requestAnimationFrame, $cancelAnimationFrame;
   9 | 
  10 | 	// self invoking function needed because of the way mocks work
  11 | 	function initialize(window){
  12 | 		$document = window.document;
  13 | 		$location = window.location;
  14 | 		$cancelAnimationFrame = window.cancelAnimationFrame || window.clearTimeout;
  15 | 		$requestAnimationFrame = window.requestAnimationFrame || window.setTimeout;
  16 | 	}
  17 | 
  18 | 	initialize(window);
  19 | 
  20 | 
  21 | 	/**
  22 | 	 * @typedef {String} Tag
  23 | 	 * A string that looks like -> div.classname#id[param=one][param2=two]
  24 | 	 * Which describes a DOM node
  25 | 	 */
  26 | 
  27 | 	/**
  28 | 	 *
  29 | 	 * @param {Tag} The DOM node tag
  30 | 	 * @param {Object=[]} optional key-value pairs to be mapped to DOM attrs
  31 | 	 * @param {...mNode=[]} Zero or more Mithril child nodes. Can be an array, or splat (optional)
  32 | 	 *
  33 | 	 */
  34 | 	function m() {
  35 | 		var args = [].slice.call(arguments);
  36 | 		var hasAttrs = args[1] != null && type.call(args[1]) === OBJECT && !("tag" in args[1]) && !("subtree" in args[1]);
  37 | 		var attrs = hasAttrs ? args[1] : {};
  38 | 		var classAttrName = "class" in attrs ? "class" : "className";
  39 | 		var cell = {tag: "div", attrs: {}};
  40 | 		var match, classes = [];
  41 | 		if (type.call(args[0]) != STRING) throw new Error("selector in m(selector, attrs, children) should be a string")
  42 | 		while (match = parser.exec(args[0])) {
  43 | 			if (match[1] === "" && match[2]) cell.tag = match[2];
  44 | 			else if (match[1] === "#") cell.attrs.id = match[2];
  45 | 			else if (match[1] === ".") classes.push(match[2]);
  46 | 			else if (match[3][0] === "[") {
  47 | 				var pair = attrParser.exec(match[3]);
  48 | 				cell.attrs[pair[1]] = pair[3] || (pair[2] ? "" :true)
  49 | 			}
  50 | 		}
  51 | 		if (classes.length > 0) cell.attrs[classAttrName] = classes.join(" ");
  52 | 
  53 | 
  54 | 		var children = hasAttrs ? args[2] : args[1];
  55 | 		if (type.call(children) === ARRAY) {
  56 | 			cell.children = children
  57 | 		}
  58 | 		else {
  59 | 			cell.children = hasAttrs ? args.slice(2) : args.slice(1)
  60 | 		}
  61 | 
  62 | 		for (var attrName in attrs) {
  63 | 			if (attrName === classAttrName) {
  64 | 				if (attrs[attrName] !== "") cell.attrs[attrName] = (cell.attrs[attrName] || "") + " " + attrs[attrName];
  65 | 			}
  66 | 			else cell.attrs[attrName] = attrs[attrName]
  67 | 		}
  68 | 		return cell
  69 | 	}
  70 | 	function build(parentElement, parentTag, parentCache, parentIndex, data, cached, shouldReattach, index, editable, namespace, configs) {
  71 | 		//`build` is a recursive function that manages creation/diffing/removal of DOM elements based on comparison between `data` and `cached`
  72 | 		//the diff algorithm can be summarized as this:
  73 | 		//1 - compare `data` and `cached`
  74 | 		//2 - if they are different, copy `data` to `cached` and update the DOM based on what the difference is
  75 | 		//3 - recursively apply this algorithm for every array and for the children of every virtual element
  76 | 
  77 | 		//the `cached` data structure is essentially the same as the previous redraw's `data` data structure, with a few additions:
  78 | 		//- `cached` always has a property called `nodes`, which is a list of DOM elements that correspond to the data represented by the respective virtual element
  79 | 		//- in order to support attaching `nodes` as a property of `cached`, `cached` is *always* a non-primitive object, i.e. if the data was a string, then cached is a String instance. If data was `null` or `undefined`, cached is `new String("")`
  80 | 		//- `cached also has a `configContext` property, which is the state storage object exposed by config(element, isInitialized, context)
  81 | 		//- when `cached` is an Object, it represents a virtual element; when it's an Array, it represents a list of elements; when it's a String, Number or Boolean, it represents a text node
  82 | 
  83 | 		//`parentElement` is a DOM element used for W3C DOM API calls
  84 | 		//`parentTag` is only used for handling a corner case for textarea values
  85 | 		//`parentCache` is used to remove nodes in some multi-node cases
  86 | 		//`parentIndex` and `index` are used to figure out the offset of nodes. They're artifacts from before arrays started being flattened and are likely refactorable
  87 | 		//`data` and `cached` are, respectively, the new and old nodes being diffed
  88 | 		//`shouldReattach` is a flag indicating whether a parent node was recreated (if so, and if this node is reused, then this node must reattach itself to the new parent)
  89 | 		//`editable` is a flag that indicates whether an ancestor is contenteditable
  90 | 		//`namespace` indicates the closest HTML namespace as it cascades down from an ancestor
  91 | 		//`configs` is a list of config functions to run after the topmost `build` call finishes running
  92 | 
  93 | 		//there's logic that relies on the assumption that null and undefined data are equivalent to empty strings
  94 | 		//- this prevents lifecycle surprises from procedural helpers that mix implicit and explicit return statements (e.g. function foo() {if (cond) return m("div")}
  95 | 		//- it simplifies diffing code
  96 | 		//data.toString() is null if data is the return value of Console.log in Firefox
  97 | 		if (data == null || data.toString() == null) data = "";
  98 | 		if (data.subtree === "retain") return cached;
  99 | 		var cachedType = type.call(cached), dataType = type.call(data);
 100 | 		if (cached == null || cachedType !== dataType) {
 101 | 			if (cached != null) {
 102 | 				if (parentCache && parentCache.nodes) {
 103 | 					var offset = index - parentIndex;
 104 | 					var end = offset + (dataType === ARRAY ? data : cached.nodes).length;
 105 | 					clear(parentCache.nodes.slice(offset, end), parentCache.slice(offset, end))
 106 | 				}
 107 | 				else if (cached.nodes) clear(cached.nodes, cached)
 108 | 			}
 109 | 			cached = new data.constructor;
 110 | 			if (cached.tag) cached = {}; //if constructor creates a virtual dom element, use a blank object as the base cached node instead of copying the virtual el (#277)
 111 | 			cached.nodes = []
 112 | 		}
 113 | 
 114 | 		if (dataType === ARRAY) {
 115 | 			//recursively flatten array
 116 | 			for (var i = 0, len = data.length; i < len; i++) {
 117 | 				if (type.call(data[i]) === ARRAY) {
 118 | 					data = data.concat.apply([], data);
 119 | 					i-- //check current index again and flatten until there are no more nested arrays at that index
 120 | 				}
 121 | 			}
 122 | 			
 123 | 			var nodes = [], intact = cached.length === data.length, subArrayCount = 0;
 124 | 
 125 | 			//keys algorithm: sort elements without recreating them if keys are present
 126 | 			//1) create a map of all existing keys, and mark all for deletion
 127 | 			//2) add new keys to map and mark them for addition
 128 | 			//3) if key exists in new list, change action from deletion to a move
 129 | 			//4) for each key, handle its corresponding action as marked in previous steps
 130 | 			//5) copy unkeyed items into their respective gaps
 131 | 			var DELETION = 1, INSERTION = 2 , MOVE = 3;
 132 | 			var existing = {}, unkeyed = [], shouldMaintainIdentities = false;
 133 | 			for (var i = 0; i < cached.length; i++) {
 134 | 				if (cached[i] && cached[i].attrs && cached[i].attrs.key != null) {
 135 | 					shouldMaintainIdentities = true;
 136 | 					existing[cached[i].attrs.key] = {action: DELETION, index: i}
 137 | 				}
 138 | 			}
 139 | 			if (shouldMaintainIdentities) {
 140 | 				if (data.indexOf(null) > -1) data = data.filter(function(x) {return x != null})
 141 | 				
 142 | 				var keysDiffer = false
 143 | 				if (data.length != cached.length) keysDiffer = true
 144 | 				else for (var i = 0, cachedCell, dataCell; cachedCell = cached[i], dataCell = data[i]; i++) {
 145 | 					if (cachedCell.attrs && dataCell.attrs && cachedCell.attrs.key != dataCell.attrs.key) {
 146 | 						keysDiffer = true
 147 | 						break
 148 | 					}
 149 | 				}
 150 | 				
 151 | 				if (keysDiffer) {
 152 | 					for (var i = 0, len = data.length; i < len; i++) {
 153 | 						if (data[i] && data[i].attrs) {
 154 | 							if (data[i].attrs.key != null) {
 155 | 								var key = data[i].attrs.key;
 156 | 								if (!existing[key]) existing[key] = {action: INSERTION, index: i};
 157 | 								else existing[key] = {
 158 | 									action: MOVE,
 159 | 									index: i,
 160 | 									from: existing[key].index,
 161 | 									element: cached.nodes[existing[key].index] || $document.createElement("div")
 162 | 								}
 163 | 							}
 164 | 							else unkeyed.push({index: i, element: parentElement.childNodes[i] || $document.createElement("div")})
 165 | 						}
 166 | 					}
 167 | 					var actions = []
 168 | 					for (var prop in existing) actions.push(existing[prop])
 169 | 					var changes = actions.sort(sortChanges);
 170 | 					var newCached = new Array(cached.length)
 171 | 
 172 | 					for (var i = 0, change; change = changes[i]; i++) {
 173 | 						if (change.action === DELETION) {
 174 | 							clear(cached[change.index].nodes, cached[change.index]);
 175 | 							newCached.splice(change.index, 1)
 176 | 						}
 177 | 						if (change.action === INSERTION) {
 178 | 							var dummy = $document.createElement("div");
 179 | 							dummy.key = data[change.index].attrs.key;
 180 | 							parentElement.insertBefore(dummy, parentElement.childNodes[change.index] || null);
 181 | 							newCached.splice(change.index, 0, {attrs: {key: data[change.index].attrs.key}, nodes: [dummy]})
 182 | 						}
 183 | 
 184 | 						if (change.action === MOVE) {
 185 | 							if (parentElement.childNodes[change.index] !== change.element && change.element !== null) {
 186 | 								parentElement.insertBefore(change.element, parentElement.childNodes[change.index] || null)
 187 | 							}
 188 | 							newCached[change.index] = cached[change.from]
 189 | 						}
 190 | 					}
 191 | 					for (var i = 0, len = unkeyed.length; i < len; i++) {
 192 | 						var change = unkeyed[i];
 193 | 						parentElement.insertBefore(change.element, parentElement.childNodes[change.index] || null);
 194 | 						newCached[change.index] = cached[change.index]
 195 | 					}
 196 | 					cached = newCached;
 197 | 					cached.nodes = new Array(parentElement.childNodes.length);
 198 | 					for (var i = 0, child; child = parentElement.childNodes[i]; i++) cached.nodes[i] = child
 199 | 				}
 200 | 			}
 201 | 			//end key algorithm
 202 | 
 203 | 			for (var i = 0, cacheCount = 0, len = data.length; i < len; i++) {
 204 | 				//diff each item in the array
 205 | 				var item = build(parentElement, parentTag, cached, index, data[i], cached[cacheCount], shouldReattach, index + subArrayCount || subArrayCount, editable, namespace, configs);
 206 | 				if (item === undefined) continue;
 207 | 				if (!item.nodes.intact) intact = false;
 208 | 				if (item.$trusted) {
 209 | 					//fix offset of next element if item was a trusted string w/ more than one html element
 210 | 					//the first clause in the regexp matches elements
 211 | 					//the second clause (after the pipe) matches text nodes
 212 | 					subArrayCount += (item.match(/<[^\/]|\>\s*[^<]/g) || []).length
 213 | 				}
 214 | 				else subArrayCount += type.call(item) === ARRAY ? item.length : 1;
 215 | 				cached[cacheCount++] = item
 216 | 			}
 217 | 			if (!intact) {
 218 | 				//diff the array itself
 219 | 				
 220 | 				//update the list of DOM nodes by collecting the nodes from each item
 221 | 				for (var i = 0, len = data.length; i < len; i++) {
 222 | 					if (cached[i] != null) nodes.push.apply(nodes, cached[i].nodes)
 223 | 				}
 224 | 				//remove items from the end of the array if the new array is shorter than the old one
 225 | 				//if errors ever happen here, the issue is most likely a bug in the construction of the `cached` data structure somewhere earlier in the program
 226 | 				for (var i = 0, node; node = cached.nodes[i]; i++) {
 227 | 					if (node.parentNode != null && nodes.indexOf(node) < 0) clear([node], [cached[i]])
 228 | 				}
 229 | 				if (data.length < cached.length) cached.length = data.length;
 230 | 				cached.nodes = nodes
 231 | 			}
 232 | 		}
 233 | 		else if (data != null && dataType === OBJECT) {
 234 | 			if (!data.attrs) data.attrs = {};
 235 | 			if (!cached.attrs) cached.attrs = {};
 236 | 
 237 | 			var dataAttrKeys = Object.keys(data.attrs)
 238 | 			var hasKeys = dataAttrKeys.length > ("key" in data.attrs ? 1 : 0)
 239 | 			//if an element is different enough from the one in cache, recreate it
 240 | 			if (data.tag != cached.tag || dataAttrKeys.join() != Object.keys(cached.attrs).join() || data.attrs.id != cached.attrs.id) {
 241 | 				if (cached.nodes.length) clear(cached.nodes);
 242 | 				if (cached.configContext && typeof cached.configContext.onunload === FUNCTION) cached.configContext.onunload()
 243 | 			}
 244 | 			if (type.call(data.tag) != STRING) return;
 245 | 
 246 | 			var node, isNew = cached.nodes.length === 0;
 247 | 			if (data.attrs.xmlns) namespace = data.attrs.xmlns;
 248 | 			else if (data.tag === "svg") namespace = "http://www.w3.org/2000/svg";
 249 | 			else if (data.tag === "math") namespace = "http://www.w3.org/1998/Math/MathML";
 250 | 			if (isNew) {
 251 | 				if (data.attrs.is) node = namespace === undefined ? $document.createElement(data.tag, data.attrs.is) : $document.createElementNS(namespace, data.tag, data.attrs.is);
 252 | 				else node = namespace === undefined ? $document.createElement(data.tag) : $document.createElementNS(namespace, data.tag);
 253 | 				cached = {
 254 | 					tag: data.tag,
 255 | 					//set attributes first, then create children
 256 | 					attrs: hasKeys ? setAttributes(node, data.tag, data.attrs, {}, namespace) : data.attrs,
 257 | 					children: data.children != null && data.children.length > 0 ?
 258 | 						build(node, data.tag, undefined, undefined, data.children, cached.children, true, 0, data.attrs.contenteditable ? node : editable, namespace, configs) :
 259 | 						data.children,
 260 | 					nodes: [node]
 261 | 				};
 262 | 				if (cached.children && !cached.children.nodes) cached.children.nodes = [];
 263 | 				//edge case: setting value on <select> doesn't work before children exist, so set it again after children have been created
 264 | 				if (data.tag === "select" && data.attrs.value) setAttributes(node, data.tag, {value: data.attrs.value}, {}, namespace);
 265 | 				parentElement.insertBefore(node, parentElement.childNodes[index] || null)
 266 | 			}
 267 | 			else {
 268 | 				node = cached.nodes[0];
 269 | 				if (hasKeys) setAttributes(node, data.tag, data.attrs, cached.attrs, namespace);
 270 | 				cached.children = build(node, data.tag, undefined, undefined, data.children, cached.children, false, 0, data.attrs.contenteditable ? node : editable, namespace, configs);
 271 | 				cached.nodes.intact = true;
 272 | 				if (shouldReattach === true && node != null) parentElement.insertBefore(node, parentElement.childNodes[index] || null)
 273 | 			}
 274 | 			//schedule configs to be called. They are called after `build` finishes running
 275 | 			if (typeof data.attrs["config"] === FUNCTION) {
 276 | 				var context = cached.configContext = cached.configContext || {};
 277 | 
 278 | 				// bind
 279 | 				var callback = function(data, args) {
 280 | 					return function() {
 281 | 						return data.attrs["config"].apply(data, args)
 282 | 					}
 283 | 				};
 284 | 				configs.push(callback(data, [node, !isNew, context, cached]))
 285 | 			}
 286 | 		}
 287 | 		else if (typeof dataType != FUNCTION) {
 288 | 			//handle text nodes
 289 | 			var nodes;
 290 | 			if (cached.nodes.length === 0) {
 291 | 				if (data.$trusted) {
 292 | 					nodes = injectHTML(parentElement, index, data)
 293 | 				}
 294 | 				else {
 295 | 					nodes = [$document.createTextNode(data)];
 296 | 					if (!parentElement.nodeName.match(voidElements)) parentElement.insertBefore(nodes[0], parentElement.childNodes[index] || null)
 297 | 				}
 298 | 				cached = "string number boolean".indexOf(typeof data) > -1 ? new data.constructor(data) : data;
 299 | 				cached.nodes = nodes
 300 | 			}
 301 | 			else if (cached.valueOf() !== data.valueOf() || shouldReattach === true) {
 302 | 				nodes = cached.nodes;
 303 | 				if (!editable || editable !== $document.activeElement) {
 304 | 					if (data.$trusted) {
 305 | 						clear(nodes, cached);
 306 | 						nodes = injectHTML(parentElement, index, data)
 307 | 					}
 308 | 					else {
 309 | 						//corner case: replacing the nodeValue of a text node that is a child of a textarea/contenteditable doesn't work
 310 | 						//we need to update the value property of the parent textarea or the innerHTML of the contenteditable element instead
 311 | 						if (parentTag === "textarea") parentElement.value = data;
 312 | 						else if (editable) editable.innerHTML = data;
 313 | 						else {
 314 | 							if (nodes[0].nodeType === 1 || nodes.length > 1) { //was a trusted string
 315 | 								clear(cached.nodes, cached);
 316 | 								nodes = [$document.createTextNode(data)]
 317 | 							}
 318 | 							parentElement.insertBefore(nodes[0], parentElement.childNodes[index] || null);
 319 | 							nodes[0].nodeValue = data
 320 | 						}
 321 | 					}
 322 | 				}
 323 | 				cached = new data.constructor(data);
 324 | 				cached.nodes = nodes
 325 | 			}
 326 | 			else cached.nodes.intact = true
 327 | 		}
 328 | 
 329 | 		return cached
 330 | 	}
 331 | 	function sortChanges(a, b) {return a.action - b.action || a.index - b.index}
 332 | 	function setAttributes(node, tag, dataAttrs, cachedAttrs, namespace) {
 333 | 		for (var attrName in dataAttrs) {
 334 | 			var dataAttr = dataAttrs[attrName];
 335 | 			var cachedAttr = cachedAttrs[attrName];
 336 | 			if (!(attrName in cachedAttrs) || (cachedAttr !== dataAttr)) {
 337 | 				cachedAttrs[attrName] = dataAttr;
 338 | 				try {
 339 | 					//`config` isn't a real attributes, so ignore it
 340 | 					if (attrName === "config" || attrName == "key") continue;
 341 | 					//hook event handlers to the auto-redrawing system
 342 | 					else if (typeof dataAttr === FUNCTION && attrName.indexOf("on") === 0) {
 343 | 						node[attrName] = autoredraw(dataAttr, node)
 344 | 					}
 345 | 					//handle `style: {...}`
 346 | 					else if (attrName === "style" && dataAttr != null && type.call(dataAttr) === OBJECT) {
 347 | 						for (var rule in dataAttr) {
 348 | 							if (cachedAttr == null || cachedAttr[rule] !== dataAttr[rule]) node.style[rule] = dataAttr[rule]
 349 | 						}
 350 | 						for (var rule in cachedAttr) {
 351 | 							if (!(rule in dataAttr)) node.style[rule] = ""
 352 | 						}
 353 | 					}
 354 | 					//handle SVG
 355 | 					else if (namespace != null) {
 356 | 						if (attrName === "href") node.setAttributeNS("http://www.w3.org/1999/xlink", "href", dataAttr);
 357 | 						else if (attrName === "className") node.setAttribute("class", dataAttr);
 358 | 						else node.setAttribute(attrName, dataAttr)
 359 | 					}
 360 | 					//handle cases that are properties (but ignore cases where we should use setAttribute instead)
 361 | 					//- list and form are typically used as strings, but are DOM element references in js
 362 | 					//- when using CSS selectors (e.g. `m("[style='']")`), style is used as a string, but it's an object in js
 363 | 					else if (attrName in node && !(attrName === "list" || attrName === "style" || attrName === "form" || attrName === "type")) {
 364 | 						//#348 don't set the value if not needed otherwise cursor placement breaks in Chrome
 365 | 						if (tag !== "input" || node[attrName] !== dataAttr) node[attrName] = dataAttr
 366 | 					}
 367 | 					else node.setAttribute(attrName, dataAttr)
 368 | 				}
 369 | 				catch (e) {
 370 | 					//swallow IE's invalid argument errors to mimic HTML's fallback-to-doing-nothing-on-invalid-attributes behavior
 371 | 					if (e.message.indexOf("Invalid argument") < 0) throw e
 372 | 				}
 373 | 			}
 374 | 			//#348 dataAttr may not be a string, so use loose comparison (double equal) instead of strict (triple equal)
 375 | 			else if (attrName === "value" && tag === "input" && node.value != dataAttr) {
 376 | 				node.value = dataAttr
 377 | 			}
 378 | 		}
 379 | 		return cachedAttrs
 380 | 	}
 381 | 	function clear(nodes, cached) {
 382 | 		for (var i = nodes.length - 1; i > -1; i--) {
 383 | 			if (nodes[i] && nodes[i].parentNode) {
 384 | 				try {nodes[i].parentNode.removeChild(nodes[i])}
 385 | 				catch (e) {} //ignore if this fails due to order of events (see http://stackoverflow.com/questions/21926083/failed-to-execute-removechild-on-node)
 386 | 				cached = [].concat(cached);
 387 | 				if (cached[i]) unload(cached[i])
 388 | 			}
 389 | 		}
 390 | 		if (nodes.length != 0) nodes.length = 0
 391 | 	}
 392 | 	function unload(cached) {
 393 | 		if (cached.configContext && typeof cached.configContext.onunload === FUNCTION) cached.configContext.onunload();
 394 | 		if (cached.children) {
 395 | 			if (type.call(cached.children) === ARRAY) {
 396 | 				for (var i = 0, child; child = cached.children[i]; i++) unload(child)
 397 | 			}
 398 | 			else if (cached.children.tag) unload(cached.children)
 399 | 		}
 400 | 	}
 401 | 	function injectHTML(parentElement, index, data) {
 402 | 		var nextSibling = parentElement.childNodes[index];
 403 | 		if (nextSibling) {
 404 | 			var isElement = nextSibling.nodeType != 1;
 405 | 			var placeholder = $document.createElement("span");
 406 | 			if (isElement) {
 407 | 				parentElement.insertBefore(placeholder, nextSibling || null);
 408 | 				placeholder.insertAdjacentHTML("beforebegin", data);
 409 | 				parentElement.removeChild(placeholder)
 410 | 			}
 411 | 			else nextSibling.insertAdjacentHTML("beforebegin", data)
 412 | 		}
 413 | 		else parentElement.insertAdjacentHTML("beforeend", data);
 414 | 		var nodes = [];
 415 | 		while (parentElement.childNodes[index] !== nextSibling) {
 416 | 			nodes.push(parentElement.childNodes[index]);
 417 | 			index++
 418 | 		}
 419 | 		return nodes
 420 | 	}
 421 | 	function autoredraw(callback, object) {
 422 | 		return function(e) {
 423 | 			e = e || event;
 424 | 			m.redraw.strategy("diff");
 425 | 			m.startComputation();
 426 | 			try {return callback.call(object, e)}
 427 | 			finally {
 428 | 				endFirstComputation()
 429 | 			}
 430 | 		}
 431 | 	}
 432 | 
 433 | 	var html;
 434 | 	var documentNode = {
 435 | 		appendChild: function(node) {
 436 | 			if (html === undefined) html = $document.createElement("html");
 437 | 			if ($document.documentElement && $document.documentElement !== node) {
 438 | 				$document.replaceChild(node, $document.documentElement)
 439 | 			}
 440 | 			else $document.appendChild(node);
 441 | 			this.childNodes = $document.childNodes
 442 | 		},
 443 | 		insertBefore: function(node) {
 444 | 			this.appendChild(node)
 445 | 		},
 446 | 		childNodes: []
 447 | 	};
 448 | 	var nodeCache = [], cellCache = {};
 449 | 	m.render = function(root, cell, forceRecreation) {
 450 | 		var configs = [];
 451 | 		if (!root) throw new Error("Please ensure the DOM element exists before rendering a template into it.");
 452 | 		var id = getCellCacheKey(root);
 453 | 		var isDocumentRoot = root === $document;
 454 | 		var node = isDocumentRoot || root === $document.documentElement ? documentNode : root;
 455 | 		if (isDocumentRoot && cell.tag != "html") cell = {tag: "html", attrs: {}, children: cell};
 456 | 		if (cellCache[id] === undefined) clear(node.childNodes);
 457 | 		if (forceRecreation === true) reset(root);
 458 | 		cellCache[id] = build(node, null, undefined, undefined, cell, cellCache[id], false, 0, null, undefined, configs);
 459 | 		for (var i = 0, len = configs.length; i < len; i++) configs[i]()
 460 | 	};
 461 | 	function getCellCacheKey(element) {
 462 | 		var index = nodeCache.indexOf(element);
 463 | 		return index < 0 ? nodeCache.push(element) - 1 : index
 464 | 	}
 465 | 
 466 | 	m.trust = function(value) {
 467 | 		value = new String(value);
 468 | 		value.$trusted = true;
 469 | 		return value
 470 | 	};
 471 | 
 472 | 	function gettersetter(store) {
 473 | 		var prop = function() {
 474 | 			if (arguments.length) store = arguments[0];
 475 | 			return store
 476 | 		};
 477 | 
 478 | 		prop.toJSON = function() {
 479 | 			return store
 480 | 		};
 481 | 
 482 | 		return prop
 483 | 	}
 484 | 
 485 | 	m.prop = function (store) {
 486 | 		//note: using non-strict equality check here because we're checking if store is null OR undefined
 487 | 		if (((store != null && type.call(store) === OBJECT) || typeof store === FUNCTION) && typeof store.then === FUNCTION) {
 488 | 			return propify(store)
 489 | 		}
 490 | 
 491 | 		return gettersetter(store)
 492 | 	};
 493 | 
 494 | 	var roots = [], modules = [], controllers = [], lastRedrawId = null, lastRedrawCallTime = 0, computePostRedrawHook = null, prevented = false, topModule;
 495 | 	var FRAME_BUDGET = 16; //60 frames per second = 1 call per 16 ms
 496 | 	m.module = function(root, module) {
 497 | 		if (!root) throw new Error("Please ensure the DOM element exists before rendering a template into it.");
 498 | 		var index = roots.indexOf(root);
 499 | 		if (index < 0) index = roots.length;
 500 | 		var isPrevented = false;
 501 | 		if (controllers[index] && typeof controllers[index].onunload === FUNCTION) {
 502 | 			var event = {
 503 | 				preventDefault: function() {isPrevented = true}
 504 | 			};
 505 | 			controllers[index].onunload(event)
 506 | 		}
 507 | 		if (!isPrevented) {
 508 | 			m.redraw.strategy("all");
 509 | 			m.startComputation();
 510 | 			roots[index] = root;
 511 | 			var currentModule = topModule = module = module || {};
 512 | 			var controller = new (module.controller || function() {});
 513 | 			//controllers may call m.module recursively (via m.route redirects, for example)
 514 | 			//this conditional ensures only the last recursive m.module call is applied
 515 | 			if (currentModule === topModule) {
 516 | 				controllers[index] = controller;
 517 | 				modules[index] = module
 518 | 			}
 519 | 			endFirstComputation();
 520 | 			return controllers[index]
 521 | 		}
 522 | 	};
 523 | 	m.redraw = function(force) {
 524 | 		//lastRedrawId is a positive number if a second redraw is requested before the next animation frame
 525 | 		//lastRedrawID is null if it's the first redraw and not an event handler
 526 | 		if (lastRedrawId && force !== true) {
 527 | 			//when setTimeout: only reschedule redraw if time between now and previous redraw is bigger than a frame, otherwise keep currently scheduled timeout
 528 | 			//when rAF: always reschedule redraw
 529 | 			if (new Date - lastRedrawCallTime > FRAME_BUDGET || $requestAnimationFrame === window.requestAnimationFrame) {
 530 | 				if (lastRedrawId > 0) $cancelAnimationFrame(lastRedrawId);
 531 | 				lastRedrawId = $requestAnimationFrame(redraw, FRAME_BUDGET)
 532 | 			}
 533 | 		}
 534 | 		else {
 535 | 			redraw();
 536 | 			lastRedrawId = $requestAnimationFrame(function() {lastRedrawId = null}, FRAME_BUDGET)
 537 | 		}
 538 | 	};
 539 | 	m.redraw.strategy = m.prop();
 540 | 	var blank = function() {return ""}
 541 | 	function redraw() {
 542 | 		var forceRedraw = m.redraw.strategy() === "all";
 543 | 		for (var i = 0, root; root = roots[i]; i++) {
 544 | 			if (controllers[i]) {
 545 | 				m.render(root, modules[i].view ? modules[i].view(controllers[i]) : blank(), forceRedraw)
 546 | 			}
 547 | 		}
 548 | 		//after rendering within a routed context, we need to scroll back to the top, and fetch the document title for history.pushState
 549 | 		if (computePostRedrawHook) {
 550 | 			computePostRedrawHook();
 551 | 			computePostRedrawHook = null
 552 | 		}
 553 | 		lastRedrawId = null;
 554 | 		lastRedrawCallTime = new Date;
 555 | 		m.redraw.strategy("diff")
 556 | 	}
 557 | 
 558 | 	var pendingRequests = 0;
 559 | 	m.startComputation = function() {pendingRequests++};
 560 | 	m.endComputation = function() {
 561 | 		pendingRequests = Math.max(pendingRequests - 1, 0);
 562 | 		if (pendingRequests === 0) m.redraw()
 563 | 	};
 564 | 	var endFirstComputation = function() {
 565 | 		if (m.redraw.strategy() == "none") {
 566 | 			pendingRequests--
 567 | 			m.redraw.strategy("diff")
 568 | 		}
 569 | 		else m.endComputation();
 570 | 	}
 571 | 
 572 | 	m.withAttr = function(prop, withAttrCallback) {
 573 | 		return function(e) {
 574 | 			e = e || event;
 575 | 			var currentTarget = e.currentTarget || this;
 576 | 			withAttrCallback(prop in currentTarget ? currentTarget[prop] : currentTarget.getAttribute(prop))
 577 | 		}
 578 | 	};
 579 | 
 580 | 	//routing
 581 | 	var modes = {pathname: "", hash: "#", search: "?"};
 582 | 	var redirect = function() {}, routeParams, currentRoute;
 583 | 	m.route = function() {
 584 | 		//m.route()
 585 | 		if (arguments.length === 0) return currentRoute;
 586 | 		//m.route(el, defaultRoute, routes)
 587 | 		else if (arguments.length === 3 && type.call(arguments[1]) === STRING) {
 588 | 			var root = arguments[0], defaultRoute = arguments[1], router = arguments[2];
 589 | 			redirect = function(source) {
 590 | 				var path = currentRoute = normalizeRoute(source);
 591 | 				if (!routeByValue(root, router, path)) {
 592 | 					m.route(defaultRoute, true)
 593 | 				}
 594 | 			};
 595 | 			var listener = m.route.mode === "hash" ? "onhashchange" : "onpopstate";
 596 | 			window[listener] = function() {
 597 | 				var path = $location[m.route.mode]
 598 | 				if (m.route.mode === "pathname") path += $location.search
 599 | 				if (currentRoute != normalizeRoute(path)) {
 600 | 					redirect(path)
 601 | 				}
 602 | 			};
 603 | 			computePostRedrawHook = setScroll;
 604 | 			window[listener]()
 605 | 		}
 606 | 		//config: m.route
 607 | 		else if (arguments[0].addEventListener) {
 608 | 			var element = arguments[0];
 609 | 			var isInitialized = arguments[1];
 610 | 			var context = arguments[2];
 611 | 			element.href = (m.route.mode !== 'pathname' ? $location.pathname : '') + modes[m.route.mode] + this.attrs.href;
 612 | 			element.removeEventListener("click", routeUnobtrusive);
 613 | 			element.addEventListener("click", routeUnobtrusive)
 614 | 		}
 615 | 		//m.route(route, params)
 616 | 		else if (type.call(arguments[0]) === STRING) {
 617 | 			var oldRoute = currentRoute;
 618 | 			currentRoute = arguments[0];
 619 | 			var args = arguments[1] || {}
 620 | 			var queryIndex = currentRoute.indexOf("?")
 621 | 			var params = queryIndex > -1 ? parseQueryString(currentRoute.slice(queryIndex + 1)) : {}
 622 | 			for (var i in args) params[i] = args[i]
 623 | 			var querystring = buildQueryString(params)
 624 | 			var currentPath = queryIndex > -1 ? currentRoute.slice(0, queryIndex) : currentRoute
 625 | 			if (querystring) currentRoute = currentPath + (currentPath.indexOf("?") === -1 ? "?" : "&") + querystring;
 626 | 
 627 | 			var shouldReplaceHistoryEntry = (arguments.length === 3 ? arguments[2] : arguments[1]) === true || oldRoute === arguments[0];
 628 | 
 629 | 			if (window.history.pushState) {
 630 | 				computePostRedrawHook = function() {
 631 | 					window.history[shouldReplaceHistoryEntry ? "replaceState" : "pushState"](null, $document.title, modes[m.route.mode] + currentRoute);
 632 | 					setScroll()
 633 | 				};
 634 | 				redirect(modes[m.route.mode] + currentRoute)
 635 | 			}
 636 | 			else $location[m.route.mode] = currentRoute
 637 | 		}
 638 | 	};
 639 | 	m.route.param = function(key) {
 640 | 		if (!routeParams) throw new Error("You must call m.route(element, defaultRoute, routes) before calling m.route.param()")
 641 | 		return routeParams[key]
 642 | 	};
 643 | 	m.route.mode = "search";
 644 | 	function normalizeRoute(route) {
 645 | 		return route.slice(modes[m.route.mode].length)
 646 | 	}
 647 | 	function routeByValue(root, router, path) {
 648 | 		routeParams = {};
 649 | 
 650 | 		var queryStart = path.indexOf("?");
 651 | 		if (queryStart !== -1) {
 652 | 			routeParams = parseQueryString(path.substr(queryStart + 1, path.length));
 653 | 			path = path.substr(0, queryStart)
 654 | 		}
 655 | 
 656 | 		for (var route in router) {
 657 | 			if (route === path) {
 658 | 				m.module(root, router[route]);
 659 | 				return true
 660 | 			}
 661 | 
 662 | 			var matcher = new RegExp("^" + route.replace(/:[^\/]+?\.{3}/g, "(.*?)").replace(/:[^\/]+/g, "([^\\/]+)") + "\/?$");
 663 | 
 664 | 			if (matcher.test(path)) {
 665 | 				path.replace(matcher, function() {
 666 | 					var keys = route.match(/:[^\/]+/g) || [];
 667 | 					var values = [].slice.call(arguments, 1, -2);
 668 | 					for (var i = 0, len = keys.length; i < len; i++) routeParams[keys[i].replace(/:|\./g, "")] = decodeURIComponent(values[i])
 669 | 					m.module(root, router[route])
 670 | 				});
 671 | 				return true
 672 | 			}
 673 | 		}
 674 | 	}
 675 | 	function routeUnobtrusive(e) {
 676 | 		e = e || event;
 677 | 		if (e.ctrlKey || e.metaKey || e.which === 2) return;
 678 | 		if (e.preventDefault) e.preventDefault();
 679 | 		else e.returnValue = false;
 680 | 		var currentTarget = e.currentTarget || this;
 681 | 		var args = m.route.mode === "pathname" && currentTarget.search ? parseQueryString(currentTarget.search.slice(1)) : {};
 682 | 		m.route(currentTarget[m.route.mode].slice(modes[m.route.mode].length), args)
 683 | 	}
 684 | 	function setScroll() {
 685 | 		if (m.route.mode != "hash" && $location.hash) $location.hash = $location.hash;
 686 | 		else window.scrollTo(0, 0)
 687 | 	}
 688 | 	function buildQueryString(object, prefix) {
 689 | 		var str = [];
 690 | 		for(var prop in object) {
 691 | 			var key = prefix ? prefix + "[" + prop + "]" : prop, value = object[prop];
 692 | 			var valueType = type.call(value)
 693 | 			var pair = value != null && (valueType === OBJECT) ?
 694 | 				buildQueryString(value, key) :
 695 | 				valueType === ARRAY ?
 696 | 					value.map(function(item) {return encodeURIComponent(key + "[]") + "=" + encodeURIComponent(item)}).join("&") :
 697 | 					encodeURIComponent(key) + "=" + encodeURIComponent(value)
 698 | 			str.push(pair)
 699 | 		}
 700 | 		return str.join("&")
 701 | 	}
 702 | 	
 703 | 	function parseQueryString(str) {
 704 | 		var pairs = str.split("&"), params = {};
 705 | 		for (var i = 0, len = pairs.length; i < len; i++) {
 706 | 			var pair = pairs[i].split("=");
 707 | 			params[decodeURIComponent(pair[0])] = pair[1] ? decodeURIComponent(pair[1]) : ""
 708 | 		}
 709 | 		return params
 710 | 	}
 711 | 	function reset(root) {
 712 | 		var cacheKey = getCellCacheKey(root);
 713 | 		clear(root.childNodes, cellCache[cacheKey]);
 714 | 		cellCache[cacheKey] = undefined
 715 | 	}
 716 | 
 717 | 	m.deferred = function () {
 718 | 		var deferred = new Deferred();
 719 | 		deferred.promise = propify(deferred.promise);
 720 | 		return deferred
 721 | 	};
 722 | 	function propify(promise) {
 723 | 		var prop = m.prop();
 724 | 		promise.then(prop);
 725 | 		prop.then = function(resolve, reject) {
 726 | 			return propify(promise.then(resolve, reject))
 727 | 		};
 728 | 		return prop
 729 | 	}
 730 | 	//Promiz.mithril.js | Zolmeister | MIT
 731 | 	//a modified version of Promiz.js, which does not conform to Promises/A+ for two reasons:
 732 | 	//1) `then` callbacks are called synchronously (because setTimeout is too slow, and the setImmediate polyfill is too big
 733 | 	//2) throwing subclasses of Error cause the error to be bubbled up instead of triggering rejection (because the spec does not account for the important use case of default browser error handling, i.e. message w/ line number)
 734 | 	function Deferred(successCallback, failureCallback) {
 735 | 		var RESOLVING = 1, REJECTING = 2, RESOLVED = 3, REJECTED = 4;
 736 | 		var self = this, state = 0, promiseValue = 0, next = [];
 737 | 
 738 | 		self["promise"] = {};
 739 | 
 740 | 		self["resolve"] = function(value) {
 741 | 			if (!state) {
 742 | 				promiseValue = value;
 743 | 				state = RESOLVING;
 744 | 
 745 | 				fire()
 746 | 			}
 747 | 			return this
 748 | 		};
 749 | 
 750 | 		self["reject"] = function(value) {
 751 | 			if (!state) {
 752 | 				promiseValue = value;
 753 | 				state = REJECTING;
 754 | 
 755 | 				fire()
 756 | 			}
 757 | 			return this
 758 | 		};
 759 | 
 760 | 		self.promise["then"] = function(successCallback, failureCallback) {
 761 | 			var deferred = new Deferred(successCallback, failureCallback);
 762 | 			if (state === RESOLVED) {
 763 | 				deferred.resolve(promiseValue)
 764 | 			}
 765 | 			else if (state === REJECTED) {
 766 | 				deferred.reject(promiseValue)
 767 | 			}
 768 | 			else {
 769 | 				next.push(deferred)
 770 | 			}
 771 | 			return deferred.promise
 772 | 		};
 773 | 
 774 | 		function finish(type) {
 775 | 			state = type || REJECTED;
 776 | 			next.map(function(deferred) {
 777 | 				state === RESOLVED && deferred.resolve(promiseValue) || deferred.reject(promiseValue)
 778 | 			})
 779 | 		}
 780 | 
 781 | 		function thennable(then, successCallback, failureCallback, notThennableCallback) {
 782 | 			if (((promiseValue != null && type.call(promiseValue) === OBJECT) || typeof promiseValue === FUNCTION) && typeof then === FUNCTION) {
 783 | 				try {
 784 | 					// count protects against abuse calls from spec checker
 785 | 					var count = 0;
 786 | 					then.call(promiseValue, function(value) {
 787 | 						if (count++) return;
 788 | 						promiseValue = value;
 789 | 						successCallback()
 790 | 					}, function (value) {
 791 | 						if (count++) return;
 792 | 						promiseValue = value;
 793 | 						failureCallback()
 794 | 					})
 795 | 				}
 796 | 				catch (e) {
 797 | 					m.deferred.onerror(e);
 798 | 					promiseValue = e;
 799 | 					failureCallback()
 800 | 				}
 801 | 			} else {
 802 | 				notThennableCallback()
 803 | 			}
 804 | 		}
 805 | 
 806 | 		function fire() {
 807 | 			// check if it's a thenable
 808 | 			var then;
 809 | 			try {
 810 | 				then = promiseValue && promiseValue.then
 811 | 			}
 812 | 			catch (e) {
 813 | 				m.deferred.onerror(e);
 814 | 				promiseValue = e;
 815 | 				state = REJECTING;
 816 | 				return fire()
 817 | 			}
 818 | 			thennable(then, function() {
 819 | 				state = RESOLVING;
 820 | 				fire()
 821 | 			}, function() {
 822 | 				state = REJECTING;
 823 | 				fire()
 824 | 			}, function() {
 825 | 				try {
 826 | 					if (state === RESOLVING && typeof successCallback === FUNCTION) {
 827 | 						promiseValue = successCallback(promiseValue)
 828 | 					}
 829 | 					else if (state === REJECTING && typeof failureCallback === "function") {
 830 | 						promiseValue = failureCallback(promiseValue);
 831 | 						state = RESOLVING
 832 | 					}
 833 | 				}
 834 | 				catch (e) {
 835 | 					m.deferred.onerror(e);
 836 | 					promiseValue = e;
 837 | 					return finish()
 838 | 				}
 839 | 
 840 | 				if (promiseValue === self) {
 841 | 					promiseValue = TypeError();
 842 | 					finish()
 843 | 				}
 844 | 				else {
 845 | 					thennable(then, function () {
 846 | 						finish(RESOLVED)
 847 | 					}, finish, function () {
 848 | 						finish(state === RESOLVING && RESOLVED)
 849 | 					})
 850 | 				}
 851 | 			})
 852 | 		}
 853 | 	}
 854 | 	m.deferred.onerror = function(e) {
 855 | 		if (type.call(e) === "[object Error]" && !e.constructor.toString().match(/ Error/)) throw e
 856 | 	};
 857 | 
 858 | 	m.sync = function(args) {
 859 | 		var method = "resolve";
 860 | 		function synchronizer(pos, resolved) {
 861 | 			return function(value) {
 862 | 				results[pos] = value;
 863 | 				if (!resolved) method = "reject";
 864 | 				if (--outstanding === 0) {
 865 | 					deferred.promise(results);
 866 | 					deferred[method](results)
 867 | 				}
 868 | 				return value
 869 | 			}
 870 | 		}
 871 | 
 872 | 		var deferred = m.deferred();
 873 | 		var outstanding = args.length;
 874 | 		var results = new Array(outstanding);
 875 | 		if (args.length > 0) {
 876 | 			for (var i = 0; i < args.length; i++) {
 877 | 				args[i].then(synchronizer(i, true), synchronizer(i, false))
 878 | 			}
 879 | 		}
 880 | 		else deferred.resolve([]);
 881 | 
 882 | 		return deferred.promise
 883 | 	};
 884 | 	function identity(value) {return value}
 885 | 
 886 | 	function ajax(options) {
 887 | 		if (options.dataType && options.dataType.toLowerCase() === "jsonp") {
 888 | 			var callbackKey = "mithril_callback_" + new Date().getTime() + "_" + (Math.round(Math.random() * 1e16)).toString(36);
 889 | 			var script = $document.createElement("script");
 890 | 
 891 | 			window[callbackKey] = function(resp) {
 892 | 				script.parentNode.removeChild(script);
 893 | 				options.onload({
 894 | 					type: "load",
 895 | 					target: {
 896 | 						responseText: resp
 897 | 					}
 898 | 				});
 899 | 				window[callbackKey] = undefined
 900 | 			};
 901 | 
 902 | 			script.onerror = function(e) {
 903 | 				script.parentNode.removeChild(script);
 904 | 
 905 | 				options.onerror({
 906 | 					type: "error",
 907 | 					target: {
 908 | 						status: 500,
 909 | 						responseText: JSON.stringify({error: "Error making jsonp request"})
 910 | 					}
 911 | 				});
 912 | 				window[callbackKey] = undefined;
 913 | 
 914 | 				return false
 915 | 			};
 916 | 
 917 | 			script.onload = function(e) {
 918 | 				return false
 919 | 			};
 920 | 
 921 | 			script.src = options.url
 922 | 				+ (options.url.indexOf("?") > 0 ? "&" : "?")
 923 | 				+ (options.callbackKey ? options.callbackKey : "callback")
 924 | 				+ "=" + callbackKey
 925 | 				+ "&" + buildQueryString(options.data || {});
 926 | 			$document.body.appendChild(script)
 927 | 		}
 928 | 		else {
 929 | 			var xhr = new window.XMLHttpRequest;
 930 | 			xhr.open(options.method, options.url, true, options.user, options.password);
 931 | 			xhr.onreadystatechange = function() {
 932 | 				if (xhr.readyState === 4) {
 933 | 					if (xhr.status >= 200 && xhr.status < 300) options.onload({type: "load", target: xhr});
 934 | 					else options.onerror({type: "error", target: xhr})
 935 | 				}
 936 | 			};
 937 | 			if (options.serialize === JSON.stringify && options.data && options.method !== "GET") {
 938 | 				xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8")
 939 | 			}
 940 | 			if (options.deserialize === JSON.parse) {
 941 | 				xhr.setRequestHeader("Accept", "application/json, text/*");
 942 | 			}
 943 | 			if (typeof options.config === FUNCTION) {
 944 | 				var maybeXhr = options.config(xhr, options);
 945 | 				if (maybeXhr != null) xhr = maybeXhr
 946 | 			}
 947 | 
 948 | 			var data = options.method === "GET" || !options.data ? "" : options.data
 949 | 			if (data && (type.call(data) != STRING && data.constructor != window.FormData)) {
 950 | 				throw "Request data should be either be a string or FormData. Check the `serialize` option in `m.request`";
 951 | 			}
 952 | 			xhr.send(data);
 953 | 			return xhr
 954 | 		}
 955 | 	}
 956 | 	function bindData(xhrOptions, data, serialize) {
 957 | 		if (xhrOptions.method === "GET" && xhrOptions.dataType != "jsonp") {
 958 | 			var prefix = xhrOptions.url.indexOf("?") < 0 ? "?" : "&";
 959 | 			var querystring = buildQueryString(data);
 960 | 			xhrOptions.url = xhrOptions.url + (querystring ? prefix + querystring : "")
 961 | 		}
 962 | 		else xhrOptions.data = serialize(data);
 963 | 		return xhrOptions
 964 | 	}
 965 | 	function parameterizeUrl(url, data) {
 966 | 		var tokens = url.match(/:[a-z]\w+/gi);
 967 | 		if (tokens && data) {
 968 | 			for (var i = 0; i < tokens.length; i++) {
 969 | 				var key = tokens[i].slice(1);
 970 | 				url = url.replace(tokens[i], data[key]);
 971 | 				delete data[key]
 972 | 			}
 973 | 		}
 974 | 		return url
 975 | 	}
 976 | 
 977 | 	m.request = function(xhrOptions) {
 978 | 		if (xhrOptions.background !== true) m.startComputation();
 979 | 		var deferred = m.deferred();
 980 | 		var isJSONP = xhrOptions.dataType && xhrOptions.dataType.toLowerCase() === "jsonp";
 981 | 		var serialize = xhrOptions.serialize = isJSONP ? identity : xhrOptions.serialize || JSON.stringify;
 982 | 		var deserialize = xhrOptions.deserialize = isJSONP ? identity : xhrOptions.deserialize || JSON.parse;
 983 | 		var extract = xhrOptions.extract || function(xhr) {
 984 | 			return xhr.responseText.length === 0 && deserialize === JSON.parse ? null : xhr.responseText
 985 | 		};
 986 | 		xhrOptions.url = parameterizeUrl(xhrOptions.url, xhrOptions.data);
 987 | 		xhrOptions = bindData(xhrOptions, xhrOptions.data, serialize);
 988 | 		xhrOptions.onload = xhrOptions.onerror = function(e) {
 989 | 			try {
 990 | 				e = e || event;
 991 | 				var unwrap = (e.type === "load" ? xhrOptions.unwrapSuccess : xhrOptions.unwrapError) || identity;
 992 | 				var response = unwrap(deserialize(extract(e.target, xhrOptions)));
 993 | 				if (e.type === "load") {
 994 | 					if (type.call(response) === ARRAY && xhrOptions.type) {
 995 | 						for (var i = 0; i < response.length; i++) response[i] = new xhrOptions.type(response[i])
 996 | 					}
 997 | 					else if (xhrOptions.type) response = new xhrOptions.type(response)
 998 | 				}
 999 | 				deferred[e.type === "load" ? "resolve" : "reject"](response)
1000 | 			}
1001 | 			catch (e) {
1002 | 				m.deferred.onerror(e);
1003 | 				deferred.reject(e)
1004 | 			}
1005 | 			if (xhrOptions.background !== true) m.endComputation()
1006 | 		};
1007 | 		ajax(xhrOptions);
1008 | 		deferred.promise(xhrOptions.initialValue);
1009 | 		return deferred.promise
1010 | 	};
1011 | 
1012 | 	//testing API
1013 | 	m.deps = function(mock) {
1014 | 		initialize(window = mock || window);
1015 | 		return window;
1016 | 	};
1017 | 	//for internal testing only, do not use `m.deps.factory`
1018 | 	m.deps.factory = app;
1019 | 
1020 | 	return m
1021 | })(typeof window != "undefined" ? window : {});
1022 | 
1023 | if (typeof module != "undefined" && module !== null && module.exports) module.exports = m;
1024 | else if (typeof define === "function" && define.amd) define(function() {return m});
1025 | 


--------------------------------------------------------------------------------
/todomvc/mithril/ext/mithril/mithril.min.js:
--------------------------------------------------------------------------------
1 | /*
2 | Mithril v0.2.0
3 | http://github.com/lhorie/mithril.js
4 | (c) Leo Horie
5 | License: MIT
6 | */
7 | var m=function a(b,c){function d(a){D=a.document,E=a.location,G=a.cancelAnimationFrame||a.clearTimeout,F=a.requestAnimationFrame||a.setTimeout}function e(){var a,b=[].slice.call(arguments),c=!(null==b[1]||L.call(b[1])!==H||"tag"in b[1]||"view"in b[1]||"subtree"in b[1]),d=c?b[1]:{},e="class"in d?"class":"className",f={tag:"div",attrs:{}},g=[];if(L.call(b[0])!=J)throw new Error("selector in m(selector, attrs, children) should be a string");for(;a=M.exec(b[0]);)if(""===a[1]&&a[2])f.tag=a[2];else if("#"===a[1])f.attrs.id=a[2];else if("."===a[1])g.push(a[2]);else if("["===a[3][0]){var h=N.exec(a[3]);f.attrs[h[1]]=h[3]||(h[2]?"":!0)}var i=b.slice(c?2:1);f.children=1===i.length&&L.call(i[0])===I?i[0]:i;for(var j in d)d.hasOwnProperty(j)&&(j===e&&null!=d[j]&&""!==d[j]?(g.push(d[j]),f.attrs[j]=""):f.attrs[j]=d[j]);return g.length>0&&(f.attrs[e]=g.join(" ")),f}function f(a,b,d,j,l,m,n,o,p,q,r){try{(null==l||null==l.toString())&&(l="")}catch(s){l=""}if("retain"===l.subtree)return m;var t=L.call(m),u=L.call(l);if(null==m||t!==u){if(null!=m)if(d&&d.nodes){var v=o-j,w=v+(u===I?l:m.nodes).length;i(d.nodes.slice(v,w),d.slice(v,w))}else m.nodes&&i(m.nodes,m);m=new l.constructor,m.tag&&(m={}),m.nodes=[]}if(u===I){for(var x=0,y=l.length;y>x;x++)L.call(l[x])===I&&(l=l.concat.apply([],l),x--,y=l.length);for(var z=[],A=m.length===l.length,B=0,C=1,E=2,F=3,G={},M=!1,x=0;x<m.length;x++)m[x]&&m[x].attrs&&null!=m[x].attrs.key&&(M=!0,G[m[x].attrs.key]={action:C,index:x});for(var N=0,x=0,y=l.length;y>x;x++)if(l[x]&&l[x].attrs&&null!=l[x].attrs.key){for(var Q=0,y=l.length;y>Q;Q++)l[Q]&&l[Q].attrs&&null==l[Q].attrs.key&&(l[Q].attrs.key="__mithril__"+N++);break}if(M){var R=!1;if(l.length!=m.length)R=!0;else for(var S,T,x=0;S=m[x],T=l[x];x++)if(S.attrs&&T.attrs&&S.attrs.key!=T.attrs.key){R=!0;break}if(R){for(var x=0,y=l.length;y>x;x++)if(l[x]&&l[x].attrs&&null!=l[x].attrs.key){var U=l[x].attrs.key;G[U]=G[U]?{action:F,index:x,from:G[U].index,element:m.nodes[G[U].index]||D.createElement("div")}:{action:E,index:x}}var V=[];for(var W in G)V.push(G[W]);var X=V.sort(g),Y=new Array(m.length);Y.nodes=m.nodes.slice();for(var Z,x=0;Z=X[x];x++){if(Z.action===C&&(i(m[Z.index].nodes,m[Z.index]),Y.splice(Z.index,1)),Z.action===E){var $=D.createElement("div");$.key=l[Z.index].attrs.key,a.insertBefore($,a.childNodes[Z.index]||null),Y.splice(Z.index,0,{attrs:{key:l[Z.index].attrs.key},nodes:[$]}),Y.nodes[Z.index]=$}Z.action===F&&(a.childNodes[Z.index]!==Z.element&&null!==Z.element&&a.insertBefore(Z.element,a.childNodes[Z.index]||null),Y[Z.index]=m[Z.from],Y.nodes[Z.index]=Z.element)}m=Y}}for(var x=0,_=0,y=l.length;y>x;x++){var bb=f(a,b,m,o,l[x],m[_],n,o+B||B,p,q,r);bb!==c&&(bb.nodes.intact||(A=!1),B+=bb.$trusted?(bb.match(/<[^\/]|\>\s*[^<]/g)||[0]).length:L.call(bb)===I?bb.length:1,m[_++]=bb)}if(!A){for(var x=0,y=l.length;y>x;x++)null!=m[x]&&z.push.apply(z,m[x].nodes);for(var cb,x=0;cb=m.nodes[x];x++)null!=cb.parentNode&&z.indexOf(cb)<0&&i([cb],[m[x]]);l.length<m.length&&(m.length=l.length),m.nodes=z}}else if(null!=l&&u===H){for(var eb=[],fb=[];l.view;){var gb=l.view.$original||l.view,hb="diff"==e.redraw.strategy()&&m.views?m.views.indexOf(gb):-1,ib=hb>-1?m.controllers[hb]:new(l.controller||P),U=l&&l.attrs&&l.attrs.key;if(l=0==db||m&&m.controllers&&m.controllers.indexOf(ib)>-1?l.view(ib):{tag:"placeholder"},"retain"===l.subtree)return m;U&&(l.attrs||(l.attrs={}),l.attrs.key=U),ib.onunload&&ab.push({controller:ib,handler:ib.onunload}),eb.push(gb),fb.push(ib)}if(!l.tag&&fb.length)throw new Error("Component template must return a virtual element, not an array, string, etc.");l.attrs||(l.attrs={}),m.attrs||(m.attrs={});var jb=Object.keys(l.attrs),kb=jb.length>("key"in l.attrs?1:0);if((l.tag!=m.tag||jb.sort().join()!=Object.keys(m.attrs).sort().join()||l.attrs.id!=m.attrs.id||l.attrs.key!=m.attrs.key||"all"==e.redraw.strategy()&&(!m.configContext||m.configContext.retain!==!0)||"diff"==e.redraw.strategy()&&m.configContext&&m.configContext.retain===!1)&&(m.nodes.length&&i(m.nodes),m.configContext&&typeof m.configContext.onunload===K&&m.configContext.onunload(),m.controllers))for(var ib,x=0;ib=m.controllers[x];x++)typeof ib.onunload===K&&ib.onunload({preventDefault:P});if(L.call(l.tag)!=J)return;var cb,lb=0===m.nodes.length;if(l.attrs.xmlns?q=l.attrs.xmlns:"svg"===l.tag?q="http://www.w3.org/2000/svg":"math"===l.tag&&(q="http://www.w3.org/1998/Math/MathML"),lb){if(cb=l.attrs.is?q===c?D.createElement(l.tag,l.attrs.is):D.createElementNS(q,l.tag,l.attrs.is):q===c?D.createElement(l.tag):D.createElementNS(q,l.tag),m={tag:l.tag,attrs:kb?h(cb,l.tag,l.attrs,{},q):l.attrs,children:null!=l.children&&l.children.length>0?f(cb,l.tag,c,c,l.children,m.children,!0,0,l.attrs.contenteditable?cb:p,q,r):l.children,nodes:[cb]},fb.length){m.views=eb,m.controllers=fb;for(var ib,x=0;ib=fb[x];x++)if(ib.onunload&&ib.onunload.$old&&(ib.onunload=ib.onunload.$old),db&&ib.onunload){var mb=ib.onunload;ib.onunload=P,ib.onunload.$old=mb}}m.children&&!m.children.nodes&&(m.children.nodes=[]),"select"===l.tag&&"value"in l.attrs&&h(cb,l.tag,{value:l.attrs.value},{},q),a.insertBefore(cb,a.childNodes[o]||null)}else cb=m.nodes[0],kb&&h(cb,l.tag,l.attrs,m.attrs,q),m.children=f(cb,l.tag,c,c,l.children,m.children,!1,0,l.attrs.contenteditable?cb:p,q,r),m.nodes.intact=!0,fb.length&&(m.views=eb,m.controllers=fb),n===!0&&null!=cb&&a.insertBefore(cb,a.childNodes[o]||null);if(typeof l.attrs.config===K){var nb=m.configContext=m.configContext||{},ob=function(a,b){return function(){return a.attrs.config.apply(a,b)}};r.push(ob(l,[cb,!lb,nb,m]))}}else if(typeof l!=K){var z;0===m.nodes.length?(l.$trusted?z=k(a,o,l):(z=[D.createTextNode(l)],a.nodeName.match(O)||a.insertBefore(z[0],a.childNodes[o]||null)),m="string number boolean".indexOf(typeof l)>-1?new l.constructor(l):l,m.nodes=z):m.valueOf()!==l.valueOf()||n===!0?(z=m.nodes,p&&p===D.activeElement||(l.$trusted?(i(z,m),z=k(a,o,l)):"textarea"===b?a.value=l:p?p.innerHTML=l:((1===z[0].nodeType||z.length>1)&&(i(m.nodes,m),z=[D.createTextNode(l)]),a.insertBefore(z[0],a.childNodes[o]||null),z[0].nodeValue=l)),m=new l.constructor(l),m.nodes=z):m.nodes.intact=!0}return m}function g(a,b){return a.action-b.action||a.index-b.index}function h(a,b,c,d,e){for(var f in c){var g=c[f],h=d[f];if(f in d&&h===g)"value"===f&&"input"===b&&a.value!=g&&(a.value=g);else{d[f]=g;try{if("config"===f||"key"==f)continue;if(typeof g===K&&0===f.indexOf("on"))a[f]=l(g,a);else if("style"===f&&null!=g&&L.call(g)===H){for(var i in g)(null==h||h[i]!==g[i])&&(a.style[i]=g[i]);for(var i in h)i in g||(a.style[i]="")}else null!=e?"href"===f?a.setAttributeNS("http://www.w3.org/1999/xlink","href",g):"className"===f?a.setAttribute("class",g):a.setAttribute(f,g):f in a&&"list"!==f&&"style"!==f&&"form"!==f&&"type"!==f&&"width"!==f&&"height"!==f?("input"!==b||a[f]!==g)&&(a[f]=g):a.setAttribute(f,g)}catch(j){if(j.message.indexOf("Invalid argument")<0)throw j}}}return d}function i(a,b){for(var c=a.length-1;c>-1;c--)if(a[c]&&a[c].parentNode){try{a[c].parentNode.removeChild(a[c])}catch(d){}b=[].concat(b),b[c]&&j(b[c])}0!=a.length&&(a.length=0)}function j(a){if(a.configContext&&typeof a.configContext.onunload===K&&(a.configContext.onunload(),a.configContext.onunload=null),a.controllers)for(var b,c=0;b=a.controllers[c];c++)typeof b.onunload===K&&b.onunload({preventDefault:P});if(a.children)if(L.call(a.children)===I)for(var d,c=0;d=a.children[c];c++)j(d);else a.children.tag&&j(a.children)}function k(a,b,c){var d=a.childNodes[b];if(d){var e=1!=d.nodeType,f=D.createElement("span");e?(a.insertBefore(f,d||null),f.insertAdjacentHTML("beforebegin",c),a.removeChild(f)):d.insertAdjacentHTML("beforebegin",c)}else a.insertAdjacentHTML("beforeend",c);for(var g=[];a.childNodes[b]!==d;)g.push(a.childNodes[b]),b++;return g}function l(a,b){return function(c){c=c||event,e.redraw.strategy("diff"),e.startComputation();try{return a.call(b,c)}finally{eb()}}}function m(a){var b=S.indexOf(a);return 0>b?S.push(a)-1:b}function n(a){var b=function(){return arguments.length&&(a=arguments[0]),a};return b.toJSON=function(){return a},b}function o(a,b){var c=function(){return(a.controller||P).apply(this,b)||this},d=function(c){return arguments.length>1&&(b=b.concat([].slice.call(arguments,1))),a.view.apply(a,b?[c].concat(b):[c])};d.$original=a.view;var e={controller:c,view:d};return b[0]&&null!=b[0].key&&(e.attrs={key:b[0].key}),e}function p(){$&&($(),$=null);for(var a,b=0;a=V[b];b++)if(X[b]){var c=W[b].controller&&W[b].controller.$$args?[X[b]].concat(W[b].controller.$$args):[X[b]];e.render(a,W[b].view?W[b].view(X[b],c):"")}_&&(_(),_=null),Y=null,Z=new Date,e.redraw.strategy("diff")}function q(a){return a.slice(hb[e.route.mode].length)}function r(a,b,c){fb={};var d=c.indexOf("?");-1!==d&&(fb=v(c.substr(d+1,c.length)),c=c.substr(0,d));var f=Object.keys(b),g=f.indexOf(c);if(-1!==g)return e.mount(a,b[f[g]]),!0;for(var h in b){if(h===c)return e.mount(a,b[h]),!0;var i=new RegExp("^"+h.replace(/:[^\/]+?\.{3}/g,"(.*?)").replace(/:[^\/]+/g,"([^\\/]+)")+"/?$");if(i.test(c))return c.replace(i,function(){for(var c=h.match(/:[^\/]+/g)||[],d=[].slice.call(arguments,1,-2),f=0,g=c.length;g>f;f++)fb[c[f].replace(/:|\./g,"")]=decodeURIComponent(d[f]);e.mount(a,b[h])}),!0}}function s(a){if(a=a||event,!a.ctrlKey&&!a.metaKey&&2!==a.which){a.preventDefault?a.preventDefault():a.returnValue=!1;for(var b=a.currentTarget||a.srcElement,c="pathname"===e.route.mode&&b.search?v(b.search.slice(1)):{};b&&"A"!=b.nodeName.toUpperCase();)b=b.parentNode;e.route(b[e.route.mode].slice(hb[e.route.mode].length),c)}}function t(){"hash"!=e.route.mode&&E.hash?E.hash=E.hash:b.scrollTo(0,0)}function u(a,b){var d={},e=[];for(var f in a){var g=b?b+"["+f+"]":f,h=a[f],i=L.call(h),j=null===h?encodeURIComponent(g):i===H?u(h,g):i===I?h.reduce(function(a,b){return d[g]||(d[g]={}),d[g][b]?a:(d[g][b]=!0,a.concat(encodeURIComponent(g)+"="+encodeURIComponent(b)))},[]).join("&"):encodeURIComponent(g)+"="+encodeURIComponent(h);h!==c&&e.push(j)}return e.join("&")}function v(a){"?"===a.charAt(0)&&(a=a.substring(1));for(var b=a.split("&"),c={},d=0,e=b.length;e>d;d++){var f=b[d].split("="),g=decodeURIComponent(f[0]),h=2==f.length?decodeURIComponent(f[1]):null;null!=c[g]?(L.call(c[g])!==I&&(c[g]=[c[g]]),c[g].push(h)):c[g]=h}return c}function w(a){var b=m(a);i(a.childNodes,T[b]),T[b]=c}function x(a,b){var c=e.prop(b);return a.then(c),c.then=function(c,d){return x(a.then(c,d),b)},c}function y(a,b){function c(a){l=a||j,n.map(function(a){l===i&&a.resolve(m)||a.reject(m)})}function d(a,b,c,d){if((null!=m&&L.call(m)===H||typeof m===K)&&typeof a===K)try{var f=0;a.call(m,function(a){f++||(m=a,b())},function(a){f++||(m=a,c())})}catch(g){e.deferred.onerror(g),m=g,c()}else d()}function f(){var j;try{j=m&&m.then}catch(n){return e.deferred.onerror(n),m=n,l=h,f()}d(j,function(){l=g,f()},function(){l=h,f()},function(){try{l===g&&typeof a===K?m=a(m):l===h&&"function"==typeof b&&(m=b(m),l=g)}catch(f){return e.deferred.onerror(f),m=f,c()}m===k?(m=TypeError(),c()):d(j,function(){c(i)},c,function(){c(l===g&&i)})})}var g=1,h=2,i=3,j=4,k=this,l=0,m=0,n=[];k.promise={},k.resolve=function(a){return l||(m=a,l=g,f()),this},k.reject=function(a){return l||(m=a,l=h,f()),this},k.promise.then=function(a,b){var c=new y(a,b);return l===i?c.resolve(m):l===j?c.reject(m):n.push(c),c.promise}}function z(a){return a}function A(a){if(!a.dataType||"jsonp"!==a.dataType.toLowerCase()){var d=new b.XMLHttpRequest;if(d.open(a.method,a.url,!0,a.user,a.password),d.onreadystatechange=function(){4===d.readyState&&(d.status>=200&&d.status<300?a.onload({type:"load",target:d}):a.onerror({type:"error",target:d}))},a.serialize===JSON.stringify&&a.data&&"GET"!==a.method&&d.setRequestHeader("Content-Type","application/json; charset=utf-8"),a.deserialize===JSON.parse&&d.setRequestHeader("Accept","application/json, text/*"),typeof a.config===K){var e=a.config(d,a);null!=e&&(d=e)}var f="GET"!==a.method&&a.data?a.data:"";if(f&&L.call(f)!=J&&f.constructor!=b.FormData)throw"Request data should be either be a string or FormData. Check the `serialize` option in `m.request`";return d.send(f),d}var g="mithril_callback_"+(new Date).getTime()+"_"+Math.round(1e16*Math.random()).toString(36),h=D.createElement("script");b[g]=function(d){h.parentNode.removeChild(h),a.onload({type:"load",target:{responseText:d}}),b[g]=c},h.onerror=function(){return h.parentNode.removeChild(h),a.onerror({type:"error",target:{status:500,responseText:JSON.stringify({error:"Error making jsonp request"})}}),b[g]=c,!1},h.onload=function(){return!1},h.src=a.url+(a.url.indexOf("?")>0?"&":"?")+(a.callbackKey?a.callbackKey:"callback")+"="+g+"&"+u(a.data||{}),D.body.appendChild(h)}function B(a,b,c){if("GET"===a.method&&"jsonp"!=a.dataType){var d=a.url.indexOf("?")<0?"?":"&",e=u(b);a.url=a.url+(e?d+e:"")}else a.data=c(b);return a}function C(a,b){var c=a.match(/:[a-z]\w+/gi);if(c&&b)for(var d=0;d<c.length;d++){var e=c[d].slice(1);a=a.replace(c[d],b[e]),delete b[e]}return a}var D,E,F,G,H="[object Object]",I="[object Array]",J="[object String]",K="function",L={}.toString,M=/(?:(^|#|\.)([^#\.\[\]]+))|(\[.+?\])/g,N=/\[(.+?)(?:=("|'|)(.*?)\2)?\]/,O=/^(AREA|BASE|BR|COL|COMMAND|EMBED|HR|IMG|INPUT|KEYGEN|LINK|META|PARAM|SOURCE|TRACK|WBR)$/,P=function(){};d(b);var Q,R={appendChild:function(a){Q===c&&(Q=D.createElement("html")),D.documentElement&&D.documentElement!==a?D.replaceChild(a,D.documentElement):D.appendChild(a),this.childNodes=D.childNodes},insertBefore:function(a){this.appendChild(a)},childNodes:[]},S=[],T={};e.render=function(a,b,d){var e=[];if(!a)throw new Error("Ensure the DOM element being passed to m.route/m.mount/m.render is not undefined.");var g=m(a),h=a===D,j=h||a===D.documentElement?R:a;h&&"html"!=b.tag&&(b={tag:"html",attrs:{},children:b}),T[g]===c&&i(j.childNodes),d===!0&&w(a),T[g]=f(j,null,c,c,b,T[g],!1,0,null,c,e);for(var k=0,l=e.length;l>k;k++)e[k]()},e.trust=function(a){return a=new String(a),a.$trusted=!0,a},e.prop=function(a){return(null!=a&&L.call(a)===H||typeof a===K)&&typeof a.then===K?x(a):n(a)};var U,V=[],W=[],X=[],Y=null,Z=0,$=null,_=null,ab=[],bb=16;e.component=function(a){return o(a,[].slice.call(arguments,1))},e.mount=e.module=function(a,b){if(!a)throw new Error("Please ensure the DOM element exists before rendering a template into it.");var c=V.indexOf(a);0>c&&(c=V.length);for(var d,f=!1,g={preventDefault:function(){f=!0,$=_=null}},h=0;d=ab[h];h++)d.handler.call(d.controller,g),d.controller.onunload=null;if(f)for(var d,h=0;d=ab[h];h++)d.controller.onunload=d.handler;else ab=[];if(X[c]&&typeof X[c].onunload===K&&X[c].onunload(g),!f){e.redraw.strategy("all"),e.startComputation(),V[c]=a,arguments.length>2&&(b=subcomponent(b,[].slice.call(arguments,2)));var i=U=b=b||{controller:function(){}},j=b.controller||P,k=new j;return i===U&&(X[c]=k,W[c]=b),eb(),X[c]}};var cb=!1;e.redraw=function(a){cb||(cb=!0,Y&&a!==!0?(F===b.requestAnimationFrame||new Date-Z>bb)&&(Y>0&&G(Y),Y=F(p,bb)):(p(),Y=F(function(){Y=null},bb)),cb=!1)},e.redraw.strategy=e.prop();var db=0;e.startComputation=function(){db++},e.endComputation=function(){db=Math.max(db-1,0),0===db&&e.redraw()};var eb=function(){"none"==e.redraw.strategy()?(db--,e.redraw.strategy("diff")):e.endComputation()};e.withAttr=function(a,b){return function(c){c=c||event;var d=c.currentTarget||this;b(a in d?d[a]:d.getAttribute(a))}};var fb,gb,hb={pathname:"",hash:"#",search:"?"},ib=P,jb=!1;return e.route=function(){if(0===arguments.length)return gb;if(3===arguments.length&&L.call(arguments[1])===J){var a=arguments[0],c=arguments[1],d=arguments[2];ib=function(b){var f=gb=q(b);if(!r(a,d,f)){if(jb)throw new Error("Ensure the default route matches one of the routes defined in m.route");jb=!0,e.route(c,!0),jb=!1}};var f="hash"===e.route.mode?"onhashchange":"onpopstate";b[f]=function(){var a=E[e.route.mode];"pathname"===e.route.mode&&(a+=E.search),gb!=q(a)&&ib(a)},$=t,b[f]()}else if(arguments[0].addEventListener||arguments[0].attachEvent){var g=arguments[0],h=(arguments[1],arguments[2],arguments[3]);g.href=("pathname"!==e.route.mode?E.pathname:"")+hb[e.route.mode]+h.attrs.href,g.addEventListener?(g.removeEventListener("click",s),g.addEventListener("click",s)):(g.detachEvent("onclick",s),g.attachEvent("onclick",s))}else if(L.call(arguments[0])===J){var i=gb;gb=arguments[0];var j=arguments[1]||{},k=gb.indexOf("?"),l=k>-1?v(gb.slice(k+1)):{};for(var m in j)l[m]=j[m];var n=u(l),o=k>-1?gb.slice(0,k):gb;n&&(gb=o+(-1===o.indexOf("?")?"?":"&")+n);var p=(3===arguments.length?arguments[2]:arguments[1])===!0||i===arguments[0];b.history.pushState?($=t,_=function(){b.history[p?"replaceState":"pushState"](null,D.title,hb[e.route.mode]+gb)},ib(hb[e.route.mode]+gb)):(E[e.route.mode]=gb,ib(hb[e.route.mode]+gb))}},e.route.param=function(a){if(!fb)throw new Error("You must call m.route(element, defaultRoute, routes) before calling m.route.param()");return fb[a]},e.route.mode="search",e.route.buildQueryString=u,e.route.parseQueryString=v,e.deferred=function(){var a=new y;return a.promise=x(a.promise),a},e.deferred.onerror=function(a){if("[object Error]"===L.call(a)&&!a.constructor.toString().match(/ Error/))throw a},e.sync=function(a){function b(a,b){return function(e){return g[a]=e,b||(c="reject"),0===--f&&(d.promise(g),d[c](g)),e}}var c="resolve",d=e.deferred(),f=a.length,g=new Array(f);if(a.length>0)for(var h=0;h<a.length;h++)a[h].then(b(h,!0),b(h,!1));else d.resolve([]);return d.promise},e.request=function(a){a.background!==!0&&e.startComputation();var b=new y,c=a.dataType&&"jsonp"===a.dataType.toLowerCase(),d=a.serialize=c?z:a.serialize||JSON.stringify,f=a.deserialize=c?z:a.deserialize||JSON.parse,g=c?function(a){return a.responseText}:a.extract||function(a){return 0===a.responseText.length&&f===JSON.parse?null:a.responseText};return a.method=(a.method||"GET").toUpperCase(),a.url=C(a.url,a.data),a=B(a,a.data,d),a.onload=a.onerror=function(c){try{c=c||event;var d=("load"===c.type?a.unwrapSuccess:a.unwrapError)||z,h=d(f(g(c.target,a)),c.target);if("load"===c.type)if(L.call(h)===I&&a.type)for(var i=0;i<h.length;i++)h[i]=new a.type(h[i]);else a.type&&(h=new a.type(h));b["load"===c.type?"resolve":"reject"](h)}catch(c){e.deferred.onerror(c),b.reject(c)}a.background!==!0&&e.endComputation()},A(a),b.promise=x(b.promise,a.initialValue),b.promise},e.deps=function(a){return d(b=a||b),b},e.deps.factory=a,e}("undefined"!=typeof window?window:{});"undefined"!=typeof module&&null!==module&&module.exports?module.exports=m:"function"==typeof define&&define.amd&&define(function(){return m});
8 | //# sourceMappingURL=mithril.min.js.map


--------------------------------------------------------------------------------
/todomvc/mithril/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en" data-framework="mithril">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title>Mithril • TodoMVC</title>
 6 | 		<link rel="stylesheet" href="../../resources/shared/app.css">
 7 | 		<script src="../../resources/shared/api.js"></script>
 8 | 	</head>
 9 | 	<body>
10 | 		<script src="js/api.js"></script>
11 | 		<section id="todoapp" class="todoapp"></section>
12 | 		<script src="ext/mithril/mithril.min.js"></script>
13 | 		<script src="js/models/todo.js"></script>
14 | 		<script src="js/models/storage.js"></script>
15 | 		<script src="js/controllers/todo.js"></script>
16 | 		<script src="js/views/main-view.js"></script>
17 | 		<script src="js/views/footer-view.js"></script>
18 | 		
19 | 		<script src="js/app.js"></script>
20 | 	</body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/todomvc/mithril/js/api.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // Public api for benchmark
 3 | API.render = function(force){
 4 | 	m.redraw(force);
 5 | }
 6 | 
 7 | API.getModels = function(){
 8 | 	return app.appController.list;
 9 | }
10 | 
11 | API.addTodo = function(title) {
12 | 	app.appController.list.push(new app.Todo({title: title, completed: false}));
13 | 	app.storage.put(app.appController.list);
14 | 	// does not render automatically
15 | }
16 | 
17 | API.renameTodoAtIndex = function(index,title) {
18 | 	app.appController.list[index].title(title);
19 | }
20 | 
21 | API.getTodoAtIndex = function (index){
22 | 	return app.appController.list[index];
23 | };
24 | 
25 | API.insertTodoAtIndex = function (todo,index){
26 | 	var list = app.appController.list;
27 | 	var len  = list.length;
28 | 	var from = list.indexOf(todo);
29 | 
30 | 	if (index >= len) {
31 | 		list.push(todo);
32 | 	} else {
33 | 		list.splice(index,0,todo);
34 | 	};
35 | 	return todo;
36 | };
37 | 
38 | API.removeTodoAtIndex = function (index){
39 | 	var todo = API.getTodoAtIndex(index);
40 | 	app.appController.list.splice(index,1);
41 | 	return todo;
42 | };
43 | 
44 | API.toggleTodoAtIndex = function(index) {
45 | 	var todo = API.getTodoAtIndex(index);
46 | 	todo.completed(!todo.completed());
47 | }
48 | 
49 | API.clearAllTodos = function(force){
50 | 	app.appController.list.length = 0;
51 | 	app.storage.put(this.list);
52 | }
53 | 
54 | API.list = [];
55 | 
56 | // Override storage
57 | API.ready = function(){
58 | 	var list = [];
59 | 	return; 
60 | 	
61 | 	app.storage = {
62 | 		get: function () {
63 | 			return list;
64 | 		},
65 | 		put: function (todos) {
66 | 			list = todos;
67 | 			return
68 | 		}
69 | 	}
70 | }


--------------------------------------------------------------------------------
/todomvc/mithril/js/app.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | /*global m */
 3 | var app = app || {};
 4 | 
 5 | app.ENTER_KEY = 13;
 6 | app.ESC_KEY = 27;
 7 | 
 8 | m.route.mode = 'hash';
 9 | m.route(document.getElementById('todoapp'), '/', {
10 | 	'/': app,
11 | 	'/:filter': app
12 | });
13 | 
14 | 


--------------------------------------------------------------------------------
/todomvc/mithril/js/controllers/todo.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | /*global m */
  3 | 
  4 | var app = app || {};
  5 | app.controller = function () {
  6 | 	app.appController = this;
  7 | 	console.log("create controller");
  8 | 	var self = this;
  9 | 	// Todo collection
 10 | 
 11 | 	if(API.list){
 12 | 		this.list = API.list;
 13 | 	} else {
 14 | 		this.list = app.storage.get();
 15 | 		this.list = this.list.map(function(item) {
 16 | 			return new app.Todo(item);
 17 | 		});
 18 | 	}
 19 | 	// Update with props
 20 | 	
 21 | 	// Temp title placeholder
 22 | 	this.title = m.prop('');
 23 | 
 24 | 	// Todo list filter
 25 | 	this.filter = m.prop(m.route.param('filter') || '');
 26 | 
 27 | 	this.add = function () {
 28 | 		var title = this.title().trim();
 29 | 		if (title) {
 30 | 			this.list.push(new app.Todo({title: title}));
 31 | 			app.storage.put(this.list);
 32 | 		}
 33 | 		this.title('');
 34 | 	};
 35 | 
 36 | 	this.isVisible = function (todo) {
 37 | 		switch (this.filter()) {
 38 | 			case 'active':
 39 | 				return !todo.completed();
 40 | 			case 'completed':
 41 | 				return todo.completed();
 42 | 			default:
 43 | 				return true;
 44 | 		}
 45 | 	};
 46 | 
 47 | 	this.complete = function (todo) {
 48 | 		if (todo.completed()) {
 49 | 			todo.completed(false);
 50 | 		} else {
 51 | 			todo.completed(true);
 52 | 		}
 53 | 		app.storage.put(this.list);
 54 | 	};
 55 | 
 56 | 	this.edit = function (todo) {
 57 | 		todo.previousTitle = todo.title();
 58 | 		todo.editing(true);
 59 | 	};
 60 | 
 61 | 	this.doneEditing = function (todo, index) {
 62 | 		todo.editing(false);
 63 | 		todo.title(todo.title().trim());
 64 | 		if (!todo.title()) {
 65 | 			this.list.splice(index, 1);
 66 | 		}
 67 | 		app.storage.put(this.list);
 68 | 	};
 69 | 
 70 | 	this.cancelEditing = function (todo) {
 71 | 		todo.title(todo.previousTitle);
 72 | 		todo.editing(false);
 73 | 	};
 74 | 
 75 | 	this.clearTitle = function () {
 76 | 		this.title('');
 77 | 	};
 78 | 
 79 | 	this.remove = function (key) {
 80 | 		this.list.splice(key, 1);
 81 | 		app.storage.put(this.list);
 82 | 	};
 83 | 
 84 | 	this.clearCompleted = function () {
 85 | 		for (var i = this.list.length - 1; i >= 0; i--) {
 86 | 			if (this.list[i].completed()) {
 87 | 				this.list.splice(i, 1);
 88 | 			}
 89 | 		}
 90 | 		app.storage.put(this.list);
 91 | 	};
 92 | 
 93 | 	this.amountCompleted = function () {
 94 | 		var amount = 0;
 95 | 		for (var i = 0; i < this.list.length; i++) {
 96 | 			if (this.list[i].completed()) {
 97 | 				amount++;
 98 | 			}
 99 | 		}
100 | 		return amount;
101 | 	};
102 | 
103 | 	this.allCompleted = function () {
104 | 		for (var i = 0; i < this.list.length; i++) {
105 | 			if (!this.list[i].completed()) {
106 | 				return false;
107 | 			}
108 | 		}
109 | 		return true;
110 | 	};
111 | 
112 | 	this.completeAll = function () {
113 | 		var allCompleted = this.allCompleted();
114 | 		for (var i = 0; i < this.list.length; i++) {
115 | 			this.list[i].completed(!allCompleted);
116 | 		}
117 | 		app.storage.put(this.list);
118 | 	};
119 | 
120 | 
121 | 	// API.renameTodo = function(index,title,render) {
122 | 	// 	self.list[index].title(title);
123 | 	// 	if(render) API.render(true);
124 | 	// }
125 | 
126 | 	// API.clearAllTodos = function(force){
127 | 	// 	self.list = [];
128 | 	// }
129 | };
130 | 


--------------------------------------------------------------------------------
/todomvc/mithril/js/models/storage.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | var app = app || {};
 3 | 
 4 | (function () {
 5 | 	var STORAGE_ID = 'todos-mithril';
 6 | 	app.storage = {
 7 | 		get: function () {
 8 | 			return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]');
 9 | 		},
10 | 		put: function (todos) {
11 | 			localStorage.setItem(STORAGE_ID, JSON.stringify(todos));
12 | 		}
13 | 	};
14 | })();
15 | 


--------------------------------------------------------------------------------
/todomvc/mithril/js/models/todo.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | /*global m */
 3 | var app = app || {};
 4 | 
 5 | // Todo Model
 6 | app.Todo = function (data) {
 7 | 	this.title = m.prop(data.title);
 8 | 	this.completed = m.prop(data.completed || false);
 9 | 	this.editing = m.prop(data.editing || false);
10 | };
11 | 


--------------------------------------------------------------------------------
/todomvc/mithril/js/views/footer-view.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | /*global m */
 3 | var app = app || {};
 4 | 
 5 | app.footer = function (ctrl) {
 6 | 	var amountCompleted = ctrl.amountCompleted();
 7 | 	var amountActive = ctrl.list.length - amountCompleted;
 8 | 
 9 | 	return m('footer.footer', [
10 | 		m('span.todo-count', [
11 | 			m('strong', amountActive), ' item' + (amountActive !== 1 ? 's' : '') + ' left'
12 | 		]),
13 | 		m('ul.filters', [
14 | 			m('li', [
15 | 				m('a[href=/]', {
16 | 					config: m.route,
17 | 					class: ctrl.filter() === '' ? 'selected' : ''
18 | 				}, 'All')
19 | 			]),
20 | 			m('li', [
21 | 				m('a[href=/active]', {
22 | 					config: m.route,
23 | 					class: ctrl.filter() === 'active' ? 'selected' : ''
24 | 				}, 'Active')
25 | 			]),
26 | 			m('li', [
27 | 				m('a[href=/completed]', {
28 | 					config: m.route,
29 | 					class: ctrl.filter() === 'completed' ? 'selected' : ''
30 | 				}, 'Completed')
31 | 			])
32 | 		]), ctrl.amountCompleted() === 0 ? '' : m('button.clear-completed', {
33 | 			onclick: ctrl.clearCompleted.bind(ctrl)
34 | 		}, 'Clear completed')
35 | 	]);
36 | };
37 | 


--------------------------------------------------------------------------------
/todomvc/mithril/js/views/main-view.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | /*global m */
 3 | var app = app || {};
 4 | 
 5 | // View utility
 6 | app.watchInput = function (onenter, onescape) {
 7 | 	return function (e) {
 8 | 		if (e.keyCode === app.ENTER_KEY) {
 9 | 			onenter();
10 | 		} else if (e.keyCode === app.ESC_KEY) {
11 | 			onescape();
12 | 		}
13 | 	};
14 | };
15 | 
16 | app.view = (function() {
17 | 	var focused = false;
18 | 
19 | 	return function (ctrl) {
20 | 		API.RENDERCOUNT++;
21 | 
22 | 		return [
23 | 			m('header.header', [
24 | 				m('h1', 'todos ' + API.RENDERCOUNT), m('input.new-todo[placeholder="What needs to be done?"]', {
25 | 					onkeyup: app.watchInput(ctrl.add.bind(ctrl),
26 | 						ctrl.clearTitle.bind(ctrl)),
27 | 					value: ctrl.title(),
28 | 					oninput: m.withAttr('value', ctrl.title),
29 | 					config: function (element) {
30 | 						if (!focused) {
31 | 							element.focus();
32 | 							focused = true;
33 | 						}
34 | 					}
35 | 				})
36 | 			]),
37 | 			m('section.main', {
38 | 				style: {
39 | 					display: ctrl.list.length ? '' : 'none'
40 | 				}
41 | 			}, [
42 | 				m('input.toggle-all[type=checkbox]', {
43 | 					onclick: ctrl.completeAll.bind(ctrl),
44 | 					checked: ctrl.allCompleted()
45 | 				}),
46 | 				m('ul.todo-list', [
47 | 					ctrl.list.filter(ctrl.isVisible.bind(ctrl)).map(function (task, index) {
48 | 						return m('li', { class: (function () {
49 | 							var classes = '';
50 | 							classes += task.completed() ? 'completed' : '';
51 | 							classes += task.editing() ? ' editing' : '';
52 | 							return classes;
53 | 						})()
54 | 						}, [
55 | 							m('.view', [
56 | 								m('input.toggle[type=checkbox]', {
57 | 									onclick: m.withAttr('checked', ctrl.complete.bind(ctrl, task)),
58 | 									checked: task.completed()
59 | 								}),
60 | 								m('label', {
61 | 									ondblclick: ctrl.edit.bind(ctrl, task)
62 | 								}, task.title()),
63 | 								m('button.destroy', {
64 | 									onclick: ctrl.remove.bind(ctrl, index)
65 | 								})
66 | 							]), m('input.edit', {
67 | 								value: task.title(),
68 | 								onkeyup: app.watchInput(ctrl.doneEditing.bind(ctrl, task, index),
69 | 									ctrl.cancelEditing.bind(ctrl, task)),
70 | 								oninput: m.withAttr('value', task.title),
71 | 								config: function (element) {
72 | 									if (task.editing()) {
73 | 										element.focus();
74 | 										element.selectionStart = element.value.length;
75 | 									}
76 | 								},
77 | 								onblur: ctrl.doneEditing.bind(ctrl, task, index)
78 | 							})
79 | 						]);
80 | 					})
81 | 				])
82 | 			]), ctrl.list.length === 0 ? '' : app.footer(ctrl)
83 | 		];
84 | 	}
85 | })();
86 | 


--------------------------------------------------------------------------------
/todomvc/mithril/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "private": true,
3 |   "dependencies": {
4 |     "mithril": "^0.1.20",
5 |     "todomvc-common": "^1.0.1",
6 |     "todomvc-app-css": "^1.0.1"
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/todomvc/mithril/readme.md:
--------------------------------------------------------------------------------
 1 | # Mithril TodoMVC Example
 2 | 
 3 | > [Mithril](http://lhorie.github.io/mithril/) is a client-side MVC framework - a tool to organize code in a way that is easy to think about and to maintain.
 4 | 
 5 | > _[Mithril - lhorie.github.io/mithril/](http://lhorie.github.io/mithril/)_
 6 | 
 7 | ## Learning Mithril
 8 | 
 9 | The [Mithril website](http://lhorie.github.io/mithril/getting-started.html) is a great resource for getting started.
10 | 
11 | Here are some links you may find helpful:
12 | 
13 | * [Official Documentation](http://lhorie.github.io/mithril/mithril.html)
14 | 
15 | _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)._
16 | 
17 | ## Credit
18 | This TodoMVC application was created by [taylorhakes](https://github.com/taylorhakes).


--------------------------------------------------------------------------------
/todomvc/react/changelog.md:
--------------------------------------------------------------------------------
1 | ## Dev
2 | 
3 | - Include copy of assets from node-modules to be able to run from gh-pages and without node/npm
4 | - Move React over to minified version of library which speeds it up 3x
5 | 


--------------------------------------------------------------------------------
/todomvc/react/external/director.js:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | //
  4 | // Generated on Tue Dec 16 2014 12:13:47 GMT+0100 (CET) by Charlie Robbins, Paolo Fragomeni & the Contributors (Using Codesurgeon).
  5 | // Version 1.2.6
  6 | //
  7 | 
  8 | (function (exports) {
  9 | 
 10 | /*
 11 |  * browser.js: Browser specific functionality for director.
 12 |  *
 13 |  * (C) 2011, Charlie Robbins, Paolo Fragomeni, & the Contributors.
 14 |  * MIT LICENSE
 15 |  *
 16 |  */
 17 | 
 18 | var dloc = document.location;
 19 | 
 20 | function dlocHashEmpty() {
 21 |   // Non-IE browsers return '' when the address bar shows '#'; Director's logic
 22 |   // assumes both mean empty.
 23 |   return dloc.hash === '' || dloc.hash === '#';
 24 | }
 25 | 
 26 | var listener = {
 27 |   mode: 'modern',
 28 |   hash: dloc.hash,
 29 |   history: false,
 30 | 
 31 |   check: function () {
 32 |     var h = dloc.hash;
 33 |     if (h != this.hash) {
 34 |       this.hash = h;
 35 |       this.onHashChanged();
 36 |     }
 37 |   },
 38 | 
 39 |   fire: function () {
 40 |     if (this.mode === 'modern') {
 41 |       this.history === true ? window.onpopstate() : window.onhashchange();
 42 |     }
 43 |     else {
 44 |       this.onHashChanged();
 45 |     }
 46 |   },
 47 | 
 48 |   init: function (fn, history) {
 49 |     var self = this;
 50 |     this.history = history;
 51 | 
 52 |     if (!Router.listeners) {
 53 |       Router.listeners = [];
 54 |     }
 55 | 
 56 |     function onchange(onChangeEvent) {
 57 |       for (var i = 0, l = Router.listeners.length; i < l; i++) {
 58 |         Router.listeners[i](onChangeEvent);
 59 |       }
 60 |     }
 61 | 
 62 |     //note IE8 is being counted as 'modern' because it has the hashchange event
 63 |     if ('onhashchange' in window && (document.documentMode === undefined
 64 |       || document.documentMode > 7)) {
 65 |       // At least for now HTML5 history is available for 'modern' browsers only
 66 |       if (this.history === true) {
 67 |         // There is an old bug in Chrome that causes onpopstate to fire even
 68 |         // upon initial page load. Since the handler is run manually in init(),
 69 |         // this would cause Chrome to run it twise. Currently the only
 70 |         // workaround seems to be to set the handler after the initial page load
 71 |         // http://code.google.com/p/chromium/issues/detail?id=63040
 72 |         setTimeout(function() {
 73 |           window.onpopstate = onchange;
 74 |         }, 500);
 75 |       }
 76 |       else {
 77 |         window.onhashchange = onchange;
 78 |       }
 79 |       this.mode = 'modern';
 80 |     }
 81 |     else {
 82 |       //
 83 |       // IE support, based on a concept by Erik Arvidson ...
 84 |       //
 85 |       var frame = document.createElement('iframe');
 86 |       frame.id = 'state-frame';
 87 |       frame.style.display = 'none';
 88 |       document.body.appendChild(frame);
 89 |       this.writeFrame('');
 90 | 
 91 |       if ('onpropertychange' in document && 'attachEvent' in document) {
 92 |         document.attachEvent('onpropertychange', function () {
 93 |           if (event.propertyName === 'location') {
 94 |             self.check();
 95 |           }
 96 |         });
 97 |       }
 98 | 
 99 |       window.setInterval(function () { self.check(); }, 50);
100 | 
101 |       this.onHashChanged = onchange;
102 |       this.mode = 'legacy';
103 |     }
104 | 
105 |     Router.listeners.push(fn);
106 | 
107 |     return this.mode;
108 |   },
109 | 
110 |   destroy: function (fn) {
111 |     if (!Router || !Router.listeners) {
112 |       return;
113 |     }
114 | 
115 |     var listeners = Router.listeners;
116 | 
117 |     for (var i = listeners.length - 1; i >= 0; i--) {
118 |       if (listeners[i] === fn) {
119 |         listeners.splice(i, 1);
120 |       }
121 |     }
122 |   },
123 | 
124 |   setHash: function (s) {
125 |     // Mozilla always adds an entry to the history
126 |     if (this.mode === 'legacy') {
127 |       this.writeFrame(s);
128 |     }
129 | 
130 |     if (this.history === true) {
131 |       window.history.pushState({}, document.title, s);
132 |       // Fire an onpopstate event manually since pushing does not obviously
133 |       // trigger the pop event.
134 |       this.fire();
135 |     } else {
136 |       dloc.hash = (s[0] === '/') ? s : '/' + s;
137 |     }
138 |     return this;
139 |   },
140 | 
141 |   writeFrame: function (s) {
142 |     // IE support...
143 |     var f = document.getElementById('state-frame');
144 |     var d = f.contentDocument || f.contentWindow.document;
145 |     d.open();
146 |     d.write("<script>_hash = '" + s + "'; onload = parent.listener.syncHash;<script>");
147 |     d.close();
148 |   },
149 | 
150 |   syncHash: function () {
151 |     // IE support...
152 |     var s = this._hash;
153 |     if (s != dloc.hash) {
154 |       dloc.hash = s;
155 |     }
156 |     return this;
157 |   },
158 | 
159 |   onHashChanged: function () {}
160 | };
161 | 
162 | var Router = exports.Router = function (routes) {
163 |   if (!(this instanceof Router)) return new Router(routes);
164 | 
165 |   this.params   = {};
166 |   this.routes   = {};
167 |   this.methods  = ['on', 'once', 'after', 'before'];
168 |   this.scope    = [];
169 |   this._methods = {};
170 | 
171 |   this._insert = this.insert;
172 |   this.insert = this.insertEx;
173 | 
174 |   this.historySupport = (window.history != null ? window.history.pushState : null) != null
175 | 
176 |   this.configure();
177 |   this.mount(routes || {});
178 | };
179 | 
180 | Router.prototype.init = function (r) {
181 |   var self = this
182 |     , routeTo;
183 |   this.handler = function(onChangeEvent) {
184 |     var newURL = onChangeEvent && onChangeEvent.newURL || window.location.hash;
185 |     var url = self.history === true ? self.getPath() : newURL.replace(/.*#/, '');
186 |     self.dispatch('on', url.charAt(0) === '/' ? url : '/' + url);
187 |   };
188 | 
189 |   listener.init(this.handler, this.history);
190 | 
191 |   if (this.history === false) {
192 |     if (dlocHashEmpty() && r) {
193 |       dloc.hash = r;
194 |     } else if (!dlocHashEmpty()) {
195 |       self.dispatch('on', '/' + dloc.hash.replace(/^(#\/|#|\/)/, ''));
196 |     }
197 |   }
198 |   else {
199 |     if (this.convert_hash_in_init) {
200 |       // Use hash as route
201 |       routeTo = dlocHashEmpty() && r ? r : !dlocHashEmpty() ? dloc.hash.replace(/^#/, '') : null;
202 |       if (routeTo) {
203 |         window.history.replaceState({}, document.title, routeTo);
204 |       }
205 |     }
206 |     else {
207 |       // Use canonical url
208 |       routeTo = this.getPath();
209 |     }
210 | 
211 |     // Router has been initialized, but due to the chrome bug it will not
212 |     // yet actually route HTML5 history state changes. Thus, decide if should route.
213 |     if (routeTo || this.run_in_init === true) {
214 |       this.handler();
215 |     }
216 |   }
217 | 
218 |   return this;
219 | };
220 | 
221 | Router.prototype.explode = function () {
222 |   var v = this.history === true ? this.getPath() : dloc.hash;
223 |   if (v.charAt(1) === '/') { v=v.slice(1) }
224 |   return v.slice(1, v.length).split("/");
225 | };
226 | 
227 | Router.prototype.setRoute = function (i, v, val) {
228 |   var url = this.explode();
229 | 
230 |   if (typeof i === 'number' && typeof v === 'string') {
231 |     url[i] = v;
232 |   }
233 |   else if (typeof val === 'string') {
234 |     url.splice(i, v, s);
235 |   }
236 |   else {
237 |     url = [i];
238 |   }
239 | 
240 |   listener.setHash(url.join('/'));
241 |   return url;
242 | };
243 | 
244 | //
245 | // ### function insertEx(method, path, route, parent)
246 | // #### @method {string} Method to insert the specific `route`.
247 | // #### @path {Array} Parsed path to insert the `route` at.
248 | // #### @route {Array|function} Route handlers to insert.
249 | // #### @parent {Object} **Optional** Parent "routes" to insert into.
250 | // insert a callback that will only occur once per the matched route.
251 | //
252 | Router.prototype.insertEx = function(method, path, route, parent) {
253 |   if (method === "once") {
254 |     method = "on";
255 |     route = function(route) {
256 |       var once = false;
257 |       return function() {
258 |         if (once) return;
259 |         once = true;
260 |         return route.apply(this, arguments);
261 |       };
262 |     }(route);
263 |   }
264 |   return this._insert(method, path, route, parent);
265 | };
266 | 
267 | Router.prototype.getRoute = function (v) {
268 |   var ret = v;
269 | 
270 |   if (typeof v === "number") {
271 |     ret = this.explode()[v];
272 |   }
273 |   else if (typeof v === "string"){
274 |     var h = this.explode();
275 |     ret = h.indexOf(v);
276 |   }
277 |   else {
278 |     ret = this.explode();
279 |   }
280 | 
281 |   return ret;
282 | };
283 | 
284 | Router.prototype.destroy = function () {
285 |   listener.destroy(this.handler);
286 |   return this;
287 | };
288 | 
289 | Router.prototype.getPath = function () {
290 |   var path = window.location.pathname;
291 |   if (path.substr(0, 1) !== '/') {
292 |     path = '/' + path;
293 |   }
294 |   return path;
295 | };
296 | function _every(arr, iterator) {
297 |   for (var i = 0; i < arr.length; i += 1) {
298 |     if (iterator(arr[i], i, arr) === false) {
299 |       return;
300 |     }
301 |   }
302 | }
303 | 
304 | function _flatten(arr) {
305 |   var flat = [];
306 |   for (var i = 0, n = arr.length; i < n; i++) {
307 |     flat = flat.concat(arr[i]);
308 |   }
309 |   return flat;
310 | }
311 | 
312 | function _asyncEverySeries(arr, iterator, callback) {
313 |   if (!arr.length) {
314 |     return callback();
315 |   }
316 |   var completed = 0;
317 |   (function iterate() {
318 |     iterator(arr[completed], function(err) {
319 |       if (err || err === false) {
320 |         callback(err);
321 |         callback = function() {};
322 |       } else {
323 |         completed += 1;
324 |         if (completed === arr.length) {
325 |           callback();
326 |         } else {
327 |           iterate();
328 |         }
329 |       }
330 |     });
331 |   })();
332 | }
333 | 
334 | function paramifyString(str, params, mod) {
335 |   mod = str;
336 |   for (var param in params) {
337 |     if (params.hasOwnProperty(param)) {
338 |       mod = params[param](str);
339 |       if (mod !== str) {
340 |         break;
341 |       }
342 |     }
343 |   }
344 |   return mod === str ? "([._a-zA-Z0-9-%()]+)" : mod;
345 | }
346 | 
347 | function regifyString(str, params) {
348 |   var matches, last = 0, out = "";
349 |   while (matches = str.substr(last).match(/[^\w\d\- %@&]*\*[^\w\d\- %@&]*/)) {
350 |     last = matches.index + matches[0].length;
351 |     matches[0] = matches[0].replace(/^\*/, "([_.()!\\ %@&a-zA-Z0-9-]+)");
352 |     out += str.substr(0, matches.index) + matches[0];
353 |   }
354 |   str = out += str.substr(last);
355 |   var captures = str.match(/:([^\/]+)/ig), capture, length;
356 |   if (captures) {
357 |     length = captures.length;
358 |     for (var i = 0; i < length; i++) {
359 |       capture = captures[i];
360 |       if (capture.slice(0, 2) === "::") {
361 |         str = capture.slice(1);
362 |       } else {
363 |         str = str.replace(capture, paramifyString(capture, params));
364 |       }
365 |     }
366 |   }
367 |   return str;
368 | }
369 | 
370 | function terminator(routes, delimiter, start, stop) {
371 |   var last = 0, left = 0, right = 0, start = (start || "(").toString(), stop = (stop || ")").toString(), i;
372 |   for (i = 0; i < routes.length; i++) {
373 |     var chunk = routes[i];
374 |     if (chunk.indexOf(start, last) > chunk.indexOf(stop, last) || ~chunk.indexOf(start, last) && !~chunk.indexOf(stop, last) || !~chunk.indexOf(start, last) && ~chunk.indexOf(stop, last)) {
375 |       left = chunk.indexOf(start, last);
376 |       right = chunk.indexOf(stop, last);
377 |       if (~left && !~right || !~left && ~right) {
378 |         var tmp = routes.slice(0, (i || 1) + 1).join(delimiter);
379 |         routes = [ tmp ].concat(routes.slice((i || 1) + 1));
380 |       }
381 |       last = (right > left ? right : left) + 1;
382 |       i = 0;
383 |     } else {
384 |       last = 0;
385 |     }
386 |   }
387 |   return routes;
388 | }
389 | 
390 | var QUERY_SEPARATOR = /\?.*/;
391 | 
392 | Router.prototype.configure = function(options) {
393 |   options = options || {};
394 |   for (var i = 0; i < this.methods.length; i++) {
395 |     this._methods[this.methods[i]] = true;
396 |   }
397 |   this.recurse = options.recurse || this.recurse || false;
398 |   this.async = options.async || false;
399 |   this.delimiter = options.delimiter || "/";
400 |   this.strict = typeof options.strict === "undefined" ? true : options.strict;
401 |   this.notfound = options.notfound;
402 |   this.resource = options.resource;
403 |   this.history = options.html5history && this.historySupport || false;
404 |   this.run_in_init = this.history === true && options.run_handler_in_init !== false;
405 |   this.convert_hash_in_init = this.history === true && options.convert_hash_in_init !== false;
406 |   this.every = {
407 |     after: options.after || null,
408 |     before: options.before || null,
409 |     on: options.on || null
410 |   };
411 |   return this;
412 | };
413 | 
414 | Router.prototype.param = function(token, matcher) {
415 |   if (token[0] !== ":") {
416 |     token = ":" + token;
417 |   }
418 |   var compiled = new RegExp(token, "g");
419 |   this.params[token] = function(str) {
420 |     return str.replace(compiled, matcher.source || matcher);
421 |   };
422 |   return this;
423 | };
424 | 
425 | Router.prototype.on = Router.prototype.route = function(method, path, route) {
426 |   var self = this;
427 |   if (!route && typeof path == "function") {
428 |     route = path;
429 |     path = method;
430 |     method = "on";
431 |   }
432 |   if (Array.isArray(path)) {
433 |     return path.forEach(function(p) {
434 |       self.on(method, p, route);
435 |     });
436 |   }
437 |   if (path.source) {
438 |     path = path.source.replace(/\\\//ig, "/");
439 |   }
440 |   if (Array.isArray(method)) {
441 |     return method.forEach(function(m) {
442 |       self.on(m.toLowerCase(), path, route);
443 |     });
444 |   }
445 |   path = path.split(new RegExp(this.delimiter));
446 |   path = terminator(path, this.delimiter);
447 |   this.insert(method, this.scope.concat(path), route);
448 | };
449 | 
450 | Router.prototype.path = function(path, routesFn) {
451 |   var self = this, length = this.scope.length;
452 |   if (path.source) {
453 |     path = path.source.replace(/\\\//ig, "/");
454 |   }
455 |   path = path.split(new RegExp(this.delimiter));
456 |   path = terminator(path, this.delimiter);
457 |   this.scope = this.scope.concat(path);
458 |   routesFn.call(this, this);
459 |   this.scope.splice(length, path.length);
460 | };
461 | 
462 | Router.prototype.dispatch = function(method, path, callback) {
463 |   var self = this, fns = this.traverse(method, path.replace(QUERY_SEPARATOR, ""), this.routes, ""), invoked = this._invoked, after;
464 |   this._invoked = true;
465 |   if (!fns || fns.length === 0) {
466 |     this.last = [];
467 |     if (typeof this.notfound === "function") {
468 |       this.invoke([ this.notfound ], {
469 |         method: method,
470 |         path: path
471 |       }, callback);
472 |     }
473 |     return false;
474 |   }
475 |   if (this.recurse === "forward") {
476 |     fns = fns.reverse();
477 |   }
478 |   function updateAndInvoke() {
479 |     self.last = fns.after;
480 |     self.invoke(self.runlist(fns), self, callback);
481 |   }
482 |   after = this.every && this.every.after ? [ this.every.after ].concat(this.last) : [ this.last ];
483 |   if (after && after.length > 0 && invoked) {
484 |     if (this.async) {
485 |       this.invoke(after, this, updateAndInvoke);
486 |     } else {
487 |       this.invoke(after, this);
488 |       updateAndInvoke();
489 |     }
490 |     return true;
491 |   }
492 |   updateAndInvoke();
493 |   return true;
494 | };
495 | 
496 | Router.prototype.invoke = function(fns, thisArg, callback) {
497 |   var self = this;
498 |   var apply;
499 |   if (this.async) {
500 |     apply = function(fn, next) {
501 |       if (Array.isArray(fn)) {
502 |         return _asyncEverySeries(fn, apply, next);
503 |       } else if (typeof fn == "function") {
504 |         fn.apply(thisArg, (fns.captures || []).concat(next));
505 |       }
506 |     };
507 |     _asyncEverySeries(fns, apply, function() {
508 |       if (callback) {
509 |         callback.apply(thisArg, arguments);
510 |       }
511 |     });
512 |   } else {
513 |     apply = function(fn) {
514 |       if (Array.isArray(fn)) {
515 |         return _every(fn, apply);
516 |       } else if (typeof fn === "function") {
517 |         return fn.apply(thisArg, fns.captures || []);
518 |       } else if (typeof fn === "string" && self.resource) {
519 |         self.resource[fn].apply(thisArg, fns.captures || []);
520 |       }
521 |     };
522 |     _every(fns, apply);
523 |   }
524 | };
525 | 
526 | Router.prototype.traverse = function(method, path, routes, regexp, filter) {
527 |   var fns = [], current, exact, match, next, that;
528 |   function filterRoutes(routes) {
529 |     if (!filter) {
530 |       return routes;
531 |     }
532 |     function deepCopy(source) {
533 |       var result = [];
534 |       for (var i = 0; i < source.length; i++) {
535 |         result[i] = Array.isArray(source[i]) ? deepCopy(source[i]) : source[i];
536 |       }
537 |       return result;
538 |     }
539 |     function applyFilter(fns) {
540 |       for (var i = fns.length - 1; i >= 0; i--) {
541 |         if (Array.isArray(fns[i])) {
542 |           applyFilter(fns[i]);
543 |           if (fns[i].length === 0) {
544 |             fns.splice(i, 1);
545 |           }
546 |         } else {
547 |           if (!filter(fns[i])) {
548 |             fns.splice(i, 1);
549 |           }
550 |         }
551 |       }
552 |     }
553 |     var newRoutes = deepCopy(routes);
554 |     newRoutes.matched = routes.matched;
555 |     newRoutes.captures = routes.captures;
556 |     newRoutes.after = routes.after.filter(filter);
557 |     applyFilter(newRoutes);
558 |     return newRoutes;
559 |   }
560 |   if (path === this.delimiter && routes[method]) {
561 |     next = [ [ routes.before, routes[method] ].filter(Boolean) ];
562 |     next.after = [ routes.after ].filter(Boolean);
563 |     next.matched = true;
564 |     next.captures = [];
565 |     return filterRoutes(next);
566 |   }
567 |   for (var r in routes) {
568 |     if (routes.hasOwnProperty(r) && (!this._methods[r] || this._methods[r] && typeof routes[r] === "object" && !Array.isArray(routes[r]))) {
569 |       current = exact = regexp + this.delimiter + r;
570 |       if (!this.strict) {
571 |         exact += "[" + this.delimiter + "]?";
572 |       }
573 |       match = path.match(new RegExp("^" + exact));
574 |       if (!match) {
575 |         continue;
576 |       }
577 |       if (match[0] && match[0] == path && routes[r][method]) {
578 |         next = [ [ routes[r].before, routes[r][method] ].filter(Boolean) ];
579 |         next.after = [ routes[r].after ].filter(Boolean);
580 |         next.matched = true;
581 |         next.captures = match.slice(1);
582 |         if (this.recurse && routes === this.routes) {
583 |           next.push([ routes.before, routes.on ].filter(Boolean));
584 |           next.after = next.after.concat([ routes.after ].filter(Boolean));
585 |         }
586 |         return filterRoutes(next);
587 |       }
588 |       next = this.traverse(method, path, routes[r], current);
589 |       if (next.matched) {
590 |         if (next.length > 0) {
591 |           fns = fns.concat(next);
592 |         }
593 |         if (this.recurse) {
594 |           fns.push([ routes[r].before, routes[r].on ].filter(Boolean));
595 |           next.after = next.after.concat([ routes[r].after ].filter(Boolean));
596 |           if (routes === this.routes) {
597 |             fns.push([ routes["before"], routes["on"] ].filter(Boolean));
598 |             next.after = next.after.concat([ routes["after"] ].filter(Boolean));
599 |           }
600 |         }
601 |         fns.matched = true;
602 |         fns.captures = next.captures;
603 |         fns.after = next.after;
604 |         return filterRoutes(fns);
605 |       }
606 |     }
607 |   }
608 |   return false;
609 | };
610 | 
611 | Router.prototype.insert = function(method, path, route, parent) {
612 |   var methodType, parentType, isArray, nested, part;
613 |   path = path.filter(function(p) {
614 |     return p && p.length > 0;
615 |   });
616 |   parent = parent || this.routes;
617 |   part = path.shift();
618 |   if (/\:|\*/.test(part) && !/\\d|\\w/.test(part)) {
619 |     part = regifyString(part, this.params);
620 |   }
621 |   if (path.length > 0) {
622 |     parent[part] = parent[part] || {};
623 |     return this.insert(method, path, route, parent[part]);
624 |   }
625 |   if (!part && !path.length && parent === this.routes) {
626 |     methodType = typeof parent[method];
627 |     switch (methodType) {
628 |      case "function":
629 |       parent[method] = [ parent[method], route ];
630 |       return;
631 |      case "object":
632 |       parent[method].push(route);
633 |       return;
634 |      case "undefined":
635 |       parent[method] = route;
636 |       return;
637 |     }
638 |     return;
639 |   }
640 |   parentType = typeof parent[part];
641 |   isArray = Array.isArray(parent[part]);
642 |   if (parent[part] && !isArray && parentType == "object") {
643 |     methodType = typeof parent[part][method];
644 |     switch (methodType) {
645 |      case "function":
646 |       parent[part][method] = [ parent[part][method], route ];
647 |       return;
648 |      case "object":
649 |       parent[part][method].push(route);
650 |       return;
651 |      case "undefined":
652 |       parent[part][method] = route;
653 |       return;
654 |     }
655 |   } else if (parentType == "undefined") {
656 |     nested = {};
657 |     nested[method] = route;
658 |     parent[part] = nested;
659 |     return;
660 |   }
661 |   throw new Error("Invalid route context: " + parentType);
662 | };
663 | 
664 | 
665 | 
666 | Router.prototype.extend = function(methods) {
667 |   var self = this, len = methods.length, i;
668 |   function extend(method) {
669 |     self._methods[method] = true;
670 |     self[method] = function() {
671 |       var extra = arguments.length === 1 ? [ method, "" ] : [ method ];
672 |       self.on.apply(self, extra.concat(Array.prototype.slice.call(arguments)));
673 |     };
674 |   }
675 |   for (i = 0; i < len; i++) {
676 |     extend(methods[i]);
677 |   }
678 | };
679 | 
680 | Router.prototype.runlist = function(fns) {
681 |   var runlist = this.every && this.every.before ? [ this.every.before ].concat(_flatten(fns)) : _flatten(fns);
682 |   if (this.every && this.every.on) {
683 |     runlist.push(this.every.on);
684 |   }
685 |   runlist.captures = fns.captures;
686 |   runlist.source = fns.source;
687 |   return runlist;
688 | };
689 | 
690 | Router.prototype.mount = function(routes, path) {
691 |   if (!routes || typeof routes !== "object" || Array.isArray(routes)) {
692 |     return;
693 |   }
694 |   var self = this;
695 |   path = path || [];
696 |   if (!Array.isArray(path)) {
697 |     path = path.split(self.delimiter);
698 |   }
699 |   function insertOrMount(route, local) {
700 |     var rename = route, parts = route.split(self.delimiter), routeType = typeof routes[route], isRoute = parts[0] === "" || !self._methods[parts[0]], event = isRoute ? "on" : rename;
701 |     if (isRoute) {
702 |       rename = rename.slice((rename.match(new RegExp("^" + self.delimiter)) || [ "" ])[0].length);
703 |       parts.shift();
704 |     }
705 |     if (isRoute && routeType === "object" && !Array.isArray(routes[route])) {
706 |       local = local.concat(parts);
707 |       self.mount(routes[route], local);
708 |       return;
709 |     }
710 |     if (isRoute) {
711 |       local = local.concat(rename.split(self.delimiter));
712 |       local = terminator(local, self.delimiter);
713 |     }
714 |     self.insert(event, local, routes[route]);
715 |   }
716 |   for (var route in routes) {
717 |     if (routes.hasOwnProperty(route)) {
718 |       insertOrMount(route, path.slice(0));
719 |     }
720 |   }
721 | };
722 | 
723 | 
724 | 
725 | }(typeof exports === "object" ? exports : window));


--------------------------------------------------------------------------------
/todomvc/react/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en" data-framework="react">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title>React • TodoMVC</title>
 6 | 		<link rel="stylesheet" href="../../resources/shared/app.css">
 7 | 		<script src="../../resources/shared/api.js"></script>
 8 | 	</head>
 9 | 	<body>
10 | 		<script src="js/api.js"></script>
11 | 		<section class="todoapp"></section>
12 | 		<script src="external/react-with-addons.min.js"></script>
13 | 		<script src="external/director.js"></script>
14 | 		<script src="js/utils.js"></script>
15 | 		<script src="js/todoModel.js"></script>
16 | 
17 | 		<script src="js/todoItem.js"></script>
18 | 		<script src="js/footer.js"></script>
19 | 		<script src="js/app.js"></script>
20 | 	</body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/todomvc/react/js/api.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // Public api for benchmark
 3 | API.render = function(force){
 4 | 	app.render(force);
 5 | 	return API.RENDERCOUNT;
 6 | }
 7 | 
 8 | API.getModels = function(){
 9 | 	return app.model;
10 | }
11 | 
12 | API.addTodo = function(text) {
13 | 	app.model.addTodo(text);
14 | }
15 | 
16 | // expose interface for renaming todo
17 | API.renameTodoAtIndex = function(index,text) {
18 | 	var todo = app.model.todos[index];
19 | 	todo.title = text;
20 | 	return todo;
21 | }
22 | 
23 | API.getTodoAtIndex = function (index){
24 | 	return app.model.todos[index];
25 | };
26 | 
27 | API.insertTodoAtIndex = function (todo,index){
28 | 	var list = app.model.todos;
29 | 	var len  = list.length;
30 | 	var from = list.indexOf(todo);
31 | 
32 | 	if (index >= len) {
33 | 		list.push(todo);
34 | 	} else {
35 | 		list.splice(index,0,todo);
36 | 	};
37 | 	return todo;
38 | };
39 | 
40 | API.removeTodoAtIndex = function (index){
41 | 	var todo = API.getTodoAtIndex(index);
42 | 	app.model.todos.splice(index,1);
43 | 	return todo;
44 | };
45 | 
46 | API.clearAllTodos = function() {
47 | 	app.model.clearAll();
48 | }
49 | 
50 | API.toggleTodoAtIndex = function(index) {
51 | 	var todo = app.model.todos[index];
52 | 	todo.completed = !todo.completed;
53 | }


--------------------------------------------------------------------------------
/todomvc/react/js/app.js:
--------------------------------------------------------------------------------
  1 | /*jshint quotmark:false */
  2 | /*jshint white:false */
  3 | /*jshint trailing:false */
  4 | /*jshint newcap:false */
  5 | /*global React, Router*/
  6 | var app = app || {};
  7 | 
  8 | (function () {
  9 | 	'use strict';
 10 | 
 11 | 	app.ALL_TODOS = 'all';
 12 | 	app.ACTIVE_TODOS = 'active';
 13 | 	app.COMPLETED_TODOS = 'completed';
 14 | 
 15 | 	var TodoFooter = app.TodoFooter;
 16 | 	var TodoItem = app.TodoItem;
 17 | 
 18 | 	var ENTER_KEY = 13;
 19 | 
 20 | 	var TodoApp = React.createClass({displayName: "TodoApp",
 21 | 		getInitialState: function () {
 22 | 			return {
 23 | 				nowShowing: app.ALL_TODOS,
 24 | 				editing: null
 25 | 			};
 26 | 		},
 27 | 
 28 | 		componentDidMount: function () {
 29 | 			var setState = this.setState;
 30 | 			var router = Router({
 31 | 				'/': setState.bind(this, {nowShowing: app.ALL_TODOS}),
 32 | 				'/active': setState.bind(this, {nowShowing: app.ACTIVE_TODOS}),
 33 | 				'/completed': setState.bind(this, {nowShowing: app.COMPLETED_TODOS})
 34 | 			});
 35 | 			router.init('/');
 36 | 		},
 37 | 
 38 | 		handleNewTodoKeyDown: function (event) {
 39 | 			if (event.keyCode !== ENTER_KEY) {
 40 | 				return;
 41 | 			}
 42 | 
 43 | 			event.preventDefault();
 44 | 
 45 | 			var val = React.findDOMNode(this.refs.newField).value.trim();
 46 | 
 47 | 			if (val) {
 48 | 				this.props.model.addTodo(val);
 49 | 				React.findDOMNode(this.refs.newField).value = '';
 50 | 			}
 51 | 		},
 52 | 
 53 | 		toggleAll: function (event) {
 54 | 			var checked = event.target.checked;
 55 | 			this.props.model.toggleAll(checked);
 56 | 		},
 57 | 
 58 | 		toggle: function (todoToToggle) {
 59 | 			this.props.model.toggle(todoToToggle);
 60 | 		},
 61 | 
 62 | 		destroy: function (todo) {
 63 | 			this.props.model.destroy(todo);
 64 | 		},
 65 | 
 66 | 		edit: function (todo) {
 67 | 			this.setState({editing: todo.id});
 68 | 		},
 69 | 
 70 | 		save: function (todoToSave, text) {
 71 | 			this.props.model.save(todoToSave, text);
 72 | 			this.setState({editing: null});
 73 | 		},
 74 | 
 75 | 		cancel: function () {
 76 | 			this.setState({editing: null});
 77 | 		},
 78 | 
 79 | 		clearCompleted: function () {
 80 | 			this.props.model.clearCompleted();
 81 | 		},
 82 | 
 83 | 		render: function () {
 84 | 			API.RENDERCOUNT++; // Mark rendercount
 85 | 			var footer;
 86 | 			var main;
 87 | 			var todos = this.props.model.todos;
 88 | 
 89 | 			var shownTodos = todos.filter(function (todo) {
 90 | 				switch (this.state.nowShowing) {
 91 | 				case app.ACTIVE_TODOS:
 92 | 					return !todo.completed;
 93 | 				case app.COMPLETED_TODOS:
 94 | 					return todo.completed;
 95 | 				default:
 96 | 					return true;
 97 | 				}
 98 | 			}, this);
 99 | 
100 | 			var todoItems = shownTodos.map(function (todo) {
101 | 				return (
102 | 					React.createElement(TodoItem, {
103 | 						key: todo.id, 
104 | 						todo: todo, 
105 | 						onToggle: this.toggle.bind(this, todo), 
106 | 						onDestroy: this.destroy.bind(this, todo), 
107 | 						onEdit: this.edit.bind(this, todo), 
108 | 						editing: this.state.editing === todo.id, 
109 | 						onSave: this.save.bind(this, todo), 
110 | 						onCancel: this.cancel}
111 | 					)
112 | 				);
113 | 			}, this);
114 | 
115 | 			var activeTodoCount = todos.reduce(function (accum, todo) {
116 | 				return todo.completed ? accum : accum + 1;
117 | 			}, 0);
118 | 
119 | 			var completedCount = todos.length - activeTodoCount;
120 | 
121 | 			if (activeTodoCount || completedCount) {
122 | 				footer =
123 | 					React.createElement(TodoFooter, {
124 | 						count: activeTodoCount, 
125 | 						completedCount: completedCount, 
126 | 						nowShowing: this.state.nowShowing, 
127 | 						onClearCompleted: this.clearCompleted}
128 | 					);
129 | 			}
130 | 
131 | 			if (todos.length) {
132 | 				main = (
133 | 					React.createElement("section", {className: "main"}, 
134 | 						React.createElement("input", {
135 | 							className: "toggle-all", 
136 | 							type: "checkbox", 
137 | 							onChange: this.toggleAll, 
138 | 							checked: activeTodoCount === 0}
139 | 						), 
140 | 						React.createElement("ul", {className: "todo-list"}, 
141 | 							todoItems
142 | 						)
143 | 					)
144 | 				);
145 | 			}
146 | 
147 | 			return (
148 | 				React.createElement("div", null, 
149 | 					React.createElement("header", {className: "header"}, 
150 | 						React.createElement("h1", null, "todos " + API.RENDERCOUNT),
151 | 						React.createElement("input", {
152 | 							ref: "newField", 
153 | 							className: "new-todo", 
154 | 							placeholder: "What needs to be done?", 
155 | 							onKeyDown: this.handleNewTodoKeyDown, 
156 | 							autoFocus: true}
157 | 						)
158 | 					), 
159 | 					main, 
160 | 					footer
161 | 				)
162 | 			);
163 | 		}
164 | 	});
165 | 
166 | 	var model = new app.TodoModel('react-todos');
167 | 
168 | 	function render() {
169 | 		React.render(
170 | 			React.createElement(TodoApp, {model: model}),
171 | 			document.getElementsByClassName('todoapp')[0]
172 | 		);
173 | 	}
174 | 
175 | 	model.subscribe(render);
176 | 	render();
177 | 
178 | 	app.model = model;
179 | 	app.render = render;
180 | 
181 | })();
182 | 


--------------------------------------------------------------------------------
/todomvc/react/js/footer.js:
--------------------------------------------------------------------------------
 1 | /*jshint quotmark:false */
 2 | /*jshint white:false */
 3 | /*jshint trailing:false */
 4 | /*jshint newcap:false */
 5 | /*global React */
 6 | var app = app || {};
 7 | 
 8 | (function () {
 9 | 	'use strict';
10 | 
11 | 	app.TodoFooter = React.createClass({displayName: "TodoFooter",
12 | 		render: function () {
13 | 			var activeTodoWord = app.Utils.pluralize(this.props.count, 'item');
14 | 			var clearButton = null;
15 | 
16 | 			if (this.props.completedCount > 0) {
17 | 				clearButton = (
18 | 					React.createElement("button", {
19 | 						className: "clear-completed", 
20 | 						onClick: this.props.onClearCompleted}, 
21 | 						"Clear completed"
22 | 					)
23 | 				);
24 | 			}
25 | 
26 | 			// React idiom for shortcutting to `classSet` since it'll be used often
27 | 			var cx = React.addons.classSet;
28 | 			var nowShowing = this.props.nowShowing;
29 | 			return (
30 | 				React.createElement("footer", {className: "footer"}, 
31 | 					React.createElement("span", {className: "todo-count"}, 
32 | 						React.createElement("strong", null, this.props.count), " ", activeTodoWord, " left"
33 | 					), 
34 | 					React.createElement("ul", {className: "filters"}, 
35 | 						React.createElement("li", null, 
36 | 							React.createElement("a", {
37 | 								href: "#/", 
38 | 								className: cx({selected: nowShowing === app.ALL_TODOS})}, 
39 | 									"All"
40 | 							)
41 | 						), 
42 | 						' ', 
43 | 						React.createElement("li", null, 
44 | 							React.createElement("a", {
45 | 								href: "#/active", 
46 | 								className: cx({selected: nowShowing === app.ACTIVE_TODOS})}, 
47 | 									"Active"
48 | 							)
49 | 						), 
50 | 						' ', 
51 | 						React.createElement("li", null, 
52 | 							React.createElement("a", {
53 | 								href: "#/completed", 
54 | 								className: cx({selected: nowShowing === app.COMPLETED_TODOS})}, 
55 | 									"Completed"
56 | 							)
57 | 						)
58 | 					), 
59 | 					clearButton
60 | 				)
61 | 			);
62 | 		}
63 | 	});
64 | })();
65 | 


--------------------------------------------------------------------------------
/todomvc/react/js/todoItem.js:
--------------------------------------------------------------------------------
  1 | /*jshint quotmark: false */
  2 | /*jshint white: false */
  3 | /*jshint trailing: false */
  4 | /*jshint newcap: false */
  5 | /*global React */
  6 | var app = app || {};
  7 | 
  8 | (function () {
  9 | 	'use strict';
 10 | 
 11 | 	var ESCAPE_KEY = 27;
 12 | 	var ENTER_KEY = 13;
 13 | 
 14 | 	app.TodoItem = React.createClass({displayName: "TodoItem",
 15 | 		handleSubmit: function (event) {
 16 | 			var val = this.state.editText.trim();
 17 | 			if (val) {
 18 | 				this.props.onSave(val);
 19 | 				this.setState({editText: val});
 20 | 			} else {
 21 | 				this.props.onDestroy();
 22 | 			}
 23 | 		},
 24 | 
 25 | 		handleEdit: function () {
 26 | 			this.props.onEdit();
 27 | 			this.setState({editText: this.props.todo.title});
 28 | 		},
 29 | 
 30 | 		handleKeyDown: function (event) {
 31 | 			if (event.which === ESCAPE_KEY) {
 32 | 				this.setState({editText: this.props.todo.title});
 33 | 				this.props.onCancel(event);
 34 | 			} else if (event.which === ENTER_KEY) {
 35 | 				this.handleSubmit(event);
 36 | 			}
 37 | 		},
 38 | 
 39 | 		handleChange: function (event) {
 40 | 			this.setState({editText: event.target.value});
 41 | 		},
 42 | 
 43 | 		getInitialState: function () {
 44 | 			return {editText: this.props.todo.title};
 45 | 		},
 46 | 
 47 | 		/**
 48 | 		 * This is a completely optional performance enhancement that you can
 49 | 		 * implement on any React component. If you were to delete this method
 50 | 		 * the app would still work correctly (and still be very performant!), we
 51 | 		 * just use it as an example of how little code it takes to get an order
 52 | 		 * of magnitude performance improvement.
 53 | 		 */
 54 | 		shouldComponentUpdate: function (nextProps, nextState) {
 55 | 			// We need to do full rendering here
 56 | 			if(API.FULLRENDER) return true;
 57 | 
 58 | 			return (
 59 | 				nextProps.todo !== this.props.todo ||
 60 | 				nextProps.editing !== this.props.editing ||
 61 | 				nextState.editText !== this.state.editText
 62 | 			);
 63 | 		},
 64 | 
 65 | 		/**
 66 | 		 * Safely manipulate the DOM after updating the state when invoking
 67 | 		 * `this.props.onEdit()` in the `handleEdit` method above.
 68 | 		 * For more info refer to notes at https://facebook.github.io/react/docs/component-api.html#setstate
 69 | 		 * and https://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate
 70 | 		 */
 71 | 		componentDidUpdate: function (prevProps) {
 72 | 			if (!prevProps.editing && this.props.editing) {
 73 | 				var node = React.findDOMNode(this.refs.editField);
 74 | 				node.focus();
 75 | 				node.setSelectionRange(node.value.length, node.value.length);
 76 | 			}
 77 | 		},
 78 | 
 79 | 		render: function () {
 80 | 			return (
 81 | 				React.createElement("li", {className: React.addons.classSet({
 82 | 					completed: this.props.todo.completed,
 83 | 					editing: this.props.editing
 84 | 				})}, 
 85 | 					React.createElement("div", {className: "view"}, 
 86 | 						React.createElement("input", {
 87 | 							className: "toggle", 
 88 | 							type: "checkbox", 
 89 | 							checked: this.props.todo.completed, 
 90 | 							onChange: this.props.onToggle}
 91 | 						), 
 92 | 						React.createElement("label", {onDoubleClick: this.handleEdit}, 
 93 | 							this.props.todo.title
 94 | 						), 
 95 | 						React.createElement("button", {className: "destroy", onClick: this.props.onDestroy})
 96 | 					), 
 97 | 					React.createElement("input", {
 98 | 						ref: "editField", 
 99 | 						className: "edit", 
100 | 						value: this.state.editText, 
101 | 						onBlur: this.handleSubmit, 
102 | 						onChange: this.handleChange, 
103 | 						onKeyDown: this.handleKeyDown}
104 | 					)
105 | 				)
106 | 			);
107 | 		}
108 | 	});
109 | })();
110 | 


--------------------------------------------------------------------------------
/todomvc/react/js/todoModel.js:
--------------------------------------------------------------------------------
 1 | /*jshint quotmark:false */
 2 | /*jshint white:false */
 3 | /*jshint trailing:false */
 4 | /*jshint newcap:false */
 5 | var app = app || {};
 6 | 
 7 | (function () {
 8 | 	'use strict';
 9 | 
10 | 	var Utils = app.Utils;
11 | 	// Generic "model" object. You can use whatever
12 | 	// framework you want. For this application it
13 | 	// may not even be worth separating this logic
14 | 	// out, but we do this to demonstrate one way to
15 | 	// separate out parts of your application.
16 | 	app.TodoModel = function (key) {
17 | 		this.key = key;
18 | 		this.todos = Utils.store(key);
19 | 		this.onChanges = [];
20 | 	};
21 | 
22 | 	app.TodoModel.prototype.items = function () {
23 | 		return this.todos;
24 | 	};
25 | 
26 | 	app.TodoModel.prototype.subscribe = function (onChange) {
27 | 		this.onChanges.push(onChange);
28 | 	};
29 | 
30 | 	app.TodoModel.prototype.inform = function () {
31 | 		if(API.AUTOPERSIST) Utils.store(this.key, this.todos);
32 | 		if(API.AUTORENDER) this.onChanges.forEach(function (cb) { cb(); });
33 | 	};
34 | 
35 | 	app.TodoModel.prototype.addTodo = function (title) {
36 | 		this.todos = this.todos.concat({
37 | 			id: Utils.uuid(),
38 | 			title: title,
39 | 			completed: false
40 | 		});
41 | 
42 | 		this.inform();
43 | 	};
44 | 
45 | 	app.TodoModel.prototype.toggleAll = function (checked) {
46 | 		// Note: it's usually better to use immutable data structures since they're
47 | 		// easier to reason about and React works very well with them. That's why
48 | 		// we use map() and filter() everywhere instead of mutating the array or
49 | 		// todo items themselves.
50 | 		this.todos = this.todos.map(function (todo) {
51 | 			return Utils.extend({}, todo, {completed: checked});
52 | 		});
53 | 
54 | 		this.inform();
55 | 	};
56 | 
57 | 	app.TodoModel.prototype.toggle = function (todoToToggle) {
58 | 		this.todos = this.todos.map(function (todo) {
59 | 			return todo !== todoToToggle ?
60 | 				todo :
61 | 				Utils.extend({}, todo, {completed: !todo.completed});
62 | 		});
63 | 
64 | 		this.inform();
65 | 	};
66 | 
67 | 	app.TodoModel.prototype.destroy = function (todo) {
68 | 		this.todos = this.todos.filter(function (candidate) {
69 | 			return candidate !== todo;
70 | 		});
71 | 
72 | 		this.inform();
73 | 	};
74 | 
75 | 	app.TodoModel.prototype.save = function (todoToSave, text) {
76 | 		this.todos = this.todos.map(function (todo) {
77 | 			return todo !== todoToSave ? todo : Utils.extend({}, todo, {title: text});
78 | 		});
79 | 
80 | 		this.inform();
81 | 	};
82 | 
83 | 	app.TodoModel.prototype.clearCompleted = function () {
84 | 		this.todos = this.todos.filter(function (todo) {
85 | 			return !todo.completed;
86 | 		});
87 | 
88 | 		this.inform();
89 | 	};
90 | 
91 | 	app.TodoModel.prototype.clearAll = function () {
92 | 		this.todos = [];
93 | 		this.inform();
94 | 	};
95 | 
96 | })();
97 | 


--------------------------------------------------------------------------------
/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/react/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "dependencies": {
 4 |   	"director": "^1.2.0",
 5 |     "react": "^0.13.3",
 6 |     "todomvc-app-css": "^2.0.0",
 7 |     "todomvc-common": "^1.0.0",
 8 |     "imba": "^0.11.1"
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/todomvc/react/readme.md:
--------------------------------------------------------------------------------
 1 | # Imba • [TodoMVC](http://todomvc.com) example structured like React TodoMVC
 2 | 
 3 | ## Usage
 4 | 
 5 | Clone the repository and run npm install from inside the folder.
 6 | index.html and react.html can both be accessed directly as files (also without npm / node).
 7 | 
 8 | Imba sourcecode resides in imba/
 9 | To recompile the source, make sure you have [Imba](http://imba.io) installed and run `imba watch imba/ -o js/` from root of the folder.
10 | 
11 | The benchmarking part only focuses on the actual rendering.
12 | 
13 | ## Resources
14 | 
15 | - [Website](http://imba.io)
16 | - [Repo](http://github.com/somebee/imba)
17 | - [Issues](http://github.com/somebee/imba/issues)
18 | 
19 | ## Credit
20 | 
21 | Created by [Sindre Aarsaether](http://github.com/somebee)
22 | 


--------------------------------------------------------------------------------