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

feat(ivy): bridge compile instructions to include sanitization helpers (#24938)

Browse Source 
PR Close #24938
This commit is contained in:
Matias Niemelä
2018-07-11 10:58:18 -07:00
committed by Victor Berchet
parent 13f3157823
commit 169e9dd2c8
21 changed files with 963 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts
View File

@ -53,7 +53,7 @@ describe('compiler compliance', () => {
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵE(0, "div", $c1$);
$r3$.ɵs(null, $c2$);
$r3$.ɵs($c2$);
$r3$.ɵNS();
$r3$.ɵE(1, "svg");
$r3$.ɵEe(2, "circle", $c3$);
@ -103,7 +103,7 @@ describe('compiler compliance', () => {
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵE(0, "div", $c1$);
$r3$.ɵs(null, $c2$);
$r3$.ɵs($c2$);
$r3$.ɵNM();
$r3$.ɵE(1, "math");
$r3$.ɵEe(2, "infinity");
@ -153,7 +153,7 @@ describe('compiler compliance', () => {
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵE(0, "div", $c1$);
$r3$.ɵs(null, $c2$);
$r3$.ɵs($c2$);
$r3$.ɵT(1, "Hello ");
$r3$.ɵE(2, "b");
$r3$.ɵT(3, "World");
@ -329,8 +329,8 @@ describe('compiler compliance', () => {
const factory = 'factory: function MyComponent_Factory() { return new MyComponent(); }';
const template = `
const _c0 = ["background-color"];
const _c1 = ["error"];
const _c0 = ["error"];
const _c1 = ["background-color"];
…
MyComponent.ngComponentDef = i0.ɵdefineComponent({type:MyComponent,selectors:[["my-component"]],
factory:function MyComponent_Factory(){

75
packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
View File

@ -43,11 +43,11 @@ describe('compiler compliance: styling', () => {
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵE(0, "div");
$r3$.ɵs();
$r3$.ɵs(null, null, $r3$.ɵzss);
$r3$.ɵe();
}
if (rf & 2) {
$r3$.ɵsm(0, $ctx$.myStyleExp);
$r3$.ɵsm(0, null, $ctx$.myStyleExp);
$r3$.ɵsa(0);
}
}
@ -96,15 +96,15 @@ describe('compiler compliance: styling', () => {
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵE(0, "div");
$r3$.ɵs(_c0);
$r3$.ɵs(null, _c0, $r3$.ɵzss);
$r3$.ɵe();
}
if (rf & 2) {
$r3$.ɵsm(0, $ctx$.myStyleExp);
$r3$.ɵsm(0, null, $ctx$.myStyleExp);
$r3$.ɵsp(0, 1, $ctx$.myWidth);
$r3$.ɵsp(0, 2, $ctx$.myHeight);
$r3$.ɵsa(0);
$r3$.ɵa(0, "style", $r3$.ɵb("border-width: 10px"));
$r3$.ɵa(0, "style", $r3$.ɵb("border-width: 10px"), $r3$.ɵzs);
}
}
});
@ -113,6 +113,59 @@ describe('compiler compliance: styling', () => {
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect template');
});
it('should assign a sanitizer instance to the element style allocation instruction if any url-based properties are detected',
() => {
const files = {
app: {
'spec.ts': `
import {Component, NgModule} from '@angular/core';
@Component({
selector: 'my-component',
template: \`<div [style.background-image]="myImage">\`
})
export class MyComponent {
myImage = 'url(foo.jpg)';
}
@NgModule({declarations: [MyComponent]})
export class MyModule {}
`
}
};
const template = `
const _c0 = ["background-image"];
export class MyComponent {
constructor() {
this.myImage = 'url(foo.jpg)';
}
}
MyComponent.ngComponentDef = i0.ɵdefineComponent({
type: MyComponent,
selectors: [["my-component"]],
factory: function MyComponent_Factory() {
return new MyComponent();
},
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
i0.ɵE(0, "div");
i0.ɵs(null, _c0, i0.ɵzss);
i0.ɵe();
}
if (rf & 2) {
i0.ɵsp(0, 0, ctx.myImage);
i0.ɵsa(0);
}
}
});
`;
const result = compile(files, angularFiles);
expectEmit(result.source, template, 'Incorrect template');
});
});
describe('[class]', () => {
@ -144,7 +197,7 @@ describe('compiler compliance: styling', () => {
$r3$.ɵe();
}
if (rf & 2) {
$r3$.ɵsm(0,null,$ctx$.myClassExp);
$r3$.ɵsm(0,$ctx$.myClassExp);
$r3$.ɵsa(0);
}
}
@ -193,11 +246,11 @@ describe('compiler compliance: styling', () => {
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵE(0, "div");
$r3$.ɵs(null, _c0);
$r3$.ɵs(_c0);
$r3$.ɵe();
}
if (rf & 2) {
$r3$.ɵsm(0, null, $ctx$.myClassExp);
$r3$.ɵsm(0, $ctx$.myClassExp);
$r3$.ɵcp(0, 1, $ctx$.yesToApple);
$r3$.ɵcp(0, 2, $ctx$.yesToOrange);
$r3$.ɵsa(0);
@ -234,8 +287,8 @@ describe('compiler compliance: styling', () => {
};
const template = `
const _c0 = ["width",${InitialStylingFlags.VALUES_MODE},"width","100px"];
const _c1 = ["foo",${InitialStylingFlags.VALUES_MODE},"foo",true];
const _c0 = ["foo",${InitialStylingFlags.VALUES_MODE},"foo",true];
const _c1 = ["width",${InitialStylingFlags.VALUES_MODE},"width","100px"];
…
MyComponent.ngComponentDef = i0.ɵdefineComponent({
type: MyComponent,
@ -251,7 +304,7 @@ describe('compiler compliance: styling', () => {
}
if (rf & 2) {
$r3$.ɵa(0, "class", $r3$.ɵb("round"));
$r3$.ɵa(0, "style", $r3$.ɵb("height:100px"));
$r3$.ɵa(0, "style", $r3$.ɵb("height:100px"), $r3$.ɵzs);
}
}
});