honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(compiler): introduce schema for elements 

Closes #3353
This commit is contained in:
Pawel Kozlowski 2015-07-29 14:01:18 +02:00
parent aae5a4cece
commit d894aa9101
12 changed files with 141 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
modules/angular2/src/core/application_common.ts
View File

@ -61,6 +61,8 @@ import {
DefaultDomCompiler,
APP_ID_RANDOM_BINDING
} from 'angular2/src/render/render';
import {ElementSchemaRegistry} from 'angular2/src/render/dom/schema/element_schema_registry';
import {DomElementSchemaRegistry} from 'angular2/src/render/dom/schema/dom_element_schema_registry';
import {
SharedStylesHost,
DomSharedStylesHost
@ -113,6 +115,7 @@ function _injectorBindings(appComponentType): List<Type | Binding | List<any>> {
bind(Renderer).toAlias(DomRenderer),
APP_ID_RANDOM_BINDING,
DefaultDomCompiler,
bind(ElementSchemaRegistry).toValue(new DomElementSchemaRegistry()),
bind(RenderCompiler).toAlias(DefaultDomCompiler),
DomSharedStylesHost,
bind(SharedStylesHost).toAlias(DomSharedStylesHost),

13
modules/angular2/src/render/dom/compiler/compiler.ts
View File

@ -17,6 +17,7 @@ import {
import {CompilePipeline} from './compile_pipeline';
import {ViewLoader, TemplateAndStyles} from 'angular2/src/render/dom/compiler/view_loader';
import {CompileStepFactory, DefaultStepFactory} from './compile_step_factory';
import {ElementSchemaRegistry} from '../schema/element_schema_registry';
import {Parser} from 'angular2/src/change_detection/change_detection';
import * as pvm from '../view/proto_view_merger';
import {DOCUMENT_TOKEN, APP_ID_TOKEN} from '../dom_tokens';
@ -30,7 +31,8 @@ import {prependAll} from '../util';
* the CompilePipeline and the CompileSteps.
*/
export class DomCompiler extends RenderCompiler {
constructor(private _stepFactory: CompileStepFactory, private _viewLoader: ViewLoader,
constructor(private _schemaRegistry: ElementSchemaRegistry,
private _stepFactory: CompileStepFactory, private _viewLoader: ViewLoader,
private _sharedStylesHost: SharedStylesHost) {
super();
}
@ -84,7 +86,8 @@ export class DomCompiler extends RenderCompiler {
this._sharedStylesHost.addStyles(compiledStyles);
}
return PromiseWrapper.resolve(compileElements[0].inheritedProtoView.build());
return PromiseWrapper.resolve(
compileElements[0].inheritedProtoView.build(this._schemaRegistry));
}
_normalizeViewEncapsulationIfThereAreNoStyles(viewDef: ViewDefinition): ViewDefinition {
@ -105,8 +108,8 @@ export class DomCompiler extends RenderCompiler {
@Injectable()
export class DefaultDomCompiler extends DomCompiler {
constructor(parser: Parser, viewLoader: ViewLoader, sharedStylesHost: SharedStylesHost,
@Inject(APP_ID_TOKEN) appId: any) {
super(new DefaultStepFactory(parser, appId), viewLoader, sharedStylesHost);
constructor(schemaRegistry: ElementSchemaRegistry, parser: Parser, viewLoader: ViewLoader,
sharedStylesHost: SharedStylesHost, @Inject(APP_ID_TOKEN) appId: any) {
super(schemaRegistry, new DefaultStepFactory(parser, appId), viewLoader, sharedStylesHost);
}
}

23
modules/angular2/src/render/dom/schema/dom_element_schema_registry.ts Normal file
View File

@ -0,0 +1,23 @@
import {isPresent} from 'angular2/src/facade/lang';
import {StringMapWrapper} from 'angular2/src/facade/collection';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {ElementSchemaRegistry} from './element_schema_registry';
export class DomElementSchemaRegistry extends ElementSchemaRegistry {
hasProperty(elm: any, propName: string): boolean {
var tagName = DOM.tagName(elm);
if (tagName.indexOf('-') !== -1) {
// can't tell now as we don't know which properties a custom element will get
// once it is instantiated
return true;
} else {
return DOM.hasProperty(elm, propName);
}
}
getMappedPropName(propName: string): string {
var mappedPropName = StringMapWrapper.get(DOM.attrToPropMap, propName);
return isPresent(mappedPropName) ? mappedPropName : propName;
}
}

4
modules/angular2/src/render/dom/schema/element_schema_registry.ts Normal file
View File

@ -0,0 +1,4 @@
export class ElementSchemaRegistry {
hasProperty(elm: any, propName: string): boolean { return true; }
getMappedPropName(propName: string): string { return propName; }
}

44
modules/angular2/src/render/dom/view/proto_view_builder.ts
View File

@ -20,6 +20,7 @@ import {
import {DomProtoView, DomProtoViewRef, resolveInternalDomProtoView} from './proto_view';
import {DomElementBinder, Event, HostAction} from './element_binder';
import {ElementSchemaRegistry} from '../schema/element_schema_registry';
import * as api from '../../api';
@ -68,7 +69,7 @@ export class ProtoViewBuilder {
setHostAttribute(name: string, value: string) { this.hostAttributes.set(name, value); }
build(): api.ProtoViewDto {
build(schemaRegistry: ElementSchemaRegistry): api.ProtoViewDto {
var domElementBinders = [];
var apiElementBinders = [];
@ -91,12 +92,12 @@ export class ProtoViewBuilder {
directiveIndex: dbb.directiveIndex,
propertyBindings: dbb.propertyBindings,
eventBindings: dbb.eventBindings,
hostPropertyBindings:
buildElementPropertyBindings(ebb.element, isPresent(ebb.componentId),
dbb.hostPropertyBindings, directiveTemplatePropertyNames)
hostPropertyBindings: buildElementPropertyBindings(schemaRegistry, ebb.element, true,
dbb.hostPropertyBindings, new Set())
});
});
var nestedProtoView = isPresent(ebb.nestedProtoView) ? ebb.nestedProtoView.build() : null;
var nestedProtoView =
isPresent(ebb.nestedProtoView) ? ebb.nestedProtoView.build(schemaRegistry) : null;
if (isPresent(nestedProtoView)) {
transitiveNgContentCount += nestedProtoView.transitiveNgContentCount;
}
@ -113,7 +114,7 @@ export class ProtoViewBuilder {
directives: apiDirectiveBinders,
nestedProtoView: nestedProtoView,
propertyBindings:
buildElementPropertyBindings(ebb.element, isPresent(ebb.componentId),
buildElementPropertyBindings(schemaRegistry, ebb.element, isPresent(ebb.componentId),
ebb.propertyBindings, directiveTemplatePropertyNames),
variableBindings: ebb.variableBindings,
eventBindings: ebb.eventBindings,
@ -325,14 +326,15 @@ const ATTRIBUTE_PREFIX = 'attr';
const CLASS_PREFIX = 'class';
const STYLE_PREFIX = 'style';
function buildElementPropertyBindings(protoElement: /*element*/ any, isNgComponent: boolean,
bindingsInTemplate: Map<string, ASTWithSource>,
directiveTempaltePropertyNames: Set<string>):
function buildElementPropertyBindings(
schemaRegistry: ElementSchemaRegistry, protoElement: /*element*/ any, isNgComponent: boolean,
bindingsInTemplate: Map<string, ASTWithSource>, directiveTempaltePropertyNames: Set<string>):
List<api.ElementPropertyBinding> {
var propertyBindings = [];
MapWrapper.forEach(bindingsInTemplate, (ast, propertyNameInTemplate) => {
var propertyBinding = createElementPropertyBinding(ast, propertyNameInTemplate);
if (isValidElementPropertyBinding(protoElement, isNgComponent, propertyBinding)) {
var propertyBinding = createElementPropertyBinding(schemaRegistry, ast, propertyNameInTemplate);
if (isValidElementPropertyBinding(schemaRegistry, protoElement, isNgComponent,
propertyBinding)) {
propertyBindings.push(propertyBinding);
} else if (!SetWrapper.has(directiveTempaltePropertyNames, propertyNameInTemplate)) {
throw new BaseException(
@ -342,29 +344,25 @@ function buildElementPropertyBindings(protoElement: /*element*/ any, isNgCompone
return propertyBindings;
}
function isValidElementPropertyBinding(protoElement: /*element*/ any, isNgComponent: boolean,
function isValidElementPropertyBinding(schemaRegistry: ElementSchemaRegistry,
protoElement: /*element*/ any, isNgComponent: boolean,
binding: api.ElementPropertyBinding): boolean {
if (binding.type === api.PropertyBindingType.PROPERTY) {
var tagName = DOM.tagName(protoElement);
var possibleCustomElement = tagName.indexOf('-') !== -1;
if (possibleCustomElement && !isNgComponent) {
// can't tell now as we don't know which properties a custom element will get
// once it is instantiated
return true;
if (!isNgComponent) {
return schemaRegistry.hasProperty(protoElement, binding.property);
} else {
// TODO(pk): change this logic as soon as we can properly detect custom elements
return DOM.hasProperty(protoElement, binding.property);
}
}
return true;
}
function createElementPropertyBinding(ast: ASTWithSource, propertyNameInTemplate: string):
api.ElementPropertyBinding {
function createElementPropertyBinding(schemaRegistry: ElementSchemaRegistry, ast: ASTWithSource,
propertyNameInTemplate: string): api.ElementPropertyBinding {
var parts = StringWrapper.split(propertyNameInTemplate, PROPERTY_PARTS_SEPARATOR);
if (parts.length === 1) {
var propName = parts[0];
var mappedPropName = StringMapWrapper.get(DOM.attrToPropMap, propName);
propName = isPresent(mappedPropName) ? mappedPropName : propName;
var propName = schemaRegistry.getMappedPropName(parts[0]);
return new api.ElementPropertyBinding(api.PropertyBindingType.PROPERTY, ast, propName);
} else if (parts[0] == ATTRIBUTE_PREFIX) {
return new api.ElementPropertyBinding(api.PropertyBindingType.ATTRIBUTE, ast, parts[1]);

3
modules/angular2/src/test_lib/test_injector.ts
View File

@ -56,6 +56,8 @@ import {
SharedStylesHost,
DomSharedStylesHost
} from 'angular2/src/render/render';
import {ElementSchemaRegistry} from 'angular2/src/render/dom/schema/element_schema_registry';
import {DomElementSchemaRegistry} from 'angular2/src/render/dom/schema/dom_element_schema_registry';
import {Serializer} from "angular2/src/web-workers/shared/serializer";
import {Log} from './utils';
@ -98,6 +100,7 @@ function _getAppBindings() {
bind(APP_ID_TOKEN).toValue('a'),
DefaultDomCompiler,
bind(RenderCompiler).toAlias(DefaultDomCompiler),
bind(ElementSchemaRegistry).toValue(new DomElementSchemaRegistry()),
DomSharedStylesHost,
bind(SharedStylesHost).toAlias(DomSharedStylesHost),
bind(DOM_REFLECT_PROPERTIES_AS_ATTRIBUTES).toValue(false),

10
modules/angular2/src/transform/template_compiler/generator.dart
View File

@ -11,6 +11,8 @@ import 'package:angular2/src/render/dom/compiler/compile_pipeline.dart';
import 'package:angular2/src/render/dom/compiler/style_inliner.dart';
import 'package:angular2/src/render/dom/compiler/style_url_resolver.dart';
import 'package:angular2/src/render/dom/compiler/view_loader.dart';
import 'package:angular2/src/render/dom/schema/element_schema_registry.dart';
import 'package:angular2/src/render/dom/schema/dom_element_schema_registry.dart';
import 'package:angular2/src/render/xhr.dart' show XHR;
import 'package:angular2/src/reflection/reflection.dart';
import 'package:angular2/src/services/url_resolver.dart';
@ -33,7 +35,7 @@ Future<String> processTemplates(AssetReader reader, AssetId entryPoint,
{bool generateRegistrations: true,
bool generateChangeDetectors: true}) async {
var viewDefResults = await createViewDefinitions(reader, entryPoint);
var extractor = new _TemplateExtractor(new XhrImpl(reader, entryPoint));
var extractor = new _TemplateExtractor(new DomElementSchemaRegistry(), new XhrImpl(reader, entryPoint));
var registrations = new reg.Codegen();
var changeDetectorClasses = new change.Codegen();
@ -83,14 +85,16 @@ Future<String> processTemplates(AssetReader reader, AssetId entryPoint,
class _TemplateExtractor {
final CompileStepFactory _factory;
ViewLoader _loader;
ElementSchemaRegistry _schemaRegistry;
_TemplateExtractor(XHR xhr)
_TemplateExtractor(ElementSchemaRegistry schemaRegistry, XHR xhr)
: _factory = new CompileStepFactory(new ng.Parser(new ng.Lexer())) {
var urlResolver = new UrlResolver();
var styleUrlResolver = new StyleUrlResolver(urlResolver);
var styleInliner = new StyleInliner(xhr, styleUrlResolver, urlResolver);
_loader = new ViewLoader(xhr, styleInliner, styleUrlResolver);
_schemaRegistry = schemaRegistry;
}
Future<_ExtractResult> extractTemplates(ViewDefinition viewDef) async {
@ -110,7 +114,7 @@ class _TemplateExtractor {
var compileElements =
pipeline.processElements(DOM.createTemplate(templateAndStyles.template), ViewType.COMPONENT, viewDef);
var protoViewDto = compileElements[0].inheritedProtoView.build();
var protoViewDto = compileElements[0].inheritedProtoView.build(_schemaRegistry);
reflector.reflectionCapabilities = savedReflectionCapabilities;

4
modules/angular2/test/render/dom/compiler/compiler_common_tests.ts
View File

@ -26,6 +26,7 @@ import {
} from 'angular2/src/render/api';
import {CompileStep} from 'angular2/src/render/dom/compiler/compile_step';
import {CompileStepFactory} from 'angular2/src/render/dom/compiler/compile_step_factory';
import {ElementSchemaRegistry} from 'angular2/src/render/dom/schema/element_schema_registry';
import {ViewLoader, TemplateAndStyles} from 'angular2/src/render/dom/compiler/view_loader';
import {resolveInternalDomProtoView} from 'angular2/src/render/dom/view/proto_view';
@ -48,7 +49,8 @@ export function runCompilerCommonTests() {
var tplLoader = new FakeViewLoader(urlData);
mockStepFactory =
new MockStepFactory([new MockStep(processElementClosure, processStyleClosure)]);
return new DomCompiler(mockStepFactory, tplLoader, sharedStylesHost);
return new DomCompiler(new ElementSchemaRegistry(), mockStepFactory, tplLoader,
sharedStylesHost);
}
describe('compile', () => {

48
modules/angular2/test/render/dom/schema/dom_element_schema_registry_spec.ts Normal file
View File

@ -0,0 +1,48 @@
import {
beforeEach,
ddescribe,
xdescribe,
describe,
expect,
iit,
inject,
it,
xit,
IS_DARTIUM
} from 'angular2/test_lib';
import {DomElementSchemaRegistry} from 'angular2/src/render/dom/schema/dom_element_schema_registry';
import {DOM} from 'angular2/src/dom/dom_adapter';
export function main() {
// DOMElementSchema can only be used on the JS side where we can safely
// use reflection for DOM elements
if (IS_DARTIUM) return;
var registry;
beforeEach(() => { registry = new DomElementSchemaRegistry(); });
describe('DOMElementSchema', () => {
it('should detect properties on regular elements', () => {
var divEl = DOM.createElement('div');
expect(registry.hasProperty(divEl, 'id')).toBeTruthy();
expect(registry.hasProperty(divEl, 'title')).toBeTruthy();
expect(registry.hasProperty(divEl, 'unknown')).toBeFalsy();
});
it('should return true for custom-like elements', () => {
var customLikeEl = DOM.createElement('custom-like');
expect(registry.hasProperty(customLikeEl, 'unknown')).toBeTruthy();
});
it('should not re-map property names that are not specified in DOM facade',
() => { expect(registry.getMappedPropName('readonly')).toEqual('readOnly'); });
it('should not re-map property names that are not specified in DOM facade', () => {
expect(registry.getMappedPropName('title')).toEqual('title');
expect(registry.getMappedPropName('exotic-unknown')).toEqual('exotic-unknown');
});
});
}

29
modules/angular2/test/render/dom/view/proto_view_builder_spec.ts
View File

@ -11,6 +11,7 @@ import {
IS_DARTIUM
} from 'angular2/test_lib';
import {DomElementSchemaRegistry} from 'angular2/src/render/dom/schema/dom_element_schema_registry';
import {ProtoViewBuilder} from 'angular2/src/render/dom/view/proto_view_builder';
import {ASTWithSource, AST} from 'angular2/src/change_detection/change_detection';
import {PropertyBindingType, ViewType, ViewEncapsulation} from 'angular2/src/render/api';
@ -31,7 +32,7 @@ export function main() {
it('should throw for unknown properties', () => {
builder.bindElement(el('<div/>')).bindProperty('unknownProperty', emptyExpr());
expect(() => builder.build())
expect(() => builder.build(new DomElementSchemaRegistry()))
.toThrowError(
`Can't bind to 'unknownProperty' since it isn't a known property of the '<div>' element and there are no matching directives with a corresponding property`);
});
@ -40,20 +41,20 @@ export function main() {
var binder = builder.bindElement(el('<div/>'));
binder.bindDirective(0).bindProperty('someDirProperty', emptyExpr(), 'directiveProperty');
binder.bindProperty('directiveProperty', emptyExpr());
expect(() => builder.build()).not.toThrow();
expect(() => builder.build(new DomElementSchemaRegistry())).not.toThrow();
});
it('should allow unknown properties on custom elements', () => {
var binder = builder.bindElement(el('<some-custom/>'));
binder.bindProperty('unknownProperty', emptyExpr());
expect(() => builder.build()).not.toThrow();
expect(() => builder.build(new DomElementSchemaRegistry())).not.toThrow();
});
it('should throw for unknown properties on custom elements if there is an ng component', () => {
var binder = builder.bindElement(el('<some-custom/>'));
binder.bindProperty('unknownProperty', emptyExpr());
binder.setComponentId('someComponent');
expect(() => builder.build())
expect(() => builder.build(new DomElementSchemaRegistry()))
.toThrowError(
`Can't bind to 'unknownProperty' since it isn't a known property of the '<some-custom>' element and there are no matching directives with a corresponding property`);
});
@ -65,9 +66,9 @@ export function main() {
// TODO(tbosch): This is just a temporary test that makes sure that the dart server and
// dart browser is in sync. Change this to "not contains notifyBinding"
// when https://github.com/angular/angular/issues/3019 is solved.
it('should throw for unknown properties', () => {
it('should not throw for unknown properties', () => {
builder.bindElement(el('<div/>')).bindProperty('unknownProperty', emptyExpr());
expect(() => builder.build()).not.toThrow();
expect(() => builder.build(new DomElementSchemaRegistry())).not.toThrow();
});
});
@ -76,19 +77,19 @@ export function main() {
describe('property normalization', () => {
it('should normalize "innerHtml" to "innerHTML"', () => {
builder.bindElement(el('<div/>')).bindProperty('innerHtml', emptyExpr());
var pv = builder.build();
var pv = builder.build(new DomElementSchemaRegistry());
expect(pv.elementBinders[0].propertyBindings[0].property).toEqual('innerHTML');
});
it('should normalize "tabindex" to "tabIndex"', () => {
builder.bindElement(el('<div/>')).bindProperty('tabindex', emptyExpr());
var pv = builder.build();
var pv = builder.build(new DomElementSchemaRegistry());
expect(pv.elementBinders[0].propertyBindings[0].property).toEqual('tabIndex');
});
it('should normalize "readonly" to "readOnly"', () => {
builder.bindElement(el('<input/>')).bindProperty('readonly', emptyExpr());
var pv = builder.build();
var pv = builder.build(new DomElementSchemaRegistry());
expect(pv.elementBinders[0].propertyBindings[0].property).toEqual('readOnly');
});
@ -97,32 +98,32 @@ export function main() {
describe('property binding types', () => {
it('should detect property names', () => {
builder.bindElement(el('<div/>')).bindProperty('tabindex', emptyExpr());
var pv = builder.build();
var pv = builder.build(new DomElementSchemaRegistry());
expect(pv.elementBinders[0].propertyBindings[0].type).toEqual(PropertyBindingType.PROPERTY);
});
it('should detect attribute names', () => {
builder.bindElement(el('<div/>')).bindProperty('attr.someName', emptyExpr());
var pv = builder.build();
var pv = builder.build(new DomElementSchemaRegistry());
expect(pv.elementBinders[0].propertyBindings[0].type)
.toEqual(PropertyBindingType.ATTRIBUTE);
});
it('should detect class names', () => {
builder.bindElement(el('<div/>')).bindProperty('class.someName', emptyExpr());
var pv = builder.build();
var pv = builder.build(new DomElementSchemaRegistry());
expect(pv.elementBinders[0].propertyBindings[0].type).toEqual(PropertyBindingType.CLASS);
});
it('should detect style names', () => {
builder.bindElement(el('<div/>')).bindProperty('style.someName', emptyExpr());
var pv = builder.build();
var pv = builder.build(new DomElementSchemaRegistry());
expect(pv.elementBinders[0].propertyBindings[0].type).toEqual(PropertyBindingType.STYLE);
});
it('should detect style units', () => {
builder.bindElement(el('<div/>')).bindProperty('style.someName.someUnit', emptyExpr());
var pv = builder.build();
var pv = builder.build(new DomElementSchemaRegistry());
expect(pv.elementBinders[0].propertyBindings[0].unit).toEqual('someUnit');
});
});

3
modules/angular2/test/render/dom/view/proto_view_merger_integration_spec.ts
View File

@ -30,6 +30,7 @@ import {DOM} from 'angular2/src/dom/dom_adapter';
import {cloneAndQueryProtoView} from 'angular2/src/render/dom/util';
import {resolveInternalDomProtoView} from 'angular2/src/render/dom/view/proto_view';
import {ProtoViewBuilder} from 'angular2/src/render/dom/view/proto_view_builder';
import {ElementSchemaRegistry} from 'angular2/src/render/dom/schema/element_schema_registry';
export function main() {
describe('ProtoViewMerger integration test', () => {
@ -247,7 +248,7 @@ export function main() {
var builder = new ProtoViewBuilder(DOM.createTemplate(''), ViewType.COMPONENT,
ViewEncapsulation.NONE);
builder.setHostAttribute('a', 'b');
var componentProtoViewDto = builder.build();
var componentProtoViewDto = builder.build(new ElementSchemaRegistry());
tb.merge([rootProtoViewDto, componentProtoViewDto])
.then(mergeMappings => {
var domPv = resolveInternalDomProtoView(mergeMappings.mergedProtoViewRef);

6
modules/benchmarks/src/compiler/compiler_benchmark.ts
View File

@ -25,6 +25,7 @@ import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util'
import {ProtoViewFactory} from 'angular2/src/core/compiler/proto_view_factory';
import {ViewLoader, DefaultDomCompiler, SharedStylesHost} from 'angular2/src/render/render';
import {DomElementSchemaRegistry} from 'angular2/src/render/dom/schema/dom_element_schema_registry';
export function main() {
BrowserDomAdapter.makeCurrent();
@ -37,8 +38,9 @@ export function main() {
count, [BenchmarkComponentNoBindings, BenchmarkComponentWithBindings]);
var urlResolver = new UrlResolver();
var appRootUrl = new AppRootUrl("");
var renderCompiler = new DefaultDomCompiler(
new Parser(new Lexer()), new ViewLoader(null, null, null), new SharedStylesHost(), 'a');
var renderCompiler =
new DefaultDomCompiler(new DomElementSchemaRegistry(), new Parser(new Lexer()),
new ViewLoader(null, null, null), new SharedStylesHost(), 'a');
var compiler =
new Compiler(reader, cache, viewResolver, new ComponentUrlMapper(), urlResolver,
renderCompiler, new ProtoViewFactory(new DynamicChangeDetection()), appRootUrl);