cargdev/angular
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(compiler): new semantics for template attributes and view variables.

Browse Source 
- Supports `<div template=“…”>`, including parsing the expressions within
  the attribute.
- Supports `<template let-ng-repeat=“rows”>`
- Adds attribute interpolation (was missing previously)
This commit is contained in:
Tobias Bosch
2014-11-18 16:38:36 -08:00
parent f864aa1f8e
commit c6846f1163
25 changed files with 586 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
modules/core/src/compiler/pipeline/compile_element.js
View File

@ -6,6 +6,8 @@ import {Decorator} from '../../annotations/decorator';
import {Component} from '../../annotations/component';
import {Template} from '../../annotations/template';
import {ASTWithSource} from 'change_detection/parser/ast';
/**
* Collects all data that is needed to process an element
* in the compile process. Fields are filled
@ -18,6 +20,7 @@ export class CompileElement {
this._classList = null;
this.textNodeBindings = null;
this.propertyBindings = null;
this.variableBindings = null;
this.decoratorDirectives = null;
this.templateDirective = null;
this.componentDirective = null;
@ -60,20 +63,27 @@ export class CompileElement {
return this._classList;
}
addTextNodeBinding(indexInParent:int, expression:string) {
addTextNodeBinding(indexInParent:int, expression:ASTWithSource) {
if (isBlank(this.textNodeBindings)) {
this.textNodeBindings = MapWrapper.create();
}
MapWrapper.set(this.textNodeBindings, indexInParent, expression);
}
addPropertyBinding(property:string, expression:string) {
addPropertyBinding(property:string, expression:ASTWithSource) {
if (isBlank(this.propertyBindings)) {
this.propertyBindings = MapWrapper.create();
}
MapWrapper.set(this.propertyBindings, property, expression);
}
addVariableBinding(contextName:string, templateName:string) {
if (isBlank(this.variableBindings)) {
this.variableBindings = MapWrapper.create();
}
MapWrapper.set(this.variableBindings, contextName, templateName);
}
addDirective(directive:AnnotatedType) {
var annotation = directive.annotation;
if (annotation instanceof Decorator) {

8
modules/core/src/compiler/pipeline/default_steps.js
View File

@ -21,13 +21,13 @@ export function createDefaultSteps(
directives: List<AnnotatedType>
) {
return [
new PropertyBindingParser(),
new TextInterpolationParser(),
new ViewSplitter(parser),
new TextInterpolationParser(parser),
new PropertyBindingParser(parser),
new DirectiveParser(directives),
new ViewSplitter(),
new ElementBindingMarker(),
new ProtoViewBuilder(),
new ProtoElementInjectorBuilder(),
new ElementBinderBuilder(parser, closureMap)
new ElementBinderBuilder(closureMap)
];
}

32
modules/core/src/compiler/pipeline/directive_parser.js
View File

@ -1,5 +1,6 @@
import {isPresent, BaseException} from 'facade/lang';
import {List, MapWrapper} from 'facade/collection';
import {TemplateElement} from 'facade/dom';
import {SelectorMatcher} from '../selector';
import {CssSelector} from '../selector';
@ -12,7 +13,8 @@ import {CompileControl} from './compile_control';
import {Reflector} from '../reflector';
/**
* Parses the directives on a single element.
* Parses the directives on a single element. Assumes ViewSplitter has already created
* <template> elements for template directives.
*
* Fills:
* - CompileElement#decoratorDirectives
@ -22,6 +24,8 @@ import {Reflector} from '../reflector';
* Reads:
* - CompileElement#propertyBindings (to find directives contained
* in the property bindings)
* - CompileElement#variableBindings (to find directives contained
* in the property bindings)
*/
export class DirectiveParser extends CompileStep {
constructor(directives:List<AnnotatedType>) {
@ -47,17 +51,29 @@ export class DirectiveParser extends CompileStep {
MapWrapper.forEach(attrs, (attrValue, attrName) => {
cssSelector.addAttribute(attrName, attrValue);
});
// Allow to find directives even though the attribute is bound
if (isPresent(current.propertyBindings)) {
MapWrapper.forEach(current.propertyBindings, (expression, boundProp) => {
cssSelector.addAttribute(boundProp, expression);
MapWrapper.forEach(current.propertyBindings, (expression, prop) => {
cssSelector.addAttribute(prop, expression.source);
});
}
if (isPresent(current.variableBindings)) {
MapWrapper.forEach(current.variableBindings, (value, name) => {
cssSelector.addAttribute(name, value);
});
}
// Note: We assume that the ViewSplitter already did its work, i.e. template directive should
// only be present on <template> elements any more!
var isTemplateElement = current.element instanceof TemplateElement;
this._selectorMatcher.match(cssSelector, (directive) => {
if (isPresent(current.templateDirective) && (directive.annotation instanceof Template)) {
throw new BaseException('Only one template directive per element is allowed!');
}
if (isPresent(current.componentDirective) && (directive.annotation instanceof Component)) {
if (directive.annotation instanceof Template) {
if (!isTemplateElement) {
throw new BaseException('Template directives need to be placed on <template> elements or elements with template attribute!');
} else if (isPresent(current.templateDirective)) {
throw new BaseException('Only one template directive per element is allowed!');
}
} else if (isTemplateElement) {
throw new BaseException('Only template directives are allowed on <template> elements!');
} else if ((directive.annotation instanceof Component) && isPresent(current.componentDirective)) {
throw new BaseException('Only one component directive per element is allowed!');
}
current.addDirective(directive);

43
modules/core/src/compiler/pipeline/element_binder_builder.js
View File

@ -43,8 +43,7 @@ import {CompileControl} from './compile_control';
* with the flag `isViewRoot`.
*/
export class ElementBinderBuilder extends CompileStep {
constructor(parser:Parser, closureMap:ClosureMap) {
this._parser = parser;
constructor(closureMap:ClosureMap) {
this._closureMap = closureMap;
}
@ -56,10 +55,10 @@ export class ElementBinderBuilder extends CompileStep {
current.componentDirective, current.templateDirective);
if (isPresent(current.textNodeBindings)) {
this._bindTextNodes(protoView, current.textNodeBindings);
this._bindTextNodes(protoView, current);
}
if (isPresent(current.propertyBindings)) {
this._bindElementProperties(protoView, current.propertyBindings);
this._bindElementProperties(protoView, current);
}
this._bindDirectiveProperties(this._collectDirectives(current), current);
} else if (isPresent(parent)) {
@ -68,36 +67,36 @@ export class ElementBinderBuilder extends CompileStep {
current.inheritedElementBinder = elementBinder;
}
_bindTextNodes(protoView, textNodeBindings) {
MapWrapper.forEach(textNodeBindings, (expression, indexInParent) => {
protoView.bindTextNode(indexInParent, this._parser.parseBinding(expression));
_bindTextNodes(protoView, compileElement) {
MapWrapper.forEach(compileElement.textNodeBindings, (expression, indexInParent) => {
protoView.bindTextNode(indexInParent, expression.ast);
});
}
_bindElementProperties(protoView, propertyBindings) {
MapWrapper.forEach(propertyBindings, (expression, property) => {
protoView.bindElementProperty(property, this._parser.parseBinding(expression));
_bindElementProperties(protoView, compileElement) {
MapWrapper.forEach(compileElement.propertyBindings, (expression, property) => {
protoView.bindElementProperty(property, expression.ast);
});
}
_collectDirectives(pipelineElement) {
_collectDirectives(compileElement) {
var directives;
if (isPresent(pipelineElement.decoratorDirectives)) {
directives = ListWrapper.clone(pipelineElement.decoratorDirectives);
if (isPresent(compileElement.decoratorDirectives)) {
directives = ListWrapper.clone(compileElement.decoratorDirectives);
} else {
directives = [];
}
if (isPresent(pipelineElement.templateDirective)) {
ListWrapper.push(directives, pipelineElement.templateDirective);
if (isPresent(compileElement.templateDirective)) {
ListWrapper.push(directives, compileElement.templateDirective);
}
if (isPresent(pipelineElement.componentDirective)) {
ListWrapper.push(directives, pipelineElement.componentDirective);
if (isPresent(compileElement.componentDirective)) {
ListWrapper.push(directives, compileElement.componentDirective);
}
return directives;
}
_bindDirectiveProperties(typesWithAnnotations, pipelineElement) {
var protoView = pipelineElement.inheritedProtoView;
_bindDirectiveProperties(typesWithAnnotations, compileElement) {
var protoView = compileElement.inheritedProtoView;
var directiveIndex = 0;
ListWrapper.forEach(typesWithAnnotations, (typeWithAnnotation) => {
var annotation = typeWithAnnotation.annotation;
@ -105,8 +104,8 @@ export class ElementBinderBuilder extends CompileStep {
return;
}
StringMapWrapper.forEach(annotation.bind, (dirProp, elProp) => {
var expression = isPresent(pipelineElement.propertyBindings) ?
MapWrapper.get(pipelineElement.propertyBindings, elProp) :
var expression = isPresent(compileElement.propertyBindings) ?
MapWrapper.get(compileElement.propertyBindings, elProp) :
null;
if (isBlank(expression)) {
throw new BaseException('No element binding found for property '+elProp
@ -114,7 +113,7 @@ export class ElementBinderBuilder extends CompileStep {
}
protoView.bindDirectiveProperty(
directiveIndex++,
this._parser.parseBinding(expression),
expression.ast,
dirProp,
this._closureMap.setter(dirProp)
);

2
modules/core/src/compiler/pipeline/element_binding_marker.js
View File

@ -18,6 +18,7 @@ const NG_BINDING_CLASS = 'ng-binding';
* Reads:
* - CompileElement#textNodeBindings
* - CompileElement#propertyBindings
* - CompileElement#variableBindings
* - CompileElement#decoratorDirectives
* - CompileElement#componentDirective
* - CompileElement#templateDirective
@ -27,6 +28,7 @@ export class ElementBindingMarker extends CompileStep {
var hasBindings =
(isPresent(current.textNodeBindings) && MapWrapper.size(current.textNodeBindings)>0) ||
(isPresent(current.propertyBindings) && MapWrapper.size(current.propertyBindings)>0) ||
(isPresent(current.variableBindings) && MapWrapper.size(current.variableBindings)>0) ||
(isPresent(current.decoratorDirectives) && current.decoratorDirectives.length > 0) ||
isPresent(current.templateDirective) ||
isPresent(current.componentDirective);

43
modules/core/src/compiler/pipeline/property_binding_parser.js
View File

@ -1,13 +1,18 @@
import {isPresent, isBlank, RegExpWrapper} from 'facade/lang';
import {isPresent, isBlank, RegExpWrapper, BaseException} from 'facade/lang';
import {MapWrapper} from 'facade/collection';
import {TemplateElement} from 'facade/dom';
import {Parser} from 'change_detection/parser/parser';
import {ExpressionWithSource} from 'change_detection/parser/ast';
import {CompileStep} from './compile_step';
import {CompileElement} from './compile_element';
import {CompileControl} from './compile_control';
import {interpolationToExpression} from './text_interpolation_parser';
// TODO(tbosch): Cannot make this const/final right now because of the transpiler...
var BIND_DASH_REGEXP = RegExpWrapper.create('bind-((?:[^-]|-(?!-))+)(?:--(.+))?');
var PROP_BIND_REGEXP = RegExpWrapper.create('\\[([^|]+)(?:\\|(.+))?\\]');
var BIND_NAME_REGEXP = RegExpWrapper.create('^(?:(?:(bind)|(let))-(.+))|\\[([^\\]]+)\\]');
/**
* Parses the property bindings on a single element.
@ -16,15 +21,35 @@ var PROP_BIND_REGEXP = RegExpWrapper.create('\\[([^|]+)(?:\\|(.+))?\\]');
* - CompileElement#propertyBindings
*/
export class PropertyBindingParser extends CompileStep {
constructor(parser:Parser) {
this._parser = parser;
}
process(parent:CompileElement, current:CompileElement, control:CompileControl) {
var attrs = current.attrs();
MapWrapper.forEach(attrs, (attrValue, attrName) => {
var parts = RegExpWrapper.firstMatch(BIND_DASH_REGEXP, attrName);
if (isBlank(parts)) {
parts = RegExpWrapper.firstMatch(PROP_BIND_REGEXP, attrName);
}
if (isPresent(parts)) {
current.addPropertyBinding(parts[1], attrValue);
var bindParts = RegExpWrapper.firstMatch(BIND_NAME_REGEXP, attrName);
if (isPresent(bindParts)) {
if (isPresent(bindParts[1])) {
// match: bind-prop
current.addPropertyBinding(bindParts[3], this._parser.parseBinding(attrValue));
} else if (isPresent(bindParts[2])) {
// match: let-prop
// Note: We assume that the ViewSplitter already did its work, i.e. template directive should
// only be present on <template> elements any more!
if (!(current.element instanceof TemplateElement)) {
throw new BaseException('let-* is only allowed on <template> elements!');
}
current.addVariableBinding(bindParts[3], attrValue);
} else if (isPresent(bindParts[4])) {
// match: [prop]
current.addPropertyBinding(bindParts[4], this._parser.parseBinding(attrValue));
}
} else {
var expression = interpolationToExpression(attrValue);
if (isPresent(expression)) {
current.addPropertyBinding(attrName, this._parser.parseBinding(expression));
}
}
});
}

7
modules/core/src/compiler/pipeline/proto_view_builder.js
View File

@ -1,5 +1,5 @@
import {isPresent, BaseException} from 'facade/lang';
import {ListWrapper} from 'facade/collection';
import {ListWrapper, MapWrapper} from 'facade/collection';
import {ProtoView} from '../view';
import {ProtoWatchGroup} from 'change_detection/watch_group';
@ -27,6 +27,11 @@ export class ProtoViewBuilder extends CompileStep {
throw new BaseException('Only one nested view per element is allowed');
}
parent.inheritedElementBinder.nestedProtoView = inheritedProtoView;
if (isPresent(parent.variableBindings)) {
MapWrapper.forEach(parent.variableBindings, (mappedName, varName) => {
inheritedProtoView.bindVariable(varName, mappedName);
});
}
}
} else if (isPresent(parent)) {
inheritedProtoView = parent.inheritedProtoView;

60
modules/core/src/compiler/pipeline/text_interpolation_parser.js
View File

@ -1,6 +1,8 @@
import {RegExpWrapper, StringWrapper, isPresent} from 'facade/lang';
import {Node, DOM} from 'facade/dom';
import {Parser} from 'change_detection/parser/parser';
import {CompileStep} from './compile_step';
import {CompileElement} from './compile_element';
import {CompileControl} from './compile_control';
@ -9,6 +11,34 @@ import {CompileControl} from './compile_control';
var INTERPOLATION_REGEXP = RegExpWrapper.create('\\{\\{(.*?)\\}\\}');
var QUOTE_REGEXP = RegExpWrapper.create("'");
export function interpolationToExpression(value:string):string {
// TODO: add stringify formatter when we support formatters
var parts = StringWrapper.split(value, INTERPOLATION_REGEXP);
if (parts.length <= 1) {
return null;
}
var expression = '';
for (var i=0; i<parts.length; i++) {
var expressionPart = null;
if (i%2 === 0) {
// fixed string
if (parts[i].length > 0) {
expressionPart = "'" + StringWrapper.replaceAll(parts[i], QUOTE_REGEXP, "\\'") + "'";
}
} else {
// expression
expressionPart = "(" + parts[i] + ")";
}
if (isPresent(expressionPart)) {
if (expression.length > 0) {
expression += '+';
}
expression += expressionPart;
}
}
return expression;
}
/**
* Parses interpolations in direct text child nodes of the current element.
*
@ -16,6 +46,10 @@ var QUOTE_REGEXP = RegExpWrapper.create("'");
* - CompileElement#textNodeBindings
*/
export class TextInterpolationParser extends CompileStep {
constructor(parser:Parser) {
this._parser = parser;
}
process(parent:CompileElement, current:CompileElement, control:CompileControl) {
var element = current.element;
var childNodes = DOM.templateAwareRoot(element).childNodes;
@ -28,30 +62,10 @@ export class TextInterpolationParser extends CompileStep {
}
_parseTextNode(pipelineElement, node, nodeIndex) {
// TODO: add stringify formatter when we support formatters
var parts = StringWrapper.split(node.nodeValue, INTERPOLATION_REGEXP);
if (parts.length > 1) {
var expression = '';
for (var i=0; i<parts.length; i++) {
var expressionPart = null;
if (i%2 === 0) {
// fixed string
if (parts[i].length > 0) {
expressionPart = "'" + StringWrapper.replaceAll(parts[i], QUOTE_REGEXP, "\\'") + "'";
}
} else {
// expression
expressionPart = "(" + parts[i] + ")";
}
if (isPresent(expressionPart)) {
if (expression.length > 0) {
expression += '+';
}
expression += expressionPart;
}
}
var expression = interpolationToExpression(node.nodeValue);
if (isPresent(expression)) {
DOM.setText(node, ' ');
pipelineElement.addTextNodeBinding(nodeIndex, expression);
pipelineElement.addTextNodeBinding(nodeIndex, this._parser.parseBinding(expression));
}
}
}

63
modules/core/src/compiler/pipeline/view_splitter.js
View File

@ -1,7 +1,9 @@
import {isBlank, isPresent} from 'facade/lang';
import {DOM} from 'facade/dom';
import {DOM, TemplateElement} from 'facade/dom';
import {MapWrapper, StringMapWrapper} from 'facade/collection';
import {Parser} from 'change_detection/parser/parser';
import {CompileStep} from './compile_step';
import {CompileElement} from './compile_element';
import {CompileControl} from './compile_control';
@ -13,50 +15,39 @@ import {CompileControl} from './compile_control';
*
* Fills:
* - CompileElement#isViewRoot
*
* Updates:
* - CompileElement#templateDirective
* - CompileElement#propertyBindings
*
* Reads:
* - CompileElement#templateDirective
* - CompileElement#variableBindings
* - CompileElement#propertyBindings
*/
export class ViewSplitter extends CompileStep {
constructor(parser:Parser) {
this._parser = parser;
}
process(parent:CompileElement, current:CompileElement, control:CompileControl) {
var element = current.element;
if (isPresent(current.templateDirective)) {
var templateElement = DOM.createTemplate('');
var templateBoundProperties = MapWrapper.create();
var nonTemplateBoundProperties = MapWrapper.create();
this._splitElementPropertyBindings(current, templateBoundProperties, nonTemplateBoundProperties);
var newParentElement = new CompileElement(templateElement);
newParentElement.propertyBindings = templateBoundProperties;
newParentElement.templateDirective = current.templateDirective;
control.addParent(newParentElement);
// disconnect child view from their parent view
element.remove();
current.templateDirective = null;
current.propertyBindings = nonTemplateBoundProperties;
current.isViewRoot = true;
} else if (isBlank(parent)) {
if (isBlank(parent) || (current.element instanceof TemplateElement)) {
current.isViewRoot = true;
} else {
var templateBindings = MapWrapper.get(current.attrs(), 'template');
if (isPresent(templateBindings)) {
current.isViewRoot = true;
var templateElement = DOM.createTemplate('');
var newParentElement = new CompileElement(templateElement);
this._parseTemplateBindings(templateBindings, newParentElement);
control.addParent(newParentElement);
}
}
}
_splitElementPropertyBindings(compileElement, templateBoundProperties, nonTemplateBoundProperties) {
var dirBindings = compileElement.templateDirective.annotation.bind;
if (isPresent(dirBindings) && isPresent(compileElement.propertyBindings)) {
MapWrapper.forEach(compileElement.propertyBindings, (expr, elProp) => {
if (isPresent(StringMapWrapper.get(dirBindings, elProp))) {
MapWrapper.set(templateBoundProperties, elProp, expr);
} else {
MapWrapper.set(nonTemplateBoundProperties, elProp, expr);
}
});
_parseTemplateBindings(templateBindings:string, compileElement:CompileElement) {
var bindings = this._parser.parseTemplateBindings(templateBindings);
for (var i=0; i<bindings.length; i++) {
var binding = bindings[i];
if (isPresent(binding.name)) {
compileElement.addVariableBinding(binding.key, binding.name);
} else {
compileElement.addPropertyBinding(binding.key, binding.expression);
}
}
}
}

5
modules/core/src/compiler/view.js
View File

@ -78,6 +78,7 @@ export class ProtoView {
protoWatchGroup:ProtoWatchGroup) {
this.element = template;
this.elementBinders = [];
this.variableBindings = MapWrapper.create();
this.protoWatchGroup = protoWatchGroup;
this.textNodesWithBindingCount = 0;
this.elementsWithBindingCount = 0;
@ -124,6 +125,10 @@ export class ProtoView {
return view;
}
bindVariable(contextName:string, templateName:string) {
MapWrapper.set(this.variableBindings, contextName, templateName);
}
bindElement(protoElementInjector:ProtoElementInjector,
componentDirective:AnnotatedType = null, templateDirective:AnnotatedType = null):ElementBinder {
var elBinder = new ElementBinder(protoElementInjector, componentDirective, templateDirective);