use airbnb eslint config

Author: troybetz

.eslintrc

@@ -1,15 +1,3 @@
 {
-  "parser": "babel-eslint",
-  "env": {
-    "node": true,
-    "browser": true
-  },
-  "rules": {
-    "strict": false,
-    "no-underscore-dangle": false,
-    "quotes": [2, "single"],
-    "no-use-before-define": false,
-    "new-cap": false,
-    "no-trailing-spaces": false
-  }
+  "extends": "eslint-config-airbnb"
 }

package.json

@@ -28,6 +28,8 @@
     "babel-eslint": "^4.1.3",
     "babel-jest": "^5.3.0",
     "eslint": "^1.7.3",
+    "eslint-config-airbnb": "^0.1.0",
+    "eslint-plugin-react": "^3.6.3",
     "jest-cli": "^0.6.1",
     "react": "^0.14.0",
     "react-addons-test-utils": "^0.14.0",

src/SoundCloud.js

@@ -27,6 +27,10 @@ class SoundCloud extends React.Component {
     this._internalWidget = null;
   }
 
+  componentDidMount() {
+    this._createWidget();
+  }
+
   /**
    * @param {Object} nextProps
    * @returns {Boolean}
@@ -36,10 +40,6 @@ class SoundCloud extends React.Component {
     return nextProps.url !== this.props.url;
   }
 
-  componentDidMount() {
-    this._createWidget();
-  }
-
   componentDidUpdate() {
     this._reloadWidget();
   }
@@ -48,22 +48,6 @@ class SoundCloud extends React.Component {
     this._unbindEvents();
   }
 
-  /**
-   * @returns {Object}
-   */
-
-  render() {
-    return (
-      <iframe id={this.props.id}
-              width='100%'
-              height={this.props.height || (this.props.opts.visual ? '450' : '166')}
-              scrolling='no'
-              frameBorder='no'
-              src='https://w.soundcloud.com/player/?url='
-      />
-    );
-  }
-
   /**
    * Called on the initial render, this uses the rendered iframe
    * as a base for creating a new `_internalWidget`.
@@ -120,6 +104,22 @@ class SoundCloud extends React.Component {
     this._internalWidget.unbind(window.SC.Widget.Events.PAUSE);
     this._internalWidget.unbind(window.SC.Widget.Events.FINISH);
   }
+
+  /**
+   * @returns {Object}
+   */
+
+  render() {
+    return (
+      <iframe id={this.props.id}
+              width="100%"
+              height={this.props.height || (this.props.opts.visual ? '450' : '166')}
+              scrolling="no"
+              frameBorder="no"
+              src="https://w.soundcloud.com/player/?url="
+      />
+    );
+  }
 }
 
 SoundCloud.propTypes = {
@@ -130,21 +130,26 @@ SoundCloud.propTypes = {
   // custom ID for widget iframe element
   id: React.PropTypes.string,
 
+  height: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.number,
+  ]),
+
   // widget parameters for appearance and auto play.
   opts: React.PropTypes.objectOf(React.PropTypes.bool),
 
   // event subscriptions
   onPlay: React.PropTypes.func,
   onPause: React.PropTypes.func,
-  onEnd: React.PropTypes.func
+  onEnd: React.PropTypes.func,
 };
 
 SoundCloud.defaultProps = {
   id: 'react-sc-widget',
   opts: {},
   onPlay: () => {},
   onPause: () => {},
-  onEnd: () => {}
+  onEnd: () => {},
 };
 
 /**

src/__tests__/SoundCloud-test.js

@@ -10,7 +10,6 @@ let widgetMock;
 
 describe('SoundCloud Component', () => {
   beforeEach(() => {
-
     /**
      * Mock out SoundCloud widget API
      */
@@ -20,58 +19,58 @@ describe('SoundCloud Component', () => {
         Events: {
           PLAY: 'play',
           PAUSE: 'pause',
-          FINISH: 'finish'
-        }
-      }
+          FINISH: 'finish',
+        },
+      },
     };
 
     widgetMock = {
       load: jest.genMockFunction(),
       bind: jest.genMockFunction(),
-      unbind: jest.genMockFunction()
+      unbind: jest.genMockFunction(),
     };
 
     createWidget.mockImplementation((props, cb) => cb(widgetMock));
   });
 
   describe('instantiation', () => {
     it('should render a SoundCloud API ready iframe', () => {
-      const soundcloud = TestUtils.renderIntoDocument(<SoundCloud url='' />);
+      const soundcloud = TestUtils.renderIntoDocument(<SoundCloud url="" />);
       const iframe = ReactDOM.findDOMNode(TestUtils.findRenderedDOMComponentWithTag(soundcloud, 'iframe'));
 
       expect(iframe.getAttribute('id')).toBe('react-sc-widget');
       expect(iframe.getAttribute('src')).toBe('https://w.soundcloud.com/player/?url=');
     });
 
     it('should accept a custom iframe id', () => {
-      const soundcloud = TestUtils.renderIntoDocument(<SoundCloud url='' id='custom-id' />);
+      const soundcloud = TestUtils.renderIntoDocument(<SoundCloud url="" id="custom-id" />);
       const iframe = ReactDOM.findDOMNode(TestUtils.findRenderedDOMComponentWithTag(soundcloud, 'iframe'));
 
       expect(iframe.getAttribute('id')).toBe('custom-id');
     });
 
     it('should create a new SoundCloud widget', () => {
-      TestUtils.renderIntoDocument(<SoundCloud url='' />);
+      TestUtils.renderIntoDocument(<SoundCloud url="" />);
       expect(createWidget.mock.calls[0][0]).toBe('react-sc-widget');
     });
   });
 
   describe('appearance', () => {
     it('should pass a set of `opts` into the widget', () => {
       const opts = {
-        buying: false
+        buying: false,
       };
 
-      TestUtils.renderIntoDocument(<SoundCloud url='' opts={opts} />);
+      TestUtils.renderIntoDocument(<SoundCloud url="" opts={opts} />);
       expect(widgetMock.load.mock.calls[0][1]).toEqual(opts);
     });
 
     it('should readjust height if visual mode is enabled', () => {
       const opts = {
-        visual: true
+        visual: true,
       };
 
-      const soundcloud = TestUtils.renderIntoDocument(<SoundCloud url='' opts={opts} />);
+      const soundcloud = TestUtils.renderIntoDocument(<SoundCloud url="" opts={opts} />);
       const iframe = ReactDOM.findDOMNode(TestUtils.findRenderedDOMComponentWithTag(soundcloud, 'iframe'));
       expect(iframe.getAttribute('height')).toBe('450');
     });
@@ -81,12 +80,18 @@ describe('SoundCloud Component', () => {
     class Container extends React.Component {
       constructor() {
         this.state = {
-          url: 'https://soundcloud.com/sylvanesso/coffee'
+          url: 'https://soundcloud.com/sylvanesso/coffee',
         };
 
         this._changeUrl = this._changeUrl.bind(this);
       }
 
+      _changeUrl() {
+        this.setState({
+          url: 'https://soundcloud.com/hudsonmohawke/chimes',
+        });
+      }
+
       render() {
         return (
           <div>
@@ -95,12 +100,6 @@ describe('SoundCloud Component', () => {
           </div>
         );
       }
-
-      _changeUrl() {
-        this.setState({
-          url: 'https://soundcloud.com/hudsonmohawke/chimes'
-        });
-      }
     }
 
     it('should load a `url`', () => {
@@ -137,22 +136,21 @@ describe('SoundCloud Component', () => {
   describe('events', () => {
     it('should bind event handler props to playback events', () => {
       const playFn = () => {};
-      TestUtils.renderIntoDocument(<SoundCloud url='' onPlay={playFn} />);
+      TestUtils.renderIntoDocument(<SoundCloud url="" onPlay={playFn} />);
 
       expect(widgetMock.bind.mock.calls.length).toBe(3);
       expect(widgetMock.bind.mock.calls[0]).toContain(playFn);
     });
 
     it('should remove event bindings when unmounted', () => {
-
       /**
        * `TestUtils.renderIntoDocument` renders the component into
        * a detached DOM node, which makes it difficult to unmount.
        *
        * Instead, we'll just render it the old fashioned way.
        */
 
-      ReactDOM.render(<SoundCloud url=''/>, document.body);
+      ReactDOM.render(<SoundCloud url=""/>, document.body);
       ReactDOM.unmountComponentAtNode(document.body);
 
       expect(widgetMock.unbind.mock.calls.length).toBe(3);

src/lib/createWidget.js

@@ -14,7 +14,7 @@ import load from 'load-script';
 const createWidget = (id, cb) => {
     // load the API, it's namespaced as `window.SC`
   return load('https://w.soundcloud.com/player/api.js', () => {
-    return cb(window.SC.Widget(id));
+    return cb(window.SC.Widget(id)); // eslint-disable-line new-cap
   });
 };