Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 9 additions & 9 deletions goldens/public-api/forms/forms.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
}

Expand Down Expand Up @@ -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);
Expand All @@ -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;
Expand All @@ -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);
Expand All @@ -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;
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion goldens/size-tracking/integration-payloads.json
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
"master": {
"uncompressed": {
"runtime-es2015": 1485,
"main-es2015": 168534,
"main-es2015": 162346,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏🏻

"polyfills-es2015": 36975
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,6 @@
{
"name": "BROWSER_MODULE_PROVIDERS"
},
{
"name": "BUILTIN_ACCESSORS"
},
{
"name": "BrowserDomAdapter"
},
Expand All @@ -56,6 +53,9 @@
{
"name": "BrowserModule"
},
{
"name": "BuiltInControlValueAccessor"
},
{
"name": "CHECKBOX_VALUE_ACCESSOR"
},
Expand Down Expand Up @@ -368,9 +368,6 @@
{
"name": "NULL_INJECTOR"
},
{
"name": "NUMBER_VALUE_ACCESSOR"
},
{
"name": "NgControl"
},
Expand Down Expand Up @@ -419,9 +416,6 @@
{
"name": "NullInjector"
},
{
"name": "NumberValueAccessor"
},
{
"name": "ObjectUnsubscribedError"
},
Expand Down Expand Up @@ -455,21 +449,9 @@
{
"name": "R3ViewContainerRef"
},
{
"name": "RADIO_VALUE_ACCESSOR"
},
{
"name": "RANGE_VALUE_ACCESSOR"
},
{
"name": "RadioControlRegistry"
},
{
"name": "RadioControlValueAccessor"
},
{
"name": "RangeValueAccessor"
},
{
"name": "ReactiveFormsComponent"
},
Expand Down Expand Up @@ -509,12 +491,6 @@
{
"name": "SCHEDULER"
},
{
"name": "SELECT_MULTIPLE_VALUE_ACCESSOR"
},
{
"name": "SELECT_VALUE_ACCESSOR"
},
{
"name": "SERVER_TRANSITION_PROVIDERS"
},
Expand All @@ -536,12 +512,6 @@
{
"name": "Sanitizer"
},
{
"name": "SelectControlValueAccessor"
},
{
"name": "SelectMultipleControlValueAccessor"
},
{
"name": "ShadowDomRenderer"
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,6 @@
{
"name": "BROWSER_MODULE_PROVIDERS"
},
{
"name": "BUILTIN_ACCESSORS"
},
{
"name": "BrowserDomAdapter"
},
Expand All @@ -56,6 +53,9 @@
{
"name": "BrowserModule"
},
{
"name": "BuiltInControlValueAccessor"
},
{
"name": "CHECKBOX_VALUE_ACCESSOR"
},
Expand Down Expand Up @@ -353,9 +353,6 @@
{
"name": "NULL_INJECTOR"
},
{
"name": "NUMBER_VALUE_ACCESSOR"
},
{
"name": "NgControl"
},
Expand Down Expand Up @@ -413,9 +410,6 @@
{
"name": "NullInjector"
},
{
"name": "NumberValueAccessor"
},
{
"name": "ObjectUnsubscribedError"
},
Expand Down Expand Up @@ -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"
},
Expand Down Expand Up @@ -500,12 +482,6 @@
{
"name": "SCHEDULER"
},
{
"name": "SELECT_MULTIPLE_VALUE_ACCESSOR"
},
{
"name": "SELECT_VALUE_ACCESSOR"
},
{
"name": "SERVER_TRANSITION_PROVIDERS"
},
Expand All @@ -527,12 +503,6 @@
{
"name": "Sanitizer"
},
{
"name": "SelectControlValueAccessor"
},
{
"name": "SelectMultipleControlValueAccessor"
},
{
"name": "ShadowDomRenderer"
},
Expand Down
9 changes: 6 additions & 3 deletions packages/forms/src/directives/checkbox_value_accessor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand All @@ -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.
Expand Down
11 changes: 10 additions & 1 deletion packages/forms/src/directives/control_value_accessor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
AndrewKushnir marked this conversation as resolved.
Show resolved Hide resolved
export class BuiltInControlValueAccessor {}

/**
* Used to provide a `ControlValueAccessor` for form controls.
*
Expand All @@ -139,4 +148,4 @@ export interface ControlValueAccessor {
* @publicApi
*/
export const NG_VALUE_ACCESSOR =
new InjectionToken<ReadonlyArray<ControlValueAccessor>>('NgValueAccessor');
new InjectionToken<ReadonlyArray<ControlValueAccessor>>('NgValueAccessor');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😱

9 changes: 6 additions & 3 deletions packages/forms/src/directives/number_value_accessor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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.
Expand All @@ -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.
Expand Down
9 changes: 6 additions & 3 deletions packages/forms/src/directives/radio_control_value_accessor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down