refactor(ivy): Add newer, smaller NgOnChangesFeature (angular#28187)

PR Close angular#28187

Author: benlesh

packages/common/src/directives/ng_template_outlet.ts

@@ -34,14 +34,20 @@ import {Directive, EmbeddedViewRef, Input, OnChanges, SimpleChange, SimpleChange
  */
 @Directive({selector: '[ngTemplateOutlet]'})
 export class NgTemplateOutlet implements OnChanges {
-  // TODO(issue/24571): remove '!'.
-  private _viewRef !: EmbeddedViewRef<any>;
+  private _viewRef: EmbeddedViewRef<any>|null = null;
 
-  // TODO(issue/24571): remove '!'.
-  @Input() public ngTemplateOutletContext !: Object;
+  /**
+   * A context object to attach to the {@link EmbeddedViewRef}. This should be an
+   * object, the object's keys will be available for binding by the local template `let`
+   * declarations.
+   * Using the key `$implicit` in the context object will set its value as default.
+   */
+  @Input() public ngTemplateOutletContext: Object|null = null;
 
-  // TODO(issue/24571): remove '!'.
-  @Input() public ngTemplateOutlet !: TemplateRef<any>;
+  /**
+   * A string defining the template reference and optionally the context object for the template.
+   */
+  @Input() public ngTemplateOutlet: TemplateRef<any>|null = null;
 
   constructor(private _viewContainerRef: ViewContainerRef) {}
 
@@ -97,7 +103,7 @@ export class NgTemplateOutlet implements OnChanges {
 
   private _updateExistingContext(ctx: Object): void {
     for (let propName of Object.keys(ctx)) {
-      (<any>this._viewRef.context)[propName] = (<any>this.ngTemplateOutletContext)[propName];
+      (<any>this._viewRef !.context)[propName] = (<any>this.ngTemplateOutletContext)[propName];
     }
   }
 }

packages/core/src/change_detection/change_detection_util.ts

@@ -64,20 +64,6 @@ export class WrappedValue {
   static isWrapped(value: any): value is WrappedValue { return value instanceof WrappedValue; }
 }
 
-/**
- * Represents a basic change from a previous to a new value.
- *
- * @publicApi
- */
-export class SimpleChange {
-  constructor(public previousValue: any, public currentValue: any, public firstChange: boolean) {}
-
-  /**
-   * Check whether the new value is the first value assigned.
-   */
-  isFirstChange(): boolean { return this.firstChange; }
-}
-
 export function isListLikeIterable(obj: any): boolean {
   if (!isJsObject(obj)) return false;
   return Array.isArray(obj) ||

packages/core/src/interface/lifecycle_hooks.ts

@@ -5,19 +5,9 @@
  * 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 {SimpleChanges, SimpleChange} from './simple_change';
+import {SimpleChanges} from './simple_change';
 
 
-/**
- * Defines an object that associates properties with
- * instances of `SimpleChange`.
- *
- * @see `OnChanges`
- *
- * @publicApi
- */
-export interface SimpleChanges { [propName: string]: SimpleChange; }
-
 /**
  * @description
  * A lifecycle hook that is called when any data-bound property of a directive changes.

packages/core/src/render3/component.ts

@@ -17,6 +17,7 @@ import {assertComponentType} from './assert';
 import {getComponentDef} from './definition';
 import {diPublicInInjector, getOrCreateNodeInjectorForNode} from './di';
 import {publishDefaultGlobalUtils} from './global_utils';
+import {registerPostOrderHooks, registerPreOrderHooks} from './hooks';
 import {CLEAN_PROMISE, createLView, createNodeAtIndex, createTNode, createTView, getOrCreateTView, initNodeFlags, instantiateRootComponent, locateHostElement, queueComponentIndexForCheck, refreshDescendantViews} from './instructions';
 import {ComponentDef, ComponentType, RenderFlags} from './interfaces/definition';
 import {TElementNode, TNode, TNodeFlags, TNodeType} from './interfaces/node';
@@ -25,7 +26,6 @@ import {RElement, Renderer3, RendererFactory3, domRendererFactory3} from './inte
 import {CONTEXT, FLAGS, HEADER_OFFSET, HOST, HOST_NODE, LView, LViewFlags, RootContext, RootContextFlags, TVIEW} from './interfaces/view';
 import {enterView, getPreviousOrParentTNode, leaveView, resetComponentState, setCurrentDirectiveDef} from './state';
 import {defaultScheduler, getRootView, readPatchedLView, renderStringify} from './util';
-import { registerPreOrderHooks, registerPostOrderHooks } from './hooks';
 
 
 
@@ -240,7 +240,8 @@ export function LifecycleHooksFeature(component: any, def: ComponentDef<any>): v
   registerPreOrderHooks(dirIndex, def, rootTView);
   // TODO(misko): replace `as TNode` with createTNode call. (needs refactoring to lose dep on
   // LNode).
-  registerPostOrderHooks(rootTView, { directiveStart: dirIndex, directiveEnd: dirIndex + 1 } as TNode);
+  registerPostOrderHooks(
+      rootTView, { directiveStart: dirIndex, directiveEnd: dirIndex + 1 } as TNode);
 }
 
 /**

packages/core/src/render3/definition.ts

@@ -276,6 +276,7 @@ export function defineComponent<T>(componentDefinition: {
     id: 'c',
     styles: componentDefinition.styles || EMPTY_ARRAY,
     _: null as never,
+    setInput: null,
   };
   def._ = noSideEffects(() => {
     const directiveTypes = componentDefinition.directives !;
@@ -380,20 +381,22 @@ export function defineNgModule<T>(def: {type: T} & Partial<NgModuleDef<T>>): nev
  *
 
  */
-function invertObject(obj: any, secondary?: any): any {
-  if (obj == null) return EMPTY_OBJ;
+function invertObject<T>(
+    obj?: {[P in keyof T]?: string | [string, string]},
+    secondary?: {[key: string]: string}): {[P in keyof T]: string} {
+  if (obj == null) return EMPTY_OBJ as any;
   const newLookup: any = {};
   for (const minifiedKey in obj) {
     if (obj.hasOwnProperty(minifiedKey)) {
-      let publicName: string = obj[minifiedKey];
+      let publicName: string|[string, string] = obj[minifiedKey] !;
       let declaredName = publicName;
       if (Array.isArray(publicName)) {
         declaredName = publicName[1];
         publicName = publicName[0];
       }
       newLookup[publicName] = minifiedKey;
       if (secondary) {
-        (secondary[publicName] = declaredName);
+        (secondary[publicName] = declaredName as string);
       }
     }
   }
@@ -470,11 +473,11 @@ export function defineBase<T>(baseDefinition: {
    */
   outputs?: {[P in keyof T]?: string};
 }): BaseDef<T> {
-  const declaredInputs: {[P in keyof T]: P} = {} as any;
+  const declaredInputs: {[P in keyof T]: string} = {} as any;
   return {
-    inputs: invertObject(baseDefinition.inputs, declaredInputs),
+    inputs: invertObject<T>(baseDefinition.inputs as any, declaredInputs),
     declaredInputs: declaredInputs,
-    outputs: invertObject(baseDefinition.outputs),
+    outputs: invertObject<T>(baseDefinition.outputs as any),
   };
 }
 

packages/core/src/render3/features/inherit_definition_feature.ts

@@ -7,10 +7,10 @@
  */
 
 import {Type} from '../../interface/type';
+import {Component} from '../../metadata/directives';
 import {fillProperties} from '../../util/property';
 import {EMPTY_ARRAY, EMPTY_OBJ} from '../empty';
 import {ComponentDef, DirectiveDef, DirectiveDefFeature, RenderFlags} from '../interfaces/definition';
-import { Component } from '../../metadata/directives';
 
 
 

packages/core/src/render3/features/ng_onchanges_feature.ts

@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {SimpleChange} from '../../change_detection/change_detection_util';
-import {SimpleChanges} from '../../interface/simple_change';
 import {OnChanges} from '../../interface/lifecycle_hooks';
+import {SimpleChange, SimpleChanges} from '../../interface/simple_change';
+import {EMPTY_OBJ} from '../empty';
 import {DirectiveDef, DirectiveDefFeature} from '../interfaces/definition';
 
 const PRIVATE_PREFIX = '__ngOnChanges_';
@@ -40,86 +40,63 @@ type OnChangesExpando = OnChanges & {
  * ```
  */
 export function NgOnChangesFeature<T>(definition: DirectiveDef<T>): void {
-  const publicToDeclaredInputs = definition.declaredInputs;
-  const publicToMinifiedInputs = definition.inputs;
-  const proto = definition.type.prototype;
-  for (const publicName in publicToDeclaredInputs) {
-    if (publicToDeclaredInputs.hasOwnProperty(publicName)) {
-      const minifiedKey = publicToMinifiedInputs[publicName];
-      const declaredKey = publicToDeclaredInputs[publicName];
-      const privateMinKey = PRIVATE_PREFIX + minifiedKey;
-
-      // Walk the prototype chain to see if we find a property descriptor
-      // That way we can honor setters and getters that were inherited.
-      let originalProperty: PropertyDescriptor|undefined = undefined;
-      let checkProto = proto;
-      while (!originalProperty && checkProto &&
-             Object.getPrototypeOf(checkProto) !== Object.getPrototypeOf(Object.prototype)) {
-        originalProperty = Object.getOwnPropertyDescriptor(checkProto, minifiedKey);
-        checkProto = Object.getPrototypeOf(checkProto);
-      }
-
-      const getter = originalProperty && originalProperty.get;
-      const setter = originalProperty && originalProperty.set;
-
-      // create a getter and setter for property
-      Object.defineProperty(proto, minifiedKey, {
-        get: getter ||
-            (setter ? undefined : function(this: OnChangesExpando) { return this[privateMinKey]; }),
-        set<T>(this: OnChangesExpando, value: T) {
-          let simpleChanges = this[PRIVATE_PREFIX];
-          if (!simpleChanges) {
-            simpleChanges = {};
-            // Place where we will store SimpleChanges if there is a change
-            Object.defineProperty(this, PRIVATE_PREFIX, {value: simpleChanges, writable: true});
-          }
-
-          const isFirstChange = !this.hasOwnProperty(privateMinKey);
-          const currentChange = simpleChanges[declaredKey];
-
-          if (currentChange) {
-            currentChange.currentValue = value;
-          } else {
-            simpleChanges[declaredKey] =
-                new SimpleChange(this[privateMinKey], value, isFirstChange);
-          }
-
-          if (isFirstChange) {
-            // Create a place where the actual value will be stored and make it non-enumerable
-            Object.defineProperty(this, privateMinKey, {value, writable: true});
-          } else {
-            this[privateMinKey] = value;
-          }
-
-          if (setter) setter.call(this, value);
-        },
-        // Make the property configurable in dev mode to allow overriding in tests
-        configurable: !!ngDevMode
-      });
-    }
-  }
+  if (definition.type.prototype.ngOnChanges) {
+    definition.setInput = ngOnChangesSetInput;
+
+    const prevDoCheck = definition.doCheck;
+    const prevOnInit = definition.onInit;
 
-  // If an onInit hook is defined, it will need to wrap the ngOnChanges call
-  // so the call order is changes-init-check in creation mode. In subsequent
-  // change detection runs, only the check wrapper will be called.
-  if (definition.onInit != null) {
-    definition.onInit = onChangesWrapper(definition.onInit);
+    definition.onInit = wrapOnChanges(prevOnInit);
+    definition.doCheck = wrapOnChanges(prevDoCheck);
   }
+}
+
+function wrapOnChanges(hook: (() => void) | null) {
+  return function(this: OnChanges) {
+    const simpleChangesStore = getSimpleChangesStore(this);
+    const current = simpleChangesStore && simpleChangesStore.current;
+
+    if (current) {
+      simpleChangesStore !.previous = current;
+      simpleChangesStore !.current = null;
+      this.ngOnChanges(current);
+    }
+
+    hook && hook.call(this);
+  };
+}
 
-  definition.doCheck = onChangesWrapper(definition.doCheck);
+function ngOnChangesSetInput<T>(
+    this: DirectiveDef<T>, instance: T, value: any, publicName: string, privateName: string): void {
+  const simpleChangesStore = getSimpleChangesStore(instance) ||
+      setSimpleChangesStore(instance, {previous: EMPTY_OBJ, current: null});
+  const current = simpleChangesStore.current || (simpleChangesStore.current = {});
+  const previous = simpleChangesStore.previous;
+
+  const declaredName = (this.declaredInputs as{[key: string]: string})[publicName];
+  const previousChange = previous[declaredName];
+  current[declaredName] = new SimpleChange(
+      previousChange && previousChange.currentValue, value, previous === EMPTY_OBJ);
+
+  (instance as any)[privateName] = value;
+}
+
+const SIMPLE_CHANGES_STORE = '__ngSimpleChanges__';
+
+function getSimpleChangesStore(instance: any): null|NgSimpleChangesStore {
+  return instance[SIMPLE_CHANGES_STORE] || null;
+}
+
+function setSimpleChangesStore(instance: any, store: NgSimpleChangesStore): NgSimpleChangesStore {
+  return instance[SIMPLE_CHANGES_STORE] = store;
 }
 
 // This option ensures that the ngOnChanges lifecycle hook will be inherited
 // from superclasses (in InheritDefinitionFeature).
 (NgOnChangesFeature as DirectiveDefFeature).ngInherit = true;
 
-function onChangesWrapper(delegateHook: (() => void) | null) {
-  return function(this: OnChangesExpando) {
-    const simpleChanges = this[PRIVATE_PREFIX];
-    if (simpleChanges != null) {
-      this.ngOnChanges(simpleChanges);
-      this[PRIVATE_PREFIX] = null;
-    }
-    if (delegateHook) delegateHook.apply(this);
-  };
+
+interface NgSimpleChangesStore {
+  previous: SimpleChanges;
+  current: SimpleChanges|null;
 }