0.3.2

- Observable selectors are now automatic
- Closure creation only happens upon observation of a selector now
- Can observe selectors before components are mounted; observer will be deferred until didMount.

Author: wcjohnson

CHANGELOG.md

@@ -1,5 +1,17 @@
 # 0.3
 
+## 0.3.2
+
+### Observable selector changes
+
+We've made some changes to make observable selectors more convenient. None of these are breaking changes.
+
+- All selectors on all ReduxComponents are now observable by default. It is no longer necessary to use `ObservableSelectorMixin`. `ObservableSelectorMixin` will continue to  exist for backwards compatibility, but is simply an empty mixin now.
+
+- It is now possible to call `selector.next` even if the selector's owning component is not yet mounted. The attachment of the `Observer` to the selector will then be deferred until the component is mounted.
+
+- The internal implementation of selectors has been refactored so that there is no penalty for the `Observable` implementation unless you actually attach an `Observer`.
+
 ## 0.3.1
 
 ### Added `component.isMounted()` API

package.json

@@ -1,6 +1,6 @@
 {
   "name": "redux-components",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "A component model for Redux state trees based on the React.js component model.",
   "keywords": [
     "redux",

src/DefaultMixin.coffee

@@ -1,39 +1,28 @@
 import { get } from './util'
-slice = [].slice
 
-# Scope a selector to a component.
-scopeSelector = (sel, self) -> ->
-	fwdArgs = slice.call(arguments)
-	fwdArgs[0] = self.state
-	sel.apply(self, fwdArgs)
-
-# Bind an action to automatically dispatch to the right store.
-dispatchAction = (actionCreator, self) -> ->
-	action = actionCreator.apply(self, arguments)
-	if action? then self.store.dispatch(action)
 
 # DefaultMixin is mixed into all component specs automatically by createClass.
 export default DefaultMixin = {
 	componentWillMount: ->
 		store = @store; myPath = @path
 
-		## Scope the bits that need scoping.
+		## Path-dependent initialization
 		# Scope @state
 		Object.defineProperty(@, 'state', { configurable: false, enumerable: true, get: -> get( store.getState(), myPath ) })
+
 		# Scope verbs
 		if @verbs
 			stringPath = @path.join('.')
 			(@[verb] = "#{stringPath}:#{verb}") for verb in @verbs
-		# Bind action creators
-		if @actionCreators
-			(@[acKey] = ac.bind(@)) for acKey, ac of @actionCreators
-		# Bind actions
-		if @actionDispatchers
-			(@[acKey] = dispatchAction(ac, @)) for acKey, ac of @actionDispatchers
-		# Scope selectors
-		if @selectors
-			(@[selKey] = scopeSelector(sel, @)) for selKey, sel of @selectors
 
-		# Make sure coffeescript doesn't generate an extra array here.
+		undefined
+
+	componentDidMount: ->
+		# If any observers were deferred, apply them now that we are mounted.
+		if @__deferObservedSelectors
+			for selector in @__deferObservedSelectors
+				selector.__isBeingObserved(true)
+			delete @__deferObservedSelectors
+
 		undefined
 }

src/ObservableSelectorMixin.coffee

@@ -1,6 +1,3 @@
-import { makeSelectorsObservable } from './makeSelectorObservable'
-
 export default ObservableSelectorMixin = {
-	componentWillMount: ->
-		makeSelectorsObservable(@)
+
 }

src/ReduxComponent.coffee

@@ -1,17 +1,45 @@
 import invariant from 'invariant'
 import { get, nullIdentity } from './util'
 import $$observable from 'symbol-observable'
+import makeSelectorObservable from './makeSelectorObservable'
+
+slice = [].slice
 
 ################################
 # Component prototype
 export default ReduxComponent = ( -> )
 
+# Indirect reducer to allow components to dynamically update reducers.
 indirectReducer = (state, action) ->
 	@__internalReducer.call(@, state, action)
 
+# Bind an action to automatically dispatch to the right store.
+dispatchAction = (actionCreator, self) -> ->
+	action = actionCreator.apply(self, arguments)
+	if action? then self.store.dispatch(action)
+
+# Scope a selector to a component.
+scopeSelector = (sel, self) -> ->
+	fwdArgs = slice.call(arguments)
+	fwdArgs[0] = self.state
+	sel.apply(self, fwdArgs)
+
 ReduxComponent.prototype.__init = ->
 	@reducer = indirectReducer.bind(@)
 	@__internalReducer = nullIdentity
+
+	# Bind action creators
+	if @actionCreators
+		(@[key] = func.bind(@)) for key, func of @actionCreators
+	# Bind actions
+	if @actionDispatchers
+		(@[key] = dispatchAction(func, @)) for key, func of @actionDispatchers
+	# Scope selectors
+	if @selectors
+		for key, func of @selectors
+			scoped = scopeSelector(func, @)
+			@[key] = makeSelectorObservable(@, scoped)
+
 	undefined
 
 ReduxComponent.prototype.updateReducer = ->

src/createClass.coffee

@@ -5,8 +5,14 @@ import ReduxComponent from './ReduxComponent'
 dontBindThese = {
 	applyMixin: true
 	updateReducer: true
+	isMounted: true
+	componentWillMount: true
+	componentDidMount: true
+	componentWillUnmount: true
+	getReducer: true
 	__willMount: true
 	__willUnmount: true
+	__didMount: true
 	__init: true
 }
 
@@ -16,24 +22,24 @@ export default createClass = (spec) ->
 	newSpec.applyMixin(newSpec, DefaultMixin)
 	newSpec.applyMixin(newSpec, spec)
 
-	Constructor = ->
+	SpecifiedReduxComponent = ->
 		# Allow Class() instead of new Class() if desired.
-		if not (@ instanceof Constructor) then return new Constructor()
+		if not (@ instanceof SpecifiedReduxComponent) then return new SpecifiedReduxComponent()
 		# Call prototype init
 		@__init()
 		# Magic bind all the functions on the prototype
-		(@[k] = f.bind(@)) for k,f of Constructor.prototype when typeof(f) is 'function' and (not dontBindThese[k])
+		(@[k] = f.bind(@)) for k,f of SpecifiedReduxComponent.prototype when typeof(f) is 'function' and (not dontBindThese[k])
 		# Constructor must return this.
 		@
 
 	# inherit from ReduxComponent
-	Constructor.prototype = new ReduxComponent
-	Constructor.prototype.constructor = Constructor
-	Constructor.prototype.__spec = spec
+	SpecifiedReduxComponent.prototype = new ReduxComponent
+	SpecifiedReduxComponent.prototype.constructor = SpecifiedReduxComponent
+	SpecifiedReduxComponent.prototype.__spec = spec
 	# Apply spec to prototype, statics to constructor
 	for own k,v of newSpec
-		Constructor.prototype[k] = v
+		SpecifiedReduxComponent.prototype[k] = v
 	for own k,v of (newSpec.statics or {})
-		Constructor[k] = v
+		SpecifiedReduxComponent[k] = v
 
-	Constructor
+	SpecifiedReduxComponent

src/makeSelectorObservable.coffee

@@ -1,4 +1,4 @@
-import { removeFromList, assign } from './util'
+import { removeFromList } from './util'
 import $$observable from 'symbol-observable'
 import ReduxComponent from './ReduxComponent'
 
@@ -34,34 +34,56 @@ subjectMixin = {
 		}
 }
 
+# Property definition for Symbol.observable
+observablePropertyDefinition = { writable: true, configurable: true, value: (-> @) }
+
+selectorIsBeingObserved = (isBeingObserved) ->
+	selector = @; componentInstance = @__componentInstance
+	if isBeingObserved
+		lastSeenValue = undefined
+
+		# If component isn't mounted, defer.
+		if not componentInstance.isMounted()
+			componentInstance.__deferObservedSelectors = (componentInstance.__deferObservedSelectors or []).concat([selector])
+			return
+
+		# Closure to detect changes in the selector.
+		observeState = ->
+			val = selector(componentInstance.store.getState())
+			if val isnt lastSeenValue
+				lastSeenValue = val; selector.next(val)
+
+		# Connect to the store; observe the initial state.
+		@__unsubscriber = componentInstance.store.subscribe(observeState)
+		observeState()
+	else
+		# If component isn't mounted, clear deferral.
+		if not componentInstance.isMounted()
+			removeFromList(componentInstance.__deferObservedSelectors, selector)
+			return
+
+		# Unsubscribe from the store if previously subscribed.
+		@__unsubscriber?(); delete @__unsubscriber
+	undefined
+
 # Make a selector on a ReduxComponentInstance into an ES7 Observable.
 export default makeSelectorObservable = (componentInstance, selector) ->
 	# Make the selector a Subject.
-	assign(selector, subjectMixin)
-
+	Object.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
-					lastSeenValue = val; selector.next(val)
-
-			@__unsubscriber = componentInstance.store.subscribe(observeState)
-			observeState()
-		else
-			@__unsubscriber?(); delete @__unsubscriber
-		undefined
+	Object.defineProperty(selector, $$observable, observablePropertyDefinition)
+	# Store the componentInstance on the selector.
+	selector.__componentInstance = componentInstance
+	# Attach the observation function
+	selector.__isBeingObserved = selectorIsBeingObserved
+	# Return the selector
+	selector
 
 # Make all selectors on the given component instance observable.
 export makeSelectorsObservable = (componentInstance) ->
 	if not (componentInstance instanceof ReduxComponent)
 		throw new Error("makeSelectorsObservable: argument must be instanceof ReduxComponent")
-	
+
 	if componentInstance.selectors
 		makeSelectorObservable(componentInstance, componentInstance[selKey]) for selKey of componentInstance.selectors
 	componentInstance

src/util.coffee

@@ -10,6 +10,7 @@ export get = (object, path) ->
 	if (index is length) then object else undefined
 
 export removeFromList = (list, value) ->
-	if (i = list.indexOf(value)) > -1 then list.splice(i, 1)
+	if list? and ((i = list.indexOf(value)) > -1) then list.splice(i, 1)
+	undefined
 
 export nullIdentity = (x) -> if x is undefined then null else x

test/04-observable-selectors.coffee

@@ -7,7 +7,9 @@
 expectTestSequence = (tests) ->
 	i = 0
 	{
-		next: (x) -> expect(tests[i++]?(x)).to.equal(true)
+		next: (x) ->
+			console.log "Observer saw", { x }
+			expect(tests[i++]?(x)).to.equal(true)
 		error: (x) -> throw x
 		complete: -> expect(i).to.equal(tests.length)
 	}
@@ -39,6 +41,7 @@ describe 'observable selectors: ', ->
 				}
 				selectors: {
 					getValue: (state) ->
+						console.log "Selector called:", { state }
 						state.payload
 				}
 			}
@@ -67,3 +70,17 @@ describe 'observable selectors: ', ->
 			rootComponentInstance.foo.setValue('goodbye world')
 			subscription.unsubscribe()
 			rootComponentInstance.foo.setValue('bar')
+
+	describe 'deferred: ', ->
+		it 'should create new store', ->
+			store = makeAStore({ foo: { payload: 'bar' } })
+
+		it 'should attach observer while unmounted', ->
+			fooComponent = new Subcomponent
+			rootComponentInstance = createComponent( { foo: fooComponent } )
+			fooComponent.getValue.subscribe(
+				expectTestSequence([ ((x) -> x is 'bar') ] )
+			)
+			expect(fooComponent.__deferObservedSelectors).to.be.ok
+			mountRootComponent(store, rootComponentInstance)
+			expect(fooComponent.__deferObservedSelectors).to.not.be.ok