Merge pull request #181 from optimizely/jordan/refactor-everything!

Refactor reactor, evaluator and change observer for 1.2

Author: jordangarcia

.eslintrc

@@ -2,14 +2,16 @@
   "env": {
     "node": true,
     "browser": true,
-    "amd": true
+    "amd": true,
+    "es6": true
   },
   "ecmaFeatures": {
     "arrowFunctions": true,
     "classes": true,
     "defaultParams": true,
     "destructuring": true,
     "forOf": true,
+    "modules": true,
     "objectLiteralShorthandMethods": true,
     "objectLiteralShorthandProperties": true,
     "spread": true,
@@ -58,7 +60,7 @@
     "use-isnan": 1,
     "valid-jsdoc": 0,
     "valid-typeof": 1,
-    "block-scoped-var": 1,
+    "block-scoped-var": 0,
     "complexity": 0,
     "consistent-return": 0,
     "curly": 1,

docs/src/docs/07-api.md

@@ -29,21 +29,6 @@ Dispatches a message to all registered Stores. This process is done synchronousl
 reactor.dispatch('addUser', { name: 'jordan' })
 ```
 
-#### `Reactor#batch(fn)`
-
-_added in 1.1_
-
-Allows multiple dispatches within the `fn` function before notifying any observers.
-
-```javascript
-reactor.batch(function() {
-  reactor.dispatch('addUser', { name: 'jordan' })
-  reactor.dispatch('addUser', { name: 'james' })
-})
-
-// does a single notify to all observers
-```
-
 #### `Reactor#evaluate(Getter | KeyPath)`
 
 Returns the immutable value for some KeyPath or Getter in the reactor state. Returns `undefined` if a keyPath doesn't have a value.
@@ -85,6 +70,41 @@ reactor.observe([
 ])
 ```
 
+#### `Reactor#batch(fn)`
+
+_added in 1.1_
+
+Allows multiple dispatches within the `fn` function before notifying any observers.
+
+```javascript
+reactor.batch(function() {
+  reactor.dispatch('addUser', { name: 'jordan' })
+  reactor.dispatch('addUser', { name: 'james' })
+})
+
+// does a single notify to all observers
+```
+
+#### `Reactor#batchStart()`
+
+_added in 1.2_
+
+Sets the reactor in batch mode, where dispatches don't cause observer notification until `batchEnd()` is called.
+
+```javascript
+// the following is equivalent to the `reactor.batch` example
+reactor.batchStart()
+reactor.dispatch('addUser', { name: 'jordan' })
+reactor.dispatch('addUser', { name: 'james' })
+reactor.batchEnd()
+```
+
+#### `Reactor#batchEnd()`
+
+_added in 1.2_
+
+Signifies the end of reactor batching and will notify all observers of the changes that happened since `batchStart`
+
 #### `Reactor#serialize()`
 
 _added in 1.1_

grunt/karma.js

@@ -23,7 +23,7 @@ module.exports = {
     webpack: {
       module: {
         loaders: [
-          { test: /\.js$/, loader: 'jstransform-loader' },
+          { test: /\.js$/, loader: 'babel-loader' },
         ],
       },
     },
@@ -37,6 +37,10 @@ module.exports = {
     autoWatch: false,
 
     singleRun: true,
+
+    client: {
+      captureConsole: false,
+    },
   },
 
   phantom: {
@@ -66,7 +70,7 @@ module.exports = {
     webpack: {
       module: {
         loaders: [
-          { test: /\.js$/, loader: 'jstransform-loader' },
+          { test: /\.js$/, loader: 'babel-loader' },
         ],
         postLoaders: [
           {

grunt/sauce.js

@@ -1,4 +1,3 @@
-var each = require('../src/utils').each
 var sauceConfig = {
   username: 'nuclearjs',
   accessKey: process.env.SAUCE_ACCESS_KEY,
@@ -71,7 +70,9 @@ var batches = {
   },
 }
 
-each(batches, function(value, key) {
+for (var key in batches) { // eslint-disable-line guard-for-in
+  var value = batches[key]
+
   exports[key] = {
     sauceLabs: sauceConfig,
     // mobile emulators are really slow
@@ -81,4 +82,4 @@ each(batches, function(value, key) {
     browsers: Object.keys(value),
     reporters: ['progress', 'saucelabs'],
   }
-})
+}

package.json

@@ -31,6 +31,8 @@
   },
   "devDependencies": {
     "grunt": "^0.4.5",
+    "babel-core": "^5.8.29",
+    "babel-loader": "^5.3.2",
     "grunt-contrib-clean": "^0.6.0",
     "grunt-eslint": "^14.0.0",
     "grunt-githooks": "^0.3.1",

src/change-observer.js

@@ -1,43 +1,44 @@
-var each = require('./utils').each
+import { each } from './utils'
+
+/**
+ * Returns a mapping of the getDataBinding keys to
+ * the reactor values
+ */
+function getState(reactor, data) {
+  let state = {}
+  each(data, (value, key) => {
+    state[key] = reactor.evaluate(value)
+  })
+  return state
+}
+
 /**
  * @param {Reactor} reactor
  */
-module.exports = function(reactor) {
+export default function(reactor) {
   return {
-    getInitialState: function() {
+    getInitialState() {
       return getState(reactor, this.getDataBindings())
     },
 
-    componentDidMount: function() {
-      var component = this
-      component.__unwatchFns = []
-      each(this.getDataBindings(), function(getter, key) {
-        var unwatchFn = reactor.observe(getter, function(val) {
-          var newState = {}
-          newState[key] = val
-          component.setState(newState)
+    componentDidMount() {
+      this.__unwatchFns = []
+      each(this.getDataBindings(), (getter, key) => {
+        const unwatchFn = reactor.observe(getter, (val) => {
+          this.setState({
+            [key]: val
+          })
         })
 
-        component.__unwatchFns.push(unwatchFn)
+        this.__unwatchFns.push(unwatchFn)
       })
     },
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
       while (this.__unwatchFns.length) {
         this.__unwatchFns.shift()()
       }
     },
   }
 }
 
-/**
- * Returns a mapping of the getDataBinding keys to
- * the reactor values
- */
-function getState(reactor, data) {
-  var state = {}
-  each(data, function(value, key) {
-    state[key] = reactor.evaluate(value)
-  })
-  return state
-}