[RFC] Convert source module format from ES6 to CommonJS

Gruntfile.js

@@ -3,50 +3,12 @@ module.exports = function (grunt) {
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
 
-    transpile: {
-      cjs: {
-        type: 'cjs',
-        files: [{
-          expand: true,
-          cwd: '.',
-          src: ['transpiled/**/*.js'],
-          dest: 'cjs/'
-        }]
-      },
-      amd: {
-        type: 'amd',
-        anonymous: true,
-        files: [{
-          expand: true,
-          cwd: '.',
-          src: ['transpiled/**/*.js'],
-          dest: 'amd/'
-        }]
-      }
-    },
-
-    es6_module_wrap_default: {
-      cjs: {
-        options: {
-          type: 'cjs'
-        },
-        files: [{
-          expand: true,
-          cwd: 'cjs/transpiled',
-          src: ['*.js'],
-          dest: 'cjs'
-        }]
-      },
-      amd: {
-        options: {
-          type: 'amd'
-        },
-        files: [{
-          expand: true,
-          cwd: 'amd/transpiled',
-          src: ['*.js'],
-          dest: 'amd'
-        }]
+    amdwrap: {
+      src: {
+        expand: true,
+        cwd: 'transpiled/',
+        src: ['**/*.js'],
+        dest: 'amd/'
       }
     },
 
@@ -63,6 +25,12 @@ module.exports = function (grunt) {
       },
       cjs: {
         files: [
+          {
+            expand: true,
+            cwd: 'transpiled/',
+            src: ['**/*.js'],
+            dest: 'cjs/'
+          },
           {
             src: ['**/*'],
             dest: 'cjs/',
@@ -144,16 +112,22 @@ module.exports = function (grunt) {
           baseUrl: "amd",
           paths: {
             "react-bootstrap": "./index",
-            almond: "../tools/vendor/almond",
-            react: "../tools/vendor/react-0.9.0"
+            almond: "../tools/vendor/almond"
           },
+          packages: [
+            {	name: 'react', location: '../node_modules/react', main: './react' }
+          ],
           include: ["almond", "react-bootstrap"],
           exclude: ["react"],
           out: "amd/react-bootstrap.js",
+          cjsTranslate: true,
           wrap: {
             startFile: "tools/wrap.start",
             endFile: "tools/wrap.end"
           },
+          rawText: {
+            'react': 'define({});'
+          },
           optimize: "none"
         }
       }
@@ -172,8 +146,7 @@ module.exports = function (grunt) {
   });
 
   grunt.loadNpmTasks('grunt-contrib-uglify');
-  grunt.loadNpmTasks('grunt-es6-module-transpiler');
-  grunt.loadNpmTasks('grunt-es6-module-wrap-default');
+  grunt.loadNpmTasks("grunt-amd-wrap");
   grunt.loadNpmTasks('grunt-react');
   grunt.loadNpmTasks('grunt-contrib-clean');
   grunt.loadNpmTasks('grunt-contrib-watch');
@@ -187,8 +160,7 @@ module.exports = function (grunt) {
     'clean:test',
     'react:src',
     'react:test',
-    'transpile',
-    'es6_module_wrap_default',
+    'amdwrap',
     'copy',
     'browserify:test',
     'requirejs:dev',

package.json

@@ -32,11 +32,9 @@
     "karma-mocha": "~0.1.1",
     "react": "0.10.0",
     "envify": "~1.2.1",
-    "grunt-es6-module-transpiler": "~0.6.0",
     "grunt": "~0.4.2",
     "grunt-contrib-uglify": "~0.3.2",
     "grunt-contrib-clean": "~0.5.0",
-    "grunt-es6-module-wrap-default": "~0.2.0",
     "grunt-contrib-watch": "~0.5.3",
     "grunt-browserify": "~1.3.0",
     "grunt-cli": "~0.1.13",
@@ -45,6 +43,7 @@
     "grunt-shell": "~0.6.4",
     "grunt-contrib-copy": "~0.5.0",
     "react-async": "~0.8.0",
-    "react-router-component": "~0.15.0"
+    "react-router-component": "~0.15.0",
+    "grunt-amd-wrap": "^1.0.1"
   }
 }

src/Accordion.jsx

@@ -1,18 +1,16 @@
 /** @jsx React.DOM */
 
-import React      from './react-es6';
-import PanelGroup from './PanelGroup';
+var React = require('react');
+var PanelGroup = require('./PanelGroup');
 
 var Accordion = React.createClass({
-
   render: function () {
     return this.transferPropsTo(
       <PanelGroup accordion={true}>
         {this.props.children}
       </PanelGroup>
     );
   }
-
 });
 
-export default = Accordion;
+module.exports = Accordion;

src/Affix.jsx

@@ -1,8 +1,8 @@
 /** @jsx React.DOM */
 
-import React          from './react-es6';
-import AffixMixin     from './AffixMixin';
-import domUtils       from './domUtils';
+var React = require('react');
+var AffixMixin = require('./AffixMixin');
+var domUtils = require('./utils/domUtils');
 
 var Affix = React.createClass({
   statics: {
@@ -12,12 +12,13 @@ var Affix = React.createClass({
   mixins: [AffixMixin],
 
   render: function () {
+    var holderStyle = {top: this.state.affixPositionTop};
     return this.transferPropsTo(
-      <div className={this.state.affixClass} style={{top: this.state.affixPositionTop}}>
+      <div className={this.state.affixClass} style={holderStyle}>
         {this.props.children}
       </div>
     );
   }
 });
 
-export default = Affix;
+module.exports = Affix;

src/AffixMixin.js

@@ -1,8 +1,8 @@
 /* global window, document */
 
-import React         from './react-es6';
-import domUtils      from './domUtils';
-import EventListener from './react-es6/lib/EventListener';
+var React = require('react');
+var domUtils = require('./utils/domUtils');
+var EventListener = require('./utils/EventListener');
 
 var AffixMixin = {
   propTypes: {
@@ -128,4 +128,4 @@ var AffixMixin = {
   }
 };
 
-export default = AffixMixin;
+module.exports = AffixMixin;

src/Alert.jsx

@@ -1,8 +1,8 @@
 /** @jsx React.DOM */
 
-import React          from './react-es6';
-import classSet       from './react-es6/lib/cx';
-import BootstrapMixin from './BootstrapMixin';
+var React = require('react');
+var classSet = require('./utils/classSet');
+var BootstrapMixin = require('./BootstrapMixin');
 
 
 var Alert = React.createClass({
@@ -57,4 +57,4 @@ var Alert = React.createClass({
   }
 });
 
-export default = Alert;
+module.exports = Alert;

src/Badge.jsx

@@ -1,7 +1,7 @@
 /** @jsx React.DOM */
 
-import React                  from './react-es6';
-import ValidComponentChildren from './ValidComponentChildren';
+var React = require('react');
+var ValidComponentChildren = require('./utils/ValidComponentChildren');
 
 var Badge = React.createClass({
   render: function () {
@@ -13,4 +13,4 @@ var Badge = React.createClass({
   }
 });
 
-export default = Badge;
+module.exports = Badge;

src/BootstrapMixin.js

@@ -1,5 +1,5 @@
-import React     from './react-es6';
-import constants from './constants';
+var React = require('react');
+var constants = require('./constants');
 
 var BootstrapMixin = {
   propTypes: {
@@ -32,4 +32,4 @@ var BootstrapMixin = {
   }
 };
 
-export default = BootstrapMixin;
+module.exports = BootstrapMixin;

src/Button.jsx

@@ -1,8 +1,8 @@
 /** @jsx React.DOM */
 
-import React          from './react-es6';
-import classSet       from './react-es6/lib/cx';
-import BootstrapMixin from './BootstrapMixin';
+var React = require('react');
+var classSet = require('./utils/classSet');
+var BootstrapMixin = require('./BootstrapMixin');
 
 var Button = React.createClass({
   mixins: [BootstrapMixin],
@@ -76,4 +76,4 @@ var Button = React.createClass({
   }
 });
 
-export default = Button;
+module.exports = Button;

src/ButtonGroup.jsx

@@ -1,9 +1,9 @@
 /** @jsx React.DOM */
 
-import React          from './react-es6';
-import classSet       from './react-es6/lib/cx';
-import BootstrapMixin from './BootstrapMixin';
-import Button         from './Button';
+var React = require('react');
+var classSet = require('./utils/classSet');
+var BootstrapMixin = require('./BootstrapMixin');
+var Button = require('./Button');
 
 var ButtonGroup = React.createClass({
   mixins: [BootstrapMixin],
@@ -34,4 +34,4 @@ var ButtonGroup = React.createClass({
   }
 });
 
-export default = ButtonGroup;
+module.exports = ButtonGroup;

src/ButtonToolbar.jsx

@@ -1,9 +1,9 @@
 /** @jsx React.DOM */
 
-import React          from './react-es6';
-import classSet       from './react-es6/lib/cx';
-import BootstrapMixin from './BootstrapMixin';
-import Button         from './Button';
+var React = require('react');
+var classSet = require('./utils/classSet');
+var BootstrapMixin = require('./BootstrapMixin');
+var Button = require('./Button');
 
 var ButtonGroup = React.createClass({
   mixins: [BootstrapMixin],
@@ -27,4 +27,4 @@ var ButtonGroup = React.createClass({
   }
 });
 
-export default = ButtonGroup;
+module.exports = ButtonGroup;

src/Carousel.jsx

@@ -1,10 +1,10 @@
 /** @jsx React.DOM */
 
-import React                  from './react-es6';
-import classSet               from './react-es6/lib/cx';
-import BootstrapMixin         from './BootstrapMixin';
-import utils                  from './utils';
-import ValidComponentChildren from './ValidComponentChildren';
+var React = require('react');
+var classSet = require('./utils/classSet');
+var cloneWithProps = require('./utils/cloneWithProps');
+var BootstrapMixin = require('./BootstrapMixin');
+var ValidComponentChildren = require('./utils/ValidComponentChildren');
 
 var Carousel = React.createClass({
   mixins: [BootstrapMixin],
@@ -244,7 +244,7 @@ var Carousel = React.createClass({
     var isPreviousActive = this.state.previousActiveIndex != null &&
             this.state.previousActiveIndex === index && this.props.slide;
 
-    return utils.cloneWithProps(
+    return cloneWithProps(
         child,
         {
           active: isActive,
@@ -287,4 +287,4 @@ var Carousel = React.createClass({
   }
 });
 
-export default = Carousel;
+module.exports = Carousel;

src/CarouselItem.jsx

@@ -1,8 +1,8 @@
 /** @jsx React.DOM */
 
-import React                 from './react-es6';
-import classSet              from './react-es6/lib/cx';
-import ReactTransitionEvents from './react-es6/lib/ReactTransitionEvents';
+var React = require('react');
+var classSet = require('./utils/classSet');
+var TransitionEvents = require('./utils/TransitionEvents');
 
 var CarouselItem = React.createClass({
   propTypes: {
@@ -40,7 +40,7 @@ var CarouselItem = React.createClass({
 
   componentDidUpdate: function (prevProps) {
     if (!this.props.active && prevProps.active) {
-      ReactTransitionEvents.addEndEventListener(
+      TransitionEvents.addEndEventListener(
         this.getDOMNode(),
         this.handleAnimateOutEnd
       );
@@ -91,4 +91,4 @@ var CarouselItem = React.createClass({
   }
 });
 
-export default = CarouselItem;
+module.exports = CarouselItem;