From 2e6092b2171cf8f7ecdc2993a4f6f5e6ebc7becb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Tue, 24 Sep 2013 12:55:20 -0700 Subject: [PATCH 1/5] react-with-addons build This creates a new standalone build which should have everything the default build has, plus a little extra. This is not a sustainable long term solution (we shouldn't make people choose like this) but it fixes the problem we have in the short term. This also removes the terrible react-transitions build. This is better anway. Fixes #369 --- Gruntfile.js | 6 ++++-- grunt/config/browserify.js | 24 +++++++++++++++------- grunt/config/jsx/jsx.js | 2 +- src/ReactWithAddons.js | 41 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 63 insertions(+), 10 deletions(-) create mode 100644 src/ReactWithAddons.js diff --git a/Gruntfile.js b/Gruntfile.js index 6d9ce5bb3b6..d5c201ad381 100644 --- 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/grunt/config/browserify.js b/grunt/config/browserify.js index 71207c0ea1b..953251d4c74 100644 --- 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 index 02c220b5da1..a23ce02732b 100644 --- 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/src/ReactWithAddons.js b/src/ReactWithAddons.js new file mode 100644 index 00000000000..3b92d59f813 --- /dev/null +++ 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; + From 042a2723fff6ec40c41081604445ee14034a01ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Fri, 27 Sep 2013 14:38:05 -0700 Subject: [PATCH 2/5] Make sure addons builds are sent to build server --- .travis.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.travis.yml b/.travis.yml index 252a18d6093..1a40ce3cf6c 100644 --- 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: From a15113316195257382ec22cecf43bf116e98fd4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Fri, 27 Sep 2013 14:59:14 -0700 Subject: [PATCH 3/5] Make sure react-with-addons ends up in bower --- grunt/tasks/release.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/grunt/tasks/release.js b/grunt/tasks/release.js index d377ee41c18..2b4035dcb2c 100644 --- 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 + '*']; From de9e94de5f807f1ce1c03f3b67618452b3a6287a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Fri, 27 Sep 2013 14:59:42 -0700 Subject: [PATCH 4/5] Make sure react-with-addons ends up in react-source gem --- react-source.gemspec | 2 ++ 1 file changed, 2 insertions(+) diff --git a/react-source.gemspec b/react-source.gemspec index ead889f5bba..acfdc53f01f 100644 --- 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' ] From 7da874d835519bf1dfa9ca04f4e31bac9b827d5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Wed, 2 Oct 2013 11:41:35 -0700 Subject: [PATCH 5/5] Add TransitionGroup example --- examples/transitions/index.html | 91 +++++++++++++++++++++++++++++ examples/transitions/transition.css | 44 ++++++++++++++ 2 files changed, 135 insertions(+) create mode 100644 examples/transitions/index.html create mode 100644 examples/transitions/transition.css diff --git a/examples/transitions/index.html b/examples/transitions/index.html new file mode 100644 index 00000000000..63b23228545 --- /dev/null +++ b/examples/transitions/index.html @@ -0,0 +1,91 @@ + + + + + Basic Example with JSX + + + + +

Example with Transitions

+
+

+ To install React, follow the instructions on + GitHub. +

+

+ If you can see this, React is not working right. + If you checked out the source from GitHub make sure to run grunt. +

+
+

Example Details

+
    +
  • + This is built with + browserify. +
    • +
  • + This is written with JSX and transformed in the browser. +
    • +
+

+

+

+ Learn more at + facebook.github.io/react. +

+ + + + + diff --git a/examples/transitions/transition.css b/examples/transitions/transition.css new file mode 100644 index 00000000000..eeaead7c4cf --- /dev/null +++ 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; +}