1.0.0-beta.0

Author: Eduardo Garcia Sanz

.babelrc

@@ -0,0 +1,7 @@
+{
+    "presets": [
+        "react",
+        "es2015",
+        "stage-2"
+    ]
+}

.eslintrc

@@ -0,0 +1,44 @@
+{
+    "parser": "babel-eslint",
+    "env"   : {
+        "browser": true
+    },
+    "rules" : {
+        "no-class-assign"            : 2,
+        "no-confusing-arrow"         : 0,
+        "no-const-assign"            : 2,
+        "no-dupe-class-members"      : 2,
+        "no-new-symbol"              : 2,
+        "no-this-before-super"       : 2,
+        "no-useless-constructor"     : 2,
+        "no-var"                     : 2,
+        "arrow-body-style"           : [2, "as-needed"],
+        "arrow-parens"               : 0,
+        "arrow-spacing"              : [
+            2,
+            {
+                "before": true,
+                "after" : true
+            }
+        ],
+        "constructor-super"          : 2,
+        "object-shorthand"           : [2, "always"],
+        "prefer-arrow-callback"      : 2,
+        "prefer-const"               : 2,
+        "prefer-rest-params"         : 2,
+        "prefer-spread"              : 2,
+        "prefer-template"            : 1,
+        "template-curly-spacing"     : [2, "always"],
+        "strict"                     : 0,
+        "new-cap"                    : 0,
+        "eqeqeq"                     : 2,
+        "curly"                      : 2,
+        "quotes"                     : [1, "single"],
+        "no-unreachable"             : 2,
+        "space-before-blocks"        : 2,
+        "space-before-function-paren": 2,
+        "no-multi-spaces"            : 0,
+        "key-spacing"                : 0,
+        "no-mixed-requires"          : 0
+    }
+}

.gitignore

@@ -1,2 +1,9 @@
 node_modules
+.DS_Store
+.idea
 *.log
+.nyc_output
+.nyc_cache
+/coverage
+/lib/*
+!/lib/.gitkeep

lib/.gitkeep

@@ -1,54 +1,49 @@
 {
-    "name"           : "react-socket",
-    "description"    : "A neat way of handling views on other components",
-    "homepage"       : "https://github.com/coma/react-socket",
-    "repository"     : "https://github.com/coma/react-socket",
-    "main"           : "./src/index.js",
-    "version"        : "0.1.4",
-    "license"        : "MIT",
-    "private"        : false,
-    "authors"        : [
-        "Eduardo García Sanz <[email protected]>"
-    ],
-    "keywords"       : [
+    "name"            : "react-socket",
+    "description"     : "A neat way of handling views on other components",
+    "homepage"        : "https://github.com/coma/react-socket",
+    "repository"      : {
+        "type": "git",
+        "url" : "git://github.com/coma/react-socket.git"
+    },
+    "bugs"            : {
+        "url"  : "https://github.com/coma/react-socket/issues",
+        "email": "[email protected]"
+    },
+    "author"          : {
+        "name" : "Eduardo García Sanz",
+        "email": "[email protected]"
+    },
+    "main"            : "lib",
+    "version"         : "1.0.0-beta.0",
+    "license"         : "MIT",
+    "private"         : false,
+    "keywords"        : [
         "react",
         "socket.io",
         "react-component"
     ],
-    "dependencies"   : {
-        "react"           : "^15.0.1",
-        "socket.io-client": "^1.4.6"
+    "peerDependencies": {
+        "react": "^15.3.1"
     },
-    "devDependencies": {
-        "proxyquire": "1.5",
-        "jsdom"     : "5.4",
-        "mocha"     : "2.2",
-        "should"    : "7.0",
-        "eslint"    : "0.24"
+    "dependencies"    : {
+        "socket.io-client": "^1.4.8"
     },
-    "scripts"        : {
-        "lint": "eslint src",
-        "test": "npm run lint && mocha"
+    "devDependencies" : {
+        "babel-cli"           : "^6.7.5",
+        "babel-core"          : "^6.7.6",
+        "babel-eslint"        : "^6.0.3",
+        "babel-preset-es2015" : "^6.6.0",
+        "babel-preset-react"  : "^6.5.0",
+        "babel-preset-stage-2": "^6.5.0",
+        "eslint"              : "^3.4.0",
+        "react"               : "^15.3.1"
     },
-    "eslintConfig"   : {
-        "env"  : {
-            "node": true
-        },
-        "rules": {
-            "strict"                     : 0,
-            "new-cap"                    : 0,
-            "eqeqeq"                     : 2,
-            "curly"                      : 2,
-            "quotes"                     : [
-                1,
-                "single"
-            ],
-            "no-unreachable"             : 2,
-            "space-before-blocks"        : 2,
-            "space-before-function-paren": 2,
-            "no-multi-spaces"            : 0,
-            "key-spacing"                : 0,
-            "no-mixed-requires"          : 0
-        }
+    "scripts"         : {
+        "lint"      : "eslint src",
+        "test"      : "npm run lint",
+        "clean"     : "rm -rf lib/*.*",
+        "build"     : "npm run clean && babel src -d lib",
+        "prepublish": "npm run build"
     }
 }

package.json

@@ -1,4 +1,4 @@
-module.exports = {
-    Socket: require('./socket'),
-    Event : require('./event')
-};
+import Socket from './socket';
+import Listener from './listener';
+
+export default {Socket, Listener};

src/event.js

@@ -0,0 +1,39 @@
+import React, { Component, PropTypes } from 'react';
+import { NAME, get } from './socket';
+
+class Listener extends Component {
+
+    componentWillMount () {
+
+        const {socket, event, callback} = this.props;
+
+        this.socket = get(socket);
+        this.socket.on(event, callback);
+    }
+
+    componentWillUnmount () {
+
+        const {event, callback} = this.props;
+
+        this.socket.off(event, callback);
+    }
+
+    render () {
+
+        return false;
+    }
+}
+
+Listener.displayName = 'SocketListener';
+
+Listener.propTypes = {
+    socket  : PropTypes.string,
+    event   : PropTypes.string.isRequired,
+    callback: PropTypes.func.isRequired
+};
+
+Listener.defaultProps = {
+    socket: NAME
+};
+
+export default Listener;

src/index.js

@@ -1,60 +1,60 @@
-var React = require('react'),
-    io    = require('socket.io-client');
-
-var sockets = {};
-
-module.exports = React.createClass({
-    displayName         : 'Socket',
-    propTypes           : {
-        url    : React.PropTypes.string,
-        name   : React.PropTypes.string,
-        options: React.PropTypes.shape({
-            reconnection        : React.PropTypes.bool,
-            reconnectionAttempts: React.PropTypes.number,
-            reconnectionDelay   : React.PropTypes.number,
-            reconnectionDelayMax: React.PropTypes.number,
-            randomizationFactor : React.PropTypes.number,
-            timeout             : React.PropTypes.number
-        })
-    },
-    getDefaultProps     : function () {
-
-        return {
-            name   : 'default',
-            options: {
-                forceNew: true
-            }
-        };
-    },
-    statics             : {
-        socket: function (name) {
-
-            name = name || 'default';
-
-            if (!sockets.hasOwnProperty(name)) {
-
-                throw new Error('There is no "' + name + '" socket mounted.');
-            }
-
-            return sockets[name];
-        }
-    },
-    componentWillMount  : function () {
+import React, { Component, PropTypes } from 'react';
+
+export const NAME = 'default';
+
+const SOCKETS = {};
+
+export const has = name => SOCKETS.hasOwnProperty(name);
+
+export const get = (name = NAME) => {
+
+    if (!has(name)) {
+
+        throw new Error(`There is no "${ name }" socket mounted.`);
+    }
+
+    return SOCKETS[name];
+};
+
+class Socket extends Component {
+
+    componentWillMount () {
 
-        if (sockets.hasOwnProperty(this.props.name)) {
+        const {name, url, options} = this.props;
 
-            throw new Error('Another "' + this.props.name + '" socket is already mounted.');
+        if (has(name)) {
+
+            throw new Error(`Another "${ name }" socket is already mounted.`);
         }
 
-        sockets[this.props.name] = io(this.props.url, this.props.options);
-    },
-    componentWillUnmount: function () {
+        SOCKETS[name] = io(url, options);
+    }
+
+    componentWillUnmount () {
+
+        const {name} = this.props;
+
+        SOCKETS[name].disconnect();
+        delete SOCKETS[name];
+    }
 
-        sockets[this.props.name].disconnect();
-        delete sockets[this.props.name];
-    },
-    render              : function () {
+    render () {
 
         return false;
     }
-});
+}
+
+Socket.displayName = 'Socket';
+
+Socket.propTypes = {
+    url    : PropTypes.string,
+    name   : PropTypes.string,
+    options: PropTypes.object
+};
+
+Socket.defaultProps = {
+    url : '/',
+    name: NAME
+};
+
+export default Socket;