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

refactor(ivy): add element instruction, reducing output size (#24379)

Browse Source 
- Adds an element instruction
- Reduces size of compiled output slightly

PR Close #24379
This commit is contained in:
Ben Lesh
2018-06-08 10:48:27 -07:00
committed by Miško Hevery
parent 014949f74c
commit 8dd99ac550
19 changed files with 127 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,6 +33,7 @@ export {
NH as ɵNH,
NM as ɵNM,
NS as ɵNS,
Ee as ɵEe,
L as ɵL,
T as ɵT,
V as ɵV,

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

@ -44,6 +44,7 @@ export {
containerRefreshStart as cR,
containerRefreshEnd as cr,
element as Ee,
elementAttribute as a,
elementClass as k,
elementClassNamed as kn,

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

@ -573,6 +573,20 @@ export function namespaceHTML() {
//// Element
//////////////////////////
/**
* Creates an empty element using {@link elementStart} and {@link elementEnd}
*
* @param index Index of the element in the data array
* @param name Name of the DOM Node
* @param attrs Statically bound set of attributes to be written into the DOM element on creation.
* @param localRefs A set of local reference bindings on the element.
*/
export function element(
index: number, name: string, attrs?: TAttributes | null, localRefs?: string[] | null): void {
elementStart(index, name, attrs, localRefs);
elementEnd();
}
/**
* Create DOM element. The instruction must later be followed by `elementEnd()` call.
*

1
packages/core/src/render3/jit/environment.ts
View File

@ -41,6 +41,7 @@ export const angularCoreEnv: {[name: string]: Function} = {
'ɵNS': r3.NS,
'ɵE': r3.E,
'ɵe': r3.e,
'ɵEe': r3.Ee,
'ɵf0': r3.f0,
'ɵf1': r3.f1,
'ɵf2': r3.f2,

36
packages/core/test/render3/compiler_canonical/component_directives_spec.ts
View File

@ -69,8 +69,7 @@ describe('components & directives', () => {
factory: () => new MyComponent(),
template: function(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵE(0, 'child', $e0_attrs$);
$r3$.ɵe();
$r3$.ɵEe(0, 'child', $e0_attrs$);
$r3$.ɵT(1, '!');
}
}
@ -121,8 +120,7 @@ describe('components & directives', () => {
factory: function MyApp_Factory() { return new MyApp(); },
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵE(0, 'div', $e0_attrs$);
$r3$.ɵe();
$r3$.ɵEe(0, 'div', $e0_attrs$);
}
}
});
@ -217,8 +215,7 @@ describe('components & directives', () => {
factory: function MyApp_Factory() { return new MyApp(); },
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵE(0, 'div', $e0_attrs$);
$r3$.ɵe();
$r3$.ɵEe(0, 'div', $e0_attrs$);
}
}
});
@ -265,8 +262,7 @@ describe('components & directives', () => {
factory: function MyApp_Factory() { return new MyApp(); },
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵE(0, 'div', $e0_attrs$);
$r3$.ɵe();
$r3$.ɵEe(0, 'div', $e0_attrs$);
}
}
});
@ -325,8 +321,7 @@ describe('components & directives', () => {
factory: function MyApp_Factory() { return new MyApp(); },
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵE(0, 'my-comp');
$r3$.ɵe();
$r3$.ɵEe(0, 'my-comp');
}
if (rf & 2) {
$r3$.ɵp(0, 'name', $r3$.ɵb(ctx.name));
@ -455,8 +450,7 @@ describe('components & directives', () => {
factory: function MyApp_Factory() { return new MyApp(); },
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵE(0, 'my-array-comp');
$r3$.ɵe();
$r3$.ɵEe(0, 'my-array-comp');
}
if (rf & 2) {
$r3$.ɵp(0, 'names', rf & 1 ? $e0_arr$ : $r3$.ɵNC);
@ -500,8 +494,7 @@ describe('components & directives', () => {
factory: function MyApp_Factory() { return new MyApp(); },
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵE(0, 'my-array-comp');
$r3$.ɵe();
$r3$.ɵEe(0, 'my-array-comp');
$r3$.ɵrS(1);
}
if (rf & 2) {
@ -562,8 +555,7 @@ describe('components & directives', () => {
factory: function MyApp_Factory() { return new MyApp(); },
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵE(0, 'my-comp');
$r3$.ɵe();
$r3$.ɵEe(0, 'my-comp');
$r3$.ɵrS(1);
}
if (rf & 2) {
@ -606,8 +598,7 @@ describe('components & directives', () => {
factory: function MyApp_Factory() { return new MyApp(); },
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵE(0, 'my-array-comp');
$r3$.ɵe();
$r3$.ɵEe(0, 'my-array-comp');
$r3$.ɵrS(2);
}
if (rf & 2) {
@ -717,8 +708,7 @@ describe('components & directives', () => {
factory: function MyApp_Factory() { return new MyApp(); },
template: function MyApp_Template(rf: $RenderFlags$, c: $any$) {
if (rf & 1) {
$r3$.ɵE(0, 'my-comp');
$r3$.ɵe();
$r3$.ɵEe(0, 'my-comp');
$r3$.ɵrS(10);
}
if (rf & 2) {
@ -796,8 +786,7 @@ describe('components & directives', () => {
factory: function MyApp_Factory() { return new MyApp(); },
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵE(0, 'object-comp');
$r3$.ɵe();
$r3$.ɵEe(0, 'object-comp');
$r3$.ɵrS(2);
}
if (rf & 2) {
@ -882,8 +871,7 @@ describe('components & directives', () => {
factory: function MyApp_Factory() { return new MyApp(); },
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵE(0, 'nested-comp');
$r3$.ɵe();
$r3$.ɵEe(0, 'nested-comp');
$r3$.ɵrS(7);
}
if (rf & 2) {

9
packages/core/test/render3/compiler_canonical/content_projection_spec.ts
View File

@ -28,9 +28,8 @@ describe('content projection', () => {
template: function(rf: $RenderFlags$, ctx: $SimpleComponent$) {
if (rf & 1) {
$r3$.ɵpD(0);
$r3$.ɵE(1, 'div');
$r3$.ɵEe(1, 'div');
$r3$.ɵP(2, 0);
$r3$.ɵe();
}
}
});
@ -58,12 +57,10 @@ describe('content projection', () => {
template: function(rf: $RenderFlags$, ctx: $ComplexComponent$) {
if (rf & 1) {
$r3$.ɵpD(0, $pD_0P$, $pD_0R$);
$r3$.ɵE(1, 'div', ['id', 'first']);
$r3$.ɵEe(1, 'div', ['id', 'first']);
$r3$.ɵP(2, 0, 1);
$r3$.ɵe();
$r3$.ɵE(3, 'div', ['id', 'second']);
$r3$.ɵEe(3, 'div', ['id', 'second']);
$r3$.ɵP(4, 0, 2);
$r3$.ɵe();
}
}
});

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

@ -91,8 +91,7 @@ describe('elements', () => {
let $tmp$: any;
let $tmp_2$: any;
if (rf & 1) {
$r3$.ɵE(0, 'div', $e0_attrs$, $e0_locals$);
$r3$.ɵe();
$r3$.ɵEe(0, 'div', $e0_attrs$, $e0_locals$);
$r3$.ɵT(3);
}
if (rf & 2) {
@ -165,8 +164,7 @@ describe('elements', () => {
factory: function MyComponent_Factory() { return new MyComponent(); },
template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵE(0, 'div');
$r3$.ɵe();
$r3$.ɵEe(0, 'div');
}
if (rf & 2) {
$r3$.ɵp(0, 'id', $r3$.ɵb(ctx.someProperty));
@ -197,8 +195,7 @@ describe('elements', () => {
factory: function MyComponent_Factory() { return new MyComponent(); },
template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵE(0, 'div');
$r3$.ɵe();
$r3$.ɵEe(0, 'div');
}
if (rf & 2) {
$r3$.ɵa(0, 'title', $r3$.ɵb(ctx.someAttribute));
@ -229,8 +226,7 @@ describe('elements', () => {
factory: function MyComponent_Factory() { return new MyComponent(); },
template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵE(0, 'div');
$r3$.ɵe();
$r3$.ɵEe(0, 'div');
}
if (rf & 2) {
$r3$.ɵkn(0, 'foo', $r3$.ɵb(ctx.someFlag));
@ -265,8 +261,7 @@ describe('elements', () => {
factory: function MyComponent_Factory() { return new MyComponent(); },
template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵE(0, 'div');
$r3$.ɵe();
$r3$.ɵEe(0, 'div');
}
if (rf & 2) {
$r3$.ɵsn(0, 'color', $r3$.ɵb(ctx.someColor));
@ -315,8 +310,7 @@ describe('elements', () => {
factory: function MyComponent_Factory() { return new MyComponent(); },
template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵE(0, 'div', $e0_attrs$);
$r3$.ɵe();
$r3$.ɵEe(0, 'div', $e0_attrs$);
}
if (rf & 2) {
$r3$.ɵp(0, 'id', $r3$.ɵb(ctx.someString + 1));
@ -351,8 +345,7 @@ describe('elements', () => {
factory: function StyleComponent_Factory() { return new StyleComponent(); },
template: function StyleComponent_Template(rf: $RenderFlags$, ctx: $StyleComponent$) {
if (rf & 1) {
$r3$.ɵE(0, 'div');
$r3$.ɵe();
$r3$.ɵEe(0, 'div');
}
if (rf & 2) {
$r3$.ɵk(0, $r3$.ɵb(ctx.classExp));

6
packages/core/test/render3/compiler_canonical/injection_spec.ts
View File

@ -54,8 +54,7 @@ describe('injection', () => {
/** <my-comp></my-comp> */
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵE(0, 'my-comp');
$r3$.ɵe();
$r3$.ɵEe(0, 'my-comp');
}
},
directives: () => [MyComp]
@ -101,8 +100,7 @@ describe('injection', () => {
/** <my-comp></my-comp> */
template: function MyApp_Template(rf: $RenderFlags$, ctx: $MyApp$) {
if (rf & 1) {
$r3$.ɵE(0, 'my-comp', e0_attrs);
$r3$.ɵe();
$r3$.ɵEe(0, 'my-comp', e0_attrs);
}
},
directives: () => [MyComp]

6
packages/core/test/render3/compiler_canonical/life_cycle_spec.ts
View File

@ -70,10 +70,8 @@ describe('lifecycle hooks', () => {
factory: function SimpleLayout_Factory() { return simpleLayout = new SimpleLayout(); },
template: function SimpleLayout_Template(rf: $RenderFlags$, ctx: $SimpleLayout$) {
if (rf & 1) {
$r3$.ɵE(0, 'lifecycle-comp');
$r3$.ɵe();
$r3$.ɵE(1, 'lifecycle-comp');
$r3$.ɵe();
$r3$.ɵEe(0, 'lifecycle-comp');
$r3$.ɵEe(1, 'lifecycle-comp');
}
if (rf & 2) {
$r3$.ɵp(0, 'name', $r3$.ɵb(ctx.name1));

3
packages/core/test/render3/compiler_canonical/local_reference_spec.ts
View File

@ -28,8 +28,7 @@ describe('local references', () => {
template: function(rf: $RenderFlags$, ctx: $MyComponent$) {
let l1_user: any;
if (rf & 1) {
$r3$.ɵE(0, 'input', null, ['user', '']);
$r3$.ɵe();
$r3$.ɵEe(0, 'input', null, ['user', '']);
$r3$.ɵT(2);
}
if (rf & 2) {

6
packages/core/test/render3/compiler_canonical/query_spec.ts
View File

@ -58,8 +58,7 @@ describe('queries', () => {
if (rf & 1) {
$r3$.ɵQ(0, SomeDirective, false);
$r3$.ɵQ(1, SomeDirective, false);
$r3$.ɵE(2, 'div', $e1_attrs$);
$r3$.ɵe();
$r3$.ɵEe(2, 'div', $e1_attrs$);
}
if (rf & 2) {
$r3$.ɵqR($tmp$ = $r3$.ɵld<QueryList<any>>(0)) && (ctx.someDir = $tmp$.first);
@ -147,8 +146,7 @@ describe('queries', () => {
if (rf & 1) {
$r3$.ɵE(0, 'content-query-component');
contentQueryComp = $r3$.ɵd<any[]>(0)[0];
$r3$.ɵE(1, 'div', $e2_attrs$);
$r3$.ɵe();
$r3$.ɵEe(1, 'div', $e2_attrs$);
$r3$.ɵe();
}
}

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

@ -43,10 +43,8 @@ describe('compiler sanitization', () => {
factory: function MyComponent_Factory() { return new MyComponent(); },
template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
if (rf & 1) {
$r3$.ɵE(0, 'div');
$r3$.ɵe();
$r3$.ɵE(1, 'img');
$r3$.ɵe();
$r3$.ɵEe(0, 'div');
$r3$.ɵEe(1, 'img');
}
if (rf & 2) {
$r3$.ɵp(0, 'innerHTML', $r3$.ɵb(ctx.innerHTML), $r3$.ɵsanitizeHtml);

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

@ -10,7 +10,7 @@ import {NgForOfContext} from '@angular/common';
import {RenderFlags, directiveInject} from '../../src/render3';
import {defineComponent} from '../../src/render3/definition';
import {bind, container, elementAttribute, elementClass, elementEnd, elementProperty, elementStart, elementStyle, elementStyleNamed, interpolation1, renderTemplate, text, textBinding} from '../../src/render3/instructions';
import {bind, container, element, elementAttribute, elementClass, elementEnd, elementProperty, elementStart, elementStyle, elementStyleNamed, interpolation1, renderTemplate, text, textBinding} from '../../src/render3/instructions';
import {LElementNode, LNode} from '../../src/render3/interfaces/node';
import {RElement, domRendererFactory3} from '../../src/render3/interfaces/renderer';
import {TrustedString, bypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript, bypassSanitizationTrustStyle, bypassSanitizationTrustUrl, sanitizeHtml, sanitizeResourceUrl, sanitizeScript, sanitizeStyle, sanitizeUrl} from '../../src/sanitization/sanitization';
@ -72,6 +72,23 @@ describe('instructions', () => {
});
});
describe('element', () => {
it('should create an element', () => {
const t = new TemplateFixture(() => { element(0, 'div', ['id', 'test', 'title', 'Hello']); });
const div = (t.hostNode.native as HTMLElement).querySelector('div') !;
expect(div.id).toEqual('test');
expect(div.title).toEqual('Hello');
expect(ngDevMode).toHaveProperties({
firstTemplatePass: 1,
tNode: 2, // 1 for div, 1 for host element
tView: 1,
rendererCreateElement: 1,
});
});
});
describe('elementAttribute', () => {
it('should use sanitizer function', () => {
const t = new TemplateFixture(createDiv);