Merge pull request #1178 from txchen/riotjs

Add riot.js 2.0 example

Merge pull request #1178 from txchen/riotjs
Add riot.js 2.0 example
7be1d104 · Sam Saccone · 6b12eb31 · 63611db5 · 7be1d104 · 7be1d104
Commit 7be1d104 authored Sep 11, 2015 by Sam Saccone
16 changed files
--- a/examples/riotjs/.editorconfig
+++ b/examples/riotjs/.editorconfig
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[package.json]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
--- a/examples/riotjs/.gitattributes
+++ b/examples/riotjs/.gitattributes
+* text=auto
--- a/examples/riotjs/.gitignore
+++ b/examples/riotjs/.gitignore
+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
+
+node_modules/.bin
+node_modules/riot/*
+!node_modules/riot/riot.min.js
+!node_modules/riot/riot+compiler.min.js
--- a/examples/riotjs/index.html
+++ b/examples/riotjs/index.html
+<!doctype html>
+<html lang="en" data-framework="riotjs">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Riot.js • TodoMVC</title>
+		<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
+		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
+	</head>
+	<body>
+		<todo></todo>
+		<script src="node_modules/todomvc-common/base.js"></script>
+		<script src="js/todo.html" type="riot/tag"></script>
+		<script src="node_modules/riot/riot+compiler.min.js"></script>
+		<script src="js/store.js"></script>
+		<script src="js/app.js"></script>
+	</body>
+</html>
--- a/examples/riotjs/js/app.js
+++ b/examples/riotjs/js/app.js
+/*global riot, todoStorage */
+
+(function () {
+	'use strict';
+
+	riot.mount('todo', { data: todoStorage.fetch() });
+}());
--- a/examples/riotjs/js/store.js
+++ b/examples/riotjs/js/store.js
+(function (exports) {
+
+	'use strict';
+
+	var STORAGE_KEY = 'todos-riotjs';
+
+	exports.todoStorage = {
+		fetch: function () {
+			return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+		},
+		save: function (todos) {
+			localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
+		}
+	};
+
+})(window);
--- a/examples/riotjs/js/todo.html
+++ b/examples/riotjs/js/todo.html
+/*global riot, todoStorage */
+<todo>
+	<section class="todoapp">
+		<header class="header">
+			<h1>todos</h1>
+			<input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" onkeyup={ addTodo }>
+		</header>
+		<section class="main" show={ todos.length }>
+			<input class="toggle-all" type="checkbox" checked={ allDone } onclick={ toggleAll }>
+			<ul class="todo-list">
+				<li riot-tag="todoitem" class="todo { completed: t.completed, editing: t.editing }"
+						each={ t, i in filteredTodos() } todo={ t } parentview={ parent }></li>
+			</ul>
+		</section>
+		<footer class="footer" show={ todos.length }>
+			<span class="todo-count">
+				<strong>{ remaining }</strong> { remaining === 1 ? 'item' : 'items' } left
+			</span>
+			<ul class="filters">
+				<li><a class={ selected: activeFilter=='all' } href="#/all">All</a></li>
+				<li><a class={ selected: activeFilter=='active' } href="#/active">Active</a></li>
+				<li><a class={ selected: activeFilter=='completed' } href="#/completed">Completed</a></li>
+			</ul>
+			<button class="clear-completed" onclick={ removeCompleted } show={ todos.length > remaining }>
+				Clear completed</button>
+		</footer>
+	</section>
+	<footer class="info">
+		<p>Double-click to edit a todo</p>
+		<p>Written by <a href="http://github.com/txchen">Tianxiang Chen</a></p>
+		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+	</footer>
+	<script>
+	'use strict';
+
+	var ENTER_KEY = 13;
+	var self = this;
+	self.todos = opts.data || [];
+
+	riot.route.exec(function(base, filter) {
+		self.activeFilter = filter || 'all';
+	});
+
+	self.on('update', function() {
+		self.remaining = self.todos.filter(function(t) {
+			return !t.completed;
+		}).length;
+		self.allDone = self.remaining === 0;
+		self.saveTodos();
+	});
+
+	saveTodos() {
+		todoStorage.save(self.todos);
+		self.update();
+	};
+
+	filteredTodos() {
+		if (self.activeFilter === 'active') {
+			return self.todos.filter(function(t) {
+				return !t.completed;
+			});
+		} else if (self.activeFilter === 'completed') {
+			return self.todos.filter(function(t) {
+				return t.completed;
+			});
+		} else {
+			return self.todos;
+		}
+	};
+
+	addTodo(e) {
+		if (e.which === ENTER_KEY) {
+			var value = e.target.value && e.target.value.trim();
+			if (!value) {
+				return;
+			}
+			self.todos.push({ title: value, completed: false });
+			e.target.value = '';
+		}
+	};
+
+	removeTodo(todo) {
+		self.todos.some(function (t) {
+			if (todo === t) {
+				self.todos.splice(self.todos.indexOf(t), 1);
+			}
+		});
+		self.update();
+	};
+
+	toggleAll(e) {
+		self.todos.forEach(function (t) {
+			t.completed = e.target.checked;
+		});
+		return true;
+	};
+
+	removeCompleted() {
+		self.todos = self.todos.filter(function(t) {
+			return !t.completed;
+		});
+	};
+
+	riot.route(function(base, filter) {
+		self.activeFilter = filter;
+		self.update();
+	});
+	</script>
+</todo>
+
+<todoitem>
+	<div class="view">
+		<input class="toggle" type="checkbox" checked={ opts.todo.completed } onclick={ toggleTodo }>
+		<label ondblclick={ editTodo }>{ opts.todo.title }</label>
+		<button class="destroy" onclick={ removeTodo }></button>
+	</div>
+	<input name="todoeditbox" class="edit" type="text" onblur={ doneEdit } onkeyup={ editKeyUp }>
+	<script>
+	'use strict';
+
+	var ENTER_KEY = 13;
+	var ESC_KEY = 27;
+	var self = this;
+	opts.todo.editing = false;
+
+	toggleTodo() {
+		opts.todo.completed = !opts.todo.completed;
+		opts.parentview.saveTodos();
+		return true;
+	};
+
+	editTodo() {
+		opts.todo.editing = true;
+		self.todoeditbox.value = opts.todo.title;
+	};
+
+	removeTodo() {
+		opts.parentview.removeTodo(opts.todo);
+	};
+
+	doneEdit() {
+		if (!opts.todo.editing) {
+			return;
+		}
+		opts.todo.editing = false;
+		var enteredText = self.todoeditbox.value && self.todoeditbox.value.trim();
+		if (enteredText) {
+			opts.todo.title = enteredText;
+			opts.parentview.saveTodos();
+		} else {
+			self.removeTodo();
+		}
+	};
+
+	editKeyUp(e) {
+		if (e.which === ENTER_KEY) {
+			self.doneEdit();
+		} else if (e.which === ESC_KEY) {
+			self.todoeditbox.value = opts.todo.title;
+			self.doneEdit();
+		}
+	};
+
+	self.on('update', function() {
+		if (opts.todo.editing) {
+			opts.parentview.update();
+			self.todoeditbox.focus();
+		}
+	});
+	</script>
+</todoitem>
--- a/examples/riotjs/node_modules/riot/riot+compiler.min.js
+++ b/examples/riotjs/node_modules/riot/riot+compiler.min.js
+/* Riot v2.2.4, @license MIT, (c) 2015 Muut Inc. + contributors */
+(function(e,t){"use strict";var n={version:"v2.2.4",settings:{}},r=0,i="riot-",o=i+"tag",u="string",a="object",f="undefined",s="function",c=/^(?:opt(ion|group)|tbody|col|t[rhd])$/,l=["_item","_id","update","root","mount","unmount","mixin","isMounted","isLoop","tags","parent","opts","trigger","on","off","one"],p=(e&&e.document||{}).documentMode|0,d=Array.isArray;n.observable=function(e){e=e||{};var t={},n=0;e.on=function(r,i){if(k(i)){if(typeof i.id===f)i._id=n++;r.replace(/\S+/g,function(e,n){(t[e]=t[e]||[]).push(i);i.typed=n>0})}return e};e.off=function(n,r){if(n=="*")t={};else{n.replace(/\S+/g,function(e){if(r){var n=t[e];for(var i=0,o;o=n&&n[i];++i){if(o._id==r._id)n.splice(i--,1)}}else{t[e]=[]}})}return e};e.one=function(t,n){function r(){e.off(t,r);n.apply(e,arguments)}return e.on(t,r)};e.trigger=function(n){var r=[].slice.call(arguments,1),i=t[n]||[];for(var o=0,u;u=i[o];++o){if(!u.busy){u.busy=1;u.apply(e,u.typed?[n].concat(r):r);if(i[o]!==u){o--}u.busy=0}}if(t.all&&n!="all"){e.trigger.apply(e,["all",n].concat(r))}return e};return e};n.mixin=function(){var e={};return function(t,n){if(!n)return e[t];e[t]=n}}();(function(e,t,n){if(!n)return;var r=n.location,i=e.observable(),o=false,u;function a(){return r.href.split("#")[1]||""}function f(e){return e.split("/")}function s(e){if(e.type)e=a();if(e!=u){i.trigger.apply(null,["H"].concat(f(e)));u=e}}var c=e.route=function(e){if(e[0]){r.hash=e;s(e)}else{i.on("H",e)}};c.exec=function(e){e.apply(null,f(a()))};c.parser=function(e){f=e};c.stop=function(){if(o){if(n.removeEventListener)n.removeEventListener(t,s,false);else n.detachEvent("on"+t,s);i.off("*");o=false}};c.start=function(){if(!o){if(n.addEventListener)n.addEventListener(t,s,false);else n.attachEvent("on"+t,s);o=true}};c.start()})(n,"hashchange",e);var m=function(e){var t,r,i,o=/[{}]/g;return function(u){var a=n.settings.brackets||e;if(t!==a){t=a;i=a.split(" ");r=i.map(function(e){return e.replace(/(?=.)/g,"\\")})}return u instanceof RegExp?a===e?u:new RegExp(u.source.replace(o,function(e){return r[~~(e==="}")]}),u.global?"g":""):i[u]}}("{ }");var g=function(){var t={},n='"in d?d:'+(e?"window).":"global)."),r=/(['"\/])(?:[^\\]*?|\\.|.)*?\1|\.\w*|\w*:|\b(?:(?:new|typeof|in|instanceof) |(?:this|true|false|null|undefined)\b|function\s*\()|([A-Za-z_$]\w*)/g;return function(e,n){return e&&(t[e]||(t[e]=i(e)))(n)};function i(e,t){if(e.indexOf(m(0))<0){e=e.replace(/\n|\r\n?/g,"\n");return function(){return e}}e=e.replace(m(/\\{/g),"￰").replace(m(/\\}/g),"￱");t=a(e,f(e,m(/{/),m(/}/)));e=t.length===2&&!t[0]?o(t[1]):"["+t.map(function(e,t){return t%2?o(e,true):'"'+e.replace(/\n|\r\n?/g,"\\n").replace(/"/g,'\\"')+'"'}).join(",")+'].join("")';return new Function("d","return "+e.replace(/\uFFF0/g,m(0)).replace(/\uFFF1/g,m(1))+";")}function o(e,t){e=e.replace(/\n|\r\n?/g," ").replace(m(/^[{ ]+|[ }]+$|\/\*.+?\*\//g),"");return/^\s*[\w- "']+ *:/.test(e)?"["+f(e,/["' ]*[\w- ]+["' ]*:/,/,(?=["' ]*[\w- ]+["' ]*:)|}|$/).map(function(e){return e.replace(/^[ "']*(.+?)[ "']*: *(.+?),? *$/,function(e,t,n){return n.replace(/[^&|=!><]+/g,u)+'?"'+t+'":"",'})}).join("")+'].join(" ").trim()':u(e,t)}function u(e,t){e=e.trim();return!e?"":"(function(v){try{v="+e.replace(r,function(e,t,r){return r?'(("'+r+n+r+")":e})+"}catch(e){}return "+(t===true?'!v&&v!==0?"":v':"v")+"}).call(d)"}function a(e,t){var n=[];t.map(function(t,r){r=e.indexOf(t);n.push(e.slice(0,r),t);e=e.slice(r+t.length)});if(e)n.push(e);return n}function f(e,t,n){var r,i=0,o=[],u=new RegExp("("+t.source+")|("+n.source+")","g");e.replace(u,function(t,n,u,a){if(!i&&n)r=a;i+=n?1:-1;if(!i&&u!=null)o.push(e.slice(r,a+u.length))});return o}}();var v=function(e){var t={tr:"tbody",th:"tr",td:"tr",tbody:"table",col:"colgroup"},n="div";e=e&&e<10;function r(r){var o=r&&r.match(/^\s*<([-\w]+)/),u=o&&o[1].toLowerCase(),a=t[u]||n,f=R(a);f.stub=true;if(e&&u&&(o=u.match(c)))i(f,r,u,!!o[1]);else f.innerHTML=r;return f}function i(e,t,r,i){var o=R(n),u=i?"select>":"table>",a;o.innerHTML="<"+u+t+"</"+u;a=o.getElementsByTagName(r)[0];if(a)e.appendChild(a)}return r}(p);function h(e){var t=m(0),n=e.trim().slice(t.length).match(/^\s*(\S+?)\s*(?:,\s*(\S+))?\s+in\s+(.+)$/);return n?{key:n[1],pos:n[2],val:t+n[3]}:{val:e}}function b(e,t,n){var r={};r[e.key]=t;if(e.pos)r[e.pos]=n;return r}function y(e,t,n){M(e,"each");var r=S(e),i=e.outerHTML,o=!!G[r],u=G[r]||{tmpl:i},a=e.parentNode,f=document.createComment("riot placeholder"),s=[],l=E(e),p;a.insertBefore(f,e);n=h(n);t.one("premount",function(){if(a.stub)a=t.root;e.parentNode.removeChild(e)}).on("update",function(){var i=g(n.val,t);if(!d(i)){p=i?JSON.stringify(i):"";i=!i?[]:Object.keys(i).map(function(e){return b(n,e,i[e])})}var m=document.createDocumentFragment(),v=s.length,h=i.length;while(v>h){s[--v].unmount();s.splice(v,1)}for(v=0;v<h;++v){var y=!p&&!!n.key?b(n,i[v],v):i[v];if(!s[v]){(s[v]=new L(u,{parent:t,isLoop:true,hasImpl:o,root:c.test(r)?a:e.cloneNode(),item:y},e.innerHTML)).mount();m.appendChild(s[v].root)}else s[v].update(y);s[v]._item=y}a.insertBefore(m,f);if(l)t.tags[r]=s}).one("updated",function(){var e=Object.keys(t);H(a,function(n){if(n.nodeType==1&&!n.isLoop&&!n._looped){n._visited=false;n._looped=true;z(n,t,e)}})})}function w(e,t,n){H(e,function(e){if(e.nodeType==1){e.isLoop=e.isLoop||(e.parentNode&&e.parentNode.isLoop||e.getAttribute("each"))?1:0;var r=E(e);if(r&&!e.isLoop){n.push(A(r,e,t))}if(!e.isLoop)z(e,t,[])}})}function x(e,t,n){function r(e,t,r){if(t.indexOf(m(0))>=0){var i={dom:e,expr:t};n.push($(i,r))}}H(e,function(e){var n=e.nodeType;if(n==3&&e.parentNode.tagName!="STYLE")r(e,e.nodeValue);if(n!=1)return;var i=e.getAttribute("each");if(i){y(e,t,i);return false}N(e.attributes,function(t){var n=t.name,i=n.split("__")[1];r(e,t.value,{attr:i||n,bool:i});if(i){M(e,n);return false}});if(E(e))return false})}function L(e,i,o){var s=n.observable(this),c=V(i.opts)||{},p=v(e.tmpl),h=i.parent,b=i.isLoop,y=i.hasImpl,L=j(i.item),_=[],T=[],M=i.root,E=e.fn,A=M.tagName.toLowerCase(),S={},H=[];if(E&&M._tag){M._tag.unmount(true)}this.isMounted=false;M.isLoop=b;M._tag=this;this._id=r++;$(this,{parent:h,root:M,opts:c,tags:{}},L);N(M.attributes,function(e){var t=e.value;if(m(/{.*}/).test(t))S[e.name]=t});if(p.innerHTML&&!/^(select|optgroup|table|tbody|tr|col(?:group)?)$/.test(A))p.innerHTML=q(p.innerHTML,o);function R(){var e=y&&b?s:h||s;N(M.attributes,function(t){c[t.name]=g(t.value,e)});N(Object.keys(S),function(t){c[t]=g(S[t],e)})}function D(e){for(var t in L){if(typeof s[t]!==f)s[t]=e[t]}}function I(){if(!s.parent||!b)return;N(Object.keys(s.parent),function(e){var t=!~l.indexOf(e)&&~H.indexOf(e);if(typeof s[e]===f||t){if(!t)H.push(e);s[e]=s.parent[e]}})}this.update=function(e){e=j(e);I();if(e&&typeof L===a){D(e);L=e}$(s,e);R();s.trigger("update",e);C(_,s);s.trigger("updated")};this.mixin=function(){N(arguments,function(e){e=typeof e===u?n.mixin(e):e;N(Object.keys(e),function(t){if(t!="init")s[t]=k(e[t])?e[t].bind(s):e[t]});if(e.init)e.init.bind(s)()})};this.mount=function(){R();if(E)E.call(s,c);x(p,s,_);z(true);if(e.attrs||y){F(e.attrs,function(e,t){M.setAttribute(e,t)});x(s.root,s,_)}if(!s.parent||b)s.update(L);s.trigger("premount");if(b&&!y){s.root=M=p.firstChild}else{while(p.firstChild)M.appendChild(p.firstChild);if(M.stub)s.root=M=h.root}if(!s.parent||s.parent.isMounted){s.isMounted=true;s.trigger("mount")}else s.parent.one("mount",function(){if(!B(s.root)){s.parent.isMounted=s.isMounted=true;s.trigger("mount")}})};this.unmount=function(e){var n=M,r=n.parentNode,i;if(r){if(h){i=O(h);if(d(i.tags[A]))N(i.tags[A],function(e,t){if(e._id==s._id)i.tags[A].splice(t,1)});else i.tags[A]=t}else while(n.firstChild)n.removeChild(n.firstChild);if(!e)r.removeChild(n);else r.removeAttribute("riot-tag")}s.trigger("unmount");z();s.off("*");M._tag=null};function z(e){N(T,function(t){t[e?"mount":"unmount"]()});if(h){var t=e?"on":"off";if(b)h[t]("unmount",s.unmount);else h[t]("update",s.update)[t]("unmount",s.unmount)}}w(p,this,T)}function _(t,n,r,i){r[t]=function(t){var o=i._item,u=i.parent,a;if(!o)while(u&&!o){o=u._item;u=u.parent}t=t||e.event;try{t.currentTarget=r;if(!t.target)t.target=t.srcElement;if(!t.which)t.which=t.charCode||t.keyCode}catch(f){}t.item=o;if(n.call(i,t)!==true&&!/radio|check/.test(r.type)){if(t.preventDefault)t.preventDefault();t.returnValue=false}if(!t.preventUpdate){a=o?O(u):i;a.update()}}}function T(e,t,n){if(e){e.insertBefore(n,t);e.removeChild(t)}}function C(e,t){N(e,function(e,n){var r=e.dom,u=e.attr,f=g(e.expr,t),s=e.dom.parentNode;if(e.bool)f=f?u:false;else if(f==null)f="";if(s&&s.tagName=="TEXTAREA")f=(""+f).replace(/riot-/g,"");if(e.value===f)return;e.value=f;if(!u){r.nodeValue=""+f;return}M(r,u);if(k(f)){_(u,f,r,t)}else if(u=="if"){var c=e.stub,l=function(){T(c.parentNode,c,r)},p=function(){T(r.parentNode,r,c)};if(f){if(c){l();r.inStub=false;if(!B(r)){H(r,function(e){if(e._tag&&!e._tag.isMounted)e._tag.isMounted=!!e._tag.trigger("mount")})}}}else{c=e.stub=c||document.createTextNode("");if(r.parentNode)p();else(t.parent||t).one("updated",p);r.inStub=true}}else if(/^(show|hide)$/.test(u)){if(u=="hide")f=!f;r.style.display=f?"":"none"}else if(u=="value"){r.value=f}else if(P(u,i)&&u!=o){if(f)r.setAttribute(u.slice(i.length),f)}else{if(e.bool){r[u]=f;if(!f)return}if(typeof f!==a)r.setAttribute(u,f)}})}function N(e,t){for(var n=0,r=(e||[]).length,i;n<r;n++){i=e[n];if(i!=null&&t(i,n)===false)n--}return e}function k(e){return typeof e===s||false}function M(e,t){e.removeAttribute(t)}function E(e){return e.tagName&&G[e.getAttribute(o)||e.tagName.toLowerCase()]}function A(e,t,n){var r=new L(e,{root:t,parent:n},t.innerHTML),i=S(t),o=O(n),u;r.parent=o;u=o.tags[i];if(u){if(!d(u))o.tags[i]=[u];if(!~o.tags[i].indexOf(r))o.tags[i].push(r)}else{o.tags[i]=r}t.innerHTML="";return r}function O(e){var t=e;while(!E(t.root)){if(!t.parent)break;t=t.parent}return t}function S(e){var t=E(e),n=e.getAttribute("name"),r=n&&n.indexOf(m(0))<0?n:t?t.name:e.tagName.toLowerCase();return r}function $(e){var t,n=arguments;for(var r=1;r<n.length;++r){if(t=n[r]){for(var i in t){e[i]=t[i]}}}return e}function j(e){if(!(e instanceof L)&&!(e&&typeof e.trigger==s))return e;var t={};for(var n in e){if(!~l.indexOf(n))t[n]=e[n]}return t}function H(e,t){if(e){if(t(e)===false)return;else{e=e.firstChild;while(e){H(e,t);e=e.nextSibling}}}}function F(e,t){var n,r=/([-\w]+) ?= ?(?:"([^"]*)|'([^']*)|({[^}]*}))/g;while(n=r.exec(e)){t(n[1].toLowerCase(),n[2]||n[3]||n[4])}}function B(e){while(e){if(e.inStub)return true;e=e.parentNode}return false}function R(e){return document.createElement(e)}function q(e,t){return e.replace(/<(yield)\/?>(<\/\1>)?/gi,t||"")}function D(e,t){return(t||document).querySelectorAll(e)}function I(e,t){return(t||document).querySelector(e)}function V(e){function t(){}t.prototype=e;return new t}function z(e,t,n){if(e._visited)return;var r,i=e.getAttribute("id")||e.getAttribute("name");if(i){if(n.indexOf(i)<0){r=t[i];if(!r)t[i]=e;else if(d(r))r.push(e);else t[i]=[r,e]}e._visited=true}}function P(e,t){return e.slice(0,t.length)===t}var X=[],G={},J;function U(e){if(n.render)return;if(!J){J=R("style");J.setAttribute("type","text/css")}var t=document.head||document.getElementsByTagName("head")[0];if(J.styleSheet)J.styleSheet.cssText+=e;else J.innerHTML+=e;if(!J._rendered)if(J.styleSheet){document.body.appendChild(J)}else{var r=I("style[type=riot]");if(r){r.parentNode.insertBefore(J,r);r.parentNode.removeChild(r)}else t.appendChild(J)}J._rendered=true}function W(e,t,n){var r=G[t],i=e._innerHTML=e._innerHTML||e.innerHTML;e.innerHTML="";if(r&&e)r=new L(r,{root:e,opts:n},i);if(r&&r.mount){r.mount();X.push(r);return r.on("unmount",function(){X.splice(X.indexOf(r),1)})}}n.tag=function(e,t,n,r,i){if(k(r)){i=r;if(/^[\w\-]+\s?=/.test(n)){r=n;n=""}else r=""}if(n){if(k(n))i=n;else U(n)}G[e]={name:e,tmpl:t,attrs:r,fn:i};return e};n.mount=function(e,t,n){var r,i,f=[];function s(e){var t="";N(e,function(e){t+=", *["+o+'="'+e.trim()+'"]'});return t}function c(){var e=Object.keys(G);return e+s(e)}function l(e){var r;if(e.tagName){if(t&&(!(r=e.getAttribute(o))||r!=t))e.setAttribute(o,t);var i=W(e,t||e.getAttribute(o)||e.tagName.toLowerCase(),n);if(i)f.push(i)}else if(e.length){N(e,l)}}if(typeof t===a){n=t;t=0}if(typeof e===u){if(e==="*")e=i=c();else e+=s(e.split(","));r=D(e)}else r=e;if(t==="*"){t=i||c();if(r.tagName)r=D(t,r);else{var p=[];N(r,function(e){p.push(D(t,e))});r=p}t=0}if(r.tagName)l(r);else N(r,l);return f};n.update=function(){return N(X,function(e){e.update()})};n.mountTo=n.mount;var Y={html:{},css:{},js:{coffee:function(e){return CoffeeScript.compile(e,{bare:true})},es6:function(e){return babel.transform(e,{blacklist:["useStrict"]}).code},none:function(e){return e}}};Y.js.javascript=Y.js.none;Y.js.coffeescript=Y.js.coffee;n.parsers=Y;var Z=("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,"+"defaultchecked,defaultmuted,defaultselected,defer,disabled,draggable,enabled,formnovalidate,hidden,"+"indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,"+"pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,spellcheck,translate,truespeed,"+"typemustmatch,visible").split(","),K="area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr".split(","),Q=["style","src","d"],ee=/^<([\w\-]+)>(.*)<\/\1>/gim,te=/=({[^}]+})([\s\/\>]|$)/g,ne=/([\w\-]+)=(["'])([^\2]+?)\2/g,re=/{\s*([^}]+)\s*}/g,ie=/^<([\w\-]+)\s?([^>]*)>([^\x00]*[\w\/}"']>$)?([^\x00]*?)^<\/\1>/gim,oe=/<script(?:\s+type=['"]?([^>'"]+)['"]?)?>([^\x00]*?)<\/script>/gi,ue=/<style(?:\s+([^>]+))?>([^\x00]*?)<\/style>/gi,ae=/(^|\}|\{)\s*([^\{\}]+)\s*(?=\{)/g,fe=/<!--.*?-->/g,se=/<([\w\-]+)([^>]*)\/\s*>/g,ce=/\/\*[\s\S]*?\*\//g,le=/^\s*\/\/.*$/gm,pe=/(<input\s[^>]*?)type=['"]number['"]/gm;function de(e,t,n,r,i){return"riot.tag('"+e+"', '"+t+"'"+(n?", '"+n+"'":"")+(r?", '"+r.replace(/'/g,"\\'")+"'":"")+", function(opts) {"+i+"\n});"}function me(e,t,r){if(!e)return"";var i=n.util.brackets,o=i(0),u=i(1);e=e.replace(i(te),'="$1"$2');e=t.whitespace?e.replace(/\r\n?|\n/g,"\\n"):e.replace(/\s+/g," ");e=e.trim().replace(fe,"");e=e.replace(pe,"$1riot-type="+o+'"number"'+u);e=e.replace(ne,function(e,t,n,r){if(r.indexOf(o)>=0){t=t.toLowerCase();if(Q.indexOf(t)>=0)t="riot-"+t;else if(Z.indexOf(t)>=0)t="__"+t}return t+'="'+r+'"'});if(t.expr){e=e.replace(i(re),function(e,n){var i=he(n,t,r).trim().replace(/[\r\n]+/g,"").trim();if(i.slice(-1)==";")i=i.slice(0,-1);return o+i+u})}e=e.replace(se,function(e,t,n){var r="<"+t+(n?" "+n.trim():"")+">";if(K.indexOf(t.toLowerCase())==-1)r+="</"+t+">";return r});e=e.replace(/'/g,"\\'");e=e.replace(i(/\\{|\\}/g),"\\$&");if(t.compact)e=e.replace(/> </g,"><");return e}function ge(e){e=e.replace(le,"").replace(ce,"");var t=e.split("\n"),n="";t.forEach(function(e,r){var i=e.trim();if(i[0]!="}"&&~i.indexOf("(")){var o=i.match(/[{}]$/),u=o&&e.match(/^(\s+)([$\w]+)\s*\(([$\w,\s]*)\)\s*\{/);if(u&&!/^(if|while|switch|for|catch|function)$/.test(u[2])){t[r]=u[1]+"this."+u[2]+" = function("+u[3]+") {";if(o[0]=="}"){t[r]+=" "+i.slice(u[0].length-1,-1)+"}.bind(this)"}else{n=u[1]}}}if(e.slice(0,n.length+1)==n+"}"){t[r]=n+"}.bind(this);";n=""}});return t.join("\n")}function ve(e,t,n){return t.replace(ce,"").replace(ae,function(t,n,r){return n+" "+r.split(/\s*,\s*/g).map(function(t){var n=t.trim();var r=(/:scope/.test(n)?"":" ")+n.replace(/:scope/,"");return n[0]=="@"||n=="from"||n=="to"||/%$/.test(n)?n:e+r+', [riot-tag="'+e+'"]'+r}).join(",")}).trim()}function he(e,t,r){if(!e)return"";var i=t.parser||(r?n.parsers.js[r]:ge);if(!i)throw new Error('Parser not found "'+r+'"');return i(e.replace(/\r\n?/g,"\n"),t)}function be(e,t){var r=n.parsers.html[e];if(!r)throw new Error('Template parser not found "'+e+'"');return r(t.replace(/\r\n?/g,"\n"))}function ye(e,t,r,i){if(r==="scoped-css")i=1;else if(n.parsers.css[r])e=n.parsers.css[r](t,e);else if(r!=="css")throw new Error('CSS parser not found: "'+r+'"');if(i)e=ve(t,e);return e.replace(/\s+/g," ").replace(/\\/g,"\\\\").replace(/'/g,"\\'").trim()}function we(e,t){if(!t)t={};else{if(t.brackets)n.settings.brackets=t.brackets;if(t.template)e=be(t.template,e)}e=e.replace(ee,function(e,n,r){return de(n,me(r,t),"","","")});return e.replace(ie,function(e,n,r,i,o){var u="",a=t.type;if(i){if(!o.trim()){i=i.replace(oe,function(e,t,n){if(t)a=t.replace("text/","");o=n;return""})}i=i.replace(ue,function(e,t,r){var i=/(?:^|\s+)scoped(\s|=|$)/i.test(t),o=t&&t.match(/(?:^|\s+)type\s*=\s*['"]?([^'"\s]+)['"]?/i);if(o)o=o[1].replace("text/","");u+=(u?" ":"")+ye(r.trim(),n,o||"css",i);return""})}return de(n,me(i,t,a),u,me(r,""),he(o,t,a))})}var xe=e.document,Le,_e;function Te(e,t){var n=new XMLHttpRequest;n.onreadystatechange=function(){if(n.readyState==4&&(n.status==200||!n.status&&n.responseText.length))t(n.responseText)};n.open("GET",e,true);n.send("")}function Ce(e){var t=/[ \t]+/.exec(e);if(t)e=e.replace(new RegExp("^"+t[0],"gm"),"");return e}function Ne(e){var t=xe.createElement("script"),n=xe.documentElement;t.text=we(e);n.appendChild(t);n.removeChild(t)}function ke(e){var t=xe.querySelectorAll('script[type="riot/tag"]'),n=t.length;function r(){Le.trigger("ready");_e=true;if(e)e()}if(!n){r()}else{[].map.call(t,function(e){var t=e.getAttribute("src");function i(e){Ne(e);n--;if(!n){r()}}return t?Te(t,i):i(Ce(e.innerHTML))})}}n.compile=function(e,r){if(typeof e===u){if(e.trim()[0]=="<"){var i=Ce(we(e));if(!r)Ne(i);return i}else{return Te(e,function(e){var t=Ce(we(e));Ne(t);if(r)r(t,e)})}}if(typeof e!=="function")e=t;if(_e)return e&&e();if(Le){if(e)Le.on("ready",e)}else{Le=n.observable();ke(e)}};var Me=n.mount;n.mount=function(e,t,r){var i;n.compile(function(){i=Me(e,t,r)});return i};n.mountTo=n.mount;n.util={brackets:m,tmpl:g};if(typeof exports===a)module.exports=n;else if(typeof define==="function"&&define.amd)define(function(){return e.riot=n});else e.riot=n})(typeof window!="undefined"?window:void 0);
--- a/examples/riotjs/node_modules/riot/riot.min.js
+++ b/examples/riotjs/node_modules/riot/riot.min.js
+/* Riot v2.2.4, @license MIT, (c) 2015 Muut Inc. + contributors */
+(function(e,t){"use strict";var n={version:"v2.2.4",settings:{}},i=0,r="riot-",o=r+"tag",u="string",f="object",a="undefined",s="function",c=/^(?:opt(ion|group)|tbody|col|t[rhd])$/,l=["_item","_id","update","root","mount","unmount","mixin","isMounted","isLoop","tags","parent","opts","trigger","on","off","one"],p=(e&&e.document||{}).documentMode|0,d=Array.isArray;n.observable=function(e){e=e||{};var t={},n=0;e.on=function(i,r){if(M(r)){if(typeof r.id===a)r._id=n++;i.replace(/\S+/g,function(e,n){(t[e]=t[e]||[]).push(r);r.typed=n>0})}return e};e.off=function(n,i){if(n=="*")t={};else{n.replace(/\S+/g,function(e){if(i){var n=t[e];for(var r=0,o;o=n&&n[r];++r){if(o._id==i._id)n.splice(r--,1)}}else{t[e]=[]}})}return e};e.one=function(t,n){function i(){e.off(t,i);n.apply(e,arguments)}return e.on(t,i)};e.trigger=function(n){var i=[].slice.call(arguments,1),r=t[n]||[];for(var o=0,u;u=r[o];++o){if(!u.busy){u.busy=1;u.apply(e,u.typed?[n].concat(i):i);if(r[o]!==u){o--}u.busy=0}}if(t.all&&n!="all"){e.trigger.apply(e,["all",n].concat(i))}return e};return e};n.mixin=function(){var e={};return function(t,n){if(!n)return e[t];e[t]=n}}();(function(e,t,n){if(!n)return;var i=n.location,r=e.observable(),o=false,u;function f(){return i.href.split("#")[1]||""}function a(e){return e.split("/")}function s(e){if(e.type)e=f();if(e!=u){r.trigger.apply(null,["H"].concat(a(e)));u=e}}var c=e.route=function(e){if(e[0]){i.hash=e;s(e)}else{r.on("H",e)}};c.exec=function(e){e.apply(null,a(f()))};c.parser=function(e){a=e};c.stop=function(){if(o){if(n.removeEventListener)n.removeEventListener(t,s,false);else n.detachEvent("on"+t,s);r.off("*");o=false}};c.start=function(){if(!o){if(n.addEventListener)n.addEventListener(t,s,false);else n.attachEvent("on"+t,s);o=true}};c.start()})(n,"hashchange",e);var g=function(e){var t,i,r,o=/[{}]/g;return function(u){var f=n.settings.brackets||e;if(t!==f){t=f;r=f.split(" ");i=r.map(function(e){return e.replace(/(?=.)/g,"\\")})}return u instanceof RegExp?f===e?u:new RegExp(u.source.replace(o,function(e){return i[~~(e==="}")]}),u.global?"g":""):r[u]}}("{ }");var m=function(){var t={},n='"in d?d:'+(e?"window).":"global)."),i=/(['"\/])(?:[^\\]*?|\\.|.)*?\1|\.\w*|\w*:|\b(?:(?:new|typeof|in|instanceof) |(?:this|true|false|null|undefined)\b|function\s*\()|([A-Za-z_$]\w*)/g;return function(e,n){return e&&(t[e]||(t[e]=r(e)))(n)};function r(e,t){if(e.indexOf(g(0))<0){e=e.replace(/\n|\r\n?/g,"\n");return function(){return e}}e=e.replace(g(/\\{/g),"￰").replace(g(/\\}/g),"￱");t=f(e,a(e,g(/{/),g(/}/)));e=t.length===2&&!t[0]?o(t[1]):"["+t.map(function(e,t){return t%2?o(e,true):'"'+e.replace(/\n|\r\n?/g,"\\n").replace(/"/g,'\\"')+'"'}).join(",")+'].join("")';return new Function("d","return "+e.replace(/\uFFF0/g,g(0)).replace(/\uFFF1/g,g(1))+";")}function o(e,t){e=e.replace(/\n|\r\n?/g," ").replace(g(/^[{ ]+|[ }]+$|\/\*.+?\*\//g),"");return/^\s*[\w- "']+ *:/.test(e)?"["+a(e,/["' ]*[\w- ]+["' ]*:/,/,(?=["' ]*[\w- ]+["' ]*:)|}|$/).map(function(e){return e.replace(/^[ "']*(.+?)[ "']*: *(.+?),? *$/,function(e,t,n){return n.replace(/[^&|=!><]+/g,u)+'?"'+t+'":"",'})}).join("")+'].join(" ").trim()':u(e,t)}function u(e,t){e=e.trim();return!e?"":"(function(v){try{v="+e.replace(i,function(e,t,i){return i?'(("'+i+n+i+")":e})+"}catch(e){}return "+(t===true?'!v&&v!==0?"":v':"v")+"}).call(d)"}function f(e,t){var n=[];t.map(function(t,i){i=e.indexOf(t);n.push(e.slice(0,i),t);e=e.slice(i+t.length)});if(e)n.push(e);return n}function a(e,t,n){var i,r=0,o=[],u=new RegExp("("+t.source+")|("+n.source+")","g");e.replace(u,function(t,n,u,f){if(!r&&n)i=f;r+=n?1:-1;if(!r&&u!=null)o.push(e.slice(i,f+u.length))});return o}}();var v=function(e){var t={tr:"tbody",th:"tr",td:"tr",tbody:"table",col:"colgroup"},n="div";e=e&&e<10;function i(i){var o=i&&i.match(/^\s*<([-\w]+)/),u=o&&o[1].toLowerCase(),f=t[u]||n,a=R(f);a.stub=true;if(e&&u&&(o=u.match(c)))r(a,i,u,!!o[1]);else a.innerHTML=i;return a}function r(e,t,i,r){var o=R(n),u=r?"select>":"table>",f;o.innerHTML="<"+u+t+"</"+u;f=o.getElementsByTagName(i)[0];if(f)e.appendChild(f)}return i}(p);function h(e){var t=g(0),n=e.trim().slice(t.length).match(/^\s*(\S+?)\s*(?:,\s*(\S+))?\s+in\s+(.+)$/);return n?{key:n[1],pos:n[2],val:t+n[3]}:{val:e}}function y(e,t,n){var i={};i[e.key]=t;if(e.pos)i[e.pos]=n;return i}function b(e,t,n){A(e,"each");var i=S(e),r=e.outerHTML,o=!!U[i],u=U[i]||{tmpl:r},f=e.parentNode,a=document.createComment("riot placeholder"),s=[],l=O(e),p;f.insertBefore(a,e);n=h(n);t.one("premount",function(){if(f.stub)f=t.root;e.parentNode.removeChild(e)}).on("update",function(){var r=m(n.val,t);if(!d(r)){p=r?JSON.stringify(r):"";r=!r?[]:Object.keys(r).map(function(e){return y(n,e,r[e])})}var g=document.createDocumentFragment(),v=s.length,h=r.length;while(v>h){s[--v].unmount();s.splice(v,1)}for(v=0;v<h;++v){var b=!p&&!!n.key?y(n,r[v],v):r[v];if(!s[v]){(s[v]=new _(u,{parent:t,isLoop:true,hasImpl:o,root:c.test(i)?f:e.cloneNode(),item:b},e.innerHTML)).mount();g.appendChild(s[v].root)}else s[v].update(b);s[v]._item=b}f.insertBefore(g,a);if(l)t.tags[i]=s}).one("updated",function(){var e=Object.keys(t);F(f,function(n){if(n.nodeType==1&&!n.isLoop&&!n._looped){n._visited=false;n._looped=true;z(n,t,e)}})})}function w(e,t,n){F(e,function(e){if(e.nodeType==1){e.isLoop=e.isLoop||(e.parentNode&&e.parentNode.isLoop||e.getAttribute("each"))?1:0;var i=O(e);if(i&&!e.isLoop){n.push(E(i,e,t))}if(!e.isLoop)z(e,t,[])}})}function L(e,t,n){function i(e,t,i){if(t.indexOf(g(0))>=0){var r={dom:e,expr:t};n.push(k(r,i))}}F(e,function(e){var n=e.nodeType;if(n==3&&e.parentNode.tagName!="STYLE")i(e,e.nodeValue);if(n!=1)return;var r=e.getAttribute("each");if(r){b(e,t,r);return false}C(e.attributes,function(t){var n=t.name,r=n.split("__")[1];i(e,t.value,{attr:r||n,bool:r});if(r){A(e,n);return false}});if(O(e))return false})}function _(e,r,o){var s=n.observable(this),c=q(r.opts)||{},p=v(e.tmpl),h=r.parent,y=r.isLoop,b=r.hasImpl,_=j(r.item),N=[],x=[],A=r.root,O=e.fn,E=A.tagName.toLowerCase(),S={},F=[];if(O&&A._tag){A._tag.unmount(true)}this.isMounted=false;A.isLoop=y;A._tag=this;this._id=i++;k(this,{parent:h,root:A,opts:c,tags:{}},_);C(A.attributes,function(e){var t=e.value;if(g(/{.*}/).test(t))S[e.name]=t});if(p.innerHTML&&!/^(select|optgroup|table|tbody|tr|col(?:group)?)$/.test(E))p.innerHTML=D(p.innerHTML,o);function R(){var e=b&&y?s:h||s;C(A.attributes,function(t){c[t.name]=m(t.value,e)});C(Object.keys(S),function(t){c[t]=m(S[t],e)})}function I(e){for(var t in _){if(typeof s[t]!==a)s[t]=e[t]}}function V(){if(!s.parent||!y)return;C(Object.keys(s.parent),function(e){var t=!~l.indexOf(e)&&~F.indexOf(e);if(typeof s[e]===a||t){if(!t)F.push(e);s[e]=s.parent[e]}})}this.update=function(e){e=j(e);V();if(e&&typeof _===f){I(e);_=e}k(s,e);R();s.trigger("update",e);T(N,s);s.trigger("updated")};this.mixin=function(){C(arguments,function(e){e=typeof e===u?n.mixin(e):e;C(Object.keys(e),function(t){if(t!="init")s[t]=M(e[t])?e[t].bind(s):e[t]});if(e.init)e.init.bind(s)()})};this.mount=function(){R();if(O)O.call(s,c);L(p,s,N);z(true);if(e.attrs||b){$(e.attrs,function(e,t){A.setAttribute(e,t)});L(s.root,s,N)}if(!s.parent||y)s.update(_);s.trigger("premount");if(y&&!b){s.root=A=p.firstChild}else{while(p.firstChild)A.appendChild(p.firstChild);if(A.stub)s.root=A=h.root}if(!s.parent||s.parent.isMounted){s.isMounted=true;s.trigger("mount")}else s.parent.one("mount",function(){if(!B(s.root)){s.parent.isMounted=s.isMounted=true;s.trigger("mount")}})};this.unmount=function(e){var n=A,i=n.parentNode,r;if(i){if(h){r=H(h);if(d(r.tags[E]))C(r.tags[E],function(e,t){if(e._id==s._id)r.tags[E].splice(t,1)});else r.tags[E]=t}else while(n.firstChild)n.removeChild(n.firstChild);if(!e)i.removeChild(n);else i.removeAttribute("riot-tag")}s.trigger("unmount");z();s.off("*");A._tag=null};function z(e){C(x,function(t){t[e?"mount":"unmount"]()});if(h){var t=e?"on":"off";if(y)h[t]("unmount",s.unmount);else h[t]("update",s.update)[t]("unmount",s.unmount)}}w(p,this,x)}function N(t,n,i,r){i[t]=function(t){var o=r._item,u=r.parent,f;if(!o)while(u&&!o){o=u._item;u=u.parent}t=t||e.event;try{t.currentTarget=i;if(!t.target)t.target=t.srcElement;if(!t.which)t.which=t.charCode||t.keyCode}catch(a){}t.item=o;if(n.call(r,t)!==true&&!/radio|check/.test(i.type)){if(t.preventDefault)t.preventDefault();t.returnValue=false}if(!t.preventUpdate){f=o?H(u):r;f.update()}}}function x(e,t,n){if(e){e.insertBefore(n,t);e.removeChild(t)}}function T(e,t){C(e,function(e,n){var i=e.dom,u=e.attr,a=m(e.expr,t),s=e.dom.parentNode;if(e.bool)a=a?u:false;else if(a==null)a="";if(s&&s.tagName=="TEXTAREA")a=(""+a).replace(/riot-/g,"");if(e.value===a)return;e.value=a;if(!u){i.nodeValue=""+a;return}A(i,u);if(M(a)){N(u,a,i,t)}else if(u=="if"){var c=e.stub,l=function(){x(c.parentNode,c,i)},p=function(){x(i.parentNode,i,c)};if(a){if(c){l();i.inStub=false;if(!B(i)){F(i,function(e){if(e._tag&&!e._tag.isMounted)e._tag.isMounted=!!e._tag.trigger("mount")})}}}else{c=e.stub=c||document.createTextNode("");if(i.parentNode)p();else(t.parent||t).one("updated",p);i.inStub=true}}else if(/^(show|hide)$/.test(u)){if(u=="hide")a=!a;i.style.display=a?"":"none"}else if(u=="value"){i.value=a}else if(J(u,r)&&u!=o){if(a)i.setAttribute(u.slice(r.length),a)}else{if(e.bool){i[u]=a;if(!a)return}if(typeof a!==f)i.setAttribute(u,a)}})}function C(e,t){for(var n=0,i=(e||[]).length,r;n<i;n++){r=e[n];if(r!=null&&t(r,n)===false)n--}return e}function M(e){return typeof e===s||false}function A(e,t){e.removeAttribute(t)}function O(e){return e.tagName&&U[e.getAttribute(o)||e.tagName.toLowerCase()]}function E(e,t,n){var i=new _(e,{root:t,parent:n},t.innerHTML),r=S(t),o=H(n),u;i.parent=o;u=o.tags[r];if(u){if(!d(u))o.tags[r]=[u];if(!~o.tags[r].indexOf(i))o.tags[r].push(i)}else{o.tags[r]=i}t.innerHTML="";return i}function H(e){var t=e;while(!O(t.root)){if(!t.parent)break;t=t.parent}return t}function S(e){var t=O(e),n=e.getAttribute("name"),i=n&&n.indexOf(g(0))<0?n:t?t.name:e.tagName.toLowerCase();return i}function k(e){var t,n=arguments;for(var i=1;i<n.length;++i){if(t=n[i]){for(var r in t){e[r]=t[r]}}}return e}function j(e){if(!(e instanceof _)&&!(e&&typeof e.trigger==s))return e;var t={};for(var n in e){if(!~l.indexOf(n))t[n]=e[n]}return t}function F(e,t){if(e){if(t(e)===false)return;else{e=e.firstChild;while(e){F(e,t);e=e.nextSibling}}}}function $(e,t){var n,i=/([-\w]+) ?= ?(?:"([^"]*)|'([^']*)|({[^}]*}))/g;while(n=i.exec(e)){t(n[1].toLowerCase(),n[2]||n[3]||n[4])}}function B(e){while(e){if(e.inStub)return true;e=e.parentNode}return false}function R(e){return document.createElement(e)}function D(e,t){return e.replace(/<(yield)\/?>(<\/\1>)?/gi,t||"")}function I(e,t){return(t||document).querySelectorAll(e)}function V(e,t){return(t||document).querySelector(e)}function q(e){function t(){}t.prototype=e;return new t}function z(e,t,n){if(e._visited)return;var i,r=e.getAttribute("id")||e.getAttribute("name");if(r){if(n.indexOf(r)<0){i=t[r];if(!i)t[r]=e;else if(d(i))i.push(e);else t[r]=[i,e]}e._visited=true}}function J(e,t){return e.slice(0,t.length)===t}var P=[],U={},W;function X(e){if(n.render)return;if(!W){W=R("style");W.setAttribute("type","text/css")}var t=document.head||document.getElementsByTagName("head")[0];if(W.styleSheet)W.styleSheet.cssText+=e;else W.innerHTML+=e;if(!W._rendered)if(W.styleSheet){document.body.appendChild(W)}else{var i=V("style[type=riot]");if(i){i.parentNode.insertBefore(W,i);i.parentNode.removeChild(i)}else t.appendChild(W)}W._rendered=true}function Y(e,t,n){var i=U[t],r=e._innerHTML=e._innerHTML||e.innerHTML;e.innerHTML="";if(i&&e)i=new _(i,{root:e,opts:n},r);if(i&&i.mount){i.mount();P.push(i);return i.on("unmount",function(){P.splice(P.indexOf(i),1)})}}n.tag=function(e,t,n,i,r){if(M(i)){r=i;if(/^[\w\-]+\s?=/.test(n)){i=n;n=""}else i=""}if(n){if(M(n))r=n;else X(n)}U[e]={name:e,tmpl:t,attrs:i,fn:r};return e};n.mount=function(e,t,n){var i,r,a=[];function s(e){var t="";C(e,function(e){t+=", *["+o+'="'+e.trim()+'"]'});return t}function c(){var e=Object.keys(U);return e+s(e)}function l(e){var i;if(e.tagName){if(t&&(!(i=e.getAttribute(o))||i!=t))e.setAttribute(o,t);var r=Y(e,t||e.getAttribute(o)||e.tagName.toLowerCase(),n);if(r)a.push(r)}else if(e.length){C(e,l)}}if(typeof t===f){n=t;t=0}if(typeof e===u){if(e==="*")e=r=c();else e+=s(e.split(","));i=I(e)}else i=e;if(t==="*"){t=r||c();if(i.tagName)i=I(t,i);else{var p=[];C(i,function(e){p.push(I(t,e))});i=p}t=0}if(i.tagName)l(i);else C(i,l);return a};n.update=function(){return C(P,function(e){e.update()})};n.mountTo=n.mount;n.util={brackets:g,tmpl:m};if(typeof exports===f)module.exports=n;else if(typeof define==="function"&&define.amd)define(function(){return e.riot=n});else e.riot=n})(typeof window!="undefined"?window:void 0);
--- a/examples/riotjs/node_modules/todomvc-app-css/index.css
+++ b/examples/riotjs/node_modules/todomvc-app-css/index.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;
+	font-weight: inherit;
+	color: inherit;
+	-webkit-appearance: none;
+	appearance: none;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+body {
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	background: #f5f5f5;
+	color: #4d4d4d;
+	min-width: 230px;
+	max-width: 550px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+	font-weight: 300;
+}
+
+button,
+input[type="checkbox"] {
+	outline: none;
+}
+
+.hidden {
+	display: none;
+}
+
+.todoapp {
+	background: #fff;
+	margin: 130px 0 40px 0;
+	position: relative;
+	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+	            0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp input::-moz-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp input::input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp h1 {
+	position: absolute;
+	top: -155px;
+	width: 100%;
+	font-size: 100px;
+	font-weight: 100;
+	text-align: center;
+	color: rgba(175, 47, 47, 0.15);
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+}
+
+.new-todo,
+.edit {
+	position: relative;
+	margin: 0;
+	width: 100%;
+	font-size: 24px;
+	font-family: inherit;
+	font-weight: 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);
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+.new-todo {
+	padding: 16px 16px 16px 60px;
+	border: none;
+	background: rgba(0, 0, 0, 0.003);
+	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+.main {
+	position: relative;
+	z-index: 2;
+	border-top: 1px solid #e6e6e6;
+}
+
+label[for='toggle-all'] {
+	display: none;
+}
+
+.toggle-all {
+	position: absolute;
+	top: -55px;
+	left: -12px;
+	width: 60px;
+	height: 34px;
+	text-align: center;
+	border: none; /* Mobile Safari */
+}
+
+.toggle-all:before {
+	content: '❯';
+	font-size: 22px;
+	color: #e6e6e6;
+	padding: 10px 27px 10px 27px;
+}
+
+.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 solid #ededed;
+}
+
+.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;
+	border: none; /* Mobile Safari */
+	-webkit-appearance: none;
+	appearance: none;
+}
+
+.todo-list li .toggle:after {
+	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>');
+}
+
+.todo-list li .toggle:checked:after {
+	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>');
+}
+
+.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;
+	transition: color 0.4s;
+}
+
+.todo-list li.completed label {
+	color: #d9d9d9;
+	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: 30px;
+	color: #cc9a9a;
+	margin-bottom: 11px;
+	transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover {
+	color: #af5b5e;
+}
+
+.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: 10px 15px;
+	height: 20px;
+	text-align: center;
+	border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+	content: '';
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 50px;
+	overflow: hidden;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+	            0 8px 0 -3px #f6f6f6,
+	            0 9px 1px -3px rgba(0, 0, 0, 0.2),
+	            0 16px 0 -6px #f6f6f6,
+	            0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+	float: left;
+	text-align: left;
+}
+
+.todo-count strong {
+	font-weight: 300;
+}
+
+.filters {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: absolute;
+	right: 0;
+	left: 0;
+}
+
+.filters li {
+	display: inline;
+}
+
+.filters li a {
+	color: inherit;
+	margin: 3px;
+	padding: 3px 7px;
+	text-decoration: none;
+	border: 1px solid transparent;
+	border-radius: 3px;
+}
+
+.filters li a.selected,
+.filters li a:hover {
+	border-color: rgba(175, 47, 47, 0.1);
+}
+
+.filters li a.selected {
+	border-color: rgba(175, 47, 47, 0.2);
+}
+
+.clear-completed,
+html .clear-completed:active {
+	float: right;
+	position: relative;
+	line-height: 20px;
+	text-decoration: none;
+	cursor: pointer;
+	position: relative;
+}
+
+.clear-completed:hover {
+	text-decoration: underline;
+}
+
+.info {
+	margin: 65px auto 0;
+	color: #bfbfbf;
+	font-size: 10px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+	text-align: center;
+}
+
+.info p {
+	line-height: 1;
+}
+
+.info a {
+	color: inherit;
+	text-decoration: none;
+	font-weight: 400;
+}
+
+.info a:hover {
+	text-decoration: underline;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox
+*/
+@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 {
+		-webkit-transform: rotate(90deg);
+		transform: rotate(90deg);
+		-webkit-appearance: none;
+		appearance: none;
+	}
+}
+
+@media (max-width: 430px) {
+	.footer {
+		height: 50px;
+	}
+
+	.filters {
+		bottom: 10px;
+	}
+}
--- a/examples/riotjs/node_modules/todomvc-common/base.css
+++ b/examples/riotjs/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;
+	}
+}
--- a/examples/riotjs/node_modules/todomvc-common/base.js
+++ b/examples/riotjs/node_modules/todomvc-common/base.js
+/* global _ */
+(function () {
+	'use strict';
+
+	/* jshint ignore:start */
+	// 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') {
+		(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') {
+			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.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) {
+		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);
+	};
+
+	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);
+})();
--- a/examples/riotjs/package.json
+++ b/examples/riotjs/package.json
+{
+  "private": true,
+  "dependencies": {
+    "todomvc-app-css": "^2.0.0",
+    "todomvc-common": "^1.0.1",
+    "riot": "^2.2.4"
+  }
+}
--- a/examples/riotjs/readme.md
+++ b/examples/riotjs/readme.md
+# Riot.js TodoMVC Example
+
+> Riot.js is a React-like user interface micro-library.
+
+> Riot is against the current trend of boilerplate and unneeded complexity. The team think that a small, powerful API and concise syntax are extremely important things on a client-side library.
+
+> _[Riot.js - riotjs.com](http://riotjs.com/)_
+
+## Resources
+
+- [Website](http://riotjs.com/)
+- [Documentation](http://riotjs.com/guide/)
+- [FAQ](http://riotjs.com/faq/)
+
+### Articles
+
+- [Compare Riot with React and Polymer](http://riotjs.com/compare/)
+- [The react tutorial for riot](https://juriansluiman.nl/article/154/the-react-tutorial-for-riot)
+
+### Support
+
+- [Gitter chat room](https://gitter.im/riot/riot)
+
+*Let us [know](https://github.com/tastejs/todomvc/issues) if you discover anything worth sharing.*
+
+## Implementation
+
+Riot is tiny and super flexible, there are many different ways to use riot. For example, you can use compiler to compile the tags files, you can also use browserify to build bundled javascript, you can even use the tiny Riot compiler on your page and compile tags on the fly.
+
+This example is using compiler on the page to compile the tag file(js/todo.html).
+
+This example is following TodoMvc's [coding style](https://github.com/tastejs/todomvc/blob/master/codestyle.md), however officially Riot recommend [different coding style](https://github.com/riot/riot/blob/master/CONTRIBUTING.md), FYI.
+
+
+## Credit
+
+Created by [Tianxiang Chen](https://github.com/txchen)
--- a/index.html
+++ b/index.html
@@ -275,6 +275,9 @@
 								<li>
 									<a href="examples/angular2/" data-source="http://angular.io" data-content="Angular is a development platform for building mobile and desktop web applications">Angular 2.0</a>
 								</li>
+								<li class="routing">
+									<a href="examples/riotjs/" data-source="http://riotjs.com/" data-content="Riot.js is a React-like user interface micro-library.">Riot</a>
+								</li>
 							</ul>
 						</div>


--- a/learn.json
+++ b/learn.json
@@ -1769,6 +1769,37 @@
 			}]
 		}]
 	},
+	"riotjs": {
+		"name": "Riot.js",
+		"description": "Riot.js is a React-like user interface micro-library.",
+		"homepage": "http://riotjs.com/",
+		"examples": [{
+			"name": "Example",
+			"url": "examples/riotjs"
+		}],
+		"link_groups": [{
+			"heading": "Official Resources",
+			"links": [{
+				"name": "Documentation",
+				"url": "http://riotjs.com/guide/"
+			}, {
+				"name": "API Reference",
+				"url": "http://riotjs.com/api/"
+			}, {
+				"name": "Examples",
+				"url": "https://github.com/riot/riot#demos"
+			}, {
+				"name": "Riot.js on GitHub",
+				"url": "https://github.com/riot/riot"
+			}]
+		}, {
+			"heading": "Community",
+			"links": [{
+				"name": "Gitter chat room",
+				"url": "https://gitter.im/riot/riot"
+			}]
+		}]
+	},
 	"sammyjs": {
 		"name": "Sammy.js",
 		"description": "A small web framework with class.",