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

refactor(ivy): rename class/style to make space for new instruction (#22719) 

Rename:
- `elementClass` (short: `k`) => `elementClassNamed` (short: `kn`)
- `elementStyle` (short: `s`) => `elementStyleNamed` (short: `sn`)

Currently `[class.name]` is `elementClass(0, ‘name’, value)`. We would
like to introduce new binding `[class]` which needs a new instruction
ideally `elementClass(0, value)`. Doing the rename creates space
to create such an instruction in subsequent change.

PR Close #22719
This commit is contained in:
Miško Hevery 2018-03-07 16:25:18 -08:00 committed by Kara Erickson
parent ae19d071bb
commit a0a01f1e1e
10 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/compiler/src/render3/r3_identifiers.ts
View File

@ -26,9 +26,9 @@ export class Identifiers {
static elementAttribute: o.ExternalReference = {name: 'ɵa', moduleName: CORE};
static elementClass: o.ExternalReference = {name: 'ɵk', moduleName: CORE};
static elementClassNamed: o.ExternalReference = {name: 'ɵkn', moduleName: CORE};
static elementStyle: o.ExternalReference = {name: 'ɵs', moduleName: CORE};
static elementStyleNamed: o.ExternalReference = {name: 'ɵsn', moduleName: CORE};
static containerCreate: o.ExternalReference = {name: 'ɵC', moduleName: CORE};

4
packages/compiler/src/render3/r3_view_compiler.ts
View File

@ -210,8 +210,8 @@ function unsupported(feature: string): never {
const BINDING_INSTRUCTION_MAP: {[index: number]: o.ExternalReference | undefined} = {
[PropertyBindingType.Property]: R3.elementProperty,
[PropertyBindingType.Attribute]: R3.elementAttribute,
[PropertyBindingType.Class]: R3.elementClass,
[PropertyBindingType.Style]: R3.elementStyle
[PropertyBindingType.Class]: R3.elementClassNamed,
[PropertyBindingType.Style]: R3.elementStyleNamed
};
function interpolate(args: o.Expression[]): o.Expression {

4
packages/core/src/core_render3_private_export.ts
View File

@ -63,8 +63,8 @@ export {
p as ɵp,
pD as ɵpD,
a as ɵa,
k as ɵk,
s as ɵs,
sn as ɵsn,
kn as ɵkn,
t as ɵt,
v as ɵv,
st as ɵst,

4
packages/core/src/render3/index.ts
View File

@ -45,11 +45,11 @@ export {
containerRefreshEnd as cr,
elementAttribute as a,
elementClass as k,
elementClassNamed as kn,
elementEnd as e,
elementProperty as p,
elementStart as E,
elementStyle as s,
elementStyleNamed as sn,
listener as L,
store as st,

8
packages/core/src/render3/instructions.ts
View File

@ -875,7 +875,7 @@ function generatePropertyAliases(lNodeFlags: number, direction: BindingDirection
* renaming as part of minification.
* @param value A value indicating if a given class should be added or removed.
*/
export function elementClass<T>(index: number, className: string, value: T | NO_CHANGE): void {
export function elementClassNamed<T>(index: number, className: string, value: T | NO_CHANGE): void {
if (value !== NO_CHANGE) {
const lElement = data[index] as LElementNode;
if (value) {
@ -900,11 +900,11 @@ export function elementClass<T>(index: number, className: string, value: T | NO_
* @param sanitizer An optional function used to transform the value typically used for
* sanitization.
*/
export function elementStyle<T>(
export function elementStyleNamed<T>(
index: number, styleName: string, value: T | NO_CHANGE, suffix?: string): void;
export function elementStyle<T>(
export function elementStyleNamed<T>(
index: number, styleName: string, value: T | NO_CHANGE, sanitizer?: Sanitizer): void;
export function elementStyle<T>(
export function elementStyleNamed<T>(
index: number, styleName: string, value: T | NO_CHANGE,
suffixOrSanitizer?: string | Sanitizer): void {
if (value !== NO_CHANGE) {

8
packages/core/test/render3/compiler_canonical/elements_spec.ts
View File

@ -168,7 +168,7 @@ describe('elements', () => {
$r3$.ɵE(0, 'div');
$r3$.ɵe();
}
$r3$.ɵk(0, 'foo', $r3$.ɵb(ctx.someFlag));
$r3$.ɵkn(0, 'foo', $r3$.ɵb(ctx.someFlag));
}
});
// /NORMATIVE
@ -202,8 +202,8 @@ describe('elements', () => {
$r3$.ɵE(0, 'div');
$r3$.ɵe();
}
$r3$.ɵs(0, 'color', $r3$.ɵb(ctx.someColor));
$r3$.ɵs(0, 'width', $r3$.ɵb(ctx.someWidth), 'px');
$r3$.ɵsn(0, 'color', $r3$.ɵb(ctx.someColor));
$r3$.ɵsn(0, 'width', $r3$.ɵb(ctx.someWidth), 'px');
}
});
// /NORMATIVE
@ -251,7 +251,7 @@ describe('elements', () => {
$r3$.ɵe();
}
$r3$.ɵp(0, 'id', $r3$.ɵb(ctx.someString + 1));
$r3$.ɵk(0, 'foo', $r3$.ɵb(ctx.someString == 'initial'));
$r3$.ɵkn(0, 'foo', $r3$.ɵb(ctx.someString == 'initial'));
}
});
// /NORMATIVE

2
packages/core/test/render3/compiler_canonical/sanitize_spec.ts
View File

@ -49,7 +49,7 @@ describe('compiler sanitization', () => {
}
$r3$.ɵp(0, 'innerHTML', $r3$.ɵb(ctx.innerHTML), $r3$.ɵsanitizeHtml);
$r3$.ɵp(0, 'hidden', $r3$.ɵb(ctx.hidden));
$r3$.ɵs(1, 'background-image', $r3$.ɵb(ctx.style), $r3$.ɵsanitizeStyle);
$r3$.ɵsn(1, 'background-image', $r3$.ɵb(ctx.style), $r3$.ɵsanitizeStyle);
$r3$.ɵp(1, 'src', $r3$.ɵb(ctx.url), $r3$.ɵsanitizeUrl);
$r3$.ɵa(1, 'srcset', $r3$.ɵb(ctx.url), $r3$.ɵsanitizeUrl);
}

4
packages/core/test/render3/exports_spec.ts
View File

@ -7,7 +7,7 @@
*/
import {defineComponent, defineDirective} from '../../src/render3/index';
import {bind, container, containerRefreshEnd, containerRefreshStart, elementAttribute, elementClass, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, load, text, textBinding} from '../../src/render3/instructions';
import {bind, container, containerRefreshEnd, containerRefreshStart, elementAttribute, elementClassNamed, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, load, text, textBinding} from '../../src/render3/instructions';
import {renderToHtml} from './render_util';
@ -169,7 +169,7 @@ describe('exports', () => {
elementEnd();
}
let myInput = elementStart(1);
elementClass(0, 'red', bind(myInput && (myInput as any).checked));
elementClassNamed(0, 'red', bind(myInput && (myInput as any).checked));
}
expect(renderToHtml(Template, {}))

8
packages/core/test/render3/instructions_spec.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {elementAttribute, elementEnd, elementProperty, elementStart, elementStyle, renderTemplate} from '../../src/render3/instructions';
import {elementAttribute, elementEnd, elementProperty, elementStart, elementStyleNamed, renderTemplate} from '../../src/render3/instructions';
import {LElementNode, LNode} from '../../src/render3/interfaces/node';
import {RElement, domRendererFactory3} from '../../src/render3/interfaces/renderer';
import {bypassSanitizationTrustStyle, bypassSanitizationTrustUrl, sanitizeStyle, sanitizeUrl} from '../../src/sanitization/sanitization';
@ -55,15 +55,15 @@ describe('instructions', () => {
});
});
describe('elementStyle', () => {
describe('elementStyleNamed', () => {
it('should use sanitizer function', () => {
const t = new TemplateFixture(createDiv);
t.update(() => elementStyle(0, 'background-image', 'url("http://server")', sanitizeStyle));
t.update(() => elementStyleNamed(0, 'background-image', 'url("http://server")', sanitizeStyle));
// nothing is set because sanitizer suppresses it.
expect(t.html).toEqual('<div></div>');
t.update(
() => elementStyle(
() => elementStyleNamed(
0, 'background-image', bypassSanitizationTrustStyle('url("http://server")'),
sanitizeStyle));
expect((t.hostElement.firstChild as HTMLElement).style.getPropertyValue('background-image'))

10
packages/core/test/render3/integration_spec.ts
View File

@ -7,7 +7,7 @@
*/
import {defineComponent, defineDirective} from '../../src/render3/index';
import {NO_CHANGE, bind, container, containerRefreshEnd, containerRefreshStart, elementAttribute, elementClass, elementEnd, elementProperty, elementStart, elementStyle, embeddedViewEnd, embeddedViewStart, interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV, load, projection, projectionDef, text, textBinding} from '../../src/render3/instructions';
import {NO_CHANGE, bind, container, containerRefreshEnd, containerRefreshStart, elementAttribute, elementClassNamed, elementEnd, elementProperty, elementStart, elementStyleNamed, embeddedViewEnd, embeddedViewStart, interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV, load, projection, projectionDef, text, textBinding} from '../../src/render3/instructions';
import {containerEl, renderToHtml} from './render_util';
@ -659,7 +659,7 @@ describe('render3 integration test', () => {
elementStart(0, 'span');
elementEnd();
}
elementStyle(0, 'border-color', bind(ctx));
elementStyleNamed(0, 'border-color', bind(ctx));
}
expect(renderToHtml(Template, 'red')).toEqual('<span style="border-color: red;"></span>');
@ -674,7 +674,7 @@ describe('render3 integration test', () => {
elementStart(0, 'span');
elementEnd();
}
elementStyle(0, 'font-size', bind(ctx), 'px');
elementStyleNamed(0, 'font-size', bind(ctx), 'px');
}
expect(renderToHtml(Template, '100')).toEqual('<span style="font-size: 100px;"></span>');
@ -691,7 +691,7 @@ describe('render3 integration test', () => {
elementStart(0, 'span');
elementEnd();
}
elementClass(0, 'active', bind(ctx));
elementClassNamed(0, 'active', bind(ctx));
}
expect(renderToHtml(Template, true)).toEqual('<span class="active"></span>');
@ -712,7 +712,7 @@ describe('render3 integration test', () => {
elementStart(0, 'span', ['class', 'existing']);
elementEnd();
}
elementClass(0, 'active', bind(ctx));
elementClassNamed(0, 'active', bind(ctx));
}
expect(renderToHtml(Template, true)).toEqual('<span class="existing active"></span>');