Merge pull request #63 from ui-router/beta5

Beta5

Author: christopherthielen

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-router-ng2",
   "description": "State-based routing for Angular 2",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "scripts": {
     "clean": "shx rm -rf lib lib-esm _bundles _dec",
     "compile": "npm run clean && ngc",
@@ -39,7 +39,7 @@
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
   "dependencies": {
-    "ui-router-core": "=4.0.0",
+    "ui-router-core": "=5.0.0",
     "ui-router-rx": "=0.2.1"
   },
   "peerDependencies": {

rollup.config.js

@@ -22,7 +22,7 @@ uglifyOpts.output.comments = (node, comment) =>
 comment.type === 'comment2' && /@license/i.test(comment.value);
 
 let plugins = [
-  nodeResolve({jsnext: true}),
+  nodeResolve({ jsnext: true }),
   progress(),
   sourcemaps(),
   commonjs(),
@@ -41,9 +41,14 @@ function onwarn(warning) {
 }
 
 function isExternal(id) {
+  // ui-router-core and ui-router-rx should be external
   // All rxjs and @angular/* should be external
   // except for @angular/router/src/router_config_loader
-  let externals = [ /^rxjs/, /^@angular\/(?!router\/src\/router_config_loader)/, ];
+  let externals = [
+    /^ui-router-(core|rx)/,
+    /^rxjs/,
+    /^@angular\/(?!router\/src\/router_config_loader)/,
+  ];
   return externals.map(regex => regex.exec(id)).reduce((acc, val) => acc || !!val, false);
 }
 
@@ -89,6 +94,8 @@ const CONFIG = {
     'rxjs/operator/filter': 'Rx.Observable.prototype',
     'rxjs/operator/concatMap': 'Rx.Observable.prototype',
 
+    'ui-router-core': 'ui-router-core',
+    'ui-router-rx': 'ui-router-rx',
     '@angular/core': 'ng.core',
     '@angular/common': 'ng.common',
   }

src/decorators/index.ts

@@ -0,0 +1 @@
+export * from "./resolveData";

src/decorators/resolveData.ts

@@ -0,0 +1,44 @@
+/** @module decorators */
+/** */
+
+/**
+ * An ES7 decorator which maps resolve data to a component.
+ *
+ * Add this decorator to a property of your component.
+ * The decorator marks the component's property to receive resolve data.
+ *
+ * When resolve data of the same name (token) is found,
+ * the resolve data will be assigned to the component's property.
+ *
+ * #### Example:
+ *
+ * The component's properties receive resolve data from the state definition.
+ * ```js
+ * @Component({ selector: 'foo' })
+ * export class FooComponent {
+ *   @Resolve() resolveToken1;
+ *   @Resolve('resolveToken2') prop2;
+ *   @Input() @Resolve() resolveToken3;
+ * }
+ *
+ * const fooState = {
+ *   name: 'foo',
+ *   component: FooComponent,
+ *   resolve: [
+ *     { token: 'resolveToken1', deps: [], resolveFn: resolve1Fn },
+ *     { token: 'resolveToken2', deps: [], resolveFn: resolve2Fn },
+ *     { token: 'resolveToken3', deps: [], resolveFn: resolve3Fn },
+ *   ]
+ * }
+ * ```
+ *
+ * @param token The resolve token to bind to this property
+ *        (if omitted, the property name is used as the token)
+ */
+export function ResolveData(token?: string): PropertyDecorator {
+  return function(target, property: string) {
+    const inputs = target['__inputs'] = target['__inputs'] || {};
+    token = token || property;
+    inputs[token] = property;
+  };
+}

src/directives/uiSrefStatus.ts

@@ -3,7 +3,7 @@
 import { Directive, Output, EventEmitter, ContentChildren, QueryList } from '@angular/core';
 import { UISref } from './uiSref';
 import {
-  PathNode, Transition, TargetState, State, anyTrueR, tail, unnestR, Predicate, UIRouterGlobals, Param, PathFactory
+  PathNode, Transition, TargetState, StateObject, anyTrueR, tail, unnestR, Predicate, UIRouterGlobals, Param, PathFactory
 } from 'ui-router-core';
 
 import { Subscription } from 'rxjs/Subscription';
@@ -53,7 +53,7 @@ const inactiveStatus: SrefStatus = {
  */
 const pathMatches = (target: TargetState): Predicate<PathNode[]> => {
   if (!target.exists()) return () => false;
-  let state: State = target.$state();
+  let state: StateObject = target.$state();
   let targetParamVals = target.params();
   let targetPath: PathNode[] = PathFactory.buildPath(target);
   let paramSchema: Param[] = targetPath.map(node => node.paramSchema)

src/directives/uiView.ts

@@ -1,20 +1,16 @@
-/** @ng2api @module directives */ /** */
+/** @ng2api @module directives */
+/** */
 import {
-    Component, ComponentFactoryResolver, ViewContainerRef, Input, ComponentRef, Type,
-    ReflectiveInjector, ViewChild, Injector, Inject
+  Component, ComponentFactoryResolver, ViewContainerRef, Input, ComponentRef, Type, ReflectiveInjector, ViewChild,
+  Injector, Inject
 } from '@angular/core';
-import {ReflectorReader, reflector} from '../private_import_core';
-
+import { reflector } from '../private_import_core';
 import {
-  UIRouter, isFunction, Transition, parse, HookResult, TransitionHookFn, State, prop, StateDeclaration, inArray
-} from "ui-router-core";
-import {trace} from "ui-router-core";
-import {ViewContext, ViewConfig, ActiveUIView} from "ui-router-core";
-import {Ng2ViewConfig} from "../statebuilders/views";
-import {ResolveContext, NATIVE_INJECTOR_TOKEN} from "ui-router-core";
-import {flattenR} from "ui-router-core";
-import {MergeInjector} from "../mergeInjector";
-import { Subscription } from 'rxjs/Subscription';
+  UIRouter, isFunction, Transition, parse, TransitionHookFn, StateDeclaration, inArray, trace, ViewContext, ViewConfig,
+  ActiveUIView, ResolveContext, NATIVE_INJECTOR_TOKEN, flattenR
+} from 'ui-router-core';
+import { Ng2ViewConfig } from '../statebuilders/views';
+import { MergeInjector } from '../mergeInjector';
 
 /** @hidden */
 let id = 0;
@@ -39,7 +35,7 @@ interface InputMapping {
  *
  * @internalapi
  */
-const ng2ComponentInputs = (ng2CompClass: Type<any>) => {
+const ng2ComponentInputs = (ng2CompClass: Type<any>, component: any) => {
   /** Get "@Input('foo') _foo" inputs */
   let props = reflector.propMetadata(ng2CompClass);
   let _props = Object.keys(props || {})
@@ -61,7 +57,12 @@ const ng2ComponentInputs = (ng2CompClass: Type<any>) => {
       .reduce(flattenR, [])
       .map(input => ({ token: input, prop: input }));
 
-  return _props.concat(inputs) as InputMapping[];
+  /** Get @ResolveData('foo') _foo" inputs */
+  let __inputs = component.__inputs || {};
+  let resolves = Object.keys(__inputs)
+      .map(key => ({ token: key, prop: __inputs[key] }));
+
+  return _props.concat(inputs).concat(resolves) as InputMapping[];
 };
 
 /**
@@ -282,15 +283,16 @@ export class UIView {
    * to the resolve data.
    */
   applyInputBindings(ref: ComponentRef<any>, context: ResolveContext, componentClass) {
-    let bindings = this.uiViewData.config.viewDecl['bindings'] || {};
-    let explicitBoundProps = Object.keys(bindings);
+    const component = ref.instance;
+    const bindings = this.uiViewData.config.viewDecl['bindings'] || {};
+    const explicitBoundProps = Object.keys(bindings);
 
     // Supply resolve data to matching @Input('prop') or inputs: ['prop']
-    let explicitInputTuples = explicitBoundProps
+    const explicitInputTuples = explicitBoundProps
         .reduce((acc, key) => acc.concat([{ prop: key, token: bindings[key] }]), []);
-    let implicitInputTuples = ng2ComponentInputs(componentClass)
-        .filter(tuple => !inArray(explicitBoundProps, tuple.prop));
 
+    const implicitInputTuples = ng2ComponentInputs(componentClass, component)
+        .filter(tuple => !inArray(explicitBoundProps, tuple.prop));
 
     const addResolvable = (tuple: InputMapping) => ({
       prop: tuple.prop,
@@ -300,7 +302,7 @@ export class UIView {
     explicitInputTuples.concat(implicitInputTuples)
         .map(addResolvable)
         .filter(tuple => tuple.resolvable && tuple.resolvable.resolved)
-        .forEach(tuple => { ref.instance[tuple.prop] = tuple.resolvable.data });
+        .forEach(tuple => { component[tuple.prop] = tuple.resolvable.data });
 
     // Initiate change detection for the newly created component
     ref.changeDetectorRef.detectChanges();

src/index.ts

@@ -1,9 +1,12 @@
 /** @ng2api @module ng2 */ /** for typedoc */
-export * from "ui-router-core";
+
 export * from "./interface";
+export * from "./decorators/index";
 export * from "./providers";
 export * from "./uiRouterNgModule";
 export * from "./uiRouterConfig";
 export * from "./directives/directives";
 export * from "./statebuilders/views";
 export * from "./lazyLoad/lazyLoadNgModule";
+
+export * from "ui-router-core";

src/lazyLoad/lazyLoadNgModule.ts

@@ -2,9 +2,10 @@
 /** */
 import { NgModuleRef, Injector, NgModuleFactory, Type, Compiler, NgModuleFactoryLoader } from "@angular/core";
 import {
-  Transition, LazyLoadResult, UIRouter, Resolvable, NATIVE_INJECTOR_TOKEN, isString, unnestR, inArray
+  Transition, LazyLoadResult, UIRouter, Resolvable, NATIVE_INJECTOR_TOKEN, isString, unnestR, inArray, StateObject,
+  uniqR
 } from "ui-router-core";
-import { RootModule, UIROUTER_ROOT_MODULE, UIROUTER_MODULE_TOKEN } from "../uiRouterNgModule";
+import { RootModule, UIROUTER_ROOT_MODULE, UIROUTER_MODULE_TOKEN, StatesModule } from "../uiRouterNgModule";
 import { applyModuleConfig } from "../uiRouterConfig";
 
 /**
@@ -143,14 +144,20 @@ export function applyNgModule(transition: Transition, ng2Module: NgModuleRef<any
   // Final name (without the .**)
   let replacementName = isFuture && isFuture[1];
 
-  let newRootModules: RootModule[] = multiProviderParentChildDelta(parentInjector, injector, UIROUTER_ROOT_MODULE);
+  let newRootModules = multiProviderParentChildDelta(parentInjector, injector, UIROUTER_ROOT_MODULE)
+      .reduce(uniqR, []) as RootModule[];
+  let newChildModules= multiProviderParentChildDelta(parentInjector, injector, UIROUTER_MODULE_TOKEN)
+      .reduce(uniqR, []) as StatesModule[];
+
   if (newRootModules.length) {
     console.log(newRootModules);
     throw new Error('Lazy loaded modules should not contain a UIRouterModule.forRoot() module');
   }
 
-  let newChildModules: RootModule[] = multiProviderParentChildDelta(parentInjector, injector, UIROUTER_MODULE_TOKEN);
-  newChildModules.forEach(module => applyModuleConfig(uiRouter, injector, module));
+  let newStateObjects: StateObject[] = newChildModules
+      .map(module => applyModuleConfig(uiRouter, injector, module))
+      .reduce(unnestR, [])
+      .reduce(uniqR, []);
 
   let replacementState = registry.get(replacementName);
   if (!replacementState || replacementState === originalState) {
@@ -164,16 +171,11 @@ export function applyNgModule(transition: Transition, ng2Module: NgModuleRef<any
   // Supply the newly loaded states with the Injector from the lazy loaded NgModule.
   // If a tree of states is lazy loaded, only add the injector to the root of the lazy loaded tree.
   // The children will get the injector by resolve inheritance.
-  let newStates = newChildModules.map(module => module.states)
-      .reduce(unnestR, [])
-      .map(state => state.$$state());
-
-  let newParentStates = newStates.filter(state => !inArray(newStates, state.parent));
+  let newParentStates = newStateObjects.filter(state => !inArray(newStateObjects, state.parent));
 
   // Add the Injector to the top of the lazy loaded state tree as a resolve
   newParentStates.forEach(state => state.resolvables.push(Resolvable.fromData(NATIVE_INJECTOR_TOKEN, injector)));
 
-
   return {};
 }
 

src/statebuilders/lazyLoad.ts

@@ -1,7 +1,7 @@
 /** @module ng2 */
 /** */
 import { LazyLoadResult, Transition, StateDeclaration } from "ui-router-core"; // has or is using
-import { BuilderFunction, State } from "ui-router-core";
+import { BuilderFunction, StateObject } from "ui-router-core";
 import { loadNgModule } from "../lazyLoad/lazyLoadNgModule";
 
 /**
@@ -47,7 +47,7 @@ import { loadNgModule } from "../lazyLoad/lazyLoadNgModule";
  * ```
  *
  */
-export function ng2LazyLoadBuilder(state: State, parent: BuilderFunction) {
+export function ng2LazyLoadBuilder(state: StateObject, parent: BuilderFunction) {
   let loadNgModuleFn = state['loadChildren'];
   return loadNgModuleFn ? loadNgModule(loadNgModuleFn) : state.lazyLoad;
 }

src/statebuilders/views.ts

@@ -1,5 +1,5 @@
 /** @module ng2 */ /** */
-import {State} from "ui-router-core";
+import {StateObject} from "ui-router-core";
 import {PathNode} from "ui-router-core";
 import {pick, forEach} from "ui-router-core";
 import {ViewConfig} from "ui-router-core";
@@ -16,7 +16,7 @@ import {ViewService} from "ui-router-core";
  * If no `views: {}` property exists on the [[StateDeclaration]], then it creates the `views` object and
  * applies the state-level configuration to a view named `$default`.
  */
-export function ng2ViewsBuilder(state: State) {
+export function ng2ViewsBuilder(state: StateObject) {
   let views: { [key: string]: Ng2ViewDeclaration } = {},
       viewsObject = state.views || {"$default": pick(state, ["component", "bindings"])};