added react-alt example

e56aa7dc · Hannes Johansson · Pascal Hartig · ce92430e · e56aa7dc · e56aa7dc
Commit e56aa7dc authored Oct 04, 2015 by Hannes Johansson Committed by Pascal Hartig Nov 04, 2015
18 changed files
--- a/examples/react-alt/.gitignore
+++ b/examples/react-alt/.gitignore
+node_modules/director/*
+node_modules/director/build/*
+!node_modules/director/build
+!node_modules/director/build/director.js
+
+
+node_modules/react/*
+!node_modules/react/dist
+node_modules/react/dist/*
+!node_modules/react/dist/react-with-addons.js
+!node_modules/react/dist/JSXTransformer.js
+node_modules/alt/*
+!node_modules/alt/dist
+node_modules/alt/dist/*
+!node_modules/alt/dist/alt.js
+
+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
--- a/examples/react-alt/index.html
+++ b/examples/react-alt/index.html
+<!doctype html>
+<html lang="en" data-framework="react">
+	<head>
+		<meta charset="utf-8">
+		<title>React + Alt • 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>
+		<section class="todoapp"></section>
+		<footer class="info">
+			<p>Double-click to edit a todo</p>
+			<p>Created by <a href="http://github.com/wishpishh">Hannes Johansson</a> based on React example by <a href="http://github.com/petehunt/">petehunt</a></p>
+			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+		</footer>
+
+		<script src="node_modules/todomvc-common/base.js"></script>
+		<script src="node_modules/react/dist/react-with-addons.js"></script>
+		<script src="node_modules/react/dist/JSXTransformer.js"></script>
+		<script src="node_modules/director/build/director.js"></script>
+		<script src="node_modules/alt/dist/alt.js"></script>
+
+		<script src="js/utils.js"></script>
+		<script src="js/alt.js"></script>
+		<script src="js/actions/todoActions.js"></script>
+		<script src="js/stores/todoStore.js"></script>
+		<!-- jsx is an optional syntactic sugar that transforms methods in React's
+		`render` into an HTML-looking format. Since the two models above are
+		unrelated to React, we didn't need those transforms. -->
+		<script type="text/jsx" src="js/todoItem.jsx"></script>
+		<script type="text/jsx" src="js/footer.jsx"></script>
+		<script type="text/jsx" src="js/app.jsx"></script>
+	</body>
+</html>
--- a/examples/react-alt/js/actions/todoActions.js
+++ b/examples/react-alt/js/actions/todoActions.js
+/*jshint quotmark:false */
+/*jshint newcap:false */
+
+var app = app || {};
+
+(function () {
+	'use strict';
+
+	var Utils = app.Utils;
+
+	app.todoActions = app.alt.generateActions(
+		'toggleAll',
+		'toggle',
+		'destroy',
+		'save',
+		'clearCompleted',
+		'edit',
+		'show'
+	);
+
+	app.todoActions = Utils.extend(
+		app.todoActions,
+		app.alt.createActions({
+			addTodo: function (title) {
+				return {
+					id: Utils.uuid(),
+					title: title,
+					completed: false
+				};
+			}
+		})
+	);
+})();
--- a/examples/react-alt/js/alt.js
+++ b/examples/react-alt/js/alt.js
+/*jshint quotmark:false */
+/*jshint newcap:false */
+/*global Alt */
+
+var app = app || {};
+
+(function () {
+	'use strict';
+
+	app.alt = new Alt();
+})();
--- a/examples/react-alt/js/app.jsx
+++ b/examples/react-alt/js/app.jsx
+/*jshint quotmark:false */
+/*jshint newcap:false */
+/*global React, Router*/
+
+var app = app || {};
+
+(function () {
+	'use strict';
+
+	app.ALL_TODOS = 'all';
+	app.ACTIVE_TODOS = 'active';
+	app.COMPLETED_TODOS = 'completed';
+	var TodoFooter = app.TodoFooter;
+	var TodoItem = app.TodoItem;
+	var TodoActions = app.todoActions;
+	var TodoStore = app.todoStore;
+
+	var ENTER_KEY = 13;
+
+	var TodoApp = React.createClass({
+		getInitialState: function () {
+			return TodoStore.getState();
+		},
+
+		componentDidMount: function () {
+			TodoStore.listen(this.onStoreChange);
+
+			var router = Router({
+				'/': function () {
+					TodoActions.show(app.ALL_TODOS);
+				},
+				'/active': function () {
+					TodoActions.show(app.ACTIVE_TODOS);
+				},
+				'/completed': function () {
+					TodoActions.show(app.COMPLETED_TODOS);
+				}
+			});
+
+			router.init('/');
+		},
+
+		componentDidUnmount: function () {
+			TodoStore.unlisten(this.onStoreChange);
+		},
+
+		handleChange: function (event) {
+			this.setState({newTodo: event.target.value});
+		},
+
+		onStoreChange: function (state) {
+			this.setState(state);
+		},
+
+		handleNewTodoKeyDown: function (event) {
+			if (event.keyCode !== ENTER_KEY) {
+				return;
+			}
+
+			event.preventDefault();
+
+			var val = this.state.newTodo.trim();
+
+			if (val) {
+				this.setState({newTodo: ''});
+
+				TodoActions.addTodo(val);
+			}
+		},
+
+		toggleAll: function (event) {
+			var checked = event.target.checked;
+			TodoActions.toggleAll(checked);
+		},
+
+		toggle: function (todoToToggle) {
+			TodoActions.toggle(todoToToggle);
+		},
+
+		destroy: function (todo) {
+			TodoActions.destroy(todo);
+		},
+
+		edit: function (todo) {
+			TodoActions.edit(todo.id);
+		},
+
+		save: function (todoToSave, text) {
+			TodoActions.save({
+				todoToSave: todoToSave,
+				text: text
+			});
+
+			TodoActions.edit(null);
+		},
+
+		cancel: function () {
+			TodoActions.edit(null);
+		},
+
+		clearCompleted: function () {
+			TodoActions.clearCompleted();
+		},
+
+		render: function () {
+			var footer = null;
+			var main = null;
+			var todos = this.state.todos;
+
+			var shownTodos = todos.filter(function (todo) {
+				switch (this.state.nowShowing) {
+				case app.ACTIVE_TODOS:
+					return !todo.completed;
+				case app.COMPLETED_TODOS:
+					return todo.completed;
+				default:
+					return true;
+				}
+			}, this);
+
+			var todoItems = shownTodos.map(function (todo) {
+				return (
+					<TodoItem
+						key={todo.id}
+						todo={todo}
+						onToggle={this.toggle.bind(this, todo)}
+						onDestroy={this.destroy.bind(this, todo)}
+						onEdit={this.edit.bind(this, todo)}
+						editing={this.state.editing === todo.id}
+						onSave={this.save.bind(this, todo)}
+						onCancel={this.cancel}
+					/>
+				);
+			}, this);
+
+			var activeTodoCount = todos.reduce(function (accum, todo) {
+				return todo.completed ? accum : accum + 1;
+			}, 0);
+
+			var completedCount = todos.length - activeTodoCount;
+
+			if (activeTodoCount || completedCount) {
+				footer =
+					<TodoFooter
+						count={activeTodoCount}
+						completedCount={completedCount}
+						nowShowing={this.state.nowShowing}
+						onClearCompleted={this.clearCompleted}
+					/>;
+			}
+
+			if (todos.length) {
+				main = (
+					<section className="main">
+						<input
+							className="toggle-all"
+							type="checkbox"
+							onChange={this.toggleAll}
+							checked={activeTodoCount === 0}
+						/>
+						<ul className="todo-list">
+							{todoItems}
+						</ul>
+					</section>
+				);
+			}
+
+			return (
+				<div>
+					<header className="header">
+						<h1>todos</h1>
+						<input
+							ref="newField"
+							className="new-todo"
+							placeholder="What needs to be done?"
+							value={this.state.newTodo}
+							onKeyDown={this.handleNewTodoKeyDown}
+							onChange={this.handleChange}
+							autoFocus={true}
+						/>
+					</header>
+					{main}
+					{footer}
+				</div>
+			);
+		}
+	});
+
+	React.render(
+		<TodoApp/>,
+		document.getElementsByClassName('todoapp')[0]
+	);
+})();
--- a/examples/react-alt/js/footer.jsx
+++ b/examples/react-alt/js/footer.jsx
+/*jshint quotmark:false */
+/*jshint newcap:false */
+/*global React */
+
+var app = app || {};
+
+(function () {
+	'use strict';
+
+	app.TodoFooter = React.createClass({
+		render: function () {
+			var activeTodoWord = app.Utils.pluralize(this.props.count, 'item');
+			var clearButton = null;
+
+			if (this.props.completedCount > 0) {
+				clearButton = (
+					<button
+						className="clear-completed"
+						onClick={this.props.onClearCompleted}>
+						Clear completed
+					</button>
+				);
+			}
+
+			// React idiom for shortcutting to `classSet` since it'll be used often
+			var cx = React.addons.classSet;
+			var nowShowing = this.props.nowShowing;
+			return (
+				<footer className="footer">
+					<span className="todo-count">
+						<strong>{this.props.count}</strong> {activeTodoWord} left
+					</span>
+					<ul className="filters">
+						<li>
+							<a
+								href="#/"
+								className={cx({selected: nowShowing === app.ALL_TODOS})}>
+									All
+							</a>
+						</li>
+						{' '}
+						<li>
+							<a
+								href="#/active"
+								className={cx({selected: nowShowing === app.ACTIVE_TODOS})}>
+									Active
+							</a>
+						</li>
+						{' '}
+						<li>
+							<a
+								href="#/completed"
+								className={cx({selected: nowShowing === app.COMPLETED_TODOS})}>
+									Completed
+							</a>
+						</li>
+					</ul>
+					{clearButton}
+				</footer>
+			);
+		}
+	});
+})();
--- a/examples/react-alt/js/stores/todoStore.js
+++ b/examples/react-alt/js/stores/todoStore.js
+/*jshint quotmark:false */
+/*jshint newcap:false */
+
+
+var app = app || {};
+
+(function () {
+	'use strict';
+
+	var Utils = app.Utils;
+	var LOCALSTORAGE_NAMESPACE = 'react-alt-todo';
+
+	var TodoStore = function () {
+		this.state = {
+			todos: Utils.store(LOCALSTORAGE_NAMESPACE + '.todos'),
+			nowShowing: Utils.store(LOCALSTORAGE_NAMESPACE + '.nowShowing') || app.ALL_TODOS,
+			editing: Utils.store(LOCALSTORAGE_NAMESPACE + '.editing') || null
+		};
+
+		this.bindListeners({
+			addTodo: app.todoActions.addTodo,
+			toggleAll: app.todoActions.toggleAll,
+			toggle: app.todoActions.toggle,
+			destroy: app.todoActions.destroy,
+			save: app.todoActions.save,
+			clearCompleted: app.todoActions.clearCompleted,
+			edit: app.todoActions.edit,
+			show: app.todoActions.show
+		});
+	};
+
+	TodoStore.prototype.addTodo = function (todo) {
+		this.setState({
+			todos: this.state.todos.concat(todo)
+		});
+
+		Utils.store(LOCALSTORAGE_NAMESPACE + '.todos', this.state.todos);
+	};
+
+	TodoStore.prototype.toggleAll = function (checked) {
+		var updatedTodos = this.state.todos.map(function (todo) {
+			return Utils.extend({}, todo, {completed: checked});
+		});
+
+		this.setState({
+			todos: updatedTodos
+		});
+
+		Utils.store(LOCALSTORAGE_NAMESPACE + '.todos', this.state.todos);
+	};
+
+	TodoStore.prototype.toggle = function (todoToToggle) {
+		var updatedTodos = this.state.todos.map(function (todo) {
+			return todo !== todoToToggle ?
+				todo :
+				Utils.extend({}, todo, {completed: !todo.completed});
+		});
+
+		this.setState({
+			todos: updatedTodos
+		});
+
+		Utils.store(LOCALSTORAGE_NAMESPACE + '.todos', this.state.todos);
+	};
+
+	TodoStore.prototype.destroy = function (todoToDestroy) {
+		var updatedTodos = this.state.todos.filter(function (todo) {
+			return todo !== todoToDestroy;
+		});
+
+		this.setState({
+			todos: updatedTodos
+		});
+
+		Utils.store(LOCALSTORAGE_NAMESPACE + '.todos', this.state.todos);
+	};
+
+	TodoStore.prototype.save = function (command) {
+		var updatedTodos = this.state.todos.map(function (todo) {
+			return todo !== command.todoToSave ?
+				todo :
+				Utils.extend({}, command.todoToSave, {title: command.text});
+		});
+
+		this.setState({
+			todos: updatedTodos
+		});
+
+		Utils.store(LOCALSTORAGE_NAMESPACE + '.todos', this.state.todos);
+	};
+
+	TodoStore.prototype.clearCompleted = function () {
+		var updatedTodos = this.state.todos.filter(function (todo) {
+			return !todo.completed;
+		});
+
+		this.setState({
+			todos: updatedTodos
+		});
+
+		Utils.store(LOCALSTORAGE_NAMESPACE + '.todos', this.state.todos);
+	};
+
+	TodoStore.prototype.edit = function (id) {
+		this.setState({
+			editing: id
+		});
+
+		Utils.store(LOCALSTORAGE_NAMESPACE + '.editing', this.editing);
+	};
+
+	TodoStore.prototype.show = function (nowShowing) {
+		this.setState({
+			nowShowing: nowShowing
+		});
+
+		Utils.store(LOCALSTORAGE_NAMESPACE + '.nowShowing', this.nowShowing);
+	};
+
+	TodoStore.displayName = 'TodoStore';
+
+	app.todoStore = app.alt.createStore(TodoStore);
+})();
--- a/examples/react-alt/js/todoItem.jsx
+++ b/examples/react-alt/js/todoItem.jsx
+/*jshint quotmark: false */
+/*jshint newcap: false */
+/*global React */
+
+var app = app || {};
+
+(function () {
+	'use strict';
+
+	var ESCAPE_KEY = 27;
+	var ENTER_KEY = 13;
+
+	app.TodoItem = React.createClass({
+		handleSubmit: function (event) {
+			var val = this.state.editText.trim();
+			if (val) {
+				this.props.onSave(val);
+				this.setState({editText: val});
+			} else {
+				this.props.onDestroy();
+			}
+		},
+
+		handleEdit: function () {
+			this.props.onEdit();
+			this.setState({editText: this.props.todo.title});
+		},
+
+		handleKeyDown: function (event) {
+			if (event.which === ESCAPE_KEY) {
+				this.setState({editText: this.props.todo.title});
+				this.props.onCancel(event);
+			} else if (event.which === ENTER_KEY) {
+				this.handleSubmit(event);
+			}
+		},
+
+		handleChange: function (event) {
+			this.setState({editText: event.target.value});
+		},
+
+		getInitialState: function () {
+			return {editText: this.props.todo.title};
+		},
+
+		/**
+		 * This is a completely optional performance enhancement that you can
+		 * implement on any React component. If you were to delete this method
+		 * the app would still work correctly (and still be very performant!), we
+		 * just use it as an example of how little code it takes to get an order
+		 * of magnitude performance improvement.
+		 */
+		shouldComponentUpdate: function (nextProps, nextState) {
+			return (
+				nextProps.todo !== this.props.todo ||
+				nextProps.editing !== this.props.editing ||
+				nextState.editText !== this.state.editText
+			);
+		},
+
+		/**
+		 * Safely manipulate the DOM after updating the state when invoking
+		 * `this.props.onEdit()` in the `handleEdit` method above.
+		 * For more info refer to notes at https://facebook.github.io/react/docs/component-api.html#setstate
+		 * and https://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate
+		 */
+		componentDidUpdate: function (prevProps) {
+			if (!prevProps.editing && this.props.editing) {
+				var node = React.findDOMNode(this.refs.editField);
+				node.focus();
+				node.setSelectionRange(node.value.length, node.value.length);
+			}
+		},
+
+		render: function () {
+			return (
+				<li className={React.addons.classSet({
+					completed: this.props.todo.completed,
+					editing: this.props.editing
+				})}>
+					<div className="view">
+						<input
+							className="toggle"
+							type="checkbox"
+							checked={this.props.todo.completed}
+							onChange={this.props.onToggle}
+						/>
+						<label onDoubleClick={this.handleEdit}>
+							{this.props.todo.title}
+						</label>
+						<button className="destroy" onClick={this.props.onDestroy} />
+					</div>
+					<input
+						ref="editField"
+						className="edit"
+						value={this.state.editText}
+						onBlur={this.handleSubmit}
+						onChange={this.handleChange}
+						onKeyDown={this.handleKeyDown}
+					/>
+				</li>
+			);
+		}
+	});
+})();
--- a/examples/react-alt/js/utils.js
+++ b/examples/react-alt/js/utils.js
+var app = app || {};
+
+(function () {
+	'use strict';
+
+	app.Utils = {
+		uuid: function () {
+			/*jshint bitwise:false */
+			var i, random;
+			var uuid = '';
+
+			for (i = 0; i < 32; i++) {
+				random = Math.random() * 16 | 0;
+				if (i === 8 || i === 12 || i === 16 || i === 20) {
+					uuid += '-';
+				}
+				uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random))
+					.toString(16);
+			}
+
+			return uuid;
+		},
+
+		pluralize: function (count, word) {
+			return count === 1 ? word : word + 's';
+		},
+
+		store: function (namespace, data) {
+			if (data) {
+				return localStorage.setItem(namespace, JSON.stringify(data));
+			}
+
+			var store = localStorage.getItem(namespace);
+			return (store && JSON.parse(store)) || [];
+		},
+
+		extend: function () {
+			var newObj = {};
+			for (var i = 0; i < arguments.length; i++) {
+				var obj = arguments[i];
+				for (var key in obj) {
+					if (obj.hasOwnProperty(key)) {
+						newObj[key] = obj[key];
+					}
+				}
+			}
+			return newObj;
+		}
+	};
+})();
--- a/examples/react-alt/node_modules/alt/dist/alt.js
+++ b/examples/react-alt/node_modules/alt/dist/alt.js
--- a/examples/react-alt/node_modules/director/build/director.js
+++ b/examples/react-alt/node_modules/director/build/director.js
--- a/examples/react-alt/node_modules/react/dist/JSXTransformer.js
+++ b/examples/react-alt/node_modules/react/dist/JSXTransformer.js
--- a/examples/react-alt/node_modules/react/dist/react-with-addons.js
+++ b/examples/react-alt/node_modules/react/dist/react-with-addons.js
--- a/examples/react-alt/node_modules/todomvc-app-css/index.css
+++ b/examples/react-alt/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/react-alt/node_modules/todomvc-common/base.css
+++ b/examples/react-alt/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/react-alt/node_modules/todomvc-common/base.js
+++ b/examples/react-alt/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/react-alt/package.json
+++ b/examples/react-alt/package.json
+{
+  "private": true,
+  "dependencies": {
+    "alt": "^0.17.3",
+    "director": "^1.2.0",
+    "react": "^0.13.3",
+    "todomvc-app-css": "^2.0.0",
+    "todomvc-common": "^1.0.1"
+  }
+}
--- a/examples/react-alt/readme.md
+++ b/examples/react-alt/readme.md
+# React + Alt TodoMVC Example
+
+> React is a JavaScript library for creating user interfaces. Its core principles are declarative code, efficiency, and flexibility. Simply specify what your component looks like and React will keep it up-to-date when the underlying data changes. Alt is one of many implementations of Facebook's Flux architecture. Some of the reasons for using Alt is given by the author [here](https://github.com/goatslacker/alt#why-you-should-be-using-alt).
+
+> * _[React - facebook.github.io/react](http://facebook.github.io/react)_
+> * _[Flux - facebook.github.io/flux](http://facebook.github.io/flux)_
+> * _[Alt - alt.js.org](http://alt.js.org)_
+
+
+## Learning React
+
+The [React getting started documentation](http://facebook.github.io/react/docs/getting-started.html) is a great way to get started.
+
+Here are some links you may find helpful:
+
+* [Documentation](http://facebook.github.io/react/docs/getting-started.html)
+* [API Reference](http://facebook.github.io/react/docs/reference.html)
+* [Blog](http://facebook.github.io/react/blog/)
+* [React on GitHub](https://github.com/facebook/react)
+* [Support](http://facebook.github.io/react/support.html)
+
+Articles and guides from the community:
+
+* [Philosophy](http://www.quora.com/Pete-Hunt/Posts/React-Under-the-Hood)
+* [How is Facebook's React JavaScript library](http://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library)
+* [React: Under the hood](http://www.quora.com/Pete-Hunt/Posts/React-Under-the-Hood)
+
+Get help from other React users:
+
+* [React on StackOverflow](http://stackoverflow.com/questions/tagged/reactjs)
+* [Flux on StackOverflow](http://stackoverflow.com/questions/tagged/reactjs-flux)
+* [Mailing list on Google Groups](https://groups.google.com/forum/#!forum/reactjs)
+
+_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._
+
+
+## Running
+
+The app is built with [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html) and compiled at runtime for a lighter and more fun code reading experience. As stated in the link, JSX is not mandatory.
+
+To run the app, spin up an HTTP server (e.g. `python -m SimpleHTTPServer`) and visit http://localhost/.../myexample/.
+
+## Credit
+
+Most of the code in this example is copied from Pete Hunt's React example. It has been slightly modified to use the Alt Flux implementation, and most of the added code is in the actions and store.