iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Andrew Kushnir
2021-03-09 22:03:29 -08:00
committed by Jessica Janiuk
parent 8a9fe49a2a
commit 937e90cd16
12 changed files with 66 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/forms/src/directives/checkbox_value_accessor.ts
+6 -3
View File
@@ -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
+10 -1
View File
@@ -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.
*
@@ -139,4 +148,4 @@ export interface ControlValueAccessor {
* @publicApi
*/
export const NG_VALUE_ACCESSOR =
new InjectionToken<ReadonlyArray<ControlValueAccessor>>('NgValueAccessor');
new InjectionToken<ReadonlyArray<ControlValueAccessor>>('NgValueAccessor');
packages/forms/src/directives/number_value_accessor.ts
+6 -3
View File
@@ -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
+6 -3
View File
@@ -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
+6 -3
View File
@@ -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
+6 -3
View File
@@ -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
+6 -3
View File
@@ -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
+4 -17
View File
@@ -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 {