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

refactor(ivy): prefix all generated instructions (#29692)

Browse Source 
- Updates all instructions to be prefixed with the Greek delta symbol

PR Close #29692
This commit is contained in:
Ben Lesh
2019-04-04 11:41:52 -07:00
committed by Igor Minar
parent db62ccf9eb
commit 138ca5a246
149 changed files with 8266 additions and 7620 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/src/change_detection/differs/iterable_differs.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {defineInjectable} from '../../di/interface/defs';
import {ΔdefineInjectable} from '../../di/interface/defs';
import {StaticProvider} from '../../di/interface/provider';
import {Optional, SkipSelf} from '../../di/metadata';
import {DefaultIterableDifferFactory} from '../differs/default_iterable_differ';
@ -143,7 +143,7 @@ export interface IterableDifferFactory {
*/
export class IterableDiffers {
/** @nocollapse */
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: 'root',
factory: () => new IterableDiffers([new DefaultIterableDifferFactory()])
});

4
packages/core/src/change_detection/differs/keyvalue_differs.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Optional, SkipSelf, StaticProvider, defineInjectable} from '../../di';
import {Optional, SkipSelf, StaticProvider, ΔdefineInjectable} from '../../di';
import {DefaultKeyValueDifferFactory} from './default_keyvalue_differ';
@ -118,7 +118,7 @@ export interface KeyValueDifferFactory {
*/
export class KeyValueDiffers {
/** @nocollapse */
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: 'root',
factory: () => new KeyValueDiffers([new DefaultKeyValueDifferFactory()])
});

2
packages/core/src/codegen_private_exports.ts
View File

@ -8,4 +8,4 @@
export {CodegenComponentFactoryResolver as ɵCodegenComponentFactoryResolver} from './linker/component_factory_resolver';
export {registerModuleFactory as ɵregisterModuleFactory} from './linker/ng_module_factory_loader';
export {ArgumentType as ɵArgumentType, BindingFlags as ɵBindingFlags, DepFlags as ɵDepFlags, EMPTY_ARRAY as ɵEMPTY_ARRAY, EMPTY_MAP as ɵEMPTY_MAP, NodeFlags as ɵNodeFlags, QueryBindingType as ɵQueryBindingType, QueryValueType as ɵQueryValueType, ViewDefinition as ɵViewDefinition, ViewFlags as ɵViewFlags, anchorDef as ɵand, createComponentFactory as ɵccf, createNgModuleFactory as ɵcmf, createRendererType2 as ɵcrt, directiveDef as ɵdid, elementDef as ɵeld, elementEventFullName as ɵelementEventFullName, getComponentViewDefinitionFactory as ɵgetComponentViewDefinitionFactory, inlineInterpolate as ɵinlineInterpolate, interpolate as ɵinterpolate, moduleDef as ɵmod, moduleProvideDef as ɵmpd, ngContentDef as ɵncd, nodeValue as ɵnov, pipeDef as ɵpid, providerDef as ɵprd, pureArrayDef as ɵpad, pureObjectDef as ɵpod, purePipeDef as ɵppd, queryDef as ɵqud, textDef as ɵted, unwrapValue as ɵunv, viewDef as ɵvid} from './view/index';
export {ArgumentType as ɵArgumentType, BindingFlags as ɵBindingFlags, DepFlags as ɵDepFlags, EMPTY_ARRAY as ɵEMPTY_ARRAY, EMPTY_MAP as ɵEMPTY_MAP, NodeFlags as ɵNodeFlags, QueryBindingType as ɵQueryBindingType, QueryValueType as ɵQueryValueType, ViewDefinition as ɵViewDefinition, ViewFlags as ɵViewFlags, anchorDef as ɵand, createComponentFactory as ɵccf, createNgModuleFactory as ɵcmf, createRendererType2 as ɵcrt, directiveDef as ɵdid, elementDef as ɵeld, getComponentViewDefinitionFactory as ɵgetComponentViewDefinitionFactory, inlineInterpolate as ɵinlineInterpolate, interpolate as ɵinterpolate, moduleDef as ɵmod, moduleProvideDef as ɵmpd, ngContentDef as ɵncd, nodeValue as ɵnov, pipeDef as ɵpid, providerDef as ɵprd, pureArrayDef as ɵpad, pureObjectDef as ɵpod, purePipeDef as ɵppd, queryDef as ɵqud, textDef as ɵted, unwrapValue as ɵunv, viewDef as ɵvid} from './view/index';

5
packages/core/src/core_private_export.ts
View File

@ -13,8 +13,8 @@ export {devModeEqual as ɵdevModeEqual} from './change_detection/change_detectio
export {isListLikeIterable as ɵisListLikeIterable} from './change_detection/change_detection_util';
export {ChangeDetectorStatus as ɵChangeDetectorStatus, isDefaultChangeDetectionStrategy as ɵisDefaultChangeDetectionStrategy} from './change_detection/constants';
export {Console as ɵConsole} from './console';
export {inject as ɵinject, setCurrentInjector as ɵsetCurrentInjector} from './di/injector_compatibility';
export {InjectableDef as ɵInjectableDef, InjectorDef as ɵInjectorDef, getInjectableDef as ɵgetInjectableDef} from './di/interface/defs';
export {inject, setCurrentInjector as ɵsetCurrentInjector, Δinject} from './di/injector_compatibility';
export {getInjectableDef as ɵgetInjectableDef, ΔInjectableDef as ΔInjectableDef, ΔInjectorDef} from './di/interface/defs';
export {APP_ROOT as ɵAPP_ROOT} from './di/scope';
export {ivyEnabled as ɵivyEnabled} from './ivy_switch';
export {ComponentFactory as ɵComponentFactory} from './linker/component_factory';
@ -27,6 +27,7 @@ export {_sanitizeHtml as ɵ_sanitizeHtml} from './sanitization/html_sanitizer';
export {_sanitizeStyle as ɵ_sanitizeStyle} from './sanitization/style_sanitizer';
export {_sanitizeUrl as ɵ_sanitizeUrl} from './sanitization/url_sanitizer';
export {global as ɵglobal} from './util/global';
export {looseIdentical as ɵlooseIdentical,} from './util/comparison';
export {stringify as ɵstringify} from './util/stringify';
export {makeDecorator as ɵmakeDecorator} from './util/decorators';

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

@ -8,11 +8,11 @@
// clang-format off
export {
defineBase as ɵdefineBase,
defineComponent as ɵdefineComponent,
defineDirective as ɵdefineDirective,
definePipe as ɵdefinePipe,
defineNgModule as ɵdefineNgModule,
ΔdefineBase,
ΔdefineComponent,
ΔdefineDirective,
ΔdefinePipe,
ΔdefineNgModule,
detectChanges as ɵdetectChanges,
renderComponent as ɵrenderComponent,
AttributeMarker as ɵAttributeMarker,
@ -21,16 +21,16 @@ export {
ComponentRef as ɵRender3ComponentRef,
DirectiveType as ɵDirectiveType,
RenderFlags as ɵRenderFlags,
directiveInject as ɵdirectiveInject,
injectAttribute as ɵinjectAttribute,
getFactoryOf as ɵgetFactoryOf,
getInheritedFactory as ɵgetInheritedFactory,
setComponentScope as ɵsetComponentScope,
setNgModuleScope as ɵsetNgModuleScope,
templateRefExtractor as ɵtemplateRefExtractor,
ProvidersFeature as ɵProvidersFeature,
InheritDefinitionFeature as ɵInheritDefinitionFeature,
NgOnChangesFeature as ɵNgOnChangesFeature,
ΔdirectiveInject,
ΔinjectAttribute,
ΔgetFactoryOf,
ΔgetInheritedFactory,
ΔsetComponentScope,
ΔsetNgModuleScope,
ΔtemplateRefExtractor,
ΔProvidersFeature,
ΔInheritDefinitionFeature,
ΔNgOnChangesFeature,
LifecycleHooksFeature as ɵLifecycleHooksFeature,
NgModuleType as ɵNgModuleType,
NgModuleRef as ɵRender3NgModuleRef,
@ -38,106 +38,106 @@ export {
markDirty as ɵmarkDirty,
NgModuleFactory as ɵNgModuleFactory,
NO_CHANGE as ɵNO_CHANGE,
container as ɵcontainer,
nextContext as ɵnextContext,
elementStart as ɵelementStart,
namespaceHTML as ɵnamespaceHTML,
namespaceMathML as ɵnamespaceMathML,
namespaceSVG as ɵnamespaceSVG,
element as ɵelement,
listener as ɵlistener,
text as ɵtext,
embeddedViewStart as ɵembeddedViewStart,
projection as ɵprojection,
bind as ɵbind,
interpolation1 as ɵinterpolation1,
interpolation2 as ɵinterpolation2,
interpolation3 as ɵinterpolation3,
interpolation4 as ɵinterpolation4,
interpolation5 as ɵinterpolation5,
interpolation6 as ɵinterpolation6,
interpolation7 as ɵinterpolation7,
interpolation8 as ɵinterpolation8,
interpolationV as ɵinterpolationV,
pipeBind1 as ɵpipeBind1,
pipeBind2 as ɵpipeBind2,
pipeBind3 as ɵpipeBind3,
pipeBind4 as ɵpipeBind4,
pipeBindV as ɵpipeBindV,
pureFunction0 as ɵpureFunction0,
pureFunction1 as ɵpureFunction1,
pureFunction2 as ɵpureFunction2,
pureFunction3 as ɵpureFunction3,
pureFunction4 as ɵpureFunction4,
pureFunction5 as ɵpureFunction5,
pureFunction6 as ɵpureFunction6,
pureFunction7 as ɵpureFunction7,
pureFunction8 as ɵpureFunction8,
pureFunctionV as ɵpureFunctionV,
getCurrentView as ɵgetCurrentView,
Δcontainer,
ΔnextContext,
ΔelementStart,
ΔnamespaceHTML,
ΔnamespaceMathML,
ΔnamespaceSVG,
Δelement,
Δlistener,
Δtext,
ΔembeddedViewStart,
Δprojection,
Δbind,
Δinterpolation1,
Δinterpolation2,
Δinterpolation3,
Δinterpolation4,
Δinterpolation5,
Δinterpolation6,
Δinterpolation7,
Δinterpolation8,
ΔinterpolationV,
ΔpipeBind1,
ΔpipeBind2,
ΔpipeBind3,
ΔpipeBind4,
ΔpipeBindV,
ΔpureFunction0,
ΔpureFunction1,
ΔpureFunction2,
ΔpureFunction3,
ΔpureFunction4,
ΔpureFunction5,
ΔpureFunction6,
ΔpureFunction7,
ΔpureFunction8,
ΔpureFunctionV,
ΔgetCurrentView,
getDirectives as ɵgetDirectives,
getHostElement as ɵgetHostElement,
restoreView as ɵrestoreView,
containerRefreshStart as ɵcontainerRefreshStart,
containerRefreshEnd as ɵcontainerRefreshEnd,
queryRefresh as ɵqueryRefresh,
viewQuery as ɵviewQuery,
staticViewQuery as ɵstaticViewQuery,
staticContentQuery as ɵstaticContentQuery,
loadViewQuery as ɵloadViewQuery,
contentQuery as ɵcontentQuery,
loadContentQuery as ɵloadContentQuery,
elementEnd as ɵelementEnd,
elementProperty as ɵelementProperty,
componentHostSyntheticProperty as ɵcomponentHostSyntheticProperty,
componentHostSyntheticListener as ɵcomponentHostSyntheticListener,
projectionDef as ɵprojectionDef,
reference as ɵreference,
enableBindings as ɵenableBindings,
disableBindings as ɵdisableBindings,
allocHostVars as ɵallocHostVars,
elementAttribute as ɵelementAttribute,
elementContainerStart as ɵelementContainerStart,
elementContainerEnd as ɵelementContainerEnd,
elementStyling as ɵelementStyling,
elementStylingMap as ɵelementStylingMap,
elementStyleProp as ɵelementStyleProp,
elementStylingApply as ɵelementStylingApply,
elementClassProp as ɵelementClassProp,
ΔrestoreView,
ΔcontainerRefreshStart,
ΔcontainerRefreshEnd,
ΔqueryRefresh,
ΔviewQuery,
ΔstaticViewQuery,
ΔstaticContentQuery,
ΔloadViewQuery,
ΔcontentQuery,
ΔloadContentQuery,
ΔelementEnd,
ΔelementProperty,
ΔcomponentHostSyntheticProperty,
ΔcomponentHostSyntheticListener,
ΔprojectionDef,
Δreference,
ΔenableBindings,
ΔdisableBindings,
ΔallocHostVars,
ΔelementAttribute,
ΔelementContainerStart,
ΔelementContainerEnd,
ΔelementStyling,
ΔelementStylingMap,
ΔelementStyleProp,
ΔelementStylingApply,
ΔelementClassProp,
elementHostAttrs as ɵelementHostAttrs,
elementHostStyling as ɵelementHostStyling,
elementHostStylingMap as ɵelementHostStylingMap,
elementHostStyleProp as ɵelementHostStyleProp,
elementHostClassProp as ɵelementHostClassProp,
elementHostStylingApply as ɵelementHostStylingApply,
ΔelementHostAttrs,
ΔelementHostStyling,
ΔelementHostStylingMap,
ΔelementHostStyleProp,
ΔelementHostClassProp,
ΔelementHostStylingApply,
select as ɵselect,
textBinding as ɵtextBinding,
template as ɵtemplate,
embeddedViewEnd as ɵembeddedViewEnd,
Δselect,
ΔtextBinding,
Δtemplate,
ΔembeddedViewEnd,
store as ɵstore,
load as ɵload,
pipe as ɵpipe,
BaseDef as ɵBaseDef,
Δload,
Δpipe,
ΔBaseDef,
ComponentDef as ɵComponentDef,
ComponentDefWithMeta as ɵComponentDefWithMeta,
ΔComponentDefWithMeta,
DirectiveDef as ɵDirectiveDef,
DirectiveDefWithMeta as ɵDirectiveDefWithMeta,
ΔDirectiveDefWithMeta,
PipeDef as ɵPipeDef,
PipeDefWithMeta as ɵPipeDefWithMeta,
ΔPipeDefWithMeta,
whenRendered as ɵwhenRendered,
i18n as ɵi18n,
i18nAttributes as ɵi18nAttributes,
i18nExp as ɵi18nExp,
i18nStart as ɵi18nStart,
i18nEnd as ɵi18nEnd,
i18nApply as ɵi18nApply,
i18nPostprocess as ɵi18nPostprocess,
Δi18n,
Δi18nAttributes,
Δi18nExp,
Δi18nStart,
Δi18nEnd,
Δi18nApply,
Δi18nPostprocess,
setClassMetadata as ɵsetClassMetadata,
resolveWindow as ɵresolveWindow,
resolveDocument as ɵresolveDocument,
resolveBody as ɵresolveBody,
ΔresolveWindow,
ΔresolveDocument,
ΔresolveBody,
} from './render3/index';
@ -159,18 +159,18 @@ export {
export {
NgModuleDef as ɵNgModuleDef,
NgModuleDefWithMeta as ɵNgModuleDefWithMeta,
ΔNgModuleDefWithMeta,
NgModuleTransitiveScopes as ɵNgModuleTransitiveScopes,
} from './metadata/ng_module';
export {
sanitizeHtml as ɵsanitizeHtml,
sanitizeStyle as ɵsanitizeStyle,
defaultStyleSanitizer as ɵdefaultStyleSanitizer,
sanitizeScript as ɵsanitizeScript,
sanitizeUrl as ɵsanitizeUrl,
sanitizeResourceUrl as ɵsanitizeResourceUrl,
sanitizeUrlOrResourceUrl as ɵsanitizeUrlOrResourceUrl,
ΔsanitizeHtml,
ΔsanitizeStyle,
ΔdefaultStyleSanitizer,
ΔsanitizeScript,
ΔsanitizeUrl,
ΔsanitizeResourceUrl,
ΔsanitizeUrlOrResourceUrl,
} from './sanitization/sanitization';
export {

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

@ -14,11 +14,11 @@
export * from './metadata';
export {InjectFlags} from './interface/injector';
export {defineInjectable, defineInjector, InjectableType, InjectorType} from './interface/defs';
export {ΔdefineInjectable, defineInjectable, ΔdefineInjector, InjectableType, InjectorType} from './interface/defs';
export {forwardRef, resolveForwardRef, ForwardRefFn} from './forward_ref';
export {Injectable, InjectableDecorator, InjectableProvider} from './injectable';
export {INJECTOR, Injector} from './injector';
export {inject} from './injector_compatibility';
export {Δinject, inject} from './injector_compatibility';
export {ReflectiveInjector} from './reflective_injector';
export {StaticProvider, ValueProvider, ConstructorSansProvider, ExistingProvider, FactoryProvider, Provider, TypeProvider, ClassProvider} from './interface/provider';
export {ResolvedReflectiveFactory, ResolvedReflectiveProvider} from './reflective_provider';

7
packages/core/src/di/injectable.ts
View File

@ -8,7 +8,8 @@
import {Type} from '../interface/type';
import {TypeDecorator, makeDecorator} from '../util/decorators';
import {InjectableDef, InjectableType, defineInjectable, getInjectableDef} from './interface/defs';
import {InjectableType, getInjectableDef, ΔInjectableDef, ΔdefineInjectable} from './interface/defs';
import {ClassSansProvider, ConstructorSansProvider, ExistingSansProvider, FactorySansProvider, StaticClassSansProvider, ValueSansProvider} from './interface/provider';
import {compileInjectable as render3CompileInjectable} from './jit/injectable';
import {convertInjectableProviderToFactory} from './util';
@ -79,7 +80,7 @@ export const Injectable: InjectableDecorator = makeDecorator(
*
* @publicApi
*/
export interface InjectableType<T> extends Type<T> { ngInjectableDef: InjectableDef<T>; }
export interface InjectableType<T> extends Type<T> { ngInjectableDef: ΔInjectableDef<T>; }
/**
* Supports @Injectable() in JIT mode for Render2.
@ -88,7 +89,7 @@ function render2CompileInjectable(
injectableType: InjectableType<any>,
options: {providedIn?: Type<any>| 'root' | null} & InjectableProvider): void {
if (options && options.providedIn !== undefined && !getInjectableDef(injectableType)) {
injectableType.ngInjectableDef = defineInjectable({
injectableType.ngInjectableDef = ΔdefineInjectable({
providedIn: options.providedIn,
factory: convertInjectableProviderToFactory(injectableType, options),
});

4
packages/core/src/di/injection_token.ts
View File

@ -8,7 +8,7 @@
import {Type} from '../interface/type';
import {defineInjectable} from './interface/defs';
import {ΔdefineInjectable} from './interface/defs';
/**
* Creates a token that can be used in a DI Provider.
@ -67,7 +67,7 @@ export class InjectionToken<T> {
// We are using it to assign `-1` which is used to identify `Injector`.
(this as any).__NG_ELEMENT_ID__ = options;
} else if (options !== undefined) {
this.ngInjectableDef = defineInjectable({
this.ngInjectableDef = ΔdefineInjectable({
providedIn: options.providedIn || 'root',
factory: options.factory,
});

8
packages/core/src/di/injector.ts
View File

@ -11,8 +11,8 @@ import {getClosureSafeProperty} from '../util/property';
import {stringify} from '../util/stringify';
import {resolveForwardRef} from './forward_ref';
import {InjectionToken} from './injection_token';
import {inject} from './injector_compatibility';
import {defineInjectable} from './interface/defs';
import {Δinject} from './injector_compatibility';
import {ΔdefineInjectable} from './interface/defs';
import {InjectFlags} from './interface/injector';
import {ConstructorProvider, ExistingProvider, FactoryProvider, StaticClassProvider, StaticProvider, ValueProvider} from './interface/provider';
import {Inject, Optional, Self, SkipSelf} from './metadata';
@ -107,9 +107,9 @@ export abstract class Injector {
}
/** @nocollapse */
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: 'any' as any,
factory: () => inject(INJECTOR),
factory: () => Δinject(INJECTOR),
});
/**

28
packages/core/src/di/injector_compatibility.ts
View File

@ -11,7 +11,7 @@ import {stringify} from '../util/stringify';
import {InjectionToken} from './injection_token';
import {Injector} from './injector';
import {InjectableDef, getInjectableDef} from './interface/defs';
import {getInjectableDef, ΔInjectableDef} from './interface/defs';
import {InjectFlags} from './interface/injector';
import {Inject, Optional, Self, SkipSelf} from './metadata';
@ -69,7 +69,13 @@ export function injectInjectorOnly<T>(
}
/**
* Injects a token from the currently active injector.
* Generated instruction: Injects a token from the currently active injector.
*
* WARNING: This function is meant to be generated by the Ivy compiler, and is not meant for
* developer consumption!
*
* https://github.com/angular/angular/blob/master/packages/core/src/render3/DELTA_INSTRUCTIONS.md
*
* Must be used in the context of a factory function such as one defined for an
* `InjectionToken`. Throws an error if not called from such a context.
*
@ -91,11 +97,17 @@ export function injectInjectorOnly<T>(
*
* @publicApi
*/
export function inject<T>(token: Type<T>| InjectionToken<T>): T;
export function inject<T>(token: Type<T>| InjectionToken<T>, flags?: InjectFlags): T|null;
export function inject<T>(token: Type<T>| InjectionToken<T>, flags = InjectFlags.Default): T|null {
export function Δinject<T>(token: Type<T>| InjectionToken<T>): T;
export function Δinject<T>(token: Type<T>| InjectionToken<T>, flags?: InjectFlags): T|null;
export function Δinject<T>(token: Type<T>| InjectionToken<T>, flags = InjectFlags.Default): T|null {
return (_injectImplementation || injectInjectorOnly)(token, flags);
}
/**
* @deprecated in v8, delete after v10. This API should be used only be generated code, and that
* code should now use Δinject instead.
* @publicApi
*/
export const inject = Δinject;
/**
* Injects `root` tokens in limp mode.
@ -106,7 +118,7 @@ export function inject<T>(token: Type<T>| InjectionToken<T>, flags = InjectFlags
*/
export function injectRootLimpMode<T>(
token: Type<T>| InjectionToken<T>, notFoundValue: T | undefined, flags: InjectFlags): T|null {
const injectableDef: InjectableDef<T>|null = getInjectableDef(token);
const injectableDef: ΔInjectableDef<T>|null = getInjectableDef(token);
if (injectableDef && injectableDef.providedIn == 'root') {
return injectableDef.value === undefined ? injectableDef.value = injectableDef.factory() :
injectableDef.value;
@ -142,9 +154,9 @@ export function injectArgs(types: (Type<any>| InjectionToken<any>| any[])[]): an
}
}
args.push(inject(type !, flags));
args.push(Δinject(type !, flags));
} else {
args.push(inject(arg));
args.push(Δinject(arg));
}
}
return args;

27
packages/core/src/di/interface/defs.ts
View File

@ -23,8 +23,10 @@ import {ClassProvider, ConstructorProvider, ExistingProvider, FactoryProvider, S
* that the injectable does not belong to any scope.
*
* NOTE: This is a private type and should not be exported
*
* @publicApi
*/
export interface InjectableDef<T> {
export interface ΔInjectableDef<T> {
/**
* Specifies that the given type belongs to a particular injector:
* - `InjectorType` such as `NgModule`,
@ -55,8 +57,10 @@ export interface InjectableDef<T> {
* an import/dependency structure).
*
* NOTE: This is a private type and should not be exported
*
* @publicApi
*/
export interface InjectorDef<T> {
export interface ΔInjectorDef<T> {
factory: () => T;
// TODO(alxhub): Narrow down the type here once decorators properly change the return type of the
@ -127,15 +131,22 @@ export interface InjectorTypeWithProviders<T> {
*
* @publicApi
*/
export function defineInjectable<T>(opts: {
export function ΔdefineInjectable<T>(opts: {
providedIn?: Type<any>| 'root' | 'any' | null,
factory: () => T,
}): never {
return ({
providedIn: opts.providedIn as any || null, factory: opts.factory, value: undefined,
} as InjectableDef<T>) as never;
} as ΔInjectableDef<T>) as never;
}
/**
* @deprecated in v8, delete after v10. This API should be used only be generated code, and that
* code should now use ΔdefineInjectable instead.
* @publicApi
*/
export const defineInjectable = ΔdefineInjectable;
/**
* Construct an `InjectorDef` which configures an injector.
*
@ -156,11 +167,11 @@ export function defineInjectable<T>(opts: {
*
* @publicApi
*/
export function defineInjector(options: {factory: () => any, providers?: any[], imports?: any[]}):
export function ΔdefineInjector(options: {factory: () => any, providers?: any[], imports?: any[]}):
never {
return ({
factory: options.factory, providers: options.providers || [], imports: options.imports || [],
} as InjectorDef<any>) as never;
} as ΔInjectorDef<any>) as never;
}
/**
@ -168,7 +179,7 @@ export function defineInjector(options: {factory: () => any, providers?: any[],
*
* @param type type which may have `ngInjectableDef`
*/
export function getInjectableDef<T>(type: any): InjectableDef<T>|null {
export function getInjectableDef<T>(type: any): ΔInjectableDef<T>|null {
return type && type.hasOwnProperty(NG_INJECTABLE_DEF) ? (type as any)[NG_INJECTABLE_DEF] : null;
}
@ -177,7 +188,7 @@ export function getInjectableDef<T>(type: any): InjectableDef<T>|null {
*
* @param type type which may have `ngInjectorDef`
*/
export function getInjectorDef<T>(type: any): InjectorDef<T>|null {
export function getInjectorDef<T>(type: any): ΔInjectorDef<T>|null {
return type && type.hasOwnProperty(NG_INJECTOR_DEF) ? (type as any)[NG_INJECTOR_DEF] : null;
}

13
packages/core/src/di/jit/environment.ts
View File

@ -7,8 +7,9 @@
*/
import {Type} from '../../interface/type';
import {inject} from '../injector_compatibility';
import {defineInjectable, defineInjector, getInjectableDef, getInjectorDef} from '../interface/defs';
import {Δinject} from '../injector_compatibility';
import {getInjectableDef, getInjectorDef, ΔdefineInjectable, ΔdefineInjector} from '../interface/defs';
/**
@ -17,10 +18,10 @@ import {defineInjectable, defineInjector, getInjectableDef, getInjectorDef} from
* This should be kept up to date with the public exports of @angular/core.
*/
export const angularCoreDiEnv: {[name: string]: Function} = {
'defineInjectable': defineInjectable,
'defineInjector': defineInjector,
'inject': inject,
'ɵgetFactoryOf': getFactoryOf,
'ΔdefineInjectable': ΔdefineInjectable,
'ΔdefineInjector': ΔdefineInjector,
'Δinject': Δinject,
'ΔgetFactoryOf': getFactoryOf,
};
function getFactoryOf<T>(type: Type<any>): ((type: Type<T>| null) => T)|null {

10
packages/core/src/di/r3_injector.ts
View File

@ -9,16 +9,18 @@
import {OnDestroy} from '../interface/lifecycle_hooks';
import {Type} from '../interface/type';
import {stringify} from '../util/stringify';
import {resolveForwardRef} from './forward_ref';
import {InjectionToken} from './injection_token';
import {INJECTOR, Injector, NG_TEMP_TOKEN_PATH, NullInjector, USE_VALUE, catchInjectorError} from './injector';
import {inject, injectArgs, setCurrentInjector} from './injector_compatibility';
import {InjectableDef, InjectableType, InjectorType, InjectorTypeWithProviders, getInjectableDef, getInjectorDef} from './interface/defs';
import {injectArgs, setCurrentInjector, Δinject} from './injector_compatibility';
import {InjectableType, InjectorType, InjectorTypeWithProviders, getInjectableDef, getInjectorDef, ΔInjectableDef} from './interface/defs';
import {InjectFlags} from './interface/injector';
import {ClassProvider, ConstructorProvider, ExistingProvider, FactoryProvider, StaticClassProvider, StaticProvider, TypeProvider, ValueProvider} from './interface/provider';
import {APP_ROOT} from './scope';
/**
* Internal type for a single provider in a deep provider array.
*/
@ -354,7 +356,7 @@ export class R3Injector {
return record.value as T;
}
private injectableDefInScope(def: InjectableDef<any>): boolean {
private injectableDefInScope(def: ΔInjectableDef<any>): boolean {
if (!def.providedIn) {
return false;
} else if (typeof def.providedIn === 'string') {
@ -411,7 +413,7 @@ export function providerToFactory(
if (isValueProvider(provider)) {
factory = () => resolveForwardRef(provider.useValue);
} else if (isExistingProvider(provider)) {
factory = () => inject(resolveForwardRef(provider.useExisting));
factory = () => Δinject(resolveForwardRef(provider.useExisting));
} else if (isFactoryProvider(provider)) {
factory = () => provider.useFactory(...injectArgs(provider.deps || []));
} else {

4
packages/core/src/di/util.ts
View File

@ -10,7 +10,7 @@ import {Type} from '../interface/type';
import {ReflectionCapabilities} from '../reflection/reflection_capabilities';
import {getClosureSafeProperty} from '../util/property';
import {inject, injectArgs} from './injector_compatibility';
import {injectArgs, Δinject} from './injector_compatibility';
import {ClassSansProvider, ConstructorSansProvider, ExistingSansProvider, FactorySansProvider, StaticClassSansProvider, ValueProvider, ValueSansProvider} from './interface/provider';
const USE_VALUE =
@ -32,7 +32,7 @@ export function convertInjectableProviderToFactory(
return () => valueProvider.useValue;
} else if ((provider as ExistingSansProvider).useExisting) {
const existingProvider = (provider as ExistingSansProvider);
return () => inject(existingProvider.useExisting);
return () => Δinject(existingProvider.useExisting);
} else if ((provider as FactorySansProvider).useFactory) {
const factoryProvider = (provider as FactorySansProvider);
return () => factoryProvider.useFactory(...injectArgs(factoryProvider.deps || EMPTY_ARRAY));

11
packages/core/src/metadata/ng_module.ts
View File

@ -7,7 +7,7 @@
*/
import {ApplicationRef} from '../application_ref';
import {InjectorType, defineInjector} from '../di/interface/defs';
import {InjectorType, ΔdefineInjector} from '../di/interface/defs';
import {Provider} from '../di/interface/provider';
import {convertInjectableProviderToFactory} from '../di/util';
import {Type} from '../interface/type';
@ -32,7 +32,10 @@ export interface NgModuleTransitiveScopes {
schemas: SchemaMetadata[]|null;
}
export type NgModuleDefWithMeta<T, Declarations, Imports, Exports> = NgModuleDef<T>;
/**
* @publicApi
*/
export type ΔNgModuleDefWithMeta<T, Declarations, Imports, Exports> = NgModuleDef<T>;
/**
* Runtime link information for NgModules.
@ -40,7 +43,7 @@ export type NgModuleDefWithMeta<T, Declarations, Imports, Exports> = NgModuleDef
* This is the internal data structure used by the runtime to assemble components, directives,
* pipes, and injectors.
*
* NOTE: Always use `defineNgModule` function to create this object,
* NOTE: Always use `ΔdefineNgModule` function to create this object,
* never create the object directly since the shape of this object
* can change between versions.
*/
@ -344,7 +347,7 @@ function preR3NgModuleCompile(moduleType: InjectorType<any>, metadata: NgModule)
imports = [...imports, metadata.exports];
}
moduleType.ngInjectorDef = defineInjector({
moduleType.ngInjectorDef = ΔdefineInjector({
factory: convertInjectableProviderToFactory(moduleType, {useClass: moduleType}),
providers: metadata && metadata.providers,
imports: imports,

8
packages/core/src/r3_symbols.ts
View File

@ -21,10 +21,10 @@
* The below symbols are used for @Injectable and @NgModule compilation.
*/
export {inject} from './di/injector_compatibility';
export {InjectableDef, InjectorDef, defineInjectable, defineInjector} from './di/interface/defs';
export {NgModuleDef, NgModuleDefWithMeta} from './metadata/ng_module';
export {defineNgModule} from './render3/definition';
export {Δinject} from './di/injector_compatibility';
export {ΔInjectableDef, ΔInjectorDef, ΔdefineInjectable, ΔdefineInjector} from './di/interface/defs';
export {NgModuleDef, ΔNgModuleDefWithMeta} from './metadata/ng_module';
export {ΔdefineNgModule} from './render3/definition';
export {setClassMetadata} from './render3/metadata';
export {NgModuleFactory} from './render3/ng_module_ref';

9
packages/core/src/render3/DELTA_INSTRUCTIONS.md Normal file
View File

@ -0,0 +1,9 @@
# Delta Instructions
Ivy exports a number of functions prefixed with `Δ`, for example `ΔelementStart`, or `Δinject`, et al. These functions are referred to an "instructions" or "delta" instructions. They are functions that are called by code generated by the Ivy compiler that must be publicly exposed in order to be consumed by this generated code. **They are not meant for developer consumption**. The reason they are prefixed with `Δ` is not only to identify them as different from other functions, but also to make them not show up at the top of IDE code completion in environments such as Visual Studio code.
### Guidance
- Do not use `Δ` functions directly. They are meant to be used in generated code.
- Do not create new `Δ` functions, it's not a convention that Angular consumes, and it is liable to confuse other developers into thinking consuming Angular's `Δ` functions is a good pattern to follow.

36
packages/core/src/render3/STATUS.md
View File

@ -10,8 +10,8 @@ We currently expect Ivy to remain behind the flag until it's feature complete an
The work can be divided into three categories:
- `@angular/compiler-cli`: TypeScript transformer pipeline which includes two command line tools:
- `ngtsc`: (Angular TypeScript Compiler) Angular compiler which strips out `@Component` (and friends) and replaces it with `defineComponent` (and friends).
- `ngcc`: (Angular Compatibility Compiler) NPM upgrade compiler which reads the `STORING_METADATA_IN_D.TS.json` files and `.js` files and adds `defineComponent` (and friends) into the `node_module`. This in effect converts a pre-ivy module into ivy module.
- `ngtsc`: (Angular TypeScript Compiler) Angular compiler which strips out `@Component` (and friends) and replaces it with `ΔdefineComponent` (and friends).
- `ngcc`: (Angular Compatibility Compiler) NPM upgrade compiler which reads the `STORING_METADATA_IN_D.TS.json` files and `.js` files and adds `ΔdefineComponent` (and friends) into the `node_module`. This in effect converts a pre-ivy module into ivy module.
- `@angular/compiler`: Ivy Compiler which converts decorator into ivy
- `@angular/core`: Decorators which can be patched with `@angular/compiler`.
@ -20,7 +20,7 @@ The work can be divided into three categories:
### `ngtsc` TSC compiler transformer
TSC transformer which removes and converts `@Pipe`, `@Component`, `@Directive` and `@NgModule`
to the corresponding `definePipe`, `defineComponent`, `defineDirective` and `defineInjector`.
to the corresponding `ΔdefinePipe`, `ΔdefineComponent`, `ΔdefineDirective` and `ΔdefineInjector`.
- ✅ Basic setup of the transformer into `tsc`
- ✅ Can read STORING_METADATA_IN_D.TS from `.d.ts` (see: [STORING_METADATA_IN_D.TS.md](./STORING_METADATA_IN_D.TS.md))
@ -40,19 +40,19 @@ A tool which "upgrades" `node_module` compiled with non-ivy `ngc` into ivy compl
## `@angular/compiler` changes
- ✅ Component compilation: Translates `@Component` => `defineComponent`
- ✅ Component compilation: Translates `@Component` => `ΔdefineComponent`
- ✅ `TemplateCompiler` (current known as `ViewCompiler`)
- ✅ `StyleCompiler`
- ✅ `PipeCompiler`: Translates `@Pipe` => `definePipe`
- ✅ `DirectiveCompiler`: Translates `@Directive` => `defineDirective`
- ✅ `InjectableCompiler`: Translates `@Injectable` => `defineInjectable`
- ✅ `NgModuleCompiler`: Translates `@NgModule` => `defineInjector` (and `defineNgModule` only in jit)
- ✅ `PipeCompiler`: Translates `@Pipe` => `ΔdefinePipe`
- ✅ `DirectiveCompiler`: Translates `@Directive` => `ΔdefineDirective`
- ✅ `InjectableCompiler`: Translates `@Injectable` => `ΔdefineInjectable`
- ✅ `NgModuleCompiler`: Translates `@NgModule` => `ΔdefineInjector` (and `ΔdefineNgModule` only in jit)
- ❌ Documentation
## `@angular/core` changes
The goal is for the `@Component` (and friends) to be the compiler of template. Since decorators are functions which execute during parsing of the `.js` file, the decorator can compile the template into Ivy. The AoT compiler's job is to remove the `@Component` and replace it with call to `defineComponent`.
The goal is for the `@Component` (and friends) to be the compiler of template. Since decorators are functions which execute during parsing of the `.js` file, the decorator can compile the template into Ivy. The AoT compiler's job is to remove the `@Component` and replace it with call to `ΔdefineComponent`.
- ✅ `@angular/compiler` can patch itself onto:
- ✅ `@Injectable`
@ -68,15 +68,15 @@ The goal is for the `@Component` (and friends) to be the compiler of template. S
# Crosscutting
## Decorators
| Annotation | `defineXXX()` | Run time | Spec | Compiler |
| -------------------- | ------------------------------ | ------- | -------- | -------- |
| `@Component` | ✅ `defineComponent()` | ✅ | ✅ | ✅ |
| `@Directive` | ✅ `defineDirective()` | ✅ | ✅ | ✅ |
| `@Directive` | ✅ `defineBase()` | ✅ | ✅ | ✅ |
| `@Pipe` | ✅ `definePipe()` | ✅ | ✅ | ✅ |
| `@Injectable` | ✅ `defineInjectable()` | ✅ | ✅ | ✅ |
| `@NgModule` | ✅ `defineInjector()` | ✅ | ✅ | ✅ |
| `@ConfigureInjector` | ✅ `defineInjector()` | ❌ | ❌ | ❌ |
| Annotation | `defineXXX()` | Run time | Spec | Compiler |
| -------------------- | ------------------------------ | ------- | -------- | -------- |
| `@Component` | ✅ `ΔdefineComponent()` | ✅ | ✅ | ✅ |
| `@Directive` | ✅ `ΔdefineDirective()` | ✅ | ✅ | ✅ |
| `@Directive` | ✅ `ΔdefineBase()` | ✅ | ✅ | ✅ |
| `@Pipe` | ✅ `ΔdefinePipe()` | ✅ | ✅ | ✅ |
| `@Injectable` | ✅ `ΔdefineInjectable()` | ✅ | ✅ | ✅ |
| `@NgModule` | ✅ `ΔdefineInjector()` | ✅ | ✅ | ✅ |
| `@ConfigureInjector` | ✅ `ΔdefineInjector()` | ❌ | ❌ | ❌ |

12
packages/core/src/render3/STORING_METADATA_IN_D.TS.md
View File

@ -4,7 +4,7 @@ Previous version of Angular used `metadata.json` files to store information abou
`ngc` compiler would than do a global analysis to generate the `.ngfactory.ts` files from the `metadata.json`.
Ivy strives for locality, which means that `ngtsc` should not need any global information in order to compile the system.
The above is mostly true.
Unfortunately, in order for `ngtsc` to generate code which is tree shakable `ngtsc` does need to have global knowledge.
Unfortunately, in order for `ngtsc` to generate code which is tree shakable `ngtsc` does need to have global knowledge.
Here is an abbreviated example of breakage of tree-shake-ability.
```typescript
@ -13,7 +13,7 @@ Here is an abbreviated example of breakage of tree-shake-ability.
})
export class TooltipDirective {
// ngtsc generates this:
static ngDirectiveDef = defineDirective(...);
static ngDirectiveDef = ΔdefineDirective(...);
}
@Component({
@ -22,12 +22,12 @@ export class TooltipDirective {
})
class MyAppComponent {
// ngtsc generates this:
static ngDirectiveDef = defineComponent({
static ngDirectiveDef = ΔdefineComponent({
...
directives: [
// BREAKS TREE-SHAKING!!!
// TooltipDirective included here because it was declared in the NgModule
// ngtsc does not know it can be omitted.
// ngtsc does not know it can be omitted.
// Only way for ngtsc to know that it can omit TooltipDirective is if it knows
// its selector and see if the selector matches the current component's template.
TooltipDirective
@ -41,12 +41,12 @@ class MyAppComponent {
})
class MyAppModule {
// ngtsc generates this:
static ngDirectiveDef = defineNgModule(...);
static ngDirectiveDef = ΔdefineNgModule(...);
}
```
Notice that `ngtsc` can't remove `TooltipDirective` because it would need to know its selector and see if the directive matches in the component's template.
Knowing the selector breaks locality and so we make an exception for some locality information such as selector, inputs and outputs.
Knowing the selector breaks locality and so we make an exception for some locality information such as selector, inputs and outputs.
Since we are breaking the locality rule, we need to store the information someplace since `ngtsc` can't have access to the `TooltipDirective` source.
We store the information in the `.d.ts` file like so.

54
packages/core/src/render3/VIEW_DATA.md
View File

@ -36,18 +36,18 @@ The size of the `CONSTS` section is declared in the property `consts` of the com
})
class MyApp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
...,
consts: 5,
template: function(rf: RenderFlags, ctx: MyApp) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
text(1, 'Hello ');
elementStart(2, 'b');
text(3, 'World');
elementEnd();
text(4, '!');
elementEnd();
ΔelementStart(0, 'div');
Δtext(1, 'Hello ');
ΔelementStart(2, 'b');
Δtext(3, 'World');
ΔelementEnd();
Δtext(4, '!');
ΔelementEnd();
}
...
}
@ -87,19 +87,19 @@ The size of the `VARS `section is declared in the property `vars` of the compone
class MyApp {
name = 'World';
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
...,
consts: 2, // Two DOM Elements.
vars: 2, // Two bindings.
template: function(rf: RenderFlags, ctx: MyApp) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
text(1);
elementEnd();
ΔelementStart(0, 'div');
Δtext(1);
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'title', bind(ctx.name));
textBinding(1, interpolation1('Hello ', ctx.name, '!'));
ΔelementProperty(0, 'title', Δbind(ctx.name));
ΔtextBinding(1, Δinterpolation1('Hello ', ctx.name, '!'));
}
...
}
@ -139,12 +139,12 @@ Examples include:
})
class MyApp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
...,
consts: 1,
template: function(rf: RenderFlags, ctx: MyApp) {
if (rf & RenderFlags.Create) {
element(0, 'child', ['tooltip', null]);
Δelement(0, 'child', ['tooltip', null]);
}
...
},
@ -159,7 +159,7 @@ class MyApp {
})
class Child {
@HostBinding('tooltip') hostTitle = 'Hello World!';
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
...
hostVars: 1
});
@ -171,7 +171,7 @@ class Child {
})
class Tooltip {
@HostBinding('title') hostTitle = 'greeting';
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
...
hostVars: 1
});
@ -273,12 +273,12 @@ Injection tokens are sorted into three sections:
})
class MyApp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
...,
consts: 1,
template: function(rf: RenderFlags, ctx: MyApp) {
if (rf & RenderFlags.Create) {
element(0, 'child');
Δelement(0, 'child');
}
...
},
@ -301,7 +301,7 @@ class MyApp {
})
class Child {
construction(injector: Injector) {}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
...
features: [
ProvidesFeature(
@ -348,7 +348,7 @@ NOTICE:
Where `factory` is a function which wraps the factory into object which can be monomorphically detected at runtime in an efficient way.
```TypeScript
class Factory {
/// Marker set to true during factory invocation to see if we get into recursive loop.
/// Marker set to true during factory invocation to see if we get into recursive loop.
/// Recursive loop causes an error to be displayed.
resolving = false;
constructor(public factory: Function) { }
@ -376,13 +376,13 @@ There are several special objects such as `ElementRef`, `ViewContainerRef`, etc.
These objects behave as if they are always included in the `providers` array of every component and directive.
Adding them always there would prevent tree shaking so they need to be lazily included.
NOTE:
NOTE:
An interesting thing about these objects is that they are not memoized `injector.get(ElementRef) !== injector.get(ElementRef)`.
This could be considered a bug, it means that we don't have to allocate storage space for them.
We should treat these special objects like any other token. `directiveInject()` already reads a special `NG_ELEMENT_ID`
property set on directives to locate their bit in the bloom filter. We can set this same property on special objects,
but point to a factory function rather than an element ID number. When we check that property in `directiveInject()`
property set on directives to locate their bit in the bloom filter. We can set this same property on special objects,
but point to a factory function rather than an element ID number. When we check that property in `directiveInject()`
and see that it's a function, we know to invoke the factory function directly instead of searching the node tree.
```typescript
@ -422,7 +422,7 @@ function inject(token: any): any {
if (typeof token === 'function' && injectableDef = token.ngInjectableDef) {
const provideIn = injectableDef.provideIn;
if (provideIn === '__node_injector__') {
// if we are injecting `Injector` than create a wrapper object around the inject but which
// if we are injecting `Injector` than create a wrapper object around the inject but which
// is bound to the current node.
return createInjector();
}
@ -439,4 +439,4 @@ TODO
## Combining `LContainer` with `LView`
TODO
TODO

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

@ -9,7 +9,7 @@
import {ChangeDetectorRef as ViewEngine_ChangeDetectorRef} from '../change_detection/change_detector_ref';
import {InjectionToken} from '../di/injection_token';
import {Injector} from '../di/injector';
import {inject} from '../di/injector_compatibility';
import {Δinject} from '../di/injector_compatibility';
import {InjectFlags} from '../di/interface/injector';
import {Type} from '../interface/type';
import {ComponentFactory as viewEngine_ComponentFactory, ComponentRef as viewEngine_ComponentRef} from '../linker/component_factory';
@ -66,7 +66,7 @@ function toRefArray(map: {[key: string]: string}): {propName: string; templateNa
*/
export const ROOT_CONTEXT = new InjectionToken<RootContext>(
'ROOT_CONTEXT_TOKEN',
{providedIn: 'root', factory: () => createRootContext(inject(SCHEDULER))});
{providedIn: 'root', factory: () => createRootContext(Δinject(SCHEDULER))});
/**
* A change detection scheduler token for {@link RootContext}. This token is the default value used

43
packages/core/src/render3/definition.ts
View File

@ -18,7 +18,7 @@ import {stringify} from '../util/stringify';
import {EMPTY_ARRAY, EMPTY_OBJ} from './empty';
import {NG_COMPONENT_DEF, NG_DIRECTIVE_DEF, NG_MODULE_DEF, NG_PIPE_DEF} from './fields';
import {BaseDef, ComponentDef, ComponentDefFeature, ComponentTemplate, ComponentType, ContentQueriesFunction, DirectiveDef, DirectiveDefFeature, DirectiveType, DirectiveTypesOrFactory, FactoryFn, HostBindingsFunction, PipeDef, PipeType, PipeTypesOrFactory, ViewQueriesFunction} from './interfaces/definition';
import {ComponentDef, ComponentDefFeature, ComponentTemplate, ComponentType, ContentQueriesFunction, DirectiveDef, DirectiveDefFeature, DirectiveType, DirectiveTypesOrFactory, FactoryFn, HostBindingsFunction, PipeDef, PipeType, PipeTypesOrFactory, ViewQueriesFunction, ΔBaseDef} from './interfaces/definition';
// while SelectorFlags is unused here, it's required so that types don't get resolved lazily
// see: https://github.com/Microsoft/web-build-tools/issues/1050
import {CssSelectorList, SelectorFlags} from './interfaces/projection';
@ -39,8 +39,9 @@ let _renderCompCount = 0;
* });
* }
* ```
* @publicApi
*/
export function defineComponent<T>(componentDefinition: {
export function ΔdefineComponent<T>(componentDefinition: {
/**
* Directive type, needed to configure the injector.
*/
@ -303,7 +304,10 @@ export function defineComponent<T>(componentDefinition: {
return def as never;
}
export function setComponentScope(
/**
* @publicApi
*/
export function ΔsetComponentScope(
type: ComponentType<any>, directives: Type<any>[], pipes: Type<any>[]): void {
const def = (type.ngComponentDef as ComponentDef<any>);
def.directiveDefs = () => directives.map(extractDirectiveDef);
@ -327,7 +331,10 @@ export function extractPipeDef(type: PipeType<any>): PipeDef<any> {
return def !;
}
export function defineNgModule<T>(def: {
/**
* @publicApi
*/
export function ΔdefineNgModule<T>(def: {
/** Token representing the module. Used by DI. */
type: T;
@ -368,8 +375,10 @@ export function defineNgModule<T>(def: {
* Scope metadata of modules is not used in production builds, so calls to this function can be
* marked pure to tree-shake it from the bundle, allowing for all referenced declarations
* to become eligible for tree-shaking as well.
*
* @publicApi
*/
export function setNgModuleScope(type: any, scope: {
export function ΔsetNgModuleScope(type: any, scope: {
/** List of components, directives, and pipes declared by this module. */
declarations?: Type<any>[] | (() => Type<any>[]);
@ -469,15 +478,19 @@ function invertObject<T>(
* Create a base definition
*
* # Example
* ```
* ```ts
* class ShouldBeInherited {
* static ngBaseDef = defineBase({
* static ngBaseDef = ΔdefineBase({
* ...
* })
* }
* ```
*
* @param baseDefinition The base definition parameters
*
* @publicApi
*/
export function defineBase<T>(baseDefinition: {
export function ΔdefineBase<T>(baseDefinition: {
/**
* A map of input names.
*
@ -534,7 +547,7 @@ export function defineBase<T>(baseDefinition: {
* of properties.
*/
outputs?: {[P in keyof T]?: string};
}): BaseDef<T> {
}): ΔBaseDef<T> {
const declaredInputs: {[P in keyof T]: string} = {} as any;
return {
inputs: invertObject<T>(baseDefinition.inputs as any, declaredInputs),
@ -547,17 +560,19 @@ export function defineBase<T>(baseDefinition: {
* Create a directive definition object.
*
* # Example
* ```
* ```ts
* class MyDirective {
* // Generated by Angular Template Compiler
* // [Symbol] syntax will not be supported by TypeScript until v2.7
* static ngDirectiveDef = defineDirective({
* static ngDirectiveDef = ΔdefineDirective({
* ...
* });
* }
* ```
*
* @publicApi
*/
export const defineDirective = defineComponent as any as<T>(directiveDefinition: {
export const ΔdefineDirective = ΔdefineComponent as any as<T>(directiveDefinition: {
/**
* Directive type, needed to configure the injector.
*/
@ -672,8 +687,10 @@ export const defineDirective = defineComponent as any as<T>(directiveDefinition:
* }
* ```
* @param pipeDef Pipe definition generated by the compiler
*
* @publicApi
*/
export function definePipe<T>(pipeDef: {
export function ΔdefinePipe<T>(pipeDef: {
/** Name of the pipe. Used for matching pipes in template to pipe defs. */
name: string,

12
packages/core/src/render3/di.ts
View File

@ -634,7 +634,10 @@ export class NodeInjector implements Injector {
}
}
export function getFactoryOf<T>(type: Type<any>): ((type: Type<T>| null) => T)|null {
/**
* @publicApi
*/
export function ΔgetFactoryOf<T>(type: Type<any>): ((type: Type<T>| null) => T)|null {
const typeAny = type as any;
const def = getComponentDef<T>(typeAny) || getDirectiveDef<T>(typeAny) ||
getPipeDef<T>(typeAny) || getInjectableDef<T>(typeAny) || getInjectorDef<T>(typeAny);
@ -644,9 +647,12 @@ export function getFactoryOf<T>(type: Type<any>): ((type: Type<T>| null) => T)|n
return def.factory;
}
export function getInheritedFactory<T>(type: Type<any>): (type: Type<T>) => T {
/**
* @publicApi
*/
export function ΔgetInheritedFactory<T>(type: Type<any>): (type: Type<T>) => T {
const proto = Object.getPrototypeOf(type.prototype).constructor as Type<any>;
const factory = getFactoryOf<T>(proto);
const factory = ΔgetFactoryOf<T>(proto);
if (factory !== null) {
return factory;
} else {

6
packages/core/src/render3/di_setup.ts
View File

@ -12,7 +12,7 @@ import {ClassProvider, Provider} from '../di/interface/provider';
import {isClassProvider, isTypeProvider, providerToFactory} from '../di/r3_injector';
import {diPublicInInjector, getNodeInjectable, getOrCreateNodeInjectorForNode} from './di';
import {directiveInject} from './instructions/all';
import {ΔdirectiveInject} from './instructions/all';
import {DirectiveDef} from './interfaces/definition';
import {NodeInjectorFactory} from './interfaces/injector';
import {TContainerNode, TElementContainerNode, TElementNode, TNodeProviderIndexes} from './interfaces/node';
@ -93,7 +93,7 @@ function resolveProvider(
if (isTypeProvider(provider) || !provider.multi) {
// Single provider case: the factory is created and pushed immediately
const factory = new NodeInjectorFactory(providerFactory, isViewProvider, directiveInject);
const factory = new NodeInjectorFactory(providerFactory, isViewProvider, ΔdirectiveInject);
const existingFactoryIndex = indexOf(
token, tInjectables, isViewProvider ? beginIndex : beginIndex + cptViewProvidersCount,
endIndex);
@ -255,7 +255,7 @@ function multiFactory(
this: NodeInjectorFactory, _: null, tData: TData, lData: LView, tNode: TElementNode) => any,
index: number, isViewProvider: boolean, isComponent: boolean,
f: () => any): NodeInjectorFactory {
const factory = new NodeInjectorFactory(factoryFn, isViewProvider, directiveInject);
const factory = new NodeInjectorFactory(factoryFn, isViewProvider, ΔdirectiveInject);
factory.multi = [];
factory.index = index;
factory.componentProviders = 0;

8
packages/core/src/render3/features/inherit_definition_feature.ts
View File

@ -13,7 +13,7 @@ import {ComponentDef, DirectiveDef, DirectiveDefFeature, RenderFlags} from '../i
import {adjustActiveDirectiveSuperClassDepthPosition} from '../state';
import {isComponentDef} from '../util/view_utils';
import {NgOnChangesFeature} from './ng_onchanges_feature';
import {ΔNgOnChangesFeature} from './ng_onchanges_feature';
function getSuperType(type: Type<any>): Type<any>&
{ngComponentDef?: ComponentDef<any>, ngDirectiveDef?: DirectiveDef<any>} {
@ -23,8 +23,10 @@ function getSuperType(type: Type<any>): Type<any>&
/**
* Merges the definition from a super class to a sub class.
* @param definition The definition that is a SubClass of another directive of component
*
* @publicApi
*/
export function InheritDefinitionFeature(definition: DirectiveDef<any>| ComponentDef<any>): void {
export function ΔInheritDefinitionFeature(definition: DirectiveDef<any>| ComponentDef<any>): void {
let superType = getSuperType(definition.type);
while (superType) {
@ -159,7 +161,7 @@ export function InheritDefinitionFeature(definition: DirectiveDef<any>| Componen
definition.onInit = definition.onInit || superPrototype.ngOnInit;
if (superPrototype.ngOnChanges) {
NgOnChangesFeature()(definition);
ΔNgOnChangesFeature()(definition);
}
}
}

4
packages/core/src/render3/features/ng_onchanges_feature.ts
View File

@ -38,8 +38,10 @@ type OnChangesExpando = OnChanges & {
* features: [NgOnChangesFeature()]
* });
* ```
*
* @publicApi
*/
export function NgOnChangesFeature<T>(): DirectiveDefFeature {
export function ΔNgOnChangesFeature<T>(): DirectiveDefFeature {
// This option ensures that the ngOnChanges lifecycle hook will be inherited
// from superclasses (in InheritDefinitionFeature).
(NgOnChangesFeatureImpl as DirectiveDefFeature).ngInherit = true;

4
packages/core/src/render3/features/providers_feature.ts
View File

@ -36,8 +36,10 @@ import {DirectiveDef} from '../interfaces/definition';
* }
*
* @param definition
*
* @publicApi
*/
export function ProvidersFeature<T>(providers: Provider[], viewProviders: Provider[] = []) {
export function ΔProvidersFeature<T>(providers: Provider[], viewProviders: Provider[] = []) {
return (definition: DirectiveDef<T>) => {
definition.providersResolver =
(def: DirectiveDef<T>, processProvidersFn?: ProcessProvidersFunction) => {

44
packages/core/src/render3/i18n.ts
View File

@ -14,7 +14,7 @@ import {assertDefined, assertEqual, assertGreaterThan} from '../util/assert';
import {attachPatchData} from './context_discovery';
import {attachI18nOpCodesDebug} from './debug';
import {elementAttribute, load, textBinding} from './instructions/all';
import {ΔelementAttribute, Δload, ΔtextBinding} from './instructions/all';
import {allocExpando, createNodeAtIndex} from './instructions/shared';
import {LContainer, NATIVE} from './interfaces/container';
import {COMMENT_MARKER, ELEMENT_MARKER, I18nMutateOpCode, I18nMutateOpCodes, I18nUpdateOpCode, I18nUpdateOpCodes, IcuType, TI18n, TIcu} from './interfaces/i18n';
@ -346,8 +346,10 @@ const parentIndexStack: number[] = [];
* @param index A unique index of the translation in the static block.
* @param message The translation message.
* @param subTemplateIndex Optional sub-template index in the `message`.
*
* @publicApi
*/
export function i18nStart(index: number, message: string, subTemplateIndex?: number): void {
export function Δi18nStart(index: number, message: string, subTemplateIndex?: number): void {
const tView = getLView()[TVIEW];
ngDevMode && assertDefined(tView, `tView should be defined`);
i18nIndexStack[++i18nIndexStackPointer] = index;
@ -532,9 +534,9 @@ function appendI18nNode(tNode: TNode, parentTNode: TNode, previousTNode: TNode |
*
* @returns Transformed string that can be consumed by i18nStart instruction
*
* @publicAPI
* @publicApi
*/
export function i18nPostprocess(
export function Δi18nPostprocess(
message: string, replacements: {[key: string]: (string | string[])} = {}): string {
/**
* Step 1: resolve all multi-value placeholders like [<5B>#5<>|<7C>*1:1<><31>#2:1<>|<7C>#4:1<>]
@ -627,8 +629,10 @@ export function i18nPostprocess(
/**
* Translates a translation block marked by `i18nStart` and `i18nEnd`. It inserts the text/ICU nodes
* into the render tree, moves the placeholder nodes and removes the deleted nodes.
*
* @publicApi
*/
export function i18nEnd(): void {
export function Δi18nEnd(): void {
const tView = getLView()[TVIEW];
ngDevMode && assertDefined(tView, `tView should be defined`);
i18nEndFirstPass(tView);
@ -736,7 +740,7 @@ function readCreateOpCodes(
const elementNodeIndex = opCode >>> I18nMutateOpCode.SHIFT_REF;
const attrName = createOpCodes[++i] as string;
const attrValue = createOpCodes[++i] as string;
elementAttribute(elementNodeIndex, attrName, attrValue);
ΔelementAttribute(elementNodeIndex, attrName, attrValue);
break;
default:
throw new Error(`Unable to determine the type of mutate operation for "${opCode}"`);
@ -813,10 +817,10 @@ function readUpdateOpCodes(
case I18nUpdateOpCode.Attr:
const attrName = updateOpCodes[++j] as string;
const sanitizeFn = updateOpCodes[++j] as SanitizerFn | null;
elementAttribute(nodeIndex, attrName, value, sanitizeFn);
ΔelementAttribute(nodeIndex, attrName, value, sanitizeFn);
break;
case I18nUpdateOpCode.Text:
textBinding(nodeIndex, value);
ΔtextBinding(nodeIndex, value);
break;
case I18nUpdateOpCode.IcuSwitch:
tIcuIndex = updateOpCodes[++j] as number;
@ -880,7 +884,7 @@ function removeNode(index: number, viewData: LView) {
nativeRemoveNode(viewData[RENDERER], removedPhRNode);
}
const slotValue = load(index) as RElement | RComment | LContainer | StylingContext;
const slotValue = Δload(index) as RElement | RComment | LContainer | StylingContext;
if (isLContainer(slotValue)) {
const lContainer = slotValue as LContainer;
if (removedPhTNode.type !== TNodeType.Container) {
@ -914,10 +918,12 @@ function removeNode(index: number, viewData: LView) {
* @param index A unique index of the translation in the static block.
* @param message The translation message.
* @param subTemplateIndex Optional sub-template index in the `message`.
*
* @publicApi
*/
export function i18n(index: number, message: string, subTemplateIndex?: number): void {
i18nStart(index, message, subTemplateIndex);
i18nEnd();
export function Δi18n(index: number, message: string, subTemplateIndex?: number): void {
Δi18nStart(index, message, subTemplateIndex);
Δi18nEnd();
}
/**
@ -925,8 +931,10 @@ export function i18n(index: number, message: string, subTemplateIndex?: number):
*
* @param index A unique index in the static block
* @param values
*
* @publicApi
*/
export function i18nAttributes(index: number, values: string[]): void {
export function Δi18nAttributes(index: number, values: string[]): void {
const tView = getLView()[TVIEW];
ngDevMode && assertDefined(tView, `tView should be defined`);
if (tView.firstTemplatePass && tView.data[index + HEADER_OFFSET] === null) {
@ -958,7 +966,7 @@ function i18nAttributesFirstPass(tView: TView, index: number, values: string[])
addAllToArray(
generateBindingUpdateOpCodes(value, previousElementIndex, attrName), updateOpCodes);
} else {
elementAttribute(previousElementIndex, attrName, value);
ΔelementAttribute(previousElementIndex, attrName, value);
}
}
}
@ -975,8 +983,10 @@ let shiftsCounter = 0;
* update the translated nodes.
*
* @param expression The binding's new value or NO_CHANGE
*
* @publicApi
*/
export function i18nExp<T>(expression: T | NO_CHANGE): void {
export function Δi18nExp<T>(expression: T | NO_CHANGE): void {
if (expression !== NO_CHANGE) {
changeMask = changeMask | (1 << shiftsCounter);
}
@ -988,8 +998,10 @@ export function i18nExp<T>(expression: T | NO_CHANGE): void {
*
* @param index Index of either {@link i18nStart} (translation block) or {@link i18nAttributes}
* (i18n attribute) on which it should update the content.
*
* @publicApi
*/
export function i18nApply(index: number) {
export function Δi18nApply(index: number) {
if (shiftsCounter) {
const lView = getLView();
const tView = lView[TVIEW];

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

@ -6,109 +6,107 @@
* found in the LICENSE file at https://angular.io/license
*/
import {LifecycleHooksFeature, renderComponent, whenRendered} from './component';
import {defineBase, defineComponent, defineDirective, defineNgModule, definePipe, setComponentScope, setNgModuleScope} from './definition';
import {InheritDefinitionFeature} from './features/inherit_definition_feature';
import {NgOnChangesFeature} from './features/ng_onchanges_feature';
import {ProvidersFeature} from './features/providers_feature';
import {BaseDef, ComponentDef, ComponentDefWithMeta, ComponentTemplate, ComponentType, DirectiveDef, DirectiveDefFlags, DirectiveDefWithMeta, DirectiveType, PipeDef, PipeDefWithMeta} from './interfaces/definition';
import {ΔdefineBase, ΔdefineComponent, ΔdefineDirective, ΔdefineNgModule, ΔdefinePipe, ΔsetComponentScope, ΔsetNgModuleScope} from './definition';
import {ΔInheritDefinitionFeature} from './features/inherit_definition_feature';
import {ΔNgOnChangesFeature} from './features/ng_onchanges_feature';
import {ΔProvidersFeature} from './features/providers_feature';
import {ComponentDef, ComponentTemplate, ComponentType, DirectiveDef, DirectiveDefFlags, DirectiveType, PipeDef, ΔBaseDef, ΔComponentDefWithMeta, ΔDirectiveDefWithMeta, ΔPipeDefWithMeta} from './interfaces/definition';
import {getComponent, getDirectives, getHostElement, getRenderedText} from './util/discovery_utils';
export {ComponentFactory, ComponentFactoryResolver, ComponentRef, injectComponentFactoryResolver} from './component_ref';
export {getFactoryOf, getInheritedFactory} from './di';
export {ΔgetFactoryOf, ΔgetInheritedFactory} from './di';
// clang-format off
export {
detectChanges,
markDirty,
store,
tick,
ΔallocHostVars,
Δbind,
ΔcomponentHostSyntheticListener,
ΔcomponentHostSyntheticProperty,
Δcontainer,
ΔcontainerRefreshEnd,
ΔcontainerRefreshStart,
ΔdirectiveInject,
Δelement,
ΔelementAttribute,
ΔelementClassProp,
ΔelementContainerEnd,
ΔelementContainerStart,
ΔelementEnd,
ΔelementHostAttrs,
ΔelementHostClassProp,
ΔelementHostStyleProp,
ΔelementHostStyling,
ΔelementHostStylingApply,
ΔelementHostStylingMap,
ΔelementProperty,
ΔelementStart,
ΔelementStyleProp,
ΔelementStyling,
ΔelementStylingApply,
ΔelementStylingMap,
ΔembeddedViewEnd,
ΔembeddedViewStart,
ΔgetCurrentView,
ΔinjectAttribute,
Δinterpolation1,
Δinterpolation2,
Δinterpolation3,
Δinterpolation4,
Δinterpolation5,
Δinterpolation6,
Δinterpolation7,
Δinterpolation8,
ΔinterpolationV,
Δlistener,
Δload,
ΔnamespaceHTML,
ΔnamespaceMathML,
ΔnamespaceSVG,
ΔnextContext,
Δprojection,
ΔprojectionDef,
Δproperty,
Δreference,
Δselect,
Δtemplate,
Δtext,
ΔtextBinding} from './instructions/all';
export {RenderFlags} from './interfaces/definition';
export {CssSelectorList} from './interfaces/projection';
// clang-format off
export {
allocHostVars,
bind,
interpolation1,
interpolation2,
interpolation3,
interpolation4,
interpolation5,
interpolation6,
interpolation7,
interpolation8,
interpolationV,
ΔrestoreView,
container,
containerRefreshStart,
containerRefreshEnd,
nextContext,
element,
elementAttribute,
elementClassProp,
elementEnd,
elementProperty,
componentHostSyntheticProperty,
componentHostSyntheticListener,
elementStart,
elementContainerStart,
elementContainerEnd,
elementStyling,
elementStylingMap,
elementStyleProp,
elementStylingApply,
elementHostAttrs,
elementHostStyling,
elementHostStylingMap,
elementHostStyleProp,
elementHostClassProp,
elementHostStylingApply,
select,
property,
listener,
store,
load,
namespaceHTML,
namespaceMathML,
namespaceSVG,
projection,
projectionDef,
text,
textBinding,
template,
reference,
embeddedViewStart,
embeddedViewEnd,
detectChanges,
markDirty,
tick,
directiveInject,
injectAttribute,
getCurrentView
} from './instructions/all';
export {
restoreView,
enableBindings,
disableBindings,
ΔenableBindings,
ΔdisableBindings,
} from './state';
export {
i18n,
i18nAttributes,
i18nExp,
i18nStart,
i18nEnd,
i18nApply,
i18nPostprocess
Δi18n,
Δi18nAttributes,
Δi18nExp,
Δi18nStart,
Δi18nEnd,
Δi18nApply,
Δi18nPostprocess,
} from './i18n';
export {NgModuleFactory, NgModuleRef, NgModuleType} from './ng_module_ref';
@ -122,71 +120,71 @@ export {
} from './metadata';
export {
pipe,
pipeBind1,
pipeBind2,
pipeBind3,
pipeBind4,
pipeBindV,
Δpipe,
ΔpipeBind1,
ΔpipeBind2,
ΔpipeBind3,
ΔpipeBind4,
ΔpipeBindV,
} from './pipe';
export {
queryRefresh,
viewQuery,
staticViewQuery,
loadViewQuery,
contentQuery,
loadContentQuery,
staticContentQuery
ΔqueryRefresh,
ΔviewQuery,
ΔstaticViewQuery,
ΔloadViewQuery,
ΔcontentQuery,
ΔloadContentQuery,
ΔstaticContentQuery
} from './query';
export {
pureFunction0,
pureFunction1,
pureFunction2,
pureFunction3,
pureFunction4,
pureFunction5,
pureFunction6,
pureFunction7,
pureFunction8,
pureFunctionV,
ΔpureFunction0,
ΔpureFunction1,
ΔpureFunction2,
ΔpureFunction3,
ΔpureFunction4,
ΔpureFunction5,
ΔpureFunction6,
ΔpureFunction7,
ΔpureFunction8,
ΔpureFunctionV,
} from './pure_function';
export {templateRefExtractor} from './view_engine_compatibility_prebound';
export {ΔtemplateRefExtractor} from './view_engine_compatibility_prebound';
export {resolveWindow, resolveDocument, resolveBody} from './util/misc_utils';
export {ΔresolveWindow, ΔresolveDocument, ΔresolveBody} from './util/misc_utils';
// clang-format on
export {
BaseDef,
ΔBaseDef,
ComponentDef,
ComponentDefWithMeta,
ΔComponentDefWithMeta,
ComponentTemplate,
ComponentType,
DirectiveDef,
DirectiveDefFlags,
DirectiveDefWithMeta,
ΔDirectiveDefWithMeta,
DirectiveType,
NgOnChangesFeature,
InheritDefinitionFeature,
ProvidersFeature,
ΔNgOnChangesFeature,
ΔInheritDefinitionFeature,
ΔProvidersFeature,
PipeDef,
PipeDefWithMeta,
ΔPipeDefWithMeta,
LifecycleHooksFeature,
defineComponent,
defineDirective,
defineNgModule,
defineBase,
definePipe,
ΔdefineComponent,
ΔdefineDirective,
ΔdefineNgModule,
ΔdefineBase,
ΔdefinePipe,
getHostElement,
getComponent,
getDirectives,
getRenderedText,
renderComponent,
setComponentScope,
setNgModuleScope,
ΔsetComponentScope,
ΔsetNgModuleScope,
whenRendered,
};

4
packages/core/src/render3/instructions/alloc_host_vars.ts
View File

@ -16,8 +16,10 @@ import {NO_CHANGE} from '../tokens';
* Allocates the necessary amount of slots for host vars.
*
* @param count Amount of vars to be allocated
*
* @publicApi
*/
export function allocHostVars(count: number): void {
export function ΔallocHostVars(count: number): void {
const lView = getLView();
const tView = lView[TVIEW];
if (!tView.firstTemplatePass) return;

16
packages/core/src/render3/instructions/container.ts
View File

@ -27,8 +27,10 @@ import {addToViewTree, createDirectivesAndLocals, createLContainer, createNodeAt
* % }
*
* @param index The index of the container in the data array
*
* @publicApi
*/
export function container(index: number): void {
export function Δcontainer(index: number): void {
const tNode = containerInternal(index, null, null);
const lView = getLView();
if (lView[TVIEW].firstTemplatePass) {
@ -54,8 +56,10 @@ export function container(index: number): void {
* @param localRefs A set of local reference bindings on the element.
* @param localRefExtractor A function which extracts local-refs values from the template.
* Defaults to the current element associated with the local-ref.
*
* @publicApi
*/
export function template(
export function Δtemplate(
index: number, templateFn: ComponentTemplate<any>| null, consts: number, vars: number,
tagName?: string | null, attrs?: TAttributes | null, localRefs?: string[] | null,
localRefExtractor?: LocalRefExtractor) {
@ -80,8 +84,10 @@ export function template(
* Sets a container up to receive views.
*
* @param index The index of the container in the data array
*
* @publicApi
*/
export function containerRefreshStart(index: number): void {
export function ΔcontainerRefreshStart(index: number): void {
const lView = getLView();
const tView = lView[TVIEW];
let previousOrParentTNode = loadInternal(tView.data, index) as TNode;
@ -101,8 +107,10 @@ export function containerRefreshStart(index: number): void {
* Marks the end of the LContainer.
*
* Marking the end of LContainer is the time when to child views get inserted or removed.
*
* @publicApi
*/
export function containerRefreshEnd(): void {
export function ΔcontainerRefreshEnd(): void {
let previousOrParentTNode = getPreviousOrParentTNode();
if (getIsParent()) {
setIsParent(false);

19
packages/core/src/render3/instructions/di.ts
View File

@ -19,22 +19,25 @@ import {getLView, getPreviousOrParentTNode} from '../state';
*
* Usage example (in factory function):
*
* ```ts
* class SomeDirective {
* constructor(directive: DirectiveA) {}
*
* static ngDirectiveDef = defineDirective({
* static ngDirectiveDef = ΔdefineDirective({
* type: SomeDirective,
* factory: () => new SomeDirective(directiveInject(DirectiveA))
* factory: () => new SomeDirective(ΔdirectiveInject(DirectiveA))
* });
* }
*
* ```
* @param token the type or token to inject
* @param flags Injection flags
* @returns the value from the injector or `null` when not found
*
* @publicApi
*/
export function directiveInject<T>(token: Type<T>| InjectionToken<T>): T;
export function directiveInject<T>(token: Type<T>| InjectionToken<T>, flags: InjectFlags): T;
export function directiveInject<T>(
export function ΔdirectiveInject<T>(token: Type<T>| InjectionToken<T>): T;
export function ΔdirectiveInject<T>(token: Type<T>| InjectionToken<T>, flags: InjectFlags): T;
export function ΔdirectiveInject<T>(
token: Type<T>| InjectionToken<T>, flags = InjectFlags.Default): T|null {
token = resolveForwardRef(token);
return getOrCreateInjectable<T>(
@ -44,7 +47,9 @@ export function directiveInject<T>(
/**
* Facade for the attribute injection from DI.
*
* @publicApi
*/
export function injectAttribute(attrNameToInject: string): string|null {
export function ΔinjectAttribute(attrNameToInject: string): string|null {
return injectAttributeImpl(getPreviousOrParentTNode(), attrNameToInject);
}

26
packages/core/src/render3/instructions/element.ts
View File

@ -41,8 +41,10 @@ import {getActiveDirectiveStylingIndex} from './styling';
* Attributes and localRefs are passed as an array of strings where elements with an even index
* hold an attribute name and elements with an odd index hold an attribute value, ex.:
* ['id', 'warning5', 'class', 'alert']
*
* @publicApi
*/
export function elementStart(
export function ΔelementStart(
index: number, name: string, attrs?: TAttributes | null, localRefs?: string[] | null): void {
const lView = getLView();
const tView = lView[TVIEW];
@ -122,8 +124,12 @@ export function elementStart(
executeContentQueries(tView, tNode, lView);
}
/** Mark the end of the element. */
export function elementEnd(): void {
/**
* Mark the end of the element.
*
* @publicApi
*/
export function ΔelementEnd(): void {
let previousOrParentTNode = getPreviousOrParentTNode();
if (getIsParent()) {
setIsParent(false);
@ -172,11 +178,13 @@ export function elementEnd(): void {
* @param attrs Statically bound set of attributes, classes, and styles to be written into the DOM
* element on creation. Use [AttributeMarker] to denote the meaning of this array.
* @param localRefs A set of local reference bindings on the element.
*
* @publicApi
*/
export function element(
export function Δelement(
index: number, name: string, attrs?: TAttributes | null, localRefs?: string[] | null): void {
elementStart(index, name, attrs, localRefs);
elementEnd();
ΔelementStart(index, name, attrs, localRefs);
ΔelementEnd();
}
@ -189,8 +197,10 @@ export function element(
* Otherwise the attribute value is set to the stringified value.
* @param sanitizer An optional function used to sanitize the value.
* @param namespace Optional namespace to use when setting the attribute.
*
* @publicApi
*/
export function elementAttribute(
export function ΔelementAttribute(
index: number, name: string, value: any, sanitizer?: SanitizerFn | null,
namespace?: string): void {
if (value !== NO_CHANGE) {
@ -258,7 +268,7 @@ export function elementAttribute(
*
* @publicApi
*/
export function elementHostAttrs(attrs: TAttributes) {
export function ΔelementHostAttrs(attrs: TAttributes) {
const hostElementIndex = getSelectedIndex();
const lView = getLView();
const tNode = getTNode(hostElementIndex, lView);

12
packages/core/src/render3/instructions/element_container.ts
View File

@ -28,8 +28,10 @@ import {createDirectivesAndLocals, createNodeAtIndex, executeContentQueries, set
* Even if this instruction accepts a set of attributes no actual attribute values are propagated to
* the DOM (as a comment node can't have attributes). Attributes are here only for directive
* matching purposes and setting initial inputs of directives.
*
* @publicApi
*/
export function elementContainerStart(
export function ΔelementContainerStart(
index: number, attrs?: TAttributes | null, localRefs?: string[] | null): void {
const lView = getLView();
const tView = lView[TVIEW];
@ -65,8 +67,12 @@ export function elementContainerStart(
executeContentQueries(tView, tNode, lView);
}
/** Mark the end of the <ng-container>. */
export function elementContainerEnd(): void {
/**
* Mark the end of the <ng-container>.
*
* @publicApi
*/
export function ΔelementContainerEnd(): void {
let previousOrParentTNode = getPreviousOrParentTNode();
const lView = getLView();
const tView = lView[TVIEW];

12
packages/core/src/render3/instructions/embedded_view.ts
View File

@ -23,8 +23,10 @@ import {assignTViewNodeToLView, createLView, createTView, refreshDescendantViews
*
* @param viewBlockId The ID of this view
* @return boolean Whether or not this view is in creation mode
*
* @publicApi
*/
export function embeddedViewStart(viewBlockId: number, consts: number, vars: number): RenderFlags {
export function ΔembeddedViewStart(viewBlockId: number, consts: number, vars: number): RenderFlags {
const lView = getLView();
const previousOrParentTNode = getPreviousOrParentTNode();
// The previous node can be a view node if we are processing an inline for loop
@ -122,8 +124,12 @@ function scanForView(lContainer: LContainer, startIdx: number, viewBlockId: numb
return null;
}
/** Marks the end of an embedded view. */
export function embeddedViewEnd(): void {
/**
* Marks the end of an embedded view.
*
* @publicApi
*/
export function ΔembeddedViewEnd(): void {
const lView = getLView();
const viewHost = lView[T_HOST];

4
packages/core/src/render3/instructions/get_current_view.ts
View File

@ -14,7 +14,9 @@ import {getLView} from '../state';
* Used in conjunction with the restoreView() instruction to save a snapshot
* of the current view and restore it when listeners are invoked. This allows
* walking the declaration view tree in listeners to get vars from parent views.
*
* @publicApi
*/
export function getCurrentView(): OpaqueViewState {
export function ΔgetCurrentView(): OpaqueViewState {
return getLView() as any as OpaqueViewState;
}

8
packages/core/src/render3/instructions/listener.ts
View File

@ -28,8 +28,10 @@ import {BindingDirection, generatePropertyAliases, getCleanup, handleError, load
* @param useCapture Whether or not to use capture in event listener
* @param eventTargetResolver Function that returns global target information in case this listener
* should be attached to a global object like window, document or body
*
* @publicApi
*/
export function listener(
export function Δlistener(
eventName: string, listenerFn: (e?: any) => any, useCapture = false,
eventTargetResolver?: GlobalTargetResolver): void {
listenerInternal(eventName, listenerFn, useCapture, eventTargetResolver);
@ -53,8 +55,10 @@ export function listener(
* @param useCapture Whether or not to use capture in event listener
* @param eventTargetResolver Function that returns global target information in case this listener
* should be attached to a global object like window, document or body
*
* @publicApi
*/
export function componentHostSyntheticListener<T>(
export function ΔcomponentHostSyntheticListener<T>(
eventName: string, listenerFn: (e?: any) => any, useCapture = false,
eventTargetResolver?: GlobalTargetResolver): void {
listenerInternal(eventName, listenerFn, useCapture, eventTargetResolver, loadComponentRenderer);

2
packages/core/src/render3/instructions/namespace.ts
View File

@ -6,4 +6,4 @@
* found in the LICENSE file at https://angular.io/license
*/
export {namespaceHTML, namespaceMathML, namespaceSVG} from '../state';
export {ΔnamespaceHTML, ΔnamespaceMathML, ΔnamespaceSVG} from '../state';

4
packages/core/src/render3/instructions/next_context.ts
View File

@ -16,7 +16,9 @@ import {nextContextImpl} from '../state';
*
* @param level The relative level of the view from which to grab context compared to contextVewData
* @returns context
*
* @publicApi
*/
export function nextContext<T = any>(level: number = 1): T {
export function ΔnextContext<T = any>(level: number = 1): T {
return nextContextImpl(level);
}

10
packages/core/src/render3/instructions/projection.ts
View File

@ -34,8 +34,10 @@ import {createNodeAtIndex} from './shared';
*
* @param selectors A collection of parsed CSS selectors
* @param rawSelectors A collection of CSS selectors in the raw, un-parsed form
*
* @publicApi
*/
export function projectionDef(selectors?: CssSelectorList[], textSelectors?: string[]): void {
export function ΔprojectionDef(selectors?: CssSelectorList[], textSelectors?: string[]): void {
const componentNode = findComponentView(getLView())[T_HOST] as TElementNode;
if (!componentNode.projection) {
@ -72,8 +74,10 @@ export function projectionDef(selectors?: CssSelectorList[], textSelectors?: str
* @param selectorIndex:
* - 0 when the selector is `*` (or unspecified as this is the default value),
* - 1 based index of the selector from the {@link projectionDef}
*/
export function projection(nodeIndex: number, selectorIndex: number = 0, attrs?: string[]): void {
*
* @publicApi
*/
export function Δprojection(nodeIndex: number, selectorIndex: number = 0, attrs?: string[]): void {
const lView = getLView();
const tProjectionNode =
createNodeAtIndex(nodeIndex, TNodeType.Projection, null, null, attrs || null);

20
packages/core/src/render3/instructions/property.ts
View File

@ -38,22 +38,26 @@ import {TsickleIssue1009, initializeTNodeInputs, loadComponentRenderer, setInput
* (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)`)
*
* @publicApi
*/
export function property<T>(
export function Δproperty<T>(
propName: string, value: T, sanitizer?: SanitizerFn | null,
nativeOnly?: boolean): TsickleIssue1009 {
const index = getSelectedIndex();
const bindReconciledValue = bind(value);
const bindReconciledValue = Δbind(value);
elementPropertyInternal(index, propName, bindReconciledValue, sanitizer, nativeOnly);
return property;
return Δproperty;
}
/**
* Creates a single value binding.
*
* @param value Value to diff
*
* @publicApi
*/
export function bind<T>(value: T): T|NO_CHANGE {
export function Δbind<T>(value: T): T|NO_CHANGE {
const lView = getLView();
const bindingIndex = lView[BINDING_INDEX]++;
storeBindingMetadata(lView);
@ -75,8 +79,10 @@ export function bind<T>(value: T): T|NO_CHANGE {
* @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)
*
* @publicApi
*/
export function elementProperty<T>(
export function ΔelementProperty<T>(
index: number, propName: string, value: T | NO_CHANGE, sanitizer?: SanitizerFn | null,
nativeOnly?: boolean): void {
elementPropertyInternal(index, propName, value, sanitizer, nativeOnly);
@ -102,8 +108,10 @@ export function elementProperty<T>(
* @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)
*
* @publicApi
*/
export function componentHostSyntheticProperty<T>(
export function ΔcomponentHostSyntheticProperty<T>(
index: number, propName: string, value: T | NO_CHANGE, sanitizer?: SanitizerFn | null,
nativeOnly?: boolean) {
elementPropertyInternal(index, propName, value, sanitizer, nativeOnly, loadComponentRenderer);

64
packages/core/src/render3/instructions/property_interpolation.ts
View File

@ -24,8 +24,10 @@ import {storeBindingMetadata} from './shared';
* - has evaluated expressions at odd indexes.
*
* Returns the concatenated string when any of the arguments changes, `NO_CHANGE` otherwise.
*
* @publicApi
*/
export function interpolationV(values: any[]): string|NO_CHANGE {
export function ΔinterpolationV(values: any[]): string|NO_CHANGE {
ngDevMode && assertLessThan(2, values.length, 'should have at least 3 values');
ngDevMode && assertEqual(values.length % 2, 1, 'should have an odd number of values');
let different = false;
@ -67,16 +69,22 @@ export function interpolationV(values: any[]): string|NO_CHANGE {
* @param prefix static value used for concatenation only.
* @param v0 value checked for change.
* @param suffix static value used for concatenation only.
*
* @publicApi
*/
export function interpolation1(prefix: string, v0: any, suffix: string): string|NO_CHANGE {
export function Δinterpolation1(prefix: string, v0: any, suffix: string): string|NO_CHANGE {
const lView = getLView();
const different = bindingUpdated(lView, lView[BINDING_INDEX]++, v0);
storeBindingMetadata(lView, prefix, suffix);
return different ? prefix + renderStringify(v0) + suffix : NO_CHANGE;
}
/** Creates an interpolation binding with 2 expressions. */
export function interpolation2(
/**
* Creates an interpolation binding with 2 expressions.
*
* @publicApi
*/
export function Δinterpolation2(
prefix: string, v0: any, i0: string, v1: any, suffix: string): string|NO_CHANGE {
const lView = getLView();
const bindingIndex = lView[BINDING_INDEX];
@ -92,8 +100,12 @@ export function interpolation2(
return different ? prefix + renderStringify(v0) + i0 + renderStringify(v1) + suffix : NO_CHANGE;
}
/** Creates an interpolation binding with 3 expressions. */
export function interpolation3(
/**
* Creates an interpolation binding with 3 expressions.
*
* @publicApi
*/
export function Δinterpolation3(
prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, suffix: string): string|
NO_CHANGE {
const lView = getLView();
@ -114,8 +126,12 @@ export function interpolation3(
NO_CHANGE;
}
/** Create an interpolation binding with 4 expressions. */
export function interpolation4(
/**
* Create an interpolation binding with 4 expressions.
*
* @publicApi
*/
export function Δinterpolation4(
prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
suffix: string): string|NO_CHANGE {
const lView = getLView();
@ -138,8 +154,12 @@ export function interpolation4(
NO_CHANGE;
}
/** Creates an interpolation binding with 5 expressions. */
export function interpolation5(
/**
* Creates an interpolation binding with 5 expressions.
*
* @publicApi
*/
export function Δinterpolation5(
prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
i3: string, v4: any, suffix: string): string|NO_CHANGE {
const lView = getLView();
@ -164,8 +184,12 @@ export function interpolation5(
NO_CHANGE;
}
/** Creates an interpolation binding with 6 expressions. */
export function interpolation6(
/**
* Creates an interpolation binding with 6 expressions.
*
* @publicApi
*/
export function Δinterpolation6(
prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
i3: string, v4: any, i4: string, v5: any, suffix: string): string|NO_CHANGE {
const lView = getLView();
@ -191,8 +215,12 @@ export function interpolation6(
NO_CHANGE;
}
/** Creates an interpolation binding with 7 expressions. */
export function interpolation7(
/**
* Creates an interpolation binding with 7 expressions.
*
* @publicApi
*/
export function Δinterpolation7(
prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, suffix: string): string|
NO_CHANGE {
@ -221,8 +249,12 @@ export function interpolation7(
NO_CHANGE;
}
/** Creates an interpolation binding with 8 expressions. */
export function interpolation8(
/**
* Creates an interpolation binding with 8 expressions.
*
* @publicApi
*/
export function Δinterpolation8(
prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string, v7: any,
suffix: string): string|NO_CHANGE {

26
packages/core/src/render3/instructions/select.ts
View File

@ -18,18 +18,20 @@ import {getCheckNoChangesMode, getLView, setSelectedIndex} from '../state';
*
* ```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 {
* 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
*
* @publicApi
*/
export function Δselect(index: number): void {
ngDevMode && assertGreaterThan(index, -1, 'Invalid index');
ngDevMode &&
assertLessThan(

9
packages/core/src/render3/instructions/shared.ts
View File

@ -27,7 +27,7 @@ import {StylingContext} from '../interfaces/styling';
import {BINDING_INDEX, CHILD_HEAD, CHILD_TAIL, CLEANUP, CONTEXT, DECLARATION_VIEW, ExpandoInstructions, FLAGS, HEADER_OFFSET, HOST, INJECTOR, InitPhaseState, LView, LViewFlags, NEXT, PARENT, QUERIES, RENDERER, RENDERER_FACTORY, RootContext, RootContextFlags, SANITIZER, TVIEW, TView, T_HOST} from '../interfaces/view';
import {assertNodeOfPossibleTypes, assertNodeType} from '../node_assert';
import {isNodeMatchingSelectorList} from '../node_selector_matcher';
import {enterView, getBindingsEnabled, getCheckNoChangesMode, getIsParent, getLView, getNamespace, getPreviousOrParentTNode, incrementActiveDirectiveId, isCreationMode, leaveView, namespaceHTML, resetComponentState, setActiveHostElement, setBindingRoot, setCheckNoChangesMode, setCurrentDirectiveDef, setCurrentQueryIndex, setIsParent, setPreviousOrParentTNode, setSelectedIndex} from '../state';
import {enterView, getBindingsEnabled, getCheckNoChangesMode, getIsParent, getLView, getNamespace, getPreviousOrParentTNode, incrementActiveDirectiveId, isCreationMode, leaveView, resetComponentState, setActiveHostElement, setBindingRoot, setCheckNoChangesMode, setCurrentDirectiveDef, setCurrentQueryIndex, setIsParent, setPreviousOrParentTNode, setSelectedIndex, ΔnamespaceHTML} from '../state';
import {initializeStaticContext as initializeStaticStylingContext} from '../styling/class_and_style_bindings';
import {NO_CHANGE} from '../tokens';
import {attrsStylingIndexOf} from '../util/attrs_utils';
@ -36,6 +36,7 @@ import {getLViewParent, getRootContext} from '../util/view_traversal_utils';
import {getComponentViewByIndex, getNativeByTNode, isComponentDef, isContentQueryHost, isRootView, readPatchedLView, resetPreOrderHookFlags, unwrapRNode, viewAttachedToChangeDetector} from '../util/view_utils';
/**
* A permanent marker promise which signifies that the current CD tree is
* clean.
@ -426,7 +427,7 @@ export function renderEmbeddedTemplate<T>(viewToRender: LView, tView: TView, con
oldView = enterView(viewToRender, viewToRender[T_HOST]);
resetPreOrderHookFlags(viewToRender);
namespaceHTML();
ΔnamespaceHTML();
// Reset the selected index so we can assert that `select` was called later
ngDevMode && setSelectedIndex(-1);
@ -461,7 +462,7 @@ function renderComponentOrTemplate<T>(
if (creationModeIsActive) {
// creation mode pass
if (templateFn) {
namespaceHTML();
ΔnamespaceHTML();
// Reset the selected index so we can assert that `select` was called later
ngDevMode && setSelectedIndex(-1);
@ -1510,7 +1511,7 @@ export function checkView<T>(hostView: LView, component: T) {
try {
resetPreOrderHookFlags(hostView);
namespaceHTML();
ΔnamespaceHTML();
creationMode && executeViewQueryFn(RenderFlags.Create, hostTView, component);
// Reset the selected index so we can assert that `select` was called later

12
packages/core/src/render3/instructions/storage.ts
View File

@ -30,13 +30,19 @@ export function store<T>(index: number, value: T): void {
* with a nextContext() call, which walks up the tree and updates the contextViewData instance.
*
* @param index The index of the local ref in contextViewData.
*
* @publicApi
*/
export function reference<T>(index: number) {
export function Δreference<T>(index: number) {
const contextLView = getContextLView();
return loadInternal<T>(contextLView, index);
}
/** Retrieves a value from current `viewData`. */
export function load<T>(index: number): T {
/**
* Retrieves a value from current `viewData`.
*
* @publicApi
*/
export function Δload<T>(index: number): T {
return loadInternal<T>(getLView(), index);
}

22
packages/core/src/render3/instructions/styling.ts
View File

@ -64,7 +64,7 @@ import {scheduleTick, setInputsForProperty} from './shared';
*
* @publicApi
*/
export function elementStyling(
export function ΔelementStyling(
classBindingNames?: string[] | null, styleBindingNames?: string[] | null,
styleSanitizer?: StyleSanitizeFn | null): void {
const tNode = getPreviousOrParentTNode();
@ -106,7 +106,7 @@ export function elementStyling(
*
* @publicApi
*/
export function elementHostStyling(
export function ΔelementHostStyling(
classBindingNames?: string[] | null, styleBindingNames?: string[] | null,
styleSanitizer?: StyleSanitizeFn | null): void {
const tNode = getPreviousOrParentTNode();
@ -166,7 +166,7 @@ function initElementStyling(
*
* @publicApi
*/
export function elementStyleProp(
export function ΔelementStyleProp(
index: number, styleIndex: number, value: string | number | String | PlayerFactory | null,
suffix?: string | null, forceOverride?: boolean): void {
const valueToAdd = resolveStylePropValue(value, suffix);
@ -200,7 +200,7 @@ export function elementStyleProp(
*
* @publicApi
*/
export function elementHostStyleProp(
export function ΔelementHostStyleProp(
styleIndex: number, value: string | number | String | PlayerFactory | null,
suffix?: string | null, forceOverride?: boolean): void {
const directiveStylingIndex = getActiveDirectiveStylingIndex();
@ -253,7 +253,7 @@ function resolveStylePropValue(
*
* @publicApi
*/
export function elementClassProp(
export function ΔelementClassProp(
index: number, classIndex: number, value: boolean | PlayerFactory,
forceOverride?: boolean): void {
const input = (value instanceof BoundPlayerFactory) ?
@ -283,7 +283,7 @@ export function elementClassProp(
*
* @publicApi
*/
export function elementHostClassProp(
export function ΔelementHostClassProp(
classIndex: number, value: boolean | PlayerFactory, forceOverride?: boolean): void {
const directiveStylingIndex = getActiveDirectiveStylingIndex();
const hostElementIndex = getSelectedIndex();
@ -326,7 +326,7 @@ function booleanOrNull(value: any): boolean|null {
*
* @publicApi
*/
export function elementStylingMap(
export function ΔelementStylingMap(
index: number, classes: {[key: string]: any} | string | NO_CHANGE | null,
styles?: {[styleName: string]: any} | NO_CHANGE | null): void {
const lView = getLView();
@ -379,7 +379,7 @@ export function elementStylingMap(
*
* @publicApi
*/
export function elementHostStylingMap(
export function ΔelementHostStylingMap(
classes: {[key: string]: any} | string | NO_CHANGE | null,
styles?: {[styleName: string]: any} | NO_CHANGE | null): void {
const directiveStylingIndex = getActiveDirectiveStylingIndex();
@ -405,7 +405,7 @@ export function elementHostStylingMap(
*
* @publicApi
*/
export function elementStylingApply(index: number): void {
export function ΔelementStylingApply(index: number): void {
elementStylingApplyInternal(DEFAULT_TEMPLATE_DIRECTIVE_INDEX, index);
}
@ -419,7 +419,7 @@ export function elementStylingApply(index: number): void {
*
* @publicApi
*/
export function elementHostStylingApply(): void {
export function ΔelementHostStylingApply(): void {
elementStylingApplyInternal(getActiveDirectiveStylingIndex(), getSelectedIndex());
}
@ -449,4 +449,4 @@ export function getActiveDirectiveStylingIndex() {
// parent directive. To help the styling code distinguish between a parent
// sub-classed directive the inheritance depth is taken into account as well.
return getActiveDirectiveId() + getActiveDirectiveSuperClassDepth();
}
}

8
packages/core/src/render3/instructions/text.ts
View File

@ -21,8 +21,10 @@ import {createNodeAtIndex} from './shared';
*
* @param index Index of the node in the data array
* @param value Value to write. This value will be stringified.
*
* @publicApi
*/
export function text(index: number, value?: any): void {
export function Δtext(index: number, value?: any): void {
const lView = getLView();
ngDevMode && assertEqual(
lView[BINDING_INDEX], lView[TVIEW].bindingStartIndex,
@ -42,8 +44,10 @@ export function text(index: number, value?: any): void {
*
* @param index Index of the node in the data array.
* @param value Stringified value to write.
*
* @publicApi
*/
export function textBinding<T>(index: number, value: T | NO_CHANGE): void {
export function ΔtextBinding<T>(index: number, value: T | NO_CHANGE): void {
if (value !== NO_CHANGE) {
const lView = getLView();
ngDevMode && assertDataInRange(lView, index + HEADER_OFFSET);

21
packages/core/src/render3/interfaces/definition.ts
View File

@ -85,7 +85,10 @@ export const enum DirectiveDefFlags {ContentQuery = 0b10}
*/
export interface PipeType<T> extends Type<T> { ngPipeDef: never; }
export type DirectiveDefWithMeta<
/**
* @publicApi
*/
export type ΔDirectiveDefWithMeta<
T, Selector extends string, ExportAs extends string[], InputMap extends{[key: string]: string},
OutputMap extends{[key: string]: string}, QueryFields extends string[]> = DirectiveDef<T>;
@ -97,8 +100,10 @@ export type DirectiveDefWithMeta<
* and outputs should be inherited.
*
* See: {@link defineBase}
*
* @publicApi
*/
export interface BaseDef<T> {
export interface ΔBaseDef<T> {
/**
* A dictionary mapping the inputs' minified property names to their public API names, which
* are their aliases if any, or their original unminified property names
@ -134,7 +139,7 @@ export interface BaseDef<T> {
*
* See: {@link defineDirective}
*/
export interface DirectiveDef<T> extends BaseDef<T> {
export interface DirectiveDef<T> extends ΔBaseDef<T> {
/** Token representing the directive. Used by DI. */
type: Type<T>;
@ -194,7 +199,10 @@ export interface DirectiveDef<T> extends BaseDef<T> {
privateName: string) => void)|null;
}
export type ComponentDefWithMeta<
/**
* @publicApi
*/
export type ΔComponentDefWithMeta<
T, Selector extends String, ExportAs extends string[], InputMap extends{[key: string]: string},
OutputMap extends{[key: string]: string}, QueryFields extends string[]> = ComponentDef<T>;
@ -338,7 +346,10 @@ export interface PipeDef<T> {
onDestroy: (() => void)|null;
}
export type PipeDefWithMeta<T, Name extends string> = PipeDef<T>;
/**
* @publicApi
*/
export type ΔPipeDefWithMeta<T, Name extends string> = PipeDef<T>;
export interface DirectiveDefFeature {
<T>(directiveDef: DirectiveDef<T>): void;

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

@ -6,8 +6,8 @@
* found in the LICENSE file at https://angular.io/license
*/
import {defineInjectable, defineInjector,} from '../../di/interface/defs';
import {inject} from '../../di/injector_compatibility';
import {ΔdefineInjectable, ΔdefineInjector,} from '../../di/interface/defs';
import {Δinject} from '../../di/injector_compatibility';
import * as r3 from '../index';
import * as sanitization from '../../sanitization/sanitization';
@ -18,116 +18,116 @@ import * as sanitization from '../../sanitization/sanitization';
* This should be kept up to date with the public exports of @angular/core.
*/
export const angularCoreEnv: {[name: string]: Function} = {
'ɵdefineBase': r3.defineBase,
'ɵdefineComponent': r3.defineComponent,
'ɵdefineDirective': r3.defineDirective,
'defineInjectable': defineInjectable,
'defineInjector': defineInjector,
'ɵdefineNgModule': r3.defineNgModule,
'ɵdefinePipe': r3.definePipe,
'ɵdirectiveInject': r3.directiveInject,
'ɵgetFactoryOf': r3.getFactoryOf,
'ɵgetInheritedFactory': r3.getInheritedFactory,
'inject': inject,
'ɵinjectAttribute': r3.injectAttribute,
'ɵtemplateRefExtractor': r3.templateRefExtractor,
'ɵNgOnChangesFeature': r3.NgOnChangesFeature,
'ɵProvidersFeature': r3.ProvidersFeature,
'ɵInheritDefinitionFeature': r3.InheritDefinitionFeature,
'ɵelementAttribute': r3.elementAttribute,
'ɵbind': r3.bind,
'ɵcontainer': r3.container,
'ɵnextContext': r3.nextContext,
'ɵcontainerRefreshStart': r3.containerRefreshStart,
'ɵcontainerRefreshEnd': r3.containerRefreshEnd,
'ɵnamespaceHTML': r3.namespaceHTML,
'ɵnamespaceMathML': r3.namespaceMathML,
'ɵnamespaceSVG': r3.namespaceSVG,
'ɵenableBindings': r3.enableBindings,
'ɵdisableBindings': r3.disableBindings,
'ɵallocHostVars': r3.allocHostVars,
'ɵelementStart': r3.elementStart,
'ɵelementEnd': r3.elementEnd,
'ɵelement': r3.element,
'ɵelementContainerStart': r3.elementContainerStart,
'ɵelementContainerEnd': r3.elementContainerEnd,
'ɵpureFunction0': r3.pureFunction0,
'ɵpureFunction1': r3.pureFunction1,
'ɵpureFunction2': r3.pureFunction2,
'ɵpureFunction3': r3.pureFunction3,
'ɵpureFunction4': r3.pureFunction4,
'ɵpureFunction5': r3.pureFunction5,
'ɵpureFunction6': r3.pureFunction6,
'ɵpureFunction7': r3.pureFunction7,
'ɵpureFunction8': r3.pureFunction8,
'ɵpureFunctionV': r3.pureFunctionV,
'ɵgetCurrentView': r3.getCurrentView,
'ɵrestoreView': r3.restoreView,
'ɵinterpolation1': r3.interpolation1,
'ɵinterpolation2': r3.interpolation2,
'ɵinterpolation3': r3.interpolation3,
'ɵinterpolation4': r3.interpolation4,
'ɵinterpolation5': r3.interpolation5,
'ɵinterpolation6': r3.interpolation6,
'ɵinterpolation7': r3.interpolation7,
'ɵinterpolation8': r3.interpolation8,
'ɵinterpolationV': r3.interpolationV,
'ɵlistener': r3.listener,
'ɵload': r3.load,
'ɵprojection': r3.projection,
'ɵelementProperty': r3.elementProperty,
'ɵcomponentHostSyntheticProperty': r3.componentHostSyntheticProperty,
'ɵcomponentHostSyntheticListener': r3.componentHostSyntheticListener,
'ɵpipeBind1': r3.pipeBind1,
'ɵpipeBind2': r3.pipeBind2,
'ɵpipeBind3': r3.pipeBind3,
'ɵpipeBind4': r3.pipeBind4,
'ɵpipeBindV': r3.pipeBindV,
'ɵprojectionDef': r3.projectionDef,
'ɵpipe': r3.pipe,
'ɵqueryRefresh': r3.queryRefresh,
'ɵviewQuery': r3.viewQuery,
'ɵstaticViewQuery': r3.staticViewQuery,
'ɵstaticContentQuery': r3.staticContentQuery,
'ɵloadViewQuery': r3.loadViewQuery,
'ɵcontentQuery': r3.contentQuery,
'ɵloadContentQuery': r3.loadContentQuery,
'ɵreference': r3.reference,
'ɵelementHostAttrs': r3.elementHostAttrs,
'ɵelementStyling': r3.elementStyling,
'ɵelementStylingMap': r3.elementStylingMap,
'ɵelementStyleProp': r3.elementStyleProp,
'ɵelementStylingApply': r3.elementStylingApply,
'ɵelementClassProp': r3.elementClassProp,
'ɵelementHostStyling': r3.elementHostStyling,
'ɵelementHostStylingMap': r3.elementHostStylingMap,
'ɵelementHostStyleProp': r3.elementHostStyleProp,
'ɵelementHostStylingApply': r3.elementHostStylingApply,
'ɵelementHostClassProp': r3.elementHostClassProp,
'ɵselect': r3.select,
'ɵtemplate': r3.template,
'ɵtext': r3.text,
'ɵtextBinding': r3.textBinding,
'ɵembeddedViewStart': r3.embeddedViewStart,
'ɵembeddedViewEnd': r3.embeddedViewEnd,
'ɵi18n': r3.i18n,
'ɵi18nAttributes': r3.i18nAttributes,
'ɵi18nExp': r3.i18nExp,
'ɵi18nStart': r3.i18nStart,
'ɵi18nEnd': r3.i18nEnd,
'ɵi18nApply': r3.i18nApply,
'ɵi18nPostprocess': r3.i18nPostprocess,
'ɵresolveWindow': r3.resolveWindow,
'ɵresolveDocument': r3.resolveDocument,
'ɵresolveBody': r3.resolveBody,
'ɵsetComponentScope': r3.setComponentScope,
'ɵsetNgModuleScope': r3.setNgModuleScope,
'ΔdefineBase': r3.ΔdefineBase,
'ΔdefineComponent': r3.ΔdefineComponent,
'ΔdefineDirective': r3.ΔdefineDirective,
'ΔdefineInjectable': ΔdefineInjectable,
'ΔdefineInjector': ΔdefineInjector,
'ΔdefineNgModule': r3.ΔdefineNgModule,
'ΔdefinePipe': r3.ΔdefinePipe,
'ΔdirectiveInject': r3.ΔdirectiveInject,
'ΔgetFactoryOf': r3.ΔgetFactoryOf,
'ΔgetInheritedFactory': r3.ΔgetInheritedFactory,
'Δinject': Δinject,
'ΔinjectAttribute': r3.ΔinjectAttribute,
'ΔtemplateRefExtractor': r3.ΔtemplateRefExtractor,
'ΔNgOnChangesFeature': r3.ΔNgOnChangesFeature,
'ΔProvidersFeature': r3.ΔProvidersFeature,
'ΔInheritDefinitionFeature': r3.ΔInheritDefinitionFeature,
'ΔelementAttribute': r3.ΔelementAttribute,
'Δbind': r3.Δbind,
'Δcontainer': r3.Δcontainer,
'ΔnextContext': r3.ΔnextContext,
'ΔcontainerRefreshStart': r3.ΔcontainerRefreshStart,
'ΔcontainerRefreshEnd': r3.ΔcontainerRefreshEnd,
'ΔnamespaceHTML': r3.ΔnamespaceHTML,
'ΔnamespaceMathML': r3.ΔnamespaceMathML,
'ΔnamespaceSVG': r3.ΔnamespaceSVG,
'ΔenableBindings': r3.ΔenableBindings,
'ΔdisableBindings': r3.ΔdisableBindings,
'ΔallocHostVars': r3.ΔallocHostVars,
'ΔelementStart': r3.ΔelementStart,
'ΔelementEnd': r3.ΔelementEnd,
'Δelement': r3.Δelement,
'ΔelementContainerStart': r3.ΔelementContainerStart,
'ΔelementContainerEnd': r3.ΔelementContainerEnd,
'ΔpureFunction0': r3.ΔpureFunction0,
'ΔpureFunction1': r3.ΔpureFunction1,
'ΔpureFunction2': r3.ΔpureFunction2,
'ΔpureFunction3': r3.ΔpureFunction3,
'ΔpureFunction4': r3.ΔpureFunction4,
'ΔpureFunction5': r3.ΔpureFunction5,
'ΔpureFunction6': r3.ΔpureFunction6,
'ΔpureFunction7': r3.ΔpureFunction7,
'ΔpureFunction8': r3.ΔpureFunction8,
'ΔpureFunctionV': r3.ΔpureFunctionV,
'ΔgetCurrentView': r3.ΔgetCurrentView,
'ΔrestoreView': r3.ΔrestoreView,
'Δinterpolation1': r3.Δinterpolation1,
'Δinterpolation2': r3.Δinterpolation2,
'Δinterpolation3': r3.Δinterpolation3,
'Δinterpolation4': r3.Δinterpolation4,
'Δinterpolation5': r3.Δinterpolation5,
'Δinterpolation6': r3.Δinterpolation6,
'Δinterpolation7': r3.Δinterpolation7,
'Δinterpolation8': r3.Δinterpolation8,
'ΔinterpolationV': r3.ΔinterpolationV,
'Δlistener': r3.Δlistener,
'Δload': r3.Δload,
'Δprojection': r3.Δprojection,
'ΔelementProperty': r3.ΔelementProperty,
'ΔcomponentHostSyntheticProperty': r3.ΔcomponentHostSyntheticProperty,
'ΔcomponentHostSyntheticListener': r3.ΔcomponentHostSyntheticListener,
'ΔpipeBind1': r3.ΔpipeBind1,
'ΔpipeBind2': r3.ΔpipeBind2,
'ΔpipeBind3': r3.ΔpipeBind3,
'ΔpipeBind4': r3.ΔpipeBind4,
'ΔpipeBindV': r3.ΔpipeBindV,
'ΔprojectionDef': r3.ΔprojectionDef,
'Δpipe': r3.Δpipe,
'ΔqueryRefresh': r3.ΔqueryRefresh,
'ΔviewQuery': r3.ΔviewQuery,
'ΔstaticViewQuery': r3.ΔstaticViewQuery,
'ΔstaticContentQuery': r3.ΔstaticContentQuery,
'ΔloadViewQuery': r3.ΔloadViewQuery,
'ΔcontentQuery': r3.ΔcontentQuery,
'ΔloadContentQuery': r3.ΔloadContentQuery,
'Δreference': r3.Δreference,
'ΔelementHostAttrs': r3.ΔelementHostAttrs,
'ΔelementStyling': r3.ΔelementStyling,
'ΔelementStylingMap': r3.ΔelementStylingMap,
'ΔelementStyleProp': r3.ΔelementStyleProp,
'ΔelementStylingApply': r3.ΔelementStylingApply,
'ΔelementClassProp': r3.ΔelementClassProp,
'ΔelementHostStyling': r3.ΔelementHostStyling,
'ΔelementHostStylingMap': r3.ΔelementHostStylingMap,
'ΔelementHostStyleProp': r3.ΔelementHostStyleProp,
'ΔelementHostStylingApply': r3.ΔelementHostStylingApply,
'ΔelementHostClassProp': r3.ΔelementHostClassProp,
'Δselect': r3.Δselect,
'Δtemplate': r3.Δtemplate,
'Δtext': r3.Δtext,
'ΔtextBinding': r3.ΔtextBinding,
'ΔembeddedViewStart': r3.ΔembeddedViewStart,
'ΔembeddedViewEnd': r3.ΔembeddedViewEnd,
'Δi18n': r3.Δi18n,
'Δi18nAttributes': r3.Δi18nAttributes,
'Δi18nExp': r3.Δi18nExp,
'Δi18nStart': r3.Δi18nStart,
'Δi18nEnd': r3.Δi18nEnd,
'Δi18nApply': r3.Δi18nApply,
'Δi18nPostprocess': r3.Δi18nPostprocess,
'ΔresolveWindow': r3.ΔresolveWindow,
'ΔresolveDocument': r3.ΔresolveDocument,
'ΔresolveBody': r3.ΔresolveBody,
'ΔsetComponentScope': r3.ΔsetComponentScope,
'ΔsetNgModuleScope': r3.ΔsetNgModuleScope,
'ɵsanitizeHtml': sanitization.sanitizeHtml,
'ɵsanitizeStyle': sanitization.sanitizeStyle,
'ɵdefaultStyleSanitizer': sanitization.defaultStyleSanitizer,
'ɵsanitizeResourceUrl': sanitization.sanitizeResourceUrl,
'ɵsanitizeScript': sanitization.sanitizeScript,
'ɵsanitizeUrl': sanitization.sanitizeUrl,
'ɵsanitizeUrlOrResourceUrl': sanitization.sanitizeUrlOrResourceUrl
'ΔsanitizeHtml': sanitization.ΔsanitizeHtml,
'ΔsanitizeStyle': sanitization.ΔsanitizeStyle,
'ΔdefaultStyleSanitizer': sanitization.ΔdefaultStyleSanitizer,
'ΔsanitizeResourceUrl': sanitization.ΔsanitizeResourceUrl,
'ΔsanitizeScript': sanitization.ΔsanitizeScript,
'ΔsanitizeUrl': sanitization.ΔsanitizeUrl,
'ΔsanitizeUrlOrResourceUrl': sanitization.ΔsanitizeUrlOrResourceUrl
};

51
packages/core/src/render3/pipe.ts
View File

@ -9,22 +9,25 @@
import {WrappedValue} from '../change_detection/change_detection_util';
import {PipeTransform} from '../change_detection/pipe_transform';
import {load, store} from './instructions/all';
import {store, Δload} from './instructions/all';
import {PipeDef, PipeDefList} from './interfaces/definition';
import {BINDING_INDEX, HEADER_OFFSET, TVIEW} from './interfaces/view';
import {pureFunction1, pureFunction2, pureFunction3, pureFunction4, pureFunctionV} from './pure_function';
import {ΔpureFunction1, ΔpureFunction2, ΔpureFunction3, ΔpureFunction4, ΔpureFunctionV} from './pure_function';
import {getLView} from './state';
import {NO_CHANGE} from './tokens';
/**
* Create a pipe.
*
* @param index Pipe index where the pipe will be stored.
* @param pipeName The name of the pipe
* @returns T the instance of the pipe.
*
* @publicApi
*/
export function pipe(index: number, pipeName: string): any {
export function Δpipe(index: number, pipeName: string): any {
const tView = getLView()[TVIEW];
let pipeDef: PipeDef<any>;
const adjustedIndex = index + HEADER_OFFSET;
@ -51,6 +54,8 @@ export function pipe(index: number, pipeName: string): any {
* @param name Name of pipe to resolve
* @param registry Full list of available pipes
* @returns Matching PipeDef
*
* @publicApi
*/
function getPipeDef(name: string, registry: PipeDefList | null): PipeDef<any> {
if (registry) {
@ -73,11 +78,13 @@ function getPipeDef(name: string, registry: PipeDefList | null): PipeDef<any> {
* @param index Pipe index where the pipe was stored on creation.
* @param slotOffset the offset in the reserved slot space
* @param v1 1st argument to {@link PipeTransform#transform}.
*
* @publicApi
*/
export function pipeBind1(index: number, slotOffset: number, v1: any): any {
const pipeInstance = load<PipeTransform>(index);
export function ΔpipeBind1(index: number, slotOffset: number, v1: any): any {
const pipeInstance = Δload<PipeTransform>(index);
return unwrapValue(
isPure(index) ? pureFunction1(slotOffset, pipeInstance.transform, v1, pipeInstance) :
isPure(index) ? ΔpureFunction1(slotOffset, pipeInstance.transform, v1, pipeInstance) :
pipeInstance.transform(v1));
}
@ -91,11 +98,13 @@ export function pipeBind1(index: number, slotOffset: number, v1: any): any {
* @param slotOffset the offset in the reserved slot space
* @param v1 1st argument to {@link PipeTransform#transform}.
* @param v2 2nd argument to {@link PipeTransform#transform}.
*
* @publicApi
*/
export function pipeBind2(index: number, slotOffset: number, v1: any, v2: any): any {
const pipeInstance = load<PipeTransform>(index);
export function ΔpipeBind2(index: number, slotOffset: number, v1: any, v2: any): any {
const pipeInstance = Δload<PipeTransform>(index);
return unwrapValue(
isPure(index) ? pureFunction2(slotOffset, pipeInstance.transform, v1, v2, pipeInstance) :
isPure(index) ? ΔpureFunction2(slotOffset, pipeInstance.transform, v1, v2, pipeInstance) :
pipeInstance.transform(v1, v2));
}
@ -110,11 +119,13 @@ export function pipeBind2(index: number, slotOffset: number, v1: any, v2: any):
* @param v1 1st argument to {@link PipeTransform#transform}.
* @param v2 2nd argument to {@link PipeTransform#transform}.
* @param v3 4rd argument to {@link PipeTransform#transform}.
*
* @publicApi
*/
export function pipeBind3(index: number, slotOffset: number, v1: any, v2: any, v3: any): any {
const pipeInstance = load<PipeTransform>(index);
export function ΔpipeBind3(index: number, slotOffset: number, v1: any, v2: any, v3: any): any {
const pipeInstance = Δload<PipeTransform>(index);
return unwrapValue(
isPure(index) ? pureFunction3(slotOffset, pipeInstance.transform, v1, v2, v3, pipeInstance) :
isPure(index) ? ΔpureFunction3(slotOffset, pipeInstance.transform, v1, v2, v3, pipeInstance) :
pipeInstance.transform(v1, v2, v3));
}
@ -130,13 +141,15 @@ export function pipeBind3(index: number, slotOffset: number, v1: any, v2: any, v
* @param v2 2nd argument to {@link PipeTransform#transform}.
* @param v3 3rd argument to {@link PipeTransform#transform}.
* @param v4 4th argument to {@link PipeTransform#transform}.
*
* @publicApi
*/
export function pipeBind4(
export function ΔpipeBind4(
index: number, slotOffset: number, v1: any, v2: any, v3: any, v4: any): any {
const pipeInstance = load<PipeTransform>(index);
const pipeInstance = Δload<PipeTransform>(index);
return unwrapValue(
isPure(index) ?
pureFunction4(slotOffset, pipeInstance.transform, v1, v2, v3, v4, pipeInstance) :
ΔpureFunction4(slotOffset, pipeInstance.transform, v1, v2, v3, v4, pipeInstance) :
pipeInstance.transform(v1, v2, v3, v4));
}
@ -149,11 +162,13 @@ export function pipeBind4(
* @param index Pipe index where the pipe was stored on creation.
* @param slotOffset the offset in the reserved slot space
* @param values Array of arguments to pass to {@link PipeTransform#transform} method.
*
* @publicApi
*/
export function pipeBindV(index: number, slotOffset: number, values: any[]): any {
const pipeInstance = load<PipeTransform>(index);
export function ΔpipeBindV(index: number, slotOffset: number, values: any[]): any {
const pipeInstance = Δload<PipeTransform>(index);
return unwrapValue(
isPure(index) ? pureFunctionV(slotOffset, pipeInstance.transform, values, pipeInstance) :
isPure(index) ? ΔpureFunctionV(slotOffset, pipeInstance.transform, values, pipeInstance) :
pipeInstance.transform.apply(pipeInstance, values));
}

40
packages/core/src/render3/pure_function.ts
View File

@ -37,8 +37,10 @@ import {getBindingRoot, getLView, isCreationMode} from './state';
* @param pureFn Function that returns a value
* @param thisArg Optional calling context of pureFn
* @returns value
*
* @publicApi
*/
export function pureFunction0<T>(slotOffset: number, pureFn: () => T, thisArg?: any): T {
export function ΔpureFunction0<T>(slotOffset: number, pureFn: () => T, thisArg?: any): T {
// TODO(kara): use bindingRoot instead of bindingStartIndex when implementing host bindings
const bindingIndex = getBindingRoot() + slotOffset;
const lView = getLView();
@ -56,8 +58,10 @@ export function pureFunction0<T>(slotOffset: number, pureFn: () => T, thisArg?:
* @param exp Updated expression value
* @param thisArg Optional calling context of pureFn
* @returns Updated or cached value
*
* @publicApi
*/
export function pureFunction1(
export function ΔpureFunction1(
slotOffset: number, pureFn: (v: any) => any, exp: any, thisArg?: any): any {
// TODO(kara): use bindingRoot instead of bindingStartIndex when implementing host bindings
const lView = getLView();
@ -77,8 +81,10 @@ export function pureFunction1(
* @param exp2
* @param thisArg Optional calling context of pureFn
* @returns Updated or cached value
*
* @publicApi
*/
export function pureFunction2(
export function ΔpureFunction2(
slotOffset: number, pureFn: (v1: any, v2: any) => any, exp1: any, exp2: any,
thisArg?: any): any {
// TODO(kara): use bindingRoot instead of bindingStartIndex when implementing host bindings
@ -102,8 +108,10 @@ export function pureFunction2(
* @param exp3
* @param thisArg Optional calling context of pureFn
* @returns Updated or cached value
*
* @publicApi
*/
export function pureFunction3(
export function ΔpureFunction3(
slotOffset: number, pureFn: (v1: any, v2: any, v3: any) => any, exp1: any, exp2: any, exp3: any,
thisArg?: any): any {
// TODO(kara): use bindingRoot instead of bindingStartIndex when implementing host bindings
@ -128,8 +136,10 @@ export function pureFunction3(
* @param exp4
* @param thisArg Optional calling context of pureFn
* @returns Updated or cached value
*
* @publicApi
*/
export function pureFunction4(
export function ΔpureFunction4(
slotOffset: number, pureFn: (v1: any, v2: any, v3: any, v4: any) => any, exp1: any, exp2: any,
exp3: any, exp4: any, thisArg?: any): any {
// TODO(kara): use bindingRoot instead of bindingStartIndex when implementing host bindings
@ -155,8 +165,10 @@ export function pureFunction4(
* @param exp5
* @param thisArg Optional calling context of pureFn
* @returns Updated or cached value
*
* @publicApi
*/
export function pureFunction5(
export function ΔpureFunction5(
slotOffset: number, pureFn: (v1: any, v2: any, v3: any, v4: any, v5: any) => any, exp1: any,
exp2: any, exp3: any, exp4: any, exp5: any, thisArg?: any): any {
// TODO(kara): use bindingRoot instead of bindingStartIndex when implementing host bindings
@ -184,8 +196,10 @@ export function pureFunction5(
* @param exp6
* @param thisArg Optional calling context of pureFn
* @returns Updated or cached value
*
* @publicApi
*/
export function pureFunction6(
export function ΔpureFunction6(
slotOffset: number, 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, thisArg?: any): any {
// TODO(kara): use bindingRoot instead of bindingStartIndex when implementing host bindings
@ -215,8 +229,10 @@ export function pureFunction6(
* @param exp7
* @param thisArg Optional calling context of pureFn
* @returns Updated or cached value
*
* @publicApi
*/
export function pureFunction7(
export function ΔpureFunction7(
slotOffset: number,
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, thisArg?: any): any {
@ -248,8 +264,10 @@ export function pureFunction7(
* @param exp8
* @param thisArg Optional calling context of pureFn
* @returns Updated or cached value
*
* @publicApi
*/
export function pureFunction8(
export function ΔpureFunction8(
slotOffset: number,
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,
@ -278,8 +296,10 @@ export function pureFunction8(
* @param exps An array of binding values
* @param thisArg Optional calling context of pureFn
* @returns Updated or cached value
*
* @publicApi
*/
export function pureFunctionV(
export function ΔpureFunctionV(
slotOffset: number, pureFn: (...v: any[]) => any, exps: any[], thisArg?: any): any {
// TODO(kara): use bindingRoot instead of bindingStartIndex when implementing host bindings
let bindingIndex = getBindingRoot() + slotOffset;

42
packages/core/src/render3/query.ts
View File

@ -18,7 +18,7 @@ import {assertDataInRange, assertDefined, assertEqual} from '../util/assert';
import {assertPreviousIsParent} from './assert';
import {getNodeInjectable, locateDirectiveOrProvider} from './di';
import {NG_ELEMENT_ID} from './fields';
import {load, store} from './instructions/all';
import {store, Δload} from './instructions/all';
import {storeCleanupWithContext} from './instructions/shared';
import {unusedValueExportToPlacateAjd as unused1} from './interfaces/definition';
import {unusedValueExportToPlacateAjd as unused2} from './interfaces/injector';
@ -369,8 +369,10 @@ export function query<T>(
*
* @returns `true` if a query got dirty during change detection or if this is a static query
* resolving in creation mode, `false` otherwise.
*
* @publicApi
*/
export function queryRefresh(queryList: QueryList<any>): boolean {
export function ΔqueryRefresh(queryList: QueryList<any>): boolean {
const queryListImpl = (queryList as any as QueryList_<any>);
const creationMode = isCreationMode();
@ -389,11 +391,13 @@ export function queryRefresh(queryList: QueryList<any>): boolean {
* @param predicate The type for which the query will search
* @param descend Whether or not to descend into children
* @param read What to save in the query
*
* @publicApi
*/
export function staticViewQuery<T>(
export function ΔstaticViewQuery<T>(
// TODO(FW-486): "read" should be an AbstractType
predicate: Type<any>| string[], descend: boolean, read: any): void {
const queryList = viewQuery(predicate, descend, read) as QueryList_<T>;
const queryList = ΔviewQuery(predicate, descend, read) as QueryList_<T>;
const tView = getLView()[TVIEW];
queryList._static = true;
if (!tView.staticViewQueries) {
@ -408,8 +412,10 @@ export function staticViewQuery<T>(
* @param descend Whether or not to descend into children
* @param read What to save in the query
* @returns QueryList<T>
*
* @publicApi
*/
export function viewQuery<T>(
export function ΔviewQuery<T>(
// TODO(FW-486): "read" should be an AbstractType
predicate: Type<any>| string[], descend: boolean, read: any): QueryList<T> {
const lView = getLView();
@ -425,12 +431,14 @@ export function viewQuery<T>(
}
/**
* Loads current View Query and moves the pointer/index to the next View Query in LView.
*/
export function loadViewQuery<T>(): T {
* Loads current View Query and moves the pointer/index to the next View Query in LView.
*
* @publicApi
*/
export function ΔloadViewQuery<T>(): T {
const index = getCurrentQueryIndex();
setCurrentQueryIndex(index + 1);
return load<T>(index - HEADER_OFFSET);
return Δload<T>(index - HEADER_OFFSET);
}
/**
@ -442,8 +450,10 @@ export function loadViewQuery<T>(): T {
* @param descend Whether or not to descend into children
* @param read What to save in the query
* @returns QueryList<T>
*
* @publicApi
*/
export function contentQuery<T>(
export function ΔcontentQuery<T>(
directiveIndex: number, predicate: Type<any>| string[], descend: boolean,
// TODO(FW-486): "read" should be an AbstractType
read: any): QueryList<T> {
@ -471,12 +481,14 @@ export function contentQuery<T>(
* @param descend Whether or not to descend into children
* @param read What to save in the query
* @returns QueryList<T>
*
* @publicApi
*/
export function staticContentQuery<T>(
export function ΔstaticContentQuery<T>(
directiveIndex: number, predicate: Type<any>| string[], descend: boolean,
// TODO(FW-486): "read" should be an AbstractType
read: any): void {
const queryList = contentQuery(directiveIndex, predicate, descend, read) as QueryList_<T>;
const queryList = ΔcontentQuery(directiveIndex, predicate, descend, read) as QueryList_<T>;
const tView = getLView()[TVIEW];
queryList._static = true;
if (!tView.staticContentQueries) {
@ -484,7 +496,11 @@ export function staticContentQuery<T>(
}
}
export function loadContentQuery<T>(): QueryList<T> {
/**
*
* @publicApi
*/
export function ΔloadContentQuery<T>(): QueryList<T> {
const lView = getLView();
ngDevMode &&
assertDefined(

32
packages/core/src/render3/state.ts
View File

@ -82,15 +82,17 @@ export function getBindingsEnabled(): boolean {
* Should match component / directive.
* </my-comp>
* <div ngNonBindable>
* <!-- disabledBindings() -->
* <!-- ΔdisableBindings() -->
* <my-comp my-directive>
* Should not match component / directive because we are in ngNonBindable.
* </my-comp>
* <!-- enableBindings() -->
* <!-- ΔenableBindings() -->
* </div>
* ```
*
* @publicApi
*/
export function enableBindings(): void {
export function ΔenableBindings(): void {
bindingsEnabled = true;
}
@ -103,15 +105,17 @@ export function enableBindings(): void {
* Should match component / directive.
* </my-comp>
* <div ngNonBindable>
* <!-- disabledBindings() -->
* <!-- ΔdisableBindings() -->
* <my-comp my-directive>
* Should not match component / directive because we are in ngNonBindable.
* </my-comp>
* <!-- enableBindings() -->
* <!-- ΔenableBindings() -->
* </div>
* ```
*
* @publicApi
*/
export function disableBindings(): void {
export function ΔdisableBindings(): void {
bindingsEnabled = false;
}
@ -262,8 +266,10 @@ export function getActiveDirectiveSuperClassDepth() {
* walking the declaration view tree in listeners to get vars from parent views.
*
* @param viewToRestore The OpaqueViewState instance to restore.
*
* @publicApi
*/
export function restoreView(viewToRestore: OpaqueViewState) {
export function ΔrestoreView(viewToRestore: OpaqueViewState) {
contextLView = viewToRestore as any as LView;
}
@ -483,23 +489,29 @@ let _currentNamespace: string|null = null;
/**
* Sets the namespace used to create elements to `'http://www.w3.org/2000/svg'` in global state.
*
* @publicApi
*/
export function namespaceSVG() {
export function ΔnamespaceSVG() {
_currentNamespace = 'http://www.w3.org/2000/svg';
}
/**
* Sets the namespace used to create elements to `'http://www.w3.org/1998/MathML/'` in global state.
*
* @publicApi
*/
export function namespaceMathML() {
export function ΔnamespaceMathML() {
_currentNamespace = 'http://www.w3.org/1998/MathML/';
}
/**
* Sets the namespace used to create elements no `null`, which forces element creation to use
* `createElement` rather than `createElementNS`.
*
* @publicApi
*/
export function namespaceHTML() {
export function ΔnamespaceHTML() {
_currentNamespace = null;
}

18
packages/core/src/render3/util/misc_utils.ts
View File

@ -41,15 +41,27 @@ export const defaultScheduler =
setTimeout // everything else
).bind(global);
export function resolveWindow(element: RElement & {ownerDocument: Document}) {
/**
*
* @publicApi
*/
export function ΔresolveWindow(element: RElement & {ownerDocument: Document}) {
return {name: 'window', target: element.ownerDocument.defaultView};
}
export function resolveDocument(element: RElement & {ownerDocument: Document}) {
/**
*
* @publicApi
*/
export function ΔresolveDocument(element: RElement & {ownerDocument: Document}) {
return {name: 'document', target: element.ownerDocument};
}
export function resolveBody(element: RElement & {ownerDocument: Document}) {
/**
*
* @publicApi
*/
export function ΔresolveBody(element: RElement & {ownerDocument: Document}) {
return {name: 'body', target: element.ownerDocument.body};
}

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

@ -19,7 +19,9 @@ import {createTemplateRef} from './view_engine_compatibility';
/**
* Retrieves `TemplateRef` instance from `Injector` when a local reference is placed on the
* `<ng-template>` element.
*
* @publicApi
*/
export function templateRefExtractor(tNode: TNode, currentView: LView) {
export function ΔtemplateRefExtractor(tNode: TNode, currentView: LView) {
return createTemplateRef(ViewEngine_TemplateRef, ViewEngine_ElementRef, tNode, currentView);
}

34
packages/core/src/sanitization/sanitization.ts
View File

@ -30,8 +30,10 @@ import {_sanitizeUrl as _sanitizeUrl} from './url_sanitizer';
* @param unsafeHtml untrusted `html`, typically from the user.
* @returns `html` string which is safe to display to user, because all of the dangerous javascript
* and urls have been removed.
*
* @publicApi
*/
export function sanitizeHtml(unsafeHtml: any): string {
export function ΔsanitizeHtml(unsafeHtml: any): string {
const sanitizer = getSanitizer();
if (sanitizer) {
return sanitizer.sanitize(SecurityContext.HTML, unsafeHtml) || '';
@ -54,8 +56,10 @@ export function sanitizeHtml(unsafeHtml: any): string {
* @param unsafeStyle untrusted `style`, typically from the user.
* @returns `style` string which is safe to bind to the `style` properties, because all of the
* dangerous javascript and urls have been removed.
*
* @publicApi
*/
export function sanitizeStyle(unsafeStyle: any): string {
export function ΔsanitizeStyle(unsafeStyle: any): string {
const sanitizer = getSanitizer();
if (sanitizer) {
return sanitizer.sanitize(SecurityContext.STYLE, unsafeStyle) || '';
@ -79,8 +83,10 @@ export function sanitizeStyle(unsafeStyle: any): string {
* @param unsafeUrl untrusted `url`, typically from the user.
* @returns `url` string which is safe to bind to the `src` properties such as `<img src>`, because
* all of the dangerous javascript has been removed.
*
* @publicApi
*/
export function sanitizeUrl(unsafeUrl: any): string {
export function ΔsanitizeUrl(unsafeUrl: any): string {
const sanitizer = getSanitizer();
if (sanitizer) {
return sanitizer.sanitize(SecurityContext.URL, unsafeUrl) || '';
@ -99,8 +105,10 @@ export function sanitizeUrl(unsafeUrl: any): string {
* @param unsafeResourceUrl untrusted `url`, typically from the user.
* @returns `url` string which is safe to bind to the `src` properties such as `<img src>`, because
* only trusted `url`s have been allowed to pass.
*
* @publicApi
*/
export function sanitizeResourceUrl(unsafeResourceUrl: any): string {
export function ΔsanitizeResourceUrl(unsafeResourceUrl: any): string {
const sanitizer = getSanitizer();
if (sanitizer) {
return sanitizer.sanitize(SecurityContext.RESOURCE_URL, unsafeResourceUrl) || '';
@ -120,8 +128,10 @@ export function sanitizeResourceUrl(unsafeResourceUrl: any): string {
* @param unsafeScript untrusted `script`, typically from the user.
* @returns `url` string which is safe to bind to the `<script>` element such as `<img src>`,
* because only trusted `scripts` have been allowed to pass.
*
* @publicApi
*/
export function sanitizeScript(unsafeScript: any): string {
export function ΔsanitizeScript(unsafeScript: any): string {
const sanitizer = getSanitizer();
if (sanitizer) {
return sanitizer.sanitize(SecurityContext.SCRIPT, unsafeScript) || '';
@ -143,9 +153,9 @@ export function getUrlSanitizer(tag: string, prop: string) {
if ((prop === 'src' && (tag === 'embed' || tag === 'frame' || tag === 'iframe' ||
tag === 'media' || tag === 'script')) ||
(prop === 'href' && (tag === 'base' || tag === 'link'))) {
return sanitizeResourceUrl;
return ΔsanitizeResourceUrl;
}
return sanitizeUrl;
return ΔsanitizeUrl;
}
/**
@ -160,22 +170,26 @@ export function getUrlSanitizer(tag: string, prop: string) {
* @param tag target element tag name.
* @param prop name of the property that contains the value.
* @returns `url` string which is safe to bind.
*
* @publicApi
*/
export function sanitizeUrlOrResourceUrl(unsafeUrl: any, tag: string, prop: string): any {
export function ΔsanitizeUrlOrResourceUrl(unsafeUrl: any, tag: string, prop: string): any {
return getUrlSanitizer(tag, prop)(unsafeUrl);
}
/**
* The default style sanitizer will handle sanitization for style properties by
* sanitizing any CSS property that can include a `url` value (usually image-based properties)
*
* @publicApi
*/
export const defaultStyleSanitizer = (function(prop: string, value?: string): string | boolean {
export const ΔdefaultStyleSanitizer = (function(prop: string, value?: string): string | boolean {
if (value === undefined) {
return prop === 'background-image' || prop === 'background' || prop === 'border-image' ||
prop === 'filter' || prop === 'list-style' || prop === 'list-style-image';
}
return sanitizeStyle(value);
return ΔsanitizeStyle(value);
} as StyleSanitizeFn);
export function validateAgainstEventProperties(name: string) {

6
packages/core/src/view/ng_module.ts
View File

@ -9,7 +9,7 @@
import {resolveForwardRef} from '../di/forward_ref';
import {INJECTOR, Injector} from '../di/injector';
import {setCurrentInjector} from '../di/injector_compatibility';
import {InjectableDef, getInjectableDef} from '../di/interface/defs';
import {getInjectableDef, ΔInjectableDef} from '../di/interface/defs';
import {APP_ROOT} from '../di/scope';
import {NgModuleRef} from '../linker/ng_module_factory';
import {stringify} from '../util/stringify';
@ -98,7 +98,7 @@ export function resolveNgModuleDep(
return data;
}
const providerDef = data._def.providersByKey[tokenKey];
let injectableDef: InjectableDef<any>|null;
let injectableDef: ΔInjectableDef<any>|null;
if (providerDef) {
let providerInstance = data._providers[providerDef.index];
if (providerInstance === undefined) {
@ -132,7 +132,7 @@ function moduleTransitivelyPresent(ngModule: NgModuleData, scope: any): boolean
return ngModule._def.modules.indexOf(scope) > -1;
}
function targetsModule(ngModule: NgModuleData, def: InjectableDef<any>): boolean {
function targetsModule(ngModule: NgModuleData, def: ΔInjectableDef<any>): boolean {
return def.providedIn != null && (moduleTransitivelyPresent(ngModule, def.providedIn) ||
def.providedIn === 'root' && ngModule._def.isRoot);
}

4
packages/core/src/view/services.ts
View File

@ -9,7 +9,7 @@
import {DebugElement__PRE_R3__, DebugNode__PRE_R3__, EventListener, getDebugNode, indexDebugNode, removeDebugNodeFromIndex} from '../debug/debug_node';
import {Injector} from '../di';
import {InjectableType} from '../di/injectable';
import {InjectableDef, getInjectableDef} from '../di/interface/defs';
import {getInjectableDef, ΔInjectableDef} from '../di/interface/defs';
import {ErrorHandler} from '../error_handler';
import {Type} from '../interface/type';
import {ComponentFactory} from '../linker/component_factory';
@ -170,7 +170,7 @@ const viewDefOverrides = new Map<any, ViewDefinition>();
function debugOverrideProvider(override: ProviderOverride) {
providerOverrides.set(override.token, override);
let injectableDef: InjectableDef<any>|null;
let injectableDef: ΔInjectableDef<any>|null;
if (typeof override.token === 'function' && (injectableDef = getInjectableDef(override.token)) &&
typeof injectableDef.providedIn === 'function') {
providerOverridesWithScope.set(override.token as InjectableType<any>, override);

54
packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
View File

@ -257,33 +257,15 @@
{
"name": "defaultScheduler"
},
{
"name": "defineComponent"
},
{
"name": "defineInjector"
},
{
"name": "defineNgModule"
},
{
"name": "diPublicInInjector"
},
{
"name": "domRendererFactory3"
},
{
"name": "element"
},
{
"name": "elementCreate"
},
{
"name": "elementEnd"
},
{
"name": "elementStart"
},
{
"name": "enterView"
},
@ -536,9 +518,6 @@
{
"name": "matchTemplateAttribute"
},
{
"name": "namespaceHTML"
},
{
"name": "nativeAppendChild"
},
@ -641,9 +620,6 @@
{
"name": "setClass"
},
{
"name": "setComponentScope"
},
{
"name": "setCurrentDirectiveDef"
},
@ -689,9 +665,6 @@
{
"name": "syncViewWithBlueprint"
},
{
"name": "text"
},
{
"name": "throwMultipleComponentError"
},
@ -703,5 +676,32 @@
},
{
"name": "viewAttachedToChangeDetector"
},
{
"name": "ΔdefineComponent"
},
{
"name": "ΔdefineInjector"
},
{
"name": "ΔdefineNgModule"
},
{
"name": "Δelement"
},
{
"name": "ΔelementEnd"
},
{
"name": "ΔelementStart"
},
{
"name": "ΔnamespaceHTML"
},
{
"name": "ΔsetComponentScope"
},
{
"name": "Δtext"
}
]

18
packages/core/test/bundling/hello_world/bundle.golden_symbols.json
View File

@ -200,9 +200,6 @@
{
"name": "defaultScheduler"
},
{
"name": "defineComponent"
},
{
"name": "diPublicInInjector"
},
@ -371,9 +368,6 @@
{
"name": "locateHostElement"
},
{
"name": "namespaceHTML"
},
{
"name": "nativeAppendChild"
},
@ -482,9 +476,6 @@
{
"name": "syncViewWithBlueprint"
},
{
"name": "text"
},
{
"name": "tickRootContext"
},
@ -493,5 +484,14 @@
},
{
"name": "viewAttachedToChangeDetector"
},
{
"name": "ΔdefineComponent"
},
{
"name": "ΔnamespaceHTML"
},
{
"name": "Δtext"
}
]

18
packages/core/test/bundling/injection/bundle.golden_symbols.json
View File

@ -131,12 +131,6 @@
{
"name": "deepForEach"
},
{
"name": "defineInjectable"
},
{
"name": "defineInjector"
},
{
"name": "formatError"
},
@ -161,9 +155,6 @@
{
"name": "hasOnDestroy"
},
{
"name": "inject"
},
{
"name": "injectArgs"
},
@ -229,5 +220,14 @@
},
{
"name": "tryResolveToken"
},
{
"name": "ΔdefineInjectable"
},
{
"name": "ΔdefineInjector"
},
{
"name": "Δinject"
}
]

8
packages/core/test/bundling/injection/usage.ts
View File

@ -6,17 +6,17 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Injector, defineInjectable, defineInjector, ɵcreateInjector as createInjector} from '@angular/core';
import {Injector, ɵcreateInjector as createInjector, ΔdefineInjectable, ΔdefineInjector} from '@angular/core';
export class RootService {
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: 'root',
factory: () => new RootService(),
});
}
export class ScopedService {
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: null,
factory: () => new ScopedService(),
});
@ -28,7 +28,7 @@ export class ScopedService {
}
export class DefinedInjector {
static ngInjectorDef = defineInjector({
static ngInjectorDef = ΔdefineInjector({
factory: () => new DefinedInjector(),
providers: [ScopedService],
});

132
packages/core/test/bundling/todo/bundle.golden_symbols.json
View File

@ -434,9 +434,6 @@
{
"name": "baseResolveDirective"
},
{
"name": "bind"
},
{
"name": "bindingUpdated"
},
@ -545,15 +542,6 @@
{
"name": "defaultScheduler"
},
{
"name": "defineComponent"
},
{
"name": "defineDirective"
},
{
"name": "defineInjectable"
},
{
"name": "destroyLView"
},
@ -569,39 +557,18 @@
{
"name": "diPublicInInjector"
},
{
"name": "directiveInject"
},
{
"name": "directiveOwnerPointers"
},
{
"name": "domRendererFactory3"
},
{
"name": "elementClassProp"
},
{
"name": "elementCreate"
},
{
"name": "elementEnd"
},
{
"name": "elementProperty"
},
{
"name": "elementPropertyInternal"
},
{
"name": "elementStart"
},
{
"name": "elementStyling"
},
{
"name": "elementStylingApply"
},
{
"name": "elementStylingApplyInternal"
},
@ -695,9 +662,6 @@
{
"name": "getContextLView"
},
{
"name": "getCurrentView"
},
{
"name": "getDebugContext"
},
@ -947,9 +911,6 @@
{
"name": "instantiateRootComponent"
},
{
"name": "interpolation1"
},
{
"name": "invertObject"
},
@ -1031,9 +992,6 @@
{
"name": "leaveView"
},
{
"name": "listener"
},
{
"name": "listenerInternal"
},
@ -1067,9 +1025,6 @@
{
"name": "matchTemplateAttribute"
},
{
"name": "namespaceHTML"
},
{
"name": "nativeAppendChild"
},
@ -1091,9 +1046,6 @@
{
"name": "nativeRemoveNode"
},
{
"name": "nextContext"
},
{
"name": "nextContextImpl"
},
@ -1136,9 +1088,6 @@
{
"name": "readPatchedLView"
},
{
"name": "reference"
},
{
"name": "refreshChildComponents"
},
@ -1202,9 +1151,6 @@
{
"name": "resolveForwardRef"
},
{
"name": "restoreView"
},
{
"name": "saveNameToExportMap"
},
@ -1220,9 +1166,6 @@
{
"name": "searchTokensOnInjector"
},
{
"name": "select"
},
{
"name": "setActiveHostElement"
},
@ -1319,15 +1262,6 @@
{
"name": "syncViewWithBlueprint"
},
{
"name": "template"
},
{
"name": "text"
},
{
"name": "textBinding"
},
{
"name": "throwMultipleComponentError"
},
@ -1366,5 +1300,71 @@
},
{
"name": "wrapListener"
},
{
"name": "Δbind"
},
{
"name": "ΔdefineComponent"
},
{
"name": "ΔdefineDirective"
},
{
"name": "ΔdefineInjectable"
},
{
"name": "ΔdirectiveInject"
},
{
"name": "ΔelementClassProp"
},
{
"name": "ΔelementEnd"
},
{
"name": "ΔelementProperty"
},
{
"name": "ΔelementStart"
},
{
"name": "ΔelementStyling"
},
{
"name": "ΔelementStylingApply"
},
{
"name": "ΔgetCurrentView"
},
{
"name": "Δinterpolation1"
},
{
"name": "Δlistener"
},
{
"name": "ΔnamespaceHTML"
},
{
"name": "ΔnextContext"
},
{
"name": "Δreference"
},
{
"name": "ΔrestoreView"
},
{
"name": "Δselect"
},
{
"name": "Δtemplate"
},
{
"name": "Δtext"
},
{
"name": "ΔtextBinding"
}
]

60
packages/core/test/di/r3_injector_spec.ts
View File

@ -6,34 +6,34 @@
* found in the LICENSE file at https://angular.io/license
*/
import {INJECTOR, InjectFlags, InjectionToken, Injector, Optional, defineInjectable, defineInjector, inject} from '@angular/core';
import {INJECTOR, InjectFlags, InjectionToken, Injector, Optional, ΔdefineInjectable, ΔdefineInjector, Δinject} from '@angular/core';
import {R3Injector, createInjector} from '@angular/core/src/di/r3_injector';
import {expect} from '@angular/platform-browser/testing/src/matchers';
describe('InjectorDef-based createInjector()', () => {
class CircularA {
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: null,
factory: () => inject(CircularB),
factory: () => Δinject(CircularB),
});
}
class CircularB {
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: null,
factory: () => inject(CircularA),
factory: () => Δinject(CircularA),
});
}
class Service {
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: null,
factory: () => new Service(),
});
}
class OptionalService {
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: null,
factory: () => new OptionalService(),
});
@ -55,41 +55,41 @@ describe('InjectorDef-based createInjector()', () => {
class ServiceWithDep {
constructor(readonly service: Service) {}
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: null,
factory: () => new ServiceWithDep(inject(Service)),
factory: () => new ServiceWithDep(Δinject(Service)),
});
}
class ServiceWithOptionalDep {
constructor(@Optional() readonly service: OptionalService|null) {}
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: null,
factory: () => new ServiceWithOptionalDep(inject(OptionalService, InjectFlags.Optional)),
factory: () => new ServiceWithOptionalDep(Δinject(OptionalService, InjectFlags.Optional)),
});
}
class ServiceWithMissingDep {
constructor(readonly service: Service) {}
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: null,
factory: () => new ServiceWithMissingDep(inject(Service)),
factory: () => new ServiceWithMissingDep(Δinject(Service)),
});
}
class ServiceWithMultiDep {
constructor(readonly locale: string[]) {}
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: null,
factory: () => new ServiceWithMultiDep(inject(LOCALE)),
factory: () => new ServiceWithMultiDep(Δinject(LOCALE)),
});
}
class ServiceTwo {
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: null,
factory: () => new ServiceTwo(),
});
@ -97,7 +97,7 @@ describe('InjectorDef-based createInjector()', () => {
let deepServiceDestroyed = false;
class DeepService {
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: null,
factory: () => new DeepService(),
});
@ -107,7 +107,7 @@ describe('InjectorDef-based createInjector()', () => {
let eagerServiceCreated: boolean = false;
class EagerService {
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: undefined,
factory: () => new EagerService(),
});
@ -119,8 +119,8 @@ describe('InjectorDef-based createInjector()', () => {
class DeepModule {
constructor(eagerService: EagerService) { deepModuleCreated = true; }
static ngInjectorDef = defineInjector({
factory: () => new DeepModule(inject(EagerService)),
static ngInjectorDef = ΔdefineInjector({
factory: () => new DeepModule(Δinject(EagerService)),
imports: undefined,
providers: [
EagerService,
@ -137,7 +137,7 @@ describe('InjectorDef-based createInjector()', () => {
}
class IntermediateModule {
static ngInjectorDef = defineInjector({
static ngInjectorDef = ΔdefineInjector({
factory: () => new IntermediateModule(),
imports: [DeepModule.safe()],
providers: [],
@ -147,13 +147,13 @@ describe('InjectorDef-based createInjector()', () => {
class InjectorWithDep {
constructor(readonly service: Service) {}
static ngInjectorDef = defineInjector({
factory: () => new InjectorWithDep(inject(Service)),
static ngInjectorDef = ΔdefineInjector({
factory: () => new InjectorWithDep(Δinject(Service)),
});
}
class Module {
static ngInjectorDef = defineInjector({
static ngInjectorDef = ΔdefineInjector({
factory: () => new Module(),
imports: [IntermediateModule],
providers: [
@ -175,7 +175,7 @@ describe('InjectorDef-based createInjector()', () => {
}
class OtherModule {
static ngInjectorDef = defineInjector({
static ngInjectorDef = ΔdefineInjector({
factory: () => new OtherModule(),
imports: undefined,
providers: [],
@ -183,7 +183,7 @@ describe('InjectorDef-based createInjector()', () => {
}
class ModuleWithMissingDep {
static ngInjectorDef = defineInjector({
static ngInjectorDef = ΔdefineInjector({
factory: () => new ModuleWithMissingDep(),
imports: undefined,
providers: [ServiceWithMissingDep],
@ -193,7 +193,7 @@ describe('InjectorDef-based createInjector()', () => {
class NotAModule {}
class ImportsNotAModule {
static ngInjectorDef = defineInjector({
static ngInjectorDef = ΔdefineInjector({
factory: () => new ImportsNotAModule(),
imports: [NotAModule],
providers: [],
@ -202,7 +202,7 @@ describe('InjectorDef-based createInjector()', () => {
let scopedServiceDestroyed = false;
class ScopedService {
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: Module,
factory: () => new ScopedService(),
});
@ -211,7 +211,7 @@ describe('InjectorDef-based createInjector()', () => {
}
class WrongScopeService {
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: OtherModule,
factory: () => new WrongScopeService(),
});
@ -367,7 +367,7 @@ describe('InjectorDef-based createInjector()', () => {
}
class ErrorModule {
static ngInjectorDef =
defineInjector({factory: () => new ErrorModule(), providers: [MissingArgumentType]});
ΔdefineInjector({factory: () => new ErrorModule(), providers: [MissingArgumentType]});
}
expect(() => createInjector(ErrorModule).get(MissingArgumentType))
.toThrowError('Can\'t resolve all parameters for MissingArgumentType: (?).');

6
packages/core/test/linker/ng_module_integration_spec.ts
View File

@ -8,7 +8,7 @@
import {ANALYZE_FOR_ENTRY_COMPONENTS, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef, Compiler, Component, ComponentFactoryResolver, Directive, HostBinding, Inject, Injectable, InjectionToken, Injector, Input, NgModule, NgModuleRef, Optional, Pipe, Provider, Self, Type, forwardRef, getModuleFactory, ɵivyEnabled as ivyEnabled} from '@angular/core';
import {Console} from '@angular/core/src/console';
import {InjectableDef, defineInjectable} from '@angular/core/src/di/interface/defs';
import {ΔInjectableDef, ΔdefineInjectable} from '@angular/core/src/di/interface/defs';
import {getNgModuleDef} from '@angular/core/src/render3/definition';
import {NgModuleData} from '@angular/core/src/view/types';
import {tokenKey} from '@angular/core/src/view/util';
@ -1362,7 +1362,7 @@ function declareTests(config?: {useJit: boolean}) {
}
class Bar {
static ngInjectableDef: InjectableDef<Bar> = defineInjectable({
static ngInjectableDef: ΔInjectableDef<Bar> = ΔdefineInjectable({
factory: () => new Bar(),
providedIn: SomeModule,
});
@ -1394,7 +1394,7 @@ function declareTests(config?: {useJit: boolean}) {
}
class Bar {
static ngInjectableDef: InjectableDef<Bar> = defineInjectable({
static ngInjectableDef: ΔInjectableDef<Bar> = ΔdefineInjectable({
factory: () => new Bar(),
providedIn: SomeModule,
});

23
packages/core/test/render3/basic_perf.ts
View File

@ -6,9 +6,10 @@
* found in the LICENSE file at https://angular.io/license
*/
import {defineComponent} from '../../src/render3/index';
import {container, containerRefreshEnd, containerRefreshStart, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, text} from '../../src/render3/instructions/all';
import {ΔdefineComponent} from '../../src/render3/index';
import {Δcontainer, ΔcontainerRefreshEnd, ΔcontainerRefreshStart, ΔelementEnd, ΔelementStart, ΔembeddedViewEnd, ΔembeddedViewStart, Δtext} from '../../src/render3/instructions/all';
import {RenderFlags} from '../../src/render3/interfaces/definition';
import {document, renderComponent} from './render_util';
describe('iv perf test', () => {
@ -32,31 +33,31 @@ describe('iv perf test', () => {
it(`${iteration}. create ${count} divs in Render3`, () => {
class Component {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Component,
selectors: [['div']],
consts: 1,
vars: 0,
template: function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
for (let i = 0; i < count; i++) {
let rf0 = embeddedViewStart(0, 2, 0);
let rf0 = ΔembeddedViewStart(0, 2, 0);
{
if (rf0 & RenderFlags.Create) {
elementStart(0, 'div');
text(1, '-');
elementEnd();
ΔelementStart(0, 'div');
Δtext(1, '-');
ΔelementEnd();
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
},
factory: () => new Component

299
packages/core/test/render3/change_detection_spec.ts
View File

@ -11,9 +11,8 @@ import {withBody} from '@angular/private/testing';
import {ChangeDetectionStrategy, ChangeDetectorRef, DoCheck, RendererType2} from '../../src/core';
import {whenRendered} from '../../src/render3/component';
import {LifecycleHooksFeature, NgOnChangesFeature, defineComponent, defineDirective, getCurrentView, getRenderedText, templateRefExtractor} from '../../src/render3/index';
import {bind, container, containerRefreshEnd, containerRefreshStart, detectChanges, directiveInject, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, interpolation1, interpolation2, listener, markDirty, reference, text, template, textBinding, tick} from '../../src/render3/instructions/all';
import {LifecycleHooksFeature, getRenderedText, ΔNgOnChangesFeature, ΔdefineComponent, ΔdefineDirective, ΔgetCurrentView, ΔtemplateRefExtractor} from '../../src/render3/index';
import {detectChanges, markDirty, tick, Δbind, Δcontainer, ΔcontainerRefreshEnd, ΔcontainerRefreshStart, ΔdirectiveInject, Δelement, ΔelementEnd, ΔelementProperty, ΔelementStart, ΔembeddedViewEnd, ΔembeddedViewStart, Δinterpolation1, Δinterpolation2, Δlistener, Δreference, Δtemplate, Δtext, ΔtextBinding} from '../../src/render3/instructions/all';
import {RenderFlags} from '../../src/render3/interfaces/definition';
import {RElement, Renderer3, RendererFactory3} from '../../src/render3/interfaces/renderer';
import {FLAGS, LViewFlags} from '../../src/render3/interfaces/view';
@ -27,7 +26,7 @@ describe('change detection', () => {
doCheckCount = 0;
ngDoCheck(): void { this.doCheckCount++; }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyComponent,
selectors: [['my-comp']],
factory: () => new MyComponent(),
@ -35,12 +34,12 @@ describe('change detection', () => {
vars: 1,
template: (rf: RenderFlags, ctx: MyComponent) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
text(1);
elementEnd();
ΔelementStart(0, 'span');
Δtext(1);
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
textBinding(1, bind(ctx.value));
ΔtextBinding(1, Δbind(ctx.value));
}
}
});
@ -102,7 +101,7 @@ describe('change detection', () => {
onClick() {}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyComponent,
selectors: [['my-comp']],
factory: () => comp = new MyComponent(),
@ -114,15 +113,15 @@ describe('change detection', () => {
*/
template: (rf: RenderFlags, ctx: MyComponent) => {
if (rf & RenderFlags.Create) {
text(0);
elementStart(1, 'button');
Δtext(0);
ΔelementStart(1, 'button');
{
listener('click', () => { ctx.onClick(); });
Δlistener('click', () => { ctx.onClick(); });
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
textBinding(0, interpolation2('', ctx.doCheckCount, ' - ', ctx.name, ''));
ΔtextBinding(0, Δinterpolation2('', ctx.doCheckCount, ' - ', ctx.name, ''));
}
},
changeDetection: ChangeDetectionStrategy.OnPush,
@ -133,7 +132,7 @@ describe('change detection', () => {
class MyApp {
name: string = 'Nancy';
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyApp,
selectors: [['my-app']],
factory: () => new MyApp(),
@ -142,10 +141,10 @@ describe('change detection', () => {
/** <my-comp [name]="name"></my-comp> */
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
element(0, 'my-comp');
Δelement(0, 'my-comp');
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'name', bind(ctx.name));
ΔelementProperty(0, 'name', Δbind(ctx.name));
}
},
directives: () => [MyComponent]
@ -223,10 +222,10 @@ describe('change detection', () => {
const ButtonParent = createComponent('button-parent', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'my-comp');
elementStart(1, 'button', ['id', 'parent']);
{ listener('click', () => noop()); }
elementEnd();
Δelement(0, 'my-comp');
ΔelementStart(1, 'button', ['id', 'parent']);
{ Δlistener('click', () => noop()); }
ΔelementEnd();
}
}, 2, 0, [MyComponent]);
@ -248,7 +247,7 @@ describe('change detection', () => {
doCheckCount = 0;
ngDoCheck(): void { this.doCheckCount++; }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: ButtonParent,
selectors: [['button-parent']],
factory: () => parent = new ButtonParent(),
@ -257,11 +256,11 @@ describe('change detection', () => {
/** {{ doCheckCount }} - <my-comp></my-comp> */
template: (rf: RenderFlags, ctx: ButtonParent) => {
if (rf & RenderFlags.Create) {
text(0);
element(1, 'my-comp');
Δtext(0);
Δelement(1, 'my-comp');
}
if (rf & RenderFlags.Update) {
textBinding(0, interpolation1('', ctx.doCheckCount, ' - '));
ΔtextBinding(0, Δinterpolation1('', ctx.doCheckCount, ' - '));
}
},
directives: () => [MyComponent],
@ -271,7 +270,7 @@ describe('change detection', () => {
const MyButtonApp = createComponent('my-button-app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'button-parent');
Δelement(0, 'button-parent');
}
}, 1, 0, [ButtonParent]);
@ -309,7 +308,7 @@ describe('change detection', () => {
onClick() {}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: ManualComponent,
selectors: [['manual-comp']],
factory: () => comp = new ManualComponent(),
@ -323,18 +322,18 @@ describe('change detection', () => {
if (rf & RenderFlags.Create) {
// This is temporarily the only way to turn on manual change detection
// because public API has not yet been added.
const view = getCurrentView() as any;
const view = ΔgetCurrentView() as any;
view[FLAGS] |= LViewFlags.ManualOnPush;
text(0);
elementStart(1, 'button');
Δtext(0);
ΔelementStart(1, 'button');
{
listener('click', () => { ctx.onClick(); });
Δlistener('click', () => { ctx.onClick(); });
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
textBinding(0, interpolation2('', ctx.doCheckCount, ' - ', ctx.name, ''));
ΔtextBinding(0, Δinterpolation2('', ctx.doCheckCount, ' - ', ctx.name, ''));
}
},
changeDetection: ChangeDetectionStrategy.OnPush,
@ -345,7 +344,7 @@ describe('change detection', () => {
class ManualApp {
name: string = 'Nancy';
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: ManualApp,
selectors: [['manual-app']],
factory: () => new ManualApp(),
@ -354,10 +353,10 @@ describe('change detection', () => {
/** <manual-comp [name]="name"></manual-comp> */
template: (rf: RenderFlags, ctx: ManualApp) => {
if (rf & RenderFlags.Create) {
element(0, 'manual-comp');
Δelement(0, 'manual-comp');
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'name', bind(ctx.name));
ΔelementProperty(0, 'name', Δbind(ctx.name));
}
},
@ -400,7 +399,7 @@ describe('change detection', () => {
doCheckCount = 0;
ngDoCheck(): void { this.doCheckCount++; }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: ButtonParent,
selectors: [['button-parent']],
factory: () => parent = new ButtonParent(),
@ -409,11 +408,11 @@ describe('change detection', () => {
/** {{ doCheckCount }} - <manual-comp></manual-comp> */
template: (rf: RenderFlags, ctx: ButtonParent) => {
if (rf & RenderFlags.Create) {
text(0);
element(1, 'manual-comp');
Δtext(0);
Δelement(1, 'manual-comp');
}
if (rf & RenderFlags.Update) {
textBinding(0, interpolation1('', ctx.doCheckCount, ' - '));
ΔtextBinding(0, Δinterpolation1('', ctx.doCheckCount, ' - '));
}
},
directives: () => [ManualComponent],
@ -424,7 +423,7 @@ describe('change detection', () => {
const MyButtonApp =
createComponent('my-button-app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'button-parent');
Δelement(0, 'button-parent');
}
}, 1, 0, [ButtonParent]);
@ -477,19 +476,19 @@ describe('change detection', () => {
ngDoCheck() { this.doCheckCount++; }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyComp,
selectors: [['my-comp']],
factory: () => myComp = new MyComp(directiveInject(ChangeDetectorRef as any)),
factory: () => myComp = new MyComp(ΔdirectiveInject(ChangeDetectorRef as any)),
consts: 1,
vars: 1,
/** {{ name }} */
template: (rf: RenderFlags, ctx: MyComp) => {
if (rf & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.name));
ΔtextBinding(0, Δbind(ctx.name));
}
},
changeDetection: ChangeDetectionStrategy.OnPush
@ -503,10 +502,10 @@ describe('change detection', () => {
ngDoCheck() { this.doCheckCount++; }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: ParentComp,
selectors: [['parent-comp']],
factory: () => new ParentComp(directiveInject(ChangeDetectorRef as any)),
factory: () => new ParentComp(ΔdirectiveInject(ChangeDetectorRef as any)),
consts: 2,
vars: 1,
/**
@ -515,11 +514,11 @@ describe('change detection', () => {
*/
template: (rf: RenderFlags, ctx: ParentComp) => {
if (rf & RenderFlags.Create) {
text(0);
element(1, 'my-comp');
Δtext(0);
Δelement(1, 'my-comp');
}
if (rf & RenderFlags.Update) {
textBinding(0, interpolation1('', ctx.doCheckCount, ' - '));
ΔtextBinding(0, Δinterpolation1('', ctx.doCheckCount, ' - '));
}
},
directives: () => [MyComp]
@ -529,10 +528,10 @@ describe('change detection', () => {
class Dir {
constructor(public cdr: ChangeDetectorRef) {}
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: Dir,
selectors: [['', 'dir', '']],
factory: () => dir = new Dir(directiveInject(ChangeDetectorRef as any))
factory: () => dir = new Dir(ΔdirectiveInject(ChangeDetectorRef as any))
});
}
@ -594,7 +593,7 @@ describe('change detection', () => {
/** <my-comp dir></my-comp> */
const MyApp = createComponent('my-app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'my-comp', ['dir', '']);
Δelement(0, 'my-comp', ['dir', '']);
}
}, 1, 0, [MyComp, Dir]);
@ -613,11 +612,11 @@ describe('change detection', () => {
*/
const MyApp = createComponent('my-app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
text(0);
element(1, 'div', ['dir', '']);
Δtext(0);
Δelement(1, 'div', ['dir', '']);
}
if (rf & RenderFlags.Update) {
textBinding(1, bind(ctx.value));
ΔtextBinding(1, Δbind(ctx.value));
}
}, 2, 1, [Dir]);
@ -638,10 +637,10 @@ describe('change detection', () => {
constructor(public cdr: ChangeDetectorRef) {}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyApp,
selectors: [['my-app']],
factory: () => new MyApp(directiveInject(ChangeDetectorRef as any)),
factory: () => new MyApp(ΔdirectiveInject(ChangeDetectorRef as any)),
consts: 2,
vars: 1,
/**
@ -652,22 +651,22 @@ describe('change detection', () => {
*/
template: function(rf: RenderFlags, ctx: MyApp) {
if (rf & RenderFlags.Create) {
text(0);
container(1);
Δtext(0);
Δcontainer(1);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.name));
containerRefreshStart(1);
ΔtextBinding(0, Δbind(ctx.name));
ΔcontainerRefreshStart(1);
{
if (ctx.showing) {
let rf0 = embeddedViewStart(0, 1, 0);
let rf0 = ΔembeddedViewStart(0, 1, 0);
if (rf0 & RenderFlags.Create) {
element(0, 'div', ['dir', '']);
Δelement(0, 'div', ['dir', '']);
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
},
directives: [Dir]
@ -693,19 +692,19 @@ describe('change detection', () => {
this.cdr.detectChanges();
}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: DetectChangesComp,
selectors: [['detect-changes-comp']],
factory: () => new DetectChangesComp(directiveInject(ChangeDetectorRef as any)),
factory: () => new DetectChangesComp(ΔdirectiveInject(ChangeDetectorRef as any)),
consts: 1,
vars: 1,
/** {{ value }} */
template: (rf: RenderFlags, ctx: DetectChangesComp) => {
if (rf & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.value));
ΔtextBinding(0, Δbind(ctx.value));
}
}
});
@ -738,19 +737,19 @@ describe('change detection', () => {
}
}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: ChildComp,
selectors: [['child-comp']],
factory: () => new ChildComp(directiveInject(ParentComp as any)),
factory: () => new ChildComp(ΔdirectiveInject(ParentComp as any)),
consts: 1,
vars: 0,
template: (rf: RenderFlags, ctx: ChildComp) => {
if (rf & RenderFlags.Create) {
text(0, 'foo');
Δtext(0, 'foo');
}
},
inputs: {inp: 'inp'},
features: [NgOnChangesFeature]
features: [ΔNgOnChangesFeature]
});
}
@ -759,19 +758,19 @@ describe('change detection', () => {
triggerChangeDetection() { this.cdr.detectChanges(); }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: ParentComp,
selectors: [['parent-comp']],
factory: () => new ParentComp(directiveInject(ChangeDetectorRef as any)),
factory: () => new ParentComp(ΔdirectiveInject(ChangeDetectorRef as any)),
consts: 1,
vars: 1,
/** {{ value }} */
template: (rf: RenderFlags, ctx: ParentComp) => {
if (rf & RenderFlags.Create) {
element(0, 'child-comp');
Δelement(0, 'child-comp');
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'inp', bind(true));
ΔelementProperty(0, 'inp', Δbind(true));
}
},
directives: [ChildComp]
@ -793,19 +792,19 @@ describe('change detection', () => {
this.cdr.detectChanges();
}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: DetectChangesComp,
selectors: [['detect-changes-comp']],
factory: () => new DetectChangesComp(directiveInject(ChangeDetectorRef as any)),
factory: () => new DetectChangesComp(ΔdirectiveInject(ChangeDetectorRef as any)),
consts: 1,
vars: 1,
/** {{ doCheckCount }} */
template: (rf: RenderFlags, ctx: DetectChangesComp) => {
if (rf & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.doCheckCount));
ΔtextBinding(0, Δbind(ctx.doCheckCount));
}
}
});
@ -828,20 +827,20 @@ describe('change detection', () => {
create() { return this.vcr.createEmbeddedView(this.tmp, this); }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: StructuralComp,
selectors: [['structural-comp']],
factory: () => structuralComp =
new StructuralComp(directiveInject(ViewContainerRef as any)),
new StructuralComp(ΔdirectiveInject(ViewContainerRef as any)),
inputs: {tmp: 'tmp'},
consts: 1,
vars: 1,
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.value));
ΔtextBinding(0, Δbind(ctx.value));
}
}
});
@ -850,10 +849,10 @@ describe('change detection', () => {
it('should support ViewRef.detectChanges()', () => {
function FooTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.value));
ΔtextBinding(0, Δbind(ctx.value));
}
}
@ -863,13 +862,13 @@ describe('change detection', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(
0, FooTemplate, 1, 1, 'ng-template', null, ['foo', ''], templateRefExtractor);
element(2, 'structural-comp');
Δtemplate(
0, FooTemplate, 1, 1, 'ng-template', null, ['foo', ''], ΔtemplateRefExtractor);
Δelement(2, 'structural-comp');
}
if (rf & RenderFlags.Update) {
const foo = reference(1) as any;
elementProperty(2, 'tmp', bind(foo));
const foo = Δreference(1) as any;
ΔelementProperty(2, 'tmp', Δbind(foo));
}
}, 3, 1, [StructuralComp]);
@ -895,7 +894,7 @@ describe('change detection', () => {
it('should support ViewRef.detectChanges() directly after creation', () => {
function FooTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
text(0, 'Template text');
Δtext(0, 'Template text');
}
}
@ -905,13 +904,13 @@ describe('change detection', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(
0, FooTemplate, 1, 0, 'ng-template', null, ['foo', ''], templateRefExtractor);
element(2, 'structural-comp');
Δtemplate(
0, FooTemplate, 1, 0, 'ng-template', null, ['foo', ''], ΔtemplateRefExtractor);
Δelement(2, 'structural-comp');
}
if (rf & RenderFlags.Update) {
const foo = reference(1) as any;
elementProperty(2, 'tmp', bind(foo));
const foo = Δreference(1) as any;
ΔelementProperty(2, 'tmp', Δbind(foo));
}
}, 3, 1, [StructuralComp]);
@ -934,16 +933,16 @@ describe('change detection', () => {
class MyApp {
constructor(public cdr: ChangeDetectorRef) {}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyApp,
selectors: [['my-app']],
factory: () => new MyApp(directiveInject(ChangeDetectorRef as any)),
factory: () => new MyApp(ΔdirectiveInject(ChangeDetectorRef as any)),
consts: 1,
vars: 0,
/** <detached-comp></detached-comp> */
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
element(0, 'detached-comp');
Δelement(0, 'detached-comp');
}
},
directives: () => [DetachedComp]
@ -958,19 +957,19 @@ describe('change detection', () => {
ngDoCheck() { this.doCheckCount++; }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: DetachedComp,
selectors: [['detached-comp']],
factory: () => comp = new DetachedComp(directiveInject(ChangeDetectorRef as any)),
factory: () => comp = new DetachedComp(ΔdirectiveInject(ChangeDetectorRef as any)),
consts: 1,
vars: 1,
/** {{ value }} */
template: (rf: RenderFlags, ctx: DetachedComp) => {
if (rf & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.value));
ΔtextBinding(0, Δbind(ctx.value));
}
}
});
@ -1059,19 +1058,19 @@ describe('change detection', () => {
constructor(public cdr: ChangeDetectorRef) {}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: OnPushComp,
selectors: [['on-push-comp']],
factory: () => onPushComp = new OnPushComp(directiveInject(ChangeDetectorRef as any)),
factory: () => onPushComp = new OnPushComp(ΔdirectiveInject(ChangeDetectorRef as any)),
consts: 1,
vars: 1,
/** {{ value }} */
template: (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.value));
ΔtextBinding(0, Δbind(ctx.value));
}
},
changeDetection: ChangeDetectionStrategy.OnPush,
@ -1082,10 +1081,10 @@ describe('change detection', () => {
/** <on-push-comp [value]="value"></on-push-comp> */
const OnPushApp = createComponent('on-push-app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'on-push-comp');
Δelement(0, 'on-push-comp');
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'value', bind(ctx.value));
ΔelementProperty(0, 'value', Δbind(ctx.value));
}
}, 1, 1, [OnPushComp]);
@ -1120,19 +1119,19 @@ describe('change detection', () => {
ngDoCheck() { this.doCheckCount++; }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: OnPushComp,
selectors: [['on-push-comp']],
factory: () => comp = new OnPushComp(directiveInject(ChangeDetectorRef as any)),
factory: () => comp = new OnPushComp(ΔdirectiveInject(ChangeDetectorRef as any)),
consts: 1,
vars: 1,
/** {{ value }} */
template: (rf: RenderFlags, ctx: OnPushComp) => {
if (rf & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.value));
ΔtextBinding(0, Δbind(ctx.value));
}
},
changeDetection: ChangeDetectionStrategy.OnPush
@ -1142,7 +1141,7 @@ describe('change detection', () => {
class OnPushParent {
value = 'one';
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: OnPushParent,
selectors: [['on-push-parent']],
factory: () => new OnPushParent(),
@ -1154,11 +1153,11 @@ describe('change detection', () => {
*/
template: (rf: RenderFlags, ctx: OnPushParent) => {
if (rf & RenderFlags.Create) {
text(0);
element(1, 'on-push-comp');
Δtext(0);
Δelement(1, 'on-push-comp');
}
if (rf & RenderFlags.Update) {
textBinding(0, interpolation1('', ctx.value, ' - '));
ΔtextBinding(0, Δinterpolation1('', ctx.value, ' - '));
}
},
directives: () => [OnPushComp],
@ -1214,7 +1213,7 @@ describe('change detection', () => {
value = 'one';
showing = true;
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: EmbeddedViewParent,
selectors: [['embedded-view-parent']],
factory: () => new EmbeddedViewParent(),
@ -1228,22 +1227,22 @@ describe('change detection', () => {
*/
template: (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
text(0);
container(1);
Δtext(0);
Δcontainer(1);
}
if (rf & RenderFlags.Update) {
textBinding(0, interpolation1('', ctx.value, ' - '));
containerRefreshStart(1);
ΔtextBinding(0, Δinterpolation1('', ctx.value, ' - '));
ΔcontainerRefreshStart(1);
{
if (ctx.showing) {
let rf0 = embeddedViewStart(0, 1, 0);
let rf0 = ΔembeddedViewStart(0, 1, 0);
if (rf0 & RenderFlags.Create) {
element(0, 'on-push-comp');
Δelement(0, 'on-push-comp');
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
},
directives: () => [OnPushComp],
@ -1294,18 +1293,18 @@ describe('change detection', () => {
constructor(public cdr: ChangeDetectorRef) {}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: NoChangesComp,
selectors: [['no-changes-comp']],
factory: () => comp = new NoChangesComp(directiveInject(ChangeDetectorRef as any)),
factory: () => comp = new NoChangesComp(ΔdirectiveInject(ChangeDetectorRef as any)),
consts: 1,
vars: 1,
template: (rf: RenderFlags, ctx: NoChangesComp) => {
if (rf & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.value));
ΔtextBinding(0, Δbind(ctx.value));
}
}
});
@ -1316,10 +1315,10 @@ describe('change detection', () => {
constructor(public cdr: ChangeDetectorRef) {}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: AppComp,
selectors: [['app-comp']],
factory: () => new AppComp(directiveInject(ChangeDetectorRef as any)),
factory: () => new AppComp(ΔdirectiveInject(ChangeDetectorRef as any)),
consts: 2,
vars: 1,
/**
@ -1328,11 +1327,11 @@ describe('change detection', () => {
*/
template: (rf: RenderFlags, ctx: AppComp) => {
if (rf & RenderFlags.Create) {
text(0);
element(1, 'no-changes-comp');
Δtext(0);
Δelement(1, 'no-changes-comp');
}
if (rf & RenderFlags.Update) {
textBinding(0, interpolation1('', ctx.value, ' - '));
ΔtextBinding(0, Δinterpolation1('', ctx.value, ' - '));
}
},
directives: () => [NoChangesComp]
@ -1379,10 +1378,10 @@ describe('change detection', () => {
constructor(public cdr: ChangeDetectorRef) {}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: EmbeddedViewApp,
selectors: [['embedded-view-app']],
factory: () => new EmbeddedViewApp(directiveInject(ChangeDetectorRef as any)),
factory: () => new EmbeddedViewApp(ΔdirectiveInject(ChangeDetectorRef as any)),
consts: 1,
vars: 0,
/**
@ -1392,23 +1391,23 @@ describe('change detection', () => {
*/
template: (rf: RenderFlags, ctx: EmbeddedViewApp) => {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
if (ctx.showing) {
let rf0 = embeddedViewStart(0, 1, 1);
let rf0 = ΔembeddedViewStart(0, 1, 1);
if (rf0 & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf0 & RenderFlags.Update) {
textBinding(0, bind(ctx.value));
ΔtextBinding(0, Δbind(ctx.value));
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
});
@ -1464,7 +1463,7 @@ describe('change detection', () => {
return 'works';
}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyComponent,
selectors: [['my-comp']],
factory: () => new MyComponent(),
@ -1472,10 +1471,10 @@ describe('change detection', () => {
vars: 1,
template: (rf: RenderFlags, ctx: MyComponent) => {
if (rf & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.value));
ΔtextBinding(0, Δbind(ctx.value));
}
}
});

397
packages/core/test/render3/common_integration_spec.ts
View File

@ -8,11 +8,10 @@
import {NgForOfContext} from '@angular/common';
import {AttributeMarker, defineComponent, element, getCurrentView, templateRefExtractor} from '../../src/render3/index';
import {bind, template, elementEnd, elementProperty, elementStart, interpolation1, interpolation2, interpolation3, interpolationV, listener, load, nextContext, text, textBinding, elementContainerStart, elementContainerEnd, reference} from '../../src/render3/instructions/all';
import {AttributeMarker, ΔdefineComponent, Δelement, ΔgetCurrentView, ΔtemplateRefExtractor} from '../../src/render3/index';
import {Δbind, ΔelementContainerEnd, ΔelementContainerStart, ΔelementEnd, ΔelementProperty, ΔelementStart, Δinterpolation1, Δinterpolation2, Δinterpolation3, ΔinterpolationV, Δlistener, Δload, ΔnextContext, Δreference, Δtemplate, Δtext, ΔtextBinding} from '../../src/render3/instructions/all';
import {RenderFlags} from '../../src/render3/interfaces/definition';
import {restoreView} from '../../src/render3/state';
import {ΔrestoreView} from '../../src/render3/state';
import {NgForOf, NgIf, NgTemplateOutlet} from './common_with_def';
import {ComponentFixture, createDirective, getDirectiveOnNode} from './render_util';
@ -23,20 +22,20 @@ describe('@angular/common integration', () => {
it('should update a loop', () => {
function liTemplate(rf: RenderFlags, ctx: NgForOfContext<string>) {
if (rf & RenderFlags.Create) {
elementStart(0, 'li');
{ text(1); }
elementEnd();
ΔelementStart(0, 'li');
{ Δtext(1); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const item = ctx.$implicit;
textBinding(1, bind(item));
ΔtextBinding(1, Δbind(item));
}
}
class MyApp {
items: string[] = ['first', 'second'];
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyApp,
factory: () => new MyApp(),
selectors: [['my-app']],
@ -47,14 +46,15 @@ describe('@angular/common integration', () => {
// </ul>
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'ul');
ΔelementStart(0, 'ul');
{
template(1, liTemplate, 2, 1, 'li', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
Δtemplate(
1, liTemplate, 2, 1, 'li', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(1, 'ngForOf', bind(ctx.items));
ΔelementProperty(1, 'ngForOf', Δbind(ctx.items));
}
},
directives: () => [NgForOf]
@ -87,20 +87,20 @@ describe('@angular/common integration', () => {
it('should support ngForOf context variables', () => {
function liTemplate(rf: RenderFlags, ctx: NgForOfContext<string>) {
if (rf & RenderFlags.Create) {
elementStart(0, 'li');
{ text(1); }
elementEnd();
ΔelementStart(0, 'li');
{ Δtext(1); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const item = ctx.$implicit;
textBinding(1, interpolation3('', ctx.index, ' of ', ctx.count, ': ', item, ''));
ΔtextBinding(1, Δinterpolation3('', ctx.index, ' of ', ctx.count, ': ', item, ''));
}
}
class MyApp {
items: string[] = ['first', 'second'];
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyApp,
factory: () => new MyApp(),
selectors: [['my-app']],
@ -112,14 +112,15 @@ describe('@angular/common integration', () => {
// </ul>
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'ul');
ΔelementStart(0, 'ul');
{
template(1, liTemplate, 2, 3, 'li', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
Δtemplate(
1, liTemplate, 2, 3, 'li', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(1, 'ngForOf', bind(ctx.items));
ΔelementProperty(1, 'ngForOf', Δbind(ctx.items));
}
},
@ -142,7 +143,7 @@ describe('@angular/common integration', () => {
const Dir = createDirective('dir');
class Comp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
selectors: [['comp']],
factory: () => new Comp(),
@ -150,9 +151,9 @@ describe('@angular/common integration', () => {
vars: 0,
template: (rf: RenderFlags, cmp: Comp) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'div', ['dir', '']);
{ text(1, 'comp text'); }
elementEnd();
ΔelementStart(0, 'div', ['dir', '']);
{ Δtext(1, 'comp text'); }
ΔelementEnd();
// testing only
dirs.push(getDirectiveOnNode(0));
}
@ -163,7 +164,7 @@ describe('@angular/common integration', () => {
function ngForTemplate(rf: RenderFlags, ctx: NgForOfContext<string>) {
if (rf & RenderFlags.Create) {
element(0, 'comp');
Δelement(0, 'comp');
}
}
@ -171,7 +172,7 @@ describe('@angular/common integration', () => {
class MyApp {
rows: string[] = ['first', 'second'];
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyApp,
factory: () => new MyApp(),
selectors: [['my-app']],
@ -179,11 +180,11 @@ describe('@angular/common integration', () => {
vars: 1,
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
template(
Δtemplate(
0, ngForTemplate, 1, 0, 'comp', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngForOf', bind(ctx.rows));
ΔelementProperty(0, 'ngForOf', Δbind(ctx.rows));
}
},
directives: () => [NgForOf, Comp, Dir]
@ -211,13 +212,13 @@ describe('@angular/common integration', () => {
function liTemplate(rf: RenderFlags, ctx: NgForOfContext<string>) {
if (rf & RenderFlags.Create) {
elementStart(0, 'li');
{ text(1); }
elementEnd();
ΔelementStart(0, 'li');
{ Δtext(1); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const item = ctx.$implicit;
textBinding(1, interpolation1('', item, ''));
ΔtextBinding(1, Δinterpolation1('', item, ''));
}
}
@ -233,7 +234,7 @@ describe('@angular/common integration', () => {
}
}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyApp,
factory: () => new MyApp(),
selectors: [['my-app']],
@ -245,20 +246,21 @@ describe('@angular/common integration', () => {
// </ul>
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'button');
ΔelementStart(0, 'button');
{
listener('click', function() { return ctx.toggle(); });
text(1, 'Toggle List');
Δlistener('click', function() { return ctx.toggle(); });
Δtext(1, 'Toggle List');
}
elementEnd();
elementStart(2, 'ul');
ΔelementEnd();
ΔelementStart(2, 'ul');
{
template(3, liTemplate, 2, 1, 'li', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
Δtemplate(
3, liTemplate, 2, 1, 'li', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(3, 'ngForOf', bind(ctx.items));
ΔelementProperty(3, 'ngForOf', Δbind(ctx.items));
}
},
@ -300,7 +302,7 @@ describe('@angular/common integration', () => {
class MyApp {
items: any[] = [{data: ['1', '2'], value: 'first'}, {data: ['3', '4'], value: 'second'}];
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyApp,
factory: () => new MyApp(),
selectors: [['my-app']],
@ -308,14 +310,15 @@ describe('@angular/common integration', () => {
vars: 1,
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'ul');
ΔelementStart(0, 'ul');
{
template(1, liTemplate, 2, 1, 'li', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
Δtemplate(
1, liTemplate, 2, 1, 'li', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(1, 'ngForOf', bind(ctx.items));
ΔelementProperty(1, 'ngForOf', Δbind(ctx.items));
}
},
@ -325,29 +328,30 @@ describe('@angular/common integration', () => {
function liTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'li');
ΔelementStart(0, 'li');
{
template(1, spanTemplate, 2, 3, 'span', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
Δtemplate(
1, spanTemplate, 2, 3, 'span', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const row = ctx.$implicit as any;
elementProperty(1, 'ngForOf', bind(row.data));
ΔelementProperty(1, 'ngForOf', Δbind(row.data));
}
}
function spanTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
{ text(1); }
elementEnd();
ΔelementStart(0, 'span');
{ Δtext(1); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const cell = ctx.$implicit;
const row = nextContext().$implicit as any;
const app = nextContext() as any;
textBinding(1, interpolation3('', cell, ' - ', row.value, ' - ', app.items.length, ''));
const row = ΔnextContext().$implicit as any;
const app = ΔnextContext() as any;
ΔtextBinding(1, Δinterpolation3('', cell, ' - ', row.value, ' - ', app.items.length, ''));
}
}
@ -395,7 +399,7 @@ describe('@angular/common integration', () => {
onClick(value: string, name: string) { this.events.push(value, name); }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyApp,
factory: () => new MyApp(),
selectors: [['my-app']],
@ -403,10 +407,11 @@ describe('@angular/common integration', () => {
vars: 1,
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
template(0, divTemplate, 2, 1, 'div', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
Δtemplate(
0, divTemplate, 2, 1, 'div', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngForOf', bind(ctx.items));
ΔelementProperty(0, 'ngForOf', Δbind(ctx.items));
}
},
@ -416,39 +421,39 @@ describe('@angular/common integration', () => {
function divTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ template(1, pTemplate, 3, 2, 'p', [AttributeMarker.Template, 'ngFor', 'ngForOf']); }
elementEnd();
ΔelementStart(0, 'div');
{ Δtemplate(1, pTemplate, 3, 2, 'p', [AttributeMarker.Template, 'ngFor', 'ngForOf']); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const row = ctx.$implicit as any;
elementProperty(1, 'ngForOf', bind(row.data));
ΔelementProperty(1, 'ngForOf', Δbind(row.data));
}
}
function pTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
const state = getCurrentView();
elementStart(0, 'p');
const state = ΔgetCurrentView();
ΔelementStart(0, 'p');
{
elementStart(1, 'span');
ΔelementStart(1, 'span');
{
listener('click', () => {
restoreView(state);
const row = nextContext().$implicit as any;
const app = nextContext();
Δlistener('click', () => {
ΔrestoreView(state);
const row = ΔnextContext().$implicit as any;
const app = ΔnextContext();
app.onClick(row.value, app.name);
});
}
elementEnd();
text(2);
ΔelementEnd();
Δtext(2);
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const row = nextContext().$implicit as any;
const app = nextContext() as any;
textBinding(2, interpolation2('', row.value, ' - ', app.name, ''));
const row = ΔnextContext().$implicit as any;
const app = ΔnextContext() as any;
ΔtextBinding(2, Δinterpolation2('', row.value, ' - ', app.name, ''));
}
}
@ -489,7 +494,7 @@ describe('@angular/common integration', () => {
[{value: 'two', data: ['3', '4']}]
];
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyApp,
factory: () => new MyApp(),
selectors: [['my-app']],
@ -497,10 +502,11 @@ describe('@angular/common integration', () => {
vars: 1,
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
template(0, divTemplate, 2, 1, 'div', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
Δtemplate(
0, divTemplate, 2, 1, 'div', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngForOf', bind(ctx.items));
ΔelementProperty(0, 'ngForOf', Δbind(ctx.items));
}
},
@ -510,43 +516,44 @@ describe('@angular/common integration', () => {
function divTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
ΔelementStart(0, 'div');
{
template(
Δtemplate(
1, innerDivTemplate, 2, 1, 'div', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const row = ctx.$implicit as any;
elementProperty(1, 'ngForOf', bind(row));
ΔelementProperty(1, 'ngForOf', Δbind(row));
}
}
function innerDivTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
ΔelementStart(0, 'div');
{
template(1, spanTemplate, 2, 2, 'span', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
Δtemplate(
1, spanTemplate, 2, 2, 'span', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const cell = ctx.$implicit as any;
elementProperty(1, 'ngForOf', bind(cell.data));
ΔelementProperty(1, 'ngForOf', Δbind(cell.data));
}
}
function spanTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
{ text(1); }
elementEnd();
ΔelementStart(0, 'span');
{ Δtext(1); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const cell = nextContext().$implicit as any;
const app = nextContext(2) as any;
textBinding(1, interpolation2('', cell.value, ' - ', app.name, ''));
const cell = ΔnextContext().$implicit as any;
const app = ΔnextContext(2) as any;
ΔtextBinding(1, Δinterpolation2('', cell.value, ' - ', app.name, ''));
}
}
@ -662,7 +669,7 @@ describe('@angular/common integration', () => {
}
];
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyApp,
factory: () => new MyApp(),
selectors: [['my-app']],
@ -670,11 +677,11 @@ describe('@angular/common integration', () => {
vars: 1,
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
template(
Δtemplate(
0, itemTemplate0, 2, 1, 'span', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngForOf', bind(ctx.items));
ΔelementProperty(0, 'ngForOf', Δbind(ctx.items));
}
},
@ -684,147 +691,147 @@ describe('@angular/common integration', () => {
function itemTemplate0(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
ΔelementStart(0, 'span');
{
template(
Δtemplate(
1, itemTemplate1, 2, 1, 'span', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const item0 = ctx.$implicit as any;
elementProperty(1, 'ngForOf', bind(item0.data));
ΔelementProperty(1, 'ngForOf', Δbind(item0.data));
}
}
function itemTemplate1(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
ΔelementStart(0, 'span');
{
template(
Δtemplate(
1, itemTemplate2, 2, 1, 'span', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const item1 = ctx.$implicit as any;
elementProperty(1, 'ngForOf', bind(item1.data));
ΔelementProperty(1, 'ngForOf', Δbind(item1.data));
}
}
function itemTemplate2(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
ΔelementStart(0, 'span');
{
template(
Δtemplate(
1, itemTemplate3, 2, 1, 'span', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const item2 = ctx.$implicit as any;
elementProperty(1, 'ngForOf', bind(item2.data));
ΔelementProperty(1, 'ngForOf', Δbind(item2.data));
}
}
function itemTemplate3(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
ΔelementStart(0, 'span');
{
template(
Δtemplate(
1, itemTemplate4, 2, 1, 'span', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const item3 = ctx.$implicit as any;
elementProperty(1, 'ngForOf', bind(item3.data));
ΔelementProperty(1, 'ngForOf', Δbind(item3.data));
}
}
function itemTemplate4(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
ΔelementStart(0, 'span');
{
template(
Δtemplate(
1, itemTemplate5, 2, 1, 'span', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const item4 = ctx.$implicit as any;
elementProperty(1, 'ngForOf', bind(item4.data));
ΔelementProperty(1, 'ngForOf', Δbind(item4.data));
}
}
function itemTemplate5(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
ΔelementStart(0, 'span');
{
template(
Δtemplate(
1, itemTemplate6, 2, 1, 'span', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const item5 = ctx.$implicit as any;
elementProperty(1, 'ngForOf', bind(item5.data));
ΔelementProperty(1, 'ngForOf', Δbind(item5.data));
}
}
function itemTemplate6(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
ΔelementStart(0, 'span');
{
template(
Δtemplate(
1, itemTemplate7, 2, 1, 'span', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const item6 = ctx.$implicit as any;
elementProperty(1, 'ngForOf', bind(item6.data));
ΔelementProperty(1, 'ngForOf', Δbind(item6.data));
}
}
function itemTemplate7(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
ΔelementStart(0, 'span');
{
template(
Δtemplate(
1, itemTemplate8, 2, 10, 'span', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const item7 = ctx.$implicit as any;
elementProperty(1, 'ngForOf', bind(item7.data));
ΔelementProperty(1, 'ngForOf', Δbind(item7.data));
}
}
function itemTemplate8(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
{ text(1); }
elementEnd();
ΔelementStart(0, 'span');
{ Δtext(1); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const value = ctx.$implicit;
const item7 = nextContext().$implicit;
const item6 = nextContext().$implicit;
const item5 = nextContext().$implicit;
const item4 = nextContext().$implicit;
const item3 = nextContext().$implicit;
const item2 = nextContext().$implicit;
const item1 = nextContext().$implicit;
const item0 = nextContext().$implicit;
const myApp = nextContext();
textBinding(1, interpolationV([
'', value, '.', item7.value, '.', item6.value, '.', item5.value,
'.', item4.value, '.', item3.value, '.', item2.value, '.', item1.value,
'.', item0.value, '.', myApp.value, ''
]));
const item7 = ΔnextContext().$implicit;
const item6 = ΔnextContext().$implicit;
const item5 = ΔnextContext().$implicit;
const item4 = ΔnextContext().$implicit;
const item3 = ΔnextContext().$implicit;
const item2 = ΔnextContext().$implicit;
const item1 = ΔnextContext().$implicit;
const item0 = ΔnextContext().$implicit;
const myApp = ΔnextContext();
ΔtextBinding(1, ΔinterpolationV([
'', value, '.', item7.value, '.', item6.value, '.', item5.value,
'.', item4.value, '.', item3.value, '.', item2.value, '.', item1.value,
'.', item0.value, '.', myApp.value, ''
]));
}
}
@ -851,7 +858,7 @@ describe('@angular/common integration', () => {
valueOne = 'one';
valueTwo = 'two';
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyApp,
factory: () => new MyApp(),
selectors: [['my-app']],
@ -863,12 +870,12 @@ describe('@angular/common integration', () => {
*/
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
template(0, templateOne, 2, 1, 'div', [AttributeMarker.Template, 'ngIf']);
template(1, templateTwo, 2, 1, 'div', [AttributeMarker.Template, 'ngIf']);
Δtemplate(0, templateOne, 2, 1, 'div', [AttributeMarker.Template, 'ngIf']);
Δtemplate(1, templateTwo, 2, 1, 'div', [AttributeMarker.Template, 'ngIf']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngIf', bind(ctx.showing));
elementProperty(1, 'ngIf', bind(ctx.showing));
ΔelementProperty(0, 'ngIf', Δbind(ctx.showing));
ΔelementProperty(1, 'ngIf', Δbind(ctx.showing));
}
},
@ -878,25 +885,25 @@ describe('@angular/common integration', () => {
function templateOne(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ text(1); }
elementEnd();
ΔelementStart(0, 'div');
{ Δtext(1); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const myApp = nextContext();
textBinding(1, bind(myApp.valueOne));
const myApp = ΔnextContext();
ΔtextBinding(1, Δbind(myApp.valueOne));
}
}
function templateTwo(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ text(1); }
elementEnd();
ΔelementStart(0, 'div');
{ Δtext(1); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const myApp = nextContext();
textBinding(1, bind(myApp.valueTwo));
const myApp = ΔnextContext();
ΔtextBinding(1, Δbind(myApp.valueTwo));
}
}
@ -925,7 +932,7 @@ describe('@angular/common integration', () => {
innerShowing = true;
name = 'App name';
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: AppComponent,
factory: () => new AppComponent(),
selectors: [['my-app']],
@ -933,10 +940,10 @@ describe('@angular/common integration', () => {
vars: 1,
template: (rf: RenderFlags, ctx: AppComponent) => {
if (rf & RenderFlags.Create) {
template(0, divTemplate, 2, 1, 'div', [AttributeMarker.Template, 'ngIf']);
Δtemplate(0, divTemplate, 2, 1, 'div', [AttributeMarker.Template, 'ngIf']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngIf', bind(ctx.showing));
ΔelementProperty(0, 'ngIf', Δbind(ctx.showing));
}
},
@ -946,37 +953,37 @@ describe('@angular/common integration', () => {
function divTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ template(1, outerDivTemplate, 2, 1, 'div', [AttributeMarker.Template, 'ngIf']); }
elementEnd();
ΔelementStart(0, 'div');
{ Δtemplate(1, outerDivTemplate, 2, 1, 'div', [AttributeMarker.Template, 'ngIf']); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const app = nextContext();
elementProperty(1, 'ngIf', bind(app.outerShowing));
const app = ΔnextContext();
ΔelementProperty(1, 'ngIf', Δbind(app.outerShowing));
}
}
function outerDivTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ template(1, innerDivTemplate, 2, 1, 'div', [AttributeMarker.Template, 'ngIf']); }
elementEnd();
ΔelementStart(0, 'div');
{ Δtemplate(1, innerDivTemplate, 2, 1, 'div', [AttributeMarker.Template, 'ngIf']); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const app = nextContext(2);
elementProperty(1, 'ngIf', bind(app.innerShowing));
const app = ΔnextContext(2);
ΔelementProperty(1, 'ngIf', Δbind(app.innerShowing));
}
}
function innerDivTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ text(1); }
elementEnd();
ΔelementStart(0, 'div');
{ Δtext(1); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const app = nextContext(3);
textBinding(1, bind(app.name));
const app = ΔnextContext(3);
ΔtextBinding(1, Δbind(app.name));
}
}
@ -996,7 +1003,7 @@ describe('@angular/common integration', () => {
class MyApp {
showing = false;
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyApp,
factory: () => new MyApp(),
selectors: [['my-app']],
@ -1008,17 +1015,17 @@ describe('@angular/common integration', () => {
*/
template: (rf: RenderFlags, myApp: MyApp) => {
if (rf & RenderFlags.Create) {
template(0, (rf1: RenderFlags) => {
Δtemplate(0, (rf1: RenderFlags) => {
if (rf1 & RenderFlags.Create) {
text(0, 'from tpl');
Δtext(0, 'from tpl');
}
}, 1, 0, 'ng-template', undefined, ['tpl', ''], templateRefExtractor);
template(
}, 1, 0, 'ng-template', undefined, ['tpl', ''], ΔtemplateRefExtractor);
Δtemplate(
2, null, 0, 0, 'ng-template', [AttributeMarker.Bindings, 'ngTemplateOutlet']);
}
if (rf & RenderFlags.Update) {
const tplRef = load(1);
elementProperty(2, 'ngTemplateOutlet', bind(myApp.showing ? tplRef : null));
const tplRef = Δload(1);
ΔelementProperty(2, 'ngTemplateOutlet', Δbind(myApp.showing ? tplRef : null));
}
},
directives: () => [NgTemplateOutlet]
@ -1040,7 +1047,7 @@ describe('@angular/common integration', () => {
it('should allow usage on ng-container', () => {
class MyApp {
showing = false;
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyApp,
factory: () => new MyApp(),
selectors: [['my-app']],
@ -1052,17 +1059,17 @@ describe('@angular/common integration', () => {
*/
template: (rf: RenderFlags, myApp: MyApp) => {
if (rf & RenderFlags.Create) {
template(0, (rf1: RenderFlags) => {
Δtemplate(0, (rf1: RenderFlags) => {
if (rf1 & RenderFlags.Create) {
text(0, 'from tpl');
Δtext(0, 'from tpl');
}
}, 1, 0, 'ng-template', undefined, ['tpl', ''], templateRefExtractor);
elementContainerStart(2, [AttributeMarker.Bindings, 'ngTemplateOutlet']);
elementContainerEnd();
}, 1, 0, 'ng-template', undefined, ['tpl', ''], ΔtemplateRefExtractor);
ΔelementContainerStart(2, [AttributeMarker.Bindings, 'ngTemplateOutlet']);
ΔelementContainerEnd();
}
if (rf & RenderFlags.Update) {
const tplRef = reference(1);
elementProperty(2, 'ngTemplateOutlet', bind(myApp.showing ? tplRef : null));
const tplRef = Δreference(1);
ΔelementProperty(2, 'ngTemplateOutlet', Δbind(myApp.showing ? tplRef : null));
}
},
directives: () => [NgTemplateOutlet]

18
packages/core/test/render3/common_with_def.ts
View File

@ -9,18 +9,18 @@
import {NgForOf as NgForOfDef, NgIf as NgIfDef, NgTemplateOutlet as NgTemplateOutletDef} from '@angular/common';
import {IterableDiffers, TemplateRef, ViewContainerRef} from '@angular/core';
import {DirectiveType, NgOnChangesFeature, defineDirective, directiveInject} from '../../src/render3/index';
import {DirectiveType, ΔNgOnChangesFeature, ΔdefineDirective, ΔdirectiveInject} from '../../src/render3/index';
export const NgForOf: DirectiveType<NgForOfDef<any>> = NgForOfDef as any;
export const NgIf: DirectiveType<NgIfDef> = NgIfDef as any;
export const NgTemplateOutlet: DirectiveType<NgTemplateOutletDef> = NgTemplateOutletDef as any;
NgForOf.ngDirectiveDef = defineDirective({
NgForOf.ngDirectiveDef = ΔdefineDirective({
type: NgForOfDef,
selectors: [['', 'ngForOf', '']],
factory: () => new NgForOfDef(
directiveInject(ViewContainerRef as any), directiveInject(TemplateRef as any),
directiveInject(IterableDiffers)),
ΔdirectiveInject(ViewContainerRef as any), ΔdirectiveInject(TemplateRef as any),
ΔdirectiveInject(IterableDiffers)),
inputs: {
ngForOf: 'ngForOf',
ngForTrackBy: 'ngForTrackBy',
@ -28,19 +28,19 @@ NgForOf.ngDirectiveDef = defineDirective({
}
});
(NgIf as any).ngDirectiveDef = defineDirective({
(NgIf as any).ngDirectiveDef = ΔdefineDirective({
type: NgIfDef,
selectors: [['', 'ngIf', '']],
factory: () => new NgIfDef(
directiveInject(ViewContainerRef as any), directiveInject(TemplateRef as any)),
ΔdirectiveInject(ViewContainerRef as any), ΔdirectiveInject(TemplateRef as any)),
inputs: {ngIf: 'ngIf', ngIfThen: 'ngIfThen', ngIfElse: 'ngIfElse'}
});
(NgTemplateOutlet as any).ngDirectiveDef = defineDirective({
(NgTemplateOutlet as any).ngDirectiveDef = ΔdefineDirective({
type: NgTemplateOutletDef,
selectors: [['', 'ngTemplateOutlet', '']],
factory: () => new NgTemplateOutletDef(directiveInject(ViewContainerRef as any)),
features: [NgOnChangesFeature()],
factory: () => new NgTemplateOutletDef(ΔdirectiveInject(ViewContainerRef as any)),
features: [ΔNgOnChangesFeature()],
inputs:
{ngTemplateOutlet: 'ngTemplateOutlet', ngTemplateOutletContext: 'ngTemplateOutletContext'}
});

8
packages/core/test/render3/component_ref_spec.ts
View File

@ -10,7 +10,7 @@ import {Injector, NgModuleRef, ViewEncapsulation} from '../../src/core';
import {ComponentFactory} from '../../src/linker/component_factory';
import {RendererFactory2} from '../../src/render/api';
import {injectComponentFactoryResolver} from '../../src/render3/component_ref';
import {defineComponent} from '../../src/render3/index';
import {ΔdefineComponent} from '../../src/render3/index';
import {domRendererFactory3} from '../../src/render3/interfaces/renderer';
import {Sanitizer} from '../../src/sanitization/security';
@ -20,7 +20,7 @@ describe('ComponentFactory', () => {
describe('constructor()', () => {
it('should correctly populate default properties', () => {
class TestComponent {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: TestComponent,
selectors: [['test', 'foo'], ['bar']],
consts: 0,
@ -41,7 +41,7 @@ describe('ComponentFactory', () => {
it('should correctly populate defined properties', () => {
class TestComponent {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: TestComponent,
encapsulation: ViewEncapsulation.None,
selectors: [['test', 'foo'], ['bar']],
@ -89,7 +89,7 @@ describe('ComponentFactory', () => {
createRenderer3Spy = spyOn(domRendererFactory3, 'createRenderer').and.callThrough();
class TestComponent {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: TestComponent,
encapsulation: ViewEncapsulation.None,
selectors: [['test']],

213
packages/core/test/render3/component_spec.ts
View File

@ -6,16 +6,15 @@
* found in the LICENSE file at https://angular.io/license
*/
import {InjectionToken, ViewEncapsulation, defineInjectable, defineInjector} from '../../src/core';
import {AttributeMarker, ComponentFactory, LifecycleHooksFeature, defineComponent, directiveInject, markDirty, template, getRenderedText, ProvidersFeature} from '../../src/render3/index';
import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, nextContext, text, textBinding, tick} from '../../src/render3/instructions/all';
import {InjectionToken, ViewEncapsulation, ΔdefineInjectable, ΔdefineInjector} from '../../src/core';
import {createInjector} from '../../src/di/r3_injector';
import {AttributeMarker, ComponentFactory, LifecycleHooksFeature, getRenderedText, markDirty, ΔProvidersFeature, ΔdefineComponent, ΔdirectiveInject, Δtemplate} from '../../src/render3/index';
import {tick, Δbind, Δcontainer, ΔcontainerRefreshEnd, ΔcontainerRefreshStart, Δelement, ΔelementEnd, ΔelementProperty, ΔelementStart, ΔembeddedViewEnd, ΔembeddedViewStart, ΔnextContext, Δtext, ΔtextBinding} from '../../src/render3/instructions/all';
import {ComponentDef, RenderFlags} from '../../src/render3/interfaces/definition';
import {NgIf} from './common_with_def';
import {getRendererFactory2} from './imported_renderer2';
import {ComponentFixture, MockRendererFactory, containerEl, createComponent, renderComponent, renderToHtml, requestAnimationFrame, toHtml} from './render_util';
import {createInjector} from '../../src/di/r3_injector';
describe('component', () => {
class CounterComponent {
@ -23,7 +22,7 @@ describe('component', () => {
increment() { this.count++; }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: CounterComponent,
encapsulation: ViewEncapsulation.None,
selectors: [['counter']],
@ -31,10 +30,10 @@ describe('component', () => {
vars: 1,
template: function(rf: RenderFlags, ctx: CounterComponent) {
if (rf & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.count));
ΔtextBinding(0, Δbind(ctx.count));
}
},
factory: () => new CounterComponent,
@ -66,30 +65,30 @@ describe('component', () => {
class MyService {
constructor(public value: string) {}
static ngInjectableDef =
defineInjectable({providedIn: 'root', factory: () => new MyService('no-injector')});
ΔdefineInjectable({providedIn: 'root', factory: () => new MyService('no-injector')});
}
class MyComponent {
constructor(public myService: MyService) {}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyComponent,
encapsulation: ViewEncapsulation.None,
selectors: [['my-component']],
factory: () => new MyComponent(directiveInject(MyService)),
factory: () => new MyComponent(ΔdirectiveInject(MyService)),
consts: 1,
vars: 1,
template: function(fs: RenderFlags, ctx: MyComponent) {
if (fs & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (fs & RenderFlags.Update) {
textBinding(0, bind(ctx.myService.value));
ΔtextBinding(0, Δbind(ctx.myService.value));
}
}
});
}
class MyModule {
static ngInjectorDef = defineInjector({
static ngInjectorDef = ΔdefineInjector({
factory: () => new MyModule(),
providers: [{provide: MyService, useValue: new MyService('injector')}]
});
@ -114,7 +113,7 @@ describe('component', () => {
// @Input
name = '';
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
selectors: [['comp']],
factory: () => new Comp(),
@ -122,10 +121,10 @@ describe('component', () => {
vars: 1,
template: (rf: RenderFlags, ctx: Comp) => {
if (rf & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.name));
ΔtextBinding(0, Δbind(ctx.name));
}
},
inputs: {name: 'name'}
@ -136,10 +135,10 @@ describe('component', () => {
// with a very large view
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
element(4097, 'comp');
Δelement(4097, 'comp');
}
if (rf & RenderFlags.Update) {
elementProperty(4097, 'name', bind(ctx.name));
ΔelementProperty(4097, 'name', Δbind(ctx.name));
}
}, 4098, 1, [Comp]);
@ -158,16 +157,16 @@ it('should not invoke renderer destroy method for embedded views', () => {
function MyComponent_div_Template_2(rf: any, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
text(1, 'Child view');
elementEnd();
ΔelementStart(0, 'div');
Δtext(1, 'Child view');
ΔelementEnd();
}
}
class Comp {
visible = true;
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
selectors: [['comp']],
consts: 3,
@ -183,13 +182,13 @@ it('should not invoke renderer destroy method for embedded views', () => {
*/
template: function(rf: RenderFlags, ctx: Comp) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
text(1, 'Root view');
elementEnd();
template(2, MyComponent_div_Template_2, 2, 0, 'div', [AttributeMarker.Template, 'ngIf']);
ΔelementStart(0, 'div');
Δtext(1, 'Root view');
ΔelementEnd();
Δtemplate(2, MyComponent_div_Template_2, 2, 0, 'div', [AttributeMarker.Template, 'ngIf']);
}
if (rf & RenderFlags.Update) {
elementProperty(2, 'ngIf', bind(ctx.visible));
ΔelementProperty(2, 'ngIf', Δbind(ctx.visible));
}
}
});
@ -216,32 +215,32 @@ describe('component with a container', () => {
function showItems(rf: RenderFlags, ctx: {items: string[]}) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
for (const item of ctx.items) {
const rf0 = embeddedViewStart(0, 1, 1);
const rf0 = ΔembeddedViewStart(0, 1, 1);
{
if (rf0 & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf0 & RenderFlags.Update) {
textBinding(0, bind(item));
ΔtextBinding(0, Δbind(item));
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
class WrapperComponent {
// TODO(issue/24571): remove '!'.
items !: string[];
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: WrapperComponent,
encapsulation: ViewEncapsulation.None,
selectors: [['wrapper']],
@ -249,16 +248,16 @@ describe('component with a container', () => {
vars: 0,
template: function ChildComponentTemplate(rf: RenderFlags, ctx: {items: string[]}) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
const rf0 = embeddedViewStart(0, 1, 0);
const rf0 = ΔembeddedViewStart(0, 1, 0);
{ showItems(rf0, {items: ctx.items}); }
embeddedViewEnd();
ΔembeddedViewEnd();
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
},
factory: () => new WrapperComponent,
@ -268,10 +267,10 @@ describe('component with a container', () => {
function template(rf: RenderFlags, ctx: {items: string[]}) {
if (rf & RenderFlags.Create) {
element(0, 'wrapper');
Δelement(0, 'wrapper');
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'items', bind(ctx.items));
ΔelementProperty(0, 'items', Δbind(ctx.items));
}
}
@ -291,7 +290,7 @@ describe('component with a container', () => {
// root)
describe('encapsulation', () => {
class WrapperComponent {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: WrapperComponent,
encapsulation: ViewEncapsulation.None,
selectors: [['wrapper']],
@ -299,7 +298,7 @@ describe('encapsulation', () => {
vars: 0,
template: function(rf: RenderFlags, ctx: WrapperComponent) {
if (rf & RenderFlags.Create) {
element(0, 'encapsulated');
Δelement(0, 'encapsulated');
}
},
factory: () => new WrapperComponent,
@ -308,15 +307,15 @@ describe('encapsulation', () => {
}
class EncapsulatedComponent {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: EncapsulatedComponent,
selectors: [['encapsulated']],
consts: 2,
vars: 0,
template: function(rf: RenderFlags, ctx: EncapsulatedComponent) {
if (rf & RenderFlags.Create) {
text(0, 'foo');
element(1, 'leaf');
Δtext(0, 'foo');
Δelement(1, 'leaf');
}
},
factory: () => new EncapsulatedComponent,
@ -328,7 +327,7 @@ describe('encapsulation', () => {
}
class LeafComponent {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: LeafComponent,
encapsulation: ViewEncapsulation.None,
selectors: [['leaf']],
@ -336,9 +335,9 @@ describe('encapsulation', () => {
vars: 0,
template: function(rf: RenderFlags, ctx: LeafComponent) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
{ text(1, 'bar'); }
elementEnd();
ΔelementStart(0, 'span');
{ Δtext(1, 'bar'); }
ΔelementEnd();
}
},
factory: () => new LeafComponent,
@ -361,14 +360,14 @@ describe('encapsulation', () => {
it('should encapsulate host and children with different attributes', () => {
class WrapperComponentWith {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: WrapperComponentWith,
selectors: [['wrapper']],
consts: 1,
vars: 0,
template: function(rf: RenderFlags, ctx: WrapperComponentWith) {
if (rf & RenderFlags.Create) {
element(0, 'leaf');
Δelement(0, 'leaf');
}
},
factory: () => new WrapperComponentWith,
@ -380,16 +379,16 @@ describe('encapsulation', () => {
}
class LeafComponentwith {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: LeafComponentwith,
selectors: [['leaf']],
consts: 2,
vars: 0,
template: function(rf: RenderFlags, ctx: LeafComponentwith) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
{ text(1, 'bar'); }
elementEnd();
ΔelementStart(0, 'span');
{ Δtext(1, 'bar'); }
ΔelementEnd();
}
},
factory: () => new LeafComponentwith,
@ -439,7 +438,7 @@ describe('recursive components', () => {
ngOnDestroy() { events.push('destroy' + this.data.value); }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: TreeComponent,
encapsulation: ViewEncapsulation.None,
selectors: [['tree-comp']],
@ -448,40 +447,40 @@ describe('recursive components', () => {
vars: 1,
template: (rf: RenderFlags, ctx: TreeComponent) => {
if (rf & RenderFlags.Create) {
text(0);
container(1);
container(2);
Δtext(0);
Δcontainer(1);
Δcontainer(2);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.data.value));
containerRefreshStart(1);
ΔtextBinding(0, Δbind(ctx.data.value));
ΔcontainerRefreshStart(1);
{
if (ctx.data.left != null) {
let rf0 = embeddedViewStart(0, 1, 1);
let rf0 = ΔembeddedViewStart(0, 1, 1);
if (rf0 & RenderFlags.Create) {
element(0, 'tree-comp');
Δelement(0, 'tree-comp');
}
if (rf0 & RenderFlags.Update) {
elementProperty(0, 'data', bind(ctx.data.left));
ΔelementProperty(0, 'data', Δbind(ctx.data.left));
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
containerRefreshStart(2);
ΔcontainerRefreshEnd();
ΔcontainerRefreshStart(2);
{
if (ctx.data.right != null) {
let rf0 = embeddedViewStart(0, 1, 1);
let rf0 = ΔembeddedViewStart(0, 1, 1);
if (rf0 & RenderFlags.Create) {
element(0, 'tree-comp');
Δelement(0, 'tree-comp');
}
if (rf0 & RenderFlags.Update) {
elementProperty(0, 'data', bind(ctx.data.right));
ΔelementProperty(0, 'data', Δbind(ctx.data.right));
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
},
inputs: {data: 'data'}
@ -503,7 +502,7 @@ describe('recursive components', () => {
ngOnDestroy() { events.push('destroy' + this.data.value); }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: NgIfTree,
encapsulation: ViewEncapsulation.None,
selectors: [['ng-if-tree']],
@ -513,18 +512,18 @@ describe('recursive components', () => {
template: (rf: RenderFlags, ctx: NgIfTree) => {
if (rf & RenderFlags.Create) {
text(0);
template(
Δtext(0);
Δtemplate(
1, IfTemplate, 1, 1, 'ng-if-tree',
[AttributeMarker.Bindings, 'data', AttributeMarker.Template, 'ngIf']);
template(
Δtemplate(
2, IfTemplate2, 1, 1, 'ng-if-tree',
[AttributeMarker.Bindings, 'data', AttributeMarker.Template, 'ngIf']);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.data.value));
elementProperty(1, 'ngIf', bind(ctx.data.left));
elementProperty(2, 'ngIf', bind(ctx.data.right));
ΔtextBinding(0, Δbind(ctx.data.value));
ΔelementProperty(1, 'ngIf', Δbind(ctx.data.left));
ΔelementProperty(2, 'ngIf', Δbind(ctx.data.right));
}
},
@ -534,23 +533,23 @@ describe('recursive components', () => {
function IfTemplate(rf: RenderFlags, left: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'ng-if-tree');
elementEnd();
ΔelementStart(0, 'ng-if-tree');
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const parent = nextContext();
elementProperty(0, 'data', bind(parent.data.left));
const parent = ΔnextContext();
ΔelementProperty(0, 'data', Δbind(parent.data.left));
}
}
function IfTemplate2(rf: RenderFlags, right: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'ng-if-tree');
elementEnd();
ΔelementStart(0, 'ng-if-tree');
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const parent = nextContext();
elementProperty(0, 'data', bind(parent.data.right));
const parent = ΔnextContext();
ΔelementProperty(0, 'data', Δbind(parent.data.right));
}
}
@ -583,19 +582,19 @@ describe('recursive components', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
if (!ctx.skipContent) {
const rf0 = embeddedViewStart(0, 1, 0);
const rf0 = ΔembeddedViewStart(0, 1, 0);
if (rf0 & RenderFlags.Create) {
elementStart(0, 'tree-comp');
elementEnd();
ΔelementStart(0, 'tree-comp');
ΔelementEnd();
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}, 1, 0, [TreeComponent]);
@ -617,19 +616,19 @@ describe('recursive components', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
if (!ctx.skipContent) {
const rf0 = embeddedViewStart(0, 1, 0);
const rf0 = ΔembeddedViewStart(0, 1, 0);
if (rf0 & RenderFlags.Create) {
elementStart(0, 'ng-if-tree');
elementEnd();
ΔelementStart(0, 'ng-if-tree');
ΔelementEnd();
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}, 1, 0, [NgIfTree]);
@ -648,7 +647,7 @@ describe('recursive components', () => {
class TestInputsComponent {
// TODO(issue/24571): remove '!'.
minifiedName !: string;
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: TestInputsComponent,
encapsulation: ViewEncapsulation.None,
selectors: [['test-inputs']],
@ -677,7 +676,7 @@ describe('view destruction', () => {
let wasOnDestroyCalled = false;
class ComponentWithOnDestroy {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
selectors: [['comp-with-destroy']],
type: ComponentWithOnDestroy,
consts: 0,
@ -695,7 +694,7 @@ describe('view destruction', () => {
// when the view tree is torn down following the destruction of that root view.
const ComponentWithChildOnDestroy = createComponent('test-app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
element(0, 'comp-with-destroy');
Δelement(0, 'comp-with-destroy');
}
}, 1, 0, [ComponentWithOnDestroy], [], null, [], []);

1081
packages/core/test/render3/content_spec.ts
View File

File diff suppressed because it is too large Load Diff

450
packages/core/test/render3/control_flow_spec.ts
View File

@ -6,8 +6,8 @@
* found in the LICENSE file at https://angular.io/license
*/
import {defineComponent} from '../../src/render3/definition';
import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, text, textBinding} from '../../src/render3/instructions/all';
import {ΔdefineComponent} from '../../src/render3/definition';
import {Δbind, Δcontainer, ΔcontainerRefreshEnd, ΔcontainerRefreshStart, Δelement, ΔelementEnd, ΔelementStart, ΔembeddedViewEnd, ΔembeddedViewStart, Δtext, ΔtextBinding} from '../../src/render3/instructions/all';
import {RenderFlags} from '../../src/render3/interfaces/definition';
import {ComponentFixture, TemplateFixture, createComponent} from './render_util';
@ -16,29 +16,29 @@ describe('JS control flow', () => {
it('should work with if block', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ container(1); }
elementEnd();
ΔelementStart(0, 'div');
{ Δcontainer(1); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
containerRefreshStart(1);
ΔcontainerRefreshStart(1);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(1, 2, 1);
let rf1 = ΔembeddedViewStart(1, 2, 1);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'span');
{ text(1); }
elementEnd();
ΔelementStart(0, 'span');
{ Δtext(1); }
ΔelementEnd();
}
if (rf1 & RenderFlags.Update) {
textBinding(1, bind(ctx.message));
ΔtextBinding(1, Δbind(ctx.message));
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}, 2);
@ -72,41 +72,41 @@ describe('JS control flow', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ container(1); }
elementEnd();
ΔelementStart(0, 'div');
{ Δcontainer(1); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
containerRefreshStart(1);
ΔcontainerRefreshStart(1);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(1, 2, 0);
let rf1 = ΔembeddedViewStart(1, 2, 0);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'span');
{ container(1); }
elementEnd();
ΔelementStart(0, 'span');
{ Δcontainer(1); }
ΔelementEnd();
}
if (rf1 & RenderFlags.Update) {
containerRefreshStart(1);
ΔcontainerRefreshStart(1);
{
if (ctx.condition2) {
let rf2 = embeddedViewStart(2, 1, 0);
let rf2 = ΔembeddedViewStart(2, 1, 0);
{
if (rf2 & RenderFlags.Create) {
text(0, 'Hello');
Δtext(0, 'Hello');
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}, 2);
@ -164,51 +164,51 @@ describe('JS control flow', () => {
* % }
* % }
*/
function createTemplate() { container(0); }
function createTemplate() { Δcontainer(0); }
function updateTemplate() {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(1, 2, 0);
let rf1 = ΔembeddedViewStart(1, 2, 0);
{
if (rf1 & RenderFlags.Create) {
{ container(0); }
{ container(1); }
{ Δcontainer(0); }
{ Δcontainer(1); }
}
if (rf1 & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
if (ctx.condition2) {
let rf2 = embeddedViewStart(2, 1, 0);
let rf2 = ΔembeddedViewStart(2, 1, 0);
{
if (rf2 & RenderFlags.Create) {
text(0, 'Hello');
Δtext(0, 'Hello');
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
containerRefreshStart(1);
ΔcontainerRefreshEnd();
ΔcontainerRefreshStart(1);
{
if (ctx.condition3) {
let rf2 = embeddedViewStart(2, 1, 0);
let rf2 = ΔembeddedViewStart(2, 1, 0);
{
if (rf2 & RenderFlags.Create) {
text(0, 'World');
Δtext(0, 'World');
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
const fixture = new TemplateFixture(createTemplate, updateTemplate, 1);
@ -231,32 +231,32 @@ describe('JS control flow', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
if (ctx.condition1) {
const rf1 = embeddedViewStart(1, 1, 0);
const rf1 = ΔembeddedViewStart(1, 1, 0);
if (rf1 & RenderFlags.Create) {
text(0, '1');
Δtext(0, '1');
}
embeddedViewEnd();
ΔembeddedViewEnd();
} // can't have ; here due linting rules
if (ctx.condition2) {
const rf2 = embeddedViewStart(2, 1, 0);
const rf2 = ΔembeddedViewStart(2, 1, 0);
if (rf2 & RenderFlags.Create) {
text(0, '2');
Δtext(0, '2');
}
embeddedViewEnd();
ΔembeddedViewEnd();
} // can't have ; here due linting rules
if (ctx.condition3) {
const rf3 = embeddedViewStart(3, 1, 0);
const rf3 = ΔembeddedViewStart(3, 1, 0);
if (rf3 & RenderFlags.Create) {
text(0, '3');
Δtext(0, '3');
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}, 1);
@ -275,40 +275,40 @@ describe('JS control flow', () => {
it('should work with containers with views as parents', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ text(1, 'hello'); }
elementEnd();
container(2);
ΔelementStart(0, 'div');
{ Δtext(1, 'hello'); }
ΔelementEnd();
Δcontainer(2);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(2);
ΔcontainerRefreshStart(2);
{
if (ctx.condition1) {
let rf0 = embeddedViewStart(0, 1, 0);
let rf0 = ΔembeddedViewStart(0, 1, 0);
{
if (rf0 & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf0 & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
if (ctx.condition2) {
let rf0 = embeddedViewStart(0, 1, 0);
let rf0 = ΔembeddedViewStart(0, 1, 0);
{
if (rf0 & RenderFlags.Create) {
text(0, 'world');
Δtext(0, 'world');
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}, 3);
@ -328,29 +328,29 @@ describe('JS control flow', () => {
let data: string[] = ['a', 'b', 'c'];
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'ul');
{ container(1); }
elementEnd();
ΔelementStart(0, 'ul');
{ Δcontainer(1); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
containerRefreshStart(1);
ΔcontainerRefreshStart(1);
{
for (let i = 0; i < data.length; i++) {
let rf1 = embeddedViewStart(1, 2, 1);
let rf1 = ΔembeddedViewStart(1, 2, 1);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'li');
{ text(1); }
elementEnd();
ΔelementStart(0, 'li');
{ Δtext(1); }
ΔelementEnd();
}
if (rf1 & RenderFlags.Update) {
textBinding(1, bind(data[i]));
ΔtextBinding(1, Δbind(data[i]));
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}, 2);
@ -384,42 +384,42 @@ describe('JS control flow', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'ul');
{ container(1); }
elementEnd();
ΔelementStart(0, 'ul');
{ Δcontainer(1); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
containerRefreshStart(1);
ΔcontainerRefreshStart(1);
{
for (let i = 0; i < data[0].length; i++) {
let rf1 = embeddedViewStart(1, 2, 0);
let rf1 = ΔembeddedViewStart(1, 2, 0);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'li');
{ container(1); }
elementEnd();
ΔelementStart(0, 'li');
{ Δcontainer(1); }
ΔelementEnd();
}
if (rf1 & RenderFlags.Update) {
containerRefreshStart(1);
ΔcontainerRefreshStart(1);
{
data[1].forEach((value: string, ind: number) => {
let rf2 = embeddedViewStart(2, 1, 1);
let rf2 = ΔembeddedViewStart(2, 1, 1);
if (rf2 & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf2 & RenderFlags.Update) {
textBinding(0, bind(data[0][i] + value));
ΔtextBinding(0, Δbind(data[0][i] + value));
}
embeddedViewEnd();
ΔembeddedViewEnd();
});
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}, 2);
@ -453,49 +453,49 @@ describe('JS control flow', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
ΔelementStart(0, 'div');
{
text(1, 'Before');
container(2);
text(3, 'After');
Δtext(1, 'Before');
Δcontainer(2);
Δtext(3, 'After');
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
containerRefreshStart(2);
ΔcontainerRefreshStart(2);
{
for (let i = 0; i < cafes.length; i++) {
let rf1 = embeddedViewStart(1, 4, 1);
let rf1 = ΔembeddedViewStart(1, 4, 1);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'h2');
{ text(1); }
elementEnd();
container(2);
text(3, '-');
ΔelementStart(0, 'h2');
{ Δtext(1); }
ΔelementEnd();
Δcontainer(2);
Δtext(3, '-');
}
if (rf1 & RenderFlags.Update) {
textBinding(1, bind(cafes[i].name));
containerRefreshStart(2);
ΔtextBinding(1, Δbind(cafes[i].name));
ΔcontainerRefreshStart(2);
{
for (let j = 0; j < cafes[i].entrees.length; j++) {
let rf2 = embeddedViewStart(2, 1, 1);
let rf2 = ΔembeddedViewStart(2, 1, 1);
if (rf2 & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf2 & RenderFlags.Update) {
textBinding(0, bind(cafes[i].entrees[j]));
ΔtextBinding(0, Δbind(cafes[i].entrees[j]));
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}, 4);
@ -548,68 +548,68 @@ describe('JS control flow', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
ΔelementStart(0, 'div');
{
text(1, 'Before');
container(2);
text(3, 'After');
Δtext(1, 'Before');
Δcontainer(2);
Δtext(3, 'After');
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
containerRefreshStart(2);
ΔcontainerRefreshStart(2);
{
for (let i = 0; i < cafes.length; i++) {
let rf1 = embeddedViewStart(1, 4, 1);
let rf1 = ΔembeddedViewStart(1, 4, 1);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'h2');
{ text(1); }
elementEnd();
container(2);
text(3, '-');
ΔelementStart(0, 'h2');
{ Δtext(1); }
ΔelementEnd();
Δcontainer(2);
Δtext(3, '-');
}
if (rf1 & RenderFlags.Update) {
textBinding(1, bind(cafes[i].name));
containerRefreshStart(2);
ΔtextBinding(1, Δbind(cafes[i].name));
ΔcontainerRefreshStart(2);
{
for (let j = 0; j < cafes[i].entrees.length; j++) {
let rf1 = embeddedViewStart(1, 3, 1);
let rf1 = ΔembeddedViewStart(1, 3, 1);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'h3');
{ text(1); }
elementEnd();
container(2);
ΔelementStart(0, 'h3');
{ Δtext(1); }
ΔelementEnd();
Δcontainer(2);
}
if (rf1 & RenderFlags.Update) {
textBinding(1, bind(cafes[i].entrees[j].name));
containerRefreshStart(2);
ΔtextBinding(1, Δbind(cafes[i].entrees[j].name));
ΔcontainerRefreshStart(2);
{
for (let k = 0; k < cafes[i].entrees[j].foods.length; k++) {
let rf2 = embeddedViewStart(1, 1, 1);
let rf2 = ΔembeddedViewStart(1, 1, 1);
if (rf2 & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf2 & RenderFlags.Update) {
textBinding(0, bind(cafes[i].entrees[j].foods[k]));
ΔtextBinding(0, Δbind(cafes[i].entrees[j].foods[k]));
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}, 4);
@ -632,36 +632,36 @@ describe('JS control flow', () => {
it('should work with if/else blocks', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ container(1); }
elementEnd();
ΔelementStart(0, 'div');
{ Δcontainer(1); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
containerRefreshStart(1);
ΔcontainerRefreshStart(1);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(1, 2, 0);
let rf1 = ΔembeddedViewStart(1, 2, 0);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'span');
{ text(1, 'Hello'); }
elementEnd();
ΔelementStart(0, 'span');
{ Δtext(1, 'Hello'); }
ΔelementEnd();
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
} else {
let rf2 = embeddedViewStart(2, 2, 0);
let rf2 = ΔembeddedViewStart(2, 2, 0);
{
if (rf2) {
elementStart(0, 'div');
{ text(1, 'Goodbye'); }
elementEnd();
ΔelementStart(0, 'div');
{ Δtext(1, 'Goodbye'); }
ΔelementEnd();
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}, 2);
@ -685,7 +685,7 @@ describe('JS control flow', () => {
// Intentionally duplicating the templates in test below so we are
// testing the behavior on firstTemplatePass for each of these tests
class Comp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
selectors: [['comp']],
consts: 0,
@ -702,7 +702,7 @@ describe('JS control flow', () => {
condition = true;
condition2 = true;
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: App,
selectors: [['app']],
factory: () => new App(),
@ -710,33 +710,33 @@ describe('JS control flow', () => {
vars: 0,
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'div');
container(1);
container(2);
Δelement(0, 'div');
Δcontainer(1);
Δcontainer(2);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(1);
ΔcontainerRefreshStart(1);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 1, 0);
let rf1 = ΔembeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
Δelement(0, 'comp');
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
containerRefreshStart(2);
ΔcontainerRefreshEnd();
ΔcontainerRefreshStart(2);
{
if (ctx.condition2) {
let rf1 = embeddedViewStart(0, 1, 0);
let rf1 = ΔembeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
Δelement(0, 'comp');
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
},
directives: () => [Comp]
@ -753,7 +753,7 @@ describe('JS control flow', () => {
// Intentionally duplicating the templates from above so we are
// testing the behavior on firstTemplatePass for each of these tests
class Comp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
selectors: [['comp']],
consts: 0,
@ -770,7 +770,7 @@ describe('JS control flow', () => {
condition = false;
condition2 = true;
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: App,
selectors: [['app']],
factory: () => new App(),
@ -778,33 +778,33 @@ describe('JS control flow', () => {
vars: 0,
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'div');
container(1);
container(2);
Δelement(0, 'div');
Δcontainer(1);
Δcontainer(2);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(1);
ΔcontainerRefreshStart(1);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 1, 0);
let rf1 = ΔembeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
Δelement(0, 'comp');
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
containerRefreshStart(2);
ΔcontainerRefreshEnd();
ΔcontainerRefreshStart(2);
{
if (ctx.condition2) {
let rf1 = embeddedViewStart(0, 1, 0);
let rf1 = ΔembeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
Δelement(0, 'comp');
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
},
directives: () => [Comp]
@ -835,35 +835,35 @@ describe('JS for loop', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ container(1); }
elementEnd();
ΔelementStart(0, 'div');
{ Δcontainer(1); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
containerRefreshStart(1);
ΔcontainerRefreshStart(1);
{
for (let i = 0; i < config.data1.length; i++) {
let rf2 = embeddedViewStart(1, 1, 1);
let rf2 = ΔembeddedViewStart(1, 1, 1);
if (rf2 & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf2 & RenderFlags.Update) {
textBinding(0, bind(config.data1[i]));
ΔtextBinding(0, Δbind(config.data1[i]));
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
for (let j = 0; j < config.data2.length; j++) {
let rf2 = embeddedViewStart(1, 1, 1);
let rf2 = ΔembeddedViewStart(1, 1, 1);
if (rf2 & RenderFlags.Create) {
text(0);
Δtext(0);
}
if (rf2 & RenderFlags.Update) {
textBinding(0, bind(config.data2[j]));
ΔtextBinding(0, Δbind(config.data2[j]));
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}, 2);
@ -891,41 +891,41 @@ describe('function calls', () => {
function spanify(rf: RenderFlags, ctx: {message: string | null}) {
const message = ctx.message;
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
{ text(1); }
elementEnd();
ΔelementStart(0, 'span');
{ Δtext(1); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
textBinding(1, bind(message));
ΔtextBinding(1, Δbind(message));
}
}
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
ΔelementStart(0, 'div');
{
text(1, 'Before');
container(2);
container(3);
text(4, 'After');
Δtext(1, 'Before');
Δcontainer(2);
Δcontainer(3);
Δtext(4, 'After');
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
containerRefreshStart(2);
ΔcontainerRefreshStart(2);
{
let rf0 = embeddedViewStart(0, 2, 1);
let rf0 = ΔembeddedViewStart(0, 2, 1);
{ spanify(rf0, {message: data[0]}); }
embeddedViewEnd();
ΔembeddedViewEnd();
}
containerRefreshEnd();
containerRefreshStart(3);
ΔcontainerRefreshEnd();
ΔcontainerRefreshStart(3);
{
let rf0 = embeddedViewStart(0, 2, 1);
let rf0 = ΔembeddedViewStart(0, 2, 1);
{ spanify(rf0, {message: data[1]}); }
embeddedViewEnd();
ΔembeddedViewEnd();
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}, 5);

10
packages/core/test/render3/debug_spec.ts
View File

@ -8,14 +8,14 @@
import {getLContext} from '../../src/render3/context_discovery';
import {LViewDebug, toDebug} from '../../src/render3/debug';
import {RenderFlags, defineComponent, elementEnd, elementStart, text} from '../../src/render3/index';
import {RenderFlags, ΔdefineComponent, ΔelementEnd, ΔelementStart, Δtext} from '../../src/render3/index';
import {ComponentFixture} from './render_util';
describe('Debug Representation', () => {
it('should generate a human readable version', () => {
class MyComponent {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyComponent,
selectors: [['my-comp']],
vars: 0,
@ -23,9 +23,9 @@ describe('Debug Representation', () => {
factory: () => new MyComponent(),
template: function(rf: RenderFlags, ctx: MyComponent) {
if (rf == RenderFlags.Create) {
elementStart(0, 'div', ['id', '123']);
text(1, 'Hello World');
elementEnd();
ΔelementStart(0, 'div', ['id', '123']);
Δtext(1, 'Hello World');
ΔelementEnd();
}
}
});

709
packages/core/test/render3/di_spec.ts
View File

File diff suppressed because it is too large Load Diff

69
packages/core/test/render3/directive_spec.ts
View File

@ -8,12 +8,11 @@
import {EventEmitter, TemplateRef, ViewContainerRef} from '@angular/core';
import {AttributeMarker, RenderFlags, defineComponent, defineDirective, directiveInject} from '../../src/render3/index';
import {AttributeMarker, RenderFlags, ΔdefineComponent, ΔdefineDirective, ΔdirectiveInject} from '../../src/render3/index';
import {Δbind, Δelement, ΔelementContainerEnd, ΔelementContainerStart, ΔelementEnd, ΔelementProperty, ΔelementStart, Δlistener, Δtemplate, Δtext} from '../../src/render3/instructions/all';
import {bind, element, elementEnd, elementProperty, elementStart, listener, template, elementContainerStart, elementContainerEnd, text} from '../../src/render3/instructions/all';
import {ComponentFixture, TemplateFixture, createComponent} from './render_util';
import {NgIf} from './common_with_def';
import {ComponentFixture, TemplateFixture, createComponent} from './render_util';
describe('directive', () => {
@ -23,7 +22,7 @@ describe('directive', () => {
let directiveInstance: Directive;
class Directive {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: Directive,
selectors: [['', 'test', '']],
factory: () => directiveInstance = new Directive,
@ -53,10 +52,10 @@ describe('directive', () => {
*/
function createTemplate() {
// using 2 bindings to show example shape of attributes array
element(0, 'span', ['class', 'fade', AttributeMarker.Bindings, 'test', 'other']);
Δelement(0, 'span', ['class', 'fade', AttributeMarker.Bindings, 'test', 'other']);
}
function updateTemplate() { elementProperty(0, 'test', bind(false)); }
function updateTemplate() { ΔelementProperty(0, 'test', Δbind(false)); }
const fixture = new TemplateFixture(createTemplate, updateTemplate, 1, 1, [Directive]);
@ -71,7 +70,7 @@ describe('directive', () => {
let directiveInstance: Directive;
class Directive {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: Directive,
selectors: [['', 'test', '']],
factory: () => directiveInstance = new Directive,
@ -104,14 +103,14 @@ describe('directive', () => {
*/
function createTemplate() {
// putting name (test) in the "usual" value position
element(
Δelement(
0, 'span', ['class', 'fade', AttributeMarker.Bindings, 'prop1', 'test', 'prop2']);
}
function updateTemplate() {
elementProperty(0, 'prop1', bind(true));
elementProperty(0, 'test', bind(false));
elementProperty(0, 'prop2', bind(true));
ΔelementProperty(0, 'prop1', Δbind(true));
ΔelementProperty(0, 'test', Δbind(false));
ΔelementProperty(0, 'prop2', Δbind(true));
}
const fixture = new TemplateFixture(createTemplate, updateTemplate, 1, 3, [Directive]);
@ -134,20 +133,20 @@ describe('directive', () => {
let tmplRef: any;
class DirectiveA {
constructor(public templateRef: any) { tmplRef = templateRef; }
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: DirectiveA,
selectors: [['ng-template', 'directiveA', '']],
factory: () => new DirectiveA(directiveInject(TemplateRef as any))
factory: () => new DirectiveA(ΔdirectiveInject(TemplateRef as any))
});
}
function MyComponent_ng_template_Template_0(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
text(0, 'Some content');
Δtext(0, 'Some content');
}
}
class MyComponent {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyComponent,
selectors: [['my-component']],
factory: () => new MyComponent(),
@ -156,7 +155,7 @@ describe('directive', () => {
// <ng-template directiveA>Some content</ng-template>
template: function MyComponent_Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(
Δtemplate(
0, MyComponent_ng_template_Template_0, 1, 0, 'ng-template', ['directiveA', '']);
}
},
@ -180,24 +179,24 @@ describe('directive', () => {
let vcRef: any;
class DirectiveA {
constructor(public viewContainerRef: any) { vcRef = viewContainerRef; }
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: DirectiveA,
selectors: [['ng-container', 'directiveA', '']],
factory: () => new DirectiveA(directiveInject(ViewContainerRef as any))
factory: () => new DirectiveA(ΔdirectiveInject(ViewContainerRef as any))
});
}
function MyComponent_ng_container_Template_0(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementContainerStart(0, ['directiveA', '']);
text(1, 'Some content');
elementContainerEnd();
ΔelementContainerStart(0, ['directiveA', '']);
Δtext(1, 'Some content');
ΔelementContainerEnd();
}
}
class MyComponent {
visible = true;
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyComponent,
selectors: [['my-component']],
factory: () => new MyComponent(),
@ -206,12 +205,12 @@ describe('directive', () => {
// <ng-container *ngIf="visible" directiveA>Some content</ng-container>
template: function MyComponent_Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(
Δtemplate(
0, MyComponent_ng_container_Template_0, 2, 0, 'ng-container',
['directiveA', '', AttributeMarker.Template, 'ngIf']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngIf', bind(ctx.visible));
ΔelementProperty(0, 'ngIf', Δbind(ctx.visible));
}
},
directives: [DirectiveA, NgIf]
@ -226,7 +225,7 @@ describe('directive', () => {
let directiveInstance: Directive;
class Directive {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: Directive,
selectors: [['', 'out', '']],
factory: () => directiveInstance = new Directive,
@ -240,9 +239,9 @@ describe('directive', () => {
* <span (out)="someVar = true"></span>
*/
function createTemplate() {
elementStart(0, 'span', [AttributeMarker.Bindings, 'out']);
{ listener('out', () => {}); }
elementEnd();
ΔelementStart(0, 'span', [AttributeMarker.Bindings, 'out']);
{ Δlistener('out', () => {}); }
ΔelementEnd();
}
const fixture = new TemplateFixture(createTemplate, () => {}, 1, 0, [Directive]);
@ -258,7 +257,7 @@ describe('directive', () => {
let directiveInstance: Directive;
class Directive {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: Directive,
selectors: [['', 'out', '']],
factory: () => directiveInstance = new Directive,
@ -274,8 +273,8 @@ describe('directive', () => {
*/
const Cmpt = createComponent('Cmpt', function(rf: RenderFlags, ctx: {value: any}) {
if (rf & RenderFlags.Create) {
template(0, null, 0, 0, 'ng-template', [AttributeMarker.Bindings, 'out']);
listener('out', () => { ctx.value = true; });
Δtemplate(0, null, 0, 0, 'ng-template', [AttributeMarker.Bindings, 'out']);
Δlistener('out', () => { ctx.value = true; });
}
}, 1, 0, [Directive]);
@ -295,11 +294,11 @@ describe('directive', () => {
*/
const Cmpt = createComponent('Cmpt', function(rf: RenderFlags, ctx: {value: any}) {
if (rf & RenderFlags.Create) {
elementContainerStart(0, [AttributeMarker.Bindings, 'out']);
ΔelementContainerStart(0, [AttributeMarker.Bindings, 'out']);
{
listener('out', () => { ctx.value = true; });
Δlistener('out', () => { ctx.value = true; });
}
elementContainerEnd();
ΔelementContainerEnd();
}
}, 1, 0, [Directive]);

92
packages/core/test/render3/discovery_utils_spec.ts
View File

@ -7,12 +7,12 @@
*/
import {StaticInjector} from '../../src/di/injector';
import {createInjector} from '../../src/di/r3_injector';
import {AttributeMarker, ProvidersFeature, RenderFlags, defineComponent, defineDirective, elementContainerEnd, elementContainerStart, getHostElement, i18n, i18nApply, i18nExp} from '../../src/render3/index';
import {AttributeMarker, RenderFlags, getHostElement, ΔProvidersFeature, ΔdefineComponent, ΔdefineDirective, ΔelementContainerEnd, ΔelementContainerStart, Δi18n, Δi18nApply, Δi18nExp} from '../../src/render3/index';
import {markDirty, Δbind, Δelement, ΔelementEnd, ΔelementProperty, ΔelementStart, ΔelementStyling, ΔelementStylingApply, Δlistener, Δtemplate, Δtext, ΔtextBinding} from '../../src/render3/instructions/all';
import {getComponent, getContext, getDirectives, getInjectionTokens, getInjector, getListeners, getLocalRefs, getRootComponents, getViewComponent, loadLContext} from '../../src/render3/util/discovery_utils';
import {element, elementEnd, elementStart, elementStyling, elementStylingApply, template, bind, elementProperty, text, textBinding, markDirty, listener} from '../../src/render3/instructions/all';
import {ComponentFixture} from './render_util';
import {NgIf} from './common_with_def';
import {ComponentFixture} from './render_util';
describe('discovery utils', () => {
let fixture: ComponentFixture<MyApp>;
@ -68,7 +68,7 @@ describe('discovery utils', () => {
class Child {
constructor() { childComponent.push(this); }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Child,
selectors: [['child']],
factory: () => new Child(),
@ -76,17 +76,17 @@ describe('discovery utils', () => {
vars: 0,
template: (rf: RenderFlags, ctx: Child) => {
if (rf & RenderFlags.Create) {
element(0, 'p');
Δelement(0, 'p');
}
},
features: [ProvidersFeature([{provide: String, useValue: 'Child'}])]
features: [ΔProvidersFeature([{provide: String, useValue: 'Child'}])]
});
}
class DirectiveA {
constructor() { dirA.push(this); }
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: DirectiveA,
selectors: [['', 'dirA', '']],
exportAs: ['dirA'],
@ -102,7 +102,7 @@ describe('discovery utils', () => {
text: string = 'INIT';
constructor() { myApp = this; }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyApp,
selectors: [['my-app']],
factory: () => new MyApp(),
@ -111,30 +111,30 @@ describe('discovery utils', () => {
directives: [Child, DirectiveA, NgIf],
template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
listener('click', $event => log.push($event));
text(1);
elementEnd();
element(2, 'div', ['dirA', ''], ['div', '', 'foo', 'dirA']);
element(5, 'child');
element(6, 'child', ['dirA', ''], ['child', '']);
template(8, function(rf: RenderFlags, ctx: never) {
ΔelementStart(0, 'span');
Δlistener('click', $event => log.push($event));
Δtext(1);
ΔelementEnd();
Δelement(2, 'div', ['dirA', ''], ['div', '', 'foo', 'dirA']);
Δelement(5, 'child');
Δelement(6, 'child', ['dirA', ''], ['child', '']);
Δtemplate(8, function(rf: RenderFlags, ctx: never) {
if (rf & RenderFlags.Create) {
element(0, 'child');
Δelement(0, 'child');
}
}, 1, 0, 'child', ['dirA', AttributeMarker.Template, 'ngIf']);
elementStart(9, 'i18n');
i18n(10, MSG_DIV);
elementEnd();
elementContainerStart(11);
{ text(12, 'content'); }
elementContainerEnd();
ΔelementStart(9, 'i18n');
Δi18n(10, MSG_DIV);
ΔelementEnd();
ΔelementContainerStart(11);
{ Δtext(12, 'content'); }
ΔelementContainerEnd();
}
if (rf & RenderFlags.Update) {
textBinding(1, bind(ctx.text));
elementProperty(8, 'ngIf', bind(true));
i18nExp(bind(ctx.text));
i18nApply(10);
ΔtextBinding(1, Δbind(ctx.text));
ΔelementProperty(8, 'ngIf', Δbind(true));
Δi18nExp(Δbind(ctx.text));
Δi18nApply(10);
}
}
});
@ -348,7 +348,7 @@ describe('discovery utils deprecated', () => {
let innerComp: InnerComp;
class InnerComp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: InnerComp,
selectors: [['inner-comp']],
factory: () => innerComp = new InnerComp(),
@ -356,14 +356,14 @@ describe('discovery utils deprecated', () => {
vars: 0,
template: (rf: RenderFlags, ctx: InnerComp) => {
if (rf & RenderFlags.Create) {
element(0, 'div');
Δelement(0, 'div');
}
}
});
}
class Comp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
selectors: [['comp']],
factory: () => new Comp(),
@ -371,7 +371,7 @@ describe('discovery utils deprecated', () => {
vars: 0,
template: (rf: RenderFlags, ctx: Comp) => {
if (rf & RenderFlags.Create) {
element(0, 'inner-comp');
Δelement(0, 'inner-comp');
}
},
directives: [InnerComp]
@ -399,7 +399,7 @@ describe('discovery utils deprecated', () => {
let myDir3Instance: MyDir2|null = null;
class MyDir1 {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: MyDir1,
selectors: [['', 'my-dir-1', '']],
factory: () => myDir1Instance = new MyDir1()
@ -407,7 +407,7 @@ describe('discovery utils deprecated', () => {
}
class MyDir2 {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: MyDir2,
selectors: [['', 'my-dir-2', '']],
factory: () => myDir2Instance = new MyDir2()
@ -415,7 +415,7 @@ describe('discovery utils deprecated', () => {
}
class MyDir3 {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: MyDir3,
selectors: [['', 'my-dir-3', '']],
factory: () => myDir3Instance = new MyDir2()
@ -423,7 +423,7 @@ describe('discovery utils deprecated', () => {
}
class Comp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
selectors: [['comp']],
factory: () => new Comp(),
@ -431,8 +431,8 @@ describe('discovery utils deprecated', () => {
vars: 0,
template: (rf: RenderFlags, ctx: Comp) => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['my-dir-1', '', 'my-dir-2', '']);
element(1, 'div', ['my-dir-3']);
Δelement(0, 'div', ['my-dir-1', '', 'my-dir-2', '']);
Δelement(1, 'div', ['my-dir-3']);
}
},
directives: [MyDir1, MyDir2, MyDir3]
@ -461,7 +461,7 @@ describe('discovery utils deprecated', () => {
it('should return an injector that can return directive instances', () => {
class Comp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
selectors: [['comp']],
factory: () => new Comp(),
@ -481,7 +481,7 @@ describe('discovery utils deprecated', () => {
it('should return an injector that falls-back to a module injector', () => {
class Comp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
selectors: [['comp']],
factory: () => new Comp(),
@ -506,7 +506,7 @@ describe('discovery utils deprecated', () => {
it('should return a map of local refs for an element', () => {
class MyDir {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: MyDir,
selectors: [['', 'myDir', '']],
exportAs: ['myDir'],
@ -515,7 +515,7 @@ describe('discovery utils deprecated', () => {
}
class Comp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
selectors: [['comp']],
factory: () => new Comp(),
@ -524,7 +524,7 @@ describe('discovery utils deprecated', () => {
template: (rf: RenderFlags, ctx: Comp) => {
if (rf & RenderFlags.Create) {
// <div myDir #elRef #dirRef="myDir">
element(0, 'div', ['myDir'], ['elRef', '', 'dirRef', 'myDir']);
Δelement(0, 'div', ['myDir'], ['elRef', '', 'dirRef', 'myDir']);
}
},
directives: [MyDir]
@ -543,7 +543,7 @@ describe('discovery utils deprecated', () => {
it('should return a map of local refs for an element with styling context', () => {
class Comp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
selectors: [['comp']],
factory: () => new Comp(),
@ -552,11 +552,11 @@ describe('discovery utils deprecated', () => {
template: (rf: RenderFlags, ctx: Comp) => {
if (rf & RenderFlags.Create) {
// <div #elRef class="fooClass">
elementStart(0, 'div', null, ['elRef', '']);
elementEnd();
ΔelementStart(0, 'div', null, ['elRef', '']);
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementStylingApply(0);
ΔelementStylingApply(0);
}
}
});

138
packages/core/test/render3/exports_spec.ts
View File

@ -6,8 +6,8 @@
* found in the LICENSE file at https://angular.io/license
*/
import {AttributeMarker, defineComponent, defineDirective} from '../../src/render3/index';
import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementEnd, elementProperty, elementStart, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, interpolation2, nextContext, reference, template, text, textBinding} from '../../src/render3/instructions/all';
import {AttributeMarker, ΔdefineComponent, ΔdefineDirective} from '../../src/render3/index';
import {Δbind, Δcontainer, ΔcontainerRefreshEnd, ΔcontainerRefreshStart, Δelement, ΔelementAttribute, ΔelementClassProp, ΔelementEnd, ΔelementProperty, ΔelementStart, ΔelementStyling, ΔelementStylingApply, ΔembeddedViewEnd, ΔembeddedViewStart, Δinterpolation2, ΔnextContext, Δreference, Δtemplate, Δtext, ΔtextBinding} from '../../src/render3/instructions/all';
import {RenderFlags} from '../../src/render3/interfaces/definition';
import {NgIf} from './common_with_def';
@ -21,12 +21,12 @@ describe('exports', () => {
/** {{ myInput.value}} <input value="one" #myInput> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
text(0);
element(1, 'input', ['value', 'one'], ['myInput', '']);
Δtext(0);
Δelement(1, 'input', ['value', 'one'], ['myInput', '']);
}
if (rf & RenderFlags.Update) {
const tmp = reference(2) as any;
textBinding(0, bind(tmp.value));
const tmp = Δreference(2) as any;
ΔtextBinding(0, Δbind(tmp.value));
}
}, 3, 1);
@ -39,12 +39,12 @@ describe('exports', () => {
/** <div [title]="myInput.value"</div> <input value="one" #myInput> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'div');
element(1, 'input', ['value', 'one'], ['myInput', '']);
Δelement(0, 'div');
Δelement(1, 'input', ['value', 'one'], ['myInput', '']);
}
if (rf & RenderFlags.Update) {
const tmp = reference(2) as any;
elementProperty(0, 'title', bind(tmp.value));
const tmp = Δreference(2) as any;
ΔelementProperty(0, 'title', Δbind(tmp.value));
}
}, 3, 1);
@ -56,12 +56,12 @@ describe('exports', () => {
/** <div [attr.aria-label]="myInput.value"</div> <input value="one" #myInput> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'div');
element(1, 'input', ['value', 'one'], ['myInput', '']);
Δelement(0, 'div');
Δelement(1, 'input', ['value', 'one'], ['myInput', '']);
}
if (rf & RenderFlags.Update) {
const tmp = reference(2) as any;
elementAttribute(0, 'aria-label', bind(tmp.value));
const tmp = Δreference(2) as any;
ΔelementAttribute(0, 'aria-label', Δbind(tmp.value));
}
}, 3, 1);
@ -73,15 +73,15 @@ describe('exports', () => {
/** <div [class.red]="myInput.checked"</div> <input type="checkbox" checked #myInput> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div', [AttributeMarker.Classes, 'red']);
elementStyling(['red']);
elementEnd();
element(1, 'input', ['type', 'checkbox', 'checked', 'true'], ['myInput', '']);
ΔelementStart(0, 'div', [AttributeMarker.Classes, 'red']);
ΔelementStyling(['red']);
ΔelementEnd();
Δelement(1, 'input', ['type', 'checkbox', 'checked', 'true'], ['myInput', '']);
}
if (rf & RenderFlags.Update) {
const tmp = reference(2) as any;
elementClassProp(0, 0, tmp.checked);
elementStylingApply(0);
const tmp = Δreference(2) as any;
ΔelementClassProp(0, 0, tmp.checked);
ΔelementStylingApply(0);
}
}, 3);
@ -97,7 +97,7 @@ describe('exports', () => {
class MyComponent {
constructor() { myComponent = this; }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyComponent,
selectors: [['comp']],
consts: 0,
@ -113,7 +113,7 @@ describe('exports', () => {
constructor() { myDir = this; }
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: MyDir,
selectors: [['', 'myDir', '']],
factory: () => new MyDir,
@ -124,12 +124,12 @@ describe('exports', () => {
/** <div [myDir]="myComp"></div><comp #myComp></comp> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'div', ['myDir', '']);
element(1, 'comp', null, ['myComp', '']);
Δelement(0, 'div', ['myDir', '']);
Δelement(1, 'comp', null, ['myComp', '']);
}
if (rf & RenderFlags.Update) {
const tmp = reference(2) as any;
elementProperty(0, 'myDir', bind(tmp));
const tmp = Δreference(2) as any;
ΔelementProperty(0, 'myDir', Δbind(tmp));
}
}, 3, 1, [MyComponent, MyDir]);
@ -145,7 +145,7 @@ describe('exports', () => {
constructor() { myComponent = this; }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyComponent,
selectors: [['comp']],
consts: 0,
@ -159,16 +159,16 @@ describe('exports', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
text(0);
text(1);
element(2, 'comp', null, ['myComp', '']);
element(4, 'input', ['value', 'one'], ['myInput', '']);
Δtext(0);
Δtext(1);
Δelement(2, 'comp', null, ['myComp', '']);
Δelement(4, 'input', ['value', 'one'], ['myInput', '']);
}
if (rf & RenderFlags.Update) {
const tmp1 = reference(3) as any;
const tmp2 = reference(5) as any;
textBinding(0, bind(tmp2.value));
textBinding(1, bind(tmp1.name));
const tmp1 = Δreference(3) as any;
const tmp2 = Δreference(5) as any;
ΔtextBinding(0, Δbind(tmp2.value));
ΔtextBinding(1, Δbind(tmp1.name));
}
}, 6, 2, [MyComponent]);
@ -179,29 +179,29 @@ describe('exports', () => {
it('should work inside a view container', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ container(1); }
elementEnd();
ΔelementStart(0, 'div');
{ Δcontainer(1); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
containerRefreshStart(1);
ΔcontainerRefreshStart(1);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(1, 2, 1);
let rf1 = ΔembeddedViewStart(1, 2, 1);
{
if (rf1 & RenderFlags.Create) {
text(0);
element(1, 'input', ['value', 'one'], ['myInput', '']);
Δtext(0);
Δelement(1, 'input', ['value', 'one'], ['myInput', '']);
}
if (rf1 & RenderFlags.Update) {
const tmp = reference(2) as any;
textBinding(0, bind(tmp.value));
const tmp = Δreference(2) as any;
ΔtextBinding(0, Δbind(tmp.value));
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}, 2);
@ -230,48 +230,48 @@ describe('exports', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, app: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'input', ['value', 'one'], ['outerInput', '']);
elementEnd();
template(2, outerTemplate, 5, 2, 'div', [AttributeMarker.Template, 'ngIf']);
ΔelementStart(0, 'input', ['value', 'one'], ['outerInput', '']);
ΔelementEnd();
Δtemplate(2, outerTemplate, 5, 2, 'div', [AttributeMarker.Template, 'ngIf']);
}
if (rf & RenderFlags.Update) {
elementProperty(2, 'ngIf', bind(app.outer));
ΔelementProperty(2, 'ngIf', Δbind(app.outer));
}
}, 3, 1, [NgIf]);
function outerTemplate(rf: RenderFlags, outer: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
ΔelementStart(0, 'div');
{
text(1);
elementStart(2, 'input', ['value', 'two'], ['innerInput', '']);
elementEnd();
template(4, innerTemplate, 2, 2, 'div', [AttributeMarker.Template, 'ngIf']);
Δtext(1);
ΔelementStart(2, 'input', ['value', 'two'], ['innerInput', '']);
ΔelementEnd();
Δtemplate(4, innerTemplate, 2, 2, 'div', [AttributeMarker.Template, 'ngIf']);
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const app = nextContext();
const outerInput = reference(1) as any;
textBinding(1, bind(outerInput.value));
elementProperty(4, 'ngIf', bind(app.inner));
const app = ΔnextContext();
const outerInput = Δreference(1) as any;
ΔtextBinding(1, Δbind(outerInput.value));
ΔelementProperty(4, 'ngIf', Δbind(app.inner));
}
}
function innerTemplate(rf: RenderFlags, inner: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ text(1); }
elementEnd();
ΔelementStart(0, 'div');
{ Δtext(1); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
nextContext();
const innerInput = reference(3) as any;
nextContext();
const outerInput = reference(1) as any;
textBinding(1, interpolation2('', outerInput.value, ' - ', innerInput.value, ''));
ΔnextContext();
const innerInput = Δreference(3) as any;
ΔnextContext();
const outerInput = Δreference(1) as any;
ΔtextBinding(1, Δinterpolation2('', outerInput.value, ' - ', innerInput.value, ''));
}
}

292
packages/core/test/render3/host_binding_spec.ts
View File

@ -8,16 +8,16 @@
import {ElementRef, QueryList, ViewContainerRef} from '@angular/core';
import {AttributeMarker, defineComponent, template, defineDirective, InheritDefinitionFeature, ProvidersFeature, NgOnChangesFeature} from '../../src/render3/index';
import {allocHostVars, bind, directiveInject, element, elementAttribute, elementEnd, elementProperty, elementStyleProp, elementStyling, elementStylingApply, elementStart, listener, load, text, textBinding, elementHostAttrs, elementHostStylingApply, elementHostStyleProp, elementHostStyling} from '../../src/render3/instructions/all';
import {loadContentQuery, contentQuery, queryRefresh} from '../../src/render3/query';
import {AttributeMarker, ΔInheritDefinitionFeature, ΔNgOnChangesFeature, ΔProvidersFeature, ΔdefineComponent, ΔdefineDirective, Δtemplate} from '../../src/render3/index';
import {ΔallocHostVars, Δbind, ΔdirectiveInject, Δelement, ΔelementAttribute, ΔelementEnd, ΔelementHostAttrs, ΔelementHostStyleProp, ΔelementHostStyling, ΔelementHostStylingApply, ΔelementProperty, ΔelementStart, ΔelementStyleProp, ΔelementStyling, ΔelementStylingApply, Δlistener, Δload, Δtext, ΔtextBinding} from '../../src/render3/instructions/all';
import {RenderFlags} from '../../src/render3/interfaces/definition';
import {pureFunction1, pureFunction2} from '../../src/render3/pure_function';
import {sanitizeUrl, sanitizeUrlOrResourceUrl, sanitizeHtml} from '../../src/sanitization/sanitization';
import {ΔpureFunction1, ΔpureFunction2} from '../../src/render3/pure_function';
import {ΔcontentQuery, ΔloadContentQuery, ΔqueryRefresh} from '../../src/render3/query';
import {bypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl, bypassSanitizationTrustUrl} from '../../src/sanitization/bypass';
import {ΔsanitizeHtml, ΔsanitizeUrl, ΔsanitizeUrlOrResourceUrl} from '../../src/sanitization/sanitization';
import {ComponentFixture, TemplateFixture, createComponent, createDirective} from './render_util';
import {NgForOf} from './common_with_def';
import {ComponentFixture, TemplateFixture, createComponent, createDirective} from './render_util';
describe('host bindings', () => {
let nameComp: NameComp|null;
@ -32,7 +32,7 @@ describe('host bindings', () => {
class NameComp {
names !: string[];
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: NameComp,
selectors: [['name-comp']],
factory: function NameComp_Factory() { return nameComp = new NameComp(); },
@ -47,16 +47,16 @@ describe('host bindings', () => {
// @HostBinding()
id = 'foo';
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: HostBindingDir,
selectors: [['', 'hostBindingDir', '']],
factory: () => hostBindingDir = new HostBindingDir(),
hostBindings: (rf: RenderFlags, ctx: any, elementIndex: number) => {
if (rf & RenderFlags.Create) {
allocHostVars(1);
ΔallocHostVars(1);
}
if (rf & RenderFlags.Update) {
elementProperty(elementIndex, 'id', bind(ctx.id), null, true);
ΔelementProperty(elementIndex, 'id', Δbind(ctx.id), null, true);
}
}
});
@ -66,7 +66,7 @@ describe('host bindings', () => {
// @HostBinding()
id = 'my-id';
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: HostBindingComp,
selectors: [['host-binding-comp']],
factory: () => new HostBindingComp(),
@ -74,10 +74,10 @@ describe('host bindings', () => {
vars: 0,
hostBindings: (rf: RenderFlags, ctx: HostBindingComp, elIndex: number) => {
if (rf & RenderFlags.Create) {
allocHostVars(1);
ΔallocHostVars(1);
}
if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'id', bind(ctx.id), null, true);
ΔelementProperty(elIndex, 'id', Δbind(ctx.id), null, true);
}
},
template: (rf: RenderFlags, ctx: HostBindingComp) => {}
@ -91,23 +91,23 @@ describe('host bindings', () => {
// @HostBinding('className')
klass = 'foo';
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: Directive,
selectors: [['', 'dir', '']],
factory: () => directiveInstance = new Directive,
hostBindings: (rf: RenderFlags, ctx: any, elementIndex: number) => {
elementIndices.push(elementIndex);
if (rf & RenderFlags.Create) {
allocHostVars(1);
ΔallocHostVars(1);
}
if (rf & RenderFlags.Update) {
elementProperty(elementIndex, 'className', bind(ctx.klass), null, true);
ΔelementProperty(elementIndex, 'className', Δbind(ctx.klass), null, true);
}
}
});
}
function Template() { element(0, 'span', [AttributeMarker.Bindings, 'dir']); }
function Template() { Δelement(0, 'span', [AttributeMarker.Bindings, 'dir']); }
const fixture = new TemplateFixture(Template, () => {}, 1, 0, [Directive]);
expect(fixture.html).toEqual('<span class="foo"></span>');
@ -127,7 +127,7 @@ describe('host bindings', () => {
// @HostBinding()
id = 'my-id';
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: HostBindingComp,
selectors: [['host-binding-comp']],
factory: () => new HostBindingComp(),
@ -136,10 +136,10 @@ describe('host bindings', () => {
hostBindings: (rf: RenderFlags, ctx: HostBindingComp, elIndex: number) => {
elementIndices.push(elIndex);
if (rf & RenderFlags.Create) {
allocHostVars(1);
ΔallocHostVars(1);
}
if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'id', bind(ctx.id), null, true);
ΔelementProperty(elIndex, 'id', Δbind(ctx.id), null, true);
}
},
template: (rf: RenderFlags, ctx: HostBindingComp) => {}
@ -172,23 +172,23 @@ describe('host bindings', () => {
constructor(public serviceOne: ServiceOne, public serviceTwo: ServiceTwo) {}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: CompWithProviders,
selectors: [['comp-with-providers']],
factory:
() => new CompWithProviders(directiveInject(ServiceOne), directiveInject(ServiceTwo)),
() => new CompWithProviders(ΔdirectiveInject(ServiceOne), ΔdirectiveInject(ServiceTwo)),
consts: 0,
vars: 0,
hostBindings: (rf: RenderFlags, ctx: CompWithProviders, elIndex: number) => {
if (rf & RenderFlags.Create) {
allocHostVars(1);
ΔallocHostVars(1);
}
if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'id', bind(ctx.id), null, true);
ΔelementProperty(elIndex, 'id', Δbind(ctx.id), null, true);
}
},
template: (rf: RenderFlags, ctx: CompWithProviders) => {},
features: [ProvidersFeature([[ServiceOne], [ServiceTwo]])]
features: [ΔProvidersFeature([[ServiceOne], [ServiceTwo]])]
});
}
@ -209,7 +209,7 @@ describe('host bindings', () => {
// @HostBinding()
title = 'my-title';
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: HostTitleComp,
selectors: [['host-title-comp']],
factory: () => new HostTitleComp(),
@ -217,10 +217,10 @@ describe('host bindings', () => {
vars: 0,
hostBindings: (rf: RenderFlags, ctx: HostTitleComp, elIndex: number) => {
if (rf & RenderFlags.Create) {
allocHostVars(1);
ΔallocHostVars(1);
}
if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'title', bind(ctx.title), null, true);
ΔelementProperty(elIndex, 'title', Δbind(ctx.title), null, true);
}
},
template: (rf: RenderFlags, ctx: HostTitleComp) => {}
@ -234,9 +234,9 @@ describe('host bindings', () => {
*/
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['hostBindingDir', '']);
element(1, 'div', ['someDir', '']);
element(2, 'host-title-comp');
Δelement(0, 'div', ['hostBindingDir', '']);
Δelement(1, 'div', ['someDir', '']);
Δelement(2, 'host-title-comp');
}
}, 3, 0, [HostBindingDir, SomeDir, HostTitleComp]);
@ -258,7 +258,7 @@ describe('host bindings', () => {
// @HostBinding()
id = 'blue';
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: HostBindingComp,
selectors: [['host-binding-comp']],
factory: () => {
@ -270,10 +270,10 @@ describe('host bindings', () => {
vars: 0,
hostBindings: (rf: RenderFlags, ctx: HostBindingComp, elIndex: number) => {
if (rf & RenderFlags.Create) {
allocHostVars(1);
ΔallocHostVars(1);
}
if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'id', bind(ctx.id), null, true);
ΔelementProperty(elIndex, 'id', Δbind(ctx.id), null, true);
}
},
template: (rf: RenderFlags, ctx: HostBindingComp) => {}
@ -286,8 +286,8 @@ describe('host bindings', () => {
* */
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
element(0, 'host-binding-comp');
element(1, 'host-binding-comp');
Δelement(0, 'host-binding-comp');
Δelement(1, 'host-binding-comp');
}
}, 2, 0, [HostBindingComp]);
@ -318,7 +318,7 @@ describe('host bindings', () => {
/** <div someDir hostBindingDir></div> */
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['someDir', '', 'hostBindingDir', '']);
Δelement(0, 'div', ['someDir', '', 'hostBindingDir', '']);
}
}, 1, 0, [SomeDir, HostBindingDir]);
@ -350,20 +350,20 @@ describe('host bindings', () => {
return `${this.inputValue}-${this.changesValue}-${this.initValue}-${this.checkValue}`;
}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: InitHookComp,
selectors: [['init-hook-comp']],
factory: () => new InitHookComp(),
template: (rf: RenderFlags, ctx: InitHookComp) => {},
consts: 0,
vars: 0,
features: [NgOnChangesFeature()],
features: [ΔNgOnChangesFeature()],
hostBindings: (rf: RenderFlags, ctx: InitHookComp, elIndex: number) => {
if (rf & RenderFlags.Create) {
allocHostVars(1);
ΔallocHostVars(1);
}
if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'title', bind(ctx.value), null, true);
ΔelementProperty(elIndex, 'title', Δbind(ctx.value), null, true);
}
},
inputs: {inputValue: 'inputValue'}
@ -374,16 +374,16 @@ describe('host bindings', () => {
class App {
value = 'input';
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: App,
selectors: [['app']],
factory: () => new App(),
template: (rf: RenderFlags, ctx: App) => {
if (rf & RenderFlags.Create) {
element(0, 'init-hook-comp');
Δelement(0, 'init-hook-comp');
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'inputValue', bind(ctx.value));
ΔelementProperty(0, 'inputValue', Δbind(ctx.value));
}
},
consts: 1,
@ -411,16 +411,16 @@ describe('host bindings', () => {
// @HostBinding('disabled')
hostDisabled = false;
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: HostBindingInputDir,
selectors: [['', 'hostBindingDir', '']],
factory: () => hostBindingInputDir = new HostBindingInputDir(),
hostBindings: (rf: RenderFlags, ctx: HostBindingInputDir, elIndex: number) => {
if (rf & RenderFlags.Create) {
allocHostVars(1);
ΔallocHostVars(1);
}
if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'disabled', bind(ctx.hostDisabled), null, true);
ΔelementProperty(elIndex, 'disabled', Δbind(ctx.hostDisabled), null, true);
}
},
inputs: {disabled: 'disabled'}
@ -431,16 +431,16 @@ describe('host bindings', () => {
class App {
isDisabled = true;
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: App,
selectors: [['app']],
factory: () => new App(),
template: (rf: RenderFlags, ctx: App) => {
if (rf & RenderFlags.Create) {
element(0, 'input', ['hostBindingDir', '']);
Δelement(0, 'input', ['hostBindingDir', '']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'disabled', bind(ctx.isDisabled));
ΔelementProperty(0, 'disabled', Δbind(ctx.isDisabled));
}
},
consts: 1,
@ -469,7 +469,7 @@ describe('host bindings', () => {
/** <div hostBindingDir></div> */
const Parent = createComponent('parent', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['hostBindingDir', '']);
Δelement(0, 'div', ['hostBindingDir', '']);
}
}, 1, 0, [HostBindingDir]);
@ -479,8 +479,8 @@ describe('host bindings', () => {
*/
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
element(0, 'parent');
element(1, 'parent');
Δelement(0, 'parent');
Δelement(1, 'parent');
}
}, 2, 0, [Parent]);
@ -493,9 +493,9 @@ describe('host bindings', () => {
it('should support host bindings in for loop', () => {
function NgForTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
{ element(1, 'p', ['hostBindingDir', '']); }
elementEnd();
ΔelementStart(0, 'div');
{ Δelement(1, 'p', ['hostBindingDir', '']); }
ΔelementEnd();
}
}
@ -506,10 +506,10 @@ describe('host bindings', () => {
*/
const App = createComponent('parent', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
template(0, NgForTemplate, 2, 0, 'div', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
Δtemplate(0, NgForTemplate, 2, 0, 'div', [AttributeMarker.Template, 'ngFor', 'ngForOf']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngForOf', bind(ctx.rows));
ΔelementProperty(0, 'ngForOf', Δbind(ctx.rows));
}
}, 1, 1, [HostBindingDir, NgForOf]);
@ -532,11 +532,11 @@ describe('host bindings', () => {
*/
const AppComponent = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'name-comp');
element(1, 'host-binding-comp');
Δelement(0, 'name-comp');
Δelement(1, 'host-binding-comp');
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'names', bind(pureFunction1(1, ff, ctx.name)));
ΔelementProperty(0, 'names', Δbind(ΔpureFunction1(1, ff, ctx.name)));
}
}, 2, 3, [HostBindingComp, NameComp]);
@ -584,7 +584,7 @@ describe('host bindings', () => {
title = 'my title';
otherTitle = 'other title';
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: HostBindingComp,
selectors: [['host-binding-comp']],
factory: () => hostBindingComp = new HostBindingComp(),
@ -593,13 +593,13 @@ describe('host bindings', () => {
hostBindings: (rf: RenderFlags, ctx: HostBindingComp, elIndex: number) => {
// LView: [..., id, dir, title, ctx.id, pf1, ctx.title, ctx.otherTitle, pf2]
if (rf & RenderFlags.Create) {
allocHostVars(8);
ΔallocHostVars(8);
}
if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'id', bind(pureFunction1(3, ff, ctx.id)), null, true);
elementProperty(elIndex, 'dir', bind(ctx.dir), null, true);
elementProperty(
elIndex, 'title', bind(pureFunction2(5, ff2, ctx.title, ctx.otherTitle)), null,
ΔelementProperty(elIndex, 'id', Δbind(ΔpureFunction1(3, ff, ctx.id)), null, true);
ΔelementProperty(elIndex, 'dir', Δbind(ctx.dir), null, true);
ΔelementProperty(
elIndex, 'title', Δbind(ΔpureFunction2(5, ff2, ctx.title, ctx.otherTitle)), null,
true);
}
},
@ -613,11 +613,11 @@ describe('host bindings', () => {
*/
const AppComponent = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'name-comp');
element(1, 'host-binding-comp');
Δelement(0, 'name-comp');
Δelement(1, 'host-binding-comp');
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'names', bind(pureFunction2(1, ff3, ctx.name, ctx.otherName)));
ΔelementProperty(0, 'names', Δbind(ΔpureFunction2(1, ff3, ctx.name, ctx.otherName)));
}
}, 2, 4, [HostBindingComp, NameComp]);
@ -663,7 +663,7 @@ describe('host bindings', () => {
class HostBindingComp {
id = 'blue';
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: HostBindingComp,
selectors: [['host-binding-comp']],
factory: () => hostBindingComp = new HostBindingComp(),
@ -672,10 +672,10 @@ describe('host bindings', () => {
hostBindings: (rf: RenderFlags, ctx: HostBindingComp, elIndex: number) => {
// LView: [..., id, ctx.id, pf1]
if (rf & RenderFlags.Create) {
allocHostVars(3);
ΔallocHostVars(3);
}
if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'id', bind(pureFunction1(1, ff, ctx.id)), null, true);
ΔelementProperty(elIndex, 'id', Δbind(ΔpureFunction1(1, ff, ctx.id)), null, true);
}
},
template: (rf: RenderFlags, ctx: HostBindingComp) => {}
@ -696,17 +696,18 @@ describe('host bindings', () => {
class HostBindingDir {
title = 'my title';
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: HostBindingDir,
selectors: [['', 'hostDir', '']],
factory: () => hostBindingDir = new HostBindingDir(),
hostBindings: (rf: RenderFlags, ctx: HostBindingDir, elIndex: number) => {
// LView: [..., title, ctx.title, pf1]
if (rf & RenderFlags.Create) {
allocHostVars(3);
ΔallocHostVars(3);
}
if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'title', bind(pureFunction1(1, ff1, ctx.title)), null, true);
ΔelementProperty(
elIndex, 'title', Δbind(ΔpureFunction1(1, ff1, ctx.title)), null, true);
}
}
});
@ -718,7 +719,7 @@ describe('host bindings', () => {
*/
const AppComponent = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'host-binding-comp', ['hostDir', '']);
Δelement(0, 'host-binding-comp', ['hostDir', '']);
}
}, 1, 0, [HostBindingComp, HostBindingDir]);
@ -753,17 +754,18 @@ describe('host bindings', () => {
class HostBindingDir {
title = 'my title';
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: HostBindingDir,
selectors: [['', 'hostDir', '']],
factory: () => new HostBindingDir(),
hostBindings: (rf: RenderFlags, ctx: HostBindingDir, elIndex: number) => {
// LView [..., title, ctx.title, pf1]
if (rf & RenderFlags.Create) {
allocHostVars(3);
ΔallocHostVars(3);
}
if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'title', bind(pureFunction1(1, ff1, ctx.title)), null, true);
ΔelementProperty(
elIndex, 'title', Δbind(ΔpureFunction1(1, ff1, ctx.title)), null, true);
}
}
});
@ -773,14 +775,14 @@ describe('host bindings', () => {
/* @HostListener('click') */
onClick() { events.push('click!'); }
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: HostListenerDir,
selectors: [['', 'hostListenerDir', '']],
factory: function HostListenerDir_Factory() { return new HostListenerDir(); },
hostBindings: function HostListenerDir_HostBindings(
rf: RenderFlags, ctx: any, elIndex: number) {
if (rf & RenderFlags.Create) {
listener('click', function() { return ctx.onClick(); });
Δlistener('click', function() { return ctx.onClick(); });
}
}
});
@ -788,9 +790,9 @@ describe('host bindings', () => {
// <button hostListenerDir hostDir>Click</button>
const fixture = new TemplateFixture(() => {
elementStart(0, 'button', ['hostListenerDir', '', 'hostDir', '']);
text(1, 'Click');
elementEnd();
ΔelementStart(0, 'button', ['hostListenerDir', '', 'hostDir', '']);
Δtext(1, 'Click');
ΔelementEnd();
}, () => {}, 2, 0, [HostListenerDir, HostBindingDir]);
const button = fixture.hostElement.querySelector('button') !;
@ -821,7 +823,7 @@ describe('host bindings', () => {
id = 'blue';
title = 'blue';
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: HostBindingComp,
selectors: [['host-binding-comp']],
factory: () => hostBindingComp = new HostBindingComp(),
@ -830,15 +832,15 @@ describe('host bindings', () => {
hostBindings: (rf: RenderFlags, ctx: HostBindingComp, elIndex: number) => {
// LView: [..., id, title, ctx.id, pf1, ctx.title, pf1]
if (rf & RenderFlags.Create) {
allocHostVars(6);
ΔallocHostVars(6);
}
if (rf & RenderFlags.Update) {
elementProperty(
elIndex, 'id', bind(ctx.condition ? pureFunction1(2, ff, ctx.id) : 'green'), null,
ΔelementProperty(
elIndex, 'id', Δbind(ctx.condition ? ΔpureFunction1(2, ff, ctx.id) : 'green'), null,
true);
elementProperty(
ΔelementProperty(
elIndex, 'title',
bind(ctx.otherCondition ? pureFunction1(4, ff1, ctx.title) : 'other title'), null,
Δbind(ctx.otherCondition ? ΔpureFunction1(4, ff1, ctx.title) : 'other title'), null,
true);
}
},
@ -852,11 +854,11 @@ describe('host bindings', () => {
*/
const AppComponent = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'host-binding-comp');
text(1);
Δelement(0, 'host-binding-comp');
Δtext(1);
}
if (rf & RenderFlags.Update) {
textBinding(1, bind(ctx.name));
ΔtextBinding(1, Δbind(ctx.name));
}
}, 2, 1, [HostBindingComp]);
@ -888,15 +890,15 @@ describe('host bindings', () => {
class SuperDirective {
id = 'my-id';
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: SuperDirective,
selectors: [['', 'superDir', '']],
hostBindings: (rf: RenderFlags, ctx: SuperDirective, elementIndex: number) => {
if (rf & RenderFlags.Create) {
allocHostVars(1);
ΔallocHostVars(1);
}
if (rf & RenderFlags.Update) {
elementProperty(elementIndex, 'id', bind(ctx.id), null, true);
ΔelementProperty(elementIndex, 'id', Δbind(ctx.id), null, true);
}
},
factory: () => superDir = new SuperDirective(),
@ -906,26 +908,26 @@ describe('host bindings', () => {
class SubDirective extends SuperDirective {
title = 'my-title';
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: SubDirective,
selectors: [['', 'subDir', '']],
hostBindings: (rf: RenderFlags, ctx: SubDirective, elementIndex: number) => {
if (rf & RenderFlags.Create) {
allocHostVars(1);
ΔallocHostVars(1);
}
if (rf & RenderFlags.Update) {
elementProperty(elementIndex, 'title', bind(ctx.title), null, true);
ΔelementProperty(elementIndex, 'title', Δbind(ctx.title), null, true);
}
},
factory: () => subDir = new SubDirective(),
features: [InheritDefinitionFeature]
features: [ΔInheritDefinitionFeature]
});
}
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['subDir', '']);
element(1, 'div', ['superDir', '']);
Δelement(0, 'div', ['subDir', '']);
Δelement(1, 'div', ['superDir', '']);
}
}, 2, 0, [SubDirective, SuperDirective]);
@ -962,13 +964,13 @@ describe('host bindings', () => {
// 'role': 'listbox'
// }
class HostAttributeDir {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
selectors: [['', 'hostAttributeDir', '']],
type: HostAttributeDir,
factory: () => new HostAttributeDir(),
hostBindings: function(rf, ctx, elIndex) {
if (rf & RenderFlags.Create) {
elementHostAttrs(['role', 'listbox']);
ΔelementHostAttrs(['role', 'listbox']);
}
}
});
@ -977,7 +979,7 @@ describe('host bindings', () => {
// <div hostAttributeDir></div>
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['hostAttributeDir', '']);
Δelement(0, 'div', ['hostAttributeDir', '']);
}
}, 1, 0, [HostAttributeDir]);
@ -995,7 +997,7 @@ describe('host bindings', () => {
// @ContentChildren('foo')
foos !: QueryList<any>;
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: HostBindingWithContentChildren,
selectors: [['host-binding-comp']],
factory: () => new HostBindingWithContentChildren(),
@ -1003,19 +1005,19 @@ describe('host bindings', () => {
vars: 0,
hostBindings: (rf: RenderFlags, ctx: HostBindingWithContentChildren, elIndex: number) => {
if (rf & RenderFlags.Create) {
allocHostVars(1);
ΔallocHostVars(1);
}
if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'id', bind(ctx.foos.length), null, true);
ΔelementProperty(elIndex, 'id', Δbind(ctx.foos.length), null, true);
}
},
contentQueries: (rf: RenderFlags, ctx: any, dirIndex: number) => {
if (rf & RenderFlags.Create) {
contentQuery(dirIndex, ['foo'], false, null);
ΔcontentQuery(dirIndex, ['foo'], false, null);
}
if (rf & RenderFlags.Update) {
let tmp: any;
queryRefresh(tmp = loadContentQuery<ElementRef>()) && (ctx.foos = tmp);
ΔqueryRefresh(tmp = ΔloadContentQuery<ElementRef>()) && (ctx.foos = tmp);
}
},
template: (rf: RenderFlags, cmp: HostBindingWithContentChildren) => {}
@ -1030,12 +1032,12 @@ describe('host bindings', () => {
*/
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'host-binding-comp');
ΔelementStart(0, 'host-binding-comp');
{
element(1, 'div', null, ['foo', '']);
element(3, 'div', null, ['foo', '']);
Δelement(1, 'div', null, ['foo', '']);
Δelement(3, 'div', null, ['foo', '']);
}
elementEnd();
ΔelementEnd();
}
}, 5, 0, [HostBindingWithContentChildren]);
@ -1057,7 +1059,7 @@ describe('host bindings', () => {
ngAfterViewInit() { this.myValue = 'after-view'; }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: HostBindingWithContentHooks,
selectors: [['host-binding-comp']],
factory: () => new HostBindingWithContentHooks(),
@ -1065,10 +1067,10 @@ describe('host bindings', () => {
vars: 0,
hostBindings: (rf: RenderFlags, ctx: HostBindingWithContentHooks, elIndex: number) => {
if (rf & RenderFlags.Create) {
allocHostVars(1);
ΔallocHostVars(1);
}
if (rf & RenderFlags.Update) {
elementProperty(elIndex, 'id', bind(ctx.myValue), null, true);
ΔelementProperty(elIndex, 'id', Δbind(ctx.myValue), null, true);
}
},
template: (rf: RenderFlags, cmp: HostBindingWithContentHooks) => {}
@ -1078,7 +1080,7 @@ describe('host bindings', () => {
/** <host-binding-comp></host-binding-comp> */
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
element(0, 'host-binding-comp');
Δelement(0, 'host-binding-comp');
}
}, 1, 0, [HostBindingWithContentHooks]);
@ -1099,7 +1101,7 @@ describe('host bindings', () => {
class HostBindingToStyles {
width = 2;
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: HostBindingToStyles,
selectors: [['host-binding-to-styles']],
factory: () => hostBindingDir = new HostBindingToStyles(),
@ -1107,11 +1109,11 @@ describe('host bindings', () => {
vars: 0,
hostBindings: (rf: RenderFlags, ctx: HostBindingToStyles, elIndex: number) => {
if (rf & RenderFlags.Create) {
elementHostStyling(null, ['width']);
ΔelementHostStyling(null, ['width']);
}
if (rf & RenderFlags.Update) {
elementHostStyleProp(0, ctx.width, 'px');
elementHostStylingApply();
ΔelementHostStyleProp(0, ctx.width, 'px');
ΔelementHostStylingApply();
}
},
template: (rf: RenderFlags, cmp: HostBindingToStyles) => {}
@ -1121,7 +1123,7 @@ describe('host bindings', () => {
/** <host-binding-to-styles></host-binding-to-styles> */
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
element(0, 'host-binding-to-styles');
Δelement(0, 'host-binding-to-styles');
}
}, 1, 0, [HostBindingToStyles]);
@ -1145,17 +1147,17 @@ describe('host bindings', () => {
class HostBindingToStyles {
width = 2;
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: HostBindingToStyles,
selectors: [['', 'hostStyles', '']],
factory: () => hostBindingDir = new HostBindingToStyles(),
hostBindings: (rf: RenderFlags, ctx: HostBindingToStyles, elIndex: number) => {
if (rf & RenderFlags.Create) {
elementHostStyling(null, ['width']);
ΔelementHostStyling(null, ['width']);
}
if (rf & RenderFlags.Update) {
elementHostStyleProp(0, ctx.width, 'px');
elementHostStylingApply();
ΔelementHostStyleProp(0, ctx.width, 'px');
ΔelementHostStylingApply();
}
}
});
@ -1164,17 +1166,17 @@ describe('host bindings', () => {
class ContainerDir {
constructor(public vcr: ViewContainerRef) {}
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: ContainerDir,
selectors: [['', 'containerDir', '']],
factory: () => new ContainerDir(directiveInject(ViewContainerRef as any)),
factory: () => new ContainerDir(ΔdirectiveInject(ViewContainerRef as any)),
});
}
/** <div hostStyles containerDir></div> */
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['containerDir', '', 'hostStyles', '']);
Δelement(0, 'div', ['containerDir', '', 'hostStyles', '']);
}
}, 1, 0, [ContainerDir, HostBindingToStyles]);
@ -1194,7 +1196,7 @@ describe('host bindings', () => {
* }
*/
class StaticHostClass {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: StaticHostClass,
selectors: [['static-host-class']],
factory: () => new StaticHostClass(),
@ -1202,11 +1204,11 @@ describe('host bindings', () => {
vars: 0,
hostBindings: (rf: RenderFlags, ctx: StaticHostClass, elIndex: number) => {
if (rf & RenderFlags.Create) {
elementHostAttrs([AttributeMarker.Classes, 'mat-toolbar']);
elementHostStyling(['mat-toolbar']);
ΔelementHostAttrs([AttributeMarker.Classes, 'mat-toolbar']);
ΔelementHostStyling(['mat-toolbar']);
}
if (rf & RenderFlags.Update) {
elementHostStylingApply();
ΔelementHostStylingApply();
}
},
template: (rf: RenderFlags, cmp: StaticHostClass) => {}
@ -1216,7 +1218,7 @@ describe('host bindings', () => {
/** <static-host-class></static-host-class> */
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
element(0, 'static-host-class');
Δelement(0, 'static-host-class');
}
}, 1, 0, [StaticHostClass]);
@ -1234,24 +1236,24 @@ describe('host bindings', () => {
let hostBindingDir: UnsafeUrlHostBindingDir;
class UnsafeUrlHostBindingDir {
// val: any = value;
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: UnsafeUrlHostBindingDir,
selectors: [['', 'unsafeUrlHostBindingDir', '']],
factory: () => hostBindingDir = new UnsafeUrlHostBindingDir(),
hostBindings: (rf: RenderFlags, ctx: any, elementIndex: number) => {
if (rf & RenderFlags.Create) {
allocHostVars(1);
ΔallocHostVars(1);
}
if (rf & RenderFlags.Update) {
const fn = isAttribute ? elementAttribute : elementProperty;
(fn as any)(elementIndex, prop, bind(ctx[prop]), sanitizeFn, true);
const fn = isAttribute ? ΔelementAttribute : ΔelementProperty;
(fn as any)(elementIndex, prop, Δbind(ctx[prop]), sanitizeFn, true);
}
}
});
}
const fixture = new TemplateFixture(() => {
element(0, tag, ['unsafeUrlHostBindingDir', '']);
Δelement(0, tag, ['unsafeUrlHostBindingDir', '']);
}, () => {}, 1, 0, [UnsafeUrlHostBindingDir]);
const el = fixture.hostElement.querySelector(tag) !;
@ -1268,17 +1270,17 @@ describe('host bindings', () => {
}
verify(
'a', 'href', 'javascript:alert(1)', 'unsafe:javascript:alert(1)', sanitizeUrlOrResourceUrl,
'a', 'href', 'javascript:alert(1)', 'unsafe:javascript:alert(1)', ΔsanitizeUrlOrResourceUrl,
bypassSanitizationTrustUrl);
verify(
'script', 'src', bypassSanitizationTrustResourceUrl('javascript:alert(2)'),
'javascript:alert(2)', sanitizeUrlOrResourceUrl, bypassSanitizationTrustResourceUrl);
'javascript:alert(2)', ΔsanitizeUrlOrResourceUrl, bypassSanitizationTrustResourceUrl);
verify(
'blockquote', 'cite', 'javascript:alert(3)', 'unsafe:javascript:alert(3)', sanitizeUrl,
'blockquote', 'cite', 'javascript:alert(3)', 'unsafe:javascript:alert(3)', ΔsanitizeUrl,
bypassSanitizationTrustUrl);
verify(
'b', 'innerHTML', '<img src="javascript:alert(4)">',
'<img src="unsafe:javascript:alert(4)">', sanitizeHtml, bypassSanitizationTrustHtml,
'<img src="unsafe:javascript:alert(4)">', ΔsanitizeHtml, bypassSanitizationTrustHtml,
/* isAttribute */ false);
});
});

695
packages/core/test/render3/i18n_spec.ts
View File

File diff suppressed because it is too large Load Diff

145
packages/core/test/render3/inherit_definition_feature_spec.ts
View File

@ -7,7 +7,7 @@
*/
import {ElementRef, Inject, InjectionToken, QueryList, ɵAttributeMarker as AttributeMarker} from '../../src/core';
import {allocHostVars, bind, ComponentDef, contentQuery, defineBase, defineComponent, defineDirective, DirectiveDef, directiveInject, element, elementEnd, elementProperty, elementStart, InheritDefinitionFeature, load, loadContentQuery, loadViewQuery, NgOnChangesFeature, ProvidersFeature, queryRefresh, RenderFlags, viewQuery,} from '../../src/render3/index';
import {ΔallocHostVars, Δbind, ComponentDef, ΔcontentQuery, ΔdefineBase, ΔdefineComponent, ΔdefineDirective, DirectiveDef, ΔdirectiveInject, Δelement, ΔelementEnd, ΔelementProperty, ΔelementStart, ΔInheritDefinitionFeature, Δload, ΔloadContentQuery, ΔloadViewQuery, ΔNgOnChangesFeature, ΔProvidersFeature, ΔqueryRefresh, RenderFlags, ΔviewQuery,} from '../../src/render3/index';
import {ComponentFixture, createComponent, getDirectiveOnNode} from './render_util';
@ -28,11 +28,11 @@ describe('InheritDefinitionFeature', () => {
ngAfterViewChecked() {}
ngDoCheck() {}
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: SubDirective,
selectors: [['', 'subDir', '']],
factory: () => new SubDirective(),
features: [InheritDefinitionFeature]
features: [ΔInheritDefinitionFeature]
});
}
@ -50,7 +50,7 @@ describe('InheritDefinitionFeature', () => {
it('should inherit inputs', () => {
class SuperDirective {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
inputs: {
superFoo: ['foo', 'declaredFoo'],
superBar: 'bar',
@ -63,7 +63,7 @@ describe('InheritDefinitionFeature', () => {
}
class SubDirective extends SuperDirective {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: SubDirective,
inputs: {
subBaz: 'baz',
@ -71,7 +71,7 @@ describe('InheritDefinitionFeature', () => {
},
selectors: [['', 'subDir', '']],
factory: () => new SubDirective(),
features: [InheritDefinitionFeature]
features: [ΔInheritDefinitionFeature]
});
}
@ -93,7 +93,7 @@ describe('InheritDefinitionFeature', () => {
it('should inherit outputs', () => {
class SuperDirective {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
outputs: {
superFoo: 'foo',
superBar: 'bar',
@ -106,7 +106,7 @@ describe('InheritDefinitionFeature', () => {
}
class SubDirective extends SuperDirective {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: SubDirective,
outputs: {
subBaz: 'baz',
@ -114,7 +114,7 @@ describe('InheritDefinitionFeature', () => {
},
selectors: [['', 'subDir', '']],
factory: () => new SubDirective(),
features: [InheritDefinitionFeature]
features: [ΔInheritDefinitionFeature]
});
}
@ -130,7 +130,7 @@ describe('InheritDefinitionFeature', () => {
it('should detect EMPTY inputs and outputs', () => {
class SuperDirective {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
inputs: {
testIn: 'testIn',
},
@ -144,11 +144,11 @@ describe('InheritDefinitionFeature', () => {
}
class SubDirective extends SuperDirective {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: SubDirective,
selectors: [['', 'subDir', '']],
factory: () => new SubDirective(),
features: [InheritDefinitionFeature]
features: [ΔInheritDefinitionFeature]
});
}
@ -167,7 +167,7 @@ describe('InheritDefinitionFeature', () => {
class Class5 {
input5 = 'data, so data';
static ngBaseDef = defineBase({
static ngBaseDef = ΔdefineBase({
inputs: {
input5: 'input5',
},
@ -177,14 +177,14 @@ describe('InheritDefinitionFeature', () => {
class Class4 extends Class5 {
input4 = 'hehe';
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
inputs: {
input4: 'input4',
},
type: Class4,
selectors: [['', 'superDir', '']],
factory: () => new Class4(),
features: [InheritDefinitionFeature],
features: [ΔInheritDefinitionFeature],
});
}
@ -193,7 +193,7 @@ describe('InheritDefinitionFeature', () => {
class Class2 extends Class3 {
input3 = 'wee';
static ngBaseDef = defineBase({
static ngBaseDef = ΔdefineBase({
inputs: {
input3: ['alias3', 'input3'],
}
@ -204,7 +204,7 @@ describe('InheritDefinitionFeature', () => {
input1 = 'test';
input2 = 'whatever';
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: Class1,
inputs: {
input1: 'input1',
@ -212,7 +212,7 @@ describe('InheritDefinitionFeature', () => {
},
selectors: [['', 'subDir', '']],
factory: () => new Class1(),
features: [InheritDefinitionFeature],
features: [ΔInheritDefinitionFeature],
});
}
@ -239,7 +239,7 @@ describe('InheritDefinitionFeature', () => {
class Class5 {
output5 = 'data, so data';
static ngBaseDef = defineBase({
static ngBaseDef = ΔdefineBase({
outputs: {
output5: 'alias5',
},
@ -249,14 +249,14 @@ describe('InheritDefinitionFeature', () => {
class Class4 extends Class5 {
output4 = 'hehe';
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
outputs: {
output4: 'alias4',
},
type: Class4,
selectors: [['', 'superDir', '']],
factory: () => new Class4(),
features: [InheritDefinitionFeature],
features: [ΔInheritDefinitionFeature],
});
}
@ -265,7 +265,7 @@ describe('InheritDefinitionFeature', () => {
class Class2 extends Class3 {
output3 = 'wee';
static ngBaseDef = defineBase({
static ngBaseDef = ΔdefineBase({
outputs: {
output3: 'alias3',
}
@ -276,7 +276,7 @@ describe('InheritDefinitionFeature', () => {
output1 = 'test';
output2 = 'whatever';
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: Class1,
outputs: {
output1: 'alias1',
@ -284,7 +284,7 @@ describe('InheritDefinitionFeature', () => {
},
selectors: [['', 'subDir', '']],
factory: () => new Class1(),
features: [InheritDefinitionFeature],
features: [ΔInheritDefinitionFeature],
});
}
@ -305,15 +305,15 @@ describe('InheritDefinitionFeature', () => {
class SuperDirective {
id = 'my-id';
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: SuperDirective,
selectors: [['', 'superDir', '']],
hostBindings: (rf: RenderFlags, ctx: SuperDirective, elementIndex: number) => {
if (rf & RenderFlags.Create) {
allocHostVars(1);
ΔallocHostVars(1);
}
if (rf & RenderFlags.Update) {
elementProperty(elementIndex, 'id', bind(ctx.id));
ΔelementProperty(elementIndex, 'id', Δbind(ctx.id));
}
},
factory: () => new SuperDirective(),
@ -323,26 +323,26 @@ describe('InheritDefinitionFeature', () => {
class SubDirective extends SuperDirective {
title = 'my-title';
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: SubDirective,
selectors: [['', 'subDir', '']],
hostBindings: (rf: RenderFlags, ctx: SubDirective, elementIndex: number) => {
if (rf & RenderFlags.Create) {
allocHostVars(1);
ΔallocHostVars(1);
}
if (rf & RenderFlags.Update) {
elementProperty(elementIndex, 'title', bind(ctx.title));
ΔelementProperty(elementIndex, 'title', Δbind(ctx.title));
}
},
factory: () => subDir = new SubDirective(),
features: [InheritDefinitionFeature]
features: [ΔInheritDefinitionFeature]
});
}
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['subDir', '']);
Δelement(0, 'div', ['subDir', '']);
}
}, 1, 0, [SubDirective]);
@ -374,7 +374,7 @@ describe('InheritDefinitionFeature', () => {
*/
class SuperComponent {
superQuery?: QueryList<any>;
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: SuperComponent,
template: () => {},
consts: 0,
@ -382,11 +382,11 @@ describe('InheritDefinitionFeature', () => {
selectors: [['super-comp']],
viewQuery: <T>(rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
viewQuery(['super'], false, null);
ΔviewQuery(['super'], false, null);
}
if (rf & RenderFlags.Update) {
let tmp: any;
queryRefresh(tmp = loadViewQuery<QueryList<any>>()) &&
ΔqueryRefresh(tmp = ΔloadViewQuery<QueryList<any>>()) &&
(ctx.superQuery = tmp as QueryList<any>);
}
},
@ -404,13 +404,13 @@ describe('InheritDefinitionFeature', () => {
*/
class SubComponent extends SuperComponent {
subQuery?: QueryList<any>;
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: SubComponent,
template: (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['id', 'sub'], ['sub', '']);
element(2, 'div', ['id', 'super'], ['super', '']);
element(4, 'some-comp');
Δelement(0, 'div', ['id', 'sub'], ['sub', '']);
Δelement(2, 'div', ['id', 'super'], ['super', '']);
Δelement(4, 'some-comp');
}
},
consts: 5,
@ -418,16 +418,16 @@ describe('InheritDefinitionFeature', () => {
selectors: [['sub-comp']],
viewQuery: (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
viewQuery(['sub'], false, null);
ΔviewQuery(['sub'], false, null);
}
if (rf & RenderFlags.Update) {
let tmp: any;
queryRefresh(tmp = loadViewQuery<QueryList<any>>()) &&
ΔqueryRefresh(tmp = ΔloadViewQuery<QueryList<any>>()) &&
(ctx.subQuery = tmp as QueryList<any>);
}
},
factory: () => new SubComponent(),
features: [InheritDefinitionFeature],
features: [ΔInheritDefinitionFeature],
directives: [SomeComp]
});
}
@ -437,7 +437,7 @@ describe('InheritDefinitionFeature', () => {
const log: Array<[string, RenderFlags, any]> = [];
class SuperComponent {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: SuperComponent,
template: () => {},
consts: 0,
@ -451,7 +451,7 @@ describe('InheritDefinitionFeature', () => {
}
class SubComponent extends SuperComponent {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: SubComponent,
template: () => {},
consts: 0,
@ -461,7 +461,7 @@ describe('InheritDefinitionFeature', () => {
log.push(['sub', rf, ctx]);
},
factory: () => new SubComponent(),
features: [InheritDefinitionFeature]
features: [ΔInheritDefinitionFeature]
});
}
@ -497,8 +497,8 @@ describe('InheritDefinitionFeature', () => {
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
element(0, 'sub-comp');
element(1, 'sub-comp');
Δelement(0, 'sub-comp');
Δelement(1, 'sub-comp');
}
subCompOne = getDirectiveOnNode(0);
subCompTwo = getDirectiveOnNode(1);
@ -524,7 +524,7 @@ describe('InheritDefinitionFeature', () => {
const log: string[] = [];
class SuperDirective {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: SuperDirective,
selectors: [['', 'superDir', '']],
contentQueries: () => { log.push('super'); },
@ -533,12 +533,12 @@ describe('InheritDefinitionFeature', () => {
}
class SubDirective extends SuperDirective {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: SubDirective,
selectors: [['', 'subDir', '']],
contentQueries: () => { log.push('sub'); },
factory: () => new SubDirective(),
features: [InheritDefinitionFeature]
features: [ΔInheritDefinitionFeature]
});
}
@ -555,17 +555,17 @@ describe('InheritDefinitionFeature', () => {
// @ContentChildren('foo')
foos !: QueryList<ElementRef>;
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: SuperDirective,
selectors: [['', 'super-dir', '']],
factory: () => new SuperDirective(),
contentQueries: (rf: RenderFlags, ctx: any, dirIndex: number) => {
if (rf & RenderFlags.Create) {
contentQuery(dirIndex, ['foo'], true, null);
ΔcontentQuery(dirIndex, ['foo'], true, null);
}
if (rf & RenderFlags.Update) {
let tmp: any;
queryRefresh(tmp = loadContentQuery<ElementRef>()) && (ctx.foos = tmp);
ΔqueryRefresh(tmp = ΔloadContentQuery<ElementRef>()) && (ctx.foos = tmp);
}
}
});
@ -575,20 +575,20 @@ describe('InheritDefinitionFeature', () => {
// @ContentChildren('bar')
bars !: QueryList<ElementRef>;
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: SubDirective,
selectors: [['', 'sub-dir', '']],
factory: () => dirInstance = new SubDirective(),
contentQueries: (rf: RenderFlags, ctx: any, dirIndex: number) => {
if (rf & RenderFlags.Create) {
contentQuery(dirIndex, ['bar'], true, null);
ΔcontentQuery(dirIndex, ['bar'], true, null);
}
if (rf & RenderFlags.Update) {
let tmp: any;
queryRefresh(tmp = loadContentQuery<ElementRef>()) && (ctx.bars = tmp);
ΔqueryRefresh(tmp = ΔloadContentQuery<ElementRef>()) && (ctx.bars = tmp);
}
},
features: [InheritDefinitionFeature]
features: [ΔInheritDefinitionFeature]
});
}
@ -600,12 +600,12 @@ describe('InheritDefinitionFeature', () => {
*/
const AppComponent = createComponent('app-component', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div', [AttributeMarker.Bindings, 'sub-dir']);
ΔelementStart(0, 'div', [AttributeMarker.Bindings, 'sub-dir']);
{
element(1, 'span', null, ['foo', '']);
element(3, 'span', null, ['bar', '']);
Δelement(1, 'span', null, ['foo', '']);
Δelement(3, 'span', null, ['bar', '']);
}
elementEnd();
ΔelementEnd();
}
}, 5, 0, [SubDirective]);
@ -616,7 +616,7 @@ describe('InheritDefinitionFeature', () => {
it('should throw if inheriting a component from a directive', () => {
class SuperComponent {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: SuperComponent,
template: () => {},
selectors: [['', 'superDir', '']],
@ -627,11 +627,11 @@ describe('InheritDefinitionFeature', () => {
}
expect(() => {
class SubDirective extends SuperComponent{static ngDirectiveDef = defineDirective({
class SubDirective extends SuperComponent{static ngDirectiveDef = ΔdefineDirective({
type: SubDirective,
selectors: [['', 'subDir', '']],
factory: () => new SubDirective(),
features: [InheritDefinitionFeature]
features: [ΔInheritDefinitionFeature]
});}
}).toThrowError('Directives cannot inherit Components');
});
@ -643,23 +643,24 @@ describe('InheritDefinitionFeature', () => {
// providers: [{ provide: SOME_DIRS, useClass: SuperDirective, multi: true }]
class SuperDirective {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: SuperDirective,
selectors: [['', 'superDir', '']],
factory: () => new SuperDirective(),
features: [ProvidersFeature([{provide: SOME_DIRS, useClass: SuperDirective, multi: true}])],
features:
[ΔProvidersFeature([{provide: SOME_DIRS, useClass: SuperDirective, multi: true}])],
});
}
// providers: [{ provide: SOME_DIRS, useClass: SubDirective, multi: true }]
class SubDirective extends SuperDirective {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: SubDirective,
selectors: [['', 'subDir', '']],
factory: () => new SubDirective(),
features: [
ProvidersFeature([{provide: SOME_DIRS, useClass: SubDirective, multi: true}]),
InheritDefinitionFeature
ΔProvidersFeature([{provide: SOME_DIRS, useClass: SubDirective, multi: true}]),
ΔInheritDefinitionFeature
],
});
}
@ -667,17 +668,17 @@ describe('InheritDefinitionFeature', () => {
class OtherDirective {
constructor(@Inject(SOME_DIRS) public dirs: any) {}
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: OtherDirective,
selectors: [['', 'otherDir', '']],
factory: () => otherDir = new OtherDirective(directiveInject(SOME_DIRS)),
factory: () => otherDir = new OtherDirective(ΔdirectiveInject(SOME_DIRS)),
});
}
/** <div otherDir subDir></div> */
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['otherDir', '', 'subDir', '']);
Δelement(0, 'div', ['otherDir', '', 'subDir', '']);
}
}, 1, 0, [OtherDirective, SubDirective, SuperDirective]);

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

@ -7,21 +7,23 @@
*/
import {NgForOfContext} from '@angular/common';
import {RenderFlags, elementStart, elementStyling, elementEnd, element, elementProperty, bind, elementAttribute, select, elementStyleProp, elementStylingApply, elementStylingMap, template, text, textBinding, interpolation1, property} from '../../src/render3/index';
import {defineComponent} from '../../src/render3/definition';
import {ΔdefineComponent} from '../../src/render3/definition';
import {RenderFlags, Δbind, Δelement, ΔelementAttribute, ΔelementEnd, ΔelementProperty, ΔelementStart, ΔelementStyleProp, ΔelementStyling, ΔelementStylingApply, ΔelementStylingMap, Δinterpolation1, Δproperty, Δselect, Δtemplate, Δtext, ΔtextBinding} from '../../src/render3/index';
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';
import {ΔdefaultStyleSanitizer, ΔsanitizeHtml, ΔsanitizeResourceUrl, ΔsanitizeScript, ΔsanitizeStyle, ΔsanitizeUrl} from '../../src/sanitization/sanitization';
import {Sanitizer, SecurityContext} from '../../src/sanitization/security';
import {StyleSanitizeFn} from '../../src/sanitization/style_sanitizer';
import {NgForOf} from './common_with_def';
import {ComponentFixture, TemplateFixture} from './render_util';
describe('instructions', () => {
function createAnchor() {
elementStart(0, 'a');
elementStyling();
elementEnd();
ΔelementStart(0, 'a');
ΔelementStyling();
ΔelementEnd();
}
function createDiv(
@ -35,21 +37,21 @@ describe('instructions', () => {
if (initialStyles) {
attrs.push(AttributeMarker.Styles, ...initialStyles);
}
elementStart(0, 'div', attrs);
elementStyling(classBindingNames || null, styleBindingNames || null, styleSanitizer);
elementEnd();
ΔelementStart(0, 'div', attrs);
ΔelementStyling(classBindingNames || null, styleBindingNames || null, styleSanitizer);
ΔelementEnd();
}
function createScript() { element(0, 'script'); }
function createScript() { Δelement(0, 'script'); }
describe('bind', () => {
it('should update bindings when value changes', () => {
const t = new TemplateFixture(createAnchor, () => {}, 1, 1);
t.update(() => elementProperty(0, 'title', bind('Hello')));
t.update(() => ΔelementProperty(0, 'title', Δbind('Hello')));
expect(t.html).toEqual('<a title="Hello"></a>');
t.update(() => elementProperty(0, 'title', bind('World')));
t.update(() => ΔelementProperty(0, 'title', Δbind('World')));
expect(t.html).toEqual('<a title="World"></a>');
expect(ngDevMode).toHaveProperties({
firstTemplatePass: 1,
@ -61,7 +63,7 @@ describe('instructions', () => {
});
it('should not update bindings when value does not change', () => {
const idempotentUpdate = () => elementProperty(0, 'title', bind('Hello'));
const idempotentUpdate = () => ΔelementProperty(0, 'title', Δbind('Hello'));
const t = new TemplateFixture(createAnchor, idempotentUpdate, 1, 1);
t.update();
@ -82,7 +84,7 @@ describe('instructions', () => {
describe('element', () => {
it('should create an element', () => {
const t = new TemplateFixture(() => {
element(0, 'div', ['id', 'test', 'title', 'Hello']);
Δelement(0, 'div', ['id', 'test', 'title', 'Hello']);
}, () => {}, 1);
const div = (t.hostElement as HTMLElement).querySelector('div') !;
@ -98,7 +100,7 @@ describe('instructions', () => {
it('should allow setting namespaced attributes', () => {
const t = new TemplateFixture(() => {
element(0, 'div', [
Δelement(0, 'div', [
// id="test"
'id',
'test',
@ -142,12 +144,12 @@ describe('instructions', () => {
it('should use sanitizer function', () => {
const t = new TemplateFixture(createDiv, () => {}, 1);
t.update(() => elementAttribute(0, 'title', 'javascript:true', sanitizeUrl));
t.update(() => ΔelementAttribute(0, 'title', 'javascript:true', ΔsanitizeUrl));
expect(t.html).toEqual('<div title="unsafe:javascript:true"></div>');
t.update(
() => elementAttribute(
0, 'title', bypassSanitizationTrustUrl('javascript:true'), sanitizeUrl));
() => ΔelementAttribute(
0, 'title', bypassSanitizationTrustUrl('javascript:true'), ΔsanitizeUrl));
expect(t.html).toEqual('<div title="javascript:true"></div>');
expect(ngDevMode).toHaveProperties({
firstTemplatePass: 1,
@ -163,9 +165,9 @@ describe('instructions', () => {
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();
expect(() => { t.update(() => { Δselect(-1); }); }).toThrow();
expect(() => { t.update(() => { Δselect(1); }); }).toThrow();
expect(() => { t.update(() => { Δselect(0); }); }).not.toThrow();
});
});
@ -175,13 +177,13 @@ describe('instructions', () => {
// <div [title]="title"></div>
const t = new TemplateFixture(createDiv, () => {}, 1, 1);
t.update(() => {
select(0);
property('title', 'one');
Δselect(0);
Δproperty('title', 'one');
});
expect(t.html).toEqual('<div title="one"></div>');
t.update(() => {
select(0);
property('title', 'two');
Δselect(0);
Δproperty('title', 'two');
});
expect(t.html).toEqual('<div title="two"></div>');
expect(ngDevMode).toHaveProperties({
@ -198,13 +200,13 @@ describe('instructions', () => {
// <div [title]="title" [accesskey]="key"></div>
const t = new TemplateFixture(createDiv, () => {}, 1, 2);
t.update(() => {
select(0);
property('title', 'one')('accessKey', 'A');
Δ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');
Δselect(0);
Δproperty('title', 'two')('accessKey', 'B');
});
expect(t.html).toEqual('<div accesskey="B" title="two"></div>');
expect(ngDevMode).toHaveProperties({
@ -221,13 +223,13 @@ describe('instructions', () => {
// <div [title]="title" [accesskey]="key"></div>
const t = new TemplateFixture(createDiv, () => {}, 1, 2);
t.update(() => {
select(0);
property('title', 'one')('accessKey', 'A');
Δ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.
Δ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({
@ -241,11 +243,11 @@ describe('instructions', () => {
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(() => { Δproperty('title', 'test'); }); }).toThrow();
expect(() => {
t.update(() => {
select(0);
property('title', 'test');
Δselect(0);
Δproperty('title', 'test');
});
}).not.toThrow();
});
@ -255,12 +257,12 @@ describe('instructions', () => {
it('should use sanitizer function when available', () => {
const t = new TemplateFixture(createDiv, () => {}, 1);
t.update(() => elementProperty(0, 'title', 'javascript:true', sanitizeUrl));
t.update(() => ΔelementProperty(0, 'title', 'javascript:true', ΔsanitizeUrl));
expect(t.html).toEqual('<div title="unsafe:javascript:true"></div>');
t.update(
() => elementProperty(
0, 'title', bypassSanitizationTrustUrl('javascript:false'), sanitizeUrl));
() => ΔelementProperty(
0, 'title', bypassSanitizationTrustUrl('javascript:false'), ΔsanitizeUrl));
expect(t.html).toEqual('<div title="javascript:false"></div>');
expect(ngDevMode).toHaveProperties({
firstTemplatePass: 1,
@ -271,10 +273,10 @@ describe('instructions', () => {
});
it('should not stringify non string values', () => {
const t = new TemplateFixture(() => { element(0, 'input'); }, () => {}, 1);
const t = new TemplateFixture(() => { Δelement(0, 'input'); }, () => {}, 1);
// Note: don't use 'hidden' here because IE10 does not support the hidden property
t.update(() => elementProperty(0, 'required', false));
t.update(() => ΔelementProperty(0, 'required', false));
// The required property would be true if `false` was stringified into `"false"`.
expect((t.hostElement as HTMLElement).querySelector('input') !.required).toEqual(false);
expect(ngDevMode).toHaveProperties({
@ -290,18 +292,18 @@ describe('instructions', () => {
describe('elementStyleProp', () => {
it('should automatically sanitize unless a bypass operation is applied', () => {
const t = new TemplateFixture(() => {
return createDiv(null, null, null, ['background-image'], defaultStyleSanitizer);
return createDiv(null, null, null, ['background-image'], ΔdefaultStyleSanitizer);
}, () => {}, 1);
t.update(() => {
elementStyleProp(0, 0, 'url("http://server")');
elementStylingApply(0);
ΔelementStyleProp(0, 0, 'url("http://server")');
ΔelementStylingApply(0);
});
// nothing is set because sanitizer suppresses it.
expect(t.html).toEqual('<div></div>');
t.update(() => {
elementStyleProp(0, 0, bypassSanitizationTrustStyle('url("http://server2")'));
elementStylingApply(0);
ΔelementStyleProp(0, 0, bypassSanitizationTrustStyle('url("http://server2")'));
ΔelementStylingApply(0);
});
expect((t.hostElement.firstChild as HTMLElement).style.getPropertyValue('background-image'))
.toEqual('url("http://server2")');
@ -315,16 +317,16 @@ describe('instructions', () => {
1, sanitizerInterceptor);
t.update(() => {
elementStyleProp(0, 0, bypassSanitizationTrustStyle('apple'));
elementStylingApply(0);
ΔelementStyleProp(0, 0, bypassSanitizationTrustStyle('apple'));
ΔelementStylingApply(0);
});
expect(sanitizerInterceptor.lastValue !).toEqual('apple');
sanitizerInterceptor.lastValue = null;
t.update(() => {
elementStyleProp(0, 0, bypassSanitizationTrustStyle('apple'));
elementStylingApply(0);
ΔelementStyleProp(0, 0, bypassSanitizationTrustStyle('apple'));
ΔelementStylingApply(0);
});
expect(sanitizerInterceptor.lastValue).toEqual(null);
});
@ -332,16 +334,16 @@ describe('instructions', () => {
describe('elementStyleMap', () => {
function createDivWithStyle() {
elementStart(0, 'div', [AttributeMarker.Styles, 'height', '10px']);
elementStyling([], ['height']);
elementEnd();
ΔelementStart(0, 'div', [AttributeMarker.Styles, 'height', '10px']);
ΔelementStyling([], ['height']);
ΔelementEnd();
}
it('should add style', () => {
const fixture = new TemplateFixture(createDivWithStyle, () => {}, 1);
fixture.update(() => {
elementStylingMap(0, null, {'background-color': 'red'});
elementStylingApply(0);
ΔelementStylingMap(0, null, {'background-color': 'red'});
ΔelementStylingApply(0);
});
expect(fixture.html).toEqual('<div style="background-color: red; height: 10px;"></div>');
});
@ -355,7 +357,7 @@ describe('instructions', () => {
sanitizerInterceptor);
fixture.update(() => {
elementStylingMap(0, null, {
ΔelementStylingMap(0, null, {
'background-image': 'background-image',
'background': 'background',
'border-image': 'border-image',
@ -364,7 +366,7 @@ describe('instructions', () => {
'filter': 'filter',
'width': 'width'
});
elementStylingApply(0);
ΔelementStylingApply(0);
});
const props = detectedValues.sort();
@ -376,16 +378,16 @@ describe('instructions', () => {
describe('elementClass', () => {
function createDivWithStyling() {
elementStart(0, 'div');
elementStyling();
elementEnd();
ΔelementStart(0, 'div');
ΔelementStyling();
ΔelementEnd();
}
it('should add class', () => {
const fixture = new TemplateFixture(createDivWithStyling, () => {}, 1);
fixture.update(() => {
elementStylingMap(0, 'multiple classes');
elementStylingApply(0);
ΔelementStylingMap(0, 'multiple classes');
ΔelementStylingApply(0);
});
expect(fixture.html).toEqual('<div class="multiple classes"></div>');
});
@ -398,26 +400,26 @@ describe('instructions', () => {
function ToDoAppComponent_NgForOf_Template_0(rf: RenderFlags, ctx0: NgForOfContext<any>) {
if (rf & RenderFlags.Create) {
elementStart(0, 'ul');
template(1, ToDoAppComponent_NgForOf_NgForOf_Template_1, 2, 1, 'li', _c1);
elementEnd();
ΔelementStart(0, 'ul');
Δtemplate(1, ToDoAppComponent_NgForOf_NgForOf_Template_1, 2, 1, 'li', _c1);
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const row_r2 = ctx0.$implicit;
elementProperty(1, 'ngForOf', bind(row_r2));
ΔelementProperty(1, 'ngForOf', Δbind(row_r2));
}
}
function ToDoAppComponent_NgForOf_NgForOf_Template_1(
rf: RenderFlags, ctx1: NgForOfContext<any>) {
if (rf & RenderFlags.Create) {
elementStart(0, 'li');
text(1);
elementEnd();
ΔelementStart(0, 'li');
Δtext(1);
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
const col_r3 = ctx1.$implicit;
textBinding(1, interpolation1('', col_r3, ''));
ΔtextBinding(1, Δinterpolation1('', col_r3, ''));
}
}
@ -429,7 +431,7 @@ describe('instructions', () => {
class NestedLoops {
rows = [['a', 'b'], ['A', 'B'], ['a', 'b'], ['A', 'B']];
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: NestedLoops,
selectors: [['nested-loops']],
factory: function ToDoAppComponent_Factory() { return new NestedLoops(); },
@ -437,10 +439,10 @@ describe('instructions', () => {
vars: 1,
template: function ToDoAppComponent_Template(rf: RenderFlags, ctx: NestedLoops) {
if (rf & RenderFlags.Create) {
template(0, ToDoAppComponent_NgForOf_Template_0, 2, 1, 'ul', _c0);
Δtemplate(0, ToDoAppComponent_NgForOf_Template_0, 2, 1, 'ul', _c0);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngForOf', bind(ctx.rows));
ΔelementProperty(0, 'ngForOf', Δbind(ctx.rows));
}
},
directives: [NgForOf]
@ -462,7 +464,7 @@ describe('instructions', () => {
const inputValue = 'http://foo';
const outputValue = 'http://foo-sanitized';
t.update(() => elementAttribute(0, 'href', inputValue, sanitizeUrl));
t.update(() => ΔelementAttribute(0, 'href', inputValue, ΔsanitizeUrl));
expect(t.html).toEqual(`<a href="${outputValue}"></a>`);
expect(s.lastSanitizedValue).toEqual(outputValue);
});
@ -473,7 +475,7 @@ describe('instructions', () => {
const inputValue = s.bypassSecurityTrustUrl('http://foo');
const outputValue = 'http://foo';
t.update(() => elementAttribute(0, 'href', inputValue, sanitizeUrl));
t.update(() => ΔelementAttribute(0, 'href', inputValue, ΔsanitizeUrl));
expect(t.html).toEqual(`<a href="${outputValue}"></a>`);
expect(s.lastSanitizedValue).toBeFalsy();
});
@ -484,7 +486,7 @@ describe('instructions', () => {
const inputValue = bypassSanitizationTrustUrl('http://foo');
const outputValue = 'http://foo-ivy';
t.update(() => elementAttribute(0, 'href', inputValue, sanitizeUrl));
t.update(() => ΔelementAttribute(0, 'href', inputValue, ΔsanitizeUrl));
expect(t.html).toEqual(`<a href="${outputValue}"></a>`);
expect(s.lastSanitizedValue).toBeFalsy();
});
@ -495,7 +497,7 @@ describe('instructions', () => {
const inputValue = 'color:red';
const outputValue = 'color:blue';
t.update(() => elementAttribute(0, 'style', inputValue, sanitizeStyle));
t.update(() => ΔelementAttribute(0, 'style', inputValue, ΔsanitizeStyle));
expect(stripStyleWsCharacters(t.html)).toEqual(`<div style="${outputValue}"></div>`);
expect(s.lastSanitizedValue).toEqual(outputValue);
});
@ -506,7 +508,7 @@ describe('instructions', () => {
const inputValue = s.bypassSecurityTrustStyle('color:maroon');
const outputValue = 'color:maroon';
t.update(() => elementAttribute(0, 'style', inputValue, sanitizeStyle));
t.update(() => ΔelementAttribute(0, 'style', inputValue, ΔsanitizeStyle));
expect(stripStyleWsCharacters(t.html)).toEqual(`<div style="${outputValue}"></div>`);
expect(s.lastSanitizedValue).toBeFalsy();
});
@ -517,7 +519,7 @@ describe('instructions', () => {
const inputValue = bypassSanitizationTrustStyle('font-family:foo');
const outputValue = 'font-family:foo-ivy';
t.update(() => elementAttribute(0, 'style', inputValue, sanitizeStyle));
t.update(() => ΔelementAttribute(0, 'style', inputValue, ΔsanitizeStyle));
expect(stripStyleWsCharacters(t.html)).toEqual(`<div style="${outputValue}"></div>`);
expect(s.lastSanitizedValue).toBeFalsy();
});
@ -528,7 +530,7 @@ describe('instructions', () => {
const inputValue = 'http://resource';
const outputValue = 'http://resource-sanitized';
t.update(() => elementAttribute(0, 'src', inputValue, sanitizeResourceUrl));
t.update(() => ΔelementAttribute(0, 'src', inputValue, ΔsanitizeResourceUrl));
expect(t.html).toEqual(`<script src="${outputValue}"></script>`);
expect(s.lastSanitizedValue).toEqual(outputValue);
});
@ -539,7 +541,7 @@ describe('instructions', () => {
const inputValue = s.bypassSecurityTrustResourceUrl('file://all-my-secrets.pdf');
const outputValue = 'file://all-my-secrets.pdf';
t.update(() => elementAttribute(0, 'src', inputValue, sanitizeResourceUrl));
t.update(() => ΔelementAttribute(0, 'src', inputValue, ΔsanitizeResourceUrl));
expect(t.html).toEqual(`<script src="${outputValue}"></script>`);
expect(s.lastSanitizedValue).toBeFalsy();
});
@ -550,7 +552,7 @@ describe('instructions', () => {
const inputValue = bypassSanitizationTrustResourceUrl('file://all-my-secrets.pdf');
const outputValue = 'file://all-my-secrets.pdf-ivy';
t.update(() => elementAttribute(0, 'src', inputValue, sanitizeResourceUrl));
t.update(() => ΔelementAttribute(0, 'src', inputValue, ΔsanitizeResourceUrl));
expect(t.html).toEqual(`<script src="${outputValue}"></script>`);
expect(s.lastSanitizedValue).toBeFalsy();
});
@ -561,7 +563,7 @@ describe('instructions', () => {
const inputValue = 'fn();';
const outputValue = 'fn(); //sanitized';
t.update(() => elementProperty(0, 'innerHTML', inputValue, sanitizeScript));
t.update(() => ΔelementProperty(0, 'innerHTML', inputValue, ΔsanitizeScript));
expect(t.html).toEqual(`<script>${outputValue}</script>`);
expect(s.lastSanitizedValue).toEqual(outputValue);
});
@ -572,7 +574,7 @@ describe('instructions', () => {
const inputValue = s.bypassSecurityTrustScript('alert("bar")');
const outputValue = 'alert("bar")';
t.update(() => elementProperty(0, 'innerHTML', inputValue, sanitizeScript));
t.update(() => ΔelementProperty(0, 'innerHTML', inputValue, ΔsanitizeScript));
expect(t.html).toEqual(`<script>${outputValue}</script>`);
expect(s.lastSanitizedValue).toBeFalsy();
});
@ -583,7 +585,7 @@ describe('instructions', () => {
const inputValue = bypassSanitizationTrustScript('alert("bar")');
const outputValue = 'alert("bar")-ivy';
t.update(() => elementProperty(0, 'innerHTML', inputValue, sanitizeScript));
t.update(() => ΔelementProperty(0, 'innerHTML', inputValue, ΔsanitizeScript));
expect(t.html).toEqual(`<script>${outputValue}</script>`);
expect(s.lastSanitizedValue).toBeFalsy();
});
@ -594,7 +596,7 @@ describe('instructions', () => {
const inputValue = '<header></header>';
const outputValue = '<header></header> <!--sanitized-->';
t.update(() => elementProperty(0, 'innerHTML', inputValue, sanitizeHtml));
t.update(() => ΔelementProperty(0, 'innerHTML', inputValue, ΔsanitizeHtml));
expect(t.html).toEqual(`<div>${outputValue}</div>`);
expect(s.lastSanitizedValue).toEqual(outputValue);
});
@ -605,7 +607,7 @@ describe('instructions', () => {
const inputValue = s.bypassSecurityTrustHtml('<div onclick="alert(123)"></div>');
const outputValue = '<div onclick="alert(123)"></div>';
t.update(() => elementProperty(0, 'innerHTML', inputValue, sanitizeHtml));
t.update(() => ΔelementProperty(0, 'innerHTML', inputValue, ΔsanitizeHtml));
expect(t.html).toEqual(`<div>${outputValue}</div>`);
expect(s.lastSanitizedValue).toBeFalsy();
});
@ -616,7 +618,7 @@ describe('instructions', () => {
const inputValue = bypassSanitizationTrustHtml('<div onclick="alert(123)"></div>');
const outputValue = '<div onclick="alert(123)"></div>-ivy';
t.update(() => elementProperty(0, 'innerHTML', inputValue, sanitizeHtml));
t.update(() => ΔelementProperty(0, 'innerHTML', inputValue, ΔsanitizeHtml));
expect(t.html).toEqual(`<div>${outputValue}</div>`);
expect(s.lastSanitizedValue).toBeFalsy();
});
@ -661,7 +663,7 @@ class LocalMockSanitizer implements Sanitizer {
class MockSanitizerInterceptor {
public lastValue: string|null = null;
constructor(private _interceptorFn?: ((value: any) => any)|null) {}
getStyleSanitizer() { return defaultStyleSanitizer; }
getStyleSanitizer() { return ΔdefaultStyleSanitizer; }
sanitize(context: SecurityContext, value: LocalSanitizedValue|string|null|any): string|null {
if (this._interceptorFn) {
this._interceptorFn(value);

974
packages/core/test/render3/integration_spec.ts
View File

File diff suppressed because it is too large Load Diff

28
packages/core/test/render3/ivy/jit_spec.ts
View File

@ -7,10 +7,10 @@
*/
import 'reflect-metadata';
import {ElementRef, QueryList, ɵsetComponentScope as setComponentScope} from '@angular/core';
import {ElementRef, QueryList, ΔsetComponentScope as setComponentScope} from '@angular/core';
import {Injectable} from '@angular/core/src/di/injectable';
import {inject, setCurrentInjector} from '@angular/core/src/di/injector_compatibility';
import {InjectorDef, defineInjectable} from '@angular/core/src/di/interface/defs';
import {setCurrentInjector, Δinject} from '@angular/core/src/di/injector_compatibility';
import {ΔInjectorDef, ΔdefineInjectable} from '@angular/core/src/di/interface/defs';
import {ivyEnabled} from '@angular/core/src/ivy_switch';
import {ContentChild, ContentChildren, ViewChild, ViewChildren} from '@angular/core/src/metadata/di';
import {Component, Directive, HostBinding, HostListener, Input, Output, Pipe} from '@angular/core/src/metadata/directives';
@ -45,7 +45,7 @@ ivyEnabled && describe('render3 jit', () => {
expect(ServiceAny.ngInjectableDef).toBeDefined();
expect(ServiceAny.ngInjectableDef.providedIn).toBe('root');
expect(inject(Service) instanceof Service).toBe(true);
expect(Δinject(Service) instanceof Service).toBe(true);
});
it('compiles an injectable with a useValue provider', () => {
@ -53,7 +53,7 @@ ivyEnabled && describe('render3 jit', () => {
class Service {
}
expect(inject(Service)).toBe('test');
expect(Δinject(Service)).toBe('test');
});
it('compiles an injectable with a useExisting provider', () => {
@ -65,7 +65,7 @@ ivyEnabled && describe('render3 jit', () => {
class Service {
}
expect(inject(Service)).toBe('test');
expect(Δinject(Service)).toBe('test');
});
it('compiles an injectable with a useFactory provider, without deps', () => {
@ -74,7 +74,7 @@ ivyEnabled && describe('render3 jit', () => {
class Service {
}
expect(inject(Service)).toBe('test');
expect(Δinject(Service)).toBe('test');
});
it('compiles an injectable with a useFactory provider, with deps', () => {
@ -86,7 +86,7 @@ ivyEnabled && describe('render3 jit', () => {
class Service {
}
expect(inject(Service)).toBe('test');
expect(Δinject(Service)).toBe('test');
});
it('compiles an injectable with a useClass provider, with deps', () => {
@ -104,7 +104,7 @@ ivyEnabled && describe('render3 jit', () => {
}
const ServiceAny = Service as any;
expect(inject(Service).value).toBe('test');
expect(Δinject(Service).value).toBe('test');
});
it('compiles an injectable with a useClass provider, without deps', () => {
@ -119,8 +119,8 @@ ivyEnabled && describe('render3 jit', () => {
get value(): number { return 0; }
}
expect(inject(Existing).value).toBe(1);
const injected = inject(Service);
expect(Δinject(Existing).value).toBe(1);
const injected = Δinject(Service);
expect(injected instanceof Existing).toBe(true);
expect(injected.value).toBe(2);
});
@ -139,7 +139,7 @@ ivyEnabled && describe('render3 jit', () => {
class Child extends Base {
}
expect(inject(Child).dep instanceof Dep).toBe(true);
expect(Δinject(Child).dep instanceof Dep).toBe(true);
});
it('compiles a module to a definition', () => {
@ -167,7 +167,7 @@ ivyEnabled && describe('render3 jit', () => {
it('compiles a module to an ngInjectorDef with the providers', () => {
class Token {
static ngInjectableDef = defineInjectable({
static ngInjectableDef = ΔdefineInjectable({
providedIn: 'root',
factory: () => 'default',
});
@ -180,7 +180,7 @@ ivyEnabled && describe('render3 jit', () => {
constructor(public token: Token) {}
}
const injectorDef: InjectorDef<Module> = (Module as any).ngInjectorDef;
const injectorDef: ΔInjectorDef<Module> = (Module as any).ngInjectorDef;
const instance = injectorDef.factory();
// Since the instance was created outside of an injector using the module, the

12
packages/core/test/render3/jit_environment_spec.ts
View File

@ -12,12 +12,12 @@ import {Identifiers} from '@angular/compiler/src/render3/r3_identifiers';
import {angularCoreEnv} from '../../src/render3/jit/environment';
const INTERFACE_EXCEPTIONS = new Set<string>([
'ɵBaseDef',
'ɵComponentDefWithMeta',
'ɵDirectiveDefWithMeta',
'ɵInjectorDef',
'ɵNgModuleDefWithMeta',
'ɵPipeDefWithMeta',
'ΔBaseDef',
'ΔComponentDefWithMeta',
'ΔDirectiveDefWithMeta',
'ΔInjectorDef',
'ΔNgModuleDefWithMeta',
'ΔPipeDefWithMeta',
]);
describe('r3 jit environment', () => {

1025
packages/core/test/render3/lifecycle_spec.ts
View File

File diff suppressed because it is too large Load Diff

300
packages/core/test/render3/listeners_spec.ts
View File

@ -8,11 +8,11 @@
import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
import {bind, defineComponent, defineDirective, markDirty, reference, resolveBody, resolveDocument, textBinding} from '../../src/render3/index';
import {container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, getCurrentView, listener, text} from '../../src/render3/instructions/all';
import {markDirty, Δbind, ΔdefineComponent, ΔdefineDirective, Δreference, ΔresolveBody, ΔresolveDocument, ΔtextBinding} from '../../src/render3/index';
import {Δcontainer, ΔcontainerRefreshEnd, ΔcontainerRefreshStart, Δelement, ΔelementEnd, ΔelementStart, ΔembeddedViewEnd, ΔembeddedViewStart, ΔgetCurrentView, Δlistener, Δtext} from '../../src/render3/instructions/all';
import {RenderFlags} from '../../src/render3/interfaces/definition';
import {GlobalTargetResolver} from '../../src/render3/interfaces/renderer';
import {restoreView} from '../../src/render3/state';
import {ΔrestoreView} from '../../src/render3/state';
import {getRendererFactory2} from './imported_renderer2';
import {ComponentFixture, TemplateFixture, containerEl, createComponent, getDirectiveOnNode, renderToHtml, requestAnimationFrame} from './render_util';
@ -28,7 +28,7 @@ describe('event listeners', () => {
onClick() { this.counter++; }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyComp,
selectors: [['comp']],
consts: 2,
@ -36,12 +36,12 @@ describe('event listeners', () => {
/** <button (click)="onClick()"> Click me </button> */
template: function CompTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'button');
ΔelementStart(0, 'button');
{
listener('click', function() { return ctx.onClick(); });
text(1, 'Click me');
Δlistener('click', function() { return ctx.onClick(); });
Δtext(1, 'Click me');
}
elementEnd();
ΔelementEnd();
}
},
factory: () => {
@ -59,14 +59,14 @@ describe('event listeners', () => {
/* @HostListener('body:click') */
onBodyClick() { events.push('component - body:click'); }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyCompWithGlobalListeners,
selectors: [['comp']],
consts: 1,
vars: 0,
template: function CompTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
text(0, 'Some text');
Δtext(0, 'Some text');
}
},
factory: () => {
@ -77,12 +77,12 @@ describe('event listeners', () => {
hostBindings: function HostListenerDir_HostBindings(
rf: RenderFlags, ctx: any, elIndex: number) {
if (rf & RenderFlags.Create) {
listener('custom', function() {
Δlistener('custom', function() {
return ctx.onDocumentCustomEvent();
}, false, resolveDocument as GlobalTargetResolver);
listener('click', function() {
}, false, ΔresolveDocument as GlobalTargetResolver);
Δlistener('click', function() {
return ctx.onBodyClick();
}, false, resolveBody as GlobalTargetResolver);
}, false, ΔresolveBody as GlobalTargetResolver);
}
}
});
@ -95,19 +95,19 @@ describe('event listeners', () => {
/* @HostListener('body:click') */
onBodyClick() { events.push('directive - body:click'); }
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: GlobalHostListenerDir,
selectors: [['', 'hostListenerDir', '']],
factory: function HostListenerDir_Factory() { return new GlobalHostListenerDir(); },
hostBindings: function HostListenerDir_HostBindings(
rf: RenderFlags, ctx: any, elIndex: number) {
if (rf & RenderFlags.Create) {
listener('custom', function() {
Δlistener('custom', function() {
return ctx.onDocumentCustomEvent();
}, false, resolveDocument as GlobalTargetResolver);
listener('click', function() {
}, false, ΔresolveDocument as GlobalTargetResolver);
Δlistener('click', function() {
return ctx.onBodyClick();
}, false, resolveBody as GlobalTargetResolver);
}, false, ΔresolveBody as GlobalTargetResolver);
}
}
});
@ -129,7 +129,7 @@ describe('event listeners', () => {
return this.handlerReturnValue;
}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: PreventDefaultComp,
selectors: [['prevent-default-comp']],
factory: () => new PreventDefaultComp(),
@ -138,12 +138,12 @@ describe('event listeners', () => {
/** <button (click)="onClick($event)">Click</button> */
template: (rf: RenderFlags, ctx: PreventDefaultComp) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'button');
ΔelementStart(0, 'button');
{
listener('click', function($event: any) { return ctx.onClick($event); });
text(1, 'Click');
Δlistener('click', function($event: any) { return ctx.onClick($event); });
Δtext(1, 'Click');
}
elementEnd();
ΔelementEnd();
}
}
});
@ -205,15 +205,15 @@ describe('event listeners', () => {
/** <button (click)="onClick(); onClick2(); "> Click me </button> */
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'button');
ΔelementStart(0, 'button');
{
listener('click', function() {
Δlistener('click', function() {
ctx.onClick();
return ctx.onClick2();
});
text(1, 'Click me');
Δtext(1, 'Click me');
}
elementEnd();
ΔelementEnd();
}
}
@ -240,12 +240,12 @@ describe('event listeners', () => {
/** <button (click)="showing=!showing"> Click me </button> */
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'button');
ΔelementStart(0, 'button');
{
listener('click', function() { return ctx.showing = !ctx.showing; });
text(1, 'Click me');
Δlistener('click', function() { return ctx.showing = !ctx.showing; });
Δtext(1, 'Click me');
}
elementEnd();
ΔelementEnd();
}
}
@ -269,24 +269,24 @@ describe('event listeners', () => {
*/
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
if (ctx.showing) {
if (embeddedViewStart(1, 2, 0)) {
elementStart(0, 'button');
if (ΔembeddedViewStart(1, 2, 0)) {
ΔelementStart(0, 'button');
{
listener('click', function() { return ctx.onClick(); });
text(1, 'Click me');
Δlistener('click', function() { return ctx.onClick(); });
Δtext(1, 'Click me');
}
elementEnd();
ΔelementEnd();
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
@ -320,7 +320,7 @@ describe('event listeners', () => {
onClick() { this.counter++; }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: AppComp,
selectors: [['app-comp']],
factory: () => new AppComp(),
@ -328,24 +328,24 @@ describe('event listeners', () => {
vars: 0,
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
if (ctx.showing) {
if (embeddedViewStart(0, 2, 0)) {
elementStart(0, 'button');
if (ΔembeddedViewStart(0, 2, 0)) {
ΔelementStart(0, 'button');
{
listener('click', function() { return ctx.onClick(); });
text(1, 'Click me');
Δlistener('click', function() { return ctx.onClick(); });
Δtext(1, 'Click me');
}
elementEnd();
ΔelementEnd();
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
});
@ -381,7 +381,7 @@ describe('event listeners', () => {
onClick(index: number) { this.counters[index]++; }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: AppComp,
selectors: [['app-comp']],
factory: () => new AppComp(),
@ -389,24 +389,24 @@ describe('event listeners', () => {
vars: 0,
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
for (let i = 0; i < ctx.buttons; i++) {
if (embeddedViewStart(0, 2, 0)) {
elementStart(0, 'button');
if (ΔembeddedViewStart(0, 2, 0)) {
ΔelementStart(0, 'button');
{
listener('click', function() { return ctx.onClick(i); });
text(1, 'Click me');
Δlistener('click', function() { return ctx.onClick(i); });
Δtext(1, 'Click me');
}
elementEnd();
ΔelementEnd();
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
});
@ -445,7 +445,7 @@ describe('event listeners', () => {
onClick(index: number) { this.counters[index]++; }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: AppComp,
selectors: [['app-comp']],
factory: () => new AppComp(),
@ -453,31 +453,31 @@ describe('event listeners', () => {
vars: 0,
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
for (let i = 0; i < ctx.buttons; i++) {
const rf1 = embeddedViewStart(1, 4, 1);
const rf1 = ΔembeddedViewStart(1, 4, 1);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'button');
ΔelementStart(0, 'button');
{
listener('click', function() { return ctx.onClick(i); });
text(1, 'Click me');
Δlistener('click', function() { return ctx.onClick(i); });
Δtext(1, 'Click me');
}
elementEnd();
elementStart(2, 'div');
{ text(3); }
elementEnd();
ΔelementEnd();
ΔelementStart(2, 'div');
{ Δtext(3); }
ΔelementEnd();
}
if (rf1 & RenderFlags.Update) {
textBinding(3, bind(ctx.counters[i]));
ΔtextBinding(3, Δbind(ctx.counters[i]));
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
});
@ -523,21 +523,21 @@ describe('event listeners', () => {
/* @HostListener('click') */
onClick() { events.push('click!'); }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyComp,
selectors: [['comp']],
consts: 1,
vars: 0,
template: function CompTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
text(0, 'Some text');
Δtext(0, 'Some text');
}
},
factory: () => { return new MyComp(); },
hostBindings: function HostListenerDir_HostBindings(
rf: RenderFlags, ctx: any, elIndex: number) {
if (rf & RenderFlags.Create) {
listener('click', function() { return ctx.onClick(); });
Δlistener('click', function() { return ctx.onClick(); });
}
}
});
@ -574,23 +574,23 @@ describe('event listeners', () => {
/* @HostListener('click') */
onClick() { events.push('click!'); }
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: HostListenerDir,
selectors: [['', 'hostListenerDir', '']],
factory: function HostListenerDir_Factory() { return new HostListenerDir(); },
hostBindings: function HostListenerDir_HostBindings(
rf: RenderFlags, ctx: any, elIndex: number) {
if (rf & RenderFlags.Create) {
listener('click', function() { return ctx.onClick(); });
Δlistener('click', function() { return ctx.onClick(); });
}
}
});
}
const fixture = new TemplateFixture(() => {
elementStart(0, 'button', ['hostListenerDir', '']);
text(1, 'Click');
elementEnd();
ΔelementStart(0, 'button', ['hostListenerDir', '']);
Δtext(1, 'Click');
ΔelementEnd();
}, () => {}, 2, 0, [HostListenerDir]);
const button = fixture.hostElement.querySelector('button') !;
@ -604,7 +604,7 @@ describe('event listeners', () => {
it('should support global host listeners on directives', () => {
const fixture = new TemplateFixture(() => {
element(0, 'div', ['hostListenerDir', '']);
Δelement(0, 'div', ['hostListenerDir', '']);
}, () => {}, 1, 0, [GlobalHostListenerDir]);
const doc = fixture.hostElement.ownerDocument !;
@ -626,7 +626,7 @@ describe('event listeners', () => {
onClick(a: any, b: any) { this.counter += a + b; }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyComp,
selectors: [['comp']],
consts: 2,
@ -634,12 +634,12 @@ describe('event listeners', () => {
/** <button (click)="onClick(data.a, data.b)"> Click me </button> */
template: function CompTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'button');
ΔelementStart(0, 'button');
{
listener('click', function() { return ctx.onClick(ctx.data.a, ctx.data.b); });
text(1, 'Click me');
Δlistener('click', function() { return ctx.onClick(ctx.data.a, ctx.data.b); });
Δtext(1, 'Click me');
}
elementEnd();
ΔelementEnd();
}
},
factory: () => new MyComp()
@ -669,39 +669,39 @@ describe('event listeners', () => {
*/
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
if (ctx.showing) {
let rf1 = embeddedViewStart(0, 2, 0);
let rf1 = ΔembeddedViewStart(0, 2, 0);
if (rf1 & RenderFlags.Create) {
text(0, 'Hello');
container(1);
Δtext(0, 'Hello');
Δcontainer(1);
}
if (rf1 & RenderFlags.Update) {
containerRefreshStart(1);
ΔcontainerRefreshStart(1);
{
if (ctx.button) {
let rf1 = embeddedViewStart(0, 2, 0);
let rf1 = ΔembeddedViewStart(0, 2, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'button');
ΔelementStart(0, 'button');
{
listener('click', function() { return ctx.onClick(); });
text(1, 'Click');
Δlistener('click', function() { return ctx.onClick(); });
Δtext(1, 'Click');
}
elementEnd();
ΔelementEnd();
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
@ -733,22 +733,22 @@ describe('event listeners', () => {
*/
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
if (ctx.showing) {
let rf1 = embeddedViewStart(0, 3, 0);
let rf1 = ΔembeddedViewStart(0, 3, 0);
if (rf1 & RenderFlags.Create) {
text(0, 'Hello');
element(1, 'comp');
element(2, 'comp');
Δtext(0, 'Hello');
Δelement(1, 'comp');
Δelement(2, 'comp');
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
@ -775,19 +775,19 @@ describe('event listeners', () => {
const ctx = {showing: true};
const fixture = new TemplateFixture(
() => { container(0); },
() => { Δcontainer(0); },
() => {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
if (ctx.showing) {
let rf1 = embeddedViewStart(0, 1, 0);
let rf1 = ΔembeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
Δelement(0, 'comp');
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
},
1, 0, [MyCompWithGlobalListeners]);
@ -820,56 +820,56 @@ describe('event listeners', () => {
*/
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 3, 0);
let rf1 = ΔembeddedViewStart(0, 3, 0);
if (rf1 & RenderFlags.Create) {
text(0, 'Hello');
container(1);
container(2);
Δtext(0, 'Hello');
Δcontainer(1);
Δcontainer(2);
}
if (rf1 & RenderFlags.Update) {
containerRefreshStart(1);
ΔcontainerRefreshStart(1);
{
if (ctx.sub1) {
let rf1 = embeddedViewStart(0, 2, 0);
let rf1 = ΔembeddedViewStart(0, 2, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'button');
ΔelementStart(0, 'button');
{
listener('click', function() { return ctx.counter1++; });
text(1, 'Click');
Δlistener('click', function() { return ctx.counter1++; });
Δtext(1, 'Click');
}
elementEnd();
ΔelementEnd();
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
containerRefreshStart(2);
ΔcontainerRefreshEnd();
ΔcontainerRefreshStart(2);
{
if (ctx.sub2) {
let rf1 = embeddedViewStart(0, 2, 0);
let rf1 = ΔembeddedViewStart(0, 2, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'button');
ΔelementStart(0, 'button');
{
listener('click', function() { return ctx.counter2++; });
text(1, 'Click');
Δlistener('click', function() { return ctx.counter2++; });
Δtext(1, 'Click');
}
elementEnd();
ΔelementEnd();
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
@ -907,7 +907,7 @@ describe('event listeners', () => {
onClick(comp: any) { this.comp = comp; }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: App,
selectors: [['app']],
factory: () => new App(),
@ -915,17 +915,17 @@ describe('event listeners', () => {
vars: 0,
template: (rf: RenderFlags, ctx: App) => {
if (rf & RenderFlags.Create) {
const state = getCurrentView();
element(0, 'comp', null, ['comp', '']);
elementStart(2, 'button');
const state = ΔgetCurrentView();
Δelement(0, 'comp', null, ['comp', '']);
ΔelementStart(2, 'button');
{
listener('click', function() {
restoreView(state);
const comp = reference(1);
Δlistener('click', function() {
ΔrestoreView(state);
const comp = Δreference(1);
return ctx.onClick(comp);
});
}
elementEnd();
ΔelementEnd();
}
// testing only

156
packages/core/test/render3/outputs_spec.ts
View File

@ -8,8 +8,8 @@
import {EventEmitter} from '@angular/core';
import {defineComponent, defineDirective} from '../../src/render3/index';
import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, listener, text} from '../../src/render3/instructions/all';
import {ΔdefineComponent, ΔdefineDirective} from '../../src/render3/index';
import {Δbind, Δcontainer, ΔcontainerRefreshEnd, ΔcontainerRefreshStart, Δelement, ΔelementEnd, ΔelementProperty, ΔelementStart, ΔembeddedViewEnd, ΔembeddedViewStart, Δlistener, Δtext} from '../../src/render3/instructions/all';
import {RenderFlags} from '../../src/render3/interfaces/definition';
import {containerEl, renderToHtml} from './render_util';
@ -23,7 +23,7 @@ describe('outputs', () => {
change = new EventEmitter();
resetStream = new EventEmitter();
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: ButtonToggle,
selectors: [['button-toggle']],
template: function(rf: RenderFlags, ctx: any) {},
@ -39,7 +39,7 @@ describe('outputs', () => {
class OtherDir {
changeStream = new EventEmitter();
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: OtherDir,
selectors: [['', 'otherDir', '']],
factory: () => otherDir = new OtherDir,
@ -51,7 +51,7 @@ describe('outputs', () => {
events: string[] = [];
ngOnDestroy() { this.events.push('destroy'); }
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: DestroyComp,
selectors: [['destroy-comp']],
consts: 0,
@ -65,7 +65,7 @@ describe('outputs', () => {
class MyButton {
click = new EventEmitter();
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: MyButton,
selectors: [['', 'myButton', '']],
factory: () => buttonDir = new MyButton,
@ -80,11 +80,11 @@ describe('outputs', () => {
/** <button-toggle (change)="onChange()"></button-toggle> */
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'button-toggle');
ΔelementStart(0, 'button-toggle');
{
listener('change', function() { return ctx.onChange(); });
Δlistener('change', function() { return ctx.onChange(); });
}
elementEnd();
ΔelementEnd();
}
}
@ -103,12 +103,12 @@ describe('outputs', () => {
/** <button-toggle (change)="onChange()" (reset)="onReset()"></button-toggle> */
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'button-toggle');
ΔelementStart(0, 'button-toggle');
{
listener('change', function() { return ctx.onChange(); });
listener('reset', function() { return ctx.onReset(); });
Δlistener('change', function() { return ctx.onChange(); });
Δlistener('reset', function() { return ctx.onReset(); });
}
elementEnd();
ΔelementEnd();
}
}
@ -128,11 +128,11 @@ describe('outputs', () => {
/** <button-toggle (change)="counter++"></button-toggle> */
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'button-toggle');
ΔelementStart(0, 'button-toggle');
{
listener('change', function() { return ctx.counter++; });
Δlistener('change', function() { return ctx.counter++; });
}
elementEnd();
ΔelementEnd();
}
}
@ -155,24 +155,24 @@ describe('outputs', () => {
*/
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 1, 0);
let rf1 = ΔembeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'button-toggle');
ΔelementStart(0, 'button-toggle');
{
listener('change', function() { return ctx.onChange(); });
Δlistener('change', function() { return ctx.onChange(); });
}
elementEnd();
ΔelementEnd();
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
@ -201,35 +201,35 @@ describe('outputs', () => {
*/
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 1, 0);
let rf1 = ΔembeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
if (ctx.condition2) {
let rf1 = embeddedViewStart(0, 1, 0);
let rf1 = ΔembeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'button-toggle');
ΔelementStart(0, 'button-toggle');
{
listener('change', function() { return ctx.onChange(); });
Δlistener('change', function() { return ctx.onChange(); });
}
elementEnd();
ΔelementEnd();
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
embeddedViewEnd();
ΔcontainerRefreshEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
@ -257,31 +257,31 @@ describe('outputs', () => {
*/
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 4, 0);
let rf1 = ΔembeddedViewStart(0, 4, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'button');
ΔelementStart(0, 'button');
{
listener('click', function() { return ctx.onClick(); });
text(1, 'Click me');
Δlistener('click', function() { return ctx.onClick(); });
Δtext(1, 'Click me');
}
elementEnd();
elementStart(2, 'button-toggle');
ΔelementEnd();
ΔelementStart(2, 'button-toggle');
{
listener('change', function() { return ctx.onChange(); });
Δlistener('change', function() { return ctx.onChange(); });
}
elementEnd();
element(3, 'destroy-comp');
ΔelementEnd();
Δelement(3, 'destroy-comp');
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
@ -313,11 +313,11 @@ describe('outputs', () => {
it('should fire event listeners along with outputs if they match', () => {
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'button', ['myButton', '']);
ΔelementStart(0, 'button', ['myButton', '']);
{
listener('click', function() { return ctx.onClick(); });
Δlistener('click', function() { return ctx.onClick(); });
}
elementEnd();
ΔelementEnd();
}
}
@ -338,11 +338,11 @@ describe('outputs', () => {
/** <button-toggle (change)="onChange()" otherDir></button-toggle> */
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'button-toggle', ['otherDir', '']);
ΔelementStart(0, 'button-toggle', ['otherDir', '']);
{
listener('change', function() { return ctx.onChange(); });
Δlistener('change', function() { return ctx.onChange(); });
}
elementEnd();
ΔelementEnd();
}
}
@ -363,7 +363,7 @@ describe('outputs', () => {
// TODO(issue/24571): remove '!'.
change !: boolean;
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: OtherChangeDir,
selectors: [['', 'otherChangeDir', '']],
factory: () => otherDir = new OtherChangeDir,
@ -374,14 +374,14 @@ describe('outputs', () => {
/** <button-toggle (change)="onChange()" otherChangeDir [change]="change"></button-toggle> */
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'button-toggle', ['otherChangeDir', '']);
ΔelementStart(0, 'button-toggle', ['otherChangeDir', '']);
{
listener('change', function() { return ctx.onChange(); });
Δlistener('change', function() { return ctx.onChange(); });
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'change', bind(ctx.change));
ΔelementProperty(0, 'change', Δbind(ctx.change));
}
}
@ -409,39 +409,39 @@ describe('outputs', () => {
*/
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'button');
ΔelementStart(0, 'button');
{
listener('click', function() { return ctx.onClick(); });
text(1, 'Click me');
Δlistener('click', function() { return ctx.onClick(); });
Δtext(1, 'Click me');
}
elementEnd();
container(2);
ΔelementEnd();
Δcontainer(2);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(2);
ΔcontainerRefreshStart(2);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 1, 0);
let rf1 = ΔembeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'button-toggle');
ΔelementStart(0, 'button-toggle');
{
listener('change', function() { return ctx.onChange(); });
Δlistener('change', function() { return ctx.onChange(); });
}
elementEnd();
ΔelementEnd();
}
embeddedViewEnd();
ΔembeddedViewEnd();
} else {
if (embeddedViewStart(1, 1, 0)) {
elementStart(0, 'div', ['otherDir', '']);
if (ΔembeddedViewStart(1, 1, 0)) {
ΔelementStart(0, 'div', ['otherDir', '']);
{
listener('change', function() { return ctx.onChange(); });
Δlistener('change', function() { return ctx.onChange(); });
}
elementEnd();
ΔelementEnd();
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}

167
packages/core/test/render3/pipe_spec.ts
View File

@ -6,14 +6,14 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Directive as _Directive, InjectionToken, OnChanges, OnDestroy, Pipe as _Pipe, PipeTransform, WrappedValue, defineInjectable, defineInjector, ɵNgModuleDef as NgModuleDef, ɵdefineComponent as defineComponent, ɵdirectiveInject as directiveInject} from '@angular/core';
import {Directive as _Directive, InjectionToken, OnChanges, OnDestroy, Pipe as _Pipe, PipeTransform, WrappedValue, ɵNgModuleDef as NgModuleDef, ΔdefineComponent as defineComponent, ΔdefineInjectable, ΔdefineInjector, ΔdirectiveInject as directiveInject} from '@angular/core';
import {expect} from '@angular/platform-browser/testing/src/matchers';
import {createInjector} from '../../src/di/r3_injector';
import {defineDirective, definePipe} from '../../src/render3/definition';
import {bind, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, interpolation1, load, text, textBinding} from '../../src/render3/instructions/all';
import {ΔdefineDirective, ΔdefinePipe} from '../../src/render3/definition';
import {Δbind, Δcontainer, ΔcontainerRefreshEnd, ΔcontainerRefreshStart, ΔelementEnd, ΔelementProperty, ΔelementStart, ΔembeddedViewEnd, ΔembeddedViewStart, Δinterpolation1, Δload, Δtext, ΔtextBinding} from '../../src/render3/instructions/all';
import {RenderFlags} from '../../src/render3/interfaces/definition';
import {pipe, pipeBind1, pipeBind3, pipeBind4, pipeBindV} from '../../src/render3/pipe';
import {Δpipe, ΔpipeBind1, ΔpipeBind3, ΔpipeBind4, ΔpipeBindV} from '../../src/render3/pipe';
import {RenderLog, getRendererFactory2, patchLoggingRenderer2} from './imported_renderer2';
import {ComponentFixture, TemplateFixture, createComponent, getDirectiveOnNode, renderToHtml} from './render_util';
@ -46,11 +46,11 @@ describe('pipe', () => {
it('should support interpolation', () => {
function Template(rf: RenderFlags, person: Person) {
if (rf & RenderFlags.Create) {
text(0);
pipe(1, 'countingPipe');
Δtext(0);
Δpipe(1, 'countingPipe');
}
if (rf & RenderFlags.Update) {
textBinding(0, interpolation1('', pipeBind1(1, 1, person.name), ''));
ΔtextBinding(0, Δinterpolation1('', ΔpipeBind1(1, 1, person.name), ''));
}
}
@ -61,11 +61,11 @@ describe('pipe', () => {
it('should throw if pipe is not found', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
text(0);
pipe(1, 'randomPipeName');
Δtext(0);
Δpipe(1, 'randomPipeName');
}
if (rf & RenderFlags.Update) {
textBinding(0, interpolation1('', pipeBind1(1, 1, ctx.value), ''));
ΔtextBinding(0, Δinterpolation1('', ΔpipeBind1(1, 1, ctx.value), ''));
}
}, 2, 3, [], pipes);
@ -83,7 +83,7 @@ describe('pipe', () => {
constructor() { this.dirProp = ''; }
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: MyDir,
selectors: [['', 'myDir', '']],
factory: () => new MyDir(),
@ -95,7 +95,7 @@ describe('pipe', () => {
class DoublePipe implements PipeTransform {
transform(value: any) { return `${value}${value}`; }
static ngPipeDef = definePipe({
static ngPipeDef = ΔdefinePipe({
name: 'double',
type: DoublePipe,
factory: function DoublePipe_Factory() { return new DoublePipe(); },
@ -104,12 +104,12 @@ describe('pipe', () => {
function Template(rf: RenderFlags, ctx: string) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div', ['myDir', '']);
pipe(1, 'double');
elementEnd();
ΔelementStart(0, 'div', ['myDir', '']);
Δpipe(1, 'double');
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'elprop', bind(pipeBind1(1, 1, ctx)));
ΔelementProperty(0, 'elprop', Δbind(ΔpipeBind1(1, 1, ctx)));
directive = getDirectiveOnNode(0);
}
}
@ -120,12 +120,13 @@ describe('pipe', () => {
it('should support arguments in pipes', () => {
function Template(rf: RenderFlags, person: Person) {
if (rf & RenderFlags.Create) {
text(0);
pipe(1, 'multiArgPipe');
Δtext(0);
Δpipe(1, 'multiArgPipe');
}
if (rf & RenderFlags.Update) {
textBinding(
0, interpolation1('', pipeBind3(1, 1, person.name, 'one', person.address !.city), ''));
ΔtextBinding(
0,
Δinterpolation1('', ΔpipeBind3(1, 1, person.name, 'one', person.address !.city), ''));
}
}
@ -136,14 +137,14 @@ describe('pipe', () => {
it('should support calling pipes with different number of arguments', () => {
function Template(rf: RenderFlags, person: Person) {
if (rf & RenderFlags.Create) {
text(0);
pipe(1, 'multiArgPipe');
pipe(2, 'multiArgPipe');
Δtext(0);
Δpipe(1, 'multiArgPipe');
Δpipe(2, 'multiArgPipe');
}
if (rf & RenderFlags.Update) {
textBinding(
0, interpolation1(
'', pipeBind4(2, 5, pipeBindV(1, 1, [person.name, 'a', 'b']), 0, 1, 2), ''));
ΔtextBinding(
0, Δinterpolation1(
'', ΔpipeBind4(2, 5, ΔpipeBindV(1, 1, [person.name, 'a', 'b']), 0, 1, 2), ''));
}
}
@ -156,7 +157,7 @@ describe('pipe', () => {
class IdentityPipe implements PipeTransform {
transform(value: any) { return value; }
static ngPipeDef = definePipe({
static ngPipeDef = ΔdefinePipe({
name: 'identityPipe',
type: IdentityPipe,
factory: function IdentityPipe_Factory() { return new IdentityPipe(); },
@ -165,12 +166,12 @@ describe('pipe', () => {
function Template(rf: RenderFlags, person: Person) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
pipe(1, 'identityPipe');
elementEnd();
ΔelementStart(0, 'div');
Δpipe(1, 'identityPipe');
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'id', bind(pipeBind1(1, 1, 'Megatron')));
ΔelementProperty(0, 'id', Δbind(ΔpipeBind1(1, 1, 'Megatron')));
}
}
@ -185,11 +186,11 @@ describe('pipe', () => {
it('should support duplicates by using the later entry', () => {
function Template(rf: RenderFlags, person: Person) {
if (rf & RenderFlags.Create) {
text(0);
pipe(1, 'duplicatePipe');
Δtext(0);
Δpipe(1, 'duplicatePipe');
}
if (rf & RenderFlags.Update) {
textBinding(0, interpolation1('', pipeBind1(1, 1, person.name), ''));
ΔtextBinding(0, Δinterpolation1('', ΔpipeBind1(1, 1, person.name), ''));
}
}
@ -201,11 +202,11 @@ describe('pipe', () => {
it('should call pure pipes only if the arguments change', () => {
function Template(rf: RenderFlags, person: Person) {
if (rf & RenderFlags.Create) {
text(0);
pipe(1, 'countingPipe');
Δtext(0);
Δpipe(1, 'countingPipe');
}
if (rf & RenderFlags.Update) {
textBinding(0, interpolation1('', pipeBind1(1, 1, person.name), ''));
ΔtextBinding(0, Δinterpolation1('', ΔpipeBind1(1, 1, person.name), ''));
}
}
@ -230,11 +231,11 @@ describe('pipe', () => {
it('should call impure pipes on each change detection run', () => {
function Template(rf: RenderFlags, person: Person) {
if (rf & RenderFlags.Create) {
text(0);
pipe(1, 'countingImpurePipe');
Δtext(0);
Δpipe(1, 'countingImpurePipe');
}
if (rf & RenderFlags.Update) {
textBinding(0, interpolation1('', pipeBind1(1, 1, person.name), ''));
ΔtextBinding(0, Δinterpolation1('', ΔpipeBind1(1, 1, person.name), ''));
}
}
@ -246,37 +247,37 @@ describe('pipe', () => {
it('should not cache impure pipes', () => {
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
pipe(1, 'countingImpurePipe');
elementEnd();
elementStart(2, 'div');
pipe(3, 'countingImpurePipe');
elementEnd();
container(4);
ΔelementStart(0, 'div');
Δpipe(1, 'countingImpurePipe');
ΔelementEnd();
ΔelementStart(2, 'div');
Δpipe(3, 'countingImpurePipe');
ΔelementEnd();
Δcontainer(4);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'id', bind(pipeBind1(1, 2, true)));
elementProperty(2, 'id', bind(pipeBind1(3, 4, true)));
pipeInstances.push(load<CountingImpurePipe>(1), load(3));
containerRefreshStart(4);
ΔelementProperty(0, 'id', Δbind(ΔpipeBind1(1, 2, true)));
ΔelementProperty(2, 'id', Δbind(ΔpipeBind1(3, 4, true)));
pipeInstances.push(Δload<CountingImpurePipe>(1), Δload(3));
ΔcontainerRefreshStart(4);
{
for (let i of [1, 2]) {
let rf1 = embeddedViewStart(1, 2, 3);
let rf1 = ΔembeddedViewStart(1, 2, 3);
{
if (rf1 & RenderFlags.Create) {
elementStart(0, 'div');
pipe(1, 'countingImpurePipe');
elementEnd();
ΔelementStart(0, 'div');
Δpipe(1, 'countingImpurePipe');
ΔelementEnd();
}
if (rf1 & RenderFlags.Update) {
elementProperty(0, 'id', bind(pipeBind1(1, 1, true)));
pipeInstances.push(load<CountingImpurePipe>(1));
ΔelementProperty(0, 'id', Δbind(ΔpipeBind1(1, 1, true)));
pipeInstances.push(Δload<CountingImpurePipe>(1));
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
@ -300,7 +301,7 @@ describe('pipe', () => {
transform(value: any): any { return null; }
static ngPipeDef = definePipe({
static ngPipeDef = ΔdefinePipe({
name: 'pipeWithOnDestroy',
type: PipeWithOnDestroy,
factory: function PipeWithOnDestroy_Factory() { return new PipeWithOnDestroy(); },
@ -310,26 +311,26 @@ describe('pipe', () => {
it('should call ngOnDestroy on pipes', () => {
function Template(rf: RenderFlags, person: Person) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
if (person.age > 20) {
let rf1 = embeddedViewStart(1, 2, 3);
let rf1 = ΔembeddedViewStart(1, 2, 3);
{
if (rf1 & RenderFlags.Create) {
text(0);
pipe(1, 'pipeWithOnDestroy');
Δtext(0);
Δpipe(1, 'pipeWithOnDestroy');
}
if (rf & RenderFlags.Update) {
textBinding(0, interpolation1('', pipeBind1(1, 1, person.age), ''));
ΔtextBinding(0, Δinterpolation1('', ΔpipeBind1(1, 1, person.age), ''));
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}
const pipes = [PipeWithOnDestroy];
@ -362,11 +363,11 @@ describe('pipe', () => {
title = 'ServiceB Title';
static ngInjectableDef =
defineInjectable({providedIn: 'root', factory: () => new ServiceB()});
ΔdefineInjectable({providedIn: 'root', factory: () => new ServiceB()});
}
class ModuleA {
static ngInjectorDef = defineInjector({factory: () => new ModuleA(), providers: [ServiceA]});
static ngInjectorDef = ΔdefineInjector({factory: () => new ModuleA(), providers: [ServiceA]});
static ngModuleDef: NgModuleDef<any> = { bootstrap: [] } as any;
}
@ -376,7 +377,7 @@ describe('pipe', () => {
transform(value: string): string { return `${value} - ${this.obj.title}`; }
static ngPipeDef = definePipe({
static ngPipeDef = ΔdefinePipe({
name: 'myConcatPipe',
type: MyConcatPipe,
factory: () => new MyConcatPipe(directiveInject(InjectionType)),
@ -398,11 +399,11 @@ describe('pipe', () => {
// '{{ title | myConcatPipe }}'
template: (rf: RenderFlags, ctx: MyComponent) => {
if (rf & 1) {
text(0);
pipe(1, 'myConcatPipe');
Δtext(0);
Δpipe(1, 'myConcatPipe');
}
if (rf & 2) {
textBinding(0, interpolation1('', pipeBind1(1, 1, ctx.title), ''));
ΔtextBinding(0, Δinterpolation1('', ΔpipeBind1(1, 1, ctx.title), ''));
}
},
...overrides
@ -438,7 +439,7 @@ describe('pipe', () => {
class WrappingPipe implements PipeTransform {
transform(value: any) { return new WrappedValue('Bar'); }
static ngPipeDef = definePipe({
static ngPipeDef = ΔdefinePipe({
name: 'wrappingPipe',
type: WrappingPipe,
factory: function WrappingPipe_Factory() { return new WrappingPipe(); },
@ -447,11 +448,11 @@ describe('pipe', () => {
}
function createTemplate() {
text(0);
pipe(1, 'wrappingPipe');
Δtext(0);
Δpipe(1, 'wrappingPipe');
}
function updateTemplate() { textBinding(0, interpolation1('', pipeBind1(1, 1, null), '')); }
function updateTemplate() { ΔtextBinding(0, Δinterpolation1('', ΔpipeBind1(1, 1, null), '')); }
it('should unwrap', () => {
const fixture =
@ -480,7 +481,7 @@ class CountingPipe implements PipeTransform {
transform(value: any) { return `${value} state:${this.state++}`; }
static ngPipeDef = definePipe({
static ngPipeDef = ΔdefinePipe({
name: 'countingPipe',
type: CountingPipe,
factory: function CountingPipe_Factory() { return new CountingPipe(); },
@ -493,7 +494,7 @@ class CountingImpurePipe implements PipeTransform {
transform(value: any) { return `${value} state:${this.state++}`; }
static ngPipeDef = definePipe({
static ngPipeDef = ΔdefinePipe({
name: 'countingImpurePipe',
type: CountingImpurePipe,
factory: function CountingImpurePipe_Factory() { return new CountingImpurePipe(); },
@ -507,7 +508,7 @@ class MultiArgPipe implements PipeTransform {
return `${value} ${arg1} ${arg2} ${arg3}`;
}
static ngPipeDef = definePipe({
static ngPipeDef = ΔdefinePipe({
name: 'multiArgPipe',
type: MultiArgPipe,
factory: function MultiArgPipe_Factory() { return new MultiArgPipe(); },
@ -518,7 +519,7 @@ class MultiArgPipe implements PipeTransform {
class DuplicatePipe1 implements PipeTransform {
transform(value: any) { return `${value} from duplicate 1`; }
static ngPipeDef = definePipe({
static ngPipeDef = ΔdefinePipe({
name: 'duplicatePipe',
type: DuplicatePipe1,
factory: function DuplicatePipe1_Factory() { return new DuplicatePipe1(); },
@ -529,7 +530,7 @@ class DuplicatePipe1 implements PipeTransform {
class DuplicatePipe2 implements PipeTransform {
transform(value: any) { return `${value} from duplicate 2`; }
static ngPipeDef = definePipe({
static ngPipeDef = ΔdefinePipe({
name: 'duplicatePipe',
type: DuplicatePipe2,
factory: function DuplicatePipe2_Factory() { return new DuplicatePipe2(); },

172
packages/core/test/render3/properties_spec.ts
View File

@ -8,8 +8,8 @@
import {EventEmitter} from '@angular/core';
import {defineComponent, defineDirective} from '../../src/render3/index';
import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, interpolation1, listener, load, reference, text, textBinding} from '../../src/render3/instructions/all';
import {ΔdefineComponent, ΔdefineDirective} from '../../src/render3/index';
import {Δbind, Δcontainer, ΔcontainerRefreshEnd, ΔcontainerRefreshStart, Δelement, ΔelementEnd, ΔelementProperty, ΔelementStart, ΔembeddedViewEnd, ΔembeddedViewStart, Δinterpolation1, Δlistener, Δload, Δreference, Δtext, ΔtextBinding} from '../../src/render3/instructions/all';
import {RenderFlags} from '../../src/render3/interfaces/definition';
import {ComponentFixture, createComponent, renderToHtml} from './render_util';
@ -19,10 +19,10 @@ describe('elementProperty', () => {
it('should support bindings to properties', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'span');
Δelement(0, 'span');
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'id', bind(ctx.id));
ΔelementProperty(0, 'id', Δbind(ctx.id));
}
}, 1, 1);
@ -47,8 +47,8 @@ describe('elementProperty', () => {
function Template(rf: RenderFlags, ctx: string) {
if (rf & RenderFlags.Create) {
element(0, 'span');
elementProperty(0, 'id', expensive(ctx));
Δelement(0, 'span');
ΔelementProperty(0, 'id', expensive(ctx));
}
}
@ -59,10 +59,10 @@ describe('elementProperty', () => {
it('should support interpolation for properties', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'span');
Δelement(0, 'span');
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'id', interpolation1('_', ctx.id, '_'));
ΔelementProperty(0, 'id', Δinterpolation1('_', ctx.id, '_'));
}
}, 1, 1);
@ -86,7 +86,7 @@ describe('elementProperty', () => {
// TODO(issue/24571): remove '!'.
disabled !: boolean;
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: MyButton,
selectors: [['', 'myButton', '']],
factory: () => button = new MyButton(),
@ -99,7 +99,7 @@ describe('elementProperty', () => {
id !: number;
clickStream = new EventEmitter();
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: OtherDir,
selectors: [['', 'otherDir', '']],
factory: () => otherDir = new OtherDir(),
@ -112,7 +112,7 @@ describe('elementProperty', () => {
// TODO(issue/24571): remove '!'.
disabled !: boolean;
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: OtherDisabledDir,
selectors: [['', 'otherDisabledDir', '']],
factory: () => otherDisabledDir = new OtherDisabledDir(),
@ -124,7 +124,7 @@ describe('elementProperty', () => {
// TODO(issue/24571): remove '!'.
idNumber !: string;
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: IdDir,
selectors: [['', 'idDir', '']],
factory: () => idDir = new IdDir(),
@ -140,13 +140,13 @@ describe('elementProperty', () => {
/** <button myButton otherDir [id]="id" [disabled]="isDisabled">Click me</button> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'button', ['otherDir', '', 'myButton', '']);
{ text(1, 'Click me'); }
elementEnd();
ΔelementStart(0, 'button', ['otherDir', '', 'myButton', '']);
{ Δtext(1, 'Click me'); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'disabled', bind(ctx.isDisabled));
elementProperty(0, 'id', bind(ctx.id));
ΔelementProperty(0, 'disabled', Δbind(ctx.isDisabled));
ΔelementProperty(0, 'id', Δbind(ctx.id));
}
}, 2, 2, deps);
@ -171,13 +171,13 @@ describe('elementProperty', () => {
/** <button myButton [id]="id" [disabled]="isDisabled">Click me</button> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'button', ['myButton', '']);
{ text(1, 'Click me'); }
elementEnd();
ΔelementStart(0, 'button', ['myButton', '']);
{ Δtext(1, 'Click me'); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'disabled', bind(ctx.isDisabled));
elementProperty(0, 'id', bind(ctx.id));
ΔelementProperty(0, 'disabled', Δbind(ctx.isDisabled));
ΔelementProperty(0, 'id', Δbind(ctx.id));
}
}, 2, 2, deps);
@ -203,7 +203,7 @@ describe('elementProperty', () => {
// TODO(issue/24571): remove '!'.
id !: number;
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
selectors: [['comp']],
consts: 0,
@ -217,10 +217,10 @@ describe('elementProperty', () => {
/** <comp [id]="id"></comp> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'comp');
Δelement(0, 'comp');
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'id', bind(ctx.id));
ΔelementProperty(0, 'id', Δbind(ctx.id));
}
}, 1, 1, [Comp]);
@ -241,12 +241,12 @@ describe('elementProperty', () => {
/** <button myButton otherDisabledDir [disabled]="isDisabled">Click me</button> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'button', ['myButton', '', 'otherDisabledDir', '']);
{ text(1, 'Click me'); }
elementEnd();
ΔelementStart(0, 'button', ['myButton', '', 'otherDisabledDir', '']);
{ Δtext(1, 'Click me'); }
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'disabled', bind(ctx.isDisabled));
ΔelementProperty(0, 'disabled', Δbind(ctx.isDisabled));
}
}, 2, 1, deps);
@ -268,15 +268,15 @@ describe('elementProperty', () => {
/** <button otherDir [id]="id" (click)="onClick()">Click me</button> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'button', ['otherDir', '']);
ΔelementStart(0, 'button', ['otherDir', '']);
{
listener('click', () => ctx.onClick());
text(1, 'Click me');
Δlistener('click', () => ctx.onClick());
Δtext(1, 'Click me');
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'id', bind(ctx.id));
ΔelementProperty(0, 'id', Δbind(ctx.id));
}
}, 2, 1, deps);
@ -308,40 +308,40 @@ describe('elementProperty', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'button', ['idDir', '']);
{ text(1, 'Click me'); }
elementEnd();
container(2);
ΔelementStart(0, 'button', ['idDir', '']);
{ Δtext(1, 'Click me'); }
ΔelementEnd();
Δcontainer(2);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'id', bind(ctx.id1));
containerRefreshStart(2);
ΔelementProperty(0, 'id', Δbind(ctx.id1));
ΔcontainerRefreshStart(2);
{
if (ctx.condition) {
let rf0 = embeddedViewStart(0, 2, 1);
let rf0 = ΔembeddedViewStart(0, 2, 1);
if (rf0 & RenderFlags.Create) {
elementStart(0, 'button');
{ text(1, 'Click me too'); }
elementEnd();
ΔelementStart(0, 'button');
{ Δtext(1, 'Click me too'); }
ΔelementEnd();
}
if (rf0 & RenderFlags.Update) {
elementProperty(0, 'id', bind(ctx.id2));
ΔelementProperty(0, 'id', Δbind(ctx.id2));
}
embeddedViewEnd();
ΔembeddedViewEnd();
} else {
let rf1 = embeddedViewStart(1, 2, 1);
let rf1 = ΔembeddedViewStart(1, 2, 1);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'button', ['otherDir', '']);
{ text(1, 'Click me too'); }
elementEnd();
ΔelementStart(0, 'button', ['otherDir', '']);
{ Δtext(1, 'Click me too'); }
ΔelementEnd();
}
if (rf1 & RenderFlags.Update) {
elementProperty(0, 'id', bind(ctx.id3));
ΔelementProperty(0, 'id', Δbind(ctx.id3));
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}, 3, 1, deps);
@ -375,7 +375,7 @@ describe('elementProperty', () => {
direction !: string;
changeStream = new EventEmitter();
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: MyDir,
selectors: [['', 'myDir', '']],
factory: () => myDir = new MyDir(),
@ -390,7 +390,7 @@ describe('elementProperty', () => {
// TODO(issue/24571): remove '!'.
roleB !: string;
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: MyDirB,
selectors: [['', 'myDirB', '']],
factory: () => dirB = new MyDirB(),
@ -405,7 +405,7 @@ describe('elementProperty', () => {
/** <div role="button" myDir></div> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'div', ['role', 'button', 'myDir', '']);
Δelement(0, 'div', ['role', 'button', 'myDir', '']);
}
}, 1, 0, deps);
@ -419,10 +419,10 @@ describe('elementProperty', () => {
/** <div role="button" [role]="role" myDir></div> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'div', ['role', 'button', 'myDir', '']);
Δelement(0, 'div', ['role', 'button', 'myDir', '']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'role', bind(ctx.role));
ΔelementProperty(0, 'role', Δbind(ctx.role));
}
}, 1, 1, deps);
@ -442,7 +442,7 @@ describe('elementProperty', () => {
/** <div role="button" myDir myDirB></div> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'div', ['role', 'button', 'myDir', '', 'myDirB', '']);
Δelement(0, 'div', ['role', 'button', 'myDir', '', 'myDirB', '']);
}
}, 1, 0, deps);
@ -457,7 +457,7 @@ describe('elementProperty', () => {
/** <div role="button" dir="rtl" myDir></div> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'div', ['role', 'button', 'dir', 'rtl', 'myDir', '']);
Δelement(0, 'div', ['role', 'button', 'dir', 'rtl', 'myDir', '']);
}
}, 1, 0, deps);
@ -472,9 +472,9 @@ describe('elementProperty', () => {
/** <div role="button" (change)="onChange()" myDir></div> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div', ['role', 'button', 'myDir', '']);
{ listener('change', () => ctx.onChange()); }
elementEnd();
ΔelementStart(0, 'div', ['role', 'button', 'myDir', '']);
{ Δlistener('change', () => ctx.onChange()); }
ΔelementEnd();
}
}, 1, 0, deps);
@ -497,8 +497,8 @@ describe('elementProperty', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'div', ['role', 'button', 'dir', 'rtl', 'myDir', '']);
element(1, 'div', ['role', 'listbox', 'myDirB', '']);
Δelement(0, 'div', ['role', 'button', 'dir', 'rtl', 'myDir', '']);
Δelement(1, 'div', ['role', 'listbox', 'myDirB', '']);
}
}, 2, 0, deps);
@ -523,27 +523,27 @@ describe('elementProperty', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'div', ['role', 'listbox', 'myDir', '']);
container(1);
Δelement(0, 'div', ['role', 'listbox', 'myDir', '']);
Δcontainer(1);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(1);
ΔcontainerRefreshStart(1);
{
if (ctx.condition) {
let rf1 = embeddedViewStart(0, 1, 0);
let rf1 = ΔembeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'div', ['role', 'button', 'myDirB', '']);
Δelement(0, 'div', ['role', 'button', 'myDirB', '']);
}
embeddedViewEnd();
ΔembeddedViewEnd();
} else {
let rf2 = embeddedViewStart(1, 1, 0);
let rf2 = ΔembeddedViewStart(1, 1, 0);
if (rf2 & RenderFlags.Create) {
element(0, 'div', ['role', 'menu']);
Δelement(0, 'div', ['role', 'menu']);
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}, 2, 0, deps);
@ -565,7 +565,7 @@ describe('elementProperty', () => {
it('should process attributes properly inside a for loop', () => {
class Comp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
selectors: [['comp']],
consts: 3,
@ -573,12 +573,12 @@ describe('elementProperty', () => {
/** <div role="button" dir #dir="myDir"></div> {{ dir.role }} */
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'div', ['role', 'button', 'myDir', ''], ['dir', 'myDir']);
text(2);
Δelement(0, 'div', ['role', 'button', 'myDir', ''], ['dir', 'myDir']);
Δtext(2);
}
if (rf & RenderFlags.Update) {
const tmp = reference(1) as any;
textBinding(2, bind(tmp.role));
const tmp = Δreference(1) as any;
ΔtextBinding(2, Δbind(tmp.role));
}
},
factory: () => new Comp(),
@ -593,20 +593,20 @@ describe('elementProperty', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
for (let i = 0; i < 2; i++) {
let rf1 = embeddedViewStart(0, 1, 0);
let rf1 = ΔembeddedViewStart(0, 1, 0);
if (rf1 & RenderFlags.Create) {
element(0, 'comp');
Δelement(0, 'comp');
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}, 1, 0, [Comp]);

473
packages/core/test/render3/providers_spec.ts
View File

File diff suppressed because it is too large Load Diff

135
packages/core/test/render3/pure_function_spec.ts
View File

@ -5,11 +5,12 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {AttributeMarker, defineComponent, template} from '../../src/render3/index';
import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, nextContext} from '../../src/render3/instructions/all';
import {AttributeMarker, ΔdefineComponent, Δtemplate} from '../../src/render3/index';
import {Δbind, Δcontainer, ΔcontainerRefreshEnd, ΔcontainerRefreshStart, Δelement, ΔelementEnd, ΔelementProperty, ΔelementStart, ΔembeddedViewEnd, ΔembeddedViewStart, ΔnextContext} from '../../src/render3/instructions/all';
import {RenderFlags} from '../../src/render3/interfaces/definition';
import {pureFunction1, pureFunction2, pureFunction3, pureFunction4, pureFunction5, pureFunction6, pureFunction7, pureFunction8, pureFunctionV} from '../../src/render3/pure_function';
import {ΔpureFunction1, ΔpureFunction2, ΔpureFunction3, ΔpureFunction4, ΔpureFunction5, ΔpureFunction6, ΔpureFunction7, ΔpureFunction8, ΔpureFunctionV} from '../../src/render3/pure_function';
import {ComponentFixture, createComponent, getDirectiveOnNode, renderToHtml} from '../../test/render3/render_util';
import {NgIf} from './common_with_def';
describe('array literals', () => {
@ -19,7 +20,7 @@ describe('array literals', () => {
// TODO(issue/24571): remove '!'.
names !: string[];
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: MyComp,
selectors: [['my-comp']],
factory: function MyComp_Factory() { return myComp = new MyComp(); },
@ -38,10 +39,10 @@ describe('array literals', () => {
/** <my-comp [names]="['Nancy', customName, 'Bess']"></my-comp> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'my-comp');
Δelement(0, 'my-comp');
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'names', bind(pureFunction1(1, e0_ff, ctx.customName)));
ΔelementProperty(0, 'names', Δbind(ΔpureFunction1(1, e0_ff, ctx.customName)));
}
}, 1, 3, directives);
@ -74,11 +75,11 @@ describe('array literals', () => {
function IfTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'my-comp');
Δelement(0, 'my-comp');
}
if (rf & RenderFlags.Update) {
const comp = nextContext();
elementProperty(0, 'names', bind(pureFunction1(1, e0_ff, comp.customName)));
const comp = ΔnextContext();
ΔelementProperty(0, 'names', Δbind(ΔpureFunction1(1, e0_ff, comp.customName)));
}
}
@ -87,12 +88,12 @@ describe('array literals', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(
Δtemplate(
0, IfTemplate, 1, 3, 'my-comp',
[AttributeMarker.Bindings, 'names', AttributeMarker.Template, 'ngIf']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngIf', bind(ctx.showing));
ΔelementProperty(0, 'ngIf', Δbind(ctx.showing));
}
}, 1, 1, [MyComp, NgIf]);
@ -113,7 +114,7 @@ describe('array literals', () => {
// TODO(issue/24571): remove '!'.
names2 !: string[];
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: ManyPropComp,
selectors: [['many-prop-comp']],
factory: function ManyPropComp_Factory() { return manyPropComp = new ManyPropComp(); },
@ -133,11 +134,11 @@ describe('array literals', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'many-prop-comp');
Δelement(0, 'many-prop-comp');
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'names1', bind(pureFunction1(2, e0_ff, ctx.customName)));
elementProperty(0, 'names2', bind(pureFunction1(4, e0_ff_1, ctx.customName2)));
ΔelementProperty(0, 'names1', Δbind(ΔpureFunction1(2, e0_ff, ctx.customName)));
ΔelementProperty(0, 'names2', Δbind(ΔpureFunction1(4, e0_ff_1, ctx.customName2)));
}
}, 1, 6, [ManyPropComp]);
@ -169,7 +170,7 @@ describe('array literals', () => {
return arr;
}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: ParentComp,
selectors: [['parent-comp']],
factory: () => new ParentComp(),
@ -177,12 +178,13 @@ describe('array literals', () => {
vars: 3,
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'my-comp');
ΔelementStart(0, 'my-comp');
myComps.push(getDirectiveOnNode(0));
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'names', bind(ctx.someFn(pureFunction1(1, e0_ff, ctx.customName))));
ΔelementProperty(
0, 'names', Δbind(ctx.someFn(ΔpureFunction1(1, e0_ff, ctx.customName))));
}
},
directives: directives
@ -191,8 +193,8 @@ describe('array literals', () => {
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'parent-comp');
element(1, 'parent-comp');
Δelement(0, 'parent-comp');
Δelement(1, 'parent-comp');
}
}, 2, 0, [ParentComp]);
@ -216,10 +218,11 @@ describe('array literals', () => {
/** <my-comp [names]="['Nancy', customName, 'Bess', customName2]"></my-comp> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'my-comp');
Δelement(0, 'my-comp');
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'names', bind(pureFunction2(1, e0_ff, ctx.customName, ctx.customName2)));
ΔelementProperty(
0, 'names', Δbind(ΔpureFunction2(1, e0_ff, ctx.customName, ctx.customName2)));
}
}, 1, 4, directives);
@ -276,36 +279,37 @@ describe('array literals', () => {
function Template(rf: RenderFlags, c: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'my-comp');
ΔelementStart(0, 'my-comp');
f3Comp = getDirectiveOnNode(0);
elementEnd();
elementStart(1, 'my-comp');
ΔelementEnd();
ΔelementStart(1, 'my-comp');
f4Comp = getDirectiveOnNode(1);
elementEnd();
elementStart(2, 'my-comp');
ΔelementEnd();
ΔelementStart(2, 'my-comp');
f5Comp = getDirectiveOnNode(2);
elementEnd();
elementStart(3, 'my-comp');
ΔelementEnd();
ΔelementStart(3, 'my-comp');
f6Comp = getDirectiveOnNode(3);
elementEnd();
elementStart(4, 'my-comp');
ΔelementEnd();
ΔelementStart(4, 'my-comp');
f7Comp = getDirectiveOnNode(4);
elementEnd();
elementStart(5, 'my-comp');
ΔelementEnd();
ΔelementStart(5, 'my-comp');
f8Comp = getDirectiveOnNode(5);
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'names', bind(pureFunction3(6, e0_ff, c[5], c[6], c[7])));
elementProperty(1, 'names', bind(pureFunction4(10, e2_ff, c[4], c[5], c[6], c[7])));
elementProperty(2, 'names', bind(pureFunction5(15, e4_ff, c[3], c[4], c[5], c[6], c[7])));
elementProperty(
3, 'names', bind(pureFunction6(21, e6_ff, c[2], c[3], c[4], c[5], c[6], c[7])));
elementProperty(
4, 'names', bind(pureFunction7(28, e8_ff, c[1], c[2], c[3], c[4], c[5], c[6], c[7])));
elementProperty(
ΔelementProperty(0, 'names', Δbind(ΔpureFunction3(6, e0_ff, c[5], c[6], c[7])));
ΔelementProperty(1, 'names', Δbind(ΔpureFunction4(10, e2_ff, c[4], c[5], c[6], c[7])));
ΔelementProperty(
2, 'names', Δbind(ΔpureFunction5(15, e4_ff, c[3], c[4], c[5], c[6], c[7])));
ΔelementProperty(
3, 'names', Δbind(ΔpureFunction6(21, e6_ff, c[2], c[3], c[4], c[5], c[6], c[7])));
ΔelementProperty(
4, 'names', Δbind(ΔpureFunction7(28, e8_ff, c[1], c[2], c[3], c[4], c[5], c[6], c[7])));
ΔelementProperty(
5, 'names',
bind(pureFunction8(36, e10_ff, c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7])));
Δbind(ΔpureFunction8(36, e10_ff, c[0], c[1], c[2], c[3], c[4], c[5], c[6], c[7])));
}
}
@ -348,12 +352,12 @@ describe('array literals', () => {
*/
function Template(rf: RenderFlags, c: any) {
if (rf & RenderFlags.Create) {
element(0, 'my-comp');
Δelement(0, 'my-comp');
}
if (rf & RenderFlags.Update) {
elementProperty(
0, 'names', bind(pureFunctionV(3, e0_ff, [
c[0], c[1], c[2], c[3], pureFunction1(1, e0_ff_1, c[4]), c[5], c[6], c[7], c[8]
ΔelementProperty(
0, 'names', Δbind(ΔpureFunctionV(3, e0_ff, [
c[0], c[1], c[2], c[3], ΔpureFunction1(1, e0_ff_1, c[4]), c[5], c[6], c[7], c[8]
])));
}
}
@ -382,7 +386,7 @@ describe('object literals', () => {
// TODO(issue/24571): remove '!'.
config !: {[key: string]: any};
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: ObjectComp,
selectors: [['object-comp']],
factory: function ObjectComp_Factory() { return objectComp = new ObjectComp(); },
@ -401,10 +405,10 @@ describe('object literals', () => {
/** <object-comp [config]="{duration: 500, animation: name}"></object-comp> */
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'object-comp');
Δelement(0, 'object-comp');
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'config', bind(pureFunction1(1, e0_ff, ctx.name)));
ΔelementProperty(0, 'config', Δbind(ΔpureFunction1(1, e0_ff, ctx.name)));
}
}, 1, 3, defs);
@ -438,13 +442,14 @@ describe('object literals', () => {
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'object-comp');
Δelement(0, 'object-comp');
}
if (rf & RenderFlags.Update) {
elementProperty(
0, 'config', bind(pureFunction2(
5, e0_ff, ctx.name,
pureFunction1(3, e0_ff_1, pureFunction1(1, e0_ff_2, ctx.duration)))));
ΔelementProperty(
0, 'config',
Δbind(ΔpureFunction2(
5, e0_ff, ctx.name,
ΔpureFunction1(3, e0_ff_1, ΔpureFunction1(1, e0_ff_2, ctx.duration)))));
}
}, 1, 8, defs);
@ -506,27 +511,27 @@ describe('object literals', () => {
*/
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
container(0);
Δcontainer(0);
}
if (rf & RenderFlags.Update) {
containerRefreshStart(0);
ΔcontainerRefreshStart(0);
{
for (let i = 0; i < 2; i++) {
let rf1 = embeddedViewStart(0, 1, 4);
let rf1 = ΔembeddedViewStart(0, 1, 4);
if (rf1 & RenderFlags.Create) {
elementStart(0, 'object-comp');
ΔelementStart(0, 'object-comp');
objectComps.push(getDirectiveOnNode(0));
elementEnd();
ΔelementEnd();
}
if (rf1 & RenderFlags.Update) {
elementProperty(
ΔelementProperty(
0, 'config',
bind(pureFunction2(1, e0_ff, ctx.configs[i].opacity, ctx.configs[i].duration)));
Δbind(ΔpureFunction2(1, e0_ff, ctx.configs[i].opacity, ctx.configs[i].duration)));
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
}

736
packages/core/test/render3/query_spec.ts
View File

File diff suppressed because it is too large Load Diff

8
packages/core/test/render3/render_util.ts
View File

@ -27,7 +27,7 @@ import {CreateComponentOptions} from '../../src/render3/component';
import {getDirectivesAtNodeIndex, getLContext, isComponentInstance} from '../../src/render3/context_discovery';
import {extractDirectiveDef, extractPipeDef} from '../../src/render3/definition';
import {NG_ELEMENT_ID} from '../../src/render3/fields';
import {ComponentTemplate, ComponentType, DirectiveDef, DirectiveType, ProvidersFeature, RenderFlags, defineComponent, defineDirective, renderComponent as _renderComponent, tick} from '../../src/render3/index';
import {ComponentTemplate, ComponentType, DirectiveDef, DirectiveType, RenderFlags, renderComponent as _renderComponent, tick, ΔProvidersFeature, ΔdefineComponent, ΔdefineDirective} from '../../src/render3/index';
import {DirectiveDefList, DirectiveTypesOrFactory, HostBindingsFunction, PipeDef, PipeDefList, PipeTypesOrFactory} from '../../src/render3/interfaces/definition';
import {PlayerHandler} from '../../src/render3/interfaces/player';
import {ProceduralRenderer3, RComment, RElement, RNode, RText, Renderer3, RendererFactory3, RendererStyleFlags3, domRendererFactory3} from '../../src/render3/interfaces/renderer';
@ -317,7 +317,7 @@ export function createComponent(
viewProviders: Provider[] = [], hostBindings?: HostBindingsFunction<any>): ComponentType<any> {
return class Component {
value: any;
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Component,
selectors: [[name]],
consts: consts,
@ -328,7 +328,7 @@ export function createComponent(
directives: directives, hostBindings,
pipes: pipes,
features: (providers.length > 0 || viewProviders.length > 0)?
[ProvidersFeature(providers || [], viewProviders || [])]: []
[ΔProvidersFeature(providers || [], viewProviders || [])]: []
});
};
}
@ -336,7 +336,7 @@ export function createComponent(
export function createDirective(
name: string, {exportAs}: {exportAs?: string[]} = {}): DirectiveType<any> {
return class Directive {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: Directive,
selectors: [['', name, '']],
factory: () => new Directive(),

78
packages/core/test/render3/renderer_factory_spec.ts
View File

@ -10,8 +10,8 @@ import {AnimationEvent} from '@angular/animations';
import {MockAnimationDriver, MockAnimationPlayer} from '@angular/animations/browser/testing';
import {RendererType2, ViewEncapsulation} from '../../src/core';
import {defineComponent} from '../../src/render3/index';
import {bind, container, containerRefreshEnd, containerRefreshStart, element, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, listener, text, tick} from '../../src/render3/instructions/all';
import {ΔdefineComponent} from '../../src/render3/index';
import {tick, Δbind, Δcontainer, ΔcontainerRefreshEnd, ΔcontainerRefreshStart, Δelement, ΔelementEnd, ΔelementProperty, ΔelementStart, ΔembeddedViewEnd, ΔembeddedViewStart, Δlistener, Δtext} from '../../src/render3/instructions/all';
import {RenderFlags} from '../../src/render3/interfaces/definition';
import {getAnimationRendererFactory2, getRendererFactory2} from './imported_renderer2';
@ -29,7 +29,7 @@ describe('renderer factory lifecycle', () => {
rendererFactory.end = () => logs.push('end');
class SomeComponent {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: SomeComponent,
encapsulation: ViewEncapsulation.None,
selectors: [['some-component']],
@ -38,7 +38,7 @@ describe('renderer factory lifecycle', () => {
template: function(rf: RenderFlags, ctx: SomeComponent) {
if (rf & RenderFlags.Create) {
logs.push('component create');
text(0, 'foo');
Δtext(0, 'foo');
}
if (rf & RenderFlags.Update) {
logs.push('component update');
@ -49,7 +49,7 @@ describe('renderer factory lifecycle', () => {
}
class SomeComponentWhichThrows {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: SomeComponentWhichThrows,
encapsulation: ViewEncapsulation.None,
selectors: [['some-component-with-Error']],
@ -65,7 +65,7 @@ describe('renderer factory lifecycle', () => {
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
logs.push('function create');
text(0, 'bar');
Δtext(0, 'bar');
}
if (rf & RenderFlags.Update) {
logs.push('function update');
@ -77,8 +77,8 @@ describe('renderer factory lifecycle', () => {
function TemplateWithComponent(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
logs.push('function_with_component create');
text(0, 'bar');
element(1, 'some-component');
Δtext(0, 'bar');
Δelement(1, 'some-component');
}
if (rf & RenderFlags.Update) {
logs.push('function_with_component update');
@ -139,7 +139,7 @@ describe('animation renderer factory', () => {
});
class SomeComponent {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: SomeComponent,
encapsulation: ViewEncapsulation.None,
selectors: [['some-component']],
@ -147,7 +147,7 @@ describe('animation renderer factory', () => {
vars: 0,
template: function(rf: RenderFlags, ctx: SomeComponent) {
if (rf & RenderFlags.Create) {
text(0, 'foo');
Δtext(0, 'foo');
}
},
factory: () => new SomeComponent
@ -160,23 +160,23 @@ describe('animation renderer factory', () => {
callback(event: AnimationEvent) {
eventLogs.push(`${event.fromState ? event.fromState : event.toState} - ${event.phaseName}`);
}
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: SomeComponentWithAnimation,
selectors: [['some-component']],
consts: 2,
vars: 1,
template: function(rf: RenderFlags, ctx: SomeComponentWithAnimation) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
ΔelementStart(0, 'div');
{
listener('@myAnimation.start', ctx.callback.bind(ctx));
listener('@myAnimation.done', ctx.callback.bind(ctx));
text(1, 'foo');
Δlistener('@myAnimation.start', ctx.callback.bind(ctx));
Δlistener('@myAnimation.done', ctx.callback.bind(ctx));
Δtext(1, 'foo');
}
elementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(0, '@myAnimation', bind(ctx.exp));
ΔelementProperty(0, '@myAnimation', Δbind(ctx.exp));
}
},
factory: () => new SomeComponentWithAnimation,
@ -234,27 +234,27 @@ describe('Renderer2 destruction hooks', () => {
let condition = true;
function createTemplate() {
elementStart(0, 'div');
{ container(1); }
elementEnd();
ΔelementStart(0, 'div');
{ Δcontainer(1); }
ΔelementEnd();
}
function updateTemplate() {
containerRefreshStart(1);
ΔcontainerRefreshStart(1);
{
if (condition) {
let rf1 = embeddedViewStart(1, 3, 0);
let rf1 = ΔembeddedViewStart(1, 3, 0);
{
if (rf1 & RenderFlags.Create) {
element(0, 'span');
element(1, 'span');
element(2, 'span');
Δelement(0, 'span');
Δelement(1, 'span');
Δelement(2, 'span');
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
const t = new TemplateFixture(
@ -270,7 +270,7 @@ describe('Renderer2 destruction hooks', () => {
it('should call renderer.destroy for each component destroyed', () => {
class SimpleComponent {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: SimpleComponent,
encapsulation: ViewEncapsulation.None,
selectors: [['simple']],
@ -278,7 +278,7 @@ describe('Renderer2 destruction hooks', () => {
vars: 0,
template: function(rf: RenderFlags, ctx: SimpleComponent) {
if (rf & RenderFlags.Create) {
element(0, 'span');
Δelement(0, 'span');
}
},
factory: () => new SimpleComponent,
@ -288,27 +288,27 @@ describe('Renderer2 destruction hooks', () => {
let condition = true;
function createTemplate() {
elementStart(0, 'div');
{ container(1); }
elementEnd();
ΔelementStart(0, 'div');
{ Δcontainer(1); }
ΔelementEnd();
}
function updateTemplate() {
containerRefreshStart(1);
ΔcontainerRefreshStart(1);
{
if (condition) {
let rf1 = embeddedViewStart(1, 3, 0);
let rf1 = ΔembeddedViewStart(1, 3, 0);
{
if (rf1 & RenderFlags.Create) {
element(0, 'simple');
element(1, 'span');
element(2, 'simple');
Δelement(0, 'simple');
Δelement(1, 'span');
Δelement(2, 'simple');
}
}
embeddedViewEnd();
ΔembeddedViewEnd();
}
}
containerRefreshEnd();
ΔcontainerRefreshEnd();
}
const t = new TemplateFixture(

108
packages/core/test/render3/styling/class_and_style_bindings_spec.ts
View File

@ -9,7 +9,7 @@ import {createLView, createTView} from '@angular/core/src/render3/instructions/s
import {createRootContext} from '../../../src/render3/component';
import {getLContext} from '../../../src/render3/context_discovery';
import {defineComponent, defineDirective, elementClassProp, elementEnd, elementHostClassProp, elementHostStyleProp, elementHostStyling, elementHostStylingApply, elementStart, elementStyleProp, elementStyling, elementStylingApply, elementStylingMap, namespaceSVG} from '../../../src/render3/index';
import {ΔdefineComponent, ΔdefineDirective, ΔelementClassProp, ΔelementEnd, ΔelementHostClassProp, ΔelementHostStyleProp, ΔelementHostStyling, ΔelementHostStylingApply, ΔelementStart, ΔelementStyleProp, ΔelementStyling, ΔelementStylingApply, ΔelementStylingMap, ΔnamespaceSVG} from '../../../src/render3/index';
import {RenderFlags} from '../../../src/render3/interfaces/definition';
import {AttributeMarker, TAttributes} from '../../../src/render3/interfaces/node';
import {BindingStore, BindingType, PlayState, Player, PlayerContext, PlayerFactory, PlayerHandler} from '../../../src/render3/interfaces/player';
@ -22,7 +22,7 @@ import {CorePlayerHandler} from '../../../src/render3/styling/core_player_handle
import {registerHostDirective} from '../../../src/render3/styling/host_instructions_queue';
import {BoundPlayerFactory, bindPlayerFactory} from '../../../src/render3/styling/player_factory';
import {allocStylingContext, createEmptyStylingContext} from '../../../src/render3/styling/util';
import {defaultStyleSanitizer} from '../../../src/sanitization/sanitization';
import {ΔdefaultStyleSanitizer} from '../../../src/sanitization/sanitization';
import {StyleSanitizeFn} from '../../../src/sanitization/style_sanitizer';
import {ComponentFixture, renderToHtml} from '../render_util';
@ -376,7 +376,7 @@ describe('style and class based bindings', () => {
() => {
function Template(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'span', [
ΔelementStart(0, 'span', [
AttributeMarker.Styles,
'width',
'200px',
@ -385,13 +385,13 @@ describe('style and class based bindings', () => {
'opacity',
'0.5',
]);
elementStyling(null, ['width']);
elementEnd();
ΔelementStyling(null, ['width']);
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementStylingMap(0, null, ctx.myStyles);
elementStyleProp(0, 0, ctx.myWidth);
elementStylingApply(0);
ΔelementStylingMap(0, null, ctx.myStyles);
ΔelementStyleProp(0, 0, ctx.myWidth);
ΔelementStylingApply(0);
}
}
@ -411,7 +411,7 @@ describe('style and class based bindings', () => {
class Comp {
diameter: number = 100;
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
selectors: [['comp']],
factory: () => new Comp(),
@ -419,17 +419,17 @@ describe('style and class based bindings', () => {
vars: 0,
template: (rf: RenderFlags, ctx: Comp) => {
if (rf & RenderFlags.Create) {
namespaceSVG();
elementStart(0, 'svg');
elementStyling(null, ['width', 'height']);
elementStart(1, 'circle', ['stroke', 'green', 'fill', 'yellow']);
elementEnd();
elementEnd();
ΔnamespaceSVG();
ΔelementStart(0, 'svg');
ΔelementStyling(null, ['width', 'height']);
ΔelementStart(1, 'circle', ['stroke', 'green', 'fill', 'yellow']);
ΔelementEnd();
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementStyleProp(0, 0, ctx.diameter, 'px');
elementStyleProp(0, 1, ctx.diameter, 'px');
elementStylingApply(0);
ΔelementStyleProp(0, 0, ctx.diameter, 'px');
ΔelementStyleProp(0, 1, ctx.diameter, 'px');
ΔelementStylingApply(0);
}
}
});
@ -453,7 +453,7 @@ describe('style and class based bindings', () => {
borderWidth: string = '3px';
borderColor: string = 'red';
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
selectors: [['comp']],
factory: () => new Comp(),
@ -461,14 +461,14 @@ describe('style and class based bindings', () => {
vars: 0,
template: (rf: RenderFlags, ctx: Comp) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
elementStyling(null, ['borderWidth', 'border-color']);
elementEnd();
ΔelementStart(0, 'div');
ΔelementStyling(null, ['borderWidth', 'border-color']);
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementStyleProp(0, 0, ctx.borderWidth);
elementStyleProp(0, 1, ctx.borderColor);
elementStylingApply(0);
ΔelementStyleProp(0, 0, ctx.borderWidth);
ΔelementStyleProp(0, 1, ctx.borderColor);
ΔelementStylingApply(0);
}
}
});
@ -1269,7 +1269,7 @@ describe('style and class based bindings', () => {
() => {
const getStyles = trackStylesFactory();
const styleBindings = ['border-image', 'border-width'];
const styleSanitizer = defaultStyleSanitizer;
const styleSanitizer = ΔdefaultStyleSanitizer;
const stylingContext =
createStylingContext(null, styleBindings, null, null, styleSanitizer);
@ -3086,7 +3086,7 @@ describe('style and class based bindings', () => {
const fooFactory = bindPlayerFactory(classBuildFn, true);
class Comp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
selectors: [['comp']],
directives: [Comp],
@ -3095,15 +3095,15 @@ describe('style and class based bindings', () => {
vars: 0,
template: (rf: RenderFlags, ctx: Comp) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
elementStyling(['foo'], ['width']);
elementEnd();
ΔelementStart(0, 'div');
ΔelementStyling(['foo'], ['width']);
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementStylingMap(0, classMapFactory, styleMapFactory);
elementStyleProp(0, 0, widthFactory);
elementClassProp(0, 0, fooFactory);
elementStylingApply(0);
ΔelementStylingMap(0, classMapFactory, styleMapFactory);
ΔelementStyleProp(0, 0, widthFactory);
ΔelementClassProp(0, 0, fooFactory);
ΔelementStylingApply(0);
}
}
});
@ -3159,7 +3159,7 @@ describe('style and class based bindings', () => {
let fooFactory = bindPlayerFactory(buildFn, true) as BoundPlayerFactory<any>;
class Comp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
selectors: [['comp']],
directives: [Comp],
@ -3168,15 +3168,15 @@ describe('style and class based bindings', () => {
vars: 0,
template: (rf: RenderFlags, ctx: Comp) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
elementStyling(['foo'], ['width']);
elementEnd();
ΔelementStart(0, 'div');
ΔelementStyling(['foo'], ['width']);
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementStylingMap(0, classMapFactory, styleMapFactory);
elementStyleProp(0, 0, widthFactory);
elementClassProp(0, 0, fooFactory);
elementStylingApply(0);
ΔelementStylingMap(0, classMapFactory, styleMapFactory);
ΔelementStyleProp(0, 0, widthFactory);
ΔelementClassProp(0, 0, fooFactory);
ΔelementStylingApply(0);
}
}
});
@ -3234,18 +3234,18 @@ describe('style and class based bindings', () => {
const fooFactory2 = bindPlayerFactory(classBuildFn, true);
class MyDir {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: MyDir,
selectors: [['', 'my-dir', '']],
factory: () => new MyDir(),
hostBindings: function(rf: RenderFlags, ctx: MyDir, elementIndex: number) {
if (rf & RenderFlags.Create) {
elementHostStyling(['foo'], ['width']);
ΔelementHostStyling(['foo'], ['width']);
}
if (rf & RenderFlags.Update) {
elementHostStyleProp(0, ctx.widthFactory);
elementHostClassProp(0, ctx.fooFactory);
elementHostStylingApply();
ΔelementHostStyleProp(0, ctx.widthFactory);
ΔelementHostClassProp(0, ctx.fooFactory);
ΔelementHostStylingApply();
}
}
});
@ -3255,7 +3255,7 @@ describe('style and class based bindings', () => {
}
class Comp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
selectors: [['comp']],
directives: [Comp, MyDir],
@ -3264,14 +3264,14 @@ describe('style and class based bindings', () => {
vars: 0,
template: (rf: RenderFlags, ctx: Comp) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'div', ['my-dir', '']);
elementStyling(['foo'], ['width']);
elementEnd();
ΔelementStart(0, 'div', ['my-dir', '']);
ΔelementStyling(['foo'], ['width']);
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementStyleProp(0, 0, ctx.widthFactory);
elementClassProp(0, 0, ctx.fooFactory);
elementStylingApply(0);
ΔelementStyleProp(0, 0, ctx.widthFactory);
ΔelementClassProp(0, 0, ctx.fooFactory);
ΔelementStylingApply(0);
}
}
});

33
packages/core/test/render3/styling/players_spec.ts
View File

@ -8,12 +8,12 @@
import {QueryList} from '@angular/core';
import {RenderFlags} from '@angular/core/src/render3';
import {defineComponent, getHostElement, loadViewQuery, viewQuery} from '../../../src/render3/index';
import {element, elementEnd, elementStart, elementStyling, elementStylingApply, markDirty} from '../../../src/render3/instructions/all';
import {getHostElement, ΔdefineComponent, ΔloadViewQuery, ΔviewQuery} from '../../../src/render3/index';
import {markDirty, Δelement, ΔelementEnd, ΔelementStart, ΔelementStyling, ΔelementStylingApply} from '../../../src/render3/instructions/all';
import {PlayState, Player, PlayerHandler} from '../../../src/render3/interfaces/player';
import {RElement} from '../../../src/render3/interfaces/renderer';
import {addPlayer, getPlayers} from '../../../src/render3/players';
import {queryRefresh} from '../../../src/render3/query';
import {ΔqueryRefresh} from '../../../src/render3/query';
import {getOrCreatePlayerContext} from '../../../src/render3/styling/util';
import {ComponentFixture} from '../render_util';
@ -228,7 +228,7 @@ function buildElementWithStyling() {
}
class Comp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: Comp,
exportAs: ['child'],
selectors: [['child-comp']],
@ -237,7 +237,7 @@ class Comp {
vars: 0,
template: (rf: RenderFlags, ctx: Comp) => {
if (rf & RenderFlags.Create) {
element(0, 'div');
Δelement(0, 'div');
}
ctx.logger();
}
@ -248,7 +248,7 @@ class Comp {
}
class CompWithStyling {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: CompWithStyling,
exportAs: ['child-styled'],
selectors: [['child-styled-comp']],
@ -257,12 +257,12 @@ class CompWithStyling {
vars: 0,
template: (rf: RenderFlags, ctx: CompWithStyling) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
elementStyling(['fooClass']);
elementEnd();
ΔelementStart(0, 'div');
ΔelementStyling(['fooClass']);
ΔelementEnd();
}
if (rf & RenderFlags.Update) {
elementStylingApply(0);
ΔelementStylingApply(0);
}
}
});
@ -271,7 +271,7 @@ class CompWithStyling {
}
class SuperComp {
static ngComponentDef = defineComponent({
static ngComponentDef = ΔdefineComponent({
type: SuperComp,
selectors: [['super-comp']],
factory: () => new SuperComp(),
@ -279,18 +279,19 @@ class SuperComp {
vars: 0,
template: (rf: RenderFlags, ctx: SuperComp) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'div');
element(1, 'child-comp', ['child', ''], ['child', 'child']);
elementEnd();
ΔelementStart(0, 'div');
Δelement(1, 'child-comp', ['child', ''], ['child', 'child']);
ΔelementEnd();
}
},
viewQuery: function(rf: RenderFlags, ctx: SuperComp) {
if (rf & RenderFlags.Create) {
viewQuery(['child'], true, null);
ΔviewQuery(['child'], true, null);
}
if (rf & RenderFlags.Update) {
let tmp: any;
queryRefresh(tmp = loadViewQuery<QueryList<any>>()) && (ctx.query = tmp as QueryList<any>);
ΔqueryRefresh(tmp = ΔloadViewQuery<QueryList<any>>()) &&
(ctx.query = tmp as QueryList<any>);
}
},
directives: [Comp]

38
packages/core/test/render3/template_ref_spec.ts
View File

@ -8,21 +8,21 @@
import {TemplateRef} from '@angular/core';
import {ComponentFixture, createComponent, getDirectiveOnNode} from './render_util';
import {bind, directiveInject, element, elementContainerStart, elementContainerEnd, elementProperty, template, text} from '../../src/render3/instructions/all';
import {RenderFlags, defineDirective, AttributeMarker} from '../../src/render3/index';
import {AttributeMarker, RenderFlags, ΔdefineDirective} from '../../src/render3/index';
import {Δbind, ΔdirectiveInject, Δelement, ΔelementContainerEnd, ΔelementContainerStart, ΔelementProperty, Δtemplate, Δtext} from '../../src/render3/instructions/all';
import {NgIf} from './common_with_def';
import {ComponentFixture, createComponent, getDirectiveOnNode} from './render_util';
describe('TemplateRef', () => {
describe('rootNodes', () => {
class DirectiveWithTplRef {
static ngDirectiveDef = defineDirective({
static ngDirectiveDef = ΔdefineDirective({
type: DirectiveWithTplRef,
selectors: [['', 'tplRef', '']],
factory: () => new DirectiveWithTplRef(directiveInject(TemplateRef as any))
factory: () => new DirectiveWithTplRef(ΔdirectiveInject(TemplateRef as any))
});
// injecting a ViewContainerRef to create a dynamic container in which embedded views will be
@ -35,9 +35,9 @@ describe('TemplateRef', () => {
function embeddedTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
element(0, 'div');
text(1, 'some text');
element(2, 'span');
Δelement(0, 'div');
Δtext(1, 'some text');
Δelement(2, 'span');
}
}
@ -50,7 +50,7 @@ describe('TemplateRef', () => {
*/
const AppComponent = createComponent('app-cmp', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(0, embeddedTemplate, 3, 0, 'ng-template', ['tplRef', '']);
Δtemplate(0, embeddedTemplate, 3, 0, 'ng-template', ['tplRef', '']);
directiveWithTplRef = getDirectiveOnNode(0, 0);
}
}, 1, 0, [DirectiveWithTplRef]);
@ -79,7 +79,7 @@ describe('TemplateRef', () => {
*/
const AppComponent = createComponent('app-cmp', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(0, () => {}, 0, 0, 'ng-template', ['tplRef', '']);
Δtemplate(0, () => {}, 0, 0, 'ng-template', ['tplRef', '']);
directiveWithTplRef = getDirectiveOnNode(0, 0);
}
}, 1, 0, [DirectiveWithTplRef]);
@ -102,16 +102,16 @@ describe('TemplateRef', () => {
function ngIfTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
text(0, 'text');
Δtext(0, 'text');
}
}
function embeddedTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(0, ngIfTemplate, 1, 0, 'ng-template', [AttributeMarker.Bindings, 'ngIf']);
Δtemplate(0, ngIfTemplate, 1, 0, 'ng-template', [AttributeMarker.Bindings, 'ngIf']);
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'ngIf', bind(ctx.showing));
ΔelementProperty(0, 'ngIf', Δbind(ctx.showing));
}
}
@ -120,7 +120,7 @@ describe('TemplateRef', () => {
*/
const AppComponent = createComponent('app-cmp', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(0, embeddedTemplate, 1, 1, 'ng-template', ['tplRef', '']);
Δtemplate(0, embeddedTemplate, 1, 1, 'ng-template', ['tplRef', '']);
directiveWithTplRef = getDirectiveOnNode(0, 0);
}
}, 1, 0, [DirectiveWithTplRef, NgIf]);
@ -147,9 +147,9 @@ describe('TemplateRef', () => {
function embeddedTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementContainerStart(0);
{ text(1, 'text'); }
elementContainerEnd();
ΔelementContainerStart(0);
{ Δtext(1, 'text'); }
ΔelementContainerEnd();
}
}
@ -158,7 +158,7 @@ describe('TemplateRef', () => {
*/
const AppComponent = createComponent('app-cmp', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(0, embeddedTemplate, 2, 0, 'ng-template', ['tplRef', '']);
Δtemplate(0, embeddedTemplate, 2, 0, 'ng-template', ['tplRef', '']);
directiveWithTplRef = getDirectiveOnNode(0, 0);
}
}, 1, 0, [DirectiveWithTplRef]);
@ -175,4 +175,4 @@ describe('TemplateRef', () => {
expect(viewRef.rootNodes[1].nodeType).toBe(3); // a text node
});
});
});
});

533
packages/core/test/render3/view_container_ref_spec.ts
View File

File diff suppressed because it is too large Load Diff

80
packages/core/test/sanitization/sanatization_spec.ts
View File

@ -12,7 +12,7 @@ import {HEADER_OFFSET, LView} from '@angular/core/src/render3/interfaces/view';
import {setTNodeAndViewData} from '@angular/core/src/render3/state';
import {bypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript, bypassSanitizationTrustStyle, bypassSanitizationTrustUrl} from '../../src/sanitization/bypass';
import {getUrlSanitizer, sanitizeHtml, sanitizeResourceUrl, sanitizeScript, sanitizeStyle, sanitizeUrl, sanitizeUrlOrResourceUrl} from '../../src/sanitization/sanitization';
import {getUrlSanitizer, ΔsanitizeHtml, ΔsanitizeResourceUrl, ΔsanitizeScript, ΔsanitizeStyle, ΔsanitizeUrl, ΔsanitizeUrlOrResourceUrl} from '../../src/sanitization/sanitization';
import {SecurityContext} from '../../src/sanitization/security';
function fakeLView(): LView {
@ -27,54 +27,54 @@ describe('sanitization', () => {
toString() { return this.value; }
}
it('should sanitize html', () => {
expect(sanitizeHtml('<div></div>')).toEqual('<div></div>');
expect(sanitizeHtml(new Wrap('<div></div>'))).toEqual('<div></div>');
expect(sanitizeHtml('<img src="javascript:true">'))
expect(ΔsanitizeHtml('<div></div>')).toEqual('<div></div>');
expect(ΔsanitizeHtml(new Wrap('<div></div>'))).toEqual('<div></div>');
expect(ΔsanitizeHtml('<img src="javascript:true">'))
.toEqual('<img src="unsafe:javascript:true">');
expect(sanitizeHtml(new Wrap('<img src="javascript:true">')))
expect(ΔsanitizeHtml(new Wrap('<img src="javascript:true">')))
.toEqual('<img src="unsafe:javascript:true">');
expect(sanitizeHtml(bypassSanitizationTrustUrl('<img src="javascript:true">')))
expect(ΔsanitizeHtml(bypassSanitizationTrustUrl('<img src="javascript:true">')))
.toEqual('<img src="unsafe:javascript:true">');
expect(sanitizeHtml(bypassSanitizationTrustHtml('<img src="javascript:true">')))
expect(ΔsanitizeHtml(bypassSanitizationTrustHtml('<img src="javascript:true">')))
.toEqual('<img src="javascript:true">');
});
it('should sanitize url', () => {
expect(sanitizeUrl('http://server')).toEqual('http://server');
expect(sanitizeUrl(new Wrap('http://server'))).toEqual('http://server');
expect(sanitizeUrl('javascript:true')).toEqual('unsafe:javascript:true');
expect(sanitizeUrl(new Wrap('javascript:true'))).toEqual('unsafe:javascript:true');
expect(sanitizeUrl(bypassSanitizationTrustHtml('javascript:true')))
expect(ΔsanitizeUrl('http://server')).toEqual('http://server');
expect(ΔsanitizeUrl(new Wrap('http://server'))).toEqual('http://server');
expect(ΔsanitizeUrl('javascript:true')).toEqual('unsafe:javascript:true');
expect(ΔsanitizeUrl(new Wrap('javascript:true'))).toEqual('unsafe:javascript:true');
expect(ΔsanitizeUrl(bypassSanitizationTrustHtml('javascript:true')))
.toEqual('unsafe:javascript:true');
expect(sanitizeUrl(bypassSanitizationTrustUrl('javascript:true'))).toEqual('javascript:true');
expect(ΔsanitizeUrl(bypassSanitizationTrustUrl('javascript:true'))).toEqual('javascript:true');
});
it('should sanitize resourceUrl', () => {
const ERROR = 'unsafe value used in a resource URL context (see http://g.co/ng/security#xss)';
expect(() => sanitizeResourceUrl('http://server')).toThrowError(ERROR);
expect(() => sanitizeResourceUrl('javascript:true')).toThrowError(ERROR);
expect(() => sanitizeResourceUrl(bypassSanitizationTrustHtml('javascript:true')))
expect(() => ΔsanitizeResourceUrl('http://server')).toThrowError(ERROR);
expect(() => ΔsanitizeResourceUrl('javascript:true')).toThrowError(ERROR);
expect(() => ΔsanitizeResourceUrl(bypassSanitizationTrustHtml('javascript:true')))
.toThrowError(ERROR);
expect(sanitizeResourceUrl(bypassSanitizationTrustResourceUrl('javascript:true')))
expect(ΔsanitizeResourceUrl(bypassSanitizationTrustResourceUrl('javascript:true')))
.toEqual('javascript:true');
});
it('should sanitize style', () => {
expect(sanitizeStyle('red')).toEqual('red');
expect(sanitizeStyle(new Wrap('red'))).toEqual('red');
expect(sanitizeStyle('url("http://server")')).toEqual('unsafe');
expect(sanitizeStyle(new Wrap('url("http://server")'))).toEqual('unsafe');
expect(sanitizeStyle(bypassSanitizationTrustHtml('url("http://server")'))).toEqual('unsafe');
expect(sanitizeStyle(bypassSanitizationTrustStyle('url("http://server")')))
expect(ΔsanitizeStyle('red')).toEqual('red');
expect(ΔsanitizeStyle(new Wrap('red'))).toEqual('red');
expect(ΔsanitizeStyle('url("http://server")')).toEqual('unsafe');
expect(ΔsanitizeStyle(new Wrap('url("http://server")'))).toEqual('unsafe');
expect(ΔsanitizeStyle(bypassSanitizationTrustHtml('url("http://server")'))).toEqual('unsafe');
expect(ΔsanitizeStyle(bypassSanitizationTrustStyle('url("http://server")')))
.toEqual('url("http://server")');
});
it('should sanitize script', () => {
const ERROR = 'unsafe value used in a script context';
expect(() => sanitizeScript('true')).toThrowError(ERROR);
expect(() => sanitizeScript('true')).toThrowError(ERROR);
expect(() => sanitizeScript(bypassSanitizationTrustHtml('true'))).toThrowError(ERROR);
expect(sanitizeScript(bypassSanitizationTrustScript('true'))).toEqual('true');
expect(() => ΔsanitizeScript('true')).toThrowError(ERROR);
expect(() => ΔsanitizeScript('true')).toThrowError(ERROR);
expect(() => ΔsanitizeScript(bypassSanitizationTrustHtml('true'))).toThrowError(ERROR);
expect(ΔsanitizeScript(bypassSanitizationTrustScript('true'))).toEqual('true');
});
it('should select correct sanitizer for URL props', () => {
@ -82,8 +82,8 @@ describe('sanitization', () => {
// runtime function definition
const schema = SECURITY_SCHEMA();
const contextsByProp: Map<string, Set<number>> = new Map();
const sanitizerNameByContext: Map<number, string> = new Map([
[SecurityContext.URL, 'sanitizeUrl'], [SecurityContext.RESOURCE_URL, 'sanitizeResourceUrl']
const sanitizerNameByContext: Map<number, Function> = new Map([
[SecurityContext.URL, ΔsanitizeUrl], [SecurityContext.RESOURCE_URL, ΔsanitizeResourceUrl]
]);
Object.keys(schema).forEach(key => {
const context = schema[key];
@ -94,7 +94,7 @@ describe('sanitization', () => {
contextsByProp.set(prop, contexts);
// check only in case a prop can be a part of both URL contexts
if (contexts.size === 2) {
expect(getUrlSanitizer(tag, prop).name).toEqual(sanitizerNameByContext.get(context) !);
expect(getUrlSanitizer(tag, prop)).toEqual(sanitizerNameByContext.get(context) !);
}
}
});
@ -102,28 +102,28 @@ describe('sanitization', () => {
it('should sanitize resourceUrls via sanitizeUrlOrResourceUrl', () => {
const ERROR = 'unsafe value used in a resource URL context (see http://g.co/ng/security#xss)';
expect(() => sanitizeUrlOrResourceUrl('http://server', 'iframe', 'src')).toThrowError(ERROR);
expect(() => sanitizeUrlOrResourceUrl('javascript:true', 'iframe', 'src')).toThrowError(ERROR);
expect(() => ΔsanitizeUrlOrResourceUrl('http://server', 'iframe', 'src')).toThrowError(ERROR);
expect(() => ΔsanitizeUrlOrResourceUrl('javascript:true', 'iframe', 'src')).toThrowError(ERROR);
expect(
() => sanitizeUrlOrResourceUrl(
() => ΔsanitizeUrlOrResourceUrl(
bypassSanitizationTrustHtml('javascript:true'), 'iframe', 'src'))
.toThrowError(ERROR);
expect(sanitizeUrlOrResourceUrl(
expect(ΔsanitizeUrlOrResourceUrl(
bypassSanitizationTrustResourceUrl('javascript:true'), 'iframe', 'src'))
.toEqual('javascript:true');
});
it('should sanitize urls via sanitizeUrlOrResourceUrl', () => {
expect(sanitizeUrlOrResourceUrl('http://server', 'a', 'href')).toEqual('http://server');
expect(sanitizeUrlOrResourceUrl(new Wrap('http://server'), 'a', 'href'))
expect(ΔsanitizeUrlOrResourceUrl('http://server', 'a', 'href')).toEqual('http://server');
expect(ΔsanitizeUrlOrResourceUrl(new Wrap('http://server'), 'a', 'href'))
.toEqual('http://server');
expect(sanitizeUrlOrResourceUrl('javascript:true', 'a', 'href'))
expect(ΔsanitizeUrlOrResourceUrl('javascript:true', 'a', 'href'))
.toEqual('unsafe:javascript:true');
expect(sanitizeUrlOrResourceUrl(new Wrap('javascript:true'), 'a', 'href'))
expect(ΔsanitizeUrlOrResourceUrl(new Wrap('javascript:true'), 'a', 'href'))
.toEqual('unsafe:javascript:true');
expect(sanitizeUrlOrResourceUrl(bypassSanitizationTrustHtml('javascript:true'), 'a', 'href'))
expect(ΔsanitizeUrlOrResourceUrl(bypassSanitizationTrustHtml('javascript:true'), 'a', 'href'))
.toEqual('unsafe:javascript:true');
expect(sanitizeUrlOrResourceUrl(bypassSanitizationTrustUrl('javascript:true'), 'a', 'href'))
expect(ΔsanitizeUrlOrResourceUrl(bypassSanitizationTrustUrl('javascript:true'), 'a', 'href'))
.toEqual('javascript:true');
});
});

Some files were not shown because too many files have changed in this diff Show More