Add flux-chat example

Author: jordangarcia

README.md

@@ -130,6 +130,8 @@ Getters can take 2 forms:
 ##### `getters.js`
 
 ```js
+var toImmutable = require('nuclear-js').toImmutable
+
 // it is idiomatic to facade all data access through getters, that way a component only has to subscribe to a getter making it agnostic
 // to the underyling stores / data transformation that is taking place
 exports.messages = ['messages']
@@ -451,7 +453,7 @@ var Map = require('immutable').Map
 var List = require('immutable').List
 var Nuclear = require('nuclear-js')
 
-var itemStore = Nuclear.Store({
+var itemStore = new Nuclear.Store({
   // the parameter is optional, if not supplied will default to an `Immutable.Map({})`
   // Store state must be an ImmutableJS data structure or an immutable javascript primitive
   // like Number or String
@@ -474,7 +476,7 @@ var itemStore = Nuclear.Store({
   }
 })
 
-var taxPercentStore = Nuclear.Store({
+var taxPercentStore = new Nuclear.Store({
   getInitialState: function() {
     return 0
   },
@@ -488,7 +490,7 @@ var taxPercentStore = Nuclear.Store({
   }
 })
 
-var reactor = Reactor()
+var reactor = new Nuclear.Reactor()
 reactor.registerStores({
   items: itemStore,
   taxPercent: taxPercentStore,
@@ -766,17 +768,26 @@ Dispatches a message to all registered Stores. This process is done syncronously
 
 ex: `reactor.dispatch('addUser', { name: 'jordan' })`
 
-#### `Reactor#evaluate(...keyPath, [transformFn])`
+#### `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.
 
 ```js
 reactor.evaluate(['users', 'active'])
-reactor.evaluate('users.active', 'usernameFilter', function(activeUsers, filter) {
-  return activeUsers.filter(function(user) {
-    return user.get('username').indexOf(filter) !== -1
-  }
-})
+reactor.evaluate([
+  ['users', 'active'],
+  ['filters', 'username'],
+  /**
+   * @param {Immutable.List} activeUsers
+   * @param {String} usernameFilter
+   * @return {Immutable.List}
+   */
+  function(activeUsers, usernameFilter) {
+    return activeUsers.filter(function(user) {
+      return user.get('username').indexOf(usernameFilter) !== -1
+    }
+  },
+])
 ```
 
 #### `Reactor#evaluateToJS(...keyPath, [transformFn])`

dist/nuclear.js

@@ -67,7 +67,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	exports.Store = __webpack_require__(3)
 
 	// export the immutable library
-	exports.Immutable = __webpack_require__(10)
+	exports.Immutable = __webpack_require__(11)
 
 	/**
 	 * @return {boolean}
@@ -89,7 +89,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 1 */
 /***/ function(module, exports, __webpack_require__) {
 
-	var Immutable = __webpack_require__(10)
+	var Immutable = __webpack_require__(11)
 	var isObject = __webpack_require__(6).isObject
 
 	/**
@@ -148,12 +148,13 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 2 */
 /***/ function(module, exports, __webpack_require__) {
 
-	var Immutable = __webpack_require__(10)
+	var Immutable = __webpack_require__(11)
 	var logging = __webpack_require__(7)
 	var ChangeObserver = __webpack_require__(8)
 	var Getter = __webpack_require__(5)
 	var KeyPath = __webpack_require__(4)
 	var Evaluator = __webpack_require__(9)
+	var createReactMixin = __webpack_require__(10)
 
 	// helper fns
 	var toJS = __webpack_require__(1).toJS
@@ -180,6 +181,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    this.debug = !!config.debug
 
+	    this.ReactMixin = createReactMixin(this)
 	    /**
 	     * The state for the whole cluster
 	     */
@@ -354,7 +356,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 3 */
 /***/ function(module, exports, __webpack_require__) {
 
-	var Map = __webpack_require__(10).Map
+	var Map = __webpack_require__(11).Map
 	var extend = __webpack_require__(6).extend
 
 	/**
@@ -458,7 +460,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 5 */
 /***/ function(module, exports, __webpack_require__) {
 
-	var Immutable = __webpack_require__(10)
+	var Immutable = __webpack_require__(11)
 	var isFunction = __webpack_require__(6).isFunction
 	var isArray = __webpack_require__(6).isArray
 	var isKeyPath = __webpack_require__(4).isKeyPath
@@ -543,7 +545,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 6 */
 /***/ function(module, exports, __webpack_require__) {
 
-	var _ = __webpack_require__(13);
+	var _ = __webpack_require__(14);
 
 	exports.clone = _.clone
 
@@ -614,9 +616,9 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 8 */
 /***/ function(module, exports, __webpack_require__) {
 
-	var Immutable = __webpack_require__(10)
-	var hashCode = __webpack_require__(11)
-	var isEqual = __webpack_require__(12)
+	var Immutable = __webpack_require__(11)
+	var hashCode = __webpack_require__(12)
+	var isEqual = __webpack_require__(13)
 
 	/**
 	 * ChangeObserver is an object that contains a set of subscriptions
@@ -710,12 +712,12 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 9 */
 /***/ function(module, exports, __webpack_require__) {
 
-	var Immutable = __webpack_require__(10)
+	var Immutable = __webpack_require__(11)
 	var helpers = __webpack_require__(1)
 	var isImmutable = helpers.isImmutable
 	var toImmutable = helpers.toImmutable
-	var hashCode = __webpack_require__(11)
-	var isEqual = __webpack_require__(12)
+	var hashCode = __webpack_require__(12)
+	var isEqual = __webpack_require__(13)
 	var getComputeFn = __webpack_require__(5).getComputeFn
 	var getDeps = __webpack_require__(5).getDeps
 	var isKeyPath = __webpack_require__(4).isKeyPath
@@ -882,6 +884,56 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ },
 /* 10 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var each = __webpack_require__(6).each
+	/**
+	 * @param {Reactor} reactor
+	 */
+	module.exports = function(reactor) {
+	  return {
+	    getInitialState: function() {
+	      return getState(reactor, this.getDataBindings())
+	    },
+
+	    componentDidMount: function() {
+	      var component = this
+	      var dataBindings = this.getDataBindings()
+	      component.__unwatchFns = []
+	      each(this.getDataBindings(), function(getter, key) {
+	        var unwatchFn = reactor.observe(getter, function(val) {
+	          var newState = {};
+	          newState[key] = val;
+	          component.setState(newState)
+	        })
+
+	        component.__unwatchFns.push(unwatchFn)
+	      })
+	    },
+
+	    componentWillUnmount: function() {
+	      while (this.__unwatchFns.length) {
+	        this.__unwatchFns.shift()()
+	      }
+	    }
+	  }
+	}
+
+	/**
+	 * Returns a mapping of the getDataBinding keys to
+	 * the reactor values
+	 */
+	function getState(reactor, data) {
+	  var state = {}
+	  for (var key in data) {
+	    state[key] = reactor.evaluate(data[key])
+	  }
+	  return state
+	}
+
+
+/***/ },
+/* 11 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -4799,10 +4851,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 11 */
+/* 12 */
 /***/ function(module, exports, __webpack_require__) {
 
-	var Immutable = __webpack_require__(10)
+	var Immutable = __webpack_require__(11)
 	var isGetter = __webpack_require__(5).isGetter
 
 	/**
@@ -4842,10 +4894,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 12 */
+/* 13 */
 /***/ function(module, exports, __webpack_require__) {
 
-	var Immutable = __webpack_require__(10)
+	var Immutable = __webpack_require__(11)
 	/**
 	 * Is equal by value check
 	 */
@@ -4855,7 +4907,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 13 */
+/* 14 */
 /***/ function(module, exports, __webpack_require__) {
 
 	var __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(module, global) {/**
@@ -12016,10 +12068,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }
 	}.call(this));
 
-	/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(14)(module), (function() { return this; }())))
+	/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(15)(module), (function() { return this; }())))
 
 /***/ },
-/* 14 */
+/* 15 */
 /***/ function(module, exports, __webpack_require__) {
 
 	module.exports = function(module) {