feat(resolve): auto-map resolve values to matching component inputs in AoT

When angular started stripping reflect metadata for AoT, it broke our ability to introspect a component to determine what inputs it had.
In this commit angular/angular@bd64ab5 the inputs/outputs are added to the component factory, and we now have a public API to introspect component inputs.

Closes #94
Closes #89
Closes #36

Author: christopherthielen

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@uirouter/angular",
-  "description": "State-based routing for Angular 2",
-  "version": "1.0.0-beta.5",
+  "description": "State-based routing for Angular",
+  "version": "1.0.0-beta.6",
   "scripts": {
     "clean": "shx rm -rf lib lib-esm _bundles _dec",
     "compile": "npm run clean && ngc",

src/directives/uiView.ts

@@ -2,9 +2,9 @@
 /** */
 import {
   Component, ComponentFactoryResolver, ViewContainerRef, Input, ComponentRef, Type, ReflectiveInjector, ViewChild,
-  Injector, Inject
+  Injector, Inject, ComponentFactory
 } from '@angular/core';
-import { ɵReflectorReader as ReflectorReader } from '@angular/core';
+
 import {
   UIRouter, isFunction, Transition, parse, TransitionHookFn, StateDeclaration, inArray, trace, ViewContext, ViewConfig,
   ActiveUIView, ResolveContext, NATIVE_INJECTOR_TOKEN, flattenR
@@ -35,29 +35,8 @@ interface InputMapping {
  *
  * @internalapi
  */
-const ng2ComponentInputs = (reflector: ReflectorReader, ng2CompClass: Type<any>, component: any) => {
-  /** Get "@Input('foo') _foo" inputs */
-  let props = reflector.propMetadata(ng2CompClass);
-  let _props = Object.keys(props || {})
-      // -> [ { key: string, anno: annotations[] } ] tuples
-      .map(key => ({ key, annoArr: props[key] }))
-      // -> flattened to [ { key: string, anno: annotation } ] tuples
-      .reduce((acc, tuple) => acc.concat(tuple.annoArr.map(anno => ({ key: tuple.key, anno }))), [])
-      // Only Inputs
-      .filter(tuple => tuple.anno instanceof Input)
-      // If they have a bindingPropertyName, i.e. "@Input('foo') _foo", then foo, else _foo
-      .map(tuple => ({ token: tuple.anno.bindingPropertyName || tuple.key, prop: tuple.key }));
-
-  /** Get "inputs: ['foo']" inputs */
-  let inputs = reflector.annotations(ng2CompClass)
-      // Find the ComponentMetadata class annotation
-      .filter(x => x instanceof Component && !!x.inputs)
-      // Get the .inputs string array
-      .map(x => x.inputs)
-      .reduce(flattenR, [])
-      .map(input => ({ token: input, prop: input }));
-
-  return _props.concat(inputs) as InputMapping[];
+const ng2ComponentInputs = (factory: ComponentFactory<any>): InputMapping[] => {
+  return factory.inputs.map(input => ({ prop: input.propName, token: input.templateName }));
 };
 
 /**
@@ -149,7 +128,6 @@ export class UIView {
       public router: UIRouter,
       @Inject(UIView.PARENT_INJECT) parent,
       public viewContainerRef: ViewContainerRef,
-      private reflector: ReflectorReader
   ) {
     this.parent = parent;
   }
@@ -189,7 +167,7 @@ export class UIView {
       const state: StateDeclaration = parse("uiViewData.config.viewDecl.$context.self")(this);
 
       if (trans.exiting().indexOf(state) !== -1) {
-        trans.onStart({}, function(trans) {
+        trans.onStart({}, function() {
           return uiCanExitFn.call(instance, trans);
         });
       }
@@ -244,7 +222,7 @@ export class UIView {
     this.componentRef = this.componentTarget.createComponent(compFactory, undefined, componentInjector);
 
     // Wire resolves to @Input()s
-    this.applyInputBindings(this.componentRef, context, componentClass);
+    this.applyInputBindings(compFactory, this.componentRef, context, componentClass);
   }
 
   /**
@@ -262,7 +240,7 @@ export class UIView {
     let resolvables = context.getTokens().map(token => context.getResolvable(token)).filter(r => r.resolved);
     let newProviders = resolvables.map(r => ({ provide: r.token, useValue: r.data }));
 
-    var parentInject = { context: this.uiViewData.config.viewDecl.$context, fqn: this.uiViewData.fqn };
+    let parentInject = { context: this.uiViewData.config.viewDecl.$context, fqn: this.uiViewData.fqn };
     newProviders.push({ provide: UIView.PARENT_INJECT, useValue: parentInject });
 
     let parentComponentInjector = this.viewContainerRef.injector;
@@ -278,16 +256,24 @@ export class UIView {
    * Finds component inputs which match resolves (by name) and sets the input value
    * to the resolve data.
    */
-  applyInputBindings(ref: ComponentRef<any>, context: ResolveContext, componentClass) {
+  applyInputBindings(factory: ComponentFactory<any>, ref: ComponentRef<any>, context: ResolveContext, componentClass) {
     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']
+    // Returns the actual component property for a renamed an input renamed using `@Input('foo') _foo`.
+    // return the `_foo` property
+    const renamedInputProp = (prop: string) => {
+      const input = factory.inputs.find(i => i.templateName === prop);
+      return input && input.propName || prop;
+    };
+
+    // Supply resolve data to component as specified in the state's `bindings: {}`
     const explicitInputTuples = explicitBoundProps
-        .reduce((acc, key) => acc.concat([{ prop: key, token: bindings[key] }]), []);
+        .reduce((acc, key) => acc.concat([{ prop: renamedInputProp(key), token: bindings[key] }]), []);
 
-    const implicitInputTuples = ng2ComponentInputs(this.reflector, componentClass, component)
+    // Supply resolve data to matching @Input('prop') or inputs: ['prop']
+    const implicitInputTuples = ng2ComponentInputs(factory)
         .filter(tuple => !inArray(explicitBoundProps, tuple.prop));
 
     const addResolvable = (tuple: InputMapping) => ({
@@ -298,7 +284,7 @@ export class UIView {
     explicitInputTuples.concat(implicitInputTuples)
         .map(addResolvable)
         .filter(tuple => tuple.resolvable && tuple.resolvable.resolved)
-        .forEach(tuple => { component[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/private_import_core.ts

@@ -1,4 +1,3 @@
-/// <reference path='../typings/jasmine/jasmine.d.ts' />
 import {equals} from "@uirouter/core";
 declare var testablePromise;
 

test/matchers.ts

@@ -4,7 +4,7 @@ import { UIView } from '../../src/directives/uiView';
 import { memoryLocationPlugin, UIRouter } from '@uirouter/core';
 import { NgModuleFactoryLoader, SystemJsNgModuleLoader } from '@angular/core';
 
-declare var System;
+declare let System;
 
 let futureFoo = {
   name: 'foo.**',
@@ -16,19 +16,18 @@ function configFn(router: UIRouter) {
   router.plugin(memoryLocationPlugin);
 }
 
-beforeEach(() => {
-  let routerModule = UIRouterModule.forRoot({ useHash: true, states: [futureFoo], config: configFn });
-
-  TestBed.configureTestingModule({
-    declarations: [],
-    imports: [routerModule],
-    providers: [
-      { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader },
-    ]
-  });
-});
-
 describe('lazy loading', () => {
+  beforeEach(() => {
+    let routerModule = UIRouterModule.forRoot({ useHash: true, states: [futureFoo], config: configFn });
+
+    TestBed.configureTestingModule({
+      declarations: [],
+      imports: [routerModule],
+      providers: [
+        { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader },
+      ]
+    });
+  });
 
   it('should lazy load a module', async(inject([UIRouter], (router: UIRouter) => {
     const fixture = TestBed.createComponent(UIView);
@@ -46,7 +45,7 @@ describe('lazy loading', () => {
       names = stateRegistry.get().map(state => state.name).sort();
       expect(names.length).toBe(4);
       expect(names).toEqual(['', 'foo', 'foo.child1', 'foo.child2']);
-    })
+    });
   })));
 
 

test/ngModule/lazyModule.spec.ts

@@ -15,7 +15,5 @@
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true
   },
-  "files": [
-    "./index.js"
-  ]
+  "include": ["./**/*.ts"]
 }

test/tsconfig.json

@@ -2,8 +2,8 @@ import { Component, DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import { UIRouterModule } from '../src/uiRouterNgModule';
-import { UISref } from '../src/directives/uiSref';
+import { UIRouterModule } from '../../src/uiRouterNgModule';
+import { UISref } from '../../src/directives/uiSref';
 import { UIRouter } from '@uirouter/core';
 import { Subject } from 'rxjs/Subject';
 
@@ -34,7 +34,7 @@ describe('uiSref', () => {
       beforeEach(() => {
         fixture = TestBed.configureTestingModule({
           declarations: [TestComponent],
-          imports: [UIRouterModule]
+          imports: [UIRouterModule.forRoot({ useHash: true })]
         }).createComponent(TestComponent);
         fixture.detectChanges();
         des = fixture.debugElement.queryAll(By.directive(UISref));
@@ -61,7 +61,7 @@ describe('uiSref', () => {
         } as any;
         TestBed.configureTestingModule({
           declarations: [TestComponent],
-          imports: [UIRouterModule]
+          imports: [UIRouterModule.forRoot({ useHash: true })]
         }).overrideComponent(TestComponent, {
           set: {
             providers: [

test/uiSref.spec.ts renamed to test/uiSref/uiSref.spec.ts

@@ -0,0 +1,72 @@
+import { Component, DebugElement, Input, NgModuleFactoryLoader, SystemJsNgModuleLoader } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UIRouterModule } from '../../src/uiRouterNgModule';
+import { Ng2StateDeclaration } from '../../src/interface';
+import { UIView } from '../../src/directives/uiView';
+import { By } from '@angular/platform-browser';
+import { UIRouter } from '@uirouter/core';
+
+describe('uiView', () => {
+
+  describe('should map resolve data to inputs', () => {
+    @Component({ template: `<h3>hey</h3> ` })
+    class ManyResolvesComponent {
+      @Input() resolve1;
+      @Input() resolve2;
+      @Input('resolve3') _resolve3;
+      @Input('resolve4') _resolve4;
+    }
+
+    let comp: ManyResolvesComponent;
+    let fixture: ComponentFixture<UIView>;
+    let router: UIRouter;
+
+    beforeEach((done) => {
+      const manyResolves: Ng2StateDeclaration = {
+        name: 'manyResolves',
+        component: ManyResolvesComponent,
+        bindings: {
+          // component_input: 'resolve name'
+          resolve2: 'Resolve2',
+          resolve4: 'Resolve4',
+        },
+        resolve: [
+          { token: 'resolve1', resolveFn: () => 'resolve1' },
+          { token: 'Resolve2', resolveFn: () => 'resolve2' },
+          { token: 'resolve3', resolveFn: () => 'resolve3' },
+          { token: 'Resolve4', resolveFn: () => 'resolve4' },
+        ],
+      };
+
+      let routerModule = UIRouterModule.forRoot({ useHash: true, states: [manyResolves] });
+
+      fixture = TestBed.configureTestingModule({
+        declarations: [ManyResolvesComponent],
+        imports: [routerModule],
+      }).createComponent(UIView);
+
+      fixture.detectChanges();
+      router = fixture.debugElement.injector.get(UIRouter);
+      router.stateService.go('manyResolves').then(() => {
+        comp = fixture.debugElement.query(By.directive(ManyResolvesComponent)).componentInstance;
+        done();
+      });
+    });
+
+    it('should bind resolve by name to component input name', () => {
+      expect(comp.resolve1).toBe('resolve1');
+    });
+
+    it('should bind resolve by name to the component input specified by `bindings`', () => {
+      expect(comp.resolve2).toBe('resolve2');
+    });
+
+    it('should bind resolve by name to component input templateName', () => {
+      expect(comp._resolve3).toBe('resolve3');
+    });
+
+    it('should bind resolve by name to the component input templateName specified in state `bindings`', () => {
+      expect(comp._resolve4).toBe('resolve4');
+    });
+  });
+});