From 22bb28f7e7dc5a8f04489f51480e00f544f12afe Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Wed, 10 Jun 2020 15:01:49 +0200 Subject: [PATCH 1/2] build: add size test for standalone button-toggle --- goldens/size-test.yaml | 1 + .../material/button-toggle/BUILD.bazel | 7 ++++++ .../material/button-toggle/standalone.ts | 23 +++++++++++++++++++ 3 files changed, 31 insertions(+) create mode 100644 integration/size-test/material/button-toggle/BUILD.bazel create mode 100644 integration/size-test/material/button-toggle/standalone.ts diff --git a/goldens/size-test.yaml b/goldens/size-test.yaml index baa4c6f5cc9c..03ed9a3465d8 100644 --- a/goldens/size-test.yaml +++ b/goldens/size-test.yaml @@ -2,3 +2,4 @@ material/list/nav-list: 130473 material/radio/without-group: 121448 material/menu/without-lazy-content: 210751 material/datepicker/range-picker/without-form-field: 330101 +material/button-toggle/standalone: 126712 diff --git a/integration/size-test/material/button-toggle/BUILD.bazel b/integration/size-test/material/button-toggle/BUILD.bazel new file mode 100644 index 000000000000..f3c7998dd6bd --- /dev/null +++ b/integration/size-test/material/button-toggle/BUILD.bazel @@ -0,0 +1,7 @@ +load("//integration/size-test:index.bzl", "size_test") + +size_test( + name = "standalone", + file = "standalone.ts", + deps = ["//src/material/button-toggle"], +) diff --git a/integration/size-test/material/button-toggle/standalone.ts b/integration/size-test/material/button-toggle/standalone.ts new file mode 100644 index 000000000000..d5746c0f9014 --- /dev/null +++ b/integration/size-test/material/button-toggle/standalone.ts @@ -0,0 +1,23 @@ +import {Component, NgModule} from '@angular/core'; +import {platformBrowser} from '@angular/platform-browser'; +import {MatButtonToggleModule} from '@angular/material/button-toggle'; + +/** + * Basic component using a standalone `MatButtonToggle`. Other parts of the button-toggle + * module such as `MatButtonToggleGroup` are not used and should be tree-shaken away. + */ +@Component({ + template: ` + Center text + `, +}) +export class TestComponent {} + +@NgModule({ + imports: [MatButtonToggleModule], + declarations: [TestComponent], + bootstrap: [TestComponent], +}) +export class AppModule {} + +platformBrowser().bootstrapModule(AppModule); From ddd3aa908c54c93d7596956a267502a6b2f0fbcf Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Wed, 10 Jun 2020 15:33:04 +0200 Subject: [PATCH 2/2] refactor: provide and use light-weight token for button-toggle group The `MatButtonToggleGroup` component is not always used in applications. e.g. it's an optional part, and standalone button toggles are totally valid. Currently though, we always reference the `MatButtonToggleGroup` component directly as a value, and it will be retained in applications regardless of the usage. We can improve this by providing a light-weight injection token for the button-toggle group that we can then use DI injection to avoid full retention of the class. This obviously was already an issue in View Engine too, but it became significantly worse in Ivy as factories are now directly attached to the component class. Related to: #19576. --- goldens/size-test.yaml | 2 +- src/material/button-toggle/button-toggle.ts | 15 ++++++++++++--- .../public_api_guard/material/button-toggle.d.ts | 2 ++ 3 files changed, 15 insertions(+), 4 deletions(-) diff --git a/goldens/size-test.yaml b/goldens/size-test.yaml index 03ed9a3465d8..32f177e8b905 100644 --- a/goldens/size-test.yaml +++ b/goldens/size-test.yaml @@ -2,4 +2,4 @@ material/list/nav-list: 130473 material/radio/without-group: 121448 material/menu/without-lazy-content: 210751 material/datepicker/range-picker/without-form-field: 330101 -material/button-toggle/standalone: 126712 +material/button-toggle/standalone: 119400 diff --git a/src/material/button-toggle/button-toggle.ts b/src/material/button-toggle/button-toggle.ts index 3f38a8da4f72..09afd5a6cd5e 100644 --- a/src/material/button-toggle/button-toggle.ts +++ b/src/material/button-toggle/button-toggle.ts @@ -61,7 +61,13 @@ export interface MatButtonToggleDefaultOptions { export const MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS = new InjectionToken('MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS'); - +/** + * Injection token that can be used to reference instances of `MatButtonToggleGroup`. + * It serves as alternative token to the actual `MatButtonToggleGroup` class which + * could cause unnecessary retention of the class and its component metadata. + */ +export const MAT_BUTTON_TOGGLE_GROUP = + new InjectionToken('MatButtonToggleGroup'); /** * Provider Expression that allows mat-button-toggle-group to register as a ControlValueAccessor. @@ -89,7 +95,10 @@ export class MatButtonToggleChange { /** Exclusive selection button toggle group that behaves like a radio-button group. */ @Directive({ selector: 'mat-button-toggle-group', - providers: [MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR], + providers: [ + MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, + {provide: MAT_BUTTON_TOGGLE_GROUP, useExisting: MatButtonToggleGroup}, + ], host: { 'role': 'group', 'class': 'mat-button-toggle-group', @@ -476,7 +485,7 @@ export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit @Output() readonly change: EventEmitter = new EventEmitter(); - constructor(@Optional() toggleGroup: MatButtonToggleGroup, + constructor(@Optional() @Inject(MAT_BUTTON_TOGGLE_GROUP) toggleGroup: MatButtonToggleGroup, private _changeDetectorRef: ChangeDetectorRef, private _elementRef: ElementRef, private _focusMonitor: FocusMonitor, diff --git a/tools/public_api_guard/material/button-toggle.d.ts b/tools/public_api_guard/material/button-toggle.d.ts index db9025c1bc8b..4dd808c38fb7 100644 --- a/tools/public_api_guard/material/button-toggle.d.ts +++ b/tools/public_api_guard/material/button-toggle.d.ts @@ -1,5 +1,7 @@ export declare const MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS: InjectionToken; +export declare const MAT_BUTTON_TOGGLE_GROUP: InjectionToken; + export declare const MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR: any; export declare class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit, AfterViewInit, CanDisableRipple, OnDestroy {