[added] Build step for compiling to CommonJS modules

.babelrc

@@ -1,3 +1,21 @@
 {
-  "presets": ["es2015", "stage-2", "react"]
+  "presets": ["react"],
+  "env": {
+    "commonjs": {
+      "plugins": [
+        "transform-class-properties", 
+        "transform-object-rest-spread"
+      ],
+      "presets": ["env"]
+    },
+    "es": {
+      "plugins": [
+        "transform-class-properties", 
+        "transform-object-rest-spread"
+      ],
+      "presets": [
+        ["env", { "modules": false }]
+      ]
+    }
+  }
 }

.codeclimate.yml

@@ -9,7 +9,7 @@ engines:
         javascript:
 ratings:
   paths:
-    - lib/**
+    - src/**
     - "**.js"
 exclude_paths:
   - "specs/"

.gitignore

@@ -8,3 +8,7 @@ _book
 *.diff
 examples/__build__
 coverage
+
+## Built folders
+es
+lib

examples/basic/app.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import Modal from '../../lib/index';
+import Modal from '../../src/index';
 
 const appElement = document.getElementById('example');
 

package.json

@@ -3,6 +3,8 @@
   "version": "2.0.0",
   "description": "Accessible modal dialog component for React.JS",
   "main": "./lib/index.js",
+  "module": "./es/index.js",
+  "jsnext:main": "./es/index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/reactjs/react-modal.git"
@@ -14,20 +16,26 @@
   },
   "scripts": {
     "start": "./node_modules/.bin/webpack-dev-server --inline --host 127.0.0.1 --content-base examples/",
-    "test": "cross-env NODE_ENV=test karma start",
-    "lint": "eslint lib/"
+    "test": "cross-env BABEL_ENV=commonjs NODE_ENV=test karma start",
+    "lint": "eslint lib/",
+    "clean": "rimraf lib es",
+    "build:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
+    "build:es": "cross-env BABEL_ENV=es babel src --out-dir es",
+    "build": "npm run clean && npm run build:commonjs && npm run build:es"
   },
   "authors": [
     "Ryan Florence"
   ],
   "license": "MIT",
   "devDependencies": {
-    "babel-core": "^6.7.4",
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.25.0",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.4",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-preset-stage-2": "^6.24.1",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-preset-env": "^1.5.2",
+    "babel-preset-react": "^6.24.1",
     "codeclimate-test-reporter": "^0.4.0",
     "coveralls": "^2.13.1",
     "cross-env": "^5.0.1",
@@ -55,14 +63,13 @@
     "react-addons-test-utils": "^15.0.0",
     "react-dom": "^15.0.0",
     "rf-release": "0.4.0",
-    "rimraf": "^2.5.4",
+    "rimraf": "^2.6.1",
     "sinon": "next",
     "uglify-js": "2.4.24",
     "webpack": "^1.12.14",
     "webpack-dev-server": "1.11.0"
   },
   "dependencies": {
-    "create-react-class": "^15.5.2",
     "element-class": "^0.2.0",
     "exenv": "1.2.0",
     "lodash.assign": "^4.2.0",

specs/Modal.events.spec.js

@@ -4,7 +4,7 @@ import expect from 'expect';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import TestUtils from 'react-addons-test-utils';
-import Modal from '../lib/components/Modal';
+import Modal from '../src/components/Modal';
 import {
   moverlay, mcontent,
   clickAt, mouseDownAt, mouseUpAt, escKeyDown, tabKeyDown,

specs/Modal.spec.js

@@ -4,8 +4,8 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import TestUtils from 'react-addons-test-utils';
 import createReactClass from 'create-react-class';
-import Modal from '../lib/components/Modal';
-import * as ariaAppHider from '../lib/helpers/ariaAppHider';
+import Modal from '../src/components/Modal';
+import * as ariaAppHider from '../src/helpers/ariaAppHider';
 import {
   isBodyWithReactModalOpenClass,
   contentAttribute,

specs/Modal.style.spec.js

@@ -3,8 +3,8 @@ import expect from 'expect';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import TestUtils from 'react-addons-test-utils';
-import Modal from '../lib/components/Modal';
-import * as ariaAppHider from '../lib/helpers/ariaAppHider';
+import Modal from '../src/components/Modal';
+import * as ariaAppHider from '../src/helpers/ariaAppHider';
 import {
   mcontent, moverlay,
   renderModal, emptyDOM

specs/helper.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Modal from '../lib/components/Modal';
+import Modal from '../src/components/Modal';
 import TestUtils from 'react-addons-test-utils';
 
 const divStack = [];

specs/spec_index.js

@@ -8,7 +8,7 @@ testsContext.keys().forEach((path) => {
   }
 });
 
-const componentsContext = require.context('../lib', true, /\.js$/);
+const componentsContext = require.context('../src', true, /\.js$/);
 componentsContext.keys().forEach((path) => {
   try {
     componentsContext(path);

src/index.js

@@ -0,0 +1,3 @@
+import Modal from './components/Modal';
+
+export default Modal;

webpack.dist.config.js

@@ -17,8 +17,8 @@ var reactDOMExternal = {
 module.exports = {
 
   entry: {
-    'react-modal': './lib/index.js',
-    'react-modal.min': './lib/index.js'
+    'react-modal': './src/index.js',
+    'react-modal.min': './src/index.js'
   },
 
   externals: {

webpack.test.config.js

@@ -10,7 +10,7 @@ if (process.env.CONTINUOUS_INTEGRATION || process.env.COVERAGE) {
   commonConfig.module.postLoaders = commonConfig.module.postLoaders || [];
   commonConfig.module.postLoaders.push({
     test: /\.js$/,
-    include: path.resolve('lib'),
+    include: path.resolve('src'),
     loader: 'istanbul-instrumenter'
   });
 }