BC-BREAK: Transition Hooks are no longer injected (onBefore/onStart/onExit/onRetain/onEnter/onFinish/onSuccess/onError)

Previously, a hook like `['$state', ($state) => $state.target('foo')]` would get `$state` injected.
Now, all hooks receive three parameters:
- transition: the current Transition
- injector: the $injector (ng1) or Injector (ng2) or fake injector (non-angular)
- state: for onEnter/onRetain/onExit hooks only, the State which the hook is being run for. This value will be null for onBefore/onStart/onFinish/onSuccess/onError hooks.

Refactor your hooks
from: `['$state', ($state) => $state.target('foo')]`
to: `(trans, injector) => injector.get('$state').target('foo')`

feat(onEnter): Hooks receive 3 args: (Transition, Injector, State) and are not injectable
feat(onEnter): state declaration onEnter hooks are still injected

Author: christopherthielen

package.json

@@ -11,6 +11,7 @@
 
     "test:ng1": "karma start config/karma.ng15.js",
     "test:ng1:debug": "karma start config/karma.ng15.js --singleRun=false --browsers=Chrome --autoWatch=true --autoWatchInterval=1",
+    "test:ng1:watch": "node_modules/watch/cli.js 'npm run test:ng1' src test",
 
     "test:ng12": "karma start config/karma.ng12.js",
     "test:ng13": "karma start config/karma.ng13.js",

src/common/strings.ts

@@ -68,7 +68,7 @@ export function fnToString(fn: IInjectable) {
 const isTransitionRejectionPromise = Rejection.isTransitionRejectionPromise;
 
 let stringifyPatternFn = null;
-let stringifyPattern = function(val) {
+let stringifyPattern = function(value) {
   stringifyPatternFn = stringifyPatternFn || pattern([
     [not(isDefined),                  val("undefined")],
     [isNull,                          val("null")],
@@ -81,7 +81,7 @@ let stringifyPattern = function(val) {
     [val(true),                       identity]
   ]);
 
-  return stringifyPatternFn(val);
+  return stringifyPatternFn(value);
 };
 
 export function stringify(o: Object) {

src/globals.ts

@@ -50,7 +50,7 @@ export class UIRouterGlobals {
   successfulTransitions = new Queue<Transition>([], 1);
 
   constructor(transitionService: TransitionService) {
-    const beforeNewTransition = ($transition$) => {
+    const beforeNewTransition = ($transition$: Transition) => {
 
       this.transition = $transition$;
       this.transitionHistory.enqueue($transition$);
@@ -70,6 +70,6 @@ export class UIRouterGlobals {
 
     };
 
-    transitionService.onBefore({}, ['$transition$', beforeNewTransition]);
+    transitionService.onBefore({}, beforeNewTransition);
   }
 }

src/ng1.ts

@@ -7,8 +7,8 @@
 export * from "./core";
 
 export * from "./ng1/services";
-export * from "./ng1/viewsBuilder";
-export * from "./ng1/resolvesBuilder";
+export * from "./ng1/statebuilders/views";
+export * from "./ng1/statebuilders/resolve";
 
 import "./ng1/stateDirectives";
 import "./ng1/stateFilters";

src/ng1/services.ts

@@ -20,15 +20,17 @@ import {Resolvable} from "../resolve/resolvable";
 import {ResolveContext} from "../resolve/resolveContext";
 import {State} from "../state/stateObject";
 import {trace} from "../common/trace";
-import {ng1ViewsBuilder, ng1ViewConfigFactory, Ng1ViewConfig} from "./viewsBuilder";
+import {ng1ViewsBuilder, ng1ViewConfigFactory, Ng1ViewConfig} from "./statebuilders/views";
 import {TemplateFactory} from "./templateFactory";
-import {ng1ResolveBuilder} from "./resolvesBuilder";
+import {ng1ResolveBuilder} from "./statebuilders/resolve";
 import {StateParams} from "../params/stateParams";
 import {TransitionService} from "../transition/transitionService";
 import {StateService} from "../state/stateService";
 import {StateProvider} from "../state/state";
 import {UrlRouterProvider, UrlRouter} from "../url/urlRouter";
 import {UrlMatcherFactory} from "../url/urlMatcherFactory";
+import {Transition} from "../transition/transition";
+import {getStateHookBuilder} from "./statebuilders/onEnterExitRetain";
 
 /** @hidden */
 let app = angular.module("ui.router.angular1", []);
@@ -166,9 +168,12 @@ function ng1UIRouter($locationProvider) {
   // Create a new instance of the Router when the ng1UIRouterProvider is initialized
   router = new UIRouter();
 
-  // Apply ng1 `views` builder to the StateBuilder
+  // Apply ng1 specific StateBuilder code for `views`, `resolve`, and `onExit/Retain/Enter` properties
   router.stateRegistry.decorator("views", ng1ViewsBuilder);
   router.stateRegistry.decorator("resolve", ng1ResolveBuilder);
+  router.stateRegistry.decorator("onExit", getStateHookBuilder("onExit"));
+  router.stateRegistry.decorator("onRetain", getStateHookBuilder("onRetain"));
+  router.stateRegistry.decorator("onEnter", getStateHookBuilder("onEnter"));
 
   router.viewService.viewConfigFactory('ng1', ng1ViewConfigFactory);
 
@@ -279,8 +284,8 @@ angular.module('ui.router.state').factory('$stateParams', ['ng1UIRouter', (ng1UI
 
 // $transitions service and $transitionsProvider
 function getTransitionsProvider() {
-  loadAllControllerLocals.$inject = ['$transition$'];
-  function loadAllControllerLocals($transition$) {
+  // TODO: check if we can remove loadAllControllerLocals.  Shouldn't be necessary without JIT resolve policy
+  function loadAllControllerLocals($transition$: Transition) {
     const loadLocals = (vc: Ng1ViewConfig) => {
       let node = (<Node> find($transition$.treeChanges().to, propEq('state', vc.viewDecl.$context)));
       // Temporary fix; This whole callback should be nuked when fixing #2662
@@ -297,7 +302,7 @@ function getTransitionsProvider() {
           .then(() => vc.locals = map(resolvables, res => res.data));
     };
 
-    let loadAllLocals = $transition$.views("entering").filter(vc => !!vc.controller).map(loadLocals);
+    let loadAllLocals = $transition$.views("entering").filter(vc => !!(<Ng1ViewConfig>vc).controller).map(loadLocals);
     return services.$q.all(loadAllLocals).then(noop);
   }
   router.transitionService.onFinish({}, loadAllControllerLocals);

src/ng1/stateDirectives.ts

@@ -334,9 +334,7 @@ function $StateRefActiveDirective($state, $stateParams, $interpolate, $transitio
       };
 
       $scope.$on('$stateChangeSuccess', update);
-      let updateAfterTransition = ['$transition$', function($transition$) { $transition$.promise.then(update); }];
-      let deregisterFn = $transitions.onStart({}, updateAfterTransition);
-      $scope.$on('$destroy', deregisterFn);
+      $scope.$on('$destroy', $transitions.onStart({}, (trans) => trans.promise.then(update) && null));
 
       function addState(stateName, stateParams, activeClass) {
         var state = $state.get(stateName, stateContext($element));

src/ng1/stateEvents.ts

@@ -153,11 +153,15 @@ var $stateNotFound;
     return memo;
   }
 
-  stateChangeStartHandler.$inject = ['$transition$', '$stateEvents', '$rootScope', '$state', '$urlRouter'];
-  function stateChangeStartHandler($transition$: Transition, $stateEvents, $rootScope, $state, $urlRouter) {
+  function stateChangeStartHandler($transition$: Transition, $injector) {
     if (!$transition$.options().notify || !$transition$.valid() || $transition$.ignored())
       return;
 
+    let $stateEvents = $injector.get('$stateEvents');
+    let $rootScope = $injector.get('$rootScope');
+    let $state = $injector.get('$state');
+    let $urlRouter = $injector.get('$urlRouter');
+
     let enabledEvents = $stateEvents.provider.enabled();
 
 

src/ng1/statebuilders/onEnterExitRetain.ts

@@ -0,0 +1,23 @@
+/** @module ng1 */ /** */
+import {State} from "../../state/stateObject";
+import {TransitionStateHookFn, HookResult} from "../../transition/interface";
+import {Transition} from "../../transition/transition";
+import IInjectorService = angular.auto.IInjectorService;
+import {services} from "../../common/coreservices";
+
+/**
+ * This is a [[StateBuilder.builder]] function for angular1 `onEnter`, `onExit`,
+ * `onRetain` callback hooks on a [[Ng1StateDeclaration]].
+ *
+ * When the [[StateBuilder]] builds a [[State]] object from a raw [[StateDeclaration]], this builder
+ * ensures that those hooks are injectable for angular-ui-router (ng1).
+ */
+export const getStateHookBuilder = (hookName) =>
+function stateHookBuilder(state: State, parentFn): TransitionStateHookFn {
+  let hook = state[hookName];
+  if (!hook) return;
+  
+  return function decoratedNg1Hook(trans: Transition, inj: IInjectorService): HookResult {
+    services.$injector.invoke(hook, this, trans.resolves());
+  }
+};

src/ng1/resolvesBuilder.ts renamed to src/ng1/statebuilders/resolve.ts

@@ -1,7 +1,7 @@
 /** @module ng1 */ /** */
-import {State} from "../state/stateObject";
-import {forEach} from "../common/common";
-import {isString} from "../common/predicates";
+import {State} from "../../state/stateObject";
+import {forEach} from "../../common/common";
+import {isString} from "../../common/predicates";
 
 /**
  * This is a [[StateBuilder.builder]] function for angular1 `resolve:` block on a [[Ng1StateDeclaration]].

src/ng1/viewsBuilder.ts renamed to src/ng1/statebuilders/views.ts

@@ -1,16 +1,16 @@
 /** @module ng1 */ /** */
-import {State} from "../state/stateObject";
-import {pick, forEach, anyTrueR, unnestR} from "../common/common";
-import {kebobString} from "../common/strings";
-import {ViewConfig} from "../view/interface";
-import {Ng1ViewDeclaration} from "./interface";
-import {ViewService} from "../view/view";
-import {isInjectable, isDefined, isString, isObject} from "../common/predicates";
-import {services} from "../common/coreservices";
-import {trace} from "../common/trace";
-import {Node} from "../path/node";
-import {TemplateFactory} from "./templateFactory";
-import {ResolveContext} from "../resolve/resolveContext";
+import {State} from "../../state/stateObject";
+import {pick, forEach, anyTrueR, unnestR} from "../../common/common";
+import {kebobString} from "../../common/strings";
+import {ViewConfig} from "../../view/interface";
+import {Ng1ViewDeclaration} from "../interface";
+import {ViewService} from "../../view/view";
+import {isInjectable, isDefined, isString, isObject} from "../../common/predicates";
+import {services} from "../../common/coreservices";
+import {trace} from "../../common/trace";
+import {Node} from "../../path/node";
+import {TemplateFactory} from "../templateFactory";
+import {ResolveContext} from "../../resolve/resolveContext";
 
 export const ng1ViewConfigFactory = (node, view) => new Ng1ViewConfig(node, view);