honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
goldens/public-api/forms/forms.d.ts vendored
View File

@ -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;

2
goldens/size-tracking/integration-payloads.json
View File

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

36
packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json
View File

@ -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"
},

36
packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json
View File

@ -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"
},

9
packages/forms/src/directives/checkbox_value_accessor.ts
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.

11
packages/forms/src/directives/control_value_accessor.ts
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');

9
packages/forms/src/directives/number_value_accessor.ts
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.

9
packages/forms/src/directives/radio_control_value_accessor.ts
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 {

9
packages/forms/src/directives/range_value_accessor.ts
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.

9
packages/forms/src/directives/select_control_value_accessor.ts
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"

9
packages/forms/src/directives/select_multiple_control_value_accessor.ts
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.

21
packages/forms/src/directives/shared.ts
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 {