Commit 9c7b1a25 authored by remojansen's avatar remojansen Committed by Sam Saccone

new app typescript-react

parent 99011a62
......@@ -33,6 +33,7 @@
"examples/angular2/**/*.js",
"examples/polymer/elements/elements.build.js",
"examples/js_of_ocaml/js/*.js",
"examples/typescript-react/js/*.js",
"**/generated/**"
],
"requireSpaceBeforeBlockStatements": true,
......
<!doctype html>
<html lang="en" data-framework="typescript">
<head>
<meta charset="utf-8">
<title>React • 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/remojansen/">Remo H. Jansen</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script type="text/javascript" src="node_modules/todomvc-common/base.js"></script>
<script type="text/javascript" src="node_modules/react/dist/react-with-addons.js"></script>
<script type="text/javascript" src="node_modules/classnames/index.js"></script>
<script type="text/javascript" src="node_modules/director/build/director.js"></script>
<script type="text/javascript" src="js/bundle.js"></script>
</body>
</html>
/*jshint quotmark:false */
/*jshint white:false */
/*jshint trailing:false */
/*jshint newcap:false */
/*global React, Router*/
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/// <reference path="../typings/tsd.d.ts" />
/// <reference path="./interfaces.d.ts"/>
var TodoModel_1 = require("./TodoModel");
var footer_1 = require("./footer");
var todoItem_1 = require("./todoItem");
var constants_1 = require("./constants");
var TodoApp = (function (_super) {
__extends(TodoApp, _super);
function TodoApp(props) {
_super.call(this, props);
this.state = {
nowShowing: constants_1.ALL_TODOS,
editing: null
};
}
TodoApp.prototype.componentDidMount = function () {
var setState = this.setState;
var router = Router({
'/': setState.bind(this, { nowShowing: constants_1.ALL_TODOS }),
'/active': setState.bind(this, { nowShowing: constants_1.ACTIVE_TODOS }),
'/completed': setState.bind(this, { nowShowing: constants_1.COMPLETED_TODOS })
});
router.init('/');
};
TodoApp.prototype.handleNewTodoKeyDown = function (event) {
if (event.keyCode !== constants_1.ENTER_KEY) {
return;
}
event.preventDefault();
var val = React.findDOMNode(this.refs["newField"]).value.trim();
if (val) {
this.props.model.addTodo(val);
React.findDOMNode(this.refs["newField"]).value = '';
}
};
TodoApp.prototype.toggleAll = function (event) {
var target = event.target;
var checked = target.checked;
this.props.model.toggleAll(checked);
};
TodoApp.prototype.toggle = function (todoToToggle) {
this.props.model.toggle(todoToToggle);
};
TodoApp.prototype.destroy = function (todo) {
this.props.model.destroy(todo);
};
TodoApp.prototype.edit = function (todo) {
this.setState({ editing: todo.id });
};
TodoApp.prototype.save = function (todoToSave, text) {
this.props.model.save(todoToSave, text);
this.setState({ editing: null });
};
TodoApp.prototype.cancel = function () {
this.setState({ editing: null });
};
TodoApp.prototype.clearCompleted = function () {
this.props.model.clearCompleted();
};
TodoApp.prototype.render = function () {
var _this = this;
var footer;
var main;
var todos = this.props.model.todos;
var shownTodos = todos.filter(function (todo) {
switch (_this.state.nowShowing) {
case constants_1.ACTIVE_TODOS:
return !todo.completed;
case constants_1.COMPLETED_TODOS:
return todo.completed;
default:
return true;
}
});
var todoItems = shownTodos.map(function (todo) {
return (React.createElement(todoItem_1.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": function (e) { return _this.cancel(); }}));
});
var activeTodoCount = todos.reduce(function (accum, todo) {
return todo.completed ? accum : accum + 1;
}, 0);
var completedCount = todos.length - activeTodoCount;
if (activeTodoCount || completedCount) {
footer =
React.createElement(footer_1.TodoFooter, {"count": activeTodoCount, "completedCount": completedCount, "nowShowing": this.state.nowShowing, "onClearCompleted": function (e) { return _this.clearCompleted(); }});
}
if (todos.length) {
main = (React.createElement("section", {"className": "main"}, React.createElement("input", {"className": "toggle-all", "type": "checkbox", "onChange": function (e) { return _this.toggleAll(e); }, "checked": activeTodoCount === 0}), React.createElement("ul", {"className": "todo-list"}, todoItems)));
}
return (React.createElement("div", null, React.createElement("header", {"className": "header"}, React.createElement("h1", null, "todos"), React.createElement("input", {"ref": "newField", "className": "new-todo", "placeholder": "What needs to be done?", "onKeyDown": function (e) { return _this.handleNewTodoKeyDown(e); }, "autoFocus": true})), main, footer));
};
return TodoApp;
})(React.Component);
var model = new TodoModel_1.TodoModel('react-todos');
function render() {
React.render(React.createElement(TodoApp, {"model": model}), document.getElementsByClassName('todoapp')[0]);
}
model.subscribe(render);
render();
/*jshint quotmark:false */
/*jshint white:false */
/*jshint trailing:false */
/*jshint newcap:false */
/*global React, Router*/
/// <reference path="../typings/tsd.d.ts" />
/// <reference path="./interfaces.d.ts"/>
declare var Router;
import { TodoModel } from "./TodoModel";
import { TodoFooter } from "./footer";
import { TodoItem } from "./todoItem";
import { ALL_TODOS, ACTIVE_TODOS, COMPLETED_TODOS, ENTER_KEY } from "./constants";
class TodoApp extends React.Component<IAppProps, IAppState> {
public state : IAppState;
constructor(props : IAppProps) {
super(props);
this.state = {
nowShowing: ALL_TODOS,
editing: null
};
}
public componentDidMount() {
var setState = this.setState;
var router = Router({
'/': setState.bind(this, {nowShowing: ALL_TODOS}),
'/active': setState.bind(this, {nowShowing: ACTIVE_TODOS}),
'/completed': setState.bind(this, {nowShowing: COMPLETED_TODOS})
});
router.init('/');
}
public handleNewTodoKeyDown(event : __React.KeyboardEvent) {
if (event.keyCode !== ENTER_KEY) {
return;
}
event.preventDefault();
var val = React.findDOMNode<HTMLInputElement>(this.refs["newField"]).value.trim();
if (val) {
this.props.model.addTodo(val);
React.findDOMNode<HTMLInputElement>(this.refs["newField"]).value = '';
}
}
public toggleAll(event : __React.FormEvent) {
var target : any = event.target;
var checked = target.checked;
this.props.model.toggleAll(checked);
}
public toggle(todoToToggle : ITodo) {
this.props.model.toggle(todoToToggle);
}
public destroy(todo : ITodo) {
this.props.model.destroy(todo);
}
public edit(todo : ITodo) {
this.setState({editing: todo.id});
}
public save(todoToSave : ITodo, text : String) {
this.props.model.save(todoToSave, text);
this.setState({editing: null});
}
public cancel() {
this.setState({editing: null});
}
public clearCompleted() {
this.props.model.clearCompleted();
}
public render() {
var footer;
var main;
const todos = this.props.model.todos;
var shownTodos = todos.filter((todo) => {
switch (this.state.nowShowing) {
case ACTIVE_TODOS:
return !todo.completed;
case COMPLETED_TODOS:
return todo.completed;
default:
return true;
}
});
var todoItems = shownTodos.map((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={ e => this.cancel() }
/>
);
});
// Note: It's usually better to use immutable data structures since they're
// easier to reason about and React works very well with them. That's why
// we use map(), filter() and reduce() everywhere instead of mutating the
// array or todo items themselves.
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={ e=> this.clearCompleted() }
/>;
}
if (todos.length) {
main = (
<section className="main">
<input
className="toggle-all"
type="checkbox"
onChange={ e => this.toggleAll(e) }
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?"
onKeyDown={ e => this.handleNewTodoKeyDown(e) }
autoFocus={true}
/>
</header>
{main}
{footer}
</div>
);
}
}
var model = new TodoModel('react-todos');
function render() {
React.render(
<TodoApp model={model}/>,
document.getElementsByClassName('todoapp')[0]
);
}
model.subscribe(render);
render();
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
/*jshint quotmark:false */
/*jshint white:false */
/*jshint trailing:false */
/*jshint newcap:false */
/// <reference path="../typings/tsd.d.ts" />
/// <reference path="./interfaces.d.ts"/>
var utils_1 = require("./utils");
var TodoModel = (function () {
function TodoModel(key) {
this.key = key;
this.todos = utils_1.Utils.store(key);
this.onChanges = [];
}
TodoModel.prototype.subscribe = function (onChange) {
this.onChanges.push(onChange);
};
TodoModel.prototype.inform = function () {
utils_1.Utils.store(this.key, this.todos);
this.onChanges.forEach(function (cb) { cb(); });
};
TodoModel.prototype.addTodo = function (title) {
this.todos = this.todos.concat({
id: utils_1.Utils.uuid(),
title: title,
completed: false
});
this.inform();
};
TodoModel.prototype.toggleAll = function (checked) {
this.todos = this.todos.map(function (todo) {
return utils_1.Utils.extend({}, todo, { completed: checked });
});
this.inform();
};
TodoModel.prototype.toggle = function (todoToToggle) {
this.todos = this.todos.map(function (todo) {
return todo !== todoToToggle ?
todo :
utils_1.Utils.extend({}, todo, { completed: !todo.completed });
});
this.inform();
};
TodoModel.prototype.destroy = function (todo) {
this.todos = this.todos.filter(function (candidate) {
return candidate !== todo;
});
this.inform();
};
TodoModel.prototype.save = function (todoToSave, text) {
this.todos = this.todos.map(function (todo) {
return todo !== todoToSave ? todo : utils_1.Utils.extend({}, todo, { title: text });
});
this.inform();
};
TodoModel.prototype.clearCompleted = function () {
this.todos = this.todos.filter(function (todo) {
return !todo.completed;
});
this.inform();
};
return TodoModel;
})();
exports.TodoModel = TodoModel;
},{"./utils":6}],2:[function(require,module,exports){
/*jshint quotmark:false */
/*jshint white:false */
/*jshint trailing:false */
/*jshint newcap:false */
/*global React, Router*/
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/// <reference path="../typings/tsd.d.ts" />
/// <reference path="./interfaces.d.ts"/>
var TodoModel_1 = require("./TodoModel");
var footer_1 = require("./footer");
var todoItem_1 = require("./todoItem");
var constants_1 = require("./constants");
var TodoApp = (function (_super) {
__extends(TodoApp, _super);
function TodoApp(props) {
_super.call(this, props);
this.state = {
nowShowing: constants_1.ALL_TODOS,
editing: null
};
}
TodoApp.prototype.componentDidMount = function () {
var setState = this.setState;
var router = Router({
'/': setState.bind(this, { nowShowing: constants_1.ALL_TODOS }),
'/active': setState.bind(this, { nowShowing: constants_1.ACTIVE_TODOS }),
'/completed': setState.bind(this, { nowShowing: constants_1.COMPLETED_TODOS })
});
router.init('/');
};
TodoApp.prototype.handleNewTodoKeyDown = function (event) {
if (event.keyCode !== constants_1.ENTER_KEY) {
return;
}
event.preventDefault();
var val = React.findDOMNode(this.refs["newField"]).value.trim();
if (val) {
this.props.model.addTodo(val);
React.findDOMNode(this.refs["newField"]).value = '';
}
};
TodoApp.prototype.toggleAll = function (event) {
var target = event.target;
var checked = target.checked;
this.props.model.toggleAll(checked);
};
TodoApp.prototype.toggle = function (todoToToggle) {
this.props.model.toggle(todoToToggle);
};
TodoApp.prototype.destroy = function (todo) {
this.props.model.destroy(todo);
};
TodoApp.prototype.edit = function (todo) {
this.setState({ editing: todo.id });
};
TodoApp.prototype.save = function (todoToSave, text) {
this.props.model.save(todoToSave, text);
this.setState({ editing: null });
};
TodoApp.prototype.cancel = function () {
this.setState({ editing: null });
};
TodoApp.prototype.clearCompleted = function () {
this.props.model.clearCompleted();
};
TodoApp.prototype.render = function () {
var _this = this;
var footer;
var main;
var todos = this.props.model.todos;
var shownTodos = todos.filter(function (todo) {
switch (_this.state.nowShowing) {
case constants_1.ACTIVE_TODOS:
return !todo.completed;
case constants_1.COMPLETED_TODOS:
return todo.completed;
default:
return true;
}
});
var todoItems = shownTodos.map(function (todo) {
return (React.createElement(todoItem_1.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": function (e) { return _this.cancel(); }}));
});
var activeTodoCount = todos.reduce(function (accum, todo) {
return todo.completed ? accum : accum + 1;
}, 0);
var completedCount = todos.length - activeTodoCount;
if (activeTodoCount || completedCount) {
footer =
React.createElement(footer_1.TodoFooter, {"count": activeTodoCount, "completedCount": completedCount, "nowShowing": this.state.nowShowing, "onClearCompleted": function (e) { return _this.clearCompleted(); }});
}
if (todos.length) {
main = (React.createElement("section", {"className": "main"}, React.createElement("input", {"className": "toggle-all", "type": "checkbox", "onChange": function (e) { return _this.toggleAll(e); }, "checked": activeTodoCount === 0}), React.createElement("ul", {"className": "todo-list"}, todoItems)));
}
return (React.createElement("div", null, React.createElement("header", {"className": "header"}, React.createElement("h1", null, "todos"), React.createElement("input", {"ref": "newField", "className": "new-todo", "placeholder": "What needs to be done?", "onKeyDown": function (e) { return _this.handleNewTodoKeyDown(e); }, "autoFocus": true})), main, footer));
};
return TodoApp;
})(React.Component);
var model = new TodoModel_1.TodoModel('react-todos');
function render() {
React.render(React.createElement(TodoApp, {"model": model}), document.getElementsByClassName('todoapp')[0]);
}
model.subscribe(render);
render();
},{"./TodoModel":1,"./constants":3,"./footer":4,"./todoItem":5}],3:[function(require,module,exports){
var ALL_TODOS = 'all';
exports.ALL_TODOS = ALL_TODOS;
var ACTIVE_TODOS = 'active';
exports.ACTIVE_TODOS = ACTIVE_TODOS;
var COMPLETED_TODOS = 'completed';
exports.COMPLETED_TODOS = COMPLETED_TODOS;
var ENTER_KEY = 13;
exports.ENTER_KEY = ENTER_KEY;
var ESCAPE_KEY = 27;
exports.ESCAPE_KEY = ESCAPE_KEY;
},{}],4:[function(require,module,exports){
/*jshint quotmark:false */
/*jshint white:false */
/*jshint trailing:false */
/*jshint newcap:false */
/*global React */
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/// <reference path="../typings/tsd.d.ts" />
/// <reference path="./interfaces.d.ts"/>
var constants_1 = require("./constants");
var utils_1 = require("./utils");
var TodoFooter = (function (_super) {
__extends(TodoFooter, _super);
function TodoFooter() {
_super.apply(this, arguments);
}
TodoFooter.prototype.render = function () {
var activeTodoWord = utils_1.Utils.pluralize(this.props.count, 'item');
var clearButton = null;
if (this.props.completedCount > 0) {
clearButton = (React.createElement("button", {"className": "clear-completed", "onClick": this.props.onClearCompleted}, "Clear completed"));
}
var nowShowing = this.props.nowShowing;
return (React.createElement("footer", {"className": "footer"}, React.createElement("span", {"className": "todo-count"}, React.createElement("strong", null, this.props.count), " ", activeTodoWord, " left"), React.createElement("ul", {"className": "filters"}, React.createElement("li", null, React.createElement("a", {"href": "#/", "className": classNames({ selected: nowShowing === constants_1.ALL_TODOS })}, "All")), ' ', React.createElement("li", null, React.createElement("a", {"href": "#/active", "className": classNames({ selected: nowShowing === constants_1.ACTIVE_TODOS })}, "Active")), ' ', React.createElement("li", null, React.createElement("a", {"href": "#/completed", "className": classNames({ selected: nowShowing === constants_1.COMPLETED_TODOS })}, "Completed"))), clearButton));
};
return TodoFooter;
})(React.Component);
exports.TodoFooter = TodoFooter;
},{"./constants":3,"./utils":6}],5:[function(require,module,exports){
/*jshint quotmark: false */
/*jshint white: false */
/*jshint trailing: false */
/*jshint newcap: false */
/*global React */
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/// <reference path="../typings/tsd.d.ts" />
/// <reference path="./interfaces.d.ts"/>
var constants_1 = require("./constants");
var TodoItem = (function (_super) {
__extends(TodoItem, _super);
function TodoItem(props) {
_super.call(this, props);
this.state = { editText: this.props.todo.title };
}
TodoItem.prototype.handleSubmit = function (event) {
var val = this.state.editText.trim();
if (val) {
this.props.onSave(val);
this.setState({ editText: val });
}
else {
this.props.onDestroy();
}
};
TodoItem.prototype.handleEdit = function () {
this.props.onEdit();
this.setState({ editText: this.props.todo.title });
};
TodoItem.prototype.handleKeyDown = function (event) {
if (event.keyCode === constants_1.ESCAPE_KEY) {
this.setState({ editText: this.props.todo.title });
this.props.onCancel(event);
}
else if (event.keyCode === constants_1.ENTER_KEY) {
this.handleSubmit(event);
}
};
TodoItem.prototype.handleChange = function (event) {
var input = event.target;
this.setState({ editText: input.value });
};
TodoItem.prototype.shouldComponentUpdate = function (nextProps, nextState) {
return (nextProps.todo !== this.props.todo ||
nextProps.editing !== this.props.editing ||
nextState.editText !== this.state.editText);
};
TodoItem.prototype.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);
}
};
TodoItem.prototype.render = function () {
var _this = this;
return (React.createElement("li", {"className": classNames({
completed: this.props.todo.completed,
editing: this.props.editing
})}, React.createElement("div", {"className": "view"}, React.createElement("input", {"className": "toggle", "type": "checkbox", "checked": this.props.todo.completed, "onChange": this.props.onToggle}), React.createElement("label", {"onDoubleClick": function (e) { return _this.handleEdit(); }}, this.props.todo.title), React.createElement("button", {"className": "destroy", "onClick": this.props.onDestroy})), React.createElement("input", {"ref": "editField", "className": "edit", "value": this.state.editText, "onBlur": function (e) { return _this.handleSubmit(e); }, "onChange": function (e) { return _this.handleChange(e); }, "onKeyDown": function (e) { return _this.handleKeyDown(e); }})));
};
return TodoItem;
})(React.Component);
exports.TodoItem = TodoItem;
},{"./constants":3}],6:[function(require,module,exports){
var Utils = (function () {
function Utils() {
}
Utils.uuid = function () {
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;
};
Utils.pluralize = function (count, word) {
return count === 1 ? word : word + 's';
};
Utils.store = function (namespace, data) {
if (data) {
return localStorage.setItem(namespace, JSON.stringify(data));
}
var store = localStorage.getItem(namespace);
return (store && JSON.parse(store)) || [];
};
Utils.extend = function () {
var objs = [];
for (var _i = 0; _i < arguments.length; _i++) {
objs[_i - 0] = arguments[_i];
}
var newObj = {};
for (var i = 0; i < objs.length; i++) {
var obj = objs[i];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key];
}
}
}
return newObj;
};
return Utils;
})();
exports.Utils = Utils;
},{}]},{},[2]);
var ALL_TODOS = 'all';
exports.ALL_TODOS = ALL_TODOS;
var ACTIVE_TODOS = 'active';
exports.ACTIVE_TODOS = ACTIVE_TODOS;
var COMPLETED_TODOS = 'completed';
exports.COMPLETED_TODOS = COMPLETED_TODOS;
var ENTER_KEY = 13;
exports.ENTER_KEY = ENTER_KEY;
var ESCAPE_KEY = 27;
exports.ESCAPE_KEY = ESCAPE_KEY;
const ALL_TODOS = 'all';
const ACTIVE_TODOS = 'active';
const COMPLETED_TODOS = 'completed';
const ENTER_KEY = 13;
const ESCAPE_KEY = 27;
export { ALL_TODOS, ACTIVE_TODOS, COMPLETED_TODOS, ENTER_KEY, ESCAPE_KEY };
/*jshint quotmark:false */
/*jshint white:false */
/*jshint trailing:false */
/*jshint newcap:false */
/*global React */
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/// <reference path="../typings/tsd.d.ts" />
/// <reference path="./interfaces.d.ts"/>
var constants_1 = require("./constants");
var utils_1 = require("./utils");
var TodoFooter = (function (_super) {
__extends(TodoFooter, _super);
function TodoFooter() {
_super.apply(this, arguments);
}
TodoFooter.prototype.render = function () {
var activeTodoWord = utils_1.Utils.pluralize(this.props.count, 'item');
var clearButton = null;
if (this.props.completedCount > 0) {
clearButton = (React.createElement("button", {"className": "clear-completed", "onClick": this.props.onClearCompleted}, "Clear completed"));
}
var nowShowing = this.props.nowShowing;
return (React.createElement("footer", {"className": "footer"}, React.createElement("span", {"className": "todo-count"}, React.createElement("strong", null, this.props.count), " ", activeTodoWord, " left"), React.createElement("ul", {"className": "filters"}, React.createElement("li", null, React.createElement("a", {"href": "#/", "className": classNames({ selected: nowShowing === constants_1.ALL_TODOS })}, "All")), ' ', React.createElement("li", null, React.createElement("a", {"href": "#/active", "className": classNames({ selected: nowShowing === constants_1.ACTIVE_TODOS })}, "Active")), ' ', React.createElement("li", null, React.createElement("a", {"href": "#/completed", "className": classNames({ selected: nowShowing === constants_1.COMPLETED_TODOS })}, "Completed"))), clearButton));
};
return TodoFooter;
})(React.Component);
exports.TodoFooter = TodoFooter;
/*jshint quotmark:false */
/*jshint white:false */
/*jshint trailing:false */
/*jshint newcap:false */
/*global React */
/// <reference path="../typings/tsd.d.ts" />
/// <reference path="./interfaces.d.ts"/>
import { ALL_TODOS, ACTIVE_TODOS, COMPLETED_TODOS } from "./constants";
import { Utils } from "./utils";
class TodoFooter extends React.Component<ITodoFooterProps, {}> {
public render() {
var activeTodoWord = 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>
);
}
const 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={classNames({selected: nowShowing === ALL_TODOS})}>
All
</a>
</li>
{' '}
<li>
<a
href="#/active"
className={classNames({selected: nowShowing === ACTIVE_TODOS})}>
Active
</a>
</li>
{' '}
<li>
<a
href="#/completed"
className={classNames({selected: nowShowing === COMPLETED_TODOS})}>
Completed
</a>
</li>
</ul>
{clearButton}
</footer>
);
}
}
export { TodoFooter };
interface ITodo {
id: string,
title: string,
completed: boolean
}
interface ITodoItemProps {
key : string,
todo : ITodo;
editing? : boolean;
onSave: (val: any) => void;
onDestroy: () => void;
onEdit: () => void;
onCancel: (event : any) => void;
onToggle: () => void;
}
interface ITodoItemState {
editText : string
}
interface ITodoFooterProps {
completedCount : number;
onClearCompleted : any;
nowShowing : string;
count : number;
}
interface ITodoModel {
key : any;
todos : Array<ITodo>;
onChanges : Array<any>;
subscribe(onChange);
inform();
addTodo(title : string);
toggleAll(checked);
toggle(todoToToggle);
destroy(todo);
save(todoToSave, text);
clearCompleted();
}
interface IAppProps {
model : ITodoModel;
}
interface IAppState {
editing? : string;
nowShowing? : string
}
/*jshint quotmark: false */
/*jshint white: false */
/*jshint trailing: false */
/*jshint newcap: false */
/*global React */
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/// <reference path="../typings/tsd.d.ts" />
/// <reference path="./interfaces.d.ts"/>
var constants_1 = require("./constants");
var TodoItem = (function (_super) {
__extends(TodoItem, _super);
function TodoItem(props) {
_super.call(this, props);
this.state = { editText: this.props.todo.title };
}
TodoItem.prototype.handleSubmit = function (event) {
var val = this.state.editText.trim();
if (val) {
this.props.onSave(val);
this.setState({ editText: val });
}
else {
this.props.onDestroy();
}
};
TodoItem.prototype.handleEdit = function () {
this.props.onEdit();
this.setState({ editText: this.props.todo.title });
};
TodoItem.prototype.handleKeyDown = function (event) {
if (event.keyCode === constants_1.ESCAPE_KEY) {
this.setState({ editText: this.props.todo.title });
this.props.onCancel(event);
}
else if (event.keyCode === constants_1.ENTER_KEY) {
this.handleSubmit(event);
}
};
TodoItem.prototype.handleChange = function (event) {
var input = event.target;
this.setState({ editText: input.value });
};
TodoItem.prototype.shouldComponentUpdate = function (nextProps, nextState) {
return (nextProps.todo !== this.props.todo ||
nextProps.editing !== this.props.editing ||
nextState.editText !== this.state.editText);
};
TodoItem.prototype.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);
}
};
TodoItem.prototype.render = function () {
var _this = this;
return (React.createElement("li", {"className": classNames({
completed: this.props.todo.completed,
editing: this.props.editing
})}, React.createElement("div", {"className": "view"}, React.createElement("input", {"className": "toggle", "type": "checkbox", "checked": this.props.todo.completed, "onChange": this.props.onToggle}), React.createElement("label", {"onDoubleClick": function (e) { return _this.handleEdit(); }}, this.props.todo.title), React.createElement("button", {"className": "destroy", "onClick": this.props.onDestroy})), React.createElement("input", {"ref": "editField", "className": "edit", "value": this.state.editText, "onBlur": function (e) { return _this.handleSubmit(e); }, "onChange": function (e) { return _this.handleChange(e); }, "onKeyDown": function (e) { return _this.handleKeyDown(e); }})));
};
return TodoItem;
})(React.Component);
exports.TodoItem = TodoItem;
/*jshint quotmark: false */
/*jshint white: false */
/*jshint trailing: false */
/*jshint newcap: false */
/*global React */
/// <reference path="../typings/tsd.d.ts" />
/// <reference path="./interfaces.d.ts"/>
import { ENTER_KEY, ESCAPE_KEY } from "./constants";
class TodoItem extends React.Component<ITodoItemProps, ITodoItemState> {
public state : ITodoItemState;
constructor(props : ITodoItemProps){
super(props);
this.state = { editText: this.props.todo.title };
}
public handleSubmit(event : __React.FormEvent) {
var val = this.state.editText.trim();
if (val) {
this.props.onSave(val);
this.setState({editText: val});
} else {
this.props.onDestroy();
}
}
public handleEdit() {
this.props.onEdit();
this.setState({editText: this.props.todo.title});
}
public handleKeyDown(event : __React.KeyboardEvent) {
if (event.keyCode === ESCAPE_KEY) {
this.setState({editText: this.props.todo.title});
this.props.onCancel(event);
} else if (event.keyCode === ENTER_KEY) {
this.handleSubmit(event);
}
}
public handleChange(event : __React.FormEvent) {
var input : any = event.target;
this.setState({ editText : input.value });
}
/**
* 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.
*/
public shouldComponentUpdate(nextProps : ITodoItemProps, nextState : ITodoItemState) {
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
*/
public componentDidUpdate(prevProps : ITodoItemProps) {
if (!prevProps.editing && this.props.editing) {
var node = React.findDOMNode<HTMLInputElement>(this.refs["editField"]);
node.focus();
node.setSelectionRange(node.value.length, node.value.length);
}
}
public render() {
return (
<li className={classNames({
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={ e => 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={ e => this.handleSubmit(e) }
onChange={ e => this.handleChange(e) }
onKeyDown={ e => this.handleKeyDown(e) }
/>
</li>
);
}
}
export { TodoItem };
/*jshint quotmark:false */
/*jshint white:false */
/*jshint trailing:false */
/*jshint newcap:false */
/// <reference path="../typings/tsd.d.ts" />
/// <reference path="./interfaces.d.ts"/>
var utils_1 = require("./utils");
var TodoModel = (function () {
function TodoModel(key) {
this.key = key;
this.todos = utils_1.Utils.store(key);
this.onChanges = [];
}
TodoModel.prototype.subscribe = function (onChange) {
this.onChanges.push(onChange);
};
TodoModel.prototype.inform = function () {
utils_1.Utils.store(this.key, this.todos);
this.onChanges.forEach(function (cb) { cb(); });
};
TodoModel.prototype.addTodo = function (title) {
this.todos = this.todos.concat({
id: utils_1.Utils.uuid(),
title: title,
completed: false
});
this.inform();
};
TodoModel.prototype.toggleAll = function (checked) {
this.todos = this.todos.map(function (todo) {
return utils_1.Utils.extend({}, todo, { completed: checked });
});
this.inform();
};
TodoModel.prototype.toggle = function (todoToToggle) {
this.todos = this.todos.map(function (todo) {
return todo !== todoToToggle ?
todo :
utils_1.Utils.extend({}, todo, { completed: !todo.completed });
});
this.inform();
};
TodoModel.prototype.destroy = function (todo) {
this.todos = this.todos.filter(function (candidate) {
return candidate !== todo;
});
this.inform();
};
TodoModel.prototype.save = function (todoToSave, text) {
this.todos = this.todos.map(function (todo) {
return todo !== todoToSave ? todo : utils_1.Utils.extend({}, todo, { title: text });
});
this.inform();
};
TodoModel.prototype.clearCompleted = function () {
this.todos = this.todos.filter(function (todo) {
return !todo.completed;
});
this.inform();
};
return TodoModel;
})();
exports.TodoModel = TodoModel;
/*jshint quotmark:false */
/*jshint white:false */
/*jshint trailing:false */
/*jshint newcap:false */
/// <reference path="../typings/tsd.d.ts" />
/// <reference path="./interfaces.d.ts"/>
import { Utils } from "./utils";
// Generic "model" object. You can use whatever
// framework you want. For this application it
// may not even be worth separating this logic
// out, but we do this to demonstrate one way to
// separate out parts of your application.
class TodoModel implements ITodoModel {
public key : string;
public todos : Array<ITodo>;
public onChanges : Array<any>;
constructor(key) {
this.key = key;
this.todos = Utils.store(key);
this.onChanges = [];
}
public subscribe(onChange) {
this.onChanges.push(onChange);
}
public inform() {
Utils.store(this.key, this.todos);
this.onChanges.forEach(function (cb) { cb(); });
}
public addTodo(title : string) {
this.todos = this.todos.concat({
id: Utils.uuid(),
title: title,
completed: false
});
this.inform();
}
public toggleAll(checked : Boolean) {
// Note: It's usually better to use immutable data structures since they're
// easier to reason about and React works very well with them. That's why
// we use map(), filter() and reduce() everywhere instead of mutating the
// array or todo items themselves.
this.todos = this.todos.map<ITodo>((todo : ITodo) => {
return Utils.extend({}, todo, {completed: checked});
});
this.inform();
}
public toggle(todoToToggle : ITodo) {
this.todos = this.todos.map<ITodo>((todo : ITodo) => {
return todo !== todoToToggle ?
todo :
Utils.extend({}, todo, {completed: !todo.completed});
});
this.inform();
}
public destroy(todo : ITodo) {
this.todos = this.todos.filter(function (candidate) {
return candidate !== todo;
});
this.inform();
}
public save(todoToSave : ITodo, text : string) {
this.todos = this.todos.map(function (todo) {
return todo !== todoToSave ? todo : Utils.extend({}, todo, {title: text});
});
this.inform();
}
public clearCompleted() {
this.todos = this.todos.filter(function (todo) {
return !todo.completed;
});
this.inform();
}
}
export { TodoModel };
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"isolatedModules": false,
"jsx": "react",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"declaration": false,
"noImplicitAny": false,
"removeComments": true,
"noLib": false,
"preserveConstEnums": true,
"suppressImplicitAnyIndexErrors": true
},
"filesGlob": [
"**/*.ts",
"**/*.tsx",
"!node_modules/**"
],
"files": [
"constants.ts",
"interfaces.d.ts",
"todoModel.ts",
"utils.ts",
"app.tsx",
"footer.tsx",
"todoItem.tsx"
],
"exclude": []
}
var Utils = (function () {
function Utils() {
}
Utils.uuid = function () {
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;
};
Utils.pluralize = function (count, word) {
return count === 1 ? word : word + 's';
};
Utils.store = function (namespace, data) {
if (data) {
return localStorage.setItem(namespace, JSON.stringify(data));
}
var store = localStorage.getItem(namespace);
return (store && JSON.parse(store)) || [];
};
Utils.extend = function () {
var objs = [];
for (var _i = 0; _i < arguments.length; _i++) {
objs[_i - 0] = arguments[_i];
}
var newObj = {};
for (var i = 0; i < objs.length; i++) {
var obj = objs[i];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key];
}
}
}
return newObj;
};
return Utils;
})();
exports.Utils = Utils;
class Utils {
public static uuid() : string {
/*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;
}
public static pluralize(count: number, word: string) {
return count === 1 ? word : word + 's';
}
public static store(namespace : string, data? : any) {
if (data) {
return localStorage.setItem(namespace, JSON.stringify(data));
}
var store = localStorage.getItem(namespace);
return (store && JSON.parse(store)) || [];
}
public static extend(...objs : any[]) : any {
var newObj = {};
for (var i = 0; i < objs.length; i++) {
var obj = objs[i];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key];
}
}
}
return newObj;
}
}
export { Utils };
/*!
Copyright (c) 2015 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
'use strict';
var hasOwn = {}.hasOwnProperty;
function classNames () {
var classes = '';
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes += ' ' + arg;
} else if (Array.isArray(arg)) {
classes += ' ' + classNames.apply(null, arg);
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes += ' ' + key;
}
}
}
}
return classes.substr(1);
}
if (typeof module !== 'undefined' && module.exports) {
module.exports = classNames;
} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
// register as 'classnames', consistent with npm package name
define('classnames', function () {
return classNames;
});
} else {
window.classNames = classNames;
}
}());
//
// Generated on Tue Dec 16 2014 12:13:47 GMT+0100 (CET) by Charlie Robbins, Paolo Fragomeni & the Contributors (Using Codesurgeon).
// Version 1.2.6
//
(function (exports) {
/*
* browser.js: Browser specific functionality for director.
*
* (C) 2011, Charlie Robbins, Paolo Fragomeni, & the Contributors.
* MIT LICENSE
*
*/
var dloc = document.location;
function dlocHashEmpty() {
// Non-IE browsers return '' when the address bar shows '#'; Director's logic
// assumes both mean empty.
return dloc.hash === '' || dloc.hash === '#';
}
var listener = {
mode: 'modern',
hash: dloc.hash,
history: false,
check: function () {
var h = dloc.hash;
if (h != this.hash) {
this.hash = h;
this.onHashChanged();
}
},
fire: function () {
if (this.mode === 'modern') {
this.history === true ? window.onpopstate() : window.onhashchange();
}
else {
this.onHashChanged();
}
},
init: function (fn, history) {
var self = this;
this.history = history;
if (!Router.listeners) {
Router.listeners = [];
}
function onchange(onChangeEvent) {
for (var i = 0, l = Router.listeners.length; i < l; i++) {
Router.listeners[i](onChangeEvent);
}
}
//note IE8 is being counted as 'modern' because it has the hashchange event
if ('onhashchange' in window && (document.documentMode === undefined
|| document.documentMode > 7)) {
// At least for now HTML5 history is available for 'modern' browsers only
if (this.history === true) {
// There is an old bug in Chrome that causes onpopstate to fire even
// upon initial page load. Since the handler is run manually in init(),
// this would cause Chrome to run it twise. Currently the only
// workaround seems to be to set the handler after the initial page load
// http://code.google.com/p/chromium/issues/detail?id=63040
setTimeout(function() {
window.onpopstate = onchange;
}, 500);
}
else {
window.onhashchange = onchange;
}
this.mode = 'modern';
}
else {
//
// IE support, based on a concept by Erik Arvidson ...
//
var frame = document.createElement('iframe');
frame.id = 'state-frame';
frame.style.display = 'none';
document.body.appendChild(frame);
this.writeFrame('');
if ('onpropertychange' in document && 'attachEvent' in document) {
document.attachEvent('onpropertychange', function () {
if (event.propertyName === 'location') {
self.check();
}
});
}
window.setInterval(function () { self.check(); }, 50);
this.onHashChanged = onchange;
this.mode = 'legacy';
}
Router.listeners.push(fn);
return this.mode;
},
destroy: function (fn) {
if (!Router || !Router.listeners) {
return;
}
var listeners = Router.listeners;
for (var i = listeners.length - 1; i >= 0; i--) {
if (listeners[i] === fn) {
listeners.splice(i, 1);
}
}
},
setHash: function (s) {
// Mozilla always adds an entry to the history
if (this.mode === 'legacy') {
this.writeFrame(s);
}
if (this.history === true) {
window.history.pushState({}, document.title, s);
// Fire an onpopstate event manually since pushing does not obviously
// trigger the pop event.
this.fire();
} else {
dloc.hash = (s[0] === '/') ? s : '/' + s;
}
return this;
},
writeFrame: function (s) {
// IE support...
var f = document.getElementById('state-frame');
var d = f.contentDocument || f.contentWindow.document;
d.open();
d.write("<script>_hash = '" + s + "'; onload = parent.listener.syncHash;<script>");
d.close();
},
syncHash: function () {
// IE support...
var s = this._hash;
if (s != dloc.hash) {
dloc.hash = s;
}
return this;
},
onHashChanged: function () {}
};
var Router = exports.Router = function (routes) {
if (!(this instanceof Router)) return new Router(routes);
this.params = {};
this.routes = {};
this.methods = ['on', 'once', 'after', 'before'];
this.scope = [];
this._methods = {};
this._insert = this.insert;
this.insert = this.insertEx;
this.historySupport = (window.history != null ? window.history.pushState : null) != null
this.configure();
this.mount(routes || {});
};
Router.prototype.init = function (r) {
var self = this
, routeTo;
this.handler = function(onChangeEvent) {
var newURL = onChangeEvent && onChangeEvent.newURL || window.location.hash;
var url = self.history === true ? self.getPath() : newURL.replace(/.*#/, '');
self.dispatch('on', url.charAt(0) === '/' ? url : '/' + url);
};
listener.init(this.handler, this.history);
if (this.history === false) {
if (dlocHashEmpty() && r) {
dloc.hash = r;
} else if (!dlocHashEmpty()) {
self.dispatch('on', '/' + dloc.hash.replace(/^(#\/|#|\/)/, ''));
}
}
else {
if (this.convert_hash_in_init) {
// Use hash as route
routeTo = dlocHashEmpty() && r ? r : !dlocHashEmpty() ? dloc.hash.replace(/^#/, '') : null;
if (routeTo) {
window.history.replaceState({}, document.title, routeTo);
}
}
else {
// Use canonical url
routeTo = this.getPath();
}
// Router has been initialized, but due to the chrome bug it will not
// yet actually route HTML5 history state changes. Thus, decide if should route.
if (routeTo || this.run_in_init === true) {
this.handler();
}
}
return this;
};
Router.prototype.explode = function () {
var v = this.history === true ? this.getPath() : dloc.hash;
if (v.charAt(1) === '/') { v=v.slice(1) }
return v.slice(1, v.length).split("/");
};
Router.prototype.setRoute = function (i, v, val) {
var url = this.explode();
if (typeof i === 'number' && typeof v === 'string') {
url[i] = v;
}
else if (typeof val === 'string') {
url.splice(i, v, s);
}
else {
url = [i];
}
listener.setHash(url.join('/'));
return url;
};
//
// ### function insertEx(method, path, route, parent)
// #### @method {string} Method to insert the specific `route`.
// #### @path {Array} Parsed path to insert the `route` at.
// #### @route {Array|function} Route handlers to insert.
// #### @parent {Object} **Optional** Parent "routes" to insert into.
// insert a callback that will only occur once per the matched route.
//
Router.prototype.insertEx = function(method, path, route, parent) {
if (method === "once") {
method = "on";
route = function(route) {
var once = false;
return function() {
if (once) return;
once = true;
return route.apply(this, arguments);
};
}(route);
}
return this._insert(method, path, route, parent);
};
Router.prototype.getRoute = function (v) {
var ret = v;
if (typeof v === "number") {
ret = this.explode()[v];
}
else if (typeof v === "string"){
var h = this.explode();
ret = h.indexOf(v);
}
else {
ret = this.explode();
}
return ret;
};
Router.prototype.destroy = function () {
listener.destroy(this.handler);
return this;
};
Router.prototype.getPath = function () {
var path = window.location.pathname;
if (path.substr(0, 1) !== '/') {
path = '/' + path;
}
return path;
};
function _every(arr, iterator) {
for (var i = 0; i < arr.length; i += 1) {
if (iterator(arr[i], i, arr) === false) {
return;
}
}
}
function _flatten(arr) {
var flat = [];
for (var i = 0, n = arr.length; i < n; i++) {
flat = flat.concat(arr[i]);
}
return flat;
}
function _asyncEverySeries(arr, iterator, callback) {
if (!arr.length) {
return callback();
}
var completed = 0;
(function iterate() {
iterator(arr[completed], function(err) {
if (err || err === false) {
callback(err);
callback = function() {};
} else {
completed += 1;
if (completed === arr.length) {
callback();
} else {
iterate();
}
}
});
})();
}
function paramifyString(str, params, mod) {
mod = str;
for (var param in params) {
if (params.hasOwnProperty(param)) {
mod = params[param](str);
if (mod !== str) {
break;
}
}
}
return mod === str ? "([._a-zA-Z0-9-%()]+)" : mod;
}
function regifyString(str, params) {
var matches, last = 0, out = "";
while (matches = str.substr(last).match(/[^\w\d\- %@&]*\*[^\w\d\- %@&]*/)) {
last = matches.index + matches[0].length;
matches[0] = matches[0].replace(/^\*/, "([_.()!\\ %@&a-zA-Z0-9-]+)");
out += str.substr(0, matches.index) + matches[0];
}
str = out += str.substr(last);
var captures = str.match(/:([^\/]+)/ig), capture, length;
if (captures) {
length = captures.length;
for (var i = 0; i < length; i++) {
capture = captures[i];
if (capture.slice(0, 2) === "::") {
str = capture.slice(1);
} else {
str = str.replace(capture, paramifyString(capture, params));
}
}
}
return str;
}
function terminator(routes, delimiter, start, stop) {
var last = 0, left = 0, right = 0, start = (start || "(").toString(), stop = (stop || ")").toString(), i;
for (i = 0; i < routes.length; i++) {
var chunk = routes[i];
if (chunk.indexOf(start, last) > chunk.indexOf(stop, last) || ~chunk.indexOf(start, last) && !~chunk.indexOf(stop, last) || !~chunk.indexOf(start, last) && ~chunk.indexOf(stop, last)) {
left = chunk.indexOf(start, last);
right = chunk.indexOf(stop, last);
if (~left && !~right || !~left && ~right) {
var tmp = routes.slice(0, (i || 1) + 1).join(delimiter);
routes = [ tmp ].concat(routes.slice((i || 1) + 1));
}
last = (right > left ? right : left) + 1;
i = 0;
} else {
last = 0;
}
}
return routes;
}
var QUERY_SEPARATOR = /\?.*/;
Router.prototype.configure = function(options) {
options = options || {};
for (var i = 0; i < this.methods.length; i++) {
this._methods[this.methods[i]] = true;
}
this.recurse = options.recurse || this.recurse || false;
this.async = options.async || false;
this.delimiter = options.delimiter || "/";
this.strict = typeof options.strict === "undefined" ? true : options.strict;
this.notfound = options.notfound;
this.resource = options.resource;
this.history = options.html5history && this.historySupport || false;
this.run_in_init = this.history === true && options.run_handler_in_init !== false;
this.convert_hash_in_init = this.history === true && options.convert_hash_in_init !== false;
this.every = {
after: options.after || null,
before: options.before || null,
on: options.on || null
};
return this;
};
Router.prototype.param = function(token, matcher) {
if (token[0] !== ":") {
token = ":" + token;
}
var compiled = new RegExp(token, "g");
this.params[token] = function(str) {
return str.replace(compiled, matcher.source || matcher);
};
return this;
};
Router.prototype.on = Router.prototype.route = function(method, path, route) {
var self = this;
if (!route && typeof path == "function") {
route = path;
path = method;
method = "on";
}
if (Array.isArray(path)) {
return path.forEach(function(p) {
self.on(method, p, route);
});
}
if (path.source) {
path = path.source.replace(/\\\//ig, "/");
}
if (Array.isArray(method)) {
return method.forEach(function(m) {
self.on(m.toLowerCase(), path, route);
});
}
path = path.split(new RegExp(this.delimiter));
path = terminator(path, this.delimiter);
this.insert(method, this.scope.concat(path), route);
};
Router.prototype.path = function(path, routesFn) {
var self = this, length = this.scope.length;
if (path.source) {
path = path.source.replace(/\\\//ig, "/");
}
path = path.split(new RegExp(this.delimiter));
path = terminator(path, this.delimiter);
this.scope = this.scope.concat(path);
routesFn.call(this, this);
this.scope.splice(length, path.length);
};
Router.prototype.dispatch = function(method, path, callback) {
var self = this, fns = this.traverse(method, path.replace(QUERY_SEPARATOR, ""), this.routes, ""), invoked = this._invoked, after;
this._invoked = true;
if (!fns || fns.length === 0) {
this.last = [];
if (typeof this.notfound === "function") {
this.invoke([ this.notfound ], {
method: method,
path: path
}, callback);
}
return false;
}
if (this.recurse === "forward") {
fns = fns.reverse();
}
function updateAndInvoke() {
self.last = fns.after;
self.invoke(self.runlist(fns), self, callback);
}
after = this.every && this.every.after ? [ this.every.after ].concat(this.last) : [ this.last ];
if (after && after.length > 0 && invoked) {
if (this.async) {
this.invoke(after, this, updateAndInvoke);
} else {
this.invoke(after, this);
updateAndInvoke();
}
return true;
}
updateAndInvoke();
return true;
};
Router.prototype.invoke = function(fns, thisArg, callback) {
var self = this;
var apply;
if (this.async) {
apply = function(fn, next) {
if (Array.isArray(fn)) {
return _asyncEverySeries(fn, apply, next);
} else if (typeof fn == "function") {
fn.apply(thisArg, (fns.captures || []).concat(next));
}
};
_asyncEverySeries(fns, apply, function() {
if (callback) {
callback.apply(thisArg, arguments);
}
});
} else {
apply = function(fn) {
if (Array.isArray(fn)) {
return _every(fn, apply);
} else if (typeof fn === "function") {
return fn.apply(thisArg, fns.captures || []);
} else if (typeof fn === "string" && self.resource) {
self.resource[fn].apply(thisArg, fns.captures || []);
}
};
_every(fns, apply);
}
};
Router.prototype.traverse = function(method, path, routes, regexp, filter) {
var fns = [], current, exact, match, next, that;
function filterRoutes(routes) {
if (!filter) {
return routes;
}
function deepCopy(source) {
var result = [];
for (var i = 0; i < source.length; i++) {
result[i] = Array.isArray(source[i]) ? deepCopy(source[i]) : source[i];
}
return result;
}
function applyFilter(fns) {
for (var i = fns.length - 1; i >= 0; i--) {
if (Array.isArray(fns[i])) {
applyFilter(fns[i]);
if (fns[i].length === 0) {
fns.splice(i, 1);
}
} else {
if (!filter(fns[i])) {
fns.splice(i, 1);
}
}
}
}
var newRoutes = deepCopy(routes);
newRoutes.matched = routes.matched;
newRoutes.captures = routes.captures;
newRoutes.after = routes.after.filter(filter);
applyFilter(newRoutes);
return newRoutes;
}
if (path === this.delimiter && routes[method]) {
next = [ [ routes.before, routes[method] ].filter(Boolean) ];
next.after = [ routes.after ].filter(Boolean);
next.matched = true;
next.captures = [];
return filterRoutes(next);
}
for (var r in routes) {
if (routes.hasOwnProperty(r) && (!this._methods[r] || this._methods[r] && typeof routes[r] === "object" && !Array.isArray(routes[r]))) {
current = exact = regexp + this.delimiter + r;
if (!this.strict) {
exact += "[" + this.delimiter + "]?";
}
match = path.match(new RegExp("^" + exact));
if (!match) {
continue;
}
if (match[0] && match[0] == path && routes[r][method]) {
next = [ [ routes[r].before, routes[r][method] ].filter(Boolean) ];
next.after = [ routes[r].after ].filter(Boolean);
next.matched = true;
next.captures = match.slice(1);
if (this.recurse && routes === this.routes) {
next.push([ routes.before, routes.on ].filter(Boolean));
next.after = next.after.concat([ routes.after ].filter(Boolean));
}
return filterRoutes(next);
}
next = this.traverse(method, path, routes[r], current);
if (next.matched) {
if (next.length > 0) {
fns = fns.concat(next);
}
if (this.recurse) {
fns.push([ routes[r].before, routes[r].on ].filter(Boolean));
next.after = next.after.concat([ routes[r].after ].filter(Boolean));
if (routes === this.routes) {
fns.push([ routes["before"], routes["on"] ].filter(Boolean));
next.after = next.after.concat([ routes["after"] ].filter(Boolean));
}
}
fns.matched = true;
fns.captures = next.captures;
fns.after = next.after;
return filterRoutes(fns);
}
}
}
return false;
};
Router.prototype.insert = function(method, path, route, parent) {
var methodType, parentType, isArray, nested, part;
path = path.filter(function(p) {
return p && p.length > 0;
});
parent = parent || this.routes;
part = path.shift();
if (/\:|\*/.test(part) && !/\\d|\\w/.test(part)) {
part = regifyString(part, this.params);
}
if (path.length > 0) {
parent[part] = parent[part] || {};
return this.insert(method, path, route, parent[part]);
}
if (!part && !path.length && parent === this.routes) {
methodType = typeof parent[method];
switch (methodType) {
case "function":
parent[method] = [ parent[method], route ];
return;
case "object":
parent[method].push(route);
return;
case "undefined":
parent[method] = route;
return;
}
return;
}
parentType = typeof parent[part];
isArray = Array.isArray(parent[part]);
if (parent[part] && !isArray && parentType == "object") {
methodType = typeof parent[part][method];
switch (methodType) {
case "function":
parent[part][method] = [ parent[part][method], route ];
return;
case "object":
parent[part][method].push(route);
return;
case "undefined":
parent[part][method] = route;
return;
}
} else if (parentType == "undefined") {
nested = {};
nested[method] = route;
parent[part] = nested;
return;
}
throw new Error("Invalid route context: " + parentType);
};
Router.prototype.extend = function(methods) {
var self = this, len = methods.length, i;
function extend(method) {
self._methods[method] = true;
self[method] = function() {
var extra = arguments.length === 1 ? [ method, "" ] : [ method ];
self.on.apply(self, extra.concat(Array.prototype.slice.call(arguments)));
};
}
for (i = 0; i < len; i++) {
extend(methods[i]);
}
};
Router.prototype.runlist = function(fns) {
var runlist = this.every && this.every.before ? [ this.every.before ].concat(_flatten(fns)) : _flatten(fns);
if (this.every && this.every.on) {
runlist.push(this.every.on);
}
runlist.captures = fns.captures;
runlist.source = fns.source;
return runlist;
};
Router.prototype.mount = function(routes, path) {
if (!routes || typeof routes !== "object" || Array.isArray(routes)) {
return;
}
var self = this;
path = path || [];
if (!Array.isArray(path)) {
path = path.split(self.delimiter);
}
function insertOrMount(route, local) {
var rename = route, parts = route.split(self.delimiter), routeType = typeof routes[route], isRoute = parts[0] === "" || !self._methods[parts[0]], event = isRoute ? "on" : rename;
if (isRoute) {
rename = rename.slice((rename.match(new RegExp("^" + self.delimiter)) || [ "" ])[0].length);
parts.shift();
}
if (isRoute && routeType === "object" && !Array.isArray(routes[route])) {
local = local.concat(parts);
self.mount(routes[route], local);
return;
}
if (isRoute) {
local = local.concat(rename.split(self.delimiter));
local = terminator(local, self.delimiter);
}
self.insert(event, local, routes[route]);
}
for (var route in routes) {
if (routes.hasOwnProperty(route)) {
insertOrMount(route, path.slice(0));
}
}
};
}(typeof exports === "object" ? exports : window));
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
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;
}
}
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;
}
}
/* 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);
})();
{
"private": true,
"dependencies": {
"classnames": "^2.1.5",
"director": "^1.2.0",
"react": "^0.13.3",
"todomvc-app-css": "^2.0.0",
"todomvc-common": "^1.0.1"
}
}
# TypeScript & React TodoMVC Example
> TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.
> _[TypeScript - typescriptlang.org](http://typescriptlang.org)_
> 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.
> _[React - facebook.github.io/react](http://facebook.github.io/react)_
## Learning TypeScript
The [TypeScript website](http://typescriptlang.org) is a great resource for getting started.
Here are some links you may find helpful:
* [Tutorial](http://www.typescriptlang.org/Tutorial)
* [Code Playground](http://www.typescriptlang.org/Playground)
* [Documentation](http://typescript.codeplex.com/documentation)
* [Applications built with TypeScript](http://www.typescriptlang.org/Samples)
* [Blog](http://blogs.msdn.com/b/typescript)
* [Source Code](http://typescript.codeplex.com/sourcecontrol/latest#README.txt)
Articles and guides from the community:
* [Thoughts on TypeScript](http://www.nczonline.net/blog/2012/10/04/thoughts-on-typescript)
* [ScreenCast - Why I Like TypeScript](http://www.leebrimelow.com/why-i-like-typescripts)
Get help from other TypeScript users:
* [TypeScript on StackOverflow](http://stackoverflow.com/questions/tagged/typescript)
* [Forums](http://typescript.codeplex.com/discussions)
* [TypeScript on Twitter](http://twitter.com/typescriptlang)
_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)._
## 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:
* [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)
* [Discussion Forum](https://discuss.reactjs.org/)
_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
A standalone TypeScript compiler is available on NPM.
npm install typescript
To compile the TypeScript in this project:
# from examples/typescript-react
$ tsc -p js
To be able to run the output JS files in the browser:
# from examples/typescript-react
$ npm install -g browserify
$ browserify js/app.js -o js/bundle.js
To run the app, spin up an HTTP server (e.g. `python -m SimpleHTTPServer`) and visit http://localhost/.../myexample/.
{
"version": "v4",
"repo": "borisyankov/DefinitelyTyped",
"ref": "master",
"path": "typings",
"bundle": "typings/tsd.d.ts",
"installed": {
"react/react.d.ts": {
"commit": "3fc1377ce29dd9670975cb68615edf1b819fc4a5"
},
"classnames/classnames.d.ts": {
"commit": "14ab703f435375194360cdba3abab61afc879c18"
}
}
}
// Type definitions for classnames
// Project: https://github.com/JedWatson/classnames
// Definitions by: Dave Keen <http://www.keendevelopment.ch>, Adi Dahiya <https://github.com/adidahiya>, Jason Killian <https://github.com/JKillian>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
declare type ClassValue = string | number | ClassDictionary | ClassArray;
interface ClassDictionary {
[id: string]: boolean;
}
interface ClassArray extends Array<ClassValue> { }
interface ClassNamesFn {
(...classes: ClassValue[]): string;
}
declare var classNames: ClassNamesFn;
declare module "classnames" {
export = classNames
}
// Type definitions for React v0.13.3 (namespace)
// Project: http://facebook.github.io/react/
// Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>, Microsoft <https://microsoft.com>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
/// <reference path="./react.d.ts" />
import React = __React;
declare namespace __React {
//
// React.addons
// ----------------------------------------------------------------------
export module addons {
export var CSSTransitionGroup: CSSTransitionGroup;
export var TransitionGroup: TransitionGroup;
export var LinkedStateMixin: LinkedStateMixin;
export var PureRenderMixin: PureRenderMixin;
export function batchedUpdates<A, B>(
callback: (a: A, b: B) => any, a: A, b: B): void;
export function batchedUpdates<A>(callback: (a: A) => any, a: A): void;
export function batchedUpdates(callback: () => any): void;
// deprecated: use petehunt/react-classset or JedWatson/classnames
export function classSet(cx: { [key: string]: boolean }): string;
export function classSet(...classList: string[]): string;
export function cloneWithProps<P>(
element: DOMElement<P>, props: P): DOMElement<P>;
export function cloneWithProps<P>(
element: ClassicElement<P>, props: P): ClassicElement<P>;
export function cloneWithProps<P>(
element: ReactElement<P>, props: P): ReactElement<P>;
export function createFragment(
object: { [key: string]: ReactNode }): ReactFragment;
export function update(value: any[], spec: UpdateArraySpec): any[];
export function update(value: {}, spec: UpdateSpec): any;
// Development tools
export import Perf = ReactPerf;
export import TestUtils = ReactTestUtils;
}
//
// React.addons (Transitions)
// ----------------------------------------------------------------------
interface TransitionGroupProps {
component?: ReactType;
childFactory?: (child: ReactElement<any>) => ReactElement<any>;
}
interface CSSTransitionGroupProps extends TransitionGroupProps {
transitionName: string;
transitionAppear?: boolean;
transitionEnter?: boolean;
transitionLeave?: boolean;
}
type CSSTransitionGroup = ComponentClass<CSSTransitionGroupProps>;
type TransitionGroup = ComponentClass<TransitionGroupProps>;
//
// React.addons (Mixins)
// ----------------------------------------------------------------------
interface ReactLink<T> {
value: T;
requestChange(newValue: T): void;
}
interface LinkedStateMixin extends Mixin<any, any> {
linkState<T>(key: string): ReactLink<T>;
}
interface PureRenderMixin extends Mixin<any, any> {
}
//
// Reat.addons.update
// ----------------------------------------------------------------------
interface UpdateSpecCommand {
$set?: any;
$merge?: {};
$apply?(value: any): any;
}
interface UpdateSpecPath {
[key: string]: UpdateSpec;
}
type UpdateSpec = UpdateSpecCommand | UpdateSpecPath;
interface UpdateArraySpec extends UpdateSpecCommand {
$push?: any[];
$unshift?: any[];
$splice?: any[][];
}
//
// React.addons.Perf
// ----------------------------------------------------------------------
interface ComponentPerfContext {
current: string;
owner: string;
}
interface NumericPerfContext {
[key: string]: number;
}
interface Measurements {
exclusive: NumericPerfContext;
inclusive: NumericPerfContext;
render: NumericPerfContext;
counts: NumericPerfContext;
writes: NumericPerfContext;
displayNames: {
[key: string]: ComponentPerfContext;
};
totalTime: number;
}
module ReactPerf {
export function start(): void;
export function stop(): void;
export function printInclusive(measurements: Measurements[]): void;
export function printExclusive(measurements: Measurements[]): void;
export function printWasted(measurements: Measurements[]): void;
export function printDOM(measurements: Measurements[]): void;
export function getLastMeasurements(): Measurements[];
}
//
// React.addons.TestUtils
// ----------------------------------------------------------------------
interface MockedComponentClass {
new(): any;
}
module ReactTestUtils {
export import Simulate = ReactSimulate;
export function renderIntoDocument<P>(
element: ReactElement<P>): Component<P, any>;
export function renderIntoDocument<C extends Component<any, any>>(
element: ReactElement<any>): C;
export function mockComponent(
mocked: MockedComponentClass, mockTagName?: string): typeof ReactTestUtils;
export function isElementOfType(
element: ReactElement<any>, type: ReactType): boolean;
export function isTextComponent(instance: Component<any, any>): boolean;
export function isDOMComponent(instance: Component<any, any>): boolean;
export function isCompositeComponent(instance: Component<any, any>): boolean;
export function isCompositeComponentWithType(
instance: Component<any, any>,
type: ComponentClass<any>): boolean;
export function findAllInRenderedTree(
tree: Component<any, any>,
fn: (i: Component<any, any>) => boolean): Component<any, any>;
export function scryRenderedDOMComponentsWithClass(
tree: Component<any, any>,
className: string): DOMComponent<any>[];
export function findRenderedDOMComponentWithClass(
tree: Component<any, any>,
className: string): DOMComponent<any>;
export function scryRenderedDOMComponentsWithTag(
tree: Component<any, any>,
tagName: string): DOMComponent<any>[];
export function findRenderedDOMComponentWithTag(
tree: Component<any, any>,
tagName: string): DOMComponent<any>;
export function scryRenderedComponentsWithType<P>(
tree: Component<any, any>,
type: ComponentClass<P>): Component<P, {}>[];
export function scryRenderedComponentsWithType<C extends Component<any, any>>(
tree: Component<any, any>,
type: ComponentClass<any>): C[];
export function findRenderedComponentWithType<P>(
tree: Component<any, any>,
type: ComponentClass<P>): Component<P, {}>;
export function findRenderedComponentWithType<C extends Component<any, any>>(
tree: Component<any, any>,
type: ComponentClass<any>): C;
export function createRenderer(): ShallowRenderer;
}
interface SyntheticEventData {
altKey?: boolean;
button?: number;
buttons?: number;
clientX?: number;
clientY?: number;
changedTouches?: TouchList;
charCode?: boolean;
clipboardData?: DataTransfer;
ctrlKey?: boolean;
deltaMode?: number;
deltaX?: number;
deltaY?: number;
deltaZ?: number;
detail?: number;
getModifierState?(key: string): boolean;
key?: string;
keyCode?: number;
locale?: string;
location?: number;
metaKey?: boolean;
pageX?: number;
pageY?: number;
relatedTarget?: EventTarget;
repeat?: boolean;
screenX?: number;
screenY?: number;
shiftKey?: boolean;
targetTouches?: TouchList;
touches?: TouchList;
view?: AbstractView;
which?: number;
}
interface EventSimulator {
(element: Element, eventData?: SyntheticEventData): void;
(component: Component<any, any>, eventData?: SyntheticEventData): void;
}
module ReactSimulate {
export var blur: EventSimulator;
export var change: EventSimulator;
export var click: EventSimulator;
export var cut: EventSimulator;
export var doubleClick: EventSimulator;
export var drag: EventSimulator;
export var dragEnd: EventSimulator;
export var dragEnter: EventSimulator;
export var dragExit: EventSimulator;
export var dragLeave: EventSimulator;
export var dragOver: EventSimulator;
export var dragStart: EventSimulator;
export var drop: EventSimulator;
export var focus: EventSimulator;
export var input: EventSimulator;
export var keyDown: EventSimulator;
export var keyPress: EventSimulator;
export var keyUp: EventSimulator;
export var mouseDown: EventSimulator;
export var mouseEnter: EventSimulator;
export var mouseLeave: EventSimulator;
export var mouseMove: EventSimulator;
export var mouseOut: EventSimulator;
export var mouseOver: EventSimulator;
export var mouseUp: EventSimulator;
export var paste: EventSimulator;
export var scroll: EventSimulator;
export var submit: EventSimulator;
export var touchCancel: EventSimulator;
export var touchEnd: EventSimulator;
export var touchMove: EventSimulator;
export var touchStart: EventSimulator;
export var wheel: EventSimulator;
}
class ShallowRenderer {
getRenderOutput<E extends ReactElement<any>>(): E;
getRenderOutput(): ReactElement<any>;
render(element: ReactElement<any>, context?: any): void;
unmount(): void;
}
}
// Type definitions for React v0.13.3
// Project: http://facebook.github.io/react/
// Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>, Microsoft <https://microsoft.com>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
declare namespace __React {
//
// React Elements
// ----------------------------------------------------------------------
type ReactType = ComponentClass<any> | string;
interface ReactElement<P> {
type: string | ComponentClass<P>;
props: P;
key: string | number;
ref: string | ((component: Component<P, any>) => any);
}
interface ClassicElement<P> extends ReactElement<P> {
type: string | ClassicComponentClass<P>;
ref: string | ((component: ClassicComponent<P, any>) => any);
}
interface DOMElement<P> extends ClassicElement<P> {
type: string;
ref: string | ((component: DOMComponent<P>) => any);
}
type HTMLElement = DOMElement<HTMLAttributes>;
type SVGElement = DOMElement<SVGAttributes>;
//
// Factories
// ----------------------------------------------------------------------
interface Factory<P> {
(props?: P, ...children: ReactNode[]): ReactElement<P>;
}
interface ClassicFactory<P> extends Factory<P> {
(props?: P, ...children: ReactNode[]): ClassicElement<P>;
}
interface DOMFactory<P> extends ClassicFactory<P> {
(props?: P, ...children: ReactNode[]): DOMElement<P>;
}
type HTMLFactory = DOMFactory<HTMLAttributes>;
type SVGFactory = DOMFactory<SVGAttributes>;
type SVGElementFactory = DOMFactory<SVGElementAttributes>;
//
// React Nodes
// http://facebook.github.io/react/docs/glossary.html
// ----------------------------------------------------------------------
type ReactText = string | number;
type ReactChild = ReactElement<any> | ReactText;
// Should be Array<ReactNode> but type aliases cannot be recursive
type ReactFragment = {} | Array<ReactChild | any[] | boolean>;
type ReactNode = ReactChild | ReactFragment | boolean;
//
// Top Level API
// ----------------------------------------------------------------------
function createClass<P, S>(spec: ComponentSpec<P, S>): ClassicComponentClass<P>;
function createFactory<P>(type: string): DOMFactory<P>;
function createFactory<P>(type: ClassicComponentClass<P> | string): ClassicFactory<P>;
function createFactory<P>(type: ComponentClass<P>): Factory<P>;
function createElement<P>(
type: string,
props?: P,
...children: ReactNode[]): DOMElement<P>;
function createElement<P>(
type: ClassicComponentClass<P> | string,
props?: P,
...children: ReactNode[]): ClassicElement<P>;
function createElement<P>(
type: ComponentClass<P>,
props?: P,
...children: ReactNode[]): ReactElement<P>;
function cloneElement<P>(
element: DOMElement<P>,
props?: P,
...children: ReactNode[]): DOMElement<P>;
function cloneElement<P>(
element: ClassicElement<P>,
props?: P,
...children: ReactNode[]): ClassicElement<P>;
function cloneElement<P>(
element: ReactElement<P>,
props?: P,
...children: ReactNode[]): ReactElement<P>;
function render<P>(
element: DOMElement<P>,
container: Element,
callback?: () => any): DOMComponent<P>;
function render<P, S>(
element: ClassicElement<P>,
container: Element,
callback?: () => any): ClassicComponent<P, S>;
function render<P, S>(
element: ReactElement<P>,
container: Element,
callback?: () => any): Component<P, S>;
function unmountComponentAtNode(container: Element): boolean;
function renderToString(element: ReactElement<any>): string;
function renderToStaticMarkup(element: ReactElement<any>): string;
function isValidElement(object: {}): boolean;
function initializeTouchEvents(shouldUseTouch: boolean): void;
function findDOMNode<TElement extends Element>(
componentOrElement: Component<any, any> | Element): TElement;
function findDOMNode(
componentOrElement: Component<any, any> | Element): Element;
var DOM: ReactDOM;
var PropTypes: ReactPropTypes;
var Children: ReactChildren;
//
// Component API
// ----------------------------------------------------------------------
// Base component for plain JS classes
class Component<P, S> implements ComponentLifecycle<P, S> {
static propTypes: ValidationMap<any>;
static contextTypes: ValidationMap<any>;
static childContextTypes: ValidationMap<any>;
static defaultProps: Props<any>;
constructor(props?: P, context?: any);
setState(f: (prevState: S, props: P) => S, callback?: () => any): void;
setState(state: S, callback?: () => any): void;
forceUpdate(callBack?: () => any): void;
render(): JSX.Element;
props: P;
state: S;
context: {};
refs: {
[key: string]: Component<any, any>
};
}
interface ClassicComponent<P, S> extends Component<P, S> {
replaceState(nextState: S, callback?: () => any): void;
getDOMNode<TElement extends Element>(): TElement;
getDOMNode(): Element;
isMounted(): boolean;
getInitialState?(): S;
setProps(nextProps: P, callback?: () => any): void;
replaceProps(nextProps: P, callback?: () => any): void;
}
interface DOMComponent<P> extends ClassicComponent<P, any> {
tagName: string;
}
type HTMLComponent = DOMComponent<HTMLAttributes>;
type SVGComponent = DOMComponent<SVGAttributes>;
interface ChildContextProvider<CC> {
getChildContext(): CC;
}
//
// Class Interfaces
// ----------------------------------------------------------------------
interface ComponentClass<P> {
new(props?: P, context?: any): Component<P, any>;
propTypes?: ValidationMap<P>;
contextTypes?: ValidationMap<any>;
childContextTypes?: ValidationMap<any>;
defaultProps?: P;
}
interface ClassicComponentClass<P> extends ComponentClass<P> {
new(props?: P, context?: any): ClassicComponent<P, any>;
getDefaultProps?(): P;
displayName?: string;
}
//
// Component Specs and Lifecycle
// ----------------------------------------------------------------------
interface ComponentLifecycle<P, S> {
componentWillMount?(): void;
componentDidMount?(): void;
componentWillReceiveProps?(nextProps: P, nextContext: any): void;
shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: any): boolean;
componentWillUpdate?(nextProps: P, nextState: S, nextContext: any): void;
componentDidUpdate?(prevProps: P, prevState: S, prevContext: any): void;
componentWillUnmount?(): void;
}
interface Mixin<P, S> extends ComponentLifecycle<P, S> {
mixins?: Mixin<P, S>;
statics?: {
[key: string]: any;
};
displayName?: string;
propTypes?: ValidationMap<any>;
contextTypes?: ValidationMap<any>;
childContextTypes?: ValidationMap<any>
getDefaultProps?(): P;
getInitialState?(): S;
}
interface ComponentSpec<P, S> extends Mixin<P, S> {
render(): ReactElement<any>;
[propertyName: string]: any;
}
//
// Event System
// ----------------------------------------------------------------------
interface SyntheticEvent {
bubbles: boolean;
cancelable: boolean;
currentTarget: EventTarget;
defaultPrevented: boolean;
eventPhase: number;
isTrusted: boolean;
nativeEvent: Event;
preventDefault(): void;
stopPropagation(): void;
target: EventTarget;
timeStamp: Date;
type: string;
}
interface DragEvent extends SyntheticEvent {
dataTransfer: DataTransfer;
}
interface ClipboardEvent extends SyntheticEvent {
clipboardData: DataTransfer;
}
interface KeyboardEvent extends SyntheticEvent {
altKey: boolean;
charCode: number;
ctrlKey: boolean;
getModifierState(key: string): boolean;
key: string;
keyCode: number;
locale: string;
location: number;
metaKey: boolean;
repeat: boolean;
shiftKey: boolean;
which: number;
}
interface FocusEvent extends SyntheticEvent {
relatedTarget: EventTarget;
}
interface FormEvent extends SyntheticEvent {
}
interface MouseEvent extends SyntheticEvent {
altKey: boolean;
button: number;
buttons: number;
clientX: number;
clientY: number;
ctrlKey: boolean;
getModifierState(key: string): boolean;
metaKey: boolean;
pageX: number;
pageY: number;
relatedTarget: EventTarget;
screenX: number;
screenY: number;
shiftKey: boolean;
}
interface TouchEvent extends SyntheticEvent {
altKey: boolean;
changedTouches: TouchList;
ctrlKey: boolean;
getModifierState(key: string): boolean;
metaKey: boolean;
shiftKey: boolean;
targetTouches: TouchList;
touches: TouchList;
}
interface UIEvent extends SyntheticEvent {
detail: number;
view: AbstractView;
}
interface WheelEvent extends SyntheticEvent {
deltaMode: number;
deltaX: number;
deltaY: number;
deltaZ: number;
}
//
// Event Handler Types
// ----------------------------------------------------------------------
interface EventHandler<E extends SyntheticEvent> {
(event: E): void;
}
interface DragEventHandler extends EventHandler<DragEvent> {}
interface ClipboardEventHandler extends EventHandler<ClipboardEvent> {}
interface KeyboardEventHandler extends EventHandler<KeyboardEvent> {}
interface FocusEventHandler extends EventHandler<FocusEvent> {}
interface FormEventHandler extends EventHandler<FormEvent> {}
interface MouseEventHandler extends EventHandler<MouseEvent> {}
interface TouchEventHandler extends EventHandler<TouchEvent> {}
interface UIEventHandler extends EventHandler<UIEvent> {}
interface WheelEventHandler extends EventHandler<WheelEvent> {}
//
// Props / DOM Attributes
// ----------------------------------------------------------------------
interface Props<T> {
children?: ReactNode;
key?: string | number;
ref?: string | ((component: T) => any);
}
interface DOMAttributesBase<T> extends Props<T> {
onCopy?: ClipboardEventHandler;
onCut?: ClipboardEventHandler;
onPaste?: ClipboardEventHandler;
onKeyDown?: KeyboardEventHandler;
onKeyPress?: KeyboardEventHandler;
onKeyUp?: KeyboardEventHandler;
onFocus?: FocusEventHandler;
onBlur?: FocusEventHandler;
onChange?: FormEventHandler;
onInput?: FormEventHandler;
onSubmit?: FormEventHandler;
onClick?: MouseEventHandler;
onDoubleClick?: MouseEventHandler;
onDrag?: DragEventHandler;
onDragEnd?: DragEventHandler;
onDragEnter?: DragEventHandler;
onDragExit?: DragEventHandler;
onDragLeave?: DragEventHandler;
onDragOver?: DragEventHandler;
onDragStart?: DragEventHandler;
onDrop?: DragEventHandler;
onMouseDown?: MouseEventHandler;
onMouseEnter?: MouseEventHandler;
onMouseLeave?: MouseEventHandler;
onMouseMove?: MouseEventHandler;
onMouseOut?: MouseEventHandler;
onMouseOver?: MouseEventHandler;
onMouseUp?: MouseEventHandler;
onTouchCancel?: TouchEventHandler;
onTouchEnd?: TouchEventHandler;
onTouchMove?: TouchEventHandler;
onTouchStart?: TouchEventHandler;
onScroll?: UIEventHandler;
onWheel?: WheelEventHandler;
className?: string;
id?: string;
dangerouslySetInnerHTML?: {
__html: string;
};
}
interface DOMAttributes extends DOMAttributesBase<DOMComponent<any>> {
}
// This interface is not complete. Only properties accepting
// unitless numbers are listed here (see CSSProperty.js in React)
interface CSSProperties {
boxFlex?: number;
boxFlexGroup?: number;
columnCount?: number;
flex?: number | string;
flexGrow?: number;
flexShrink?: number;
fontWeight?: number | string;
lineClamp?: number;
lineHeight?: number | string;
opacity?: number;
order?: number;
orphans?: number;
widows?: number;
zIndex?: number;
zoom?: number;
fontSize?: number | string;
// SVG-related properties
fillOpacity?: number;
strokeOpacity?: number;
strokeWidth?: number;
[propertyName: string]: any;
}
interface HTMLAttributesBase<T> extends DOMAttributesBase<T> {
accept?: string;
acceptCharset?: string;
accessKey?: string;
action?: string;
allowFullScreen?: boolean;
allowTransparency?: boolean;
alt?: string;
async?: boolean;
autoComplete?: boolean;
autoFocus?: boolean;
autoPlay?: boolean;
cellPadding?: number | string;
cellSpacing?: number | string;
charSet?: string;
checked?: boolean;
classID?: string;
cols?: number;
colSpan?: number;
content?: string;
contentEditable?: boolean;
contextMenu?: string;
controls?: any;
coords?: string;
crossOrigin?: string;
data?: string;
dateTime?: string;
defaultChecked?: boolean;
defaultValue?: string;
defer?: boolean;
dir?: string;
disabled?: boolean;
download?: any;
draggable?: boolean;
encType?: string;
form?: string;
formAction?: string;
formEncType?: string;
formMethod?: string;
formNoValidate?: boolean;
formTarget?: string;
frameBorder?: number | string;
headers?: string;
height?: number | string;
hidden?: boolean;
high?: number;
href?: string;
hrefLang?: string;
htmlFor?: string;
httpEquiv?: string;
icon?: string;
label?: string;
lang?: string;
list?: string;
loop?: boolean;
low?: number;
manifest?: string;
marginHeight?: number;
marginWidth?: number;
max?: number | string;
maxLength?: number;
media?: string;
mediaGroup?: string;
method?: string;
min?: number | string;
multiple?: boolean;
muted?: boolean;
name?: string;
noValidate?: boolean;
open?: boolean;
optimum?: number;
pattern?: string;
placeholder?: string;
poster?: string;
preload?: string;
radioGroup?: string;
readOnly?: boolean;
rel?: string;
required?: boolean;
role?: string;
rows?: number;
rowSpan?: number;
sandbox?: string;
scope?: string;
scoped?: boolean;
scrolling?: string;
seamless?: boolean;
selected?: boolean;
shape?: string;
size?: number;
sizes?: string;
span?: number;
spellCheck?: boolean;
src?: string;
srcDoc?: string;
srcSet?: string;
start?: number;
step?: number | string;
style?: CSSProperties;
tabIndex?: number;
target?: string;
title?: string;
type?: string;
useMap?: string;
value?: string;
width?: number | string;
wmode?: string;
// Non-standard Attributes
autoCapitalize?: boolean;
autoCorrect?: boolean;
property?: string;
itemProp?: string;
itemScope?: boolean;
itemType?: string;
unselectable?: boolean;
}
interface HTMLAttributes extends HTMLAttributesBase<HTMLComponent> {
}
interface SVGElementAttributes extends HTMLAttributes {
viewBox?: string;
preserveAspectRatio?: string;
}
interface SVGAttributes extends DOMAttributes {
ref?: string | ((component: SVGComponent) => void);
cx?: number | string;
cy?: number | string;
d?: string;
dx?: number | string;
dy?: number | string;
fill?: string;
fillOpacity?: number | string;
fontFamily?: string;
fontSize?: number | string;
fx?: number | string;
fy?: number | string;
gradientTransform?: string;
gradientUnits?: string;
height?: number | string;
markerEnd?: string;
markerMid?: string;
markerStart?: string;
offset?: number | string;
opacity?: number | string;
patternContentUnits?: string;
patternUnits?: string;
points?: string;
preserveAspectRatio?: string;
r?: number | string;
rx?: number | string;
ry?: number | string;
spreadMethod?: string;
stopColor?: string;
stopOpacity?: number | string;
stroke?: string;
strokeDasharray?: string;
strokeLinecap?: string;
strokeMiterlimit?: string;
strokeOpacity?: number | string;
strokeWidth?: number | string;
textAnchor?: string;
transform?: string;
version?: string;
viewBox?: string;
width?: number | string;
x1?: number | string;
x2?: number | string;
x?: number | string;
y1?: number | string;
y2?: number | string
y?: number | string;
}
//
// React.DOM
// ----------------------------------------------------------------------
interface ReactDOM {
// HTML
a: HTMLFactory;
abbr: HTMLFactory;
address: HTMLFactory;
area: HTMLFactory;
article: HTMLFactory;
aside: HTMLFactory;
audio: HTMLFactory;
b: HTMLFactory;
base: HTMLFactory;
bdi: HTMLFactory;
bdo: HTMLFactory;
big: HTMLFactory;
blockquote: HTMLFactory;
body: HTMLFactory;
br: HTMLFactory;
button: HTMLFactory;
canvas: HTMLFactory;
caption: HTMLFactory;
cite: HTMLFactory;
code: HTMLFactory;
col: HTMLFactory;
colgroup: HTMLFactory;
data: HTMLFactory;
datalist: HTMLFactory;
dd: HTMLFactory;
del: HTMLFactory;
details: HTMLFactory;
dfn: HTMLFactory;
dialog: HTMLFactory;
div: HTMLFactory;
dl: HTMLFactory;
dt: HTMLFactory;
em: HTMLFactory;
embed: HTMLFactory;
fieldset: HTMLFactory;
figcaption: HTMLFactory;
figure: HTMLFactory;
footer: HTMLFactory;
form: HTMLFactory;
h1: HTMLFactory;
h2: HTMLFactory;
h3: HTMLFactory;
h4: HTMLFactory;
h5: HTMLFactory;
h6: HTMLFactory;
head: HTMLFactory;
header: HTMLFactory;
hr: HTMLFactory;
html: HTMLFactory;
i: HTMLFactory;
iframe: HTMLFactory;
img: HTMLFactory;
input: HTMLFactory;
ins: HTMLFactory;
kbd: HTMLFactory;
keygen: HTMLFactory;
label: HTMLFactory;
legend: HTMLFactory;
li: HTMLFactory;
link: HTMLFactory;
main: HTMLFactory;
map: HTMLFactory;
mark: HTMLFactory;
menu: HTMLFactory;
menuitem: HTMLFactory;
meta: HTMLFactory;
meter: HTMLFactory;
nav: HTMLFactory;
noscript: HTMLFactory;
object: HTMLFactory;
ol: HTMLFactory;
optgroup: HTMLFactory;
option: HTMLFactory;
output: HTMLFactory;
p: HTMLFactory;
param: HTMLFactory;
picture: HTMLFactory;
pre: HTMLFactory;
progress: HTMLFactory;
q: HTMLFactory;
rp: HTMLFactory;
rt: HTMLFactory;
ruby: HTMLFactory;
s: HTMLFactory;
samp: HTMLFactory;
script: HTMLFactory;
section: HTMLFactory;
select: HTMLFactory;
small: HTMLFactory;
source: HTMLFactory;
span: HTMLFactory;
strong: HTMLFactory;
style: HTMLFactory;
sub: HTMLFactory;
summary: HTMLFactory;
sup: HTMLFactory;
table: HTMLFactory;
tbody: HTMLFactory;
td: HTMLFactory;
textarea: HTMLFactory;
tfoot: HTMLFactory;
th: HTMLFactory;
thead: HTMLFactory;
time: HTMLFactory;
title: HTMLFactory;
tr: HTMLFactory;
track: HTMLFactory;
u: HTMLFactory;
ul: HTMLFactory;
"var": HTMLFactory;
video: HTMLFactory;
wbr: HTMLFactory;
// SVG
svg: SVGElementFactory;
circle: SVGFactory;
defs: SVGFactory;
ellipse: SVGFactory;
g: SVGFactory;
line: SVGFactory;
linearGradient: SVGFactory;
mask: SVGFactory;
path: SVGFactory;
pattern: SVGFactory;
polygon: SVGFactory;
polyline: SVGFactory;
radialGradient: SVGFactory;
rect: SVGFactory;
stop: SVGFactory;
text: SVGFactory;
tspan: SVGFactory;
}
//
// React.PropTypes
// ----------------------------------------------------------------------
interface Validator<T> {
(object: T, key: string, componentName: string): Error;
}
interface Requireable<T> extends Validator<T> {
isRequired: Validator<T>;
}
interface ValidationMap<T> {
[key: string]: Validator<T>;
}
interface ReactPropTypes {
any: Requireable<any>;
array: Requireable<any>;
bool: Requireable<any>;
func: Requireable<any>;
number: Requireable<any>;
object: Requireable<any>;
string: Requireable<any>;
node: Requireable<any>;
element: Requireable<any>;
instanceOf(expectedClass: {}): Requireable<any>;
oneOf(types: any[]): Requireable<any>;
oneOfType(types: Validator<any>[]): Requireable<any>;
arrayOf(type: Validator<any>): Requireable<any>;
objectOf(type: Validator<any>): Requireable<any>;
shape(type: ValidationMap<any>): Requireable<any>;
}
//
// React.Children
// ----------------------------------------------------------------------
interface ReactChildren {
map<T>(children: ReactNode, fn: (child: ReactChild, index: number) => T): { [key:string]: T };
forEach(children: ReactNode, fn: (child: ReactChild, index: number) => any): void;
count(children: ReactNode): number;
only(children: ReactNode): ReactChild;
}
//
// Browser Interfaces
// https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts
// ----------------------------------------------------------------------
interface AbstractView {
styleMedia: StyleMedia;
document: Document;
}
interface Touch {
identifier: number;
target: EventTarget;
screenX: number;
screenY: number;
clientX: number;
clientY: number;
pageX: number;
pageY: number;
}
interface TouchList {
[index: number]: Touch;
length: number;
item(index: number): Touch;
identifiedTouch(identifier: number): Touch;
}
}
declare module "react" {
export = __React;
}
declare module "react/addons" {
//
// React Elements
// ----------------------------------------------------------------------
type ReactType = ComponentClass<any> | string;
interface ReactElement<P> {
type: string | ComponentClass<P>;
props: P;
key: string | number;
ref: string | ((component: Component<P, any>) => any);
}
interface ClassicElement<P> extends ReactElement<P> {
type: string | ClassicComponentClass<P>;
ref: string | ((component: ClassicComponent<P, any>) => any);
}
interface DOMElement<P> extends ClassicElement<P> {
type: string;
ref: string | ((component: DOMComponent<P>) => any);
}
type HTMLElement = DOMElement<HTMLAttributes>;
type SVGElement = DOMElement<SVGAttributes>;
//
// Factories
// ----------------------------------------------------------------------
interface Factory<P> {
(props?: P, ...children: ReactNode[]): ReactElement<P>;
}
interface ClassicFactory<P> extends Factory<P> {
(props?: P, ...children: ReactNode[]): ClassicElement<P>;
}
interface DOMFactory<P> extends ClassicFactory<P> {
(props?: P, ...children: ReactNode[]): DOMElement<P>;
}
type HTMLFactory = DOMFactory<HTMLAttributes>;
type SVGFactory = DOMFactory<SVGAttributes>;
type SVGElementFactory = DOMFactory<SVGElementAttributes>;
//
// React Nodes
// http://facebook.github.io/react/docs/glossary.html
// ----------------------------------------------------------------------
type ReactText = string | number;
type ReactChild = ReactElement<any> | ReactText;
// Should be Array<ReactNode> but type aliases cannot be recursive
type ReactFragment = {} | Array<ReactChild | any[] | boolean>;
type ReactNode = ReactChild | ReactFragment | boolean;
//
// Top Level API
// ----------------------------------------------------------------------
function createClass<P, S>(spec: ComponentSpec<P, S>): ClassicComponentClass<P>;
function createFactory<P>(type: string): DOMFactory<P>;
function createFactory<P>(type: ClassicComponentClass<P> | string): ClassicFactory<P>;
function createFactory<P>(type: ComponentClass<P>): Factory<P>;
function createElement<P>(
type: string,
props?: P,
...children: ReactNode[]): DOMElement<P>;
function createElement<P>(
type: ClassicComponentClass<P> | string,
props?: P,
...children: ReactNode[]): ClassicElement<P>;
function createElement<P>(
type: ComponentClass<P>,
props?: P,
...children: ReactNode[]): ReactElement<P>;
function cloneElement<P>(
element: DOMElement<P>,
props?: P,
...children: ReactNode[]): DOMElement<P>;
function cloneElement<P>(
element: ClassicElement<P>,
props?: P,
...children: ReactNode[]): ClassicElement<P>;
function cloneElement<P>(
element: ReactElement<P>,
props?: P,
...children: ReactNode[]): ReactElement<P>;
function render<P>(
element: DOMElement<P>,
container: Element,
callback?: () => any): DOMComponent<P>;
function render<P, S>(
element: ClassicElement<P>,
container: Element,
callback?: () => any): ClassicComponent<P, S>;
function render<P, S>(
element: ReactElement<P>,
container: Element,
callback?: () => any): Component<P, S>;
function unmountComponentAtNode(container: Element): boolean;
function renderToString(element: ReactElement<any>): string;
function renderToStaticMarkup(element: ReactElement<any>): string;
function isValidElement(object: {}): boolean;
function initializeTouchEvents(shouldUseTouch: boolean): void;
function findDOMNode<TElement extends Element>(
componentOrElement: Component<any, any> | Element): TElement;
function findDOMNode(
componentOrElement: Component<any, any> | Element): Element;
var DOM: ReactDOM;
var PropTypes: ReactPropTypes;
var Children: ReactChildren;
//
// Component API
// ----------------------------------------------------------------------
// Base component for plain JS classes
class Component<P, S> implements ComponentLifecycle<P, S> {
static propTypes: ValidationMap<any>;
static contextTypes: ValidationMap<any>;
static childContextTypes: ValidationMap<any>;
static defaultProps: Props<any>;
constructor(props?: P, context?: any);
setState(f: (prevState: S, props: P) => S, callback?: () => any): void;
setState(state: S, callback?: () => any): void;
forceUpdate(callBack?: () => any): void;
render(): JSX.Element;
props: P;
state: S;
context: {};
refs: {
[key: string]: Component<any, any>
};
}
interface ClassicComponent<P, S> extends Component<P, S> {
replaceState(nextState: S, callback?: () => any): void;
getDOMNode<TElement extends Element>(): TElement;
getDOMNode(): Element;
isMounted(): boolean;
getInitialState?(): S;
setProps(nextProps: P, callback?: () => any): void;
replaceProps(nextProps: P, callback?: () => any): void;
}
interface DOMComponent<P> extends ClassicComponent<P, any> {
tagName: string;
}
type HTMLComponent = DOMComponent<HTMLAttributes>;
type SVGComponent = DOMComponent<SVGAttributes>;
interface ChildContextProvider<CC> {
getChildContext(): CC;
}
//
// Class Interfaces
// ----------------------------------------------------------------------
interface ComponentClass<P> {
new(props?: P, context?: any): Component<P, any>;
propTypes?: ValidationMap<P>;
contextTypes?: ValidationMap<any>;
childContextTypes?: ValidationMap<any>;
defaultProps?: P;
}
interface ClassicComponentClass<P> extends ComponentClass<P> {
new(props?: P, context?: any): ClassicComponent<P, any>;
getDefaultProps?(): P;
displayName?: string;
}
//
// Component Specs and Lifecycle
// ----------------------------------------------------------------------
interface ComponentLifecycle<P, S> {
componentWillMount?(): void;
componentDidMount?(): void;
componentWillReceiveProps?(nextProps: P, nextContext: any): void;
shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: any): boolean;
componentWillUpdate?(nextProps: P, nextState: S, nextContext: any): void;
componentDidUpdate?(prevProps: P, prevState: S, prevContext: any): void;
componentWillUnmount?(): void;
}
interface Mixin<P, S> extends ComponentLifecycle<P, S> {
mixins?: Mixin<P, S>;
statics?: {
[key: string]: any;
};
displayName?: string;
propTypes?: ValidationMap<any>;
contextTypes?: ValidationMap<any>;
childContextTypes?: ValidationMap<any>
getDefaultProps?(): P;
getInitialState?(): S;
}
interface ComponentSpec<P, S> extends Mixin<P, S> {
render(): ReactElement<any>;
[propertyName: string]: any;
}
//
// Event System
// ----------------------------------------------------------------------
interface SyntheticEvent {
bubbles: boolean;
cancelable: boolean;
currentTarget: EventTarget;
defaultPrevented: boolean;
eventPhase: number;
isTrusted: boolean;
nativeEvent: Event;
preventDefault(): void;
stopPropagation(): void;
target: EventTarget;
timeStamp: Date;
type: string;
}
interface DragEvent extends SyntheticEvent {
dataTransfer: DataTransfer;
}
interface ClipboardEvent extends SyntheticEvent {
clipboardData: DataTransfer;
}
interface KeyboardEvent extends SyntheticEvent {
altKey: boolean;
charCode: number;
ctrlKey: boolean;
getModifierState(key: string): boolean;
key: string;
keyCode: number;
locale: string;
location: number;
metaKey: boolean;
repeat: boolean;
shiftKey: boolean;
which: number;
}
interface FocusEvent extends SyntheticEvent {
relatedTarget: EventTarget;
}
interface FormEvent extends SyntheticEvent {
}
interface MouseEvent extends SyntheticEvent {
altKey: boolean;
button: number;
buttons: number;
clientX: number;
clientY: number;
ctrlKey: boolean;
getModifierState(key: string): boolean;
metaKey: boolean;
pageX: number;
pageY: number;
relatedTarget: EventTarget;
screenX: number;
screenY: number;
shiftKey: boolean;
}
interface TouchEvent extends SyntheticEvent {
altKey: boolean;
changedTouches: TouchList;
ctrlKey: boolean;
getModifierState(key: string): boolean;
metaKey: boolean;
shiftKey: boolean;
targetTouches: TouchList;
touches: TouchList;
}
interface UIEvent extends SyntheticEvent {
detail: number;
view: AbstractView;
}
interface WheelEvent extends SyntheticEvent {
deltaMode: number;
deltaX: number;
deltaY: number;
deltaZ: number;
}
//
// Event Handler Types
// ----------------------------------------------------------------------
interface EventHandler<E extends SyntheticEvent> {
(event: E): void;
}
interface DragEventHandler extends EventHandler<DragEvent> {}
interface ClipboardEventHandler extends EventHandler<ClipboardEvent> {}
interface KeyboardEventHandler extends EventHandler<KeyboardEvent> {}
interface FocusEventHandler extends EventHandler<FocusEvent> {}
interface FormEventHandler extends EventHandler<FormEvent> {}
interface MouseEventHandler extends EventHandler<MouseEvent> {}
interface TouchEventHandler extends EventHandler<TouchEvent> {}
interface UIEventHandler extends EventHandler<UIEvent> {}
interface WheelEventHandler extends EventHandler<WheelEvent> {}
//
// Props / DOM Attributes
// ----------------------------------------------------------------------
interface Props<T> {
children?: ReactNode;
key?: string | number;
ref?: string | ((component: T) => any);
}
interface DOMAttributesBase<T> extends Props<T> {
onCopy?: ClipboardEventHandler;
onCut?: ClipboardEventHandler;
onPaste?: ClipboardEventHandler;
onKeyDown?: KeyboardEventHandler;
onKeyPress?: KeyboardEventHandler;
onKeyUp?: KeyboardEventHandler;
onFocus?: FocusEventHandler;
onBlur?: FocusEventHandler;
onChange?: FormEventHandler;
onInput?: FormEventHandler;
onSubmit?: FormEventHandler;
onClick?: MouseEventHandler;
onDoubleClick?: MouseEventHandler;
onDrag?: DragEventHandler;
onDragEnd?: DragEventHandler;
onDragEnter?: DragEventHandler;
onDragExit?: DragEventHandler;
onDragLeave?: DragEventHandler;
onDragOver?: DragEventHandler;
onDragStart?: DragEventHandler;
onDrop?: DragEventHandler;
onMouseDown?: MouseEventHandler;
onMouseEnter?: MouseEventHandler;
onMouseLeave?: MouseEventHandler;
onMouseMove?: MouseEventHandler;
onMouseOut?: MouseEventHandler;
onMouseOver?: MouseEventHandler;
onMouseUp?: MouseEventHandler;
onTouchCancel?: TouchEventHandler;
onTouchEnd?: TouchEventHandler;
onTouchMove?: TouchEventHandler;
onTouchStart?: TouchEventHandler;
onScroll?: UIEventHandler;
onWheel?: WheelEventHandler;
className?: string;
id?: string;
dangerouslySetInnerHTML?: {
__html: string;
};
}
interface DOMAttributes extends DOMAttributesBase<DOMComponent<any>> {
}
// This interface is not complete. Only properties accepting
// unitless numbers are listed here (see CSSProperty.js in React)
interface CSSProperties {
boxFlex?: number;
boxFlexGroup?: number;
columnCount?: number;
flex?: number | string;
flexGrow?: number;
flexShrink?: number;
fontWeight?: number | string;
lineClamp?: number;
lineHeight?: number | string;
opacity?: number;
order?: number;
orphans?: number;
widows?: number;
zIndex?: number;
zoom?: number;
fontSize?: number | string;
// SVG-related properties
fillOpacity?: number;
strokeOpacity?: number;
strokeWidth?: number;
[propertyName: string]: any;
}
interface HTMLAttributesBase<T> extends DOMAttributesBase<T> {
accept?: string;
acceptCharset?: string;
accessKey?: string;
action?: string;
allowFullScreen?: boolean;
allowTransparency?: boolean;
alt?: string;
async?: boolean;
autoComplete?: boolean;
autoFocus?: boolean;
autoPlay?: boolean;
cellPadding?: number | string;
cellSpacing?: number | string;
charSet?: string;
checked?: boolean;
classID?: string;
cols?: number;
colSpan?: number;
content?: string;
contentEditable?: boolean;
contextMenu?: string;
controls?: any;
coords?: string;
crossOrigin?: string;
data?: string;
dateTime?: string;
defaultChecked?: boolean;
defaultValue?: string;
defer?: boolean;
dir?: string;
disabled?: boolean;
download?: any;
draggable?: boolean;
encType?: string;
form?: string;
formAction?: string;
formEncType?: string;
formMethod?: string;
formNoValidate?: boolean;
formTarget?: string;
frameBorder?: number | string;
headers?: string;
height?: number | string;
hidden?: boolean;
high?: number;
href?: string;
hrefLang?: string;
htmlFor?: string;
httpEquiv?: string;
icon?: string;
label?: string;
lang?: string;
list?: string;
loop?: boolean;
low?: number;
manifest?: string;
marginHeight?: number;
marginWidth?: number;
max?: number | string;
maxLength?: number;
media?: string;
mediaGroup?: string;
method?: string;
min?: number | string;
multiple?: boolean;
muted?: boolean;
name?: string;
noValidate?: boolean;
open?: boolean;
optimum?: number;
pattern?: string;
placeholder?: string;
poster?: string;
preload?: string;
radioGroup?: string;
readOnly?: boolean;
rel?: string;
required?: boolean;
role?: string;
rows?: number;
rowSpan?: number;
sandbox?: string;
scope?: string;
scoped?: boolean;
scrolling?: string;
seamless?: boolean;
selected?: boolean;
shape?: string;
size?: number;
sizes?: string;
span?: number;
spellCheck?: boolean;
src?: string;
srcDoc?: string;
srcSet?: string;
start?: number;
step?: number | string;
style?: CSSProperties;
tabIndex?: number;
target?: string;
title?: string;
type?: string;
useMap?: string;
value?: string;
width?: number | string;
wmode?: string;
// Non-standard Attributes
autoCapitalize?: boolean;
autoCorrect?: boolean;
property?: string;
itemProp?: string;
itemScope?: boolean;
itemType?: string;
unselectable?: boolean;
}
interface HTMLAttributes extends HTMLAttributesBase<HTMLComponent> {
}
interface SVGElementAttributes extends HTMLAttributes {
viewBox?: string;
preserveAspectRatio?: string;
}
interface SVGAttributes extends DOMAttributes {
ref?: string | ((component: SVGComponent) => void);
cx?: number | string;
cy?: number | string;
d?: string;
dx?: number | string;
dy?: number | string;
fill?: string;
fillOpacity?: number | string;
fontFamily?: string;
fontSize?: number | string;
fx?: number | string;
fy?: number | string;
gradientTransform?: string;
gradientUnits?: string;
height?: number | string;
markerEnd?: string;
markerMid?: string;
markerStart?: string;
offset?: number | string;
opacity?: number | string;
patternContentUnits?: string;
patternUnits?: string;
points?: string;
preserveAspectRatio?: string;
r?: number | string;
rx?: number | string;
ry?: number | string;
spreadMethod?: string;
stopColor?: string;
stopOpacity?: number | string;
stroke?: string;
strokeDasharray?: string;
strokeLinecap?: string;
strokeMiterlimit?: string;
strokeOpacity?: number | string;
strokeWidth?: number | string;
textAnchor?: string;
transform?: string;
version?: string;
viewBox?: string;
width?: number | string;
x1?: number | string;
x2?: number | string;
x?: number | string;
y1?: number | string;
y2?: number | string
y?: number | string;
}
//
// React.DOM
// ----------------------------------------------------------------------
interface ReactDOM {
// HTML
a: HTMLFactory;
abbr: HTMLFactory;
address: HTMLFactory;
area: HTMLFactory;
article: HTMLFactory;
aside: HTMLFactory;
audio: HTMLFactory;
b: HTMLFactory;
base: HTMLFactory;
bdi: HTMLFactory;
bdo: HTMLFactory;
big: HTMLFactory;
blockquote: HTMLFactory;
body: HTMLFactory;
br: HTMLFactory;
button: HTMLFactory;
canvas: HTMLFactory;
caption: HTMLFactory;
cite: HTMLFactory;
code: HTMLFactory;
col: HTMLFactory;
colgroup: HTMLFactory;
data: HTMLFactory;
datalist: HTMLFactory;
dd: HTMLFactory;
del: HTMLFactory;
details: HTMLFactory;
dfn: HTMLFactory;
dialog: HTMLFactory;
div: HTMLFactory;
dl: HTMLFactory;
dt: HTMLFactory;
em: HTMLFactory;
embed: HTMLFactory;
fieldset: HTMLFactory;
figcaption: HTMLFactory;
figure: HTMLFactory;
footer: HTMLFactory;
form: HTMLFactory;
h1: HTMLFactory;
h2: HTMLFactory;
h3: HTMLFactory;
h4: HTMLFactory;
h5: HTMLFactory;
h6: HTMLFactory;
head: HTMLFactory;
header: HTMLFactory;
hr: HTMLFactory;
html: HTMLFactory;
i: HTMLFactory;
iframe: HTMLFactory;
img: HTMLFactory;
input: HTMLFactory;
ins: HTMLFactory;
kbd: HTMLFactory;
keygen: HTMLFactory;
label: HTMLFactory;
legend: HTMLFactory;
li: HTMLFactory;
link: HTMLFactory;
main: HTMLFactory;
map: HTMLFactory;
mark: HTMLFactory;
menu: HTMLFactory;
menuitem: HTMLFactory;
meta: HTMLFactory;
meter: HTMLFactory;
nav: HTMLFactory;
noscript: HTMLFactory;
object: HTMLFactory;
ol: HTMLFactory;
optgroup: HTMLFactory;
option: HTMLFactory;
output: HTMLFactory;
p: HTMLFactory;
param: HTMLFactory;
picture: HTMLFactory;
pre: HTMLFactory;
progress: HTMLFactory;
q: HTMLFactory;
rp: HTMLFactory;
rt: HTMLFactory;
ruby: HTMLFactory;
s: HTMLFactory;
samp: HTMLFactory;
script: HTMLFactory;
section: HTMLFactory;
select: HTMLFactory;
small: HTMLFactory;
source: HTMLFactory;
span: HTMLFactory;
strong: HTMLFactory;
style: HTMLFactory;
sub: HTMLFactory;
summary: HTMLFactory;
sup: HTMLFactory;
table: HTMLFactory;
tbody: HTMLFactory;
td: HTMLFactory;
textarea: HTMLFactory;
tfoot: HTMLFactory;
th: HTMLFactory;
thead: HTMLFactory;
time: HTMLFactory;
title: HTMLFactory;
tr: HTMLFactory;
track: HTMLFactory;
u: HTMLFactory;
ul: HTMLFactory;
"var": HTMLFactory;
video: HTMLFactory;
wbr: HTMLFactory;
// SVG
svg: SVGElementFactory;
circle: SVGFactory;
defs: SVGFactory;
ellipse: SVGFactory;
g: SVGFactory;
line: SVGFactory;
linearGradient: SVGFactory;
mask: SVGFactory;
path: SVGFactory;
pattern: SVGFactory;
polygon: SVGFactory;
polyline: SVGFactory;
radialGradient: SVGFactory;
rect: SVGFactory;
stop: SVGFactory;
text: SVGFactory;
tspan: SVGFactory;
}
//
// React.PropTypes
// ----------------------------------------------------------------------
interface Validator<T> {
(object: T, key: string, componentName: string): Error;
}
interface Requireable<T> extends Validator<T> {
isRequired: Validator<T>;
}
interface ValidationMap<T> {
[key: string]: Validator<T>;
}
interface ReactPropTypes {
any: Requireable<any>;
array: Requireable<any>;
bool: Requireable<any>;
func: Requireable<any>;
number: Requireable<any>;
object: Requireable<any>;
string: Requireable<any>;
node: Requireable<any>;
element: Requireable<any>;
instanceOf(expectedClass: {}): Requireable<any>;
oneOf(types: any[]): Requireable<any>;
oneOfType(types: Validator<any>[]): Requireable<any>;
arrayOf(type: Validator<any>): Requireable<any>;
objectOf(type: Validator<any>): Requireable<any>;
shape(type: ValidationMap<any>): Requireable<any>;
}
//
// React.Children
// ----------------------------------------------------------------------
interface ReactChildren {
map<T>(children: ReactNode, fn: (child: ReactChild, index: number) => T): { [key:string]: T };
forEach(children: ReactNode, fn: (child: ReactChild, index: number) => any): void;
count(children: ReactNode): number;
only(children: ReactNode): ReactChild;
}
//
// Browser Interfaces
// https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts
// ----------------------------------------------------------------------
interface AbstractView {
styleMedia: StyleMedia;
document: Document;
}
interface Touch {
identifier: number;
target: EventTarget;
screenX: number;
screenY: number;
clientX: number;
clientY: number;
pageX: number;
pageY: number;
}
interface TouchList {
[index: number]: Touch;
length: number;
item(index: number): Touch;
identifiedTouch(identifier: number): Touch;
}
//
// React.addons
// ----------------------------------------------------------------------
export module addons {
export var CSSTransitionGroup: CSSTransitionGroup;
export var TransitionGroup: TransitionGroup;
export var LinkedStateMixin: LinkedStateMixin;
export var PureRenderMixin: PureRenderMixin;
export function batchedUpdates<A, B>(
callback: (a: A, b: B) => any, a: A, b: B): void;
export function batchedUpdates<A>(callback: (a: A) => any, a: A): void;
export function batchedUpdates(callback: () => any): void;
// deprecated: use petehunt/react-classset or JedWatson/classnames
export function classSet(cx: { [key: string]: boolean }): string;
export function classSet(...classList: string[]): string;
export function cloneWithProps<P>(
element: DOMElement<P>, props: P): DOMElement<P>;
export function cloneWithProps<P>(
element: ClassicElement<P>, props: P): ClassicElement<P>;
export function cloneWithProps<P>(
element: ReactElement<P>, props: P): ReactElement<P>;
export function createFragment(
object: { [key: string]: ReactNode }): ReactFragment;
export function update(value: any[], spec: UpdateArraySpec): any[];
export function update(value: {}, spec: UpdateSpec): any;
// Development tools
export import Perf = ReactPerf;
export import TestUtils = ReactTestUtils;
}
//
// React.addons (Transitions)
// ----------------------------------------------------------------------
interface TransitionGroupProps {
component?: ReactType;
childFactory?: (child: ReactElement<any>) => ReactElement<any>;
}
interface CSSTransitionGroupProps extends TransitionGroupProps {
transitionName: string;
transitionAppear?: boolean;
transitionEnter?: boolean;
transitionLeave?: boolean;
}
type CSSTransitionGroup = ComponentClass<CSSTransitionGroupProps>;
type TransitionGroup = ComponentClass<TransitionGroupProps>;
//
// React.addons (Mixins)
// ----------------------------------------------------------------------
interface ReactLink<T> {
value: T;
requestChange(newValue: T): void;
}
interface LinkedStateMixin extends Mixin<any, any> {
linkState<T>(key: string): ReactLink<T>;
}
interface PureRenderMixin extends Mixin<any, any> {
}
//
// Reat.addons.update
// ----------------------------------------------------------------------
interface UpdateSpecCommand {
$set?: any;
$merge?: {};
$apply?(value: any): any;
}
interface UpdateSpecPath {
[key: string]: UpdateSpec;
}
type UpdateSpec = UpdateSpecCommand | UpdateSpecPath;
interface UpdateArraySpec extends UpdateSpecCommand {
$push?: any[];
$unshift?: any[];
$splice?: any[][];
}
//
// React.addons.Perf
// ----------------------------------------------------------------------
interface ComponentPerfContext {
current: string;
owner: string;
}
interface NumericPerfContext {
[key: string]: number;
}
interface Measurements {
exclusive: NumericPerfContext;
inclusive: NumericPerfContext;
render: NumericPerfContext;
counts: NumericPerfContext;
writes: NumericPerfContext;
displayNames: {
[key: string]: ComponentPerfContext;
};
totalTime: number;
}
module ReactPerf {
export function start(): void;
export function stop(): void;
export function printInclusive(measurements: Measurements[]): void;
export function printExclusive(measurements: Measurements[]): void;
export function printWasted(measurements: Measurements[]): void;
export function printDOM(measurements: Measurements[]): void;
export function getLastMeasurements(): Measurements[];
}
//
// React.addons.TestUtils
// ----------------------------------------------------------------------
interface MockedComponentClass {
new(): any;
}
module ReactTestUtils {
export import Simulate = ReactSimulate;
export function renderIntoDocument<P>(
element: ReactElement<P>): Component<P, any>;
export function renderIntoDocument<C extends Component<any, any>>(
element: ReactElement<any>): C;
export function mockComponent(
mocked: MockedComponentClass, mockTagName?: string): typeof ReactTestUtils;
export function isElementOfType(
element: ReactElement<any>, type: ReactType): boolean;
export function isTextComponent(instance: Component<any, any>): boolean;
export function isDOMComponent(instance: Component<any, any>): boolean;
export function isCompositeComponent(instance: Component<any, any>): boolean;
export function isCompositeComponentWithType(
instance: Component<any, any>,
type: ComponentClass<any>): boolean;
export function findAllInRenderedTree(
tree: Component<any, any>,
fn: (i: Component<any, any>) => boolean): Component<any, any>;
export function scryRenderedDOMComponentsWithClass(
tree: Component<any, any>,
className: string): DOMComponent<any>[];
export function findRenderedDOMComponentWithClass(
tree: Component<any, any>,
className: string): DOMComponent<any>;
export function scryRenderedDOMComponentsWithTag(
tree: Component<any, any>,
tagName: string): DOMComponent<any>[];
export function findRenderedDOMComponentWithTag(
tree: Component<any, any>,
tagName: string): DOMComponent<any>;
export function scryRenderedComponentsWithType<P>(
tree: Component<any, any>,
type: ComponentClass<P>): Component<P, {}>[];
export function scryRenderedComponentsWithType<C extends Component<any, any>>(
tree: Component<any, any>,
type: ComponentClass<any>): C[];
export function findRenderedComponentWithType<P>(
tree: Component<any, any>,
type: ComponentClass<P>): Component<P, {}>;
export function findRenderedComponentWithType<C extends Component<any, any>>(
tree: Component<any, any>,
type: ComponentClass<any>): C;
export function createRenderer(): ShallowRenderer;
}
interface SyntheticEventData {
altKey?: boolean;
button?: number;
buttons?: number;
clientX?: number;
clientY?: number;
changedTouches?: TouchList;
charCode?: boolean;
clipboardData?: DataTransfer;
ctrlKey?: boolean;
deltaMode?: number;
deltaX?: number;
deltaY?: number;
deltaZ?: number;
detail?: number;
getModifierState?(key: string): boolean;
key?: string;
keyCode?: number;
locale?: string;
location?: number;
metaKey?: boolean;
pageX?: number;
pageY?: number;
relatedTarget?: EventTarget;
repeat?: boolean;
screenX?: number;
screenY?: number;
shiftKey?: boolean;
targetTouches?: TouchList;
touches?: TouchList;
view?: AbstractView;
which?: number;
}
interface EventSimulator {
(element: Element, eventData?: SyntheticEventData): void;
(component: Component<any, any>, eventData?: SyntheticEventData): void;
}
module ReactSimulate {
export var blur: EventSimulator;
export var change: EventSimulator;
export var click: EventSimulator;
export var cut: EventSimulator;
export var doubleClick: EventSimulator;
export var drag: EventSimulator;
export var dragEnd: EventSimulator;
export var dragEnter: EventSimulator;
export var dragExit: EventSimulator;
export var dragLeave: EventSimulator;
export var dragOver: EventSimulator;
export var dragStart: EventSimulator;
export var drop: EventSimulator;
export var focus: EventSimulator;
export var input: EventSimulator;
export var keyDown: EventSimulator;
export var keyPress: EventSimulator;
export var keyUp: EventSimulator;
export var mouseDown: EventSimulator;
export var mouseEnter: EventSimulator;
export var mouseLeave: EventSimulator;
export var mouseMove: EventSimulator;
export var mouseOut: EventSimulator;
export var mouseOver: EventSimulator;
export var mouseUp: EventSimulator;
export var paste: EventSimulator;
export var scroll: EventSimulator;
export var submit: EventSimulator;
export var touchCancel: EventSimulator;
export var touchEnd: EventSimulator;
export var touchMove: EventSimulator;
export var touchStart: EventSimulator;
export var wheel: EventSimulator;
}
class ShallowRenderer {
getRenderOutput<E extends ReactElement<any>>(): E;
getRenderOutput(): ReactElement<any>;
render(element: ReactElement<any>, context?: any): void;
unmount(): void;
}
}
declare namespace JSX {
import React = __React;
interface Element extends React.ReactElement<any> { }
interface ElementClass extends React.Component<any, any> {
render(): JSX.Element;
}
interface ElementAttributesProperty { props: {}; }
interface IntrinsicElements {
// HTML
a: React.HTMLAttributes;
abbr: React.HTMLAttributes;
address: React.HTMLAttributes;
area: React.HTMLAttributes;
article: React.HTMLAttributes;
aside: React.HTMLAttributes;
audio: React.HTMLAttributes;
b: React.HTMLAttributes;
base: React.HTMLAttributes;
bdi: React.HTMLAttributes;
bdo: React.HTMLAttributes;
big: React.HTMLAttributes;
blockquote: React.HTMLAttributes;
body: React.HTMLAttributes;
br: React.HTMLAttributes;
button: React.HTMLAttributes;
canvas: React.HTMLAttributes;
caption: React.HTMLAttributes;
cite: React.HTMLAttributes;
code: React.HTMLAttributes;
col: React.HTMLAttributes;
colgroup: React.HTMLAttributes;
data: React.HTMLAttributes;
datalist: React.HTMLAttributes;
dd: React.HTMLAttributes;
del: React.HTMLAttributes;
details: React.HTMLAttributes;
dfn: React.HTMLAttributes;
dialog: React.HTMLAttributes;
div: React.HTMLAttributes;
dl: React.HTMLAttributes;
dt: React.HTMLAttributes;
em: React.HTMLAttributes;
embed: React.HTMLAttributes;
fieldset: React.HTMLAttributes;
figcaption: React.HTMLAttributes;
figure: React.HTMLAttributes;
footer: React.HTMLAttributes;
form: React.HTMLAttributes;
h1: React.HTMLAttributes;
h2: React.HTMLAttributes;
h3: React.HTMLAttributes;
h4: React.HTMLAttributes;
h5: React.HTMLAttributes;
h6: React.HTMLAttributes;
head: React.HTMLAttributes;
header: React.HTMLAttributes;
hr: React.HTMLAttributes;
html: React.HTMLAttributes;
i: React.HTMLAttributes;
iframe: React.HTMLAttributes;
img: React.HTMLAttributes;
input: React.HTMLAttributes;
ins: React.HTMLAttributes;
kbd: React.HTMLAttributes;
keygen: React.HTMLAttributes;
label: React.HTMLAttributes;
legend: React.HTMLAttributes;
li: React.HTMLAttributes;
link: React.HTMLAttributes;
main: React.HTMLAttributes;
map: React.HTMLAttributes;
mark: React.HTMLAttributes;
menu: React.HTMLAttributes;
menuitem: React.HTMLAttributes;
meta: React.HTMLAttributes;
meter: React.HTMLAttributes;
nav: React.HTMLAttributes;
noscript: React.HTMLAttributes;
object: React.HTMLAttributes;
ol: React.HTMLAttributes;
optgroup: React.HTMLAttributes;
option: React.HTMLAttributes;
output: React.HTMLAttributes;
p: React.HTMLAttributes;
param: React.HTMLAttributes;
picture: React.HTMLAttributes;
pre: React.HTMLAttributes;
progress: React.HTMLAttributes;
q: React.HTMLAttributes;
rp: React.HTMLAttributes;
rt: React.HTMLAttributes;
ruby: React.HTMLAttributes;
s: React.HTMLAttributes;
samp: React.HTMLAttributes;
script: React.HTMLAttributes;
section: React.HTMLAttributes;
select: React.HTMLAttributes;
small: React.HTMLAttributes;
source: React.HTMLAttributes;
span: React.HTMLAttributes;
strong: React.HTMLAttributes;
style: React.HTMLAttributes;
sub: React.HTMLAttributes;
summary: React.HTMLAttributes;
sup: React.HTMLAttributes;
table: React.HTMLAttributes;
tbody: React.HTMLAttributes;
td: React.HTMLAttributes;
textarea: React.HTMLAttributes;
tfoot: React.HTMLAttributes;
th: React.HTMLAttributes;
thead: React.HTMLAttributes;
time: React.HTMLAttributes;
title: React.HTMLAttributes;
tr: React.HTMLAttributes;
track: React.HTMLAttributes;
u: React.HTMLAttributes;
ul: React.HTMLAttributes;
"var": React.HTMLAttributes;
video: React.HTMLAttributes;
wbr: React.HTMLAttributes;
// SVG
svg: React.SVGElementAttributes;
circle: React.SVGAttributes;
defs: React.SVGAttributes;
ellipse: React.SVGAttributes;
g: React.SVGAttributes;
line: React.SVGAttributes;
linearGradient: React.SVGAttributes;
mask: React.SVGAttributes;
path: React.SVGAttributes;
pattern: React.SVGAttributes;
polygon: React.SVGAttributes;
polyline: React.SVGAttributes;
radialGradient: React.SVGAttributes;
rect: React.SVGAttributes;
stop: React.SVGAttributes;
text: React.SVGAttributes;
tspan: React.SVGAttributes;
}
}
/// <reference path="react/react-global.d.ts" />
/// <reference path="classnames/classnames.d.ts" />
......@@ -158,6 +158,9 @@
<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/typescript-react/" data-source="http://typescriptlang.org" data-content="An TypeScript + React implementation of TodoMVC. 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. This examples showcases how to work with TSX files, which allow us to enjoy native JSX support while working with TypeScript.">TypeScript <br>+ React</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>
......
......@@ -1675,6 +1675,9 @@
}, {
"name": "Scala.js & React",
"url": "examples/scalajs-react"
}, {
"name": "TypeScript & React",
"url": "examples/typescript-react"
}],
"link_groups": [{
"heading": "Official Resources",
......@@ -2093,6 +2096,9 @@
}, {
"name": "TypeScript & Backbone.js",
"url": "examples/typescript-backbone"
}, {
"name": "TypeScript & React",
"url": "examples/typescript-react"
}],
"link_groups": [{
"heading": "Official Resources",
......
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