refactor($view): implement ui-view/viewConfig registry

Author: christopherthielen

package.json

@@ -9,6 +9,10 @@
       "email": "[email protected]",
       "web": "https://radify.io"
     },
+    {
+      "name": "Chris Thielen",
+      "web": "https://github.com/christopherthielen"
+    },
     {
       "name": "Tim Kindberg",
       "web": "https://github.com/timkindberg"
@@ -63,7 +67,7 @@
     "load-grunt-tasks": "~0.4.0",
     "grunt-conventional-changelog": "~1.1.0",
     "grunt-ngdocs": "~0.1.7",
-    "grunt-ts": "https://github.com/christopherthielen/grunt-ts/tarball/2529971636e0eada4b81712f8d2f12fa89545ca8",
+    "grunt-ts": "~4.2.0",
     "grunt-webpack": "^1.0.10"
   },
   "main": "release/angular-ui-router"

src/common/common.ts

@@ -3,6 +3,16 @@ var { isDefined, isFunction, isNumber, isString, isObject, isArray, forEach, ext
 export { isDefined, isFunction, isNumber, isString, isObject, isArray, forEach, extend, copy, noop, toJson, fromJson, equals, identity };
 "use strict";
 
+export interface Predicate {
+  (any): boolean;
+}
+export interface F {
+  (any): any;
+}
+export interface HOF {
+  (fn1: F, fn2: F): F
+}
+
 export var abstractKey = 'abstract';
 export function inherit(parent, extra) {
   return extend(new (extend(function() {}, { prototype: parent }))(), extra);
@@ -89,6 +99,12 @@ export function indexOf(array, value) {
   return -1;
 }
 
+export const removeFrom = (array) => (obj) => {
+  var idx = array.indexOf(obj);
+  if (idx >= 0) array.splice(idx, 1);
+  return array;
+};
+
 /**
  * Merges a set of parameters with all parameters inherited between the common parents of the
  * current state and a given destination state.
@@ -207,9 +223,8 @@ export function filter<T>(collection: T, callback: Function): T {
   return <T>(arr ? resultarray : resultobj);
 }
 
-export function _filter(callback) {
-  return function (collection) { return filter(collection, callback); };
-}
+export const _filter = (callback) =>
+    (collection) => filter(collection, callback);
 
 export function find(collection, callback) {
   var result;
@@ -231,9 +246,8 @@ export function map<T> (collection: T, callback): T {
   return <T> result;
 }
 
-export function _map(callback) {
-  return function mapper(collection) { return map(collection, callback); };
-}
+export const _map = (callback) =>
+  (collection) => map(collection, callback);
 
 export function unnest(list) {
   var result = [];
@@ -326,7 +340,7 @@ export function pipe(...funcs: Function[]) {
   return compose.apply(null, [].slice.call(arguments).reverse());
 }
 
-export function prop(name): Function {
+export function prop(name): F {
   return function(obj) { return obj && obj[name]; };
 }
 
@@ -350,22 +364,22 @@ export function or(fn1, fn2): Function {
   };
 }
 
-export function is(ctor): Function {
+export function is(ctor): Predicate {
   return function(val) { return val != null && val.constructor === ctor || val instanceof ctor; };
 }
 
-export function eq(comp): Function {
+export function eq(comp): Predicate {
   return function(val) { return val === comp; };
 }
 
-export function isEq(fn1, fn2): Function {
+export function isEq(fn1: F, fn2: F): () => boolean {
   return function() {
     var args = [].slice.call(arguments);
     return fn1.apply(null, args) === fn2.apply(null, args);
   };
 }
 
-export function val(v): Function {
+export function val(v): F {
   return function() { return v; };
 }
 

src/state/state.ts

@@ -786,6 +786,8 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactoryProvider) {
 
     root.navigable = null;
 
+    $view.rootContext(root);
+
     extend($state, {
       params: new StateParams(),
       current: root.self,
@@ -1016,15 +1018,11 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactoryProvider) {
         },
 
         transitionSuccess: function transitionSuccess(transition) {
-          // TODO: sync on entering state, not transition success?
-          $view.sync(transition.views());
-          // TODO: Refactor this stuff. Maybe a Path can return views() for elements
-          transition.exiting().forEach(function(state) {
-            forEach(state.views, function (view, key) {
-              var found = $view.find(key, state.parent);
-              found && $view.reset(found);
-            });
-          });
+          // TODO: sync on entering/exiting state, not transition success?
+          transition.views("exiting").forEach($view.reset.bind($view));
+          $view.sync();
+          transition.views("entering").forEach($view.registerStateViewConfig.bind($view));
+          $view.sync();
 
           // Update globals in $state
           $state.$current = transition.$to().$state();

src/transition/transition.ts

@@ -13,8 +13,9 @@ import PathElement from "../resolve/pathElement";
 import {RejectFactory} from "./rejectFactory"
 import {StateParams, StateReference, IState, IPublicState} from "../state/state";
 import {ViewContext} from "../view/viewContext";
+import {StateViewConfig} from "../view/view";
 import {defaults, eq, extend, filter, flatten, forEach, identity, invoke, is, isEq, isFunction, isObject, isPromise, isDefined,
-    map, noop, not, objectKeys, parse, pattern, pipe, pluck, prop, toJson, unnest, unroll, val} from "../common/common";
+    map, noop, not, objectKeys, parse, pattern, pipe, pluck, prop, toJson, unnest, unroll, val, pairs} from "../common/common";
 
 var transitionCount = 0, REJECT = new RejectFactory();
 
@@ -261,13 +262,15 @@ export class Transition {
     return new ViewContext(pathElement, this._treeChanges.to, this._options, runtime.$injector);
   }
 
-  views(states) {
-    states = states || this._treeChanges.entering.states();
+  views(pathname: string = "entering") {
+    var path = this._treeChanges[pathname];
+    var states = states || path.states();
+    var params = this._to.params();
 
     return unnest(map(states, (state) => {
-      var elem = this._treeChanges.to.elementForState(state);
-      var toList = unroll((view) => [this.context(elem), view, this._to.params()]);
-      return toList(state.views);
+      var context = state, locals = this.context(path.elementForState(state));
+      const makeViewConfig = ([name, view]) => { return {name, view, context, locals, params} };
+      return pairs(state.views).map(makeViewConfig)
     }));
   }
 

src/transition/transitionService.ts

@@ -16,7 +16,7 @@ export interface ITransitionOptions {
   trace       ?: boolean,
   custom      ?: any,
   previous    ?: Transition,
-  current()   : Transition
+  current     ?: () => Transition
 }
 
 /**