feat: Initial import of all functionality!

Author: hswolff

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    "react",
+    ["env", {
+      "targets": {
+        "browsers": ["last 2 versions", "safari >= 7"],
+        "node": 6
+      }
+    }]
+  ]
+}

.eslintrc

@@ -1,3 +1,23 @@
 {
-  "extends": ["mongodb-js/node"]
+  "extends": ["mongodb-js/node"],
+  "env": {
+    "browser": true,
+    "node": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "comma-dangle": ["error", {
+      "arrays": "always-multiline",
+      "objects": "always-multiline",
+      "imports": "always-multiline",
+      "exports": "always-multiline",
+    }]
+  }
 }

.gitignore

@@ -2,3 +2,4 @@
 node_modules/
 npm-debug.log
 .env
+dist/

README.md

@@ -5,6 +5,68 @@
 ## Example
 
 ```javascript
+const userModel = new Backbone.Model({ name: 'Harry', laughs: true });
+const userCollection = new Backbone.Collection([userModel]);
+
+class MyComponent extends React.Component {
+  render() {
+    return (
+      <div>
+        My user laughs: {this.props.doesUserLaugh}
+
+        <h4>All Users</h4>
+        <div>
+          {this.props.users.map(user => (
+            <div key={user.name}>{user.name}</div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+const WrappedComponent = connectBackboneToReact(
+  // Map your Backbone Model and Collections to names that will be provided to
+  // connectBackboneToReact's mapModelsToProps function.
+  {
+    user: userModel,
+    allUsers: userCollection,
+  },
+
+  // Maps Models to properties to give to the React Component. Optional.
+  // Default behavior is to call `.toJSON()` on every Model and Collection.
+  function mapModelsToProps(models) {
+    const { user, allUsers } = models;
+
+    // Everything returned from this function will be given as a prop to your Component.
+    return {
+      doesUserLaugh: user.get('laughs'),
+      users: allUsers.toJSON(),
+      setUserLaughs(newVal) {
+        user.set('laughs', newVal);
+      },
+    };
+  }
+
+  // Options.
+  {
+    // Should our event handler function be wrapped in a debounce function
+    // to prevent many re-renders.
+    debounce: false, // or `true`, or a number that will be used in the debounce function.
+
+    // Define what events you want to listen to on your Backbone Model or Collection
+    // that will cause your React Component to re-render.
+    // By default it's ['all'] for every Model and Collection given.
+    events: {
+      user: ['change:name', 'change:laughs'], // You can disable listening to events by passing in `false`.
+    },
+  }
+)(MyComponent)
+
+ReactDOM.render(
+  <WrappedComponent />,
+  document.getElementById('app')
+);
 ```
 
 ## License

index.js

@@ -1 +1 @@
-module.exports = require('./lib');
+module.exports = require('./dist');

lib/index.js

@@ -1,5 +1,118 @@
-/**
- *
- * @api public
- */
-module.exports = function() {};
+const hoistStatics = require('hoist-non-react-statics');
+const { Component, createElement } = require('react');
+const debounceFn = require('lodash/debounce');
+const isArray = require('lodash/isArray');
+
+function getDisplayName(name) {
+  return `connectBackboneToReact(${name})`;
+}
+
+function defaultModelsToProps(models) {
+  return Object.keys(models).reduce((acc, modelKey) => {
+    const model = models[modelKey];
+    acc[modelKey] = model.toJSON();
+    return acc;
+  }, {});
+}
+
+module.exports = function connectBackboneToReact(
+  modelsMap = {},
+  modelsToProps = defaultModelsToProps,
+  options = {}
+) {
+  if (arguments.length === 2 && typeof modelsToProps !== 'function') {
+    options = modelsToProps;
+    modelsToProps = defaultModelsToProps;
+  }
+
+  const {
+    debounce = false,
+    events = {},
+  } = options;
+
+  function getEventNames(modelName) {
+    let eventNames = events[modelName];
+
+    // Allow turning off event handlers by setting events to false.
+    if (eventNames === false) {
+      return [];
+    }
+
+    if (!isArray(eventNames)) {
+      eventNames = [];
+    }
+
+    if (eventNames.length === 0) {
+      eventNames.push('all');
+    }
+
+    return eventNames;
+  }
+
+  return function createWrapper(WrappedComponent) {
+    function getProps() {
+      return modelsToProps(modelsMap);
+    }
+
+    const wrappedComponentName = WrappedComponent.displayName
+      || WrappedComponent.name
+      || 'Component';
+
+    const displayName = getDisplayName(wrappedComponentName);
+
+    class Connect extends Component {
+      constructor(state, props) {
+        super(state, props);
+
+        this.state = getProps();
+
+        this.createNewProps = this.createNewProps.bind(this);
+
+        if (debounce) {
+          const debounceWait = typeof debounce === 'number' ? debounce : 0;
+          this.createNewProps = debounceFn(this.createNewProps, debounceWait);
+        }
+
+        this.createEventListeners();
+      }
+
+      createEventListeners() {
+        Object.keys(modelsMap).forEach(mapKey => {
+          const model = modelsMap[mapKey];
+
+          getEventNames(mapKey).forEach(name => {
+            model.on(name, this.createNewProps, this);
+          });
+        });
+      }
+
+      createNewProps() {
+        this.setState(getProps());
+      }
+
+      componentWillUnmount() {
+        if (debounce) {
+          this.createNewProps.cancel();
+        }
+
+        Object.keys(modelsMap).forEach(mapKey => {
+          const model = modelsMap[mapKey];
+
+          getEventNames(mapKey).forEach(name => {
+            model.off(name, this.createNewProps, this);
+          });
+        });
+      }
+
+      render() {
+        const wrappedProps = Object.assign({}, this.state, this.props);
+        return createElement(WrappedComponent, wrappedProps);
+      }
+    }
+
+    Connect.WrappedComponent = WrappedComponent;
+    Connect.displayName = displayName;
+
+    return hoistStatics(Connect, WrappedComponent);
+  };
+};

package.json

@@ -1,12 +1,14 @@
 {
   "name": "connect-backbone-to-react",
   "description": "Connect Backbone Models and Collections to React.",
-  "version": "0.0.0",
+  "version": "0.5.0",
   "scripts": {
     "fmt": "mongodb-js-fmt",
     "check": "mongodb-js-precommit",
     "test": "mocha",
-    "ci": "npm run check && npm test"
+    "ci": "npm run check && npm test",
+    "compile": "babel lib/ --out-dir dist/",
+    "prepublish": "npm run compile"
   },
   "homepage": "http://github.com/mongodb-js/connect-backbone-to-react",
   "repository": {
@@ -16,13 +18,27 @@
   "bugs": {
     "url": "git://github.com/mongodb-js/connect-backbone-to-react.git/issues"
   },
-  "dependencies": {},
+  "dependencies": {
+    "hoist-non-react-statics": "^1.2.0",
+    "react": "^15.4.2"
+  },
   "devDependencies": {
+    "babel-cli": "^6.22.2",
+    "babel-preset-env": "^1.1.8",
+    "babel-preset-react": "^6.22.0",
+    "babel-register": "^6.22.0",
+    "backbone": "^1.3.3",
+    "enzyme": "^2.7.1",
     "eslint-config-mongodb-js": "^2.2.0",
-    "mocha": "^2.3.4",
+    "jsdom": "^9.11.0",
+    "lodash": "^4.17.4",
+    "mocha": "^3.2.0",
     "mongodb-js-fmt": "^0.0.3",
     "mongodb-js-precommit": "^0.2.8",
-    "pre-commit": "^1.1.2"
+    "pre-commit": "^1.1.2",
+    "react-addons-test-utils": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "sinon": "^1.17.7"
   },
   "license": "Apache-2.0",
   "precommit": [