Use Babel 6. Drop old disabled handling. (#164)

Author: taion

.babelrc

@@ -1,3 +1,4 @@
 {
-  "stage": 1
+  "presets": ["es2015-loose", "stage-0", "react"],
+  "plugins": ["add-module-exports"]
 }

.eslintrc

@@ -1,8 +1,4 @@
 {
   "extends": "airbnb",
-  "parser": "babel-eslint",
-  "rules": {
-    "comma-dangle": 0,
-    "eqeqeq": [2, "allow-null"]
-  }
+  "parser": "babel-eslint"
 }

README.md

@@ -6,17 +6,15 @@ Integration between [React Router](https://github.com/rackt/react-router) and [R
 
 ## Usage
 
-Wrap your React-Bootstrap element in a `LinkContainer` to make it behave like a React Router `Link`:
+Wrap your React-Bootstrap element in a `<LinkContainer>` to make it behave like a React Router `<Link>`:
 
 ```js
 <LinkContainer to={{ pathname: '/foo', query: { bar: 'baz' } }}>
   <Button>Foo</Button>
 </LinkContainer>
 ```
 
-To disable the element and the link, set the `disabled` prop on the `LinkContainer`. For the equivalent of `IndexLink`, use `IndexLinkContainer`.
-
-As with React Router's `Link`, returning `false` from an `onClick` handler on `LinkContainer` will prevent the transition. However, this behavior will not apply to any `onClick` on the child, which instead will have to call `event.preventDefault()` explicitly to prevent the transition.
+For the equivalent of `<IndexLink>`, use `<IndexLinkContainer>`.
 
 ## Installation
 

bower.template.json

@@ -12,7 +12,7 @@
   "dependencies": <%= JSON.stringify(pkg.peerDependencies) %>,
   "ignore": [
     "**/.*",
-    "tests",
+    "test",
     "src",
     "CONTRIBUTING.md",
     "karma.conf.js",

karma.conf.babel.js

@@ -0,0 +1,53 @@
+export default config => {
+  config.set({
+    basePath: '',
+
+    frameworks: [
+      'mocha',
+      'sinon-chai',
+    ],
+
+    files: [
+      './test/index.js',
+    ],
+
+    preprocessors: {
+      './test/index.js': ['webpack', 'sourcemap'],
+    },
+
+    webpack: {
+      output: {
+        pathinfo: true,
+      },
+      module: {
+        loaders: [
+          { test: /\.js/, loader: 'babel', exclude: /node_modules/ },
+        ],
+      },
+      devtool: 'inline-source-map',
+    },
+
+    webpackMiddleware: {
+      noInfo: true,
+    },
+
+    reporters: ['mocha'],
+
+    port: 9876,
+
+    colors: true,
+
+    logLevel: config.LOG_INFO,
+
+    autoWatch: true,
+
+    browsers: ['PhantomJS'],
+
+    captureTimeout: 60000,
+    browserDisconnectTimeout: 7000,
+    browserDisconnectTolerance: 1,
+    browserDisconnectNoActivityTimeout: 60000,
+
+    singleRun: false,
+  });
+};

karma.conf.js

@@ -1,47 +1,2 @@
-require('babel/register');
-var webpackConfig = require('./webpack.test.config.babel.js');
-delete webpackConfig.entry;
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-
-    frameworks: [
-      'mocha',
-      'sinon-chai'
-    ],
-
-    files: [
-      './tests/index.js'
-    ],
-
-    preprocessors: {
-      './tests/index.js': ['webpack', 'sourcemap']
-    },
-
-    webpack: webpackConfig,
-
-    webpackMiddleware: {
-      noInfo: true
-    },
-
-    reporters: ['mocha'],
-
-    port: 9876,
-
-    colors: true,
-
-    logLevel: config.LOG_INFO,
-
-    autoWatch: true,
-
-    browsers: ['PhantomJS'],
-
-    captureTimeout: 60000,
-    browserDisconnectTimeout: 7000,
-    browserDisconnectTolerance: 1,
-    browserDisconnectNoActivityTimeout: 60000,
-
-    singleRun: false
-  });
-};
+require('babel-register');
+module.exports = require('./karma.conf.babel.js');

package.json

@@ -5,11 +5,11 @@
   "main": "./lib/index.js",
   "scripts": {
     "prepublish": "npm run build",
-    "build": "rimraf lib && babel src --out-dir=lib && webpack && webpack -p && npm run bower-prepare",
+    "build": "rimraf lib && babel src -d lib && webpack && webpack -p && npm run bower-prepare",
     "test": "npm run lint && karma start --single-run",
     "tdd": "karma start",
     "visual-test": "open http://localhost:8080/ && webpack-dev-server --config webpack.visual.config.babel.js",
-    "lint": "eslint *.babel.js src tests",
+    "lint": "eslint *.js src test",
     "bower-prepare": "babel-node scripts/bower-prepare.js",
     "release": "release"
   },
@@ -36,52 +36,60 @@
     "react-router": ">=2.0.0"
   },
   "devDependencies": {
-    "babel": "^5.8.38",
-    "babel-core": "^5.8.38",
-    "babel-eslint": "^4.1.8",
-    "babel-loader": "^5.4.0",
+    "babel-cli": "^6.5.2",
+    "babel-core": "^6.7.7",
+    "babel-eslint": "^6.0.4",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-add-module-exports": "^0.1.3",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-es2015-loose": "^7.0.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "babel-register": "^6.7.2",
     "bootstrap": "^3.3.6",
     "chai": "^3.5.0",
     "colors": "^1.1.2",
     "css-loader": "^0.23.1",
-    "es5-shim": "^4.5.7",
-    "eslint": "^1.10.3",
-    "eslint-config-airbnb": "^2.1.1",
+    "es5-shim": "^4.5.8",
+    "eslint": "^2.8.0",
+    "eslint-config-airbnb": "^8.0.0",
     "eslint-plugin-babel": "^3.2.0",
-    "eslint-plugin-mocha": "^1.1.0",
-    "eslint-plugin-react": "^3.16.1",
+    "eslint-plugin-import": "^1.6.0",
+    "eslint-plugin-jsx-a11y": "^1.0.3",
+    "eslint-plugin-mocha": "^2.2.0",
+    "eslint-plugin-react": "^5.0.1",
     "file-loader": "^0.8.5",
-    "history": "^2.0.1",
-    "html-webpack-plugin": "^2.15.0",
+    "history": "^2.1.0",
+    "html-webpack-plugin": "^2.16.0",
     "karma": "^0.13.22",
     "karma-cli": "^0.1.2",
     "karma-mocha": "^0.2.2",
-    "karma-mocha-reporter": "^2.0.0",
+    "karma-mocha-reporter": "^2.0.2",
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-sinon-chai": "^1.2.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.7.0",
     "less": "^2.6.1",
     "less-loader": "^2.2.3",
-    "lodash": "^3.10.1",
+    "lodash": "^4.11.1",
     "lolex": "^1.4.0",
     "mocha": "^2.4.5",
     "node-libs-browser": "^1.0.0",
     "phantomjs-prebuilt": "^2.1.7",
-    "react": "^15.0.0",
-    "react-bootstrap": "^0.28.5",
-    "react-dom": "^15.0.0",
-    "react-router": "^2.0.1",
+    "react": "^15.0.1",
+    "react-bootstrap": "^0.29.2",
+    "react-dom": "^15.0.1",
+    "react-router": "^2.3.0",
     "release-script": "^1.0.2",
     "rimraf": "^2.5.2",
-    "shelljs": "^0.6.0",
+    "shelljs": "^0.7.0",
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
-    "webpack": "^1.12.14",
+    "webpack": "^1.13.0",
     "webpack-dev-server": "^1.14.1",
-    "yargs": "^4.4.0"
+    "yargs": "^4.6.0"
   },
   "files": [
     "lib"

src/IndexLinkContainer.js

@@ -2,10 +2,13 @@ import React from 'react';
 
 import LinkContainer from './LinkContainer';
 
+// Don't use a stateless function, to allow users to set a ref.
+/* eslint-disable react/prefer-stateless-function */
 export default class IndexLinkContainer extends React.Component {
   render() {
     return (
       <LinkContainer {...this.props} onlyActiveOnIndex />
     );
   }
 }
+/* eslint-enable react/prefer-stateless-function */

src/LinkContainer.js

@@ -3,25 +3,33 @@
 import React from 'react';
 import Link from 'react-router/lib/Link';
 
-export default class LinkContainer extends React.Component {
-  constructor(props, context) {
-    super(props, context);
+const propTypes = {
+  onlyActiveOnIndex: React.PropTypes.bool.isRequired,
+  to: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.object,
+  ]).isRequired,
+  onClick: React.PropTypes.func,
+  active: React.PropTypes.bool,
+  children: React.PropTypes.node.isRequired,
+};
 
-    this.onClick = this.onClick.bind(this);
-  }
+const contextTypes = {
+  router: React.PropTypes.object,
+};
 
-  onClick(event) {
-    if (this.props.disabled) {
-      event.preventDefault();
-      return;
-    }
+const defaultProps = {
+  onlyActiveOnIndex: false,
+};
 
+class LinkContainer extends React.Component {
+  onClick = (event) => {
     if (this.props.children.props.onClick) {
       this.props.children.props.onClick(event);
     }
 
     Link.prototype.handleClick.call(this, event);
-  }
+  };
 
   render() {
     const { router } = this.context;
@@ -42,23 +50,8 @@ export default class LinkContainer extends React.Component {
   }
 }
 
-LinkContainer.propTypes = {
-  onlyActiveOnIndex: React.PropTypes.bool.isRequired,
-  to: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.object,
-  ]).isRequired,
-  onClick: React.PropTypes.func,
-  active: React.PropTypes.bool,
-  disabled: React.PropTypes.bool.isRequired,
-  children: React.PropTypes.node.isRequired
-};
-
-LinkContainer.contextTypes = {
-  router: React.PropTypes.object
-};
+LinkContainer.propTypes = propTypes;
+LinkContainer.contextTypes = contextTypes;
+LinkContainer.defaultProps = defaultProps;
 
-LinkContainer.defaultProps = {
-  onlyActiveOnIndex: false,
-  disabled: false
-};
+export default LinkContainer;

tests/.eslintrc renamed to test/.eslintrc

@@ -11,7 +11,7 @@ describe('IndexLinkContainer', () => {
     'Button',
     'NavItem',
     'MenuItem',
-    'ListGroupItem'
+    'ListGroupItem',
   ].forEach(name => {
     describe(name, () => {
       const Component = ReactBootstrap[name];