Sticky states + "orphan" state + onExit = transition error about sticky-states

[christopherthielen]

This might be a difficult bug to fix in sticky-states.
here's a workaround for now: http://plnkr.co/edit/998o5W3o3yLqbkykJFy2?p=preview

[SahidMiller]

Hi, I've tried to solve this bug without making any internal code changes and came up with the following solution. This only attempts to solve TypeError: Cannot read property 'reduce' of undefined that was triggered by adding an onExit hook to one or more of your sticky states.

` $transitions.onStart({}, function(transition) {

var hasStickyInPath = (path) => _.any(path, parentsOrSelf => parentsOrSelf.sticky);
var leavingStickyStates = _.filter(transition._treeChanges.exiting, path => path.state && hasStickyInPath(path.state.path));    
var isLeavingNonStickyState = _.difference(transition._treeChanges.exiting, leavingStickyStates).length;

//Only fires when exiting a sticky state or a child of a sticky state (probably entering another child of sticky state) WHILE ALSO exiting an active non-sticky state
if(isLeavingNonStickyState && leavingStickyStates.length) {

  //Don't exit from root sticky states, since they're sticky!
  var removeStickyStatesFromExiting = transition._treeChanges.exiting.filter(path => !path.state.sticky);
  transition._treeChanges.exiting = removeStickyStatesFromExiting;

  //Add the sticky child's paths to _treeChanges.from in order to resolve its path and its resolves from the transition hooks. (This is technically the issue, the transition hooks have no idea we're going FROM this state TO the next even though it's present in EXITING)
  var stickyChildPath = _.find(leavingStickyStates, path => !path.state.sticky);

  //path.views[0].path has resolvable PathNodes unlike path.state.path, needed to resolve resolvables
  //TODO: handle multiple views
  var stickyChildAndParentsPath = stickyChildPath && stickyChildPath.views && stickyChildPath.views.length && stickyChildPath.views[0] && stickyChildPath.views[0].path;
  var addStickyChildAndParentsPathToPath = transition._treeChanges.from.concat(stickyChildAndParentsPath || []);
  var removeDuplicatePaths = _.pluck(_.groupBy(addStickyChildAndParentsPathToPath, (path) => path.state.name), 0);
  transition._treeChanges.from = removeDuplicatePaths;
}

})`

Basically, when exiting both a sticky state and non-sticky state, such as when navigating from one sticky child to another and deactivating a non-sticky state in the process, we have to:

1. stop the root sticky states from being exited, since they're sticky. (otherwise, it adds the root sticky state to treeChanges.exiting if there's an onExit on the child sticky state and can't transition)
2. notify the transition that we're transitioning FROM the child sticky state's path. (otherwise, it can't resolve the child sticky state's path or local resolves in the main transition hook, causing the TypeError: Cannot read property 'reduce' of undefined)
   2a. make sure the paths added to FROM have resolvables, in case the transition hooks have dependencies. This is why path.views[0].path is used instead of path.state.path.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

This does not mean that the issue is invalid. Valid issues may be reopened.

Thank you for your contributions.