Skip to content

T
todomvc
Commit 4f61c48a authored by TasteBot's avatar TasteBot
Browse files
Options

update the build files for gh-pages [ci skip]

parent 0cef66c4
Show whitespace changes
Inline Side-by-side
Showing with 1088 additions and 1 deletion
examples/riotjs/.editorconfig 0 → 100644
View file @ 4f61c48a
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
examples/riotjs/.gitignore 0 → 100644
View file @ 4f61c48a
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
examples/riotjs/index.html 0 → 100644
View file @ 4f61c48a
<!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>
examples/riotjs/js/app.js 0 → 100644
View file @ 4f61c48a
/*global riot, todoStorage */
(function () {
'use strict';
riot.mount('todo', { data: todoStorage.fetch() });
}());
examples/riotjs/js/store.js 0 → 100644
View file @ 4f61c48a
(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);
examples/riotjs/js/todo.html 0 → 100644
View file @ 4f61c48a
/*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>
examples/riotjs/node_modules/riot/riot+compiler.min.js 0 → 100644
View file @ 4f61c48a
/* 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);
examples/riotjs/node_modules/riot/riot.min.js 0 → 100644
View file @ 4f61c48a
/* 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);
examples/riotjs/node_modules/todomvc-app-css/index.css 0 → 100644
View file @ 4f61c48a
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;
}
}
examples/riotjs/node_modules/todomvc-common/base.css 0 → 100644
View file @ 4f61c48a
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/riotjs/node_modules/todomvc-common/base.js 0 → 100644
View file @ 4f61c48a
/* 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);
})();
examples/riotjs/package.json 0 → 100644
View file @ 4f61c48a
{
"private": true,
"dependencies": {
"todomvc-app-css": "^2.0.0",
"todomvc-common": "^1.0.1",
"riot": "^2.2.4"
}
}
examples/riotjs/readme.md 0 → 100644
View file @ 4f61c48a
# 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)
index.html
View file @ 4f61c48a
......@@ -7,6 +7,6 @@
</p><ul class="js-app-list-inner applist js"><li class="routing"><a href="examples/spine" data-source="http://spinejs.com" data-content="Spine is a lightweight framework for building JavaScript web applications. Spine gives you an MVC structure and then gets out of your way, allowing you to concentrate on the fun stuff, building awesome web applications.">Spine</a></li><li class="routing"><a href="examples/vanilladart/build/web" data-source="http://dartlang.org" data-content="Dart firstly targets the development of modern and large scale browser-side web apps. It's an object oriented language with a C-style syntax. It has two run modes : it can be compiled to JS, and will later run in native VM in compliant browsers (just in a dedicated Chromium provided with Dart SDK for the moment).">Dart</a></li><li class="routing"><a href="examples/gwt" data-source="https://developers.google.com/web-toolkit/" data-content="Google Web Toolkit (GWT) is an MVP development toolkit for building and optimizing complex browser-based applications. GWT is used by many products at Google, including Google AdWords.">GWT</a></li><li class="routing"><a href="examples/closure" data-source="http://code.google.com/closure/library/" data-content="The Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library. You can pull just what you need from a large set of reusable UI widgets and controls, and from lower-level utilities for DOM manipulation, server communication, animation, data structures, unit testing, rich-text editing, and more.">Closure</a></li><li class="routing"><a href="examples/elm" data-source="http://elm-lang.org" data-content="A functional reactive language for interactive applications">Elm</a></li><li><a href="examples/angular-dart/web" data-source="https://github.com/angular/angular.dart" data-content="Dart firstly targets the development of modern and large scale browser-side web apps. It's an object oriented language with a C-style syntax. AngularDart is a port of Angular to Dart.">AngularDart</a></li><li><a href="examples/typescript-backbone" data-source="http://typescriptlang.org" data-content="TypeScript is a language for application-scale JavaScript development. It offers classes, modules, interfaces and type-checking at compile time to help you build robust components.">TypeScript <br>+ Backbone.js</a></li><li><a href="examples/typescript-angular" data-source="http://typescriptlang.org" data-content="An AngularJS + TypeScript implementation of TodoMVC. The only significant difference between this and the vanilla Angular app is that dependency injection is done via annotated constructors, which allows minification of JavaScript.">TypeScript <br>+ AngularJS</a></li><li><a href="examples/serenadejs" data-source="https://github.com/elabs/serenade.js" data-content="Serenade.js is yet another MVC client side JavaScript framework. Why do we indulge in recreating the wheel? We believe that Serenade.js more closely follows the ideas of classical MVC than competing frameworks.">Serenade.js</a></li><li class="routing"><a href="examples/reagent" data-source="https://reagent-project.github.io/" data-content="Reagent provides a minimalistic interface between ClojureScript and React.">Reagent</a></li></ul></div><div class="js-app-list" data-app-list="labs"><p class="applist-intro">
These are examples written in JavaScript that
we are still evaluating.
</p><ul class="js-app-list-inner applist js"><li class="routing"><a href="examples/thorax" data-source="http://thoraxjs.org" data-content="An opinionated, battle tested Backbone + Handlebars framework to build large scale web applications.">Thorax</a></li><li class="routing"><a href="examples/chaplin-brunch/public" data-source="http://chaplinjs.org" data-content="Chaplin is an architecture for JavaScript applications using the Backbone.js library. Chaplin addresses Backbone’s limitations by providing a lightweight and flexible structure that features well-proven design patterns and best practises.">Chaplin + Brunch</a></li><li class="routing"><a href="examples/backbone_require" data-source="http://requirejs.org" data-content="RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.">Backbone.js + RequireJS</a></li><li><a href="examples/knockoutjs_require" data-source="http://knockoutjs.com" data-content="This project is an adaptation of /examples/knockoutjs with require.js.">KnockoutJS + RequireJS</a></li><li class="routing"><a href="examples/angularjs_require" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. This is an example of using it with AMD modules.">AngularJS + RequireJS</a></li><li class="routing"><a href="examples/canjs_require" data-source="http://canjs.us" data-content="CanJS is a client-side, JavaScript framework that makes building rich web applications easy. The AMD version lets you use the framework in a fully modular fashion and will only what you actually need.">CanJS + RequireJS</a></li><li class="routing"><a href="examples/thorax_lumbar/public" data-source="http://walmartlabs.github.com/lumbar" data-content="An opinionated, battle tested Backbone + Handlebars framework to build large scale web applications. This implementation uses Lumbar, a route based module loader.">Thorax + Lumbar</a></li><li class="routing"><a href="examples/somajs_require" data-source="http://somajs.github.com/somajs" data-content="soma.js is a framework created to build scalable and maintainable javascript applications.">soma.js + RequireJS</a></li><li class="routing"><a href="examples/durandal" data-source="http://durandaljs.com/" data-content="Single Page Apps Done Right">Durandal</a></li><li class="routing"><a href="examples/lavaca_require" data-source="http://getlavaca.com" data-content="A curated collection of tools for building mobile web applications.">Lavaca + RequireJS</a></li><li><a href="examples/cujo/index.html" data-source="http://cujojs.com" data-content="cujoJS is an architectural framework for building highly modular, scalable, maintainable applications in Javascript. It provides architectural plumbing, such as modules (AMD and CommonJS), declarative application composition, declarative connections, and aspect oriented programming.">cujoJS</a></li><li><a href="examples/montage" data-source="http://montagejs.org" data-content="Montage simplifies the development of rich HTML5 applications by providing modular components, real-time two-way data binding, CommonJS dependency management, and many more conveniences.">Montage</a></li><li class="routing"><a href="examples/sammyjs" data-source="http://sammyjs.org" data-content="Sammy.js is a tiny JavaScript framework developed to ease the pain and provide a basic structure for developing JavaScript applications.">Sammy.js</a></li><li><a href="examples/somajs" data-source="http://somajs.github.com/somajs" data-content="soma.js is a framework created to build scalable and maintainable javascript applications.">soma.js</a></li><li><a href="examples/duel/www" data-source="https://bitbucket.org/mckamey/duel/wiki/Home" data-content="DUEL is a dual-side templating engine using HTML for layout and 100% pure JavaScript as the binding language. The same views may be executed both directly in the browser (client-side template) and on the server (server-side template).">DUEL</a></li><li class="routing"><a href="examples/kendo" data-source="http://www.kendoui.com/" data-content="Kendo UI is a comprehensive HTML5, JavaScript framework for modern web and mobile app development">Kendo UI</a></li><li class="routing"><a href="examples/puremvc" data-source="http://puremvc.github.com" data-content="PureMVC is a lightweight framework for creating applications based upon the classic Model-View-Controller design meta-pattern.">PureMVC</a></li><li><a href="examples/olives" data-source="https://github.com/flams/olives" data-content="Olives is a JS MVC framework that helps you create realtime UIs. It includes a set of AMD/CommonJS modules that are easily extensive, a high level of abstraction to reduce boilerplate and is based on socket.io, to provide a powerful means to communicate with node.js.">Olives</a></li><li><a href="examples/dijon" data-source="https://github.com/creynders/dijon-framework" data-content="Dijon is an IOC and DI micro-framework for Javascript. Originally it was meant to be a port of Robotlegs, but deviated to something quite different. It remains however heavily inspired by Robotlegs, and more specifically Swiftsuspenders.">Dijon</a></li><li class="routing"><a href="examples/rappidjs" data-source="http://www.rappidjs.com" data-content="rAppid.js is a declarative JavaScript framework for rapid web application development. It supports dependency loading, Model-View binding, View-Model binding, dependency injection and i18n.">rAppid.js</a></li><li><a href="examples/extjs_deftjs" data-source="http://deftjs.org/" data-content="Essential extensions for enterprise web and mobile application development with Ext JS and Sencha Touch">DeftJS + ExtJS</a></li><li class="routing"><a href="examples/ariatemplates" data-source="http://ariatemplates.com/" data-content="Aria Templates has been designed for web apps that are used 8+ hours a day, and that need to display and process high amount of data with a minimum of bandwidth consumption.">Aria Templates</a></li><li class="routing"><a href="examples/enyo_backbone" data-source="http://enyojs.com/" data-content="Enyo is a simple but powerful encapsulation model, which helps you factor application functionality into self-contained building blocks that are easy to reuse and maintain.">Enyo +<br>Backbone.js</a></li><li class="routing"><a href="examples/angularjs-perf" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. A version with several performance optimizations.">AngularJS <br>(optimized)</a></li><li class="routing"><a href="examples/sapui5" data-source="http://scn.sap.com/community/developer-center/front-end" data-content="SAPUI5 is SAP's HTML5-based UI technology that allows you to build rich, interactive Web applications.">SAPUI5</a></li><li class="routing"><a href="examples/exoskeleton" data-source="http://exosjs.com/" data-content="A faster and leaner Backbone for your HTML5 apps.">Exoskeleton</a></li><li class="routing"><a href="examples/atmajs" data-source="http://atmajs.com/" data-content="HMVC and the component-based architecture for building client, server or hybrid applications">Atma.js</a></li><li><a href="examples/ractive" data-source="http://ractivejs.org" data-content="Ractive.js is a next-generation DOM manipulation library, optimised for developer sanity.">Ractive.js</a></li><li><a href="examples/componentjs" data-source="http://componentjs.com" data-content="ComponentJS is a stand-alone MPL-licensed Open Source library for JavaScript, providing a powerful run-time Component System for hierarchically structuring the User-Interface (UI) dialogs of complex HTML5-based Rich Clients (aka Single-Page-Apps) — under maximum applied Separation of Concerns (SoC) architecture principle, through optional Model, View and Controller component roles, with sophisticated hierarchical Event, Service, Hook, Model, Socket and Property mechanisms, and fully independent and agnostic of the particular UI widget toolkit.">ComponentJS</a></li><li><a href="examples/react-backbone" data-source="http://facebook.github.io/react/" data-content="This React example integrates Backbone for its model and router. It is a showcase of third-party library integration for developers wishing to use React together with a different JavaScript framework.">React + <br>Backbone.js</a></li><li><a href="examples/aurelia" data-source="http://aurelia.io/" data-content="Aurelia is a next generation JavaScript client framework that leverages simple conventions to empower your creativity">Aurelia</a></li><li class="routing"><a href="examples/foam" data-source="http://foam-framework.github.io/foam/" data-content="FOAM is a deeply MVC Javascript metaprogramming framework being developed by a team at Google.">FOAM</a></li><li class="routing"><a href="examples/webrx" data-source="http://webrxjs.org" data-content="WebRx is a Javascript MVVM-Framework that combines functional-reactive programming with declarative Data-Binding, Templating and Client-Side Routing. The framework is built on top of ReactiveX for Javascript (RxJs) which is a powerful set of libraries for processing and querying asynchronous data-streams that can originate from diverse sources such as Http-Requests, Input-Events, Timers and much more.">WebRx</a></li><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></ul></div></div><ul class="legend"><li><span class="label">R</span> = App also demonstrates routing</li></ul><hr><h2>Real-time</h2><ul class="applist"><li><a href="http://todomvcapp.meteor.com" data-source="http://meteor.com" data-content="Meteor is an ultra-simple environment for building modern websites. A Meteor application is a mix of JavaScript that runs inside a client web browser, JavaScript that runs on the Meteor server inside a Node.js container, and all the supporting HTML fragments, CSS rules, and static assets. Meteor automates the packaging and transmission of these different components. And, it is quite flexible about how you choose to structure those components in your file tree.">Meteor</a></li><li class="routing"><a href="http://todomvc-socketstream.herokuapp.com" data-source="http://www.socketstream.org" data-content="SocketStream is a fast, modular Node.js web framework dedicated to building realtime single-page apps">SocketStream</a></li><li class="routing"><a href="examples/firebase-angular" data-source="https://www.firebase.com" data-content="Firebase is a scalable realtime backend that lets you build apps without managing servers. Firebase persists and updates JSON data in realtime and is best used in combination with a JavaScript MV* framework such as AngularJS or Backbone.">Firebase + AngularJS</a></li></ul><hr><h2>Node.js</h2><ul class="applist"><li><a href="http://gcloud-todos.appspot.com" data-source="http://googlecloudplatform.github.io/gcloud-node/" data-content="An Express backend implementation for the AngularJS front end using Google Cloud Client Library for Node.js.">Express + gcloud-node</a></li></ul><hr><h2>Compare these to a non-framework implementation</h2><ul class="applist"><li class="routing"><a href="examples/vanillajs" data-source="https://developer.mozilla.org/en/JavaScript" data-content="You know JavaScript right? :P">Vanilla JS</a></li><li class="routing"><a href="examples/jquery" data-source="http://jquery.com" data-content="jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.">jQuery</a></li></ul></div></div><hr><div class="row"><div class="col-md-6 quotes"><blockquote class="quote speech-bubble"><p></p><footer><img width="40" height="40" alt=""><a></a></footer></blockquote></div><div class="col-md-6"><img class="screenshot" src="site-assets/screenshot.png" width="558" height="246" alt="Todo app screenshot"></div></div><hr><div class="row"><div class="col-md-4"><h2>New in 1.3</h2><ul class="whats-new"><li>We now have 64 applications.
</p><ul class="js-app-list-inner applist js"><li class="routing"><a href="examples/thorax" data-source="http://thoraxjs.org" data-content="An opinionated, battle tested Backbone + Handlebars framework to build large scale web applications.">Thorax</a></li><li class="routing"><a href="examples/chaplin-brunch/public" data-source="http://chaplinjs.org" data-content="Chaplin is an architecture for JavaScript applications using the Backbone.js library. Chaplin addresses Backbone’s limitations by providing a lightweight and flexible structure that features well-proven design patterns and best practises.">Chaplin + Brunch</a></li><li class="routing"><a href="examples/backbone_require" data-source="http://requirejs.org" data-content="RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.">Backbone.js + RequireJS</a></li><li><a href="examples/knockoutjs_require" data-source="http://knockoutjs.com" data-content="This project is an adaptation of /examples/knockoutjs with require.js.">KnockoutJS + RequireJS</a></li><li class="routing"><a href="examples/angularjs_require" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. This is an example of using it with AMD modules.">AngularJS + RequireJS</a></li><li class="routing"><a href="examples/canjs_require" data-source="http://canjs.us" data-content="CanJS is a client-side, JavaScript framework that makes building rich web applications easy. The AMD version lets you use the framework in a fully modular fashion and will only what you actually need.">CanJS + RequireJS</a></li><li class="routing"><a href="examples/thorax_lumbar/public" data-source="http://walmartlabs.github.com/lumbar" data-content="An opinionated, battle tested Backbone + Handlebars framework to build large scale web applications. This implementation uses Lumbar, a route based module loader.">Thorax + Lumbar</a></li><li class="routing"><a href="examples/somajs_require" data-source="http://somajs.github.com/somajs" data-content="soma.js is a framework created to build scalable and maintainable javascript applications.">soma.js + RequireJS</a></li><li class="routing"><a href="examples/durandal" data-source="http://durandaljs.com/" data-content="Single Page Apps Done Right">Durandal</a></li><li class="routing"><a href="examples/lavaca_require" data-source="http://getlavaca.com" data-content="A curated collection of tools for building mobile web applications.">Lavaca + RequireJS</a></li><li><a href="examples/cujo/index.html" data-source="http://cujojs.com" data-content="cujoJS is an architectural framework for building highly modular, scalable, maintainable applications in Javascript. It provides architectural plumbing, such as modules (AMD and CommonJS), declarative application composition, declarative connections, and aspect oriented programming.">cujoJS</a></li><li><a href="examples/montage" data-source="http://montagejs.org" data-content="Montage simplifies the development of rich HTML5 applications by providing modular components, real-time two-way data binding, CommonJS dependency management, and many more conveniences.">Montage</a></li><li class="routing"><a href="examples/sammyjs" data-source="http://sammyjs.org" data-content="Sammy.js is a tiny JavaScript framework developed to ease the pain and provide a basic structure for developing JavaScript applications.">Sammy.js</a></li><li><a href="examples/somajs" data-source="http://somajs.github.com/somajs" data-content="soma.js is a framework created to build scalable and maintainable javascript applications.">soma.js</a></li><li><a href="examples/duel/www" data-source="https://bitbucket.org/mckamey/duel/wiki/Home" data-content="DUEL is a dual-side templating engine using HTML for layout and 100% pure JavaScript as the binding language. The same views may be executed both directly in the browser (client-side template) and on the server (server-side template).">DUEL</a></li><li class="routing"><a href="examples/kendo" data-source="http://www.kendoui.com/" data-content="Kendo UI is a comprehensive HTML5, JavaScript framework for modern web and mobile app development">Kendo UI</a></li><li class="routing"><a href="examples/puremvc" data-source="http://puremvc.github.com" data-content="PureMVC is a lightweight framework for creating applications based upon the classic Model-View-Controller design meta-pattern.">PureMVC</a></li><li><a href="examples/olives" data-source="https://github.com/flams/olives" data-content="Olives is a JS MVC framework that helps you create realtime UIs. It includes a set of AMD/CommonJS modules that are easily extensive, a high level of abstraction to reduce boilerplate and is based on socket.io, to provide a powerful means to communicate with node.js.">Olives</a></li><li><a href="examples/dijon" data-source="https://github.com/creynders/dijon-framework" data-content="Dijon is an IOC and DI micro-framework for Javascript. Originally it was meant to be a port of Robotlegs, but deviated to something quite different. It remains however heavily inspired by Robotlegs, and more specifically Swiftsuspenders.">Dijon</a></li><li class="routing"><a href="examples/rappidjs" data-source="http://www.rappidjs.com" data-content="rAppid.js is a declarative JavaScript framework for rapid web application development. It supports dependency loading, Model-View binding, View-Model binding, dependency injection and i18n.">rAppid.js</a></li><li><a href="examples/extjs_deftjs" data-source="http://deftjs.org/" data-content="Essential extensions for enterprise web and mobile application development with Ext JS and Sencha Touch">DeftJS + ExtJS</a></li><li class="routing"><a href="examples/ariatemplates" data-source="http://ariatemplates.com/" data-content="Aria Templates has been designed for web apps that are used 8+ hours a day, and that need to display and process high amount of data with a minimum of bandwidth consumption.">Aria Templates</a></li><li class="routing"><a href="examples/enyo_backbone" data-source="http://enyojs.com/" data-content="Enyo is a simple but powerful encapsulation model, which helps you factor application functionality into self-contained building blocks that are easy to reuse and maintain.">Enyo +<br>Backbone.js</a></li><li class="routing"><a href="examples/angularjs-perf" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. A version with several performance optimizations.">AngularJS <br>(optimized)</a></li><li class="routing"><a href="examples/sapui5" data-source="http://scn.sap.com/community/developer-center/front-end" data-content="SAPUI5 is SAP's HTML5-based UI technology that allows you to build rich, interactive Web applications.">SAPUI5</a></li><li class="routing"><a href="examples/exoskeleton" data-source="http://exosjs.com/" data-content="A faster and leaner Backbone for your HTML5 apps.">Exoskeleton</a></li><li class="routing"><a href="examples/atmajs" data-source="http://atmajs.com/" data-content="HMVC and the component-based architecture for building client, server or hybrid applications">Atma.js</a></li><li><a href="examples/ractive" data-source="http://ractivejs.org" data-content="Ractive.js is a next-generation DOM manipulation library, optimised for developer sanity.">Ractive.js</a></li><li><a href="examples/componentjs" data-source="http://componentjs.com" data-content="ComponentJS is a stand-alone MPL-licensed Open Source library for JavaScript, providing a powerful run-time Component System for hierarchically structuring the User-Interface (UI) dialogs of complex HTML5-based Rich Clients (aka Single-Page-Apps) — under maximum applied Separation of Concerns (SoC) architecture principle, through optional Model, View and Controller component roles, with sophisticated hierarchical Event, Service, Hook, Model, Socket and Property mechanisms, and fully independent and agnostic of the particular UI widget toolkit.">ComponentJS</a></li><li><a href="examples/react-backbone" data-source="http://facebook.github.io/react/" data-content="This React example integrates Backbone for its model and router. It is a showcase of third-party library integration for developers wishing to use React together with a different JavaScript framework.">React + <br>Backbone.js</a></li><li><a href="examples/aurelia" data-source="http://aurelia.io/" data-content="Aurelia is a next generation JavaScript client framework that leverages simple conventions to empower your creativity">Aurelia</a></li><li class="routing"><a href="examples/foam" data-source="http://foam-framework.github.io/foam/" data-content="FOAM is a deeply MVC Javascript metaprogramming framework being developed by a team at Google.">FOAM</a></li><li class="routing"><a href="examples/webrx" data-source="http://webrxjs.org" data-content="WebRx is a Javascript MVVM-Framework that combines functional-reactive programming with declarative Data-Binding, Templating and Client-Side Routing. The framework is built on top of ReactiveX for Javascript (RxJs) which is a powerful set of libraries for processing and querying asynchronous data-streams that can originate from diverse sources such as Http-Requests, Input-Events, Timers and much more.">WebRx</a></li><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></div><ul class="legend"><li><span class="label">R</span> = App also demonstrates routing</li></ul><hr><h2>Real-time</h2><ul class="applist"><li><a href="http://todomvcapp.meteor.com" data-source="http://meteor.com" data-content="Meteor is an ultra-simple environment for building modern websites. A Meteor application is a mix of JavaScript that runs inside a client web browser, JavaScript that runs on the Meteor server inside a Node.js container, and all the supporting HTML fragments, CSS rules, and static assets. Meteor automates the packaging and transmission of these different components. And, it is quite flexible about how you choose to structure those components in your file tree.">Meteor</a></li><li class="routing"><a href="http://todomvc-socketstream.herokuapp.com" data-source="http://www.socketstream.org" data-content="SocketStream is a fast, modular Node.js web framework dedicated to building realtime single-page apps">SocketStream</a></li><li class="routing"><a href="examples/firebase-angular" data-source="https://www.firebase.com" data-content="Firebase is a scalable realtime backend that lets you build apps without managing servers. Firebase persists and updates JSON data in realtime and is best used in combination with a JavaScript MV* framework such as AngularJS or Backbone.">Firebase + AngularJS</a></li></ul><hr><h2>Node.js</h2><ul class="applist"><li><a href="http://gcloud-todos.appspot.com" data-source="http://googlecloudplatform.github.io/gcloud-node/" data-content="An Express backend implementation for the AngularJS front end using Google Cloud Client Library for Node.js.">Express + gcloud-node</a></li></ul><hr><h2>Compare these to a non-framework implementation</h2><ul class="applist"><li class="routing"><a href="examples/vanillajs" data-source="https://developer.mozilla.org/en/JavaScript" data-content="You know JavaScript right? :P">Vanilla JS</a></li><li class="routing"><a href="examples/jquery" data-source="http://jquery.com" data-content="jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.">jQuery</a></li></ul></div></div><hr><div class="row"><div class="col-md-6 quotes"><blockquote class="quote speech-bubble"><p></p><footer><img width="40" height="40" alt=""><a></a></footer></blockquote></div><div class="col-md-6"><img class="screenshot" src="site-assets/screenshot.png" width="558" height="246" alt="Todo app screenshot"></div></div><hr><div class="row"><div class="col-md-4"><h2>New in 1.3</h2><ul class="whats-new"><li>We now have 64 applications.
<label class="link" for="news-expander">New since 1.3 ▼</label><input type="checkbox" id="news-expander"><ul class="collapsed" id="new-apps"><li><a href="examples/angular-dart/web">AngularDart</a></li><li><a href="examples/durandal">Durandel</a></li><li><a href="examples/atmajs">Atma.js</a></li><li><a href="examples/exoskeleton">Exoskeleton</a></li><li><a href="examples/componentjs">ComponentJS</a></li></ul></li><li>Updates have been made to apps including Vanilla, Angular, React, Backbone, Ember, jQuery &amp; many more.</li><li>The knockoutjs_classBindingProvider application has been removed.</li></ul></div><div class="col-md-4"><h2>Selecting a Framework</h2><p>Once you've downloaded the latest release and played around with the apps, you'll want to decide on a specific framework to try out.</p><p>Study the syntax required for defining models, views and (where applicable) controllers and classes in the frameworks you're interested in and try your hand at editing the code to see how it feels using it first-hand.</p><p>Please ensure that if you're happy with this, you do spend more time investigating the framework (including reading the official docs, the source and its complete feature list). There's often a lot more to a framework than what we present in our examples.</p></div><div class="col-md-4"><h2>Getting Involved</h2><p>Is there a bug we haven't fixed or an MV* framework you feel would benefit from being included in TodoMVC?</p><p>If so, feel free to fork the repo, read our <a href="https://github.com/tastejs/todomvc/wiki">contribution guidelines</a>, and submit a pull request &mdash; we'll be happy to review it for inclusion.</p><p>Make sure you use the <a href="https://github.com/tastejs/todomvc-app-template">template</a> as a starting point and read the <a href="https://github.com/tastejs/todomvc/blob/master/app-spec.md">app specification</a>.</p><p><a class="zocial small ltgray" href="https://github.com/tastejs/todomvc/wiki">Submit Pull Request &raquo;</a></p></div></div><hr><footer class="credit"><p>Brought to you by
<a href="https://github.com/addyosmani"><img src="http://gravatar.com/avatar/96270e4c3e5e9806cf7245475c00b275?s=80" width="40" height="40" alt="Addy Osmani">Addy</a><a href="https://github.com/sindresorhus"><img src="http://gravatar.com/avatar/d36a92237c75c5337c17b60d90686bf9.png?s=80" width="40" height="40" alt="Sindre Sorhus">Sindre</a><a href="https://github.com/passy"><img src="http://gravatar.com/avatar/be451fcdbf0e5ff07f23ed16cb5c90a3.png?s=80" width="40" height="40" alt="Pascal Hartig">Pascal</a><a href="https://github.com/stephenplusplus"><img src="http://gravatar.com/avatar/098cfe2d360e77c3229f2cd5298354c4?s=80" width="40" height="40" alt="Stephen Sawchuk">Stephen</a><a href="https://github.com/colineberhardt"><img src="http://gravatar.com/avatar/73bba00b41ff1c9ecc3ee29487bace7d?s=80" width="40" height="40" alt="Colin Eberhardt">Colin</a><a href="https://github.com/arthurvr"><img src="https://avatars1.githubusercontent.com/u/6025224?v=3&s=80" width="40" height="40" alt="Arthur Verschaeve">Arthur</a><a href="https://github.com/samccone"><img src="https://avatars0.githubusercontent.com/u/883126?v=3&s=80" width="40" height="40" alt="Sam Saccone">Sam</a></p></footer></div><script src="site-assets/main.min.js"></script><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs)}}(document,"script","twitter-wjs");</script><script>(function(){var po=document.createElement("script");po.type="text/javascript";po.async=true;po.src="https://apis.google.com/js/plusone.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(po,s)})();</script><script>var _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");</script></body></html>
learn.json
View file @ 4f61c48a
......@@ -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.",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7