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

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

Browse Source 
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 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}; 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} = { const BINDING_INSTRUCTION_MAP: {[index: number]: o.ExternalReference | undefined} = {
[PropertyBindingType.Property]: R3.elementProperty, [PropertyBindingType.Property]: R3.elementProperty,
[PropertyBindingType.Attribute]: R3.elementAttribute, [PropertyBindingType.Attribute]: R3.elementAttribute,
[PropertyBindingType.Class]: R3.elementClass, [PropertyBindingType.Class]: R3.elementClassNamed,
[PropertyBindingType.Style]: R3.elementStyle [PropertyBindingType.Style]: R3.elementStyleNamed
}; };
function interpolate(args: o.Expression[]): o.Expression { 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, p as ɵp,
pD as ɵpD, pD as ɵpD,
a as ɵa, a as ɵa,
k as ɵk, sn as ɵsn,
s as ɵs, kn as ɵkn,
t as ɵt, t as ɵt,
v as ɵv, v as ɵv,
st as ɵst, st as ɵst,

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

@ -45,11 +45,11 @@ export {
containerRefreshEnd as cr, containerRefreshEnd as cr,
elementAttribute as a, elementAttribute as a,
elementClass as k, elementClassNamed as kn,
elementEnd as e, elementEnd as e,
elementProperty as p, elementProperty as p,
elementStart as E, elementStart as E,
elementStyle as s, elementStyleNamed as sn,
listener as L, listener as L,
store as st, 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. * renaming as part of minification.
* @param value A value indicating if a given class should be added or removed. * @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) { if (value !== NO_CHANGE) {
const lElement = data[index] as LElementNode; const lElement = data[index] as LElementNode;
if (value) { 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 * @param sanitizer An optional function used to transform the value typically used for
* sanitization. * sanitization.
*/ */
export function elementStyle<T>( export function elementStyleNamed<T>(
index: number, styleName: string, value: T | NO_CHANGE, suffix?: string): void; 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; 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, index: number, styleName: string, value: T | NO_CHANGE,
suffixOrSanitizer?: string | Sanitizer): void { suffixOrSanitizer?: string | Sanitizer): void {
if (value !== NO_CHANGE) { 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(0, 'div');
$r3$.ɵe(); $r3$.ɵe();
} }
$r3$.ɵk(0, 'foo', $r3$.ɵb(ctx.someFlag)); $r3$.ɵkn(0, 'foo', $r3$.ɵb(ctx.someFlag));
} }
}); });
// /NORMATIVE // /NORMATIVE
@ -202,8 +202,8 @@ describe('elements', () => {
$r3$.ɵE(0, 'div'); $r3$.ɵE(0, 'div');
$r3$.ɵe(); $r3$.ɵe();
} }
$r3$.ɵs(0, 'color', $r3$.ɵb(ctx.someColor)); $r3$.ɵsn(0, 'color', $r3$.ɵb(ctx.someColor));
$r3$.ɵs(0, 'width', $r3$.ɵb(ctx.someWidth), 'px'); $r3$.ɵsn(0, 'width', $r3$.ɵb(ctx.someWidth), 'px');
} }
}); });
// /NORMATIVE // /NORMATIVE
@ -251,7 +251,7 @@ describe('elements', () => {
$r3$.ɵe(); $r3$.ɵe();
} }
$r3$.ɵp(0, 'id', $r3$.ɵb(ctx.someString + 1)); $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 // /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, 'innerHTML', $r3$.ɵb(ctx.innerHTML), $r3$.ɵsanitizeHtml);
$r3$.ɵp(0, 'hidden', $r3$.ɵb(ctx.hidden)); $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$.ɵp(1, 'src', $r3$.ɵb(ctx.url), $r3$.ɵsanitizeUrl);
$r3$.ɵa(1, 'srcset', $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 {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'; import {renderToHtml} from './render_util';
@ -169,7 +169,7 @@ describe('exports', () => {
elementEnd(); elementEnd();
} }
let myInput = elementStart(1); 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, {})) 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 * 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 {LElementNode, LNode} from '../../src/render3/interfaces/node';
import {RElement, domRendererFactory3} from '../../src/render3/interfaces/renderer'; import {RElement, domRendererFactory3} from '../../src/render3/interfaces/renderer';
import {bypassSanitizationTrustStyle, bypassSanitizationTrustUrl, sanitizeStyle, sanitizeUrl} from '../../src/sanitization/sanitization'; import {bypassSanitizationTrustStyle, bypassSanitizationTrustUrl, sanitizeStyle, sanitizeUrl} from '../../src/sanitization/sanitization';
@ -55,15 +55,15 @@ describe('instructions', () => {
}); });
}); });
describe('elementStyle', () => { describe('elementStyleNamed', () => {
it('should use sanitizer function', () => { it('should use sanitizer function', () => {
const t = new TemplateFixture(createDiv); 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. // nothing is set because sanitizer suppresses it.
expect(t.html).toEqual('<div></div>'); expect(t.html).toEqual('<div></div>');
t.update( t.update(
() => elementStyle( () => elementStyleNamed(
0, 'background-image', bypassSanitizationTrustStyle('url("http://server")'), 0, 'background-image', bypassSanitizationTrustStyle('url("http://server")'),
sanitizeStyle)); sanitizeStyle));
expect((t.hostElement.firstChild as HTMLElement).style.getPropertyValue('background-image')) 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 {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'; import {containerEl, renderToHtml} from './render_util';
@ -659,7 +659,7 @@ describe('render3 integration test', () => {
elementStart(0, 'span'); elementStart(0, 'span');
elementEnd(); elementEnd();
} }
elementStyle(0, 'border-color', bind(ctx)); elementStyleNamed(0, 'border-color', bind(ctx));
} }
expect(renderToHtml(Template, 'red')).toEqual('<span style="border-color: red;"></span>'); expect(renderToHtml(Template, 'red')).toEqual('<span style="border-color: red;"></span>');
@ -674,7 +674,7 @@ describe('render3 integration test', () => {
elementStart(0, 'span'); elementStart(0, 'span');
elementEnd(); 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>'); expect(renderToHtml(Template, '100')).toEqual('<span style="font-size: 100px;"></span>');
@ -691,7 +691,7 @@ describe('render3 integration test', () => {
elementStart(0, 'span'); elementStart(0, 'span');
elementEnd(); elementEnd();
} }
elementClass(0, 'active', bind(ctx)); elementClassNamed(0, 'active', bind(ctx));
} }
expect(renderToHtml(Template, true)).toEqual('<span class="active"></span>'); expect(renderToHtml(Template, true)).toEqual('<span class="active"></span>');
@ -712,7 +712,7 @@ describe('render3 integration test', () => {
elementStart(0, 'span', ['class', 'existing']); elementStart(0, 'span', ['class', 'existing']);
elementEnd(); elementEnd();
} }
elementClass(0, 'active', bind(ctx)); elementClassNamed(0, 'active', bind(ctx));
} }
expect(renderToHtml(Template, true)).toEqual('<span class="existing active"></span>'); expect(renderToHtml(Template, true)).toEqual('<span class="existing active"></span>');