Merge pull request #1375 from tastejs/dart-updates

Vanilla dart app updates

.jscsrc

@@ -23,7 +23,11 @@
 		"function",
 		"typeof"
 	],
-	"excludeFiles": ["**/node_modules/**", "**/bower_components/**"],
+	"excludeFiles": [
+		"**/node_modules/**",
+		"**/bower_components/**",
+		"examples/vanilladart/**/*.js"
+	],
 	"requireSpaceBeforeBlockStatements": true,
 	"requireParenthesesAroundIIFE": true,
 	"requireSpacesInConditionalExpression": true,

examples/vanilladart/.bowerrc

-{
-	"directory": "web/bower_components"
-}

examples/vanilladart/.gitignore

 packages
 pubspec.lock
+
+node_modules/todomvc-app-css/*
+!node_modules/todomvc-app-css/index.css
+
+node_modules/todomvc-common/*
+!node_modules/todomvc-common/base.css
+!node_modules/todomvc-common/base.js

examples/vanilladart/.jshintignore

+**/*.js

examples/vanilladart/bower.json

-{
-  "name": "dart",
-  "version": "0.0.0",
-  "dependencies": {
-    "todomvc-common": "~0.3.0"
-  }
-}

examples/vanilladart/build/web/bower_components/todomvc-common/base.css

-html,
-body {
-	margin: 0;
-	padding: 0;
-}
-
-button {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	background: none;
-	font-size: 100%;
-	vertical-align: baseline;
-	font-family: inherit;
-	color: inherit;
-	-webkit-appearance: none;
-	-ms-appearance: none;
-	-o-appearance: none;
-	appearance: none;
-}
-
-body {
-	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	line-height: 1.4em;
-	background: #eaeaea url('bg.png');
-	color: #4d4d4d;
-	width: 550px;
-	margin: 0 auto;
-	-webkit-font-smoothing: antialiased;
-	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
-	-o-font-smoothing: antialiased;
-	font-smoothing: antialiased;
-}
-
-button,
-input[type="checkbox"] {
-  outline: none;
-}
-
-#todoapp {
-	background: #fff;
-	background: rgba(255, 255, 255, 0.9);
-	margin: 130px 0 40px 0;
-	border: 1px solid #ccc;
-	position: relative;
-	border-top-left-radius: 2px;
-	border-top-right-radius: 2px;
-	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
-				0 25px 50px 0 rgba(0, 0, 0, 0.15);
-}
-
-#todoapp:before {
-	content: '';
-	border-left: 1px solid #f5d6d6;
-	border-right: 1px solid #f5d6d6;
-	width: 2px;
-	position: absolute;
-	top: 0;
-	left: 40px;
-	height: 100%;
-}
-
-#todoapp input::-webkit-input-placeholder {
-	font-style: italic;
-}
-
-#todoapp input::-moz-placeholder {
-	font-style: italic;
-	color: #a9a9a9;
-}
-
-#todoapp h1 {
-	position: absolute;
-	top: -120px;
-	width: 100%;
-	font-size: 70px;
-	font-weight: bold;
-	text-align: center;
-	color: #b3b3b3;
-	color: rgba(255, 255, 255, 0.3);
-	text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
-	-webkit-text-rendering: optimizeLegibility;
-	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
-	-o-text-rendering: optimizeLegibility;
-	text-rendering: optimizeLegibility;
-}
-
-#header {
-	padding-top: 15px;
-	border-radius: inherit;
-}
-
-#header:before {
-	content: '';
-	position: absolute;
-	top: 0;
-	right: 0;
-	left: 0;
-	height: 15px;
-	z-index: 2;
-	border-bottom: 1px solid #6c615c;
-	background: #8d7d77;
-	background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
-	background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
-	background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
-	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
-	border-top-left-radius: 1px;
-	border-top-right-radius: 1px;
-}
-
-#new-todo,
-.edit {
-	position: relative;
-	margin: 0;
-	width: 100%;
-	font-size: 24px;
-	font-family: inherit;
-	line-height: 1.4em;
-	border: 0;
-	outline: none;
-	color: inherit;
-	padding: 6px;
-	border: 1px solid #999;
-	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-moz-box-sizing: border-box;
-	-ms-box-sizing: border-box;
-	-o-box-sizing: border-box;
-	box-sizing: border-box;
-	-webkit-font-smoothing: antialiased;
-	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
-	-o-font-smoothing: antialiased;
-	font-smoothing: antialiased;
-}
-
-#new-todo {
-	padding: 16px 16px 16px 60px;
-	border: none;
-	background: rgba(0, 0, 0, 0.02);
-	z-index: 2;
-	box-shadow: none;
-}
-
-#main {
-	position: relative;
-	z-index: 2;
-	border-top: 1px dotted #adadad;
-}
-
-label[for='toggle-all'] {
-	display: none;
-}
-
-#toggle-all {
-	position: absolute;
-	top: -42px;
-	left: -4px;
-	width: 40px;
-	text-align: center;
-	/* Mobile Safari */
-	border: none;
-}
-
-#toggle-all:before {
-	content: '»';
-	font-size: 28px;
-	color: #d9d9d9;
-	padding: 0 25px 7px;
-}
-
-#toggle-all:checked:before {
-	color: #737373;
-}
-
-#todo-list {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-
-#todo-list li {
-	position: relative;
-	font-size: 24px;
-	border-bottom: 1px dotted #ccc;
-}
-
-#todo-list li:last-child {
-	border-bottom: none;
-}
-
-#todo-list li.editing {
-	border-bottom: none;
-	padding: 0;
-}
-
-#todo-list li.editing .edit {
-	display: block;
-	width: 506px;
-	padding: 13px 17px 12px 17px;
-	margin: 0 0 0 43px;
-}
-
-#todo-list li.editing .view {
-	display: none;
-}
-
-#todo-list li .toggle {
-	text-align: center;
-	width: 40px;
-	/* auto, since non-WebKit browsers doesn't support input styling */
-	height: auto;
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	margin: auto 0;
-	/* Mobile Safari */
-	border: none;
-	-webkit-appearance: none;
-	-ms-appearance: none;
-	-o-appearance: none;
-	appearance: none;
-}
-
-#todo-list li .toggle:after {
-	content: '✔';
-	/* 40 + a couple of pixels visual adjustment */
-	line-height: 43px;
-	font-size: 20px;
-	color: #d9d9d9;
-	text-shadow: 0 -1px 0 #bfbfbf;
-}
-
-#todo-list li .toggle:checked:after {
-	color: #85ada7;
-	text-shadow: 0 1px 0 #669991;
-	bottom: 1px;
-	position: relative;
-}
-
-#todo-list li label {
-	white-space: pre;
-	word-break: break-word;
-	padding: 15px 60px 15px 15px;
-	margin-left: 45px;
-	display: block;
-	line-height: 1.2;
-	-webkit-transition: color 0.4s;
-	transition: color 0.4s;
-}
-
-#todo-list li.completed label {
-	color: #a9a9a9;
-	text-decoration: line-through;
-}
-
-#todo-list li .destroy {
-	display: none;
-	position: absolute;
-	top: 0;
-	right: 10px;
-	bottom: 0;
-	width: 40px;
-	height: 40px;
-	margin: auto 0;
-	font-size: 22px;
-	color: #a88a8a;
-	-webkit-transition: all 0.2s;
-	transition: all 0.2s;
-}
-
-#todo-list li .destroy:hover {
-	text-shadow: 0 0 1px #000,
-				 0 0 10px rgba(199, 107, 107, 0.8);
-	-webkit-transform: scale(1.3);
-	transform: scale(1.3);
-}
-
-#todo-list li .destroy:after {
-	content: '✖';
-}
-
-#todo-list li:hover .destroy {
-	display: block;
-}
-
-#todo-list li .edit {
-	display: none;
-}
-
-#todo-list li.editing:last-child {
-	margin-bottom: -1px;
-}
-
-#footer {
-	color: #777;
-	padding: 0 15px;
-	position: absolute;
-	right: 0;
-	bottom: -31px;
-	left: 0;
-	height: 20px;
-	z-index: 1;
-	text-align: center;
-}
-
-#footer:before {
-	content: '';
-	position: absolute;
-	right: 0;
-	bottom: 31px;
-	left: 0;
-	height: 50px;
-	z-index: -1;
-	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
-				0 6px 0 -3px rgba(255, 255, 255, 0.8),
-				0 7px 1px -3px rgba(0, 0, 0, 0.3),
-				0 43px 0 -6px rgba(255, 255, 255, 0.8),
-				0 44px 2px -6px rgba(0, 0, 0, 0.2);
-}
-
-#todo-count {
-	float: left;
-	text-align: left;
-}
-
-#filters {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-	position: absolute;
-	right: 0;
-	left: 0;
-}
-
-#filters li {
-	display: inline;
-}
-
-#filters li a {
-	color: #83756f;
-	margin: 2px;
-	text-decoration: none;
-}
-
-#filters li a.selected {
-	font-weight: bold;
-}
-
-#clear-completed {
-	float: right;
-	position: relative;
-	line-height: 20px;
-	text-decoration: none;
-	background: rgba(0, 0, 0, 0.1);
-	font-size: 11px;
-	padding: 0 10px;
-	border-radius: 3px;
-	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
-}
-
-#clear-completed:hover {
-	background: rgba(0, 0, 0, 0.15);
-	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
-}
-
-#info {
-	margin: 65px auto 0;
-	color: #a6a6a6;
-	font-size: 12px;
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
-	text-align: center;
-}
-
-#info a {
-	color: inherit;
-}
-
-/*
-	Hack to remove background from Mobile Safari.
-	Can't use it globally since it destroys checkboxes in Firefox and Opera
-*/
-
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-	#toggle-all,
-	#todo-list li .toggle {
-		background: none;
-	}
-
-	#todo-list li .toggle {
-		height: 40px;
-	}
-
-	#toggle-all {
-		top: -56px;
-		left: -15px;
-		width: 65px;
-		height: 41px;
-		-webkit-transform: rotate(90deg);
-		transform: rotate(90deg);
-		-webkit-appearance: none;
-		appearance: none;
-	}
-}
-
-.hidden {
-	display: none;
-}
-
-hr {
-	margin: 20px 0;
-	border: 0;
-	border-top: 1px dashed #C5C5C5;
-	border-bottom: 1px dashed #F7F7F7;
-}
-
-.learn a {
-	font-weight: normal;
-	text-decoration: none;
-	color: #b83f45;
-}
-
-.learn a:hover {
-	text-decoration: underline;
-	color: #787e7e;
-}
-
-.learn h3,
-.learn h4,
-.learn h5 {
-	margin: 10px 0;
-	font-weight: 500;
-	line-height: 1.2;
-	color: #000;
-}
-
-.learn h3 {
-	font-size: 24px;
-}
-
-.learn h4 {
-	font-size: 18px;
-}
-
-.learn h5 {
-	margin-bottom: 0;
-	font-size: 14px;
-}
-
-.learn ul {
-	padding: 0;
-	margin: 0 0 30px 25px;
-}
-
-.learn li {
-	line-height: 20px;
-}
-
-.learn p {
-	font-size: 15px;
-	font-weight: 300;
-	line-height: 1.3;
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
-.quote {
-	border: none;
-	margin: 20px 0 60px 0;
-}
-
-.quote p {
-	font-style: italic;
-}
-
-.quote p:before {
-	content: '“';
-	font-size: 50px;
-	opacity: .15;
-	position: absolute;
-	top: -20px;
-	left: 3px;
-}
-
-.quote p:after {
-	content: '”';
-	font-size: 50px;
-	opacity: .15;
-	position: absolute;
-	bottom: -42px;
-	right: 3px;
-}
-
-.quote footer {
-	position: absolute;
-	bottom: -40px;
-	right: 0;
-}
-
-.quote footer img {
-	border-radius: 3px;
-}
-
-.quote footer a {
-	margin-left: 5px;
-	vertical-align: middle;
-}
-
-.speech-bubble {
-	position: relative;
-	padding: 10px;
-	background: rgba(0, 0, 0, .04);
-	border-radius: 5px;
-}
-
-.speech-bubble:after {
-	content: '';
-	position: absolute;
-	top: 100%;
-	right: 30px;
-	border: 13px solid transparent;
-	border-top-color: rgba(0, 0, 0, .04);
-}
-
-.learn-bar > .learn {
-	position: absolute;
-	width: 272px;
-	top: 8px;
-	left: -300px;
-	padding: 10px;
-	border-radius: 5px;
-	background-color: rgba(255, 255, 255, .6);
-	-webkit-transition-property: left;
-	transition-property: left;
-	-webkit-transition-duration: 500ms;
-	transition-duration: 500ms;
-}
-
-@media (min-width: 899px) {
-	.learn-bar {
-		width: auto;
-		margin: 0 0 0 300px;
-	}
-
-	.learn-bar > .learn {
-		left: 8px;
-	}
-
-	.learn-bar #todoapp {
-		width: 550px;
-		margin: 130px auto 40px auto;
-	}
-}

examples/vanilladart/build/web/bower_components/todomvc-common/base.js

-(function () {
-	'use strict';
-
-	// Underscore's Template Module
-	// Courtesy of underscorejs.org
-	var _ = (function (_) {
-		_.defaults = function (object) {
-			if (!object) {
-				return object;
-			}
-			for (var argsIndex = 1, argsLength = arguments.length; argsIndex < argsLength; argsIndex++) {
-				var iterable = arguments[argsIndex];
-				if (iterable) {
-					for (var key in iterable) {
-						if (object[key] == null) {
-							object[key] = iterable[key];
-						}
-					}
-				}
-			}
-			return object;
-		}
-
-		// By default, Underscore uses ERB-style template delimiters, change the
-		// following template settings to use alternative delimiters.
-		_.templateSettings = {
-			evaluate    : /<%([\s\S]+?)%>/g,
-			interpolate : /<%=([\s\S]+?)%>/g,
-			escape      : /<%-([\s\S]+?)%>/g
-		};
-
-		// When customizing `templateSettings`, if you don't want to define an
-		// interpolation, evaluation or escaping regex, we need one that is
-		// guaranteed not to match.
-		var noMatch = /(.)^/;
-
-		// Certain characters need to be escaped so that they can be put into a
-		// string literal.
-		var escapes = {
-			"'":      "'",
-			'\\':     '\\',
-			'\r':     'r',
-			'\n':     'n',
-			'\t':     't',
-			'\u2028': 'u2028',
-			'\u2029': 'u2029'
-		};
-
-		var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
-
-		// JavaScript micro-templating, similar to John Resig's implementation.
-		// Underscore templating handles arbitrary delimiters, preserves whitespace,
-		// and correctly escapes quotes within interpolated code.
-		_.template = function(text, data, settings) {
-			var render;
-			settings = _.defaults({}, settings, _.templateSettings);
-
-			// Combine delimiters into one regular expression via alternation.
-			var matcher = new RegExp([
-				(settings.escape || noMatch).source,
-				(settings.interpolate || noMatch).source,
-				(settings.evaluate || noMatch).source
-			].join('|') + '|$', 'g');
-
-			// Compile the template source, escaping string literals appropriately.
-			var index = 0;
-			var source = "__p+='";
-			text.replace(matcher, function(match, escape, interpolate, evaluate, offset) {
-				source += text.slice(index, offset)
-					.replace(escaper, function(match) { return '\\' + escapes[match]; });
-
-				if (escape) {
-					source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";
-				}
-				if (interpolate) {
-					source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
-				}
-				if (evaluate) {
-					source += "';\n" + evaluate + "\n__p+='";
-				}
-				index = offset + match.length;
-				return match;
-			});
-			source += "';\n";
-
-			// If a variable is not specified, place data values in local scope.
-			if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';
-
-			source = "var __t,__p='',__j=Array.prototype.join," +
-				"print=function(){__p+=__j.call(arguments,'');};\n" +
-				source + "return __p;\n";
-
-			try {
-				render = new Function(settings.variable || 'obj', '_', source);
-			} catch (e) {
-				e.source = source;
-				throw e;
-			}
-
-			if (data) return render(data, _);
-			var template = function(data) {
-				return render.call(this, data, _);
-			};
-
-			// Provide the compiled function source as a convenience for precompilation.
-			template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';
-
-			return template;
-		};
-
-		return _;
-	})({});
-
-	if (location.hostname === 'todomvc.com') {
-		window._gaq = [['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
-	}
-
-	function redirect() {
-		if (location.hostname === 'tastejs.github.io') {
-			location.href = location.href.replace('tastejs.github.io/todomvc', 'todomvc.com');
-		}
-	}
-
-	function findRoot() {
-		var base = location.href.indexOf('examples/');
-		return location.href.substr(0, base);
-	}
-
-	function getFile(file, callback) {
-		if (!location.host) {
-			return console.info('Miss the info bar? Run TodoMVC from a server to avoid a cross-origin error.');
-		}
-
-		var xhr = new XMLHttpRequest();
-
-		xhr.open('GET', findRoot() + file, true);
-		xhr.send();
-
-		xhr.onload = function () {
-			if (xhr.status === 200 && callback) {
-				callback(xhr.responseText);
-			}
-		};
-	}
-
-	function Learn(learnJSON, config) {
-		if (!(this instanceof Learn)) {
-			return new Learn(learnJSON, config);
-		}
-
-		var template, framework;
-
-		if (typeof learnJSON !== 'object') {
-			try {
-				learnJSON = JSON.parse(learnJSON);
-			} catch (e) {
-				return;
-			}
-		}
-
-		if (config) {
-			template = config.template;
-			framework = config.framework;
-		}
-
-		if (!template && learnJSON.templates) {
-			template = learnJSON.templates.todomvc;
-		}
-
-		if (!framework && document.querySelector('[data-framework]')) {
-			framework = document.querySelector('[data-framework]').dataset.framework;
-		}
-
-		this.template = template;
-
-		if (learnJSON.backend) {
-			this.frameworkJSON = learnJSON.backend;
-			this.append({
-				backend: true
-			});
-		} else if (learnJSON[framework]) {
-			this.frameworkJSON = learnJSON[framework];
-			this.append();
-		}
-	}
-
-	Learn.prototype.append = function (opts) {
-		var aside = document.createElement('aside');
-		aside.innerHTML = _.template(this.template, this.frameworkJSON);
-		aside.className = 'learn';
-
-		if (opts && opts.backend) {
-			// Remove demo link
-			var sourceLinks = aside.querySelector('.source-links');
-			var heading = sourceLinks.firstElementChild;
-			var sourceLink = sourceLinks.lastElementChild;
-			// Correct link path
-			var href = sourceLink.getAttribute('href');
-			sourceLink.setAttribute('href', href.substr(href.lastIndexOf('http')));
-			sourceLinks.innerHTML = heading.outerHTML + sourceLink.outerHTML;
-		} else {
-			// Localize demo links
-			var demoLinks = aside.querySelectorAll('.demo-link');
-			Array.prototype.forEach.call(demoLinks, function (demoLink) {
-				if (demoLink.getAttribute('href').substr(0, 4) !== 'http') {
-					demoLink.setAttribute('href', findRoot() + demoLink.getAttribute('href'));
-				}
-			});
-		}
-
-		document.body.className = (document.body.className + ' learn-bar').trim();
-		document.body.insertAdjacentHTML('afterBegin', aside.outerHTML);
-	};
-
-	redirect();
-	getFile('learn.json', Learn);
-})();

examples/vanilladart/build/web/dart/packages/browser/dart.js

+// Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+(function() {
+// Bootstrap support for Dart scripts on the page as this script.
+if (navigator.userAgent.indexOf('(Dart)') === -1) {
+  // TODO:
+  // - Support in-browser compilation.
+  // - Handle inline Dart scripts.
+
+  // Fall back to compiled JS. Run through all the scripts and
+  // replace them if they have a type that indicate that they source
+  // in Dart code (type="application/dart").
+  var scripts = document.getElementsByTagName("script");
+  var length = scripts.length;
+  for (var i = 0; i < length; ++i) {
+    if (scripts[i].type == "application/dart") {
+      // Remap foo.dart to foo.dart.js.
+      if (scripts[i].src && scripts[i].src != '') {
+        var script = document.createElement('script');
+        script.src = scripts[i].src.replace(/\.dart(?=\?|$)/, '.dart.js');
+        var parent = scripts[i].parentNode;
+        // TODO(vsm): Find a solution for issue 8455 that works with more
+        // than one script.
+        document.currentScript = script;
+        parent.replaceChild(script, scripts[i]);
+      }
+    }
+  }
+}
+})();

examples/vanilladart/build/web/dart/packages/browser/interop.js

+// Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+// TODO(jmesserly): remove this script after a deprecation period.
+if (typeof console == "object" && typeof console.warn == "function") {
+  console.warn('<script src="packages/browser/interop.js"> is no longer ' +
+      'needed for dart:js. See http://pub.dartlang.org/packages/browser.');
+}

examples/vanilladart/build/web/index.html

@@ -3,22 +3,23 @@
 	<head>
 		<meta charset="utf-8">
 		<title>Dart • TodoMVC</title>
-		<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
+		<link rel="stylesheet" href="../../node_modules/todomvc-common/base.css">
+		<link rel="stylesheet" href="../../node_modules/todomvc-app-css/index.css">
 	</head>
 	<body>
-		<section id="todoapp">
-			<header id="header">
+		<section class="todoapp">
+			<header class="header">
 				<h1>todos</h1>
-				<input id="new-todo" placeholder="What needs to be done?" autofocus>
+				<input class="new-todo" placeholder="What needs to be done?" autofocus>
 			</header>
-			<section id="main">
-				<input id="toggle-all" type="checkbox">
+			<section class="main">
+				<input class="toggle-all" type="checkbox">
 				<label for="toggle-all">Mark all as complete</label>
-				<ul id="todo-list"></ul>
+				<ul class="todo-list"></ul>
 			</section>
-			<footer id="footer">
-				<span id="todo-count"><strong>0</strong> item left</span>
-				<ul id="filters">
+			<footer class="footer">
+				<span class="todo-count"><strong>0</strong> item left</span>
+				<ul class="filters">
 					<li>
 						<a class="selected" href="#/">All</a>
 					</li>
@@ -29,15 +30,15 @@
 						<a href="#/completed">Completed</a>
 					</li>
 				</ul>
-				<button id="clear-completed">Clear completed</button>
+				<button class="clear-completed">Clear completed</button>
 			</footer>
 		</section>
-		<footer id="info">
+		<footer class="info">
 			<p>Double-click to edit a todo</p>
 			<p>Created by <a href="http://mlorber.net">Mathieu Lorber</a></p>
 			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 		</footer>
-		<script src="bower_components/todomvc-common/base.js"></script>
+		<script src="../../node_modules/todomvc-common/base.js"></script>
 		<script type="application/dart" src="dart/app.dart"></script>
 		<script src="packages/browser/dart.js"></script>
 	</body>

examples/vanilladart/node_modules/todomvc-common/base.css

+hr {
+	margin: 20px 0;
+	border: 0;
+	border-top: 1px dashed #c5c5c5;
+	border-bottom: 1px dashed #f7f7f7;
+}
+
+.learn a {
+	font-weight: normal;
+	text-decoration: none;
+	color: #b83f45;
+}
+
+.learn a:hover {
+	text-decoration: underline;
+	color: #787e7e;
+}
+
+.learn h3,
+.learn h4,
+.learn h5 {
+	margin: 10px 0;
+	font-weight: 500;
+	line-height: 1.2;
+	color: #000;
+}
+
+.learn h3 {
+	font-size: 24px;
+}
+
+.learn h4 {
+	font-size: 18px;
+}
+
+.learn h5 {
+	margin-bottom: 0;
+	font-size: 14px;
+}
+
+.learn ul {
+	padding: 0;
+	margin: 0 0 30px 25px;
+}
+
+.learn li {
+	line-height: 20px;
+}
+
+.learn p {
+	font-size: 15px;
+	font-weight: 300;
+	line-height: 1.3;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+#issue-count {
+	display: none;
+}
+
+.quote {
+	border: none;
+	margin: 20px 0 60px 0;
+}
+
+.quote p {
+	font-style: italic;
+}
+
+.quote p:before {
+	content: '“';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	top: -20px;
+	left: 3px;
+}
+
+.quote p:after {
+	content: '”';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	bottom: -42px;
+	right: 3px;
+}
+
+.quote footer {
+	position: absolute;
+	bottom: -40px;
+	right: 0;
+}
+
+.quote footer img {
+	border-radius: 3px;
+}
+
+.quote footer a {
+	margin-left: 5px;
+	vertical-align: middle;
+}
+
+.speech-bubble {
+	position: relative;
+	padding: 10px;
+	background: rgba(0, 0, 0, .04);
+	border-radius: 5px;
+}
+
+.speech-bubble:after {
+	content: '';
+	position: absolute;
+	top: 100%;
+	right: 30px;
+	border: 13px solid transparent;
+	border-top-color: rgba(0, 0, 0, .04);
+}
+
+.learn-bar > .learn {
+	position: absolute;
+	width: 272px;
+	top: 8px;
+	left: -300px;
+	padding: 10px;
+	border-radius: 5px;
+	background-color: rgba(255, 255, 255, .6);
+	transition-property: left;
+	transition-duration: 500ms;
+}
+
+@media (min-width: 899px) {
+	.learn-bar {
+		width: auto;
+		padding-left: 300px;
+	}
+
+	.learn-bar > .learn {
+		left: 8px;
+	}
+}

examples/vanilladart/web/bower_components/todomvc-common/base.js → examples/vanilladart/node_modules/todomvc-common/base.js

+/* global _ */
 (function () {
 	'use strict';
 
+	/* jshint ignore:start */
 	// Underscore's Template Module
 	// Courtesy of underscorejs.org
 	var _ = (function (_) {
@@ -112,8 +114,14 @@
 	})({});
 
 	if (location.hostname === 'todomvc.com') {
-		window._gaq = [['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
+		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+		})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+		ga('create', 'UA-31081062-1', 'auto');
+		ga('send', 'pageview');
 	}
+	/* jshint ignore:end */
 
 	function redirect() {
 		if (location.hostname === 'tastejs.github.io') {
@@ -175,13 +183,17 @@
 
 		if (learnJSON.backend) {
 			this.frameworkJSON = learnJSON.backend;
+			this.frameworkJSON.issueLabel = framework;
 			this.append({
 				backend: true
 			});
 		} else if (learnJSON[framework]) {
 			this.frameworkJSON = learnJSON[framework];
+			this.frameworkJSON.issueLabel = framework;
 			this.append();
 		}
+
+		this.fetchIssueCount();
 	}
 
 	Learn.prototype.append = function (opts) {
@@ -212,6 +224,26 @@
 		document.body.insertAdjacentHTML('afterBegin', aside.outerHTML);
 	};
 
+	Learn.prototype.fetchIssueCount = function () {
+		var issueLink = document.getElementById('issue-count-link');
+		if (issueLink) {
+			var url = issueLink.href.replace('https://github.com', 'https://api.github.com/repos');
+			var xhr = new XMLHttpRequest();
+			xhr.open('GET', url, true);
+			xhr.onload = function (e) {
+				var parsedResponse = JSON.parse(e.target.responseText);
+				if (parsedResponse instanceof Array) {
+					var count = parsedResponse.length;
+					if (count !== 0) {
+						issueLink.innerHTML = 'This app has ' + count + ' open issues';
+						document.getElementById('issue-count').style.display = 'inline';
+					}
+				}
+			};
+			xhr.send();
+		}
+	};
+
 	redirect();
 	getFile('learn.json', Learn);
 })();

examples/vanilladart/package.json

+{
+  "private": true,
+  "dependencies": {
+    "todomvc-common": "^1.0.0",
+    "todomvc-app-css": "^2.0.0"
+  }
+}

examples/vanilladart/readme.md

@@ -41,14 +41,11 @@ need to run `pub build` to prep the app for browsers without Dart VM.
 
 ## Installing the SDK
 
-First, download [Dart Editor][editor] (which includes the Dart SDK)
-or the [Dart SDK][sdk]. Put the SDK's bin directory on your PATH.
+First, the [Dart SDK][sdk]. Put the SDK's bin directory on your PATH.
 
 ## Installing packages
 
-Dart Editor automatically runs Dart's package manager to install
-package dependencies. If you did not open the project in Dart Editor,
-you need to manually install the dependencies:
+Run the following commands to install the dependencies
 
 ```
 cd examples/vanilladart
@@ -112,6 +109,5 @@ This TodoMVC application was created by [Mathieu Lorber](http://mlorber.net).
 [buildstatus]: https://drone.io/mlorber/todomvc-dart/latest
 [sdk]: https://www.dartlang.org/tools/sdk/
 [pub]: http://pub.dartlang.org
-[editor]: https://www.dartlang.org/tools/editor/
 [pkglayout]: http://pub.dartlang.org/doc/package-layout.html
 [Dartium]: https://www.dartlang.org/tools/dartium/

examples/vanilladart/web/dart/TodoApp.dart

@@ -3,16 +3,16 @@ part of todomvc;
 class TodoApp {
   List<TodoWidget> todoWidgets = new List<TodoWidget>();
 
-  Element todoListElement = querySelector('#todo-list');
-  Element mainElement = querySelector('#main');
-  InputElement checkAllCheckboxElement = querySelector('#toggle-all');
-  Element footerElement = querySelector('#footer');
-  Element countElement = querySelector('#todo-count');
-  Element clearCompletedElement = querySelector('#clear-completed');
-  Element showAllElement = querySelector('#filters a[href="#/"]');
-  Element showActiveElement = querySelector('#filters a[href="#/active"]');
+  Element todoListElement = querySelector('.todo-list');
+  Element mainElement = querySelector('.main');
+  InputElement checkAllCheckboxElement = querySelector('.toggle-all');
+  Element footerElement = querySelector('.footer');
+  Element countElement = querySelector('.todo-count');
+  Element clearCompletedElement = querySelector('.clear-completed');
+  Element showAllElement = querySelector('.filters a[href="#/"]');
+  Element showActiveElement = querySelector('.filters a[href="#/active"]');
   Element showCompletedElement =
-      querySelector('#filters a[href="#/completed"]');
+      querySelector('.filters a[href="#/completed"]');
 
   TodoApp() {
     initLocalStorage();
@@ -36,7 +36,7 @@ class TodoApp {
   }
 
   void initElementEventListeners() {
-    InputElement newTodoElement = querySelector('#new-todo');
+    InputElement newTodoElement = querySelector('.new-todo');
 
     newTodoElement.onKeyDown.listen((KeyboardEvent e) {
       if (e.keyCode == KeyCode.ENTER) {

examples/vanilladart/web/index.html

@@ -3,22 +3,23 @@
 	<head>
 		<meta charset="utf-8">
 		<title>Dart • TodoMVC</title>
-		<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
+		<link rel="stylesheet" href="../../node_modules/todomvc-common/base.css">
+		<link rel="stylesheet" href="../../node_modules/todomvc-app-css/index.css">
 	</head>
 	<body>
-		<section id="todoapp">
-			<header id="header">
+		<section class="todoapp">
+			<header class="header">
 				<h1>todos</h1>
-				<input id="new-todo" placeholder="What needs to be done?" autofocus>
+				<input class="new-todo" placeholder="What needs to be done?" autofocus>
 			</header>
-			<section id="main">
-				<input id="toggle-all" type="checkbox">
+			<section class="main">
+				<input class="toggle-all" type="checkbox">
 				<label for="toggle-all">Mark all as complete</label>
-				<ul id="todo-list"></ul>
+				<ul class="todo-list"></ul>
 			</section>
-			<footer id="footer">
-				<span id="todo-count"><strong>0</strong> item left</span>
-				<ul id="filters">
+			<footer class="footer">
+				<span class="todo-count"><strong>0</strong> item left</span>
+				<ul class="filters">
 					<li>
 						<a class="selected" href="#/">All</a>
 					</li>
@@ -29,15 +30,15 @@
 						<a href="#/completed">Completed</a>
 					</li>
 				</ul>
-				<button id="clear-completed">Clear completed</button>
+				<button class="clear-completed">Clear completed</button>
 			</footer>
 		</section>
-		<footer id="info">
+		<footer class="info">
 			<p>Double-click to edit a todo</p>
 			<p>Created by <a href="http://mlorber.net">Mathieu Lorber</a></p>
 			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 		</footer>
-		<script src="bower_components/todomvc-common/base.js"></script>
+		<script src="../../node_modules/todomvc-common/base.js"></script>
 		<script type="application/dart" src="dart/app.dart"></script>
 		<script src="packages/browser/dart.js"></script>
 	</body>

tests/allTests.js

@@ -38,7 +38,7 @@ var exceptions = [
 	{ name: 'chaplin-brunch', path: 'examples/chaplin-brunch/public' },
 	{ name: 'angular-dart', path: 'examples/angular-dart/web' },
 	{ name: 'duel', path: 'examples/duel/www' },
-	{ name: 'dart', path: 'examples/vanilladart/build/' },
+	{ name: 'vanilladart', path: 'examples/vanilladart/build/web' },
 	{ name: 'canjs_require', path: 'examples/canjs_require/' },
 	{ name: 'troopjs', path: 'examples/troopjs_require/' },
 	{ name: 'thorax_lumbar', path: 'examples/thorax_lumbar/public' }