feat(ivy): implement pipes (#22254)

PR Close #22254
This commit is contained in:
Marc Laval
2018-02-16 16:23:27 +01:00
committed by Kara Erickson
parent 5d4fa7f0c8
commit f64ee15487
9 changed files with 699 additions and 71 deletions

View File

@ -181,7 +181,10 @@ export const defineDirective = defineComponent as<T>(directiveDefinition: Direct
* @param pure Whether the pipe is pure.
*/
export function definePipe<T>(
{type, factory, pure}: {type: Type<T>, factory: () => PipeTransform, pure?: boolean}):
PipeDef<T> {
throw new Error('TODO: implement!');
{type, factory, pure}: {type: Type<T>, factory: () => T, pure?: boolean}): PipeDef<T> {
return <PipeDef<T>>{
n: factory,
pure: pure !== false,
onDestroy: type.prototype.ngOnDestroy || null
};
}

View File

@ -20,7 +20,7 @@ import {assertNodeType} from './node_assert';
import {appendChild, insertChild, insertView, appendProjectedNode, removeView, canInsertNativeNode} from './node_manipulation';
import {matchingSelectorIndex} from './node_selector_matcher';
import {ComponentDef, ComponentTemplate, ComponentType, DirectiveDef, DirectiveType} from './interfaces/definition';
import {RElement, RText, Renderer3, RendererFactory3, ProceduralRenderer3, RendererStyleFlags3, isProceduralRenderer} from './interfaces/renderer';
import {RElement, RText, Renderer3, RendererFactory3, ProceduralRenderer3, ObjectOrientedRenderer3, RendererStyleFlags3, isProceduralRenderer} from './interfaces/renderer';
import {isDifferent, stringify} from './util';
import {executeHooks, executeContentHooks, queueLifecycleHooks, queueInitHooks, executeInitHooks} from './hooks';
import {ViewRef} from './view_ref';
@ -122,7 +122,7 @@ export function getCreationMode(): boolean {
}
/**
* An array of nodes (text, element, container, etc), their bindings, and
* An array of nodes (text, element, container, etc), pipes, their bindings, and
* any local variables that need to be stored between invocations.
*/
let data: any[];
@ -1806,6 +1806,10 @@ export function bindingUpdated4(exp1: any, exp2: any, exp3: any, exp4: any): boo
return bindingUpdated2(exp3, exp4) || different;
}
export function getTView(): TView {
return currentView.tView;
}
export function getDirectiveInstance<T>(instanceOrArray: T | [T]): T {
// Directives with content queries store an array in data[directiveIndex]
// with the instance as the first index

View File

@ -140,7 +140,7 @@ export interface PipeDef<T> {
* NOTE: this property is short (1 char) because it is used in
* component templates which is sensitive to size.
*/
n: () => PipeTransform;
n: () => T;
/**
* Whether or not the pipe is pure.

View File

@ -7,7 +7,7 @@
*/
import {LContainer} from './container';
import {ComponentTemplate, DirectiveDef} from './definition';
import {ComponentTemplate, DirectiveDef, PipeDef} from './definition';
import {LElementNode, LViewNode, TNode} from './node';
import {LQueries} from './query';
import {Renderer3} from './renderer';
@ -324,11 +324,11 @@ export const enum LifecycleStage {
* Static data that corresponds to the instance-specific data array on an LView.
*
* Each node's static data is stored in tData at the same index that it's stored
* in the data array. Each directive's definition is stored here at the same index
* as its directive instance in the data array. Any nodes that do not have static
* in the data array. Each directive/pipe's definition is stored here at the same index
* as its directive/pipe instance in the data array. Any nodes that do not have static
* data store a null value in tData to avoid a sparse array.
*/
export type TData = (TNode | DirectiveDef<any>| null)[];
export type TData = (TNode | DirectiveDef<any>| PipeDef<any>| null)[];
// Note: This hack is necessary so we don't erroneously get a circular dependency
// failure based on types.

View File

@ -6,17 +6,32 @@
* found in the LICENSE file at https://angular.io/license
*/
import {PipeTransform} from '../change_detection/pipe_transform';
import {getTView, load, store} from './instructions';
import {PipeDef} from './interfaces/definition';
import {pureFunction1, pureFunction2, pureFunction3, pureFunction4, pureFunctionV} from './pure_function';
/**
* Create a pipe.
*
* @param index Pipe index where the pipe will be stored.
* @param pipeDef Pipe definition object for registering life cycle hooks.
* @param pipe A Pipe instance.
* @param firstInstance (optional) The first instance of the pipe that can be reused for pure pipes.
* @returns T the instance of the pipe.
*/
export function pipe<T>(index: number, pipeDef: PipeDef<T>, pipe: T): void {
throw new Error('TODO: implement!');
export function pipe<T>(index: number, pipeDef: PipeDef<T>, firstInstance?: T): T {
const tView = getTView();
if (tView.firstTemplatePass) {
tView.data[index] = pipeDef;
if (pipeDef.onDestroy != null) {
(tView.destroyHooks || (tView.destroyHooks = [])).push(index, pipeDef.onDestroy);
}
}
const pipeInstance = pipeDef.pure && firstInstance ? firstInstance : pipeDef.n();
store(index, pipeInstance);
return pipeInstance;
}
/**
@ -29,7 +44,9 @@ export function pipe<T>(index: number, pipeDef: PipeDef<T>, pipe: T): void {
* @param v1 1st argument to {@link PipeTransform#transform}.
*/
export function pipeBind1(index: number, v1: any): any {
throw new Error('TODO: implement!');
const pipeInstance = load<PipeTransform>(index);
return isPure(index) ? pureFunction1(pipeInstance.transform, v1, pipeInstance) :
pipeInstance.transform(v1);
}
/**
@ -43,7 +60,9 @@ export function pipeBind1(index: number, v1: any): any {
* @param v2 2nd argument to {@link PipeTransform#transform}.
*/
export function pipeBind2(index: number, v1: any, v2: any): any {
throw new Error('TODO: implement!');
const pipeInstance = load<PipeTransform>(index);
return isPure(index) ? pureFunction2(pipeInstance.transform, v1, v2, pipeInstance) :
pipeInstance.transform(v1, v2);
}
/**
@ -58,7 +77,9 @@ export function pipeBind2(index: number, v1: any, v2: any): any {
* @param v3 4rd argument to {@link PipeTransform#transform}.
*/
export function pipeBind3(index: number, v1: any, v2: any, v3: any): any {
throw new Error('TODO: implement!');
const pipeInstance = load<PipeTransform>(index);
return isPure(index) ? pureFunction3(pipeInstance.transform.bind(pipeInstance), v1, v2, v3) :
pipeInstance.transform(v1, v2, v3);
}
/**
@ -74,7 +95,9 @@ export function pipeBind3(index: number, v1: any, v2: any, v3: any): any {
* @param v4 4th argument to {@link PipeTransform#transform}.
*/
export function pipeBind4(index: number, v1: any, v2: any, v3: any, v4: any): any {
throw new Error('TODO: implement!');
const pipeInstance = load<PipeTransform>(index);
return isPure(index) ? pureFunction4(pipeInstance.transform, v1, v2, v3, v4, pipeInstance) :
pipeInstance.transform(v1, v2, v3, v4);
}
/**
@ -87,5 +110,11 @@ export function pipeBind4(index: number, v1: any, v2: any, v3: any, v4: any): an
* @param values Array of arguments to pass to {@link PipeTransform#transform} method.
*/
export function pipeBindV(index: number, values: any[]): any {
throw new Error('TODO: implement!');
}
const pipeInstance = load<PipeTransform>(index);
return isPure(index) ? pureFunctionV(pipeInstance.transform, values, pipeInstance) :
pipeInstance.transform.apply(pipeInstance, values);
}
function isPure(index: number): boolean {
return (<PipeDef<any>>getTView().data[index]).pure;
}

View File

@ -17,8 +17,9 @@ import {bindingUpdated, bindingUpdated2, bindingUpdated4, checkAndUpdateBinding,
* @param pureFn Function that returns a value
* @returns value
*/
export function pureFunction0<T>(pureFn: () => T): T {
return getCreationMode() ? checkAndUpdateBinding(pureFn()) : consumeBinding();
export function pureFunction0<T>(pureFn: () => T, thisArg?: any): T {
return getCreationMode() ? checkAndUpdateBinding(thisArg ? pureFn.call(thisArg) : pureFn()) :
consumeBinding();
}
/**
@ -29,8 +30,10 @@ export function pureFunction0<T>(pureFn: () => T): T {
* @param exp Updated expression value
* @returns Updated value
*/
export function pureFunction1(pureFn: (v: any) => any, exp: any): any {
return bindingUpdated(exp) ? checkAndUpdateBinding(pureFn(exp)) : consumeBinding();
export function pureFunction1(pureFn: (v: any) => any, exp: any, thisArg?: any): any {
return bindingUpdated(exp) ?
checkAndUpdateBinding(thisArg ? pureFn.call(thisArg, exp) : pureFn(exp)) :
consumeBinding();
}
/**
@ -42,8 +45,11 @@ export function pureFunction1(pureFn: (v: any) => any, exp: any): any {
* @param exp2
* @returns Updated value
*/
export function pureFunction2(pureFn: (v1: any, v2: any) => any, exp1: any, exp2: any): any {
return bindingUpdated2(exp1, exp2) ? checkAndUpdateBinding(pureFn(exp1, exp2)) : consumeBinding();
export function pureFunction2(
pureFn: (v1: any, v2: any) => any, exp1: any, exp2: any, thisArg?: any): any {
return bindingUpdated2(exp1, exp2) ?
checkAndUpdateBinding(thisArg ? pureFn.call(thisArg, exp1, exp2) : pureFn(exp1, exp2)) :
consumeBinding();
}
/**
@ -57,10 +63,13 @@ export function pureFunction2(pureFn: (v1: any, v2: any) => any, exp1: any, exp2
* @returns Updated value
*/
export function pureFunction3(
pureFn: (v1: any, v2: any, v3: any) => any, exp1: any, exp2: any, exp3: any): any {
pureFn: (v1: any, v2: any, v3: any) => any, exp1: any, exp2: any, exp3: any,
thisArg?: any): any {
const different = bindingUpdated2(exp1, exp2);
return bindingUpdated(exp3) || different ? checkAndUpdateBinding(pureFn(exp1, exp2, exp3)) :
consumeBinding();
return bindingUpdated(exp3) || different ?
checkAndUpdateBinding(
thisArg ? pureFn.call(thisArg, exp1, exp2, exp3) : pureFn(exp1, exp2, exp3)) :
consumeBinding();
}
/**
@ -75,10 +84,11 @@ export function pureFunction3(
* @returns Updated value
*/
export function pureFunction4(
pureFn: (v1: any, v2: any, v3: any, v4: any) => any, exp1: any, exp2: any, exp3: any,
exp4: any): any {
pureFn: (v1: any, v2: any, v3: any, v4: any) => any, exp1: any, exp2: any, exp3: any, exp4: any,
thisArg?: any): any {
return bindingUpdated4(exp1, exp2, exp3, exp4) ?
checkAndUpdateBinding(pureFn(exp1, exp2, exp3, exp4)) :
checkAndUpdateBinding(
thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4) : pureFn(exp1, exp2, exp3, exp4)) :
consumeBinding();
}
@ -96,10 +106,12 @@ export function pureFunction4(
*/
export function pureFunction5(
pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any) => any, exp1: any, exp2: any, exp3: any,
exp4: any, exp5: any): any {
exp4: any, exp5: any, thisArg?: any): any {
const different = bindingUpdated4(exp1, exp2, exp3, exp4);
return bindingUpdated(exp5) || different ?
checkAndUpdateBinding(pureFn(exp1, exp2, exp3, exp4, exp5)) :
checkAndUpdateBinding(
thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5) :
pureFn(exp1, exp2, exp3, exp4, exp5)) :
consumeBinding();
}
@ -118,10 +130,12 @@ export function pureFunction5(
*/
export function pureFunction6(
pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any) => any, exp1: any, exp2: any,
exp3: any, exp4: any, exp5: any, exp6: any): any {
exp3: any, exp4: any, exp5: any, exp6: any, thisArg?: any): any {
const different = bindingUpdated4(exp1, exp2, exp3, exp4);
return bindingUpdated2(exp5, exp6) || different ?
checkAndUpdateBinding(pureFn(exp1, exp2, exp3, exp4, exp5, exp6)) :
checkAndUpdateBinding(
thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5, exp6) :
pureFn(exp1, exp2, exp3, exp4, exp5, exp6)) :
consumeBinding();
}
@ -141,11 +155,13 @@ export function pureFunction6(
*/
export function pureFunction7(
pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any) => any, exp1: any,
exp2: any, exp3: any, exp4: any, exp5: any, exp6: any, exp7: any): any {
exp2: any, exp3: any, exp4: any, exp5: any, exp6: any, exp7: any, thisArg?: any): any {
let different = bindingUpdated4(exp1, exp2, exp3, exp4);
different = bindingUpdated2(exp5, exp6) || different;
return bindingUpdated(exp7) || different ?
checkAndUpdateBinding(pureFn(exp1, exp2, exp3, exp4, exp5, exp6, exp7)) :
checkAndUpdateBinding(
thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5, exp6, exp7) :
pureFn(exp1, exp2, exp3, exp4, exp5, exp6, exp7)) :
consumeBinding();
}
@ -166,10 +182,13 @@ export function pureFunction7(
*/
export function pureFunction8(
pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any, v8: any) => any,
exp1: any, exp2: any, exp3: any, exp4: any, exp5: any, exp6: any, exp7: any, exp8: any): any {
exp1: any, exp2: any, exp3: any, exp4: any, exp5: any, exp6: any, exp7: any, exp8: any,
thisArg?: any): any {
const different = bindingUpdated4(exp1, exp2, exp3, exp4);
return bindingUpdated4(exp5, exp6, exp7, exp8) || different ?
checkAndUpdateBinding(pureFn(exp1, exp2, exp3, exp4, exp5, exp6, exp7, exp8)) :
checkAndUpdateBinding(
thisArg ? pureFn.call(thisArg, exp1, exp2, exp3, exp4, exp5, exp6, exp7, exp8) :
pureFn(exp1, exp2, exp3, exp4, exp5, exp6, exp7, exp8)) :
consumeBinding();
}
@ -184,11 +203,11 @@ export function pureFunction8(
* @param exp An array of binding values
* @returns Updated value
*/
export function pureFunctionV(pureFn: (...v: any[]) => any, exps: any[]): any {
export function pureFunctionV(pureFn: (...v: any[]) => any, exps: any[], thisArg?: any): any {
let different = false;
for (let i = 0; i < exps.length; i++) {
bindingUpdated(exps[i]) && (different = true);
}
return different ? checkAndUpdateBinding(pureFn.apply(null, exps)) : consumeBinding();
return different ? checkAndUpdateBinding(pureFn.apply(thisArg, exps)) : consumeBinding();
}