0.3.1: added component.isMounted()

Author: wcjohnson

CHANGELOG.md

@@ -1,5 +1,15 @@
 # 0.3
 
+## 0.3.1
+
+### Added `component.isMounted()` API
+
+As we roll out increased support for dynamic mounting, knowing whether or not a component is currently mounted becomes increasingly relevant. In previous versions this could be checked by looking for the `__mounted` internal variable on the component instance (which is now deprecated)
+
+There is now a `component.isMounted()` API which returns true when the component is mounted and false otherwise.
+
+## 0.3.0
+
 ### **BREAKING CHANGE:** New component mounting API
 
 In light of the architectural changes in 0.2, and because the old API was quite confusing, we've designed a new API for mounting components. The `mounter` function has been eliminated and replaced with an imperative API for mounting and unmounting.

docs/API/Components.md

@@ -42,6 +42,12 @@ this.componentWillUnmount = =>
 Invoked on a component instance immediately before its reducer is removed from the state tree.
 > When multiple nodes are unmounted simultaneously, their ```componentWillUnmount()``` methods are called in postorder with respect to their place in the state tree. (leaf nodes first)
 
+#### isMounted
+```coffeescript
+this.isMounted = => boolean
+```
+Returns `true` if the component's reducer is mounted to the Redux store, `false` otherwise.
+
 ### Redux state
 
 #### this.state

package.json

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

src/ReduxComponent.coffee

@@ -19,16 +19,24 @@ ReduxComponent.prototype.updateReducer = ->
 	if process.env.NODE_ENV isnt 'production'
 		invariant(typeof @getReducer is 'function', "redux-component of type #{@displayName} (mounted at location #{@path}) is updating its reducer, but does not have a getReducer() method.")
 	@__internalReducer = @getReducer(@state)
+	undefined
 
 ReduxComponent.prototype.__willMount = (@store, @path = [], @parentComponent = null) ->
 	invariant(not @__mounted, "redux-component of type #{@displayName} was multiply initialized. This can indicate a cycle in your component graph, which is illegal. Make sure each instance is only used once in your tree. If you wish to use a component in multiple places, construct additional instances.")
-	@__mounted = true
 	@componentWillMount?()
 	#@reducer = indirectReducer.bind(@)
 	@updateReducer()
+	undefined
+
+ReduxComponent.prototype.__didMount = ->
+	@__mounted = true
+	@componentDidMount?()
+	undefined
 
 ReduxComponent.prototype.__willUnmount = ->
 	invariant(@__mounted, "redux-component of type #{@displayName} was unmounted when not mounted. This can indicate an issue in a dynamic reducer component such as redux-components-map.")
 	@componentWillUnmount?()
 	@__internalReducer = nullIdentity
 	delete @__mounted
+
+ReduxComponent.prototype.isMounted = -> @__mounted?

src/mountComponent.coffee

@@ -1,15 +1,15 @@
-export mountRootComponent = (store, componentInstance) ->
-	componentInstance.__willMount(store, [], null)
-	store.replaceReducer(componentInstance.reducer)
-	componentInstance.componentDidMount?()
-
 export willMountComponent = (store, componentInstance, path) ->
 	componentInstance.__manualMount = true
 	componentInstance.__willMount(store, path, null)
 	componentInstance.reducer
 
 export didMountComponent = (componentInstance) ->
-	componentInstance.componentDidMount?()
+	componentInstance.__didMount()
 
 export willUnmountComponent = (componentInstance) ->
 	componentInstance.__willUnmount()
+
+export mountRootComponent = (store, componentInstance) ->
+	reducer = willMountComponent(store, componentInstance, [])
+	store.replaceReducer(reducer)
+	didMountComponent(componentInstance)

src/subtree.coffee

@@ -6,7 +6,9 @@ import createClass from './createClass'
 
 ##### SubtreeMixin
 attachComponent = (parentComponent, key, component) ->
-	# XXX: invariant or warning here that key is not shadowing anything on the instance?
+	# Development invariant: prevent shadowing of parent keys
+	if process.env.NODE_ENV isnt 'production'
+		invariant(not parentComponent[key]?, "redux-component of type #{parentComponent.displayName} (mounted at location #{parentComponent.path}) is using SubtreeMixin, and one of its children would shadow the key `#{key}` on the parent component.")
 	parentComponent[key] = component
 	childPath = parentComponent.path.concat( [ key ] )
 	component.__willMount(parentComponent.store, childPath, parentComponent)
@@ -35,7 +37,7 @@ export SubtreeMixin = {
 		# Monkey-patch didMount to call subtree didMounts in the right order.
 		myDidMount = @__originalDidMount = @componentDidMount
 		@componentDidMount = ->
-			@[k]?.componentDidMount?() for k of __reducerMap
+			@[k]?.__didMount() for k of __reducerMap
 			myDidMount?.call(@)
 
 	componentWillUnmount: ->

test/01-basic.coffee

@@ -26,6 +26,7 @@ describe 'basic functions: ', ->
 		it 'should mount instance of class on store', ->
 			rootComponentInstance = new Subcomponent()
 			mountRootComponent(store, rootComponentInstance)
+			expect(rootComponentInstance.isMounted()).to.be.ok
 
 		it 'should know about the store', ->
 			expect(rootComponentInstance.store).to.equal(store)
@@ -60,7 +61,9 @@ describe 'basic functions: ', ->
 
 		it 'should mount instance of class on store', ->
 			rootComponentInstance = new Subcomponent()
+			expect(rootComponentInstance.isMounted()).to.not.be.ok
 			mountRootComponent(store, rootComponentInstance)
+			expect(rootComponentInstance.isMounted()).to.be.ok
 
 		it 'should set the default state', ->
 			expect(store.getState()).to.deep.equal({})

test/02-subtree.coffee

@@ -77,6 +77,7 @@ describe 'subtree: ', ->
 		it 'should instantiate class keys on subtree', ->
 			assert(not(Subcomponent instanceof Subcomponent))
 			assert(rootComponentInstance.bar instanceof Subcomponent)
+			assert(rootComponentInstance.bar.isMounted())
 
 		it 'should scope actions and selectors', ->
 			store.dispatch(rootComponentInstance.foo.setValue('foo'))