perf(forms): make built-in ControlValueAccessors more tree-shakable (#41146)

This commit updates Forms code to avoid direct references to all built-in ControlValueAccessor classes, which
prevents their tree-shaking from production builds. Instead, a new static property is added to all built-in
ControlValueAccessors, which is checked when we need to identify whether a given ControlValueAccessors is a
built-in one.

PR Close #41146

goldens/public-api/forms/forms.d.ts

@@ -112,7 +112,7 @@ export declare interface AsyncValidatorFn {
     (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null>;
 }
 
-export declare class CheckboxControlValueAccessor implements ControlValueAccessor {
+export declare class CheckboxControlValueAccessor extends ɵangular_packages_forms_forms_f implements ControlValueAccessor {
     onChange: (_: any) => void;
     onTouched: () => void;
     constructor(_renderer: Renderer2, _elementRef: ElementRef);
@@ -382,11 +382,11 @@ export declare abstract class NgControl extends AbstractControlDirective {
     abstract viewToModelUpdate(newValue: any): void;
 }
 
-export declare class NgControlStatus extends ɵangular_packages_forms_forms_g {
+export declare class NgControlStatus extends ɵangular_packages_forms_forms_h {
     constructor(cd: NgControl);
 }
 
-export declare class NgControlStatusGroup extends ɵangular_packages_forms_forms_g {
+export declare class NgControlStatusGroup extends ɵangular_packages_forms_forms_h {
     constructor(cd: ControlContainer);
 }
 
@@ -454,7 +454,7 @@ export declare class NgSelectOption implements OnDestroy {
     ngOnDestroy(): void;
 }
 
-export declare class NumberValueAccessor implements ControlValueAccessor {
+export declare class NumberValueAccessor extends ɵangular_packages_forms_forms_f implements ControlValueAccessor {
     onChange: (_: any) => void;
     onTouched: () => void;
     constructor(_renderer: Renderer2, _elementRef: ElementRef);
@@ -471,13 +471,13 @@ export declare class PatternValidator implements Validator, OnChanges {
     validate(control: AbstractControl): ValidationErrors | null;
 }
 
-export declare class RadioControlValueAccessor implements ControlValueAccessor, OnDestroy, OnInit {
+export declare class RadioControlValueAccessor extends ɵangular_packages_forms_forms_f implements ControlValueAccessor, OnDestroy, OnInit {
     formControlName: string;
     name: string;
     onChange: () => void;
     onTouched: () => void;
     value: any;
-    constructor(_renderer: Renderer2, _elementRef: ElementRef, _registry: ɵangular_packages_forms_forms_n, _injector: Injector);
+    constructor(_renderer: Renderer2, _elementRef: ElementRef, _registry: ɵangular_packages_forms_forms_o, _injector: Injector);
     fireUncheck(value: any): void;
     ngOnDestroy(): void;
     ngOnInit(): void;
@@ -487,7 +487,7 @@ export declare class RadioControlValueAccessor implements ControlValueAccessor,
     writeValue(value: any): void;
 }
 
-export declare class RangeValueAccessor implements ControlValueAccessor {
+export declare class RangeValueAccessor extends ɵangular_packages_forms_forms_f implements ControlValueAccessor {
     onChange: (_: any) => void;
     onTouched: () => void;
     constructor(_renderer: Renderer2, _elementRef: ElementRef);
@@ -509,7 +509,7 @@ export declare class RequiredValidator implements Validator {
     validate(control: AbstractControl): ValidationErrors | null;
 }
 
-export declare class SelectControlValueAccessor implements ControlValueAccessor {
+export declare class SelectControlValueAccessor extends ɵangular_packages_forms_forms_f implements ControlValueAccessor {
     set compareWith(fn: (o1: any, o2: any) => boolean);
     onChange: (_: any) => void;
     onTouched: () => void;
@@ -521,7 +521,7 @@ export declare class SelectControlValueAccessor implements ControlValueAccessor
     writeValue(value: any): void;
 }
 
-export declare class SelectMultipleControlValueAccessor implements ControlValueAccessor {
+export declare class SelectMultipleControlValueAccessor extends ɵangular_packages_forms_forms_f implements ControlValueAccessor {
     set compareWith(fn: (o1: any, o2: any) => boolean);
     onChange: (_: any) => void;
     onTouched: () => void;

goldens/size-tracking/integration-payloads.json

@@ -59,7 +59,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 1485,
-        "main-es2015": 168534,
+        "main-es2015": 162346,
         "polyfills-es2015": 36975
       }
     }

packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json

@@ -44,9 +44,6 @@
   {
     "name": "BROWSER_MODULE_PROVIDERS"
   },
-  {
-    "name": "BUILTIN_ACCESSORS"
-  },
   {
     "name": "BrowserDomAdapter"
   },
@@ -56,6 +53,9 @@
   {
     "name": "BrowserModule"
   },
+  {
+    "name": "BuiltInControlValueAccessor"
+  },
   {
     "name": "CHECKBOX_VALUE_ACCESSOR"
   },
@@ -368,9 +368,6 @@
   {
     "name": "NULL_INJECTOR"
   },
-  {
-    "name": "NUMBER_VALUE_ACCESSOR"
-  },
   {
     "name": "NgControl"
   },
@@ -419,9 +416,6 @@
   {
     "name": "NullInjector"
   },
-  {
-    "name": "NumberValueAccessor"
-  },
   {
     "name": "ObjectUnsubscribedError"
   },
@@ -455,21 +449,9 @@
   {
     "name": "R3ViewContainerRef"
   },
-  {
-    "name": "RADIO_VALUE_ACCESSOR"
-  },
-  {
-    "name": "RANGE_VALUE_ACCESSOR"
-  },
   {
     "name": "RadioControlRegistry"
   },
-  {
-    "name": "RadioControlValueAccessor"
-  },
-  {
-    "name": "RangeValueAccessor"
-  },
   {
     "name": "ReactiveFormsComponent"
   },
@@ -509,12 +491,6 @@
   {
     "name": "SCHEDULER"
   },
-  {
-    "name": "SELECT_MULTIPLE_VALUE_ACCESSOR"
-  },
-  {
-    "name": "SELECT_VALUE_ACCESSOR"
-  },
   {
     "name": "SERVER_TRANSITION_PROVIDERS"
   },
@@ -536,12 +512,6 @@
   {
     "name": "Sanitizer"
   },
-  {
-    "name": "SelectControlValueAccessor"
-  },
-  {
-    "name": "SelectMultipleControlValueAccessor"
-  },
   {
     "name": "ShadowDomRenderer"
   },

packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json

@@ -44,9 +44,6 @@
   {
     "name": "BROWSER_MODULE_PROVIDERS"
   },
-  {
-    "name": "BUILTIN_ACCESSORS"
-  },
   {
     "name": "BrowserDomAdapter"
   },
@@ -56,6 +53,9 @@
   {
     "name": "BrowserModule"
   },
+  {
+    "name": "BuiltInControlValueAccessor"
+  },
   {
     "name": "CHECKBOX_VALUE_ACCESSOR"
   },
@@ -353,9 +353,6 @@
   {
     "name": "NULL_INJECTOR"
   },
-  {
-    "name": "NUMBER_VALUE_ACCESSOR"
-  },
   {
     "name": "NgControl"
   },
@@ -413,9 +410,6 @@
   {
     "name": "NullInjector"
   },
-  {
-    "name": "NumberValueAccessor"
-  },
   {
     "name": "ObjectUnsubscribedError"
   },
@@ -449,24 +443,12 @@
   {
     "name": "R3ViewContainerRef"
   },
-  {
-    "name": "RADIO_VALUE_ACCESSOR"
-  },
-  {
-    "name": "RANGE_VALUE_ACCESSOR"
-  },
   {
     "name": "REQUIRED_VALIDATOR"
   },
   {
     "name": "RadioControlRegistry"
   },
-  {
-    "name": "RadioControlValueAccessor"
-  },
-  {
-    "name": "RangeValueAccessor"
-  },
   {
     "name": "RecordViewTuple"
   },
@@ -500,12 +482,6 @@
   {
     "name": "SCHEDULER"
   },
-  {
-    "name": "SELECT_MULTIPLE_VALUE_ACCESSOR"
-  },
-  {
-    "name": "SELECT_VALUE_ACCESSOR"
-  },
   {
     "name": "SERVER_TRANSITION_PROVIDERS"
   },
@@ -527,12 +503,6 @@
   {
     "name": "Sanitizer"
   },
-  {
-    "name": "SelectControlValueAccessor"
-  },
-  {
-    "name": "SelectMultipleControlValueAccessor"
-  },
   {
     "name": "ShadowDomRenderer"
   },

packages/forms/src/directives/checkbox_value_accessor.ts

@@ -8,7 +8,7 @@
 
 import {Directive, ElementRef, forwardRef, Renderer2} from '@angular/core';
 
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
+import {BuiltInControlValueAccessor, ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
 
 export const CHECKBOX_VALUE_ACCESSOR: any = {
   provide: NG_VALUE_ACCESSOR,
@@ -45,7 +45,8 @@ export const CHECKBOX_VALUE_ACCESSOR: any = {
   host: {'(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()'},
   providers: [CHECKBOX_VALUE_ACCESSOR]
 })
-export class CheckboxControlValueAccessor implements ControlValueAccessor {
+export class CheckboxControlValueAccessor extends BuiltInControlValueAccessor implements
+    ControlValueAccessor {
   /**
    * The registered callback function called when a change event occurs on the input element.
    * @nodoc
@@ -58,7 +59,9 @@ export class CheckboxControlValueAccessor implements ControlValueAccessor {
    */
   onTouched = () => {};
 
-  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {}
+  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {
+    super();
+  }
 
   /**
    * Sets the "checked" property on the input element.

packages/forms/src/directives/control_value_accessor.ts

@@ -131,6 +131,15 @@ export interface ControlValueAccessor {
   setDisabledState?(isDisabled: boolean): void;
 }
 
+/**
+ * Base class for all built-in ControlValueAccessor classes. We use this class to distinguish
+ * between built-in and custom CVAs, so that Forms logic can recognize built-in CVAs and treat
+ * custom ones with higher priority (when both built-in and custom CVAs are present).
+ * Note: this is an *internal-only* class and should not be extended or used directly in
+ * applications code.
+ */
+export class BuiltInControlValueAccessor {}
+
 /**
  * Used to provide a `ControlValueAccessor` for form controls.
  *

packages/forms/src/directives/number_value_accessor.ts

@@ -8,7 +8,7 @@
 
 import {Directive, ElementRef, forwardRef, Renderer2} from '@angular/core';
 
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
+import {BuiltInControlValueAccessor, ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
 
 export const NUMBER_VALUE_ACCESSOR: any = {
   provide: NG_VALUE_ACCESSOR,
@@ -46,7 +46,8 @@ export const NUMBER_VALUE_ACCESSOR: any = {
   host: {'(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
   providers: [NUMBER_VALUE_ACCESSOR]
 })
-export class NumberValueAccessor implements ControlValueAccessor {
+export class NumberValueAccessor extends BuiltInControlValueAccessor implements
+    ControlValueAccessor {
   /**
    * The registered callback function called when a change or input event occurs on the input
    * element.
@@ -60,7 +61,9 @@ export class NumberValueAccessor implements ControlValueAccessor {
    */
   onTouched = () => {};
 
-  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {}
+  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {
+    super();
+  }
 
   /**
    * Sets the "value" property on the input element.

packages/forms/src/directives/radio_control_value_accessor.ts

@@ -8,7 +8,7 @@
 
 import {Directive, ElementRef, forwardRef, Injectable, Injector, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
 
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
+import {BuiltInControlValueAccessor, ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
 import {NgControl} from './ng_control';
 
 export const RADIO_VALUE_ACCESSOR: any = {
@@ -100,7 +100,8 @@ export class RadioControlRegistry {
   host: {'(change)': 'onChange()', '(blur)': 'onTouched()'},
   providers: [RADIO_VALUE_ACCESSOR]
 })
-export class RadioControlValueAccessor implements ControlValueAccessor, OnDestroy, OnInit {
+export class RadioControlValueAccessor extends BuiltInControlValueAccessor implements
+    ControlValueAccessor, OnDestroy, OnInit {
   /** @internal */
   // TODO(issue/24571): remove '!'.
   _state!: boolean;
@@ -146,7 +147,9 @@ export class RadioControlValueAccessor implements ControlValueAccessor, OnDestro
 
   constructor(
       private _renderer: Renderer2, private _elementRef: ElementRef,
-      private _registry: RadioControlRegistry, private _injector: Injector) {}
+      private _registry: RadioControlRegistry, private _injector: Injector) {
+    super();
+  }
 
   /** @nodoc */
   ngOnInit(): void {

packages/forms/src/directives/range_value_accessor.ts

@@ -8,7 +8,7 @@
 
 import {Directive, ElementRef, forwardRef, Renderer2, StaticProvider} from '@angular/core';
 
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
+import {BuiltInControlValueAccessor, ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
 
 export const RANGE_VALUE_ACCESSOR: StaticProvider = {
   provide: NG_VALUE_ACCESSOR,
@@ -50,7 +50,8 @@ export const RANGE_VALUE_ACCESSOR: StaticProvider = {
   },
   providers: [RANGE_VALUE_ACCESSOR]
 })
-export class RangeValueAccessor implements ControlValueAccessor {
+export class RangeValueAccessor extends BuiltInControlValueAccessor implements
+    ControlValueAccessor {
   /**
    * The registered callback function called when a change or input event occurs on the input
    * element.
@@ -64,7 +65,9 @@ export class RangeValueAccessor implements ControlValueAccessor {
    */
   onTouched = () => {};
 
-  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {}
+  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {
+    super();
+  }
 
   /**
    * Sets the "value" property on the input element.

packages/forms/src/directives/select_control_value_accessor.ts

@@ -8,7 +8,7 @@
 
 import {Directive, ElementRef, forwardRef, Host, Input, OnDestroy, Optional, Renderer2, StaticProvider} from '@angular/core';
 
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
+import {BuiltInControlValueAccessor, ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
 
 export const SELECT_VALUE_ACCESSOR: StaticProvider = {
   provide: NG_VALUE_ACCESSOR,
@@ -88,7 +88,8 @@ function _extractId(valueString: string): string {
   host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
   providers: [SELECT_VALUE_ACCESSOR]
 })
-export class SelectControlValueAccessor implements ControlValueAccessor {
+export class SelectControlValueAccessor extends BuiltInControlValueAccessor implements
+    ControlValueAccessor {
   /** @nodoc */
   value: any;
 
@@ -125,7 +126,9 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
 
   private _compareWith: (o1: any, o2: any) => boolean = Object.is;
 
-  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {}
+  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {
+    super();
+  }
 
   /**
    * Sets the "value" property on the input element. The "selectedIndex"

packages/forms/src/directives/select_multiple_control_value_accessor.ts

@@ -8,7 +8,7 @@
 
 import {Directive, ElementRef, forwardRef, Host, Input, OnDestroy, Optional, Renderer2, StaticProvider} from '@angular/core';
 
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
+import {BuiltInControlValueAccessor, ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
 
 export const SELECT_MULTIPLE_VALUE_ACCESSOR: StaticProvider = {
   provide: NG_VALUE_ACCESSOR,
@@ -81,7 +81,8 @@ abstract class HTMLCollection {
   host: {'(change)': 'onChange($event.target)', '(blur)': 'onTouched()'},
   providers: [SELECT_MULTIPLE_VALUE_ACCESSOR]
 })
-export class SelectMultipleControlValueAccessor implements ControlValueAccessor {
+export class SelectMultipleControlValueAccessor extends BuiltInControlValueAccessor implements
+    ControlValueAccessor {
   /**
    * The current value.
    * @nodoc
@@ -121,7 +122,9 @@ export class SelectMultipleControlValueAccessor implements ControlValueAccessor
 
   private _compareWith: (o1: any, o2: any) => boolean = Object.is;
 
-  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {}
+  constructor(private _renderer: Renderer2, private _elementRef: ElementRef) {
+    super();
+  }
 
   /**
    * Sets the "value" property on one or of more of the select's options.

packages/forms/src/directives/shared.ts

@@ -11,18 +11,12 @@ import {getControlAsyncValidators, getControlValidators, mergeValidators} from '
 
 import {AbstractControlDirective} from './abstract_control_directive';
 import {AbstractFormGroupDirective} from './abstract_form_group_directive';
-import {CheckboxControlValueAccessor} from './checkbox_value_accessor';
 import {ControlContainer} from './control_container';
-import {ControlValueAccessor} from './control_value_accessor';
+import {BuiltInControlValueAccessor, ControlValueAccessor} from './control_value_accessor';
 import {DefaultValueAccessor} from './default_value_accessor';
 import {NgControl} from './ng_control';
-import {NumberValueAccessor} from './number_value_accessor';
-import {RadioControlValueAccessor} from './radio_control_value_accessor';
-import {RangeValueAccessor} from './range_value_accessor';
 import {FormArrayName} from './reactive_directives/form_group_name';
 import {ReactiveErrors} from './reactive_errors';
-import {SelectControlValueAccessor} from './select_control_value_accessor';
-import {SelectMultipleControlValueAccessor} from './select_multiple_control_value_accessor';
 import {AsyncValidatorFn, Validator, ValidatorFn} from './validators';
 
 
@@ -309,17 +303,10 @@ export function isPropertyUpdated(changes: {[key: string]: any}, viewModel: any)
   return !Object.is(viewModel, change.currentValue);
 }
 
-const BUILTIN_ACCESSORS = [
-  CheckboxControlValueAccessor,
-  RangeValueAccessor,
-  NumberValueAccessor,
-  SelectControlValueAccessor,
-  SelectMultipleControlValueAccessor,
-  RadioControlValueAccessor,
-];
-
 export function isBuiltInAccessor(valueAccessor: ControlValueAccessor): boolean {
-  return BUILTIN_ACCESSORS.some(a => valueAccessor.constructor === a);
+  // Check if a given value accessor is an instance of a class that directly extends
+  // `BuiltInControlValueAccessor` one.
+  return Object.getPrototypeOf(valueAccessor.constructor) === BuiltInControlValueAccessor;
 }
 
 export function syncPendingControls(form: FormGroup, directives: NgControl[]): void {