feat(ivy): add property instruction (#29513)

- Adds `property` instruction
- Does _NOT_ add compiler changes to accommodate `property` instruction, that will be a follow up PR.
- Updates `select` instruction to set the selected index in state.
- Adds dev mode assertions around the selected index state.

Related #29527

PR Close #29513
This commit is contained in:
Ben Lesh 2019-03-26 14:57:36 -07:00 committed by Jason Aden
parent 7b27009e20
commit 33963ca0d3
3 changed files with 192 additions and 7 deletions

View File

@ -13,7 +13,7 @@ import {Type} from '../../interface/type';
import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SchemaMetadata} from '../../metadata/schema';
import {validateAgainstEventAttributes, validateAgainstEventProperties} from '../../sanitization/sanitization';
import {Sanitizer} from '../../sanitization/security';
import {assertDataInRange, assertDefined, assertDomNode, assertEqual, assertLessThan, assertNotEqual} from '../../util/assert';
import {assertDataInRange, assertDefined, assertDomNode, assertEqual, assertGreaterThan, assertLessThan, assertNotEqual} from '../../util/assert';
import {isObservable} from '../../util/lang';
import {normalizeDebugBindingName, normalizeDebugBindingValue} from '../../util/ng_reflect';
import {assertHasParent, assertLContainerOrUndefined, assertLView, assertPreviousIsParent} from '../assert';
@ -37,7 +37,7 @@ import {assertNodeOfPossibleTypes, assertNodeType} from '../node_assert';
import {appendChild, appendProjectedNodes, createTextNode, insertView, removeView} from '../node_manipulation';
import {isNodeMatchingSelectorList, matchingProjectionSelectorIndex} from '../node_selector_matcher';
import {applyOnCreateInstructions} from '../node_util';
import {decreaseElementDepthCount, enterView, getActiveHostContext, getBindingsEnabled, getCheckNoChangesMode, getContextLView, getCurrentDirectiveDef, getElementDepthCount, getIsParent, getLView, getPreviousOrParentTNode, increaseElementDepthCount, isCreationMode, leaveView, nextContextImpl, resetComponentState, setActiveHost, setBindingRoot, setCheckNoChangesMode, setCurrentDirectiveDef, setCurrentQueryIndex, setIsParent, setPreviousOrParentTNode} from '../state';
import {decreaseElementDepthCount, enterView, getActiveHostContext, getBindingsEnabled, getCheckNoChangesMode, getContextLView, getCurrentDirectiveDef, getElementDepthCount, getIsParent, getLView, getPreviousOrParentTNode, getSelectedIndex, increaseElementDepthCount, isCreationMode, leaveView, nextContextImpl, resetComponentState, setActiveHost, setBindingRoot, setCheckNoChangesMode, setCurrentDirectiveDef, setCurrentQueryIndex, setIsParent, setPreviousOrParentTNode, setSelectedIndex} from '../state';
import {getInitialClassNameValue, getInitialStyleStringValue, initializeStaticContext as initializeStaticStylingContext, patchContextWithStaticAttrs, renderInitialClasses, renderInitialStyles} from '../styling/class_and_style_bindings';
import {ANIMATION_PROP_PREFIX, getStylingContext, hasClassInput, hasStyleInput, isAnimationProp} from '../styling/util';
import {NO_CHANGE} from '../tokens';
@ -408,6 +408,10 @@ export function renderEmbeddedTemplate<T>(viewToRender: LView, tView: TView, con
oldView = enterView(viewToRender, viewToRender[T_HOST]);
resetPreOrderHookFlags(viewToRender);
namespaceHTML();
// Reset the selected index so we can assert that `select` was called later
ngDevMode && setSelectedIndex(-1);
tView.template !(getRenderFlags(viewToRender), context);
// This must be set to false immediately after the first creation run because in an
// ngFor loop, all the views will be created together before update mode runs and turns
@ -453,6 +457,10 @@ function renderComponentOrTemplate<T>(
// creation mode pass
if (templateFn) {
namespaceHTML();
// Reset the selected index so we can assert that `select` was called later
ngDevMode && setSelectedIndex(-1);
templateFn(RenderFlags.Create, context);
}
@ -1093,11 +1101,30 @@ export function elementEnd(): void {
/**
* Flushes all the lifecycle hooks for directives up until (and excluding) that node index
* Selects an index of an item to act on and flushes lifecycle hooks up to this point
*
* @param index The index of the element in the `LView`
*/
* Used in conjunction with instructions like {@link property} to act on elements with specified
* indices, for example those created with {@link element} or {@link elementStart}.
*
* ```ts
* (rf: RenderFlags, ctx: any) => {
* if (rf & 1) {
* element(0, 'div');
* }
* if (rf & 2) {
* select(0); // Select the <div/> created above.
* property('title', 'test');
* }
* }
* ```
* @param index the index of the item to act on with the following instructions
*/
export function select(index: number): void {
ngDevMode && assertGreaterThan(index, -1, 'Invalid index');
ngDevMode &&
assertLessThan(
index, getLView().length - HEADER_OFFSET, 'Should be within range for the view data');
setSelectedIndex(index);
const lView = getLView();
executePreOrderHooks(lView, lView[TVIEW], getCheckNoChangesMode(), index);
}
@ -1141,7 +1168,42 @@ export function elementAttribute(
}
}
// TODO: Remove this when the issue is resolved.
/**
* Tsickle freaked out over a function returning itself
* https://github.com/angular/tsickle/issues/1009)
*/
export type TsickleIssue1009 = any;
/**
* Update a property on a selected element.
*
* Operates on the element selected by index via the {@link select} instruction.
*
* If the property name also exists as an input property on one of the element's directives,
* the component property will be set instead of the element property. This check must
* be conducted at runtime so child components that add new `@Inputs` don't have to be re-compiled
*
* @param propName Name of property. Because it is going to DOM, this is not subject to
* renaming as part of minification.
* @param value New value to write.
* @param sanitizer An optional function used to sanitize the value.
* @param nativeOnly Whether or not we should only set native properties and skip input check
* (this is necessary for host property bindings)
* @returns This function returns itself so that it may be chained
* (e.g. `property('name', ctx.name)('title', ctx.title)`)
*/
export function property<T>(
propName: string, value: T, sanitizer?: SanitizerFn | null,
nativeOnly?: boolean): TsickleIssue1009 {
const index = getSelectedIndex();
const bindReconciledValue = bind(value);
elementPropertyInternal(index, propName, bindReconciledValue, sanitizer, nativeOnly);
return property;
}
/**
* **TODO: Remove this function after `property` is in use**
* Update a property on an element.
*
* If the property name also exists as an input property on one of the element's directives,
@ -2648,7 +2710,12 @@ export function checkView<T>(hostView: LView, component: T) {
resetPreOrderHookFlags(hostView);
namespaceHTML();
creationMode && executeViewQueryFn(RenderFlags.Create, hostTView, component);
// Reset the selected index so we can assert that `select` was called later
ngDevMode && setSelectedIndex(-1);
templateFn(getRenderFlags(hostView), component);
refreshDescendantViews(hostView);
// Only check view queries again in creation mode if there are static view queries
if (!creationMode || hostTView.staticViewQueries) {

View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {assertDefined} from '../util/assert';
import {assertDefined, assertGreaterThan} from '../util/assert';
import {assertLViewOrUndefined} from './assert';
import {executeHooks} from './hooks';
@ -340,3 +340,28 @@ export function leaveView(newView: LView): void {
}
enterView(newView, null);
}
let _selectedIndex = -1;
/**
* Gets the most recent index passed to {@link select}
*
* Used with {@link property} instruction (and more in the future) to identify the index in the
* current `LView` to act on.
*/
export function getSelectedIndex() {
ngDevMode &&
assertGreaterThan(
_selectedIndex, -1, 'select() should be called prior to retrieving the selected index');
return _selectedIndex;
}
/**
* Sets the most recent index passed to {@link select}
*
* Used with {@link property} instruction (and more in the future) to identify the index in the
* current `LView` to act on.
*/
export function setSelectedIndex(index: number) {
_selectedIndex = index;
}

View File

@ -10,7 +10,7 @@ import {NgForOfContext} from '@angular/common';
import {RenderFlags} from '../../src/render3';
import {defineComponent} from '../../src/render3/definition';
import {bind, element, elementAttribute, elementEnd, elementProperty, elementStart, elementStyleProp, elementStyling, elementStylingApply, elementStylingMap, interpolation1, renderTemplate, template, text, textBinding} from '../../src/render3/instructions/all';
import {bind, element, elementAttribute, elementEnd, elementProperty, elementStart, elementStyleProp, elementStyling, elementStylingApply, elementStylingMap, interpolation1, renderTemplate, template, text, textBinding, select, property} from '../../src/render3/instructions/all';
import {AttributeMarker} from '../../src/render3/interfaces/node';
import {bypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript, bypassSanitizationTrustStyle, bypassSanitizationTrustUrl} from '../../src/sanitization/bypass';
import {defaultStyleSanitizer, sanitizeHtml, sanitizeResourceUrl, sanitizeScript, sanitizeStyle, sanitizeUrl} from '../../src/sanitization/sanitization';
@ -19,6 +19,7 @@ import {StyleSanitizeFn} from '../../src/sanitization/style_sanitizer';
import {NgForOf} from './common_with_def';
import {ComponentFixture, TemplateFixture} from './render_util';
import {setSelectedIndex, getSelectedIndex} from '@angular/core/src/render3/state';
describe('instructions', () => {
function createAnchor() {
@ -162,6 +163,98 @@ describe('instructions', () => {
});
});
describe('select', () => {
it('should error in DevMode if index is out of range', () => {
// Only one constant added, meaning only index `0` is valid.
const t = new TemplateFixture(createDiv, () => {}, 1, 0);
expect(() => { t.update(() => { select(-1); }); }).toThrow();
expect(() => { t.update(() => { select(1); }); }).toThrow();
expect(() => { t.update(() => { select(0); }); }).not.toThrow();
});
});
describe('property', () => {
// TODO(benlesh): Replace with TestBed tests once the instruction is being generated.
it('should set properties of the selected element', () => {
// <div [title]="title"></div>
const t = new TemplateFixture(createDiv, () => {}, 1, 1);
t.update(() => {
select(0);
property('title', 'one');
});
expect(t.html).toEqual('<div title="one"></div>');
t.update(() => {
select(0);
property('title', 'two');
});
expect(t.html).toEqual('<div title="two"></div>');
expect(ngDevMode).toHaveProperties({
firstTemplatePass: 1,
tNode: 2, // 1 for div, 1 for host element
tView: 2, // 1 for rootView + 1 for the template view
rendererCreateElement: 1,
rendererSetProperty: 2,
});
});
// TODO(benlesh): Replace with TestBed tests once the instruction is being generated.
it('should chain', () => {
// <div [title]="title" [accesskey]="key"></div>
const t = new TemplateFixture(createDiv, () => {}, 1, 2);
t.update(() => {
select(0);
property('title', 'one')('accessKey', 'A');
});
expect(t.html).toEqual('<div accesskey="A" title="one"></div>');
t.update(() => {
select(0);
property('title', 'two')('accessKey', 'B');
});
expect(t.html).toEqual('<div accesskey="B" title="two"></div>');
expect(ngDevMode).toHaveProperties({
firstTemplatePass: 1,
tNode: 2, // 1 for div, 1 for host element
tView: 2, // 1 for rootView + 1 for the template view
rendererCreateElement: 1,
rendererSetProperty: 4,
});
});
// TODO(benlesh): Replace with TestBed tests once the instruction is being generated.
it('should diff value changes', () => {
// <div [title]="title" [accesskey]="key"></div>
const t = new TemplateFixture(createDiv, () => {}, 1, 2);
t.update(() => {
select(0);
property('title', 'one')('accessKey', 'A');
});
expect(t.html).toEqual('<div accesskey="A" title="one"></div>');
t.update(() => {
select(0);
property('title', 'two')('accessKey', 'A'); // Notice: only changing the title.
});
expect(t.html).toEqual('<div accesskey="A" title="two"></div>');
expect(ngDevMode).toHaveProperties({
firstTemplatePass: 1,
tNode: 2, // 1 for div, 1 for host element
tView: 2, // 1 for rootView + 1 for the template view
rendererCreateElement: 1,
rendererSetProperty: 3,
});
});
it('should error in dev mode if select was not called prior', () => {
const t = new TemplateFixture(createDiv, () => {}, 1, 1);
expect(() => { t.update(() => { property('title', 'test'); }); }).toThrow();
expect(() => {
t.update(() => {
select(0);
property('title', 'test');
});
}).not.toThrow();
});
});
describe('elementProperty', () => {
it('should use sanitizer function when available', () => {
const t = new TemplateFixture(createDiv, () => {}, 1);