From 632b19d5c2b8907a04f4b0c6acce7e704b810f7e Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Wed, 26 Sep 2018 21:09:03 -0700 Subject: [PATCH] fixup! feat(ivy): adding support for ngNonBindable attribute --- .../r3_view_compiler_binding_spec.ts | 12 ++-- .../compiler/src/render3/r3_identifiers.ts | 5 +- .../compiler/src/render3/view/template.ts | 5 +- .../core/src/core_render3_private_export.ts | 4 +- packages/core/src/render3/index.ts | 4 +- packages/core/src/render3/instructions.ts | 56 +++++++++++++++++-- packages/core/src/render3/jit/environment.ts | 4 +- .../core/test/render3/integration_spec.ts | 14 ++--- 8 files changed, 73 insertions(+), 31 deletions(-) diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts index c1368a8ae7..a1e9fa80be 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts @@ -156,11 +156,11 @@ describe('compiler compliance: bindings', () => { template:function MyComponent_Template(rf, $ctx$){ if (rf & 1) { $i0$.ɵelementStart(0, "b", $_c0$, $_c1$); - $i0$.ɵsetBindingsDisabled(); + $i0$.ɵdisableBindings(); $i0$.ɵelementStart(2, "i"); $i0$.ɵtext(3, "Hello {{ name }}!"); $i0$.ɵelementEnd(); - $i0$.ɵsetBindingsEnabled(); + $i0$.ɵenableBindings(); $i0$.ɵelementEnd(); $i0$.ɵtext(4); } @@ -187,10 +187,10 @@ describe('compiler compliance: bindings', () => { template:function MyComponent_Template(rf, $ctx$){ if (rf & 1) { $i0$.ɵelementStart(0, "div"); - $i0$.ɵsetBindingsDisabled(); + $i0$.ɵdisableBindings(); $i0$.ɵelement(1, "input", $_c0$); $i0$.ɵtext(2, " {{ myInput.value }} "); - $i0$.ɵsetBindingsEnabled(); + $i0$.ɵenableBindings(); $i0$.ɵelementEnd(); } `; @@ -211,9 +211,9 @@ describe('compiler compliance: bindings', () => { template:function MyComponent_Template(rf, $ctx$){ if (rf & 1) { $i0$.ɵelementStart(0, "div"); - $i0$.ɵsetBindingsDisabled(); + $i0$.ɵdisableBindings(); $i0$.ɵelement(1, "div", $_c0$); - $i0$.ɵsetBindingsEnabled(); + $i0$.ɵenableBindings(); $i0$.ɵelementEnd(); } `; diff --git a/packages/compiler/src/render3/r3_identifiers.ts b/packages/compiler/src/render3/r3_identifiers.ts index ae76754a84..b3c892ada3 100644 --- a/packages/compiler/src/render3/r3_identifiers.ts +++ b/packages/compiler/src/render3/r3_identifiers.ts @@ -60,10 +60,9 @@ export class Identifiers { static bind: o.ExternalReference = {name: 'ɵbind', moduleName: CORE}; - static setBindingsEnabled: o.ExternalReference = {name: 'ɵsetBindingsEnabled', moduleName: CORE}; + static enableBindings: o.ExternalReference = {name: 'ɵenableBindings', moduleName: CORE}; - static setBindingsDisabled: - o.ExternalReference = {name: 'ɵsetBindingsDisabled', moduleName: CORE}; + static disableBindings: o.ExternalReference = {name: 'ɵdisableBindings', moduleName: CORE}; static getCurrentView: o.ExternalReference = {name: 'ɵgetCurrentView', moduleName: CORE}; diff --git a/packages/compiler/src/render3/view/template.ts b/packages/compiler/src/render3/view/template.ts index 785c065f0a..999b7fee7f 100644 --- a/packages/compiler/src/render3/view/template.ts +++ b/packages/compiler/src/render3/view/template.ts @@ -492,7 +492,7 @@ export class TemplateDefinitionBuilder implements t.Visitor, LocalResolver trimTrailingNulls(parameters)); if (isNonBindableMode) { - this.creationInstruction(element.sourceSpan, R3.setBindingsDisabled); + this.creationInstruction(element.sourceSpan, R3.disableBindings); } // initial styling for static style="..." attributes @@ -661,8 +661,7 @@ export class TemplateDefinitionBuilder implements t.Visitor, LocalResolver if (!createSelfClosingInstruction) { // Finish element construction mode. if (isNonBindableMode) { - this.creationInstruction( - element.endSourceSpan || element.sourceSpan, R3.setBindingsEnabled); + this.creationInstruction(element.endSourceSpan || element.sourceSpan, R3.enableBindings); } this.creationInstruction( element.endSourceSpan || element.sourceSpan, diff --git a/packages/core/src/core_render3_private_export.ts b/packages/core/src/core_render3_private_export.ts index 0fde206469..c5d29a2a6c 100644 --- a/packages/core/src/core_render3_private_export.ts +++ b/packages/core/src/core_render3_private_export.ts @@ -84,8 +84,8 @@ export { elementProperty as ɵelementProperty, projectionDef as ɵprojectionDef, reference as ɵreference, - setBindingsEnabled as ɵsetBindingsEnabled, - setBindingsDisabled as ɵsetBindingsDisabled, + enableBindings as ɵenableBindings, + disableBindings as ɵdisableBindings, elementAttribute as ɵelementAttribute, elementStyling as ɵelementStyling, elementStylingMap as ɵelementStylingMap, diff --git a/packages/core/src/render3/index.ts b/packages/core/src/render3/index.ts index 8530c2e8f1..13436cf28e 100644 --- a/packages/core/src/render3/index.ts +++ b/packages/core/src/render3/index.ts @@ -67,8 +67,8 @@ export { namespaceMathML, namespaceSVG, - setBindingsEnabled, - setBindingsDisabled, + enableBindings, + disableBindings, projection, projectionDef, diff --git a/packages/core/src/render3/instructions.ts b/packages/core/src/render3/instructions.ts index 3669f20381..9682a2dd5e 100644 --- a/packages/core/src/render3/instructions.ts +++ b/packages/core/src/render3/instructions.ts @@ -99,6 +99,24 @@ export function getCurrentSanitizer(): Sanitizer|null { */ let elementDepthCount !: number; +/** + * Stores wether directives should be matched to elements. + * + * When template contains `ngNonBindable` than we need to prevent the runtime form matching + * directives on children of that element. + * + * Example: + * ``` + * + * Should match component / directive. + * + *
+ * + * Should not match component / directive because we are in ngNonBindable. + * + *
+ * ``` + */ let bindingsEnabled !: boolean; /** @@ -1399,18 +1417,44 @@ export function elementProperty( } /** - * Enables bindings processing for further instructions - * (used while processing "ngNonBindable" element's attribute). + * Enables directive matching on elements. + * + * * Example: + * ``` + * + * Should match component / directive. + * + *
+ * + * + * Should not match component / directive because we are in ngNonBindable. + * + * + *
+ * ``` */ -export function setBindingsEnabled(): void { +export function enableBindings(): void { bindingsEnabled = true; } /** - * Disables bindings processing for further instructions - * (used while processing "ngNonBindable" element's attribute). + * Disables directive matching on element. + * + * * Example: + * ``` + * + * Should match component / directive. + * + *
+ * + * + * Should not match component / directive because we are in ngNonBindable. + * + * + *
+ * ``` */ -export function setBindingsDisabled(): void { +export function disableBindings(): void { bindingsEnabled = false; } diff --git a/packages/core/src/render3/jit/environment.ts b/packages/core/src/render3/jit/environment.ts index 0693075718..717bafdd4d 100644 --- a/packages/core/src/render3/jit/environment.ts +++ b/packages/core/src/render3/jit/environment.ts @@ -46,8 +46,8 @@ export const angularCoreEnv: {[name: string]: Function} = { 'ɵnamespaceHTML': r3.namespaceHTML, 'ɵnamespaceMathML': r3.namespaceMathML, 'ɵnamespaceSVG': r3.namespaceSVG, - 'ɵsetBindingsEnabled': r3.setBindingsEnabled, - 'ɵsetBindingsDisabled': r3.setBindingsDisabled, + 'ɵenableBindings': r3.enableBindings, + 'ɵdisableBindings': r3.disableBindings, 'ɵelementStart': r3.elementStart, 'ɵelementEnd': r3.elementEnd, 'ɵelement': r3.element, diff --git a/packages/core/test/render3/integration_spec.ts b/packages/core/test/render3/integration_spec.ts index 521c99b4a8..5a3b0a18c4 100644 --- a/packages/core/test/render3/integration_spec.ts +++ b/packages/core/test/render3/integration_spec.ts @@ -11,7 +11,7 @@ import {ElementRef, TemplateRef, ViewContainerRef} from '@angular/core'; import {RendererStyleFlags2, RendererType2} from '../../src/render/api'; import {AttributeMarker, defineComponent, defineDirective} from '../../src/render3/index'; -import {NO_CHANGE, bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementContainerEnd, elementContainerStart, elementEnd, elementProperty, elementStart, elementStyleProp, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, setBindingsEnabled, setBindingsDisabled, interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV, listener, load, loadDirective, projection, projectionDef, reference, text, textBinding, template} from '../../src/render3/instructions'; +import {NO_CHANGE, bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementContainerEnd, elementContainerStart, elementEnd, elementProperty, elementStart, elementStyleProp, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, enableBindings, disableBindings, interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV, listener, load, loadDirective, projection, projectionDef, reference, text, textBinding, template} from '../../src/render3/instructions'; import {InitialStylingFlags, RenderFlags} from '../../src/render3/interfaces/definition'; import {RElement, Renderer3, RendererFactory3, domRendererFactory3, RText, RComment, RNode, RendererStyleFlags3, ProceduralRenderer3} from '../../src/render3/interfaces/renderer'; import {HEADER_OFFSET, CONTEXT, DIRECTIVES} from '../../src/render3/interfaces/view'; @@ -143,11 +143,11 @@ describe('render3 integration test', () => { const App = createComponent('app', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { elementStart(0, 'b', ['id', 'my-id'], ['myRef', '']); - setBindingsDisabled(); + disableBindings(); elementStart(2, 'i'); text(3, 'Hello {{ name }}!'); elementEnd(); - setBindingsEnabled(); + enableBindings(); elementEnd(); text(4); } @@ -182,11 +182,11 @@ describe('render3 integration test', () => { const App = createComponent('app', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { elementStart(0, 'b', ['directive', '']); - setBindingsDisabled(); + disableBindings(); elementStart(1, 'i'); text(2, 'Hello {{ name }}!'); elementEnd(); - setBindingsEnabled(); + enableBindings(); elementEnd(); } }, 3, 0, [TestDirective]); @@ -217,11 +217,11 @@ describe('render3 integration test', () => { const App = createComponent('app', function(rf: RenderFlags, ctx: any) { if (rf & RenderFlags.Create) { elementStart(0, 'b'); - setBindingsDisabled(); + disableBindings(); elementStart(1, 'i', ['directive', '']); text(2, 'Hello {{ name }}!'); elementEnd(); - setBindingsEnabled(); + enableBindings(); elementEnd(); } }, 3, 0, [TestDirective]);