- Added observable selectors

- Refactored tests a bit

Author: wcjohnson

docs/API/createClass.md

@@ -75,11 +75,11 @@ spec.actionCreators = { key: (args...) -> action, ... }
 Specify the action creators associated with this component class. Each property on the ```actionCreators``` object will be bound to each component instance and made available on the instance as a method.
 > **NB:** The redux-components core makes no assumptions about which middleware is present on a store. If you have e.g. `redux-thunk` middleware installed, you may of course return thunks from your actions and actionCreators.
 
-### spec.actions
+### spec.actionDispatchers
 ```coffeescript
-spec.actions = { key: (args...) -> action, ... }
+spec.actionDispatchers = { key: (args...) -> action, ... }
 ```
-Specify actions associated with this component class. Actions are like action creators, except the value returned is automatically `dispatch()`ed to the Store where this component is mounted. The wrapped action function will return the same thing as `dispatch()`, allowing it to be used with thunks and other related middleware.
+Specify actions associated with this component class. Action dispatchers are like action creators, except the value returned is automatically `dispatch()`ed to the Store where this component is mounted. The wrapped action function will return the same thing as `dispatch()`, allowing it to be used with thunks and other related middleware.
 
 ### spec.selectors
 ```coffeescript

src/DefaultMixin.coffee

@@ -8,7 +8,7 @@ scopeSelector = (sel, self) -> ->
 	sel.apply(self, fwdArgs)
 
 # Bind an action to automatically dispatch to the right store.
-bindAction = (actionCreator, self) -> ->
+dispatchAction = (actionCreator, self) -> ->
 	self.store.dispatch(actionCreator.apply(self, arguments))
 
 # DefaultMixin is mixed into all component specs automatically by createClass.
@@ -23,8 +23,8 @@ export default DefaultMixin = {
 		if @actionCreators
 			(@[acKey] = ac.bind(@)) for acKey, ac of @actionCreators
 		# Bind actions
-		if @actions
-			(@[acKey] = bindAction(ac, @)) for acKey, ac of @actions
+		if @actionDispatchers
+			(@[acKey] = dispatchAction(ac, @)) for acKey, ac of @actionDispatchers
 		# Scope selectors
 		if @selectors
 			(@[selKey] = scopeSelector(sel, @)) for selKey, sel of @selectors

src/ObservableSelectorMixin.coffee

@@ -0,0 +1,8 @@
+import makeSelectorObservable from './makeSelectorObservable'
+
+export default ObservableSelectorMixin = {
+	componentWillMount: ->
+		if @selectors
+			makeSelectorObservable(@, @[selKey]) for selKey of @selectors
+		undefined
+}

src/index.coffee

@@ -3,6 +3,7 @@ import createClass from './createClass'
 import DefaultMixin from './DefaultMixin'
 import mountComponent from './mountComponent'
 import ReduxComponent from './ReduxComponent'
+import ObservableSelectorMixin from './ObservableSelectorMixin'
 import { createComponent, SubtreeMixin } from './subtree'
 
 export {
@@ -13,4 +14,5 @@ export {
 	ReduxComponent
 	createComponent
 	SubtreeMixin
+	ObservableSelectorMixin
 }

src/makeSelectorObservable.coffee

@@ -0,0 +1,56 @@
+import { removeFromList, assign } from './util'
+import $$observable from 'symbol-observable'
+
+# A quick and dirty "Subject" mixin.
+# XXX: Would like to depend on a trusted library here, but the only one I know of is rxJS which is simply too bloated.
+# zen-observable does not provide a Subject implementation.
+reentrantMutation = (self) ->
+	# Reentrant mutation safety: make a copy of the observer list in case it is currently being
+	# iterated.
+	if not self.__nextObservers then self.__nextObservers = []
+	if self.__nextObservers is self.__currentObservers
+		self.__nextObservers = self.__currentObservers.slice()
+	undefined
+
+subjectMixin = {
+	next: (x) ->
+		observers = @__currentObservers = @__nextObservers
+		if observers
+			observer.next?(x) for observer in observers
+		undefined
+
+	subscribe: (observer) ->
+		reentrantMutation(@)
+		@__nextObservers.push(observer)
+		if @__nextObservers.length is 1 then @__isBeingObserved?(true)
+		# Subscription object
+		{
+			unsubscribe: =>
+				reentrantMutation(@)
+				removeFromList(@__nextObservers, observer)
+				if @__nextObservers.length is 0 then @__isBeingObserved?(false)
+				undefined
+		}
+}
+
+# Make a selector on a ReduxComponentInstance into an ES7 Observable.
+export default makeSelectorObservable = (componentInstance, selector) ->
+	# Make the selector a Subject.
+	assign(selector, subjectMixin)
+
+	# Make the selector an ES7 Observable
+	Object.defineProperty(selector, $$observable, { writable: true, configurable: true, value: (-> @) })
+
+	# Attach the selector to the Redux store when it is being observed.
+	selector.__isBeingObserved = (isBeingObserved) ->
+		if isBeingObserved
+			lastSeenValue = undefined
+			observeState = ->
+				val = selector(componentInstance.store.getState())
+				if val isnt lastSeenValue then lastSeenValue = val; selector.next(val)
+
+			observeState()
+			@__unsubscriber = componentInstance.store.subscribe(observeState)
+		else
+			@__unsubscriber?(); delete @__unsubscriber
+		undefined

src/util.coffee

@@ -8,3 +8,6 @@ export get = (object, path) ->
 	while object? and index < length
 		object = object[path[index++]]
 	if (index is length) then object else undefined
+
+export removeFromList = (list, value) ->
+	if (i = list.indexOf(value)) > -1 then list.splice(i, 1)

test/01-basic.coffee

@@ -1,11 +1,9 @@
 { expect } = require 'chai'
-{ createStore } = require 'redux'
 
-createClass = require '../createClass'
-mountComponent = require '../mountComponent'
+{ createClass, mountComponent, createComponent, SubtreeMixin } = require '..'
+{ makeAStore } = require './helpers/store'
 
 describe 'basic functions: ', ->
-	makeAStore = -> createStore( (x) -> x )
 	store = makeAStore()
 
 	RootComponent = null

test/02-subtree.coffee

@@ -1,15 +1,10 @@
 { inspect } = require 'util'
 
 { expect, assert } = require 'chai'
-{ createStore } = require 'redux'
-
-createClass = require '../createClass'
-mountComponent = require '../mountComponent'
-SubtreeMixin = require '../SubtreeMixin'
-createComponent = require '../createComponent'
+{ createClass, mountComponent, createComponent, SubtreeMixin } = require '..'
+{ makeAStore } = require './helpers/store'
 
 describe 'subtree: ', ->
-	makeAStore = -> createStore( (x) -> x )
 	store = makeAStore()
 
 	RootComponent = null

test/03-reducer-indirection.coffee

@@ -30,7 +30,7 @@ describe 'reducer indirection: ', ->
 							when @CHANGE_MAGIC_WORD then Object.assign({}, state, { magicWord: action.payload or 'please'})
 							when currentState.magicWord then Object.assign({}, state, {payload: 'got the magic word'})
 							else state
-				actions: {
+				actionDispatchers: {
 					setValue: (val) -> { type: @SET, payload: val }
 					sayMagicWord: -> { type: @state.magicWord }
 					setMagicWord: (val) -> { type: @CHANGE_MAGIC_WORD, payload: val }

test/04-observable-selectors.coffee

@@ -0,0 +1,69 @@
+{ inspect } = require 'util'
+
+{ expect, assert } = require 'chai'
+{ createClass, mountComponent, createComponent, ObservableSelectorMixin } = require '..'
+{ makeAStore } = require './helpers/store'
+
+expectTestSequence = (tests) ->
+	i = 0
+	{
+		next: (x) -> expect(tests[i++]?(x)).to.equal(true)
+		error: (x) -> throw x
+		complete: -> expect(i).to.equal(tests.length)
+	}
+
+describe 'observable selectors: ', ->
+	store = makeAStore()
+
+	RootComponent = null
+	Subcomponent = null
+	rootComponentInstance = null
+
+	describe 'simple: ', ->
+		it 'should create subcomponent class', ->
+			Subcomponent = createClass {
+				mixins: [ ObservableSelectorMixin ]
+				displayName: 'Subcomponent'
+				verbs: ['SET']
+				componentWillMount: ->
+					console.log "Subcomponent.willMount: initial state", @state
+				componentDidMount: ->
+					console.log "Subcomponent.didMount"
+				getReducer: (currentState) ->
+					(state = {}, action) ->
+						switch action.type
+							when @SET then Object.assign({}, state, { payload: action.payload or {} })
+							else state
+				actionDispatchers: {
+					setValue: (val) -> { type: @SET, payload: val }
+				}
+				selectors: {
+					getValue: (state) ->
+						state.payload
+				}
+			}
+
+		it 'should create new store', ->
+			store = makeAStore({ foo: { payload: 'bar' } })
+
+		it 'should mount subcomponent', ->
+			rootComponentInstance = createComponent( { foo: Subcomponent } )
+			mountComponent(store, rootComponentInstance)
+
+		it 'should print the whole component tree for your viewing pleasure', ->
+			console.log(inspect(rootComponentInstance))
+
+		it 'should observe after mutation by an action', ->
+			subscription = rootComponentInstance.foo.getValue.subscribe(
+				expectTestSequence([ ((x) -> x is 'bar'), ((x) -> x is 'hello world')] )
+			)
+			rootComponentInstance.foo.setValue('hello world')
+			subscription.unsubscribe()
+
+		it 'should unsubscribe', ->
+			subscription = rootComponentInstance.foo.getValue.subscribe(
+				expectTestSequence([ ((x) -> x is 'hello world'), ((x) -> x is 'goodbye world')] )
+			)
+			rootComponentInstance.foo.setValue('goodbye world')
+			subscription.unsubscribe()
+			rootComponentInstance.foo.setValue('bar')