feat(templateWalker): add template references support

Fix #151

package.json

@@ -10,7 +10,7 @@
     "build:links": "ts-node build/links.ts --src ./dist",
     "prepare:package": "cat package.json | ts-node build/package.ts > dist/package.json",
     "test": "rimraf dist && tsc && mocha dist/test/*.js dist/test/**/*.js",
-    "test:watch": "rimraf dist && tsc && mocha dist/test/*.js dist/test/**/*.js --watch",
+    "test:watch": "rimraf dist && tsc && mocha dist/test/** dist/test/** --watch",
     "tscv": "tsc --version",
     "tsc": "tsc",
     "tsc:watch": "tsc --w"

src/angular/ng2Walker.ts

@@ -101,7 +101,7 @@ export class Ng2Walker extends Lint.RuleWalker {
           }
         } catch (e) {
           // stderr breaks the VSCode extension
-          // console.error('Cannot parse the template of', ((<any>decorator.parent || {}).name || {}).text);
+          console.error(e);
         }
       }
       const inlineStyles = getDecoratorPropertyInitializer(decorator, 'styles');

src/angular/templates/basicTemplateAstVisitor.ts

@@ -106,16 +106,20 @@ export class BasicTemplateAstVisitor extends Lint.RuleWalker implements ast.Temp
   }
 
   visitElement(element: ast.ElementAst, context: any): any {
+    const references = element.references.map(r => r.name);
+    const oldVariables = this._variables;
+    this._variables = this._variables.concat(references);
+    element.references.forEach(r => this.visit(r, context));
     element.inputs.forEach(i => this.visit(i, context));
     element.outputs.forEach(o => this.visit(o, context));
     element.attrs.forEach(a => this.visit(a, context));
     element.children.forEach(e => this.visit(e, context));
-    element.references.forEach(r => this.visit(r, context));
     element.directives.forEach(d => this.visit(d, context));
+    // Outside the scope of the element
+    this._variables = oldVariables;
   }
 
   visitReference(ast: ast.ReferenceAst, context: any): any {
-    // console.log(ast);
   }
 
   visitVariable(ast: ast.VariableAst, context: any): any {

src/angular/templates/templateParser.ts

@@ -2,6 +2,40 @@ import { __core_private__ as r, NO_ERRORS_SCHEMA } from '@angular/core';
 import { INTERPOLATION } from '../config';
 import * as compiler from '@angular/compiler';
 
+const dummyMetadataFactory = (exportAs: string, selector: string) => {
+  return {
+    inputs: {},
+    outputs: {},
+    hostListeners: {},
+    hostProperties: {},
+    hostAttributes: {},
+    isSummary: true,
+    type: {
+      diDeps: [],
+      lifecycleHooks: [],
+      isHost: false
+    },
+    isComponent: false,
+    selector,
+    exportAs,
+    providers: [],
+    viewProviders: [],
+    queries: [],
+    entryComponents: [],
+    changeDetection: 0,
+    template: {
+      isSummary: true,
+      animations: [],
+      ngContentSelectors: [],
+      encapsulation: 0
+    }
+  };
+};
+
+const defaultDirectives = [
+  dummyMetadataFactory('ngForm', 'form')
+];
+
 export const parseTemplate = (template: string) => {
   const TemplateParser = <any>compiler.TemplateParser;
   const expressionParser = new compiler.Parser(new compiler.Lexer());
@@ -34,5 +68,5 @@ export const parseTemplate = (template: string) => {
   const type = new compiler.CompileTypeMetadata({ diDeps: [] });
   return tmplParser.tryParse(
       compiler.CompileDirectiveMetadata.create({ type, template: templateMetadata }),
-      template, [], [], [NO_ERRORS_SCHEMA], '').templateAst;
+      template, defaultDirectives, [], [NO_ERRORS_SCHEMA], '').templateAst;
 };

test/noAccessMissingMemberRule.spec.ts

@@ -290,11 +290,23 @@ describe('no-access-missing-member', () => {
   });
 
   describe('valid expressions', () => {
+    it('should succeed with "ngForm" ref', () => {
+      let source = `
+        @Component({
+          selector: 'foobar',
+          template: '<form #todoForm="ngForm"><button [disabled]="!todoForm.form.valid"></button></form>'
+        })
+        class Test {
+          foo: number;
+        }`;
+        assertSuccess('no-access-missing-member', source);
+    });
+
     it('should succeed with declared property', () => {
       let source = `
         @Component({
           selector: 'foobar',
-          template: '<div>{{ foo }}</div>
+          template: '<div>{{ foo }}</div>'
         })
         class Test {
           foo: number;