facebook · zpao · Oct 8, 2013 · Sep 24, 2013 · Sep 27, 2013 · Sep 27, 2013
diff --git a/.travis.yml b/.travis.yml
@@ -4,6 +4,7 @@ node_js:
 - '0.10'
 after_script:
 - curl -F "react=@build/react.js" -F "react.min=@build/react.min.js" -F "transformer=@build/JSXTransformer.js"
+  -F "react-with-addons=@build/react-with-addons.js" -F "react-with-addons.min=@build/react-with-addons.min.js"
   -F "commit=$TRAVIS_COMMIT" -F "date=`git log --format='%ct' -1`" -F "pull_request=$TRAVIS_PULL_REQUEST"
   -F "token=$SECRET_TOKEN" -F "branch=$TRAVIS_BRANCH" $SERVER
 env:

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -68,9 +68,10 @@ module.exports = function(grunt) {
   });
 
   grunt.registerTask('build:basic', ['jsx:debug', 'version-check', 'browserify:basic']);
+  grunt.registerTask('build:addons', ['jsx:debug', 'browserify:addons']);
   grunt.registerTask('build:transformer', ['jsx:debug', 'browserify:transformer']);
-  grunt.registerTask('build:transitions', ['jsx:debug', 'browserify:transitions']);
   grunt.registerTask('build:min', ['jsx:release', 'version-check', 'browserify:min']);
+  grunt.registerTask('build:addons-min', ['jsx:debug', 'browserify:addonsMin']);
   grunt.registerTask('build:test', [
     'jsx:jasmine',
     'jsx:test',
@@ -89,9 +90,10 @@ module.exports = function(grunt) {
     'version-check',
     'browserify:basic',
     'browserify:transformer',
-    'browserify:transitions',
+    'browserify:addons',
     'jsx:release',
     'browserify:min',
+    'browserify:addonsMin',
     'copy:react_docs',
     'compare_size'
   ]);

diff --git a/examples/transitions/index.html b/examples/transitions/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
+    <title>Basic Example with JSX</title>
+    <link rel="stylesheet" href="../shared/css/base.css" />
+    <link rel="stylesheet" href="transition.css" />
+  </head>
+  <body>
+    <h1>Example with Transitions</h1>
+    <div id="container">
+      <p>
+        To install React, follow the instructions on
+        <a href="http://www.github.com/facebook/react/">GitHub</a>.
+      </p>
+      <p>
+        If you can see this, React is not working right.
+        If you checked out the source from GitHub make sure to run <code>grunt</code>.
+      </p>
+    </div>
+    <h4>Example Details</h4>
+    <ul>
+      <li>
+        This is built with
+        <a href="https://github.com/substack/node-browserify">browserify</a>.
+      </li>
+      <li>
+        This is written with JSX and transformed in the browser.
+      </li>
+    </ul>
+    <p>
+    </p>
+    <p>
+      Learn more at
+      <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
+    </p>
+    <script src="../../build/react-with-addons.js"></script>
+    <script src="../../build/JSXTransformer.js"></script>
+    <script type="text/jsx">
+      /**
+       * @jsx React.DOM
+       */
+      var TransitionGroup = React.addons.TransitionGroup;
+      var INTERVAL = 2000;
+
+      var AnimateDemo = React.createClass({
+        getInitialState: function() {
+          return {start: 0};
+        },
+
+        componentDidMount: function() {
+          this.interval = setInterval(this.tick, INTERVAL);
+        },
+
+        componentWillUnmount: function() {
+          clearInterval(this.interval);
+        },
+
+        tick: function() {
+          this.setState({start: this.state.start + 1});
+        },
+
+        render: function() {
+          var children = [];
+          var pos = 0;
+          var colors = ['red', 'gray', 'blue'];
+          for (var i = this.state.start; i < this.state.start + 3; i++) {
+            var style = {
+              left: pos * 128,
+              background: colors[i % 3]
+            };
+            pos++;
+            children.push(<div key={i} className="animateItem" style={style}>{i}</div>);
+          }
+          return (
+            <TransitionGroup
+              className="animateExample"
+              transitionName="example">
+              {children}
+            </TransitionGroup>
+          );
+        }
+      });
+
+      React.renderComponent(
+        <AnimateDemo />,
+        document.getElementById('container')
+      );
+    </script>
+  </body>
+</html>
diff --git a/examples/transitions/transition.css b/examples/transitions/transition.css
@@ -0,0 +1,44 @@
+.example-enter,
+.example-leave {
+  -webkit-transition: all .25s;
+  transition: all .25s;
+}
+
+.example-enter,
+.example-leave.example-leave-active {
+  opacity: 0.01;
+}
+
+.example-leave.example-leave-active {
+  margin-left: -128px;
+}
+
+.example-enter {
+  margin-left: 128px;
+}
+
+.example-enter.example-enter-active,
+.example-leave {
+  margin-left: 0;
+  opacity: 0.99;
+}
+
+.animateExample {
+  display: block;
+  height: 128px;
+  position: relative;
+  width: 384px;
+}
+
+.animateItem {
+  color: white;
+  font-size: 36px;
+  font-weight: bold;
+  height: 128px;
+  line-height: 128px;
+  position: absolute;
+  text-align: center;
+  -webkit-transition: all .25s; /* TODO: make this a move animation */
+  transition: all .25s; /* TODO: make this a move animation */
+  width: 128px;
+}
diff --git a/grunt/config/browserify.js b/grunt/config/browserify.js
@@ -37,14 +37,16 @@ function minify(src) {
 // TODO: move this out to another build step maybe.
 function bannerify(src) {
   var version = grunt.config.data.pkg.version;
-  return LICENSE_TEMPLATE.replace('@PACKAGE@', this.data.standalone)
+  var packageName = this.data.packageName || this.data.standalone;
+  return LICENSE_TEMPLATE.replace('@PACKAGE@', packageName)
                          .replace('@VERSION@', version) +
          '\n' + src;
 }
 
 function simpleBannerify(src) {
   var version = grunt.config.data.pkg.version;
-  return SIMPLE_TEMPLATE.replace('@PACKAGE@', this.data.standalone)
+  var packageName = this.data.packageName || this.data.standalone;
+  return SIMPLE_TEMPLATE.replace('@PACKAGE@', packageName)
                         .replace('@VERSION@', version) +
          '\n' + src;
 }
@@ -76,19 +78,27 @@ var transformer = {
   after: [simpleBannerify]
 };
 
-var transitions = {
+var addons = {
   entries: [
-    './build/modules/ReactTransitionGroup.js'
+    './build/modules/ReactWithAddons.js'
   ],
-  outfile: './build/react-transitiongroup.js',
+  outfile: './build/react-with-addons.js',
   debug: false,
-  standalone: 'ReactTransitionGroup',
+  standalone: 'React',
+  packageName: 'React (with addons)',
   after: [simpleBannerify]
 };
 
+var addonsMin = grunt.util._.merge({}, addons, {
+  outfile: './build/react-with-addons.min.js',
+  debug: false,
+  after: [minify, bannerify]
+});
+
 module.exports = {
   basic: basic,
   min: min,
   transformer: transformer,
-  transitions: transitions
+  addons: addons,
+  addonsMin: addonsMin
 };
diff --git a/grunt/config/jsx/jsx.js b/grunt/config/jsx/jsx.js
@@ -4,7 +4,7 @@ var grunt = require('grunt');
 
 var rootIDs = [
   "React",
-  "ReactTransitionGroup"
+  "ReactWithAddons"
 ];
 
 var getDebugConfig = function() {

diff --git a/grunt/tasks/release.js b/grunt/tasks/release.js
@@ -7,7 +7,10 @@ var grunt = require('grunt');
 
 var BOWER_PATH = '../react-bower/';
 var BOWER_GLOB = [BOWER_PATH + '*'];
-var BOWER_FILES = ['react.js', 'react.min.js', 'JSXTransformer.js'];
+var BOWER_FILES = [
+  'react.js', 'react.min.js', 'JSXTransformer.js',
+  'react-with-addons.js', 'react-with-addons.min.js'
+];
 var GH_PAGES_PATH = '../react-gh-pages/';
 var GH_PAGES_GLOB = [GH_PAGES_PATH + '*'];
 

diff --git a/react-source.gemspec b/react-source.gemspec
@@ -17,6 +17,8 @@ gemspec = Gem::Specification.new do |s|
   s.files = Dir[
     'build/react.js',
     'build/react.min.js',
+    'build/react-with-addons.js',
+    'build/react-with-addons.min.js',
     'build/JSXTransformer.js',
     'lib/react/source.rb'
   ]

diff --git a/src/ReactWithAddons.js b/src/ReactWithAddons.js
@@ -0,0 +1,41 @@
+/**
+ * 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 ReactWithAddons
+ */
+
+/**
+ * This module exists purely in the open source project, and is meant as a way
+ * to create a separate standalone build of React. This build has "addons", or
+ * functionality we've built and think might be useful but doesn't have a good
+ * place to live inside React core.
+ */
+
+"use strict";
+
+var LinkedStateMixin = require('LinkedStateMixin');
+var React = require('React');
+var ReactTransitionGroup = require('ReactTransitionGroup');
+
+var cx = require('cx');
+
+React.addons = {
+  classSet: cx,
+  LinkedStateMixin: LinkedStateMixin,
+  TransitionGroup: ReactTransitionGroup
+};
+
+module.exports = React;
+