diff --git a/goldens/public-api/core/core.d.ts b/goldens/public-api/core/core.d.ts index 48bb530ff1..dfb7c9cdf3 100644 --- a/goldens/public-api/core/core.d.ts +++ b/goldens/public-api/core/core.d.ts @@ -894,7 +894,7 @@ export declare function ɵɵnextContext(level?: number): T; export declare type ɵɵNgModuleDefWithMeta = ɵNgModuleDef; -export declare function ɵɵNgOnChangesFeature(definition: ɵDirectiveDef): void; +export declare function ɵɵNgOnChangesFeature(): DirectiveDefFeature; export declare function ɵɵpipe(index: number, pipeName: string): any; @@ -1056,7 +1056,7 @@ export declare function ɵɵstylePropInterpolateV(prop: string, values: any[], v export declare function ɵɵtemplate(index: number, templateFn: ComponentTemplate | null, decls: number, vars: number, tagName?: string | null, attrsIndex?: number | null, localRefsIndex?: number | null, localRefExtractor?: LocalRefExtractor): void; -export declare function ɵɵtemplateRefExtractor(tNode: TNode, currentView: ɵangular_packages_core_core_bo): TemplateRef | null; +export declare function ɵɵtemplateRefExtractor(tNode: TNode, currentView: ɵangular_packages_core_core_bp): TemplateRef | null; export declare function ɵɵtext(index: number, value?: string): void; diff --git a/goldens/size-tracking/aio-payloads.json b/goldens/size-tracking/aio-payloads.json index b382fea53a..4dbcab3374 100755 --- a/goldens/size-tracking/aio-payloads.json +++ b/goldens/size-tracking/aio-payloads.json @@ -12,7 +12,7 @@ "master": { "uncompressed": { "runtime-es2015": 2987, - "main-es2015": 450883, + "main-es2015": 450301, "polyfills-es2015": 52630 } } @@ -26,4 +26,4 @@ } } } -} +} \ No newline at end of file diff --git a/goldens/size-tracking/integration-payloads.json b/goldens/size-tracking/integration-payloads.json index 93c9f66230..6535e3d4b6 100644 --- a/goldens/size-tracking/integration-payloads.json +++ b/goldens/size-tracking/integration-payloads.json @@ -12,8 +12,8 @@ "master": { "uncompressed": { "runtime-es2015": 1485, - "main-es2015": 16959, - "polyfills-es2015": 36938 + "main-es2015": 17362, + "polyfills-es2015": 36657 } } }, @@ -21,7 +21,7 @@ "master": { "uncompressed": { "runtime-es2015": 1485, - "main-es2015": 147314, + "main-es2015": 147573, "polyfills-es2015": 36571 } } @@ -30,7 +30,7 @@ "master": { "uncompressed": { "runtime-es2015": 1485, - "main-es2015": 135533, + "main-es2015": 136168, "polyfills-es2015": 37248 } } @@ -39,7 +39,7 @@ "master": { "uncompressed": { "runtime-es2015": 2289, - "main-es2015": 246044, + "main-es2015": 245351, "polyfills-es2015": 36938, "5-es2015": 751 } @@ -66,4 +66,4 @@ } } } -} +} \ No newline at end of file diff --git a/packages/core/src/render3/definition.ts b/packages/core/src/render3/definition.ts index 829e04a999..74fa4237b6 100644 --- a/packages/core/src/render3/definition.ts +++ b/packages/core/src/render3/definition.ts @@ -290,72 +290,65 @@ export function ɵɵdefineComponent(componentDefinition: { schemas?: SchemaMetadata[] | null; }): never { return noSideEffects(() => { - // Initialize ngDevMode. This must be the first statement in ɵɵdefineComponent. - // See the `initNgDevMode` docstring for more information. - (typeof ngDevMode === 'undefined' || ngDevMode) && initNgDevMode(); + // Initialize ngDevMode. This must be the first statement in ɵɵdefineComponent. + // See the `initNgDevMode` docstring for more information. + (typeof ngDevMode === 'undefined' || ngDevMode) && initNgDevMode(); - const type = componentDefinition.type; - const typePrototype = type.prototype; - const declaredInputs: {[key: string]: string} = {} as any; - const def: Mutable, keyof ComponentDef> = { - type: type, - providersResolver: null, - decls: componentDefinition.decls, - vars: componentDefinition.vars, - factory: null, - template: componentDefinition.template || null!, - consts: componentDefinition.consts || null, - ngContentSelectors: componentDefinition.ngContentSelectors, - hostBindings: componentDefinition.hostBindings || null, - hostVars: componentDefinition.hostVars || 0, - hostAttrs: componentDefinition.hostAttrs || null, - contentQueries: componentDefinition.contentQueries || null, - declaredInputs: declaredInputs, - inputs: null!, // assigned in noSideEffects - outputs: null!, // assigned in noSideEffects - exportAs: componentDefinition.exportAs || null, - onChanges: null, - onInit: typePrototype.ngOnInit || null, - doCheck: typePrototype.ngDoCheck || null, - afterContentInit: typePrototype.ngAfterContentInit || null, - afterContentChecked: typePrototype.ngAfterContentChecked || null, - afterViewInit: typePrototype.ngAfterViewInit || null, - afterViewChecked: typePrototype.ngAfterViewChecked || null, - onDestroy: typePrototype.ngOnDestroy || null, - onPush: componentDefinition.changeDetection === ChangeDetectionStrategy.OnPush, - directiveDefs: null!, // assigned in noSideEffects - pipeDefs: null!, // assigned in noSideEffects - selectors: componentDefinition.selectors || EMPTY_ARRAY, - viewQuery: componentDefinition.viewQuery || null, - features: componentDefinition.features as DirectiveDefFeature[] || null, - data: componentDefinition.data || {}, - // TODO(misko): convert ViewEncapsulation into const enum so that it can be used directly in - // the next line. Also `None` should be 0 not 2. - encapsulation: componentDefinition.encapsulation || ViewEncapsulation.Emulated, - id: 'c', - styles: componentDefinition.styles || EMPTY_ARRAY, - _: null as never, - setInput: null, - schemas: componentDefinition.schemas || null, - tView: null, - }; - const directiveTypes = componentDefinition.directives!; - const feature = componentDefinition.features; - const pipeTypes = componentDefinition.pipes!; - def.id += _renderCompCount++; - def.inputs = invertObject(componentDefinition.inputs, declaredInputs), - def.outputs = invertObject(componentDefinition.outputs), - feature && feature.forEach((fn) => fn(def)); - def.directiveDefs = directiveTypes ? - () => (typeof directiveTypes === 'function' ? directiveTypes() : directiveTypes) - .map(extractDirectiveDef) : - null; - def.pipeDefs = pipeTypes ? - () => (typeof pipeTypes === 'function' ? pipeTypes() : pipeTypes).map(extractPipeDef) : - null; + const type = componentDefinition.type; + const typePrototype = type.prototype; + const declaredInputs: {[key: string]: string} = {} as any; + const def: Mutable, keyof ComponentDef> = { + type: type, + providersResolver: null, + decls: componentDefinition.decls, + vars: componentDefinition.vars, + factory: null, + template: componentDefinition.template || null!, + consts: componentDefinition.consts || null, + ngContentSelectors: componentDefinition.ngContentSelectors, + hostBindings: componentDefinition.hostBindings || null, + hostVars: componentDefinition.hostVars || 0, + hostAttrs: componentDefinition.hostAttrs || null, + contentQueries: componentDefinition.contentQueries || null, + declaredInputs: declaredInputs, + inputs: null!, // assigned in noSideEffects + outputs: null!, // assigned in noSideEffects + exportAs: componentDefinition.exportAs || null, + onPush: componentDefinition.changeDetection === ChangeDetectionStrategy.OnPush, + directiveDefs: null!, // assigned in noSideEffects + pipeDefs: null!, // assigned in noSideEffects + selectors: componentDefinition.selectors || EMPTY_ARRAY, + viewQuery: componentDefinition.viewQuery || null, + features: componentDefinition.features as DirectiveDefFeature[] || null, + data: componentDefinition.data || {}, + // TODO(misko): convert ViewEncapsulation into const enum so that it can be used + // directly in the next line. Also `None` should be 0 not 2. + encapsulation: componentDefinition.encapsulation || ViewEncapsulation.Emulated, + id: 'c', + styles: componentDefinition.styles || EMPTY_ARRAY, + _: null as never, + setInput: null, + schemas: componentDefinition.schemas || null, + tView: null, + }; + const directiveTypes = componentDefinition.directives!; + const feature = componentDefinition.features; + const pipeTypes = componentDefinition.pipes!; + def.id += _renderCompCount++; + def.inputs = invertObject(componentDefinition.inputs, declaredInputs), + def.outputs = invertObject(componentDefinition.outputs), + feature && feature.forEach((fn) => fn(def)); + def.directiveDefs = directiveTypes ? + () => (typeof directiveTypes === 'function' ? directiveTypes() : directiveTypes) + .map(extractDirectiveDef) : + null; + def.pipeDefs = pipeTypes ? + () => + (typeof pipeTypes === 'function' ? pipeTypes() : pipeTypes).map(extractPipeDef) : + null; - return def as never; - }); + return def as never; + }) as never; } /** diff --git a/packages/core/src/render3/features/inherit_definition_feature.ts b/packages/core/src/render3/features/inherit_definition_feature.ts index 5bdc85dae6..891a2b9a92 100644 --- a/packages/core/src/render3/features/inherit_definition_feature.ts +++ b/packages/core/src/render3/features/inherit_definition_feature.ts @@ -78,17 +78,6 @@ export function ɵɵInheritDefinitionFeature(definition: DirectiveDef|Compo const defData = (definition as ComponentDef).data; defData.animation = (defData.animation || []).concat(superDef.data.animation); } - - // Inherit hooks - // Assume super class inheritance feature has already run. - writeableDef.afterContentChecked = - writeableDef.afterContentChecked || superDef.afterContentChecked; - writeableDef.afterContentInit = definition.afterContentInit || superDef.afterContentInit; - writeableDef.afterViewChecked = definition.afterViewChecked || superDef.afterViewChecked; - writeableDef.afterViewInit = definition.afterViewInit || superDef.afterViewInit; - writeableDef.doCheck = definition.doCheck || superDef.doCheck; - writeableDef.onDestroy = definition.onDestroy || superDef.onDestroy; - writeableDef.onInit = definition.onInit || superDef.onInit; } // Run parent features diff --git a/packages/core/src/render3/features/ng_onchanges_feature.ts b/packages/core/src/render3/features/ng_onchanges_feature.ts index fcb209b502..a4b82c0df8 100644 --- a/packages/core/src/render3/features/ng_onchanges_feature.ts +++ b/packages/core/src/render3/features/ng_onchanges_feature.ts @@ -11,14 +11,6 @@ import {SimpleChange, SimpleChanges} from '../../interface/simple_change'; import {EMPTY_OBJ} from '../empty'; import {DirectiveDef, DirectiveDefFeature} from '../interfaces/definition'; -const PRIVATE_PREFIX = '__ngOnChanges_'; - -type OnChangesExpando = OnChanges&{ - __ngOnChanges_: SimpleChanges|null|undefined; - // tslint:disable-next-line:no-any Can hold any value - [key: string]: any; -}; - /** * The NgOnChangesFeature decorates a component with support for the ngOnChanges * lifecycle hook, so it should be included in any component that implements @@ -41,12 +33,15 @@ type OnChangesExpando = OnChanges&{ * * @codeGenApi */ +export function ɵɵNgOnChangesFeature(): DirectiveDefFeature { + return NgOnChangesFeatureImpl; +} -export function ɵɵNgOnChangesFeature(definition: DirectiveDef): void { +export function NgOnChangesFeatureImpl(definition: DirectiveDef) { if (definition.type.prototype.ngOnChanges) { definition.setInput = ngOnChangesSetInput; - (definition as {onChanges: Function}).onChanges = wrapOnChanges(); } + return rememberChangeHistoryAndInvokeOnChangesHook; } // This option ensures that the ngOnChanges lifecycle hook will be inherited @@ -55,28 +50,37 @@ export function ɵɵNgOnChangesFeature(definition: DirectiveDef): void { // tslint:disable-next-line:no-toplevel-property-access (ɵɵNgOnChangesFeature as DirectiveDefFeature).ngInherit = true; -function wrapOnChanges() { - return function wrapOnChangesHook_inPreviousChangesStorage(this: OnChanges) { - const simpleChangesStore = getSimpleChangesStore(this); - const current = simpleChangesStore && simpleChangesStore.current; +/** + * This is a synthetic lifecycle hook which gets inserted into `TView.preOrderHooks` to simulate + * `ngOnChanges`. + * + * The hook reads the `NgSimpleChangesStore` data from the component instance and if changes are + * found it invokes `ngOnChanges` on the component instance. + * + * @param this Component instance. Because this function gets inserted into `TView.preOrderHooks`, + * it is guaranteed to be called with component instance. + */ +function rememberChangeHistoryAndInvokeOnChangesHook(this: OnChanges) { + const simpleChangesStore = getSimpleChangesStore(this); + const current = simpleChangesStore?.current; - if (current) { - const previous = simpleChangesStore!.previous; - if (previous === EMPTY_OBJ) { - simpleChangesStore!.previous = current; - } else { - // New changes are copied to the previous store, so that we don't lose history for inputs - // which were not changed this time - for (let key in current) { - previous[key] = current[key]; - } + if (current) { + const previous = simpleChangesStore!.previous; + if (previous === EMPTY_OBJ) { + simpleChangesStore!.previous = current; + } else { + // New changes are copied to the previous store, so that we don't lose history for inputs + // which were not changed this time + for (let key in current) { + previous[key] = current[key]; } - simpleChangesStore!.current = null; - this.ngOnChanges(current); } - }; + simpleChangesStore!.current = null; + this.ngOnChanges(current); + } } + function ngOnChangesSetInput( this: DirectiveDef, instance: T, value: any, publicName: string, privateName: string): void { const simpleChangesStore = getSimpleChangesStore(instance) || @@ -102,6 +106,10 @@ function setSimpleChangesStore(instance: any, store: NgSimpleChangesStore): NgSi return instance[SIMPLE_CHANGES_STORE] = store; } +/** + * Data structure which is monkey-patched on the component instance and used by `ngOnChanges` + * life-cycle hook to track previous input values. + */ interface NgSimpleChangesStore { previous: SimpleChanges; current: SimpleChanges|null; diff --git a/packages/core/src/render3/hooks.ts b/packages/core/src/render3/hooks.ts index b1ca90e5d4..5bcf1bacc6 100644 --- a/packages/core/src/render3/hooks.ts +++ b/packages/core/src/render3/hooks.ts @@ -6,9 +6,10 @@ * found in the LICENSE file at https://angular.io/license */ +import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, DoCheck, OnChanges, OnDestroy, OnInit} from '../interface/lifecycle_hooks'; import {assertEqual, assertNotEqual} from '../util/assert'; - import {assertFirstCreatePass} from './assert'; +import {NgOnChangesFeatureImpl} from './features/ng_onchanges_feature'; import {DirectiveDef} from './interfaces/definition'; import {TNode} from './interfaces/node'; import {FLAGS, HookData, InitPhaseState, LView, LViewFlags, PREORDER_HOOK_FLAGS, PreOrderHookFlags, TView} from './interfaces/view'; @@ -31,20 +32,23 @@ import {getCheckNoChangesMode} from './state'; export function registerPreOrderHooks( directiveIndex: number, directiveDef: DirectiveDef, tView: TView): void { ngDevMode && assertFirstCreatePass(tView); - const {onChanges, onInit, doCheck} = directiveDef; + const {ngOnChanges, ngOnInit, ngDoCheck} = + directiveDef.type.prototype as OnChanges & OnInit & DoCheck; - if (onChanges) { - (tView.preOrderHooks || (tView.preOrderHooks = [])).push(directiveIndex, onChanges); - (tView.preOrderCheckHooks || (tView.preOrderCheckHooks = [])).push(directiveIndex, onChanges); + if (ngOnChanges as Function | undefined) { + const wrappedOnChanges = NgOnChangesFeatureImpl(directiveDef); + (tView.preOrderHooks || (tView.preOrderHooks = [])).push(directiveIndex, wrappedOnChanges); + (tView.preOrderCheckHooks || (tView.preOrderCheckHooks = [])) + .push(directiveIndex, wrappedOnChanges); } - if (onInit) { - (tView.preOrderHooks || (tView.preOrderHooks = [])).push(-directiveIndex, onInit); + if (ngOnInit) { + (tView.preOrderHooks || (tView.preOrderHooks = [])).push(0 - directiveIndex, ngOnInit); } - if (doCheck) { - (tView.preOrderHooks || (tView.preOrderHooks = [])).push(directiveIndex, doCheck); - (tView.preOrderCheckHooks || (tView.preOrderCheckHooks = [])).push(directiveIndex, doCheck); + if (ngDoCheck) { + (tView.preOrderHooks || (tView.preOrderHooks = [])).push(directiveIndex, ngDoCheck); + (tView.preOrderCheckHooks || (tView.preOrderCheckHooks = [])).push(directiveIndex, ngDoCheck); } } @@ -73,27 +77,36 @@ export function registerPostOrderHooks(tView: TView, tNode: TNode): void { // hooks for projected components and directives must be called *before* their hosts. for (let i = tNode.directiveStart, end = tNode.directiveEnd; i < end; i++) { const directiveDef = tView.data[i] as DirectiveDef; - if (directiveDef.afterContentInit) { - (tView.contentHooks || (tView.contentHooks = [])).push(-i, directiveDef.afterContentInit); + const lifecycleHooks: AfterContentInit&AfterContentChecked&AfterViewInit&AfterViewChecked& + OnDestroy = directiveDef.type.prototype; + const { + ngAfterContentInit, + ngAfterContentChecked, + ngAfterViewInit, + ngAfterViewChecked, + ngOnDestroy + } = lifecycleHooks; + + if (ngAfterContentInit) { + (tView.contentHooks || (tView.contentHooks = [])).push(-i, ngAfterContentInit); } - if (directiveDef.afterContentChecked) { - (tView.contentHooks || (tView.contentHooks = [])).push(i, directiveDef.afterContentChecked); - (tView.contentCheckHooks || (tView.contentCheckHooks = [])) - .push(i, directiveDef.afterContentChecked); + if (ngAfterContentChecked) { + (tView.contentHooks || (tView.contentHooks = [])).push(i, ngAfterContentChecked); + (tView.contentCheckHooks || (tView.contentCheckHooks = [])).push(i, ngAfterContentChecked); } - if (directiveDef.afterViewInit) { - (tView.viewHooks || (tView.viewHooks = [])).push(-i, directiveDef.afterViewInit); + if (ngAfterViewInit) { + (tView.viewHooks || (tView.viewHooks = [])).push(-i, ngAfterViewInit); } - if (directiveDef.afterViewChecked) { - (tView.viewHooks || (tView.viewHooks = [])).push(i, directiveDef.afterViewChecked); - (tView.viewCheckHooks || (tView.viewCheckHooks = [])).push(i, directiveDef.afterViewChecked); + if (ngAfterViewChecked) { + (tView.viewHooks || (tView.viewHooks = [])).push(i, ngAfterViewChecked); + (tView.viewCheckHooks || (tView.viewCheckHooks = [])).push(i, ngAfterViewChecked); } - if (directiveDef.onDestroy != null) { - (tView.destroyHooks || (tView.destroyHooks = [])).push(i, directiveDef.onDestroy); + if (ngOnDestroy != null) { + (tView.destroyHooks || (tView.destroyHooks = [])).push(i, ngOnDestroy); } } } diff --git a/packages/core/src/render3/instructions/shared.ts b/packages/core/src/render3/instructions/shared.ts index bb4f211799..22b86913fa 100644 --- a/packages/core/src/render3/instructions/shared.ts +++ b/packages/core/src/render3/instructions/shared.ts @@ -7,6 +7,7 @@ */ import {Injector} from '../../di'; import {ErrorHandler} from '../../error_handler'; +import {DoCheck, OnChanges, OnInit} from '../../interface/lifecycle_hooks'; import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SchemaMetadata} from '../../metadata/schema'; import {ViewEncapsulation} from '../../metadata/view'; import {validateAgainstEventAttributes, validateAgainstEventProperties} from '../../sanitization/sanitization'; @@ -1166,9 +1167,11 @@ export function resolveDirectives( if (def.hostBindings !== null || def.hostAttrs !== null || def.hostVars !== 0) tNode.flags |= TNodeFlags.hasHostBindings; + const lifeCycleHooks: OnChanges&OnInit&DoCheck = def.type.prototype; // Only push a node index into the preOrderHooks array if this is the first // pre-order hook found on this node. - if (!preOrderHooksFound && (def.onChanges || def.onInit || def.doCheck)) { + if (!preOrderHooksFound && + (lifeCycleHooks.ngOnChanges || lifeCycleHooks.ngOnInit || lifeCycleHooks.ngDoCheck)) { // We will push the actual hook function into this array later during dir instantiation. // We cannot do it now because we must ensure hooks are registered in the same // order that directives are created (i.e. injection order). @@ -1176,7 +1179,7 @@ export function resolveDirectives( preOrderHooksFound = true; } - if (!preOrderCheckHooksFound && (def.onChanges || def.doCheck)) { + if (!preOrderCheckHooksFound && (lifeCycleHooks.ngOnChanges || lifeCycleHooks.ngDoCheck)) { (tView.preOrderCheckHooks || (tView.preOrderCheckHooks = [])) .push(tNode.index - HEADER_OFFSET); preOrderCheckHooksFound = true; diff --git a/packages/core/src/render3/interfaces/definition.ts b/packages/core/src/render3/interfaces/definition.ts index a2ac00150a..a48cb77732 100644 --- a/packages/core/src/render3/interfaces/definition.ts +++ b/packages/core/src/render3/interfaces/definition.ts @@ -250,16 +250,6 @@ export interface DirectiveDef { */ readonly factory: FactoryFn|null; - /* The following are lifecycle hooks for this component */ - readonly onChanges: (() => void)|null; - readonly onInit: (() => void)|null; - readonly doCheck: (() => void)|null; - readonly afterContentInit: (() => void)|null; - readonly afterContentChecked: (() => void)|null; - readonly afterViewInit: (() => void)|null; - readonly afterViewChecked: (() => void)|null; - readonly onDestroy: (() => void)|null; - /** * The features applied to this directive */ diff --git a/packages/core/test/acceptance/lifecycle_spec.ts b/packages/core/test/acceptance/lifecycle_spec.ts index 40dda04dfc..d0ab6fec68 100644 --- a/packages/core/test/acceptance/lifecycle_spec.ts +++ b/packages/core/test/acceptance/lifecycle_spec.ts @@ -1124,6 +1124,100 @@ describe('onChanges', () => { }); }); +describe('meta-programing', () => { + it('should allow adding lifecycle hook methods any time before first instance creation', () => { + const events: any[] = []; + + @Component({template: ``}) + class App { + } + + @Component({selector: 'child', template: `empty`}) + class Child { + @Input() name: string = ''; + } + + const ChildPrototype = Child.prototype as any; + ChildPrototype.ngOnInit = () => events.push('onInit'); + ChildPrototype.ngOnChanges = (e: SimpleChanges) => { + const name = e['name']; + expect(name.previousValue).toEqual(undefined); + expect(name.currentValue).toEqual('value'); + expect(name.firstChange).toEqual(true); + events.push('ngOnChanges'); + }; + ChildPrototype.ngDoCheck = () => events.push('ngDoCheck'); + ChildPrototype.ngAfterContentInit = () => events.push('ngAfterContentInit'); + ChildPrototype.ngAfterContentChecked = () => events.push('ngAfterContentChecked'); + ChildPrototype.ngAfterViewInit = () => events.push('ngAfterViewInit'); + ChildPrototype.ngAfterViewChecked = () => events.push('ngAfterViewChecked'); + ChildPrototype.ngOnDestroy = () => events.push('ngOnDestroy'); + + TestBed.configureTestingModule({ + declarations: [App, Child], + }); + const fixture = TestBed.createComponent(App); + fixture.detectChanges(); + fixture.destroy(); + expect(events).toEqual([ + 'ngOnChanges', 'onInit', 'ngDoCheck', 'ngAfterContentInit', 'ngAfterContentChecked', + 'ngAfterViewInit', 'ngAfterViewChecked', 'ngOnDestroy' + ]); + }); + + it('should allow adding lifecycle hook methods with inheritance any time before first instance creation', + () => { + const events: any[] = []; + + @Component({template: ``}) + class App { + } + + class BaseChild {} + + @Component({selector: 'child', template: `empty`}) + class Child extends BaseChild { + @Input() name: string = ''; + } + + // These are defined on the base class + const BasePrototype = BaseChild.prototype as any; + BasePrototype.ngOnInit = () => events.push('onInit'); + BasePrototype.ngOnChanges = (e: SimpleChanges) => { + const name = e['name']; + expect(name.previousValue).toEqual(undefined); + expect(name.currentValue).toEqual('value'); + expect(name.firstChange).toEqual(true); + events.push('ngOnChanges'); + }; + + // These will be overwritten later + BasePrototype.ngDoCheck = () => events.push('Expected to be overbidden'); + BasePrototype.ngAfterContentInit = () => events.push('Expected to be overbidden'); + + + // These are define on the concrete class + const ChildPrototype = Child.prototype as any; + ChildPrototype.ngDoCheck = () => events.push('ngDoCheck'); + ChildPrototype.ngAfterContentInit = () => events.push('ngAfterContentInit'); + ChildPrototype.ngAfterContentChecked = () => events.push('ngAfterContentChecked'); + ChildPrototype.ngAfterViewInit = () => events.push('ngAfterViewInit'); + ChildPrototype.ngAfterViewChecked = () => events.push('ngAfterViewChecked'); + ChildPrototype.ngOnDestroy = () => events.push('ngOnDestroy'); + + TestBed.configureTestingModule({ + declarations: [App, Child], + }); + const fixture = TestBed.createComponent(App); + fixture.detectChanges(); + fixture.destroy(); + expect(events).toEqual([ + 'ngOnChanges', 'onInit', 'ngDoCheck', 'ngAfterContentInit', 'ngAfterContentChecked', + 'ngAfterViewInit', 'ngAfterViewChecked', 'ngOnDestroy' + ]); + }); +}); + it('should call all hooks in correct order when several directives on same node', () => { let log: string[] = []; diff --git a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json index 1882884128..d012b3be33 100644 --- a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json +++ b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json @@ -200,6 +200,9 @@ { "name": "getPreviousOrParentTNode" }, + { + "name": "getSimpleChangesStore" + }, { "name": "getTView" }, @@ -281,6 +284,9 @@ { "name": "nextNgElementId" }, + { + "name": "ngOnChangesSetInput" + }, { "name": "noSideEffects" }, @@ -293,6 +299,9 @@ { "name": "refreshView" }, + { + "name": "rememberChangeHistoryAndInvokeOnChangesHook" + }, { "name": "renderComponent" }, diff --git a/packages/core/test/bundling/hello_world/bundle.golden_symbols.json b/packages/core/test/bundling/hello_world/bundle.golden_symbols.json index 9c2433bd5d..f7d1fe5780 100644 --- a/packages/core/test/bundling/hello_world/bundle.golden_symbols.json +++ b/packages/core/test/bundling/hello_world/bundle.golden_symbols.json @@ -137,6 +137,9 @@ { "name": "getPreviousOrParentTNode" }, + { + "name": "getSimpleChangesStore" + }, { "name": "includeViewProviders" }, @@ -176,6 +179,9 @@ { "name": "nextNgElementId" }, + { + "name": "ngOnChangesSetInput" + }, { "name": "refreshComponent" }, @@ -185,6 +191,9 @@ { "name": "refreshView" }, + { + "name": "rememberChangeHistoryAndInvokeOnChangesHook" + }, { "name": "renderComponent" }, diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json index 8900f3f379..0d6e14706b 100644 --- a/packages/core/test/bundling/todo/bundle.golden_symbols.json +++ b/packages/core/test/bundling/todo/bundle.golden_symbols.json @@ -392,6 +392,9 @@ { "name": "getSelectedIndex" }, + { + "name": "getSimpleChangesStore" + }, { "name": "getSymbolIterator" }, @@ -548,6 +551,9 @@ { "name": "nextNgElementId" }, + { + "name": "ngOnChangesSetInput" + }, { "name": "noSideEffects" }, @@ -569,6 +575,9 @@ { "name": "registerPostOrderHooks" }, + { + "name": "rememberChangeHistoryAndInvokeOnChangesHook" + }, { "name": "removeFromArray" },