feat(compiler): allow recursive components

Author: tbosch

modules/benchmarks/src/compiler/compiler_benchmark.js

@@ -9,7 +9,7 @@ import {Parser} from 'change_detection/parser/parser';
 import {Lexer} from 'change_detection/parser/lexer';
 import {ProtoRecordRange} from 'change_detection/record_range';
 
-import {Compiler} from 'core/compiler/compiler';
+import {Compiler, CompilerCache} from 'core/compiler/compiler';
 import {DirectiveMetadataReader} from 'core/compiler/directive_metadata_reader';
 
 import {Component} from 'core/annotations/annotations';
@@ -81,7 +81,7 @@ function setup() {
  });
 
  var reader = new CachingDirectiveMetadataReader();
- compiler = new Compiler(null, reader, new Parser(new Lexer()));
+ compiler = new Compiler(null, reader, new Parser(new Lexer()), new CompilerCache());
  annotatedComponent = reader.annotatedType(BenchmarkComponent);
 }
 
@@ -94,7 +94,7 @@ export function main() {
  benchmarkStep('run', function() {
  // Need to clone every time as the compiler might modify the template!
  var cloned = DOM.clone(template);
- compiler.compileWithCache(null, annotatedComponent, cloned);
+ compiler.compileAllLoaded(null, annotatedComponent, cloned);
  });
  });
 
@@ -104,7 +104,7 @@ export function main() {
  benchmarkStep('run', function() {
  // Need to clone every time as the compiler might modify the template!
  var cloned = DOM.clone(template);
- compiler.compileWithCache(null, annotatedComponent, cloned);
+ compiler.compileAllLoaded(null, annotatedComponent, cloned);
  });
  });
 

modules/core/src/application.js

@@ -1,7 +1,7 @@
 import {Injector, bind, OpaqueToken} from 'di/di';
 import {Type, FIELD, isBlank, isPresent, BaseException} from 'facade/lang';
 import {DOM, Element} from 'facade/dom';
-import {Compiler} from './compiler/compiler';
+import {Compiler, CompilerCache} from './compiler/compiler';
 import {ProtoView} from './compiler/view';
 import {Reflector, reflector} from 'reflection/reflection';
 import {Parser} from 'change_detection/parser/parser';
@@ -17,7 +17,7 @@ var _rootInjector: Injector;
 
 // Contains everything that is safe to share between applications.
 var _rootBindings = [
- bind(Reflector).toValue(reflector), Compiler, TemplateLoader, DirectiveMetadataReader, Parser, Lexer
+ bind(Reflector).toValue(reflector), Compiler, CompilerCache, TemplateLoader, DirectiveMetadataReader, Parser, Lexer
 ];
 
 export var appViewToken = new OpaqueToken('AppView');

modules/core/src/compiler/compiler.js

@@ -1,6 +1,6 @@
-import {Type, FIELD, isBlank, isPresent} from 'facade/lang';
+import {Type, FIELD, isBlank, isPresent, BaseException, stringify} from 'facade/lang';
 import {Promise, PromiseWrapper} from 'facade/async';
-import {List, ListWrapper} from 'facade/collection';
+import {List, ListWrapper, MapWrapper} from 'facade/collection';
 import {DOM, Element} from 'facade/dom';
 
 import {Parser} from 'change_detection/parser/parser';
@@ -14,6 +14,30 @@ import {TemplateLoader} from './template_loader';
 import {AnnotatedType} from './annotated_type';
 import {Component} from '../annotations/annotations';
 
+/**
+ * Cache that stores the ProtoView of the template of a component.
+ * Used to prevent duplicate work and resolve cyclic dependencies.
+ */
+export class CompilerCache {
+ _cache:Map;
+ constructor() {
+ this._cache = MapWrapper.create();
+ }
+
+ set(component:Type, protoView:ProtoView) {
+ MapWrapper.set(this._cache, component, protoView);
+ }
+
+ get(component:Type):ProtoView {
+ var result = MapWrapper.get(this._cache, component);
+ if (isBlank(result)) {
+ // need to normalize undefined to null so that type checking passes :-(
+ return null;
+ }
+ return result;
+ }
+}
+
 /**
  * The compiler loads and translates the html templates of components into
  * nested ProtoViews. To decompose its functionality it uses
@@ -23,10 +47,12 @@ export class Compiler {
  _templateLoader:TemplateLoader;
  _reader: DirectiveMetadataReader;
  _parser:Parser;
- constructor(templateLoader:TemplateLoader, reader: DirectiveMetadataReader, parser:Parser) {
+ _compilerCache:CompilerCache;
+ constructor(templateLoader:TemplateLoader, reader: DirectiveMetadataReader, parser:Parser, cache:CompilerCache) {
  this._templateLoader = templateLoader;
  this._reader = reader;
  this._parser = parser;
+ this._compilerCache = cache;
  }
 
  createSteps(component:AnnotatedType):List<CompileStep> {
@@ -40,15 +66,22 @@ export class Compiler {
  }
 
  compile(component:Type, templateRoot:Element = null):Promise<ProtoView> {
- // TODO load all components transitively from the cache first
- var cache = null;
- return PromiseWrapper.resolve(this.compileWithCache(
- cache, this._reader.annotatedType(component), templateRoot)
+ var templateCache = null;
+ // TODO load all components that have urls
+ // transitively via the _templateLoader and store them in templateCache
+
+ return PromiseWrapper.resolve(this.compileAllLoaded(
+ templateCache, this._reader.annotatedType(component), templateRoot)
  );
  }
 
  // public so that we can compile in sync in performance tests.
- compileWithCache(cache, component:AnnotatedType, templateRoot:Element = null):ProtoView {
+ compileAllLoaded(templateCache, component:AnnotatedType, templateRoot:Element = null):ProtoView {
+ var rootProtoView = this._compilerCache.get(component.type);
+ if (isPresent(rootProtoView)) {
+ return rootProtoView;
+ }
+
  if (isBlank(templateRoot)) {
  // TODO: read out the cache if templateRoot = null. Could contain:
  // - templateRoot string
@@ -57,15 +90,18 @@ export class Compiler {
  var annotation:any = component.annotation;
  templateRoot = DOM.createTemplate(annotation.template.inline);
  }
+
  var pipeline = new CompilePipeline(this.createSteps(component));
  var compileElements = pipeline.process(templateRoot);
- var rootProtoView = compileElements[0].inheritedProtoView;
- // TODO: put the rootProtoView into the cache to support recursive templates!
+ rootProtoView = compileElements[0].inheritedProtoView;
+ // Save the rootProtoView before we recurse so that we are able
+ // to compile components that use themselves in their template.
+ this._compilerCache.set(component.type, rootProtoView);
 
  for (var i=0; i<compileElements.length; i++) {
  var ce = compileElements[i];
  if (isPresent(ce.componentDirective)) {
- ce.inheritedElementBinder.nestedProtoView = this.compileWithCache(cache, ce.componentDirective, null);
+ ce.inheritedElementBinder.nestedProtoView = this.compileAllLoaded(templateCache, ce.componentDirective, null);
  }
  }
 

modules/core/test/compiler/compiler_spec.js

@@ -2,7 +2,7 @@ import {describe, beforeEach, it, expect, ddescribe, iit} from 'test_lib/test_li
 import {DOM} from 'facade/dom';
 import {List} from 'facade/collection';
 
-import {Compiler} from 'core/compiler/compiler';
+import {Compiler, CompilerCache} from 'core/compiler/compiler';
 import {ProtoView} from 'core/compiler/view';
 import {DirectiveMetadataReader} from 'core/compiler/directive_metadata_reader';
 import {TemplateLoader} from 'core/compiler/template_loader';
@@ -25,7 +25,7 @@ export function main() {
 
  function createCompiler(processClosure) {
  var steps = [new MockStep(processClosure)];
- return new TestableCompiler(null, reader, new Parser(new Lexer()), steps);
+ return new TestableCompiler(reader, steps);
  }
 
  it('should run the steps and return the ProtoView of the root element', (done) => {
@@ -77,6 +77,35 @@ export function main() {
 
  });
 
+ it('should cache components', (done) => {
+ var el = createElement('<div></div>');
+ var compiler = createCompiler( (parent, current, control) => {
+ current.inheritedProtoView = new ProtoView(current.element, null);
+ });
+ var firstProtoView;
+ compiler.compile(MainComponent, el).then( (protoView) => {
+ firstProtoView = protoView;
+ return compiler.compile(MainComponent, el);
+ }).then( (protoView) => {
+ expect(firstProtoView).toBe(protoView);
+ done();
+ });
+
+ });
+
+ it('should allow recursive components', (done) => {
+ var compiler = createCompiler( (parent, current, control) => {
+ current.inheritedProtoView = new ProtoView(current.element, null);
+ current.inheritedElementBinder = current.inheritedProtoView.bindElement(null);
+ current.componentDirective = reader.annotatedType(RecursiveComponent);
+ });
+ compiler.compile(RecursiveComponent, null).then( (protoView) => {
+ expect(protoView.elementBinders[0].nestedProtoView).toBe(protoView);
+ done();
+ });
+
+ });
+
  });
 
 }
@@ -95,10 +124,18 @@ class MainComponent {}
 })
 class NestedComponent {}
 
+@Component({
+ template: new TemplateConfig({
+ inline: '<div rec-comp></div>'
+ }),
+ selector: 'rec-comp'
+})
+class RecursiveComponent {}
+
 class TestableCompiler extends Compiler {
  steps:List;
- constructor(templateLoader:TemplateLoader, reader:DirectiveMetadataReader, parser, steps:List<CompileStep>) {
- super(templateLoader, reader, parser);
+ constructor(reader:DirectiveMetadataReader, steps:List<CompileStep>) {
+ super(null, reader, new Parser(new Lexer()), new CompilerCache());
  this.steps = steps;
  }
  createSteps(component):List<CompileStep> {

modules/core/test/compiler/integration_spec.js

@@ -7,7 +7,7 @@ import {ChangeDetector} from 'change_detection/change_detector';
 import {Parser} from 'change_detection/parser/parser';
 import {Lexer} from 'change_detection/parser/lexer';
 
-import {Compiler} from 'core/compiler/compiler';
+import {Compiler, CompilerCache} from 'core/compiler/compiler';
 import {DirectiveMetadataReader} from 'core/compiler/directive_metadata_reader';
 
 import {Decorator, Component, Template} from 'core/annotations/annotations';
@@ -21,7 +21,7 @@ export function main() {
  var compiler;
 
  beforeEach( () => {
- compiler = new Compiler(null, new DirectiveMetadataReader(), new Parser(new Lexer()));
+ compiler = new Compiler(null, new DirectiveMetadataReader(), new Parser(new Lexer()), new CompilerCache());
  });
 
  describe('react to record changes', function() {

modules/examples/src/hello_world/index_static.js

@@ -4,7 +4,7 @@ import {Component, Decorator, TemplateConfig, NgElement} from 'core/core';
 import {Parser} from 'change_detection/parser/parser';
 import {Lexer} from 'change_detection/parser/lexer';
 
-import {Compiler} from 'core/compiler/compiler';
+import {Compiler, CompilerCache} from 'core/compiler/compiler';
 import {DirectiveMetadataReader} from 'core/compiler/directive_metadata_reader';
 import {TemplateLoader} from 'core/compiler/template_loader';
 
@@ -36,8 +36,14 @@ function setup() {
  });
 
  reflector.registerType(Compiler, {
- "factory": (templateLoader, reader, parser) => new Compiler(templateLoader, reader, parser),
- "parameters": [[TemplateLoader], [DirectiveMetadataReader], [Parser]],
+ "factory": (templateLoader, reader, parser, compilerCache) => new Compiler(templateLoader, reader, parser, compilerCache),
+ "parameters": [[TemplateLoader], [DirectiveMetadataReader], [Parser], [CompilerCache]],
+ "annotations": []
+ });
+
+ reflector.registerType(CompilerCache, {
+ "factory": () => new CompilerCache(),
+ "parameters": [],
  "annotations": []
  });