diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html
index 8df307908b..ff0b835ac3 100644
--- a/docs/_layouts/docs.html
+++ b/docs/_layouts/docs.html
@@ -20,6 +20,6 @@ sectionid: docs
{% endif %}
-
+
diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html
index 656085dcb6..9aa96b3565 100644
--- a/docs/_layouts/post.html
+++ b/docs/_layouts/post.html
@@ -16,6 +16,6 @@ sectionid: blog
-
+
diff --git a/docs/_posts/2013-06-12-community-roundup.md b/docs/_posts/2013-06-12-community-roundup.md
index f5e63a098b..d37e3b1351 100644
--- a/docs/_posts/2013-06-12-community-roundup.md
+++ b/docs/_posts/2013-06-12-community-roundup.md
@@ -8,14 +8,14 @@ React was open sourced two weeks ago and it's time for a little round-up of what
## Khan Academy Question Editor
-It looks like [Ben Alpert](http://benalpert.com/) is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for his contributions in form of pull requests, bug reports and presence on IRC ([#reactjs on Freenode](irc://chat.freenode.net/reactjs)). Ben wrote about his experience using React on Quora:
+It looks like [Ben Alpert](http://benalpert.com/) is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for his contributions in form of pull requests, bug reports and presence on IRC ([#reactjs on Freenode](irc://chat.freenode.net/reactjs)). Ben wrote about his experience using React:
> I just rewrote a 2000-line project in React and have now made a handful of pull requests to React. Everything about React I've seen so far seems really well thought-out and I'm proud to be the first non-FB/IG production user of React.
>
> The project that I rewrote in React (and am continuing to improve) is the Khan Academy question editor which content creators can use to enter questions and hints that will be presented to students:
-> [](http://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Ben-Alpert)
+> [](http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html)
>
-> [Read the full post...](http://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Ben-Alpert)
+> [Read the full post...](http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html)
## Pimp my Backbone.View (by replacing it with React)
diff --git a/docs/_posts/2013-06-19-community-roundup-2.md b/docs/_posts/2013-06-19-community-roundup-2.md
new file mode 100644
index 0000000000..57b322e1cc
--- /dev/null
+++ b/docs/_posts/2013-06-19-community-roundup-2.md
@@ -0,0 +1,71 @@
+---
+title: "Community Round-up #2"
+layout: post
+author: Vjeux
+---
+
+Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.
+
+## Some quick thoughts on React
+
+[Andrew Greig](http://www.andrewgreig.com/) made a blog post that gives a high level description of what React is.
+
+> I have been using Facebooks recently released Javascript framework called React.js for the last few days and have managed to obtain a rather high level understanding of how it works and formed a good perspective on how it fits in to the entire javascript framework ecosystem.
+>
+> Basically, React is not an MVC framework. It is not a replacement for Backbone or Knockout or Angular, instead it is designed to work with existing frameworks and help extend their functionality.
+>
+> It is designed for building big UIs. The type where you have lots of reusable components that are handling events and presenting and changing some backend data. In a traditional MVC app, React fulfils the role of the View. So you would still need to handle the Model and Controller on your own.
+>
+> I found the best way to utilise React was to pair it with Backbone, with React replacing the Backbone View, or to write your own Model/Data object and have React communicate with that.
+>
+> [Read the full post...](http://www.andrewgreig.com/637/)
+
+## React and Socket.IO Chat Application
+
+[Danial Khosravi](http://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO.
+
+> A week ago I was playing with AngularJS and [this little chat application](https://github.com/btford/angular-socket-io-im) which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in [EchoJS](http://www.echojs.com/) and started playing with this UI library. After playing a bit with React, I decided to write and chat application using React and I used Bran Ford's Backend for server side of this little app.
+> [](http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)
+>
+> [Read the full post...](http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)
+
+## React and Other Frameworks
+
+[Pete Hunt](http://www.petehunt.net/blog/) wrote an answer on Quora comparing React and Angular directives. At the end, he explains how you can make an Angular directive that is in fact being rendered with React.
+
+> To set the record straight: React components are far more powerful than Angular templates; they should be compared with Angular's directives instead. So I took the first Google hit for "AngularJS directive tutorial" (AngularJS Directives Tutorial - Fundoo Solutions), rewrote it in React and compared them. [...]
+>
+> We've designed React from the beginning to work well with other libraries. Angular is no exception. Let's take the original Angular example and use React to implement the fundoo-rating directive.
+>
+> [Read the full post...](http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look)
+
+In the same vein, [Markov Twain](https://twitter.com/markov_twain/status/345702941845499906) re-implemented the examples on the front-page [with Ember](http://jsbin.com/azihiw/2/edit) and [Vlad Yazhbin](https://twitter.com/vla) re-implemented the tutorial [with Angular](http://jsfiddle.net/vla/Cdrse/).
+
+## Web Components: React & x-tags
+
+Mozilla and Google are actively working on Web Components. [Vjeux](http://blog.vjeux.com/) wrote a proof of concept that shows how to implement them using React.
+
+> Using [x-tags](http://www.x-tags.org/) from Mozilla, we can write custom tags within the DOM. This is a great opportunity to be able to write reusable components without being tied to a particular library. I wrote [x-react](https://github.com/vjeux/react-xtags/) to have them being rendered in React.
+> [](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html)
+>
+> [Read the full post...](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html)
+
+## React TodoMVC Example
+
+[TodoMVC.com](http://todomvc.com/) is a website that collects various implementations of the same basic Todo app. [Pete Hunt](http://www.petehunt.net/blog/) wrote an idiomatic React version.
+
+> Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps.
+>
+> To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.
+> [](http://todomvc.com/labs/architecture-examples/react/)
+>
+> [Read the source code...](https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react)
+
+## JSX is not HTML
+
+Many of you pointed out differences between JSX and HTML. In order to clear up some confusion, we have added some documentation that covers the four main differences:
+
+ - [Whitespace removal](http://facebook.github.io/react/docs/jsx-is-not-html.html)
+ - [HTML Entities](http://facebook.github.io/react/docs/jsx-is-not-html.html)
+ - [Comments](http://facebook.github.io/react/docs/jsx-is-not-html.html)
+ - [Custom HTML Attributes](http://facebook.github.io/react/docs/jsx-is-not-html.html)
diff --git a/docs/_posts/2013-06-21-react-v0-3-3.md b/docs/_posts/2013-06-21-react-v0-3-3.md
new file mode 100644
index 0000000000..668c83de1a
--- /dev/null
+++ b/docs/_posts/2013-06-21-react-v0-3-3.md
@@ -0,0 +1,24 @@
+---
+title: "React v0.3.3"
+layout: post
+author: Paul O'Shannessy
+---
+
+We have a ton of great stuff coming in v0.4, but in the meantime we're releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.
+
+
+## react-tools
+
+* Upgrade Commoner so `require` statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of `bin/jsx`.
+* Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
+* Freeze our esprima dependency.
+
+
+## React
+
+* Allow reusing the same DOM node to render different components. e.g. `React.renderComponent(, domNode); React.renderComponent(, domNode);` will work now.
+
+
+## JSXTransformer
+
+* Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.
diff --git a/docs/_posts/2013-06-27-community-roundup-3.md b/docs/_posts/2013-06-27-community-roundup-3.md
new file mode 100644
index 0000000000..50fed07978
--- /dev/null
+++ b/docs/_posts/2013-06-27-community-roundup-3.md
@@ -0,0 +1,91 @@
+---
+title: "Community Round-up #3"
+layout: post
+author: Vjeux
+---
+
+The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.
+
+## Moving From Backbone To React
+
+[Clay Allsopp](http://twitter.com/clayallsopp) successfuly ported [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/), a fairly big, interaction-heavy JavaScript app, to React.
+
+> [](http://usepropeller.com/blog/posts/from-backbone-to-react/)Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn't automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they're all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code.
+>
+> React, on the other hand, manages the DOM and only exposes real nodes at select points in its API. The "elements" you code in React are actually objects which wrap DOM nodes, not the actual objects which get inserted into the DOM. Internally, React converts those abstractions into actual DOMElements and fills out the document accordingly. [...]
+>
+> We moved about 20 different Backbone view classes to React over the past few weeks, including the live-preview pane that you see in our little iOS demo. Most importantly, it's allowed us to put energy into making each component work great on its own, instead of spending extra cycles to ensure they function in unison. For that reason, we think React is a more scalable way to build view-intensive apps than Backbone alone, and it doesn't require you to drop-everything-and-refactor like a move to Ember or Angular would demand.
+>
+> [Read the full post...](http://usepropeller.com/blog/posts/from-backbone-to-react/)
+
+## Grunt Task for JSX
+
+[Eric Clemmons](http://ericclemmons.github.io/) wrote a task for [Grunt](http://gruntjs.com/) that applies the JSX transformation to your Javascript files. It also works with [Browserify](http://browserify.org/) if you want all your files to be concatenated and minified together.
+
+> Grunt task for compiling Facebook React's .jsx templates into .js
+>
+> ```javascript
+grunt.initConfig({
+ react: {
+ app: {
+ options: { extension: 'js' },
+ files: { 'path/to/output/dir': 'path/to/jsx/templates/dir' }
+```
+>
+> It also works great with `grunt-browserify`!
+>
+> ```javascript
+browserify: {
+ options: {
+ transform: [ require('grunt-react').browserify ]
+ },
+ app: {
+ src: 'path/to/source/main.js',
+ dest: 'path/to/target/output.js'
+```
+>
+> [Check out the project ...](https://github.com/ericclemmons/grunt-react)
+
+## Backbone/Handlebars Nested Views
+
+[Joel Burget](http://joelburget.com/) wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.
+
+> The problem here is that we're trying to maniplate a tree, but there's a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there's a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render.
+>
+> What does it take to render a collection view? In the Backbone/Handlebars view of the world you have to render the template (with stubs), render each subview which replaces a stub, and keep a reference to each subview (or anything within the view that could change in the future).
+>
+> So while our view is conceptually hierarchical, due to the fact that it has to go through a flat textual representation, we need to do a lot of extra work to reassemble that structure after rendering.
+>
+> [Read the full post...](http://joelburget.com/react/)
+
+## JSRomandie Meetup
+
+[Renault John Lecoultre](https://twitter.com/renajohn/) from [BugBuster](http://www.bugbuster.com) did a React introduction talk at a JS meetup called [JS Romandie](https://twitter.com/jsromandie) last week.
+
+
+
+## CoffeeScript integration
+
+[Vjeux](http://blog.vjeux.com/) used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript.
+
+> Multiple people asked what's the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I'm not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.
+>
+> ```javascript
+{div, h3, textarea} = React.DOM
+(div {className: 'MarkdownEditor'}, [
+ (h3 {}, 'Input'),
+ (textarea {onKeyUp: @handleKeyUp, ref: 'textarea'},
+ @state.value
+ )
+])
+```
+>
+> [Read the full post...](http://blog.vjeux.com/2013/javascript/react-coffeescript.html)
+
+## Tutorial in Plain Javascript
+
+We've seen a lot of people comparing React with various frameworks. [Ricardo Tomasi](http://ricardo.cc/) decided to re-implement the tutorial without any framework, just plain Javascript.
+
+> Facebook & Instagram launched the React framework and an accompanying tutorial. Developer Vlad Yazhbin decided to rewrite that using AngularJS. The end result is pretty neat, but if you're like me you will not actually appreciate the HTML speaking for itself and doing all the hard work. So let's see what that looks like in plain javascript.
+>
+> [Read the full post...](http://ricardo.cc/2013/06/07/react-tutorial-rewritten-in-plain-javascript.html)
diff --git a/docs/docs/api.md b/docs/docs/api.md
index 1ae5e97b37..337ae86901 100644
--- a/docs/docs/api.md
+++ b/docs/docs/api.md
@@ -3,6 +3,7 @@ id: docs-api
title: React API
layout: docs
prev: mixins.html
+next: jsx-is-not-html.html
---
## React
diff --git a/docs/docs/component-lifecycle.md b/docs/docs/component-lifecycle.md
index 1998f1806e..8861c1877f 100644
--- a/docs/docs/component-lifecycle.md
+++ b/docs/docs/component-lifecycle.md
@@ -22,7 +22,7 @@ In this one simple line, we have accomplished the following:
- The component is **mounted** into `document.body`.
**Mounting** is the process of initializing a React component by creating its
-DOM nodes and inserting the them into a supplied container node.
+DOM nodes and inserting them into a supplied container node.
At this point, the entire page consists of a single `
` with "Hello,
world!".
diff --git a/docs/docs/getting-started.md b/docs/docs/getting-started.md
index 5b732c032a..1e62818ee9 100644
--- a/docs/docs/getting-started.md
+++ b/docs/docs/getting-started.md
@@ -88,6 +88,10 @@ React.renderComponent(
);
```
+> Note:
+>
+> The comment parser is very strict right now, in order for it to pick up the `@jsx` modifier, two conditions are required. The `@jsx` comment block must be the first comment on the file. The comment must start with `/**` (`/*` and `//` will not work). If the parser can't find the `@jsx` comment, it will output the file without transforming it.
+
Update your HTML file as below:
```html{6,10}
diff --git a/docs/docs/jsx-is-not-html.md b/docs/docs/jsx-is-not-html.md
new file mode 100644
index 0000000000..42013e9196
--- /dev/null
+++ b/docs/docs/jsx-is-not-html.md
@@ -0,0 +1,95 @@
+---
+id: docs-jsx-is-not-html
+title: JSX is not HTML
+description: Differences between JSX and HTML.
+layout: docs
+prev: api.html
+---
+
+JSX looks like HTML but there are some important differences you may run into.
+
+## Whitespace removal
+
+JSX doesn't follow the same whitespace elimination rules as HTML. JSX removes all whitespace between two curly braces expressions. If you want to have whitespace, simply add `{' '}`.
+
+```javascript
+
{this.props.name} {' '} {this.props.surname}
+```
+
+Follow [Issue #65](https://github.com/facebook/react/issues/65) for discussion on this behavior.
+
+## HTML Entities
+
+You can insert HTML entities within literal text in JSX:
+
+```javascript
+
First · Second
+```
+
+If you want to display an HTML entity within dynamic content, you will run into double escaping issues as React escapes all the strings you are displaying in order to prevent a wide range of XSS attacks by default.
+
+```javascript
+// Bad: It displays "First · Second"
+
{'First · Second'}
+```
+
+There are various ways to work-around this issue. The easiest one is to write unicode character directly in Javascript. You need to make sure that the file is saved as UTF-8 and that the proper UTF-8 directives are set so the browser will display it correctly.
+
+```javascript
+
{'First ยท Second'}
+```
+
+A safer alternative is to find the [unicode number corresponding to the entity](http://www.fileformat.info/info/unicode/char/b7/index.htm) and use it inside of a JavaScript string.
+
+```javascript
+
{'First \u00b7 Second'}
+
{'First ' + String.fromCharCode(183) + ' Second'}
+```
+
+You can use mixed arrays with strings and JSX elements.
+
+```javascript
+
{['First ', ·, ' Second']}
+```
+
+As a last resort, you always have the ability to insert raw HTML.
+
+```javascript
+
+```
+
+## Comments
+
+JSX supports both single-line and multi-line JavaScript comments within a tag declaration:
+
+```javascript
+
+```
+
+As of React 0.3, there is no good way to insert comments within the children section. [Issue #82](https://github.com/facebook/react/issues/82) is tracking progress to enable the following:
+
+```javascript
+// Note: This is not implemented yet!
+
+ {/* This is a comment */}
+
+```
+
+## Custom HTML Attributes
+
+If you pass properties to native HTML elements that do not exist in the HTML specification, React will not render them. If you want to use a custom attribute, you should prefix it with `data-`.
+
+```javascript
+
+```
+
+[Web Accessibility](http://www.w3.org/WAI/intro/aria) attributes starting with `aria-` will be rendered properly.
+
+```javascript
+
+```
diff --git a/docs/docs/syntax.md b/docs/docs/syntax.md
index e4b099bd23..bb477e9a07 100644
--- a/docs/docs/syntax.md
+++ b/docs/docs/syntax.md
@@ -53,7 +53,7 @@ var app = Nav({color:'blue'}, Profile({}, 'click'));
```
Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it
-desguars into native JavaScript.
+desugars into native JavaScript.
If you want to use JSX, the [Getting Started](getting-started.html) guide shows
how to setup compilation.
diff --git a/docs/docs/tutorial.md b/docs/docs/tutorial.md
index 8117b2baaa..021ff5057a 100644
--- a/docs/docs/tutorial.md
+++ b/docs/docs/tutorial.md
@@ -262,8 +262,8 @@ So far we've been inserting the comments directly in the source code. Instead, l
```javascript
// tutorial8.js
var data = [
- {author: 'Pete Hunt', text: 'This is one comment'},
- {author: 'Jordan Walke', text: 'This is *another* comment'}
+ {author: "Pete Hunt", text: "This is one comment"},
+ {author: "Jordan Walke", text: "This is *another* comment"}
];
```
@@ -357,8 +357,8 @@ When the component is first created, we want to GET some JSON from the server an
```javascript
// tutorial13.json
[
- {'author': 'Pete Hunt', 'text': 'This is one comment'},
- {'author': 'Jordan Walke', 'text': 'This is *another* comment'}
+ {"author": "Pete Hunt", "text": "This is one comment"},
+ {"author": "Jordan Walke", "text": "This is *another* comment"}
]
```
@@ -435,7 +435,7 @@ React.renderComponent(
```
-All we have done here is move the AJAX call to a separate method and call it when the component is first loaded and every 60 seconds after that. Try running this in your browser and changing the `comments.json` file; within 5 seconds, the changes will show!
+All we have done here is move the AJAX call to a separate method and call it when the component is first loaded and every 5 seconds after that. Try running this in your browser and changing the `comments.json` file; within 5 seconds, the changes will show!
## Adding new comments
diff --git a/docs/downloads.md b/docs/downloads.md
index d35ff4dbd2..2b2a9ad556 100644
--- a/docs/downloads.md
+++ b/docs/downloads.md
@@ -49,6 +49,8 @@ $ npm install -g react-tools
## Release Notes
+**0.3.3** Upgrade `react-tools` dependencies, improve in-browser JSX transformer, make `React.renderComponent` more versatile. [Details...](blog/2013/06/20/react-v0-3-3.html)
+
**0.3.2** Improve compatibility of JSX Transformer; make `react-tools` compatible with [browserify](https://github.com/substack/node-browserify)
**0.3.1** Fix `react-tools` module
diff --git a/docs/img/blog/chatapp.png b/docs/img/blog/chatapp.png
new file mode 100644
index 0000000000..55edf29dd0
Binary files /dev/null and b/docs/img/blog/chatapp.png differ
diff --git a/docs/img/blog/propeller-logo.png b/docs/img/blog/propeller-logo.png
new file mode 100644
index 0000000000..1573d715b2
Binary files /dev/null and b/docs/img/blog/propeller-logo.png differ
diff --git a/docs/img/blog/todomvc.png b/docs/img/blog/todomvc.png
new file mode 100644
index 0000000000..9c03bc0f62
Binary files /dev/null and b/docs/img/blog/todomvc.png differ
diff --git a/docs/img/blog/xreact.png b/docs/img/blog/xreact.png
new file mode 100644
index 0000000000..59fbb6f22a
Binary files /dev/null and b/docs/img/blog/xreact.png differ
diff --git a/grunt/config/compare_size.js b/grunt/config/compare_size.js
index e785fe5281..fb59d94cdb 100644
--- a/grunt/config/compare_size.js
+++ b/grunt/config/compare_size.js
@@ -12,6 +12,6 @@ module.exports = {
return gzip.zip(contents, {}).length;
}
},
- cache: "build/.sizecache.json"
+ cache: ".grunt/sizecache.json"
}
};
diff --git a/grunt/tasks/jsx.js b/grunt/tasks/jsx.js
index 08a84ab4f0..290816711f 100644
--- a/grunt/tasks/jsx.js
+++ b/grunt/tasks/jsx.js
@@ -1,16 +1,17 @@
'use strict';
-var exec = require("child_process").exec;
-var expand = require("grunt").file.expand;
+var grunt = require("grunt");
+var expand = grunt.file.expand;
+var spawn = grunt.util.spawn;
module.exports = function() {
var done = this.async();
var config = this.data;
var args = [
- "bin/jsx",
"--cache-dir", ".module-cache",
"--relativize",
+ "--follow-requires",
config.sourceDir,
config.outputDir
];
@@ -25,5 +26,18 @@ module.exports = function() {
args.push.apply(args, rootIDs);
args.push("--config", config.configFile);
- exec(args.join(" "), done);
+ var child = spawn({
+ cmd: "bin/jsx",
+ args: args
+ }, function(error, result, code) {
+ if (error) {
+ grunt.log.error(error);
+ done(false);
+ } else {
+ done();
+ }
+ });
+
+ child.stdout.pipe(process.stdout);
+ child.stderr.pipe(process.stderr);
};
diff --git a/grunt/tasks/npm.js b/grunt/tasks/npm.js
index becc96a894..8fe6b7ad32 100644
--- a/grunt/tasks/npm.js
+++ b/grunt/tasks/npm.js
@@ -2,13 +2,11 @@
var assert = require("assert");
var path = require("path");
-var fs = require("fs");
var tmp = require("tmp");
var grunt = require("grunt");
var spawn = grunt.util.spawn;
module.exports = function() {
- var config = this.data;
var done = this.async();
function run(cmd, args, opts, callback) {
@@ -25,7 +23,8 @@ module.exports = function() {
grunt.log.writeln("> " + cmd + " " + args.join(" "));
- var proc = spawn({
+ // var proc =
+ spawn({
cmd: cmd,
args: args,
opts: opts
diff --git a/grunt/tasks/phantom.js b/grunt/tasks/phantom.js
index ff71f683c6..d5c66eb258 100644
--- a/grunt/tasks/phantom.js
+++ b/grunt/tasks/phantom.js
@@ -38,7 +38,7 @@ function run(config, done) {
}
args.push("--tests");
- var tests = grunt.file.expand({
+ grunt.file.expand({
nonull: true,
cwd: "src"
}, config.tests || []).forEach(function(file) {
diff --git a/package.json b/package.json
index 0333bb02cd..7eb7e57801 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-tools",
- "version": "0.3.2",
+ "version": "0.4.0a",
"keywords": [
"react",
"jsx",
@@ -21,7 +21,7 @@
"bin/jsx",
"build/modules/",
"vendor/fbtransform/",
- "vendor/woodchipper.js"
+ "vendor/constants.js"
],
"main": "main.js",
"bin": {
@@ -36,9 +36,9 @@
},
"dependencies": {
"base62": "~0.1.1",
- "commoner": "~0.7.0",
- "esprima": "git://github.com/facebook/esprima#fb-harmony",
- "recast": "~0.4.5",
+ "commoner": "~0.8.0",
+ "esprima": "https://github.com/facebook/esprima/tarball/a3e0ea3979eb8d54d8bfade220c272903f928b1e",
+ "recast": "~0.4.8",
"source-map": "~0.1.22"
},
"devDependencies": {
@@ -58,5 +58,8 @@
"tmp": "~0.0.18",
"grunt-contrib-compress": "~0.5.1"
},
+ "engines": {
+ "node": ">=0.10.0"
+ },
"preferGlobal": true
}
diff --git a/src/core/React.js b/src/core/React.js
index 1a9e61fbb8..7bdb3b39bd 100644
--- a/src/core/React.js
+++ b/src/core/React.js
@@ -31,7 +31,7 @@ ReactDefaultInjection.inject();
var React = {
DOM: ReactDOM,
- Props: ReactProps,
+ Props: ReactProps,
initializeTouchEvents: function(shouldUseTouch) {
ReactMount.useTouchEvents = shouldUseTouch;
},
diff --git a/src/core/ReactComponent.js b/src/core/ReactComponent.js
index 3353310b1f..e4f3ad4678 100644
--- a/src/core/ReactComponent.js
+++ b/src/core/ReactComponent.js
@@ -16,11 +16,13 @@
* @providesModule ReactComponent
*/
+/*jslint evil: true */
+
"use strict";
-var ExecutionEnvironment = require('ExecutionEnvironment');
var ReactCurrentOwner = require('ReactCurrentOwner');
var ReactDOMIDOperations = require('ReactDOMIDOperations');
+var ReactID = require('ReactID');
var ReactMount = require('ReactMount');
var ReactOwner = require('ReactOwner');
var ReactReconcileTransaction = require('ReactReconcileTransaction');
@@ -35,6 +37,12 @@ var merge = require('merge');
*/
var OWNER = '{owner}';
+/**
+ * Props key that determines if a component's key was already validated.
+ * @private
+ */
+var IS_KEY_VALIDATED = '{is.key.validated}';
+
/**
* Every React component is in one of these life cycles.
*/
@@ -55,52 +63,70 @@ var ComponentLifeCycle = keyMirror({
* This allows us to keep track of children between updates.
*/
-var CHILD_HAS_NO_IDENTITY =
- 'You are passing a dynamic array of children. You should set the ' +
- 'property "key" to a string that uniquely identifies each child.';
-
-var HAS_WARNED = false;
+var ownerHasWarned = {};
/**
- * Helpers for flattening child arguments onto a new array or use an existing
- * one.
+ * Warn if the component doesn't have an explicit key assigned to it.
+ * This component is in an array. The array could grow and shrink or be
+ * reordered. All children, that hasn't already been validated, are required to
+ * have a "key" property assigned to it.
+ *
+ * @internal
+ * @param {ReactComponent} component Component that requires a key.
*/
+function validateExplicitKey(component) {
+ if (component[IS_KEY_VALIDATED] || component.props.key != null) {
+ return;
+ }
+ component[IS_KEY_VALIDATED] = true;
-function isEmptyChild(child) {
- return child == null || typeof child === 'boolean';
+ // We can't provide friendly warnings for top level components.
+ if (!ReactCurrentOwner.current) {
+ return;
+ }
+
+ // Name of the component whose render method tried to pass children.
+ var currentName = ReactCurrentOwner.current.constructor.displayName;
+ if (ownerHasWarned.hasOwnProperty(currentName)) {
+ return;
+ }
+ ownerHasWarned[currentName] = true;
+
+ var message = 'Each child in an array should have a unique "key" prop. ' +
+ 'Check the render method of ' + currentName + '.';
+ if (!component.isOwnedBy(ReactCurrentOwner.current)) {
+ // Name of the component that originally created this child.
+ var childOwnerName =
+ component.props[OWNER] && component.props[OWNER].constructor.displayName;
+
+ // Usually the current owner is the offender, but if it accepts
+ // children as a property, it may be the creator of the child that's
+ // responsible for assigning it a key.
+ message += ' It was passed a child from ' + childOwnerName + '.';
+ }
+
+ global.console && console.warn && console.warn(message);
}
-function assignKey(setKey, child, index) {
- if (ReactComponent.isValidComponent(child)) {
- var key = child.props.key;
- if (__DEV__) {
- if (!HAS_WARNED && !key) {
- HAS_WARNED = true;
- console && console.warn && console.warn(CHILD_HAS_NO_IDENTITY);
+/**
+ * Ensure that every component either is passed in a static location or, if
+ * if it's passed in an array, has an explicit key property defined.
+ *
+ * @internal
+ * @param {*} component Statically passed child of any type.
+ * @return {boolean}
+ */
+function validateChildKeys(component) {
+ if (Array.isArray(component)) {
+ for (var i = 0; i < component.length; i++) {
+ var child = component[i];
+ if (ReactComponent.isValidComponent(child)) {
+ validateExplicitKey(child);
}
}
- child._key = (setKey ? setKey + ':' : '') + (key || ('' + index));
- }
-}
-
-function tryToReuseArray(children) {
- for (var i = 0; i < children.length; i++) {
- var child = children[i];
- if (isEmptyChild(child)) return false;
- assignKey('0', child, i);
- }
- return true;
-}
-
-function appendNestedChildren(parentKey, sourceArray, targetArray) {
- for (var i = 0; i < sourceArray.length; i++) {
- var child = sourceArray[i];
- if (isEmptyChild(child)) continue;
- assignKey(parentKey, child, i);
- // TODO: Invalid components like strings could possibly need
- // keys assigned to them here. Usually they're not stateful but
- // CSS transitions and special events could make them stateful.
- targetArray.push(child);
+ } else if (ReactComponent.isValidComponent(component)) {
+ // This component was passed in a valid location.
+ component[IS_KEY_VALIDATED] = true;
}
}
@@ -144,6 +170,23 @@ var ReactComponent = {
);
},
+ /**
+ * Generate a key string that identifies a component within a set.
+ *
+ * @param {*} component A component that could contain a manual key.
+ * @param {number} index Index that is used if a manual key is not provided.
+ * @return {string}
+ * @internal
+ */
+ getKey: function(component, index) {
+ if (component && component.props && component.props.key != null) {
+ // Explicit key
+ return '' + component.props.key;
+ }
+ // Implicit key determined by the index in the set
+ return '' + index;
+ },
+
/**
* @internal
*/
@@ -202,29 +245,16 @@ var ReactComponent = {
/**
* Returns the DOM node rendered by this component.
*
- * @return {?DOMElement} The root node of this component.
+ * @return {DOMElement} The root node of this component.
* @final
* @protected
*/
getDOMNode: function() {
- invariant(
- ExecutionEnvironment.canUseDOM,
- 'getDOMNode(): The DOM is not supported in the current environment.'
- );
invariant(
this.isMounted(),
'getDOMNode(): A component must be mounted to have a DOM node.'
);
- var rootNode = this._rootNode;
- if (!rootNode) {
- rootNode = document.getElementById(this._rootNodeID);
- if (!rootNode) {
- // TODO: Log the frequency that we reach this path.
- rootNode = ReactMount.findReactRenderedDOMNodeSlow(this._rootNodeID);
- }
- this._rootNode = rootNode;
- }
- return rootNode;
+ return ReactID.getNode(this._rootNodeID);
},
/**
@@ -280,53 +310,23 @@ var ReactComponent = {
// All components start unmounted.
this._lifeCycleState = ComponentLifeCycle.UNMOUNTED;
- // Children can be either an array or more than one argument
- if (arguments.length < 2) {
- return;
- }
-
- if (arguments.length === 2) {
-
- // A single string or number child is treated as content, not an array.
- var type = typeof children;
- if (children == null || type === 'string' || type === 'number') {
- this.props.children = children;
- return;
+ // Children can be more than one argument
+ var childrenLength = arguments.length - 1;
+ if (childrenLength === 1) {
+ if (__DEV__) {
+ validateChildKeys(children);
}
-
- // A single array can be reused if it's already flat
- if (Array.isArray(children) && tryToReuseArray(children)) {
- this.props.children = children;
- return;
- }
-
- }
-
- // Subsequent arguments are rolled into one child array. Array arguments
- // are flattened onto it. This is inlined to avoid extra heap allocation.
- var targetArray = null;
- for (var i = 1; i < arguments.length; i++) {
- var child = arguments[i];
- if (Array.isArray(child)) {
- if (child.length === 0) continue;
-
- if (targetArray === null) targetArray = [];
- appendNestedChildren('' + (i - 1), child, targetArray);
-
- } else if (!isEmptyChild(child)) {
-
- if (ReactComponent.isValidComponent(child)) {
- // This is a static node and therefore safe to key by index.
- // No warning necessary.
- child._key = child.props.key || ('' + (i - 1));
+ this.props.children = children;
+ } else if (childrenLength > 1) {
+ var childArray = Array(childrenLength);
+ for (var i = 0; i < childrenLength; i++) {
+ if (__DEV__) {
+ validateChildKeys(arguments[i + 1]);
}
-
- if (targetArray === null) targetArray = [];
- targetArray.push(child);
-
+ childArray[i] = arguments[i + 1];
}
+ this.props.children = childArray;
}
- this.props.children = targetArray;
},
/**
@@ -376,7 +376,7 @@ var ReactComponent = {
if (props.ref != null) {
ReactOwner.removeComponentAsRefFrom(this, props.ref, props[OWNER]);
}
- this._rootNode = null;
+ ReactID.purgeID(this._rootNodeID);
this._rootNodeID = null;
this._lifeCycleState = ComponentLifeCycle.UNMOUNTED;
},
@@ -447,6 +447,10 @@ var ReactComponent = {
container,
transaction,
shouldReuseMarkup) {
+ invariant(
+ container && container.nodeType === 1,
+ 'mountComponentIntoNode(...): Target container is not a DOM element.'
+ );
var renderStart = Date.now();
var markup = this.mountComponent(rootID, transaction);
ReactMount.totalInstantiationTime += (Date.now() - renderStart);
@@ -500,6 +504,22 @@ var ReactComponent = {
*/
isOwnedBy: function(owner) {
return this.props[OWNER] === owner;
+ },
+
+ /**
+ * Gets another component, that shares the same owner as this one, by ref.
+ *
+ * @param {string} ref of a sibling Component.
+ * @return {?ReactComponent} the actual sibling Component.
+ * @final
+ * @internal
+ */
+ getSiblingByRef: function(ref) {
+ var owner = this.props[OWNER];
+ if (!owner || !owner.refs) {
+ return null;
+ }
+ return owner.refs[ref];
}
}
diff --git a/src/core/ReactComponentWithPureRenderMixin.js b/src/core/ReactComponentWithPureRenderMixin.js
index 7f46ed42fb..1ac4c23aad 100644
--- a/src/core/ReactComponentWithPureRenderMixin.js
+++ b/src/core/ReactComponentWithPureRenderMixin.js
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*
-* @providesModule ReactComponentWithPureRender
+* @providesModule ReactComponentWithPureRenderMixin
*/
"use strict";
@@ -27,9 +27,10 @@
*
* Example:
*
- * var ReactComponentWithPureRender = require('ReactComponentWithPureRender');
+ * var ReactComponentWithPureRender =
+ * require('ReactComponentWithPureRenderMixin');
* React.createClass({
- * mixins: [ReactComponentWithPureRender],
+ * mixins: [ReactComponentWithPureRenderMixin],
*
* render: function() {
* return
foo
;
@@ -41,7 +42,7 @@
* differences. Only mixin to components which have simple props and state, or
* use `forceUpdate()` when you know deep data structures have changed.
*/
-var ReactComponentWithPureRender = {
+var ReactComponentWithPureRenderMixin = {
shouldComponentUpdate: function(nextProps, nextState) {
return !shallowEqual(this.props, nextProps) ||
!shallowEqual(this.state, nextState);
@@ -74,4 +75,4 @@ function shallowEqual(objA, objB) {
return true;
}
-module.exports = ReactComponentWithPureRender;
+module.exports = ReactComponentWithPureRenderMixin;
diff --git a/src/core/ReactCompositeComponent.js b/src/core/ReactCompositeComponent.js
index 78041c2a05..524c828c13 100644
--- a/src/core/ReactCompositeComponent.js
+++ b/src/core/ReactCompositeComponent.js
@@ -28,6 +28,19 @@ var keyMirror = require('keyMirror');
var merge = require('merge');
var mixInto = require('mixInto');
+function invokeWithWarning(func) {
+ return function() {
+ console && console.warn && console.warn(
+ 'You have invoked a method that is automatically bound, before the ' +
+ 'instance has been mounted. There is nothing conceptually wrong with ' +
+ 'this, but since this method will be replaced with a new version once' +
+ ' the component is mounted - you should be aware of the fact that ' +
+ 'this method will soon be replaced.'
+ );
+ return func.apply(this, arguments);
+ };
+}
+
/**
* Policies that describe methods in `ReactCompositeComponentInterface`.
*/
@@ -92,9 +105,8 @@ var ReactCompositeComponentInterface = {
// ==== Definition methods ====
/**
- * Invoked when the component is mounted and whenever new props are received.
- * Values in the returned mapping will be set on `this.props` if that prop is
- * not specified (i.e. using an `in` check).
+ * Invoked when the component is mounted. Values in the mapping will be set on
+ * `this.props` if that prop is not specified (i.e. using an `in` check).
*
* This method is invoked before `getInitialState` and therefore cannot rely
* on `this.state` or use `this.setState`.
@@ -283,6 +295,48 @@ var RESERVED_SPEC_KEYS = {
}
};
+function validateMethodOverride(proto, name) {
+ var specPolicy = ReactCompositeComponentInterface[name];
+
+ // Disallow overriding of base class methods unless explicitly allowed.
+ if (ReactCompositeComponentMixin.hasOwnProperty(name)) {
+ invariant(
+ specPolicy === SpecPolicy.OVERRIDE_BASE,
+ 'ReactCompositeComponentInterface: You are attempting to override ' +
+ '`%s` from your class specification. Ensure that your method names ' +
+ 'do not overlap with React methods.',
+ name
+ );
+ }
+
+ // Disallow defining methods more than once unless explicitly allowed.
+ if (proto.hasOwnProperty(name)) {
+ invariant(
+ specPolicy === SpecPolicy.DEFINE_MANY,
+ 'ReactCompositeComponentInterface: You are attempting to define ' +
+ '`%s` on your component more than once. This conflict may be due ' +
+ 'to a mixin.',
+ name
+ );
+ }
+}
+
+
+function validateLifeCycleOnReplaceState(instance) {
+ var compositeLifeCycleState = instance._compositeLifeCycleState;
+ invariant(
+ instance.isMounted() ||
+ compositeLifeCycleState === CompositeLifeCycle.MOUNTING,
+ 'replaceState(...): Can only update a mounted or mounting component.'
+ );
+ invariant(
+ compositeLifeCycleState !== CompositeLifeCycle.RECEIVING_STATE &&
+ compositeLifeCycleState !== CompositeLifeCycle.UNMOUNTING,
+ 'replaceState(...): Cannot update while unmounting component or during ' +
+ 'an existing state transition (such as within `render`).'
+ );
+}
+
/**
* Custom version of `mixInto` which handles policy validation and reserved
* specification keys when building `ReactCompositeComponent` classses.
@@ -290,58 +344,47 @@ var RESERVED_SPEC_KEYS = {
function mixSpecIntoComponent(Constructor, spec) {
var proto = Constructor.prototype;
for (var name in spec) {
- if (!spec.hasOwnProperty(name)) {
+ var property = spec[name];
+ if (!spec.hasOwnProperty(name) || !property) {
continue;
}
- var property = spec[name];
- var specPolicy = ReactCompositeComponentInterface[name];
-
- // Disallow overriding of base class methods unless explicitly allowed.
- if (ReactCompositeComponentMixin.hasOwnProperty(name)) {
- invariant(
- specPolicy === SpecPolicy.OVERRIDE_BASE,
- 'ReactCompositeComponentInterface: You are attempting to override ' +
- '`%s` from your class specification. Ensure that your method names ' +
- 'do not overlap with React methods.',
- name
- );
- }
-
- // Disallow using `React.autoBind` on internal methods.
- if (specPolicy != null) {
- invariant(
- !property || !property.__reactAutoBind,
- 'ReactCompositeComponentInterface: You are attempting to use ' +
- '`React.autoBind` on `%s`, a method that is internal to React.' +
- 'Internal methods are called with the component as the context.',
- name
- );
- }
-
- // Disallow defining methods more than once unless explicitly allowed.
- if (proto.hasOwnProperty(name)) {
- invariant(
- specPolicy === SpecPolicy.DEFINE_MANY,
- 'ReactCompositeComponentInterface: You are attempting to define ' +
- '`%s` on your component more than once. This conflict may be due ' +
- 'to a mixin.',
- name
- );
- }
+ validateMethodOverride(proto, name);
if (RESERVED_SPEC_KEYS.hasOwnProperty(name)) {
RESERVED_SPEC_KEYS[name](Constructor, property);
- } else if (property && property.__reactAutoBind) {
- if (!proto.__reactAutoBindMap) {
- proto.__reactAutoBindMap = {};
- }
- proto.__reactAutoBindMap[name] = property.__reactAutoBind;
- } else if (proto.hasOwnProperty(name)) {
- // For methods which are defined more than once, call the existing methods
- // before calling the new property.
- proto[name] = createChainedFunction(proto[name], property);
} else {
- proto[name] = property;
+ // Setup methods on prototype:
+ // The following member methods should not be automatically bound:
+ // 1. Expected ReactCompositeComponent methods (in the "interface").
+ // 2. Overridden methods (that were mixed in).
+ var isCompositeComponentMethod = name in ReactCompositeComponentInterface;
+ var isInherited = name in proto;
+ var markedDontBind = property.__reactDontBind;
+ var isFunction = typeof property === 'function';
+ var shouldAutoBind =
+ isFunction &&
+ !isCompositeComponentMethod &&
+ !isInherited &&
+ !markedDontBind;
+
+ if (shouldAutoBind) {
+ if (!proto.__reactAutoBindMap) {
+ proto.__reactAutoBindMap = {};
+ }
+ proto.__reactAutoBindMap[name] = property;
+ proto[name] = property;
+ if (__DEV__) {
+ proto[name] = invokeWithWarning(property);
+ }
+ } else {
+ if (isInherited) {
+ // For methods which are defined more than once, call the existing
+ // methods before calling the new property.
+ proto[name] = createChainedFunction(proto[name], property);
+ } else {
+ proto[name] = property;
+ }
+ }
}
}
}
@@ -355,13 +398,9 @@ function mixSpecIntoComponent(Constructor, spec) {
* @private
*/
function createChainedFunction(one, two) {
- return function chainedFunction(a, b, c, d, e, tooMany) {
- invariant(
- typeof tooMany === 'undefined',
- 'Chained function can only take a maximum of 5 arguments.'
- );
- one.call(this, a, b, c, d, e);
- two.call(this, a, b, c, d, e);
+ return function chainedFunction() {
+ one.apply(this, arguments);
+ two.apply(this, arguments);
};
}
@@ -370,7 +409,26 @@ function createChainedFunction(one, two) {
* `this._compositeLifeCycleState` (which can be null).
*
* This is different from the life cycle state maintained by `ReactComponent` in
- * `this._lifeCycleState`.
+ * `this._lifeCycleState`. The following diagram shows how the states overlap in
+ * time. There are times when the CompositeLifeCycle is null - at those times it
+ * is only meaningful to look at ComponentLifeCycle alone.
+ *
+ * Top Row: ReactComponent.ComponentLifeCycle
+ * Low Row: ReactComponent.CompositeLifeCycle
+ *
+ * +-------+------------------------------------------------------+--------+
+ * | UN | MOUNTED | UN |
+ * |MOUNTED| | MOUNTED|
+ * +-------+------------------------------------------------------+--------+
+ * | ^--------+ +------+ +------+ +------+ +--------^ |
+ * | | | | | | | | | | | |
+ * | 0--|MOUNTING|-0-|RECEIV|-0-|RECEIV|-0-|RECEIV|-0-| UN |--->0 |
+ * | | | |PROPS | | PROPS| | STATE| |MOUNTING| |
+ * | | | | | | | | | | | |
+ * | | | | | | | | | | | |
+ * | +--------+ +------+ +------+ +------+ +--------+ |
+ * | | | |
+ * +-------+------------------------------------------------------+--------+
*/
var CompositeLifeCycle = keyMirror({
/**
@@ -416,6 +474,17 @@ var ReactCompositeComponentMixin = {
this._compositeLifeCycleState = null;
},
+ /**
+ * Checks whether or not this composite component is mounted.
+ * @return {boolean} True if mounted, false otherwise.
+ * @protected
+ * @final
+ */
+ isMounted: function() {
+ return ReactComponent.Mixin.isMounted.call(this) &&
+ this._compositeLifeCycleState !== CompositeLifeCycle.MOUNTING;
+ },
+
/**
* Initializes the component, renders markup, and registers event listeners.
*
@@ -427,11 +496,9 @@ var ReactCompositeComponentMixin = {
*/
mountComponent: function(rootID, transaction) {
ReactComponent.Mixin.mountComponent.call(this, rootID, transaction);
-
- // Unset `this._lifeCycleState` until after this method is finished.
- this._lifeCycleState = ReactComponent.LifeCycle.UNMOUNTED;
this._compositeLifeCycleState = CompositeLifeCycle.MOUNTING;
+ this._defaultProps = this.getDefaultProps ? this.getDefaultProps() : null;
this._processProps(this.props);
if (this.__reactAutoBindMap) {
@@ -455,15 +522,11 @@ var ReactCompositeComponentMixin = {
// Done with mounting, `setState` will now trigger UI changes.
this._compositeLifeCycleState = null;
- this._lifeCycleState = ReactComponent.LifeCycle.MOUNTED;
-
- var html = this._renderedComponent.mountComponent(rootID, transaction);
-
+ var markup = this._renderedComponent.mountComponent(rootID, transaction);
if (this.componentDidMount) {
transaction.getReactOnDOMReady().enqueue(this, this.componentDidMount);
}
-
- return html;
+ return markup;
},
/**
@@ -479,6 +542,8 @@ var ReactCompositeComponentMixin = {
}
this._compositeLifeCycleState = null;
+ this._defaultProps = null;
+
ReactComponent.Mixin.unmountComponent.call(this);
this._renderedComponent.unmountComponent();
this._renderedComponent = null;
@@ -554,18 +619,7 @@ var ReactCompositeComponentMixin = {
*/
replaceState: function(completeState, callback) {
var compositeLifeCycleState = this._compositeLifeCycleState;
- invariant(
- this.isMounted() ||
- compositeLifeCycleState === CompositeLifeCycle.MOUNTING,
- 'replaceState(...): Can only update a mounted (or mounting) component.'
- );
- invariant(
- compositeLifeCycleState !== CompositeLifeCycle.RECEIVING_STATE &&
- compositeLifeCycleState !== CompositeLifeCycle.UNMOUNTING,
- 'replaceState(...): Cannot update while unmounting component or during ' +
- 'an existing state transition (such as within `render`).'
- );
-
+ validateLifeCycleOnReplaceState.call(null, this);
this._pendingState = completeState;
// Do not trigger a state transition if we are in the middle of mounting or
@@ -586,7 +640,6 @@ var ReactCompositeComponentMixin = {
transaction
);
ReactComponent.ReactReconcileTransaction.release(transaction);
-
this._compositeLifeCycleState = null;
}
@@ -603,12 +656,10 @@ var ReactCompositeComponentMixin = {
*/
_processProps: function(props) {
var propName;
- if (this.getDefaultProps) {
- var defaultProps = this.getDefaultProps();
- for (propName in defaultProps) {
- if (!(propName in props)) {
- props[propName] = defaultProps[propName];
- }
+ var defaultProps = this._defaultProps;
+ for (propName in defaultProps) {
+ if (!(propName in props)) {
+ props[propName] = defaultProps[propName];
}
}
var propDeclarations = this.constructor.propDeclarations;
@@ -721,8 +772,10 @@ var ReactCompositeComponentMixin = {
forceUpdate: function(callback) {
var compositeLifeCycleState = this._compositeLifeCycleState;
invariant(
- this.isMounted(),
- 'forceUpdate(...): Can only force an update on mounted components.'
+ this.isMounted() ||
+ compositeLifeCycleState === CompositeLifeCycle.MOUNTING,
+ 'forceUpdate(...): Can only force an update on mounted or mounting ' +
+ 'components.'
);
invariant(
compositeLifeCycleState !== CompositeLifeCycle.RECEIVING_STATE &&
@@ -786,27 +839,9 @@ var ReactCompositeComponentMixin = {
*/
_bindAutoBindMethod: function(method) {
var component = this;
- var hasWarned = false;
- function autoBound(a, b, c, d, e, tooMany) {
- invariant(
- typeof tooMany === 'undefined',
- 'React.autoBind(...): Methods can only take a maximum of 5 arguments.'
- );
- if (component._lifeCycleState === ReactComponent.LifeCycle.MOUNTED) {
- return method.call(component, a, b, c, d, e);
- } else if (!hasWarned) {
- hasWarned = true;
- if (__DEV__) {
- console.warn(
- 'React.autoBind(...): Attempted to invoke an auto-bound method ' +
- 'on an unmounted instance of `%s`. You either have a memory leak ' +
- 'or an event handler that is being run after unmounting.',
- component.constructor.displayName || 'ReactCompositeComponent'
- );
- }
- }
- }
- return autoBound;
+ return function() {
+ return method.apply(component, arguments);
+ };
}
};
@@ -859,33 +894,16 @@ var ReactCompositeComponent = {
},
/**
- * Marks the provided method to be automatically bound to the component.
- * This means the method's context will always be the component.
- *
- * React.createClass({
- * handleClick: React.autoBind(function() {
- * this.setState({jumping: true});
- * }),
- * render: function() {
- * return Jump;
- * }
- * });
+ * TODO: Delete this when all callers have been updated to rely on this
+ * behavior being the default.
*
+ * Backwards compatible stub for what is now the default behavior.
* @param {function} method Method to be bound.
* @public
*/
autoBind: function(method) {
- function unbound() {
- invariant(
- false,
- 'React.autoBind(...): Attempted to invoke an auto-bound method that ' +
- 'was not correctly defined on the class specification.'
- );
- }
- unbound.__reactAutoBind = method;
- return unbound;
+ return method;
}
-
};
module.exports = ReactCompositeComponent;
diff --git a/src/core/ReactCurrentOwner.js b/src/core/ReactCurrentOwner.js
index 819071ff75..ad137cdf2e 100644
--- a/src/core/ReactCurrentOwner.js
+++ b/src/core/ReactCurrentOwner.js
@@ -23,6 +23,8 @@
*
* The current owner is the component who should own any components that are
* currently being constructed.
+ *
+ * The depth indicate how many composite components are above this render level.
*/
var ReactCurrentOwner = {
diff --git a/src/core/ReactDOM.js b/src/core/ReactDOM.js
index 2fe78e99a7..2a9749c9be 100644
--- a/src/core/ReactDOM.js
+++ b/src/core/ReactDOM.js
@@ -14,7 +14,7 @@
* limitations under the License.
*
* @providesModule ReactDOM
- * @typechecks
+ * @typechecks static-only
*/
"use strict";
@@ -41,15 +41,16 @@ var objMapKeyVal = require('objMapKeyVal');
*/
function createDOMComponentClass(tag, omitClose) {
var Constructor = function() {};
-
Constructor.prototype = new ReactNativeComponent(tag, omitClose);
Constructor.prototype.constructor = Constructor;
- return function(props, children) {
+ var ConvenienceConstructor = function(props, children) {
var instance = new Constructor();
instance.construct.apply(instance, arguments);
return instance;
};
+ ConvenienceConstructor.componentConstructor = Constructor;
+ return ConvenienceConstructor;
}
/**
@@ -79,8 +80,7 @@ var ReactDOM = objMapKeyVal({
embed: true,
fieldset: false,
footer: false,
- // Danger: this gets monkeypatched! See ReactDOMForm for more info.
- form: false,
+ form: false, // NOTE: Injected, see `ReactDOMForm`.
h1: false,
h2: false,
h3: false,
@@ -115,7 +115,7 @@ var ReactDOM = objMapKeyVal({
table: false,
tbody: false,
td: false,
- textarea: false,
+ textarea: false, // NOTE: Injected, see `ReactDOMTextarea`.
tfoot: false,
th: false,
thead: false,
diff --git a/src/core/ReactDOMIDOperations.js b/src/core/ReactDOMIDOperations.js
index b51ffbd019..1b110cc248 100644
--- a/src/core/ReactDOMIDOperations.js
+++ b/src/core/ReactDOMIDOperations.js
@@ -14,7 +14,7 @@
* limitations under the License.
*
* @providesModule ReactDOMIDOperations
- * @typechecks
+ * @typechecks static-only
*/
/*jslint evil: true */
@@ -24,7 +24,7 @@
var CSSPropertyOperations = require('CSSPropertyOperations');
var DOMChildrenOperations = require('DOMChildrenOperations');
var DOMPropertyOperations = require('DOMPropertyOperations');
-var ReactDOMNodeCache = require('ReactDOMNodeCache');
+var ReactID = require('ReactID');
var getTextContentAccessor = require('getTextContentAccessor');
var invariant = require('invariant');
@@ -36,7 +36,6 @@ var invariant = require('invariant');
* @private
*/
var INVALID_PROPERTY_ERRORS = {
- content: '`content` must be set using `updateTextContentByID()`.',
dangerouslySetInnerHTML:
'`dangerouslySetInnerHTML` must be set using `updateInnerHTMLByID()`.',
style: '`style` must be set using `updateStylesByID()`.'
@@ -66,7 +65,7 @@ var ReactDOMIDOperations = {
* @internal
*/
updatePropertyByID: function(id, name, value) {
- var node = ReactDOMNodeCache.getCachedNodeByID(id);
+ var node = ReactID.getNode(id);
invariant(
!INVALID_PROPERTY_ERRORS.hasOwnProperty(name),
'updatePropertyByID(...): %s',
@@ -84,7 +83,7 @@ var ReactDOMIDOperations = {
* @internal
*/
deletePropertyByID: function(id, name, value) {
- var node = ReactDOMNodeCache.getCachedNodeByID(id);
+ var node = ReactID.getNode(id);
invariant(
!INVALID_PROPERTY_ERRORS.hasOwnProperty(name),
'updatePropertyByID(...): %s',
@@ -121,7 +120,7 @@ var ReactDOMIDOperations = {
* @internal
*/
updateStylesByID: function(id, styles) {
- var node = ReactDOMNodeCache.getCachedNodeByID(id);
+ var node = ReactID.getNode(id);
CSSPropertyOperations.setValueForStyles(node, styles);
},
@@ -133,7 +132,7 @@ var ReactDOMIDOperations = {
* @internal
*/
updateInnerHTMLByID: function(id, html) {
- var node = ReactDOMNodeCache.getCachedNodeByID(id);
+ var node = ReactID.getNode(id);
// HACK: IE8- normalize whitespace in innerHTML, removing leading spaces.
// @see quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html
node.innerHTML = (html && html.__html || '').replace(/^ /g, ' ');
@@ -147,7 +146,7 @@ var ReactDOMIDOperations = {
* @internal
*/
updateTextContentByID: function(id, content) {
- var node = ReactDOMNodeCache.getCachedNodeByID(id);
+ var node = ReactID.getNode(id);
node[textContentAccessor] = content;
},
@@ -160,9 +159,9 @@ var ReactDOMIDOperations = {
* @see {Danger.dangerouslyReplaceNodeWithMarkup}
*/
dangerouslyReplaceNodeWithMarkupByID: function(id, markup) {
- var node = ReactDOMNodeCache.getCachedNodeByID(id);
+ var node = ReactID.getNode(id);
DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup(node, markup);
- ReactDOMNodeCache.purgeEntireCache();
+ ReactID.purgeEntireCache();
},
/**
@@ -170,13 +169,13 @@ var ReactDOMIDOperations = {
* Detect if any elements were removed instead of blindly purging.
*/
manageChildrenByParentID: function(parentID, domOperations) {
- var parent = ReactDOMNodeCache.getCachedNodeByID(parentID);
+ var parent = ReactID.getNode(parentID);
DOMChildrenOperations.manageChildren(parent, domOperations);
- ReactDOMNodeCache.purgeEntireCache();
+ ReactID.purgeEntireCache();
},
setTextNodeValueAtIndexByParentID: function(parentID, index, value) {
- var parent = ReactDOMNodeCache.getCachedNodeByID(parentID);
+ var parent = ReactID.getNode(parentID);
DOMChildrenOperations.setTextNodeValueAtIndex(parent, index, value);
}
diff --git a/src/core/ReactDOMNodeCache.js b/src/core/ReactDOMNodeCache.js
deleted file mode 100644
index 385ad5a27d..0000000000
--- a/src/core/ReactDOMNodeCache.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright 2013 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @providesModule ReactDOMNodeCache
- */
-
-"use strict";
-
-var ReactMount = require('ReactMount');
-
-var nodeCache = {};
-
-/**
- * DOM node cache only intended for use by React. Placed into a shared module so
- * that both read and write utilities may benefit from a shared cache.
- */
-var ReactDOMNodeCache = {
- /**
- * Releases fast id lookups (node/style cache). This implementation is
- * aggressive with purging because the bookkeeping associated with doing fine
- * grained deleted from the cache may outweight the benefits of the cache. The
- * heuristic that should be used to purge is 'any time anything is deleted'.
- * Typically this means that a large amount of content is being replaced and
- * several elements would need purging regardless. It's also a time when an
- * application is likely not in the middle of a "smooth operation" (such as
- * animating/scrolling).
- */
- purgeEntireCache: function() {
- nodeCache = {};
- return nodeCache;
- },
- getCachedNodeByID: function(id) {
- return nodeCache[id] ||
- (nodeCache[id] =
- document.getElementById(id) ||
- ReactMount.findReactRenderedDOMNodeSlow(id));
- }
-};
-
-module.exports = ReactDOMNodeCache;
diff --git a/src/core/ReactDefaultInjection.js b/src/core/ReactDefaultInjection.js
index 27fb2afba0..33577220f2 100644
--- a/src/core/ReactDefaultInjection.js
+++ b/src/core/ReactDefaultInjection.js
@@ -20,10 +20,11 @@
var ReactDOM = require('ReactDOM');
var ReactDOMForm = require('ReactDOMForm');
+var ReactDOMTextarea = require('ReactDOMTextarea');
var DefaultEventPluginOrder = require('DefaultEventPluginOrder');
var EnterLeaveEventPlugin = require('EnterLeaveEventPlugin');
-var TextChangeEventPlugin = require('TextChangeEventPlugin');
+var ChangeEventPlugin = require('ChangeEventPlugin');
var EventPluginHub = require('EventPluginHub');
var ReactInstanceHandles = require('ReactInstanceHandles');
var SimpleEventPlugin = require('SimpleEventPlugin');
@@ -42,17 +43,19 @@ function inject() {
EventPluginHub.injection.injectEventPluginsByName({
'SimpleEventPlugin': SimpleEventPlugin,
'EnterLeaveEventPlugin': EnterLeaveEventPlugin,
- 'TextChangeEventPlugin': TextChangeEventPlugin
+ 'ChangeEventPlugin': ChangeEventPlugin
});
- /*
- * This is a bit of a hack. We need to override the
](http://usepropeller.com/blog/posts/from-backbone-to-react/)Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn't automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they're all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code.
+>
+> React, on the other hand, manages the DOM and only exposes real nodes at select points in its API. The "elements" you code in React are actually objects which wrap DOM nodes, not the actual objects which get inserted into the DOM. Internally, React converts those abstractions into actual DOMElements and fills out the document accordingly. [...]
+>
+> We moved about 20 different Backbone view classes to React over the past few weeks, including the live-preview pane that you see in our little iOS demo. Most importantly, it's allowed us to put energy into making each component work great on its own, instead of spending extra cycles to ensure they function in unison. For that reason, we think React is a more scalable way to build view-intensive apps than Backbone alone, and it doesn't require you to drop-everything-and-refactor like a move to Ember or Angular would demand.
+>
+> [Read the full post...](http://usepropeller.com/blog/posts/from-backbone-to-react/)
+
+## Grunt Task for JSX
+
+[Eric Clemmons](http://ericclemmons.github.io/) wrote a task for [Grunt](http://gruntjs.com/) that applies the JSX transformation to your Javascript files. It also works with [Browserify](http://browserify.org/) if you want all your files to be concatenated and minified together.
+
+> Grunt task for compiling Facebook React's .jsx templates into .js
+>
+> ```javascript
+grunt.initConfig({
+ react: {
+ app: {
+ options: { extension: 'js' },
+ files: { 'path/to/output/dir': 'path/to/jsx/templates/dir' }
+```
+>
+> It also works great with `grunt-browserify`!
+>
+> ```javascript
+browserify: {
+ options: {
+ transform: [ require('grunt-react').browserify ]
+ },
+ app: {
+ src: 'path/to/source/main.js',
+ dest: 'path/to/target/output.js'
+```
+>
+> [Check out the project ...](https://github.com/ericclemmons/grunt-react)
+
+## Backbone/Handlebars Nested Views
+
+[Joel Burget](http://joelburget.com/) wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.
+
+> The problem here is that we're trying to maniplate a tree, but there's a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there's a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render.
+>
+> What does it take to render a collection view? In the Backbone/Handlebars view of the world you have to render the template (with stubs), render each subview which replaces a stub, and keep a reference to each subview (or anything within the view that could change in the future).
+>
+> So while our view is conceptually hierarchical, due to the fact that it has to go through a flat textual representation, we need to do a lot of extra work to reassemble that structure after rendering.
+>
+> [Read the full post...](http://joelburget.com/react/)
+
+## JSRomandie Meetup
+
+[Renault John Lecoultre](https://twitter.com/renajohn/) from [BugBuster](http://www.bugbuster.com) did a React introduction talk at a JS meetup called [JS Romandie](https://twitter.com/jsromandie) last week.
+
+
+
+## CoffeeScript integration
+
+[Vjeux](http://blog.vjeux.com/) used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript.
+
+> Multiple people asked what's the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I'm not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.
+>
+> ```javascript
+{div, h3, textarea} = React.DOM
+(div {className: 'MarkdownEditor'}, [
+ (h3 {}, 'Input'),
+ (textarea {onKeyUp: @handleKeyUp, ref: 'textarea'},
+ @state.value
+ )
+])
+```
+>
+> [Read the full post...](http://blog.vjeux.com/2013/javascript/react-coffeescript.html)
+
+## Tutorial in Plain Javascript
+
+We've seen a lot of people comparing React with various frameworks. [Ricardo Tomasi](http://ricardo.cc/) decided to re-implement the tutorial without any framework, just plain Javascript.
+
+> Facebook & Instagram launched the React framework and an accompanying tutorial. Developer Vlad Yazhbin decided to rewrite that using AngularJS. The end result is pretty neat, but if you're like me you will not actually appreciate the HTML speaking for itself and doing all the hard work. So let's see what that looks like in plain javascript.
+>
+> [Read the full post...](http://ricardo.cc/2013/06/07/react-tutorial-rewritten-in-plain-javascript.html)
diff --git a/docs/docs/api.md b/docs/docs/api.md
index 1ae5e97b37..337ae86901 100644
--- a/docs/docs/api.md
+++ b/docs/docs/api.md
@@ -3,6 +3,7 @@ id: docs-api
title: React API
layout: docs
prev: mixins.html
+next: jsx-is-not-html.html
---
## React
diff --git a/docs/docs/component-lifecycle.md b/docs/docs/component-lifecycle.md
index 1998f1806e..8861c1877f 100644
--- a/docs/docs/component-lifecycle.md
+++ b/docs/docs/component-lifecycle.md
@@ -22,7 +22,7 @@ In this one simple line, we have accomplished the following:
- The component is **mounted** into `document.body`.
**Mounting** is the process of initializing a React component by creating its
-DOM nodes and inserting the them into a supplied container node.
+DOM nodes and inserting them into a supplied container node.
At this point, the entire page consists of a single `