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

refactor(core): introduce NgModule.schemas

Browse Source 
This allows Angular to error on unknown properties,
allowing applications that don’t use custom elements
to get better error reporting.

Part of #10043

BREAKING CHANGE:
- By default, Angular will error during parsing
  on unknown properties,
  even if they are on elements with a `-` in their name
  (aka custom elements). If you application is using
  custom elements, fill the new parameter `@NgModule.schemas`
  with the value `[CUSTOM_ELEMENTS_SCHEMA]`.

  E.g. for bootstrap:
  ```
  bootstrap(MyComponent, {schemas: [CUSTOM_ELEMENTS_SCHEMA]});
  ```
This commit is contained in:
Tobias Bosch
2016-07-25 03:02:57 -07:00
parent f02da4e91a
commit 00b726f695
21 changed files with 249 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
modules/@angular/compiler/test/schema/dom_element_schema_registry_spec.ts
View File

@ -9,7 +9,7 @@
import {HtmlElementAst} from '@angular/compiler/src/html_ast';
import {HtmlParser} from '@angular/compiler/src/html_parser';
import {DomElementSchemaRegistry} from '@angular/compiler/src/schema/dom_element_schema_registry';
import {SecurityContext} from '@angular/core';
import {CUSTOM_ELEMENTS_SCHEMA, SecurityContext} from '@angular/core';
import {beforeEach, ddescribe, describe, expect, iit, inject, it, xdescribe, xit} from '@angular/core/testing/testing_internal';
import {browserDetection} from '@angular/platform-browser/testing/browser_util';
@ -21,34 +21,38 @@ export function main() {
beforeEach(() => { registry = new DomElementSchemaRegistry(); });
it('should detect properties on regular elements', () => {
expect(registry.hasProperty('div', 'id')).toBeTruthy();
expect(registry.hasProperty('div', 'title')).toBeTruthy();
expect(registry.hasProperty('h1', 'align')).toBeTruthy();
expect(registry.hasProperty('h2', 'align')).toBeTruthy();
expect(registry.hasProperty('h3', 'align')).toBeTruthy();
expect(registry.hasProperty('h4', 'align')).toBeTruthy();
expect(registry.hasProperty('h5', 'align')).toBeTruthy();
expect(registry.hasProperty('h6', 'align')).toBeTruthy();
expect(registry.hasProperty('h7', 'align')).toBeFalsy();
expect(registry.hasProperty('textarea', 'disabled')).toBeTruthy();
expect(registry.hasProperty('input', 'disabled')).toBeTruthy();
expect(registry.hasProperty('div', 'unknown')).toBeFalsy();
expect(registry.hasProperty('div', 'id', [])).toBeTruthy();
expect(registry.hasProperty('div', 'title', [])).toBeTruthy();
expect(registry.hasProperty('h1', 'align', [])).toBeTruthy();
expect(registry.hasProperty('h2', 'align', [])).toBeTruthy();
expect(registry.hasProperty('h3', 'align', [])).toBeTruthy();
expect(registry.hasProperty('h4', 'align', [])).toBeTruthy();
expect(registry.hasProperty('h5', 'align', [])).toBeTruthy();
expect(registry.hasProperty('h6', 'align', [])).toBeTruthy();
expect(registry.hasProperty('h7', 'align', [])).toBeFalsy();
expect(registry.hasProperty('textarea', 'disabled', [])).toBeTruthy();
expect(registry.hasProperty('input', 'disabled', [])).toBeTruthy();
expect(registry.hasProperty('div', 'unknown', [])).toBeFalsy();
});
it('should detect different kinds of types', () => {
// inheritance: video => media => *
expect(registry.hasProperty('video', 'className')).toBeTruthy(); // from *
expect(registry.hasProperty('video', 'id')).toBeTruthy(); // string
expect(registry.hasProperty('video', 'scrollLeft')).toBeTruthy(); // number
expect(registry.hasProperty('video', 'height')).toBeTruthy(); // number
expect(registry.hasProperty('video', 'autoplay')).toBeTruthy(); // boolean
expect(registry.hasProperty('video', 'classList')).toBeTruthy(); // object
expect(registry.hasProperty('video', 'className', [])).toBeTruthy(); // from *
expect(registry.hasProperty('video', 'id', [])).toBeTruthy(); // string
expect(registry.hasProperty('video', 'scrollLeft', [])).toBeTruthy(); // number
expect(registry.hasProperty('video', 'height', [])).toBeTruthy(); // number
expect(registry.hasProperty('video', 'autoplay', [])).toBeTruthy(); // boolean
expect(registry.hasProperty('video', 'classList', [])).toBeTruthy(); // object
// from *; but events are not properties
expect(registry.hasProperty('video', 'click')).toBeFalsy();
expect(registry.hasProperty('video', 'click', [])).toBeFalsy();
});
it('should return true for custom-like elements',
() => { expect(registry.hasProperty('custom-like', 'unknown')).toBeTruthy(); });
it('should return false for custom-like elements by default',
() => { expect(registry.hasProperty('custom-like', 'unknown', [])).toBe(false); });
it('should return true for custom-like elements if the CUSTOM_ELEMENTS_SCHEMA was used', () => {
expect(registry.hasProperty('custom-like', 'unknown', [CUSTOM_ELEMENTS_SCHEMA])).toBeTruthy();
});
it('should re-map property names that are specified in DOM facade',
() => { expect(registry.getMappedPropName('readonly')).toEqual('readOnly'); });
@ -70,7 +74,7 @@ export function main() {
it('should detect properties on namespaced elements', () => {
const htmlAst = new HtmlParser().parse('<svg:style>', 'TestComp');
const nodeName = (<HtmlElementAst>htmlAst.rootNodes[0]).name;
expect(registry.hasProperty(nodeName, 'type')).toBeTruthy();
expect(registry.hasProperty(nodeName, 'type', [])).toBeTruthy();
});
it('should check security contexts case insensitive', () => {
@ -81,11 +85,11 @@ export function main() {
describe('Angular custom elements', () => {
it('should support <ng-container>',
() => { expect(registry.hasProperty('ng-container', 'id')).toBeFalsy(); });
() => { expect(registry.hasProperty('ng-container', 'id', [])).toBeFalsy(); });
it('should support <ng-content>', () => {
expect(registry.hasProperty('ng-content', 'id')).toBeFalsy();
expect(registry.hasProperty('ng-content', 'select')).toBeFalsy();
expect(registry.hasProperty('ng-content', 'id', [])).toBeFalsy();
expect(registry.hasProperty('ng-content', 'select', [])).toBeFalsy();
});
});

8
modules/@angular/compiler/test/template_parser_spec.ts
View File

@ -12,7 +12,7 @@ import {ElementSchemaRegistry} from '@angular/compiler/src/schema/element_schema
import {AttrAst, BoundDirectivePropertyAst, BoundElementPropertyAst, BoundEventAst, BoundTextAst, DirectiveAst, ElementAst, EmbeddedTemplateAst, NgContentAst, PropertyBindingType, ProviderAstType, ReferenceAst, TemplateAst, TemplateAstVisitor, TextAst, VariableAst, templateVisitAll} from '@angular/compiler/src/template_ast';
import {TEMPLATE_TRANSFORMS, TemplateParser, splitClasses} from '@angular/compiler/src/template_parser';
import {MockSchemaRegistry} from '@angular/compiler/testing';
import {SecurityContext} from '@angular/core';
import {SchemaMetadata, SecurityContext} from '@angular/core';
import {Console} from '@angular/core/src/console';
import {configureCompiler} from '@angular/core/testing';
import {afterEach, beforeEach, beforeEachProviders, ddescribe, describe, expect, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
@ -56,11 +56,11 @@ export function main() {
parse =
(template: string, directives: CompileDirectiveMetadata[],
pipes: CompilePipeMetadata[] = null): TemplateAst[] => {
pipes: CompilePipeMetadata[] = null, schemas: SchemaMetadata[] = []): TemplateAst[] => {
if (pipes === null) {
pipes = [];
}
return parser.parse(component, template, directives, pipes, 'TestComp');
return parser.parse(component, template, directives, pipes, schemas, 'TestComp');
};
}));
}
@ -181,7 +181,7 @@ export function main() {
isComponent: true,
template: new CompileTemplateMetadata({interpolation: ['{%', '%}']})
});
expect(humanizeTplAst(parser.parse(component, '{%a%}', [], [], 'TestComp'), {
expect(humanizeTplAst(parser.parse(component, '{%a%}', [], [], [], 'TestComp'), {
start: '{%',
end: '%}'
})).toEqual([[BoundTextAst, '{% a %}']]);