From d909aef5997b29b8d4a93b58d24f579e57d5d926 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Fri, 26 Oct 2018 22:27:33 +0200 Subject: [PATCH] fix: workaround for es2015 inheritance not always working Since the inherited `ctorParameters` can be either a static array or a function that returns an array, the workaround that landed with e9103a6 does not fully solve the issue, which developers experience when using Angular Material with ES2015. This improves the workaround and ensures that it handles both scenarios properly. Also the workaround has been moved into a separate function in order to remove code duplication. This should also make it easier to delete the workaround if we need to. --- CHANGELOG.md | 1 - src/lib/core/constructor-metadata-inherit.ts | 21 ++++++++++++++++++++ src/lib/core/public-api.ts | 1 + src/lib/input/autosize.ts | 4 ++-- src/lib/stepper/step-label.ts | 3 ++- src/lib/stepper/stepper-button.ts | 6 +++--- src/lib/stepper/stepper.ts | 4 ++-- src/lib/table/cell.ts | 8 ++++---- src/lib/table/row.ts | 7 ++++--- src/lib/table/table.ts | 3 ++- src/lib/tabs/tab-label.ts | 3 ++- src/lib/tree/node.ts | 3 ++- src/lib/tree/padding.ts | 4 ++-- src/lib/tree/toggle.ts | 3 ++- src/lib/tree/tree.ts | 3 ++- 15 files changed, 51 insertions(+), 23 deletions(-) create mode 100644 src/lib/core/constructor-metadata-inherit.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 3f253fd1273a..d20804da966b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,6 @@ ### Bug Fixes -* **build:** material not working with ES2015 ([#13709](https://github.com/angular/material2/issues/13709)) ([e9103a6](https://github.com/angular/material2/commit/e9103a6)), closes [#12760](https://github.com/angular/material2/issues/12760) [#13695](https://github.com/angular/material2/issues/13695) * **button-toggle:** webkit tap highlight conflicting with ripples ([#13721](https://github.com/angular/material2/issues/13721)) ([abd0278](https://github.com/angular/material2/commit/abd0278)) * **cdk-platform:** pass `{}` to `@NgModule` since passing nothing breaks ([#13792](https://github.com/angular/material2/issues/13792)) ([5abb644](https://github.com/angular/material2/commit/5abb644)) * **checkbox:** disabled property not being coerced ([#13755](https://github.com/angular/material2/issues/13755)) ([cee8c65](https://github.com/angular/material2/commit/cee8c65)), closes [#13739](https://github.com/angular/material2/issues/13739) diff --git a/src/lib/core/constructor-metadata-inherit.ts b/src/lib/core/constructor-metadata-inherit.ts new file mode 100644 index 000000000000..bff340ed1888 --- /dev/null +++ b/src/lib/core/constructor-metadata-inherit.ts @@ -0,0 +1,21 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ +import {Type} from '@angular/core'; + +/** + * Workaround for https://github.com/angular/material2/issues/12760. In order to work around + * the issue where classes which extend external classes do not have the proper metadata in + * ES2015, we just manually inherit the metadata for the constructor parameters. + * TODO(devversion): check if we can remove the workaround after ivy landed. + */ +export function _inheritCtorParametersMetadata(target: Type, base: Type) { + (target as any)['ctorParameters'] = () => { + const baseParameters = (base as any)['ctorParameters']; + return (typeof baseParameters === 'function' ? baseParameters() : baseParameters) || []; + }; +} diff --git a/src/lib/core/public-api.ts b/src/lib/core/public-api.ts index d31926271546..aee12f153807 100644 --- a/src/lib/core/public-api.ts +++ b/src/lib/core/public-api.ts @@ -20,3 +20,4 @@ export * from './selection/index'; // TODO: don't have this export * from './testing/month-constants'; +export * from './constructor-metadata-inherit'; diff --git a/src/lib/input/autosize.ts b/src/lib/input/autosize.ts index b262091a576a..035d75615c08 100644 --- a/src/lib/input/autosize.ts +++ b/src/lib/input/autosize.ts @@ -8,6 +8,7 @@ import {CdkTextareaAutosize} from '@angular/cdk/text-field'; import {Directive, Input} from '@angular/core'; +import {_inheritCtorParametersMetadata} from '@angular/material/core'; /** * Directive to automatically resize a textarea to fit its content. @@ -45,5 +46,4 @@ export class MatTextareaAutosize extends CdkTextareaAutosize { } // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -(MatTextareaAutosize as any)['ctorParameters'] = () => - (CdkTextareaAutosize as any)['ctorParameters']; +_inheritCtorParametersMetadata(MatTextareaAutosize, CdkTextareaAutosize); diff --git a/src/lib/stepper/step-label.ts b/src/lib/stepper/step-label.ts index 44f7edb1dca0..3a348c57b514 100644 --- a/src/lib/stepper/step-label.ts +++ b/src/lib/stepper/step-label.ts @@ -8,6 +8,7 @@ import {Directive} from '@angular/core'; import {CdkStepLabel} from '@angular/cdk/stepper'; +import {_inheritCtorParametersMetadata} from '@angular/material/core'; @Directive({ selector: '[matStepLabel]', @@ -15,4 +16,4 @@ import {CdkStepLabel} from '@angular/cdk/stepper'; export class MatStepLabel extends CdkStepLabel {} // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -(MatStepLabel as any)['ctorParameters'] = () => (CdkStepLabel as any)['ctorParameters']; +_inheritCtorParametersMetadata(MatStepLabel, CdkStepLabel); diff --git a/src/lib/stepper/stepper-button.ts b/src/lib/stepper/stepper-button.ts index fa1454f97f1b..925aef449cad 100644 --- a/src/lib/stepper/stepper-button.ts +++ b/src/lib/stepper/stepper-button.ts @@ -9,6 +9,7 @@ import {Directive} from '@angular/core'; import {CdkStepper, CdkStepperNext, CdkStepperPrevious} from '@angular/cdk/stepper'; import {MatStepper} from './stepper'; +import {_inheritCtorParametersMetadata} from '@angular/material/core'; /** Button that moves to the next step in a stepper workflow. */ @Directive({ @@ -35,6 +36,5 @@ export class MatStepperNext extends CdkStepperNext {} export class MatStepperPrevious extends CdkStepperPrevious {} // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -(MatStepperNext as any)['ctorParameters'] = () => (CdkStepperNext as any)['ctorParameters']; -(MatStepperPrevious as any)['ctorParameters'] = () => - (CdkStepperPrevious as any)['ctorParameters']; +_inheritCtorParametersMetadata(MatStepperNext, CdkStepperNext); +_inheritCtorParametersMetadata(MatStepperPrevious, CdkStepperPrevious); diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts index f91699f30611..cfb3dc2a692a 100644 --- a/src/lib/stepper/stepper.ts +++ b/src/lib/stepper/stepper.ts @@ -38,7 +38,7 @@ import { } from '@angular/core'; import {FormControl, FormGroupDirective, NgForm} from '@angular/forms'; import {DOCUMENT} from '@angular/common'; -import {ErrorStateMatcher} from '@angular/material/core'; +import {_inheritCtorParametersMetadata, ErrorStateMatcher} from '@angular/material/core'; import {Subject} from 'rxjs'; import {takeUntil, distinctUntilChanged} from 'rxjs/operators'; @@ -124,7 +124,7 @@ export class MatStepper extends CdkStepper implements AfterContentInit { } // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -(MatStepper as any)['ctorParameters'] = () => (CdkStepper as any)['ctorParameters']; +_inheritCtorParametersMetadata(MatStepper, CdkStepper); @Component({ moduleId: module.id, diff --git a/src/lib/table/cell.ts b/src/lib/table/cell.ts index 26b942f74b75..3151a9bc61c7 100644 --- a/src/lib/table/cell.ts +++ b/src/lib/table/cell.ts @@ -14,6 +14,7 @@ import { CdkHeaderCell, CdkHeaderCellDef, } from '@angular/cdk/table'; +import {_inheritCtorParametersMetadata} from '@angular/material/core'; /** * Cell definition for the mat-table. @@ -46,10 +47,9 @@ export class MatHeaderCellDef extends CdkHeaderCellDef {} export class MatFooterCellDef extends CdkFooterCellDef {} // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -(MatCellDef as any)['ctorParameters'] = () => (CdkCellDef as any)['ctorParameters']; -(MatHeaderCellDef as any)['ctorParameters'] = () => (CdkHeaderCellDef as any)['ctorParameters']; -(MatFooterCellDef as any)['ctorParameters'] = () => (MatFooterCellDef as any)['ctorParameters']; - +_inheritCtorParametersMetadata(MatCellDef, CdkCellDef); +_inheritCtorParametersMetadata(MatHeaderCellDef, CdkHeaderCellDef); +_inheritCtorParametersMetadata(MatFooterCellDef, CdkFooterCellDef); /** * Column definition for the mat-table. * Defines a set of cells available for a table column. diff --git a/src/lib/table/row.ts b/src/lib/table/row.ts index 6160f5afb424..ff47ac7b4f41 100644 --- a/src/lib/table/row.ts +++ b/src/lib/table/row.ts @@ -19,6 +19,7 @@ import { CdkRow, CdkRowDef, } from '@angular/cdk/table'; +import {_inheritCtorParametersMetadata} from '@angular/material/core'; /** * Header row definition for the mat-table. @@ -55,9 +56,9 @@ export class MatFooterRowDef extends CdkFooterRowDef {} export class MatRowDef extends CdkRowDef {} // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -(MatHeaderRowDef as any)['ctorParameters'] = () => (CdkHeaderRowDef as any)['ctorParameters']; -(MatFooterRowDef as any)['ctorParameters'] = () => (CdkFooterRowDef as any)['ctorParameters']; -(MatRowDef as any)['ctorParameters'] = () => (CdkRowDef as any)['ctorParameters']; +_inheritCtorParametersMetadata(MatHeaderRowDef, CdkHeaderRowDef); +_inheritCtorParametersMetadata(MatFooterRowDef, CdkFooterRowDef); +_inheritCtorParametersMetadata(MatRowDef, CdkRowDef); /** Footer template container that contains the cell outlet. Adds the right class and role. */ @Component({ diff --git a/src/lib/table/table.ts b/src/lib/table/table.ts index 6b53f02275c0..eadae8b11af1 100644 --- a/src/lib/table/table.ts +++ b/src/lib/table/table.ts @@ -8,6 +8,7 @@ import {CDK_TABLE_TEMPLATE, CdkTable} from '@angular/cdk/table'; import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; +import {_inheritCtorParametersMetadata} from '@angular/material/core'; /** * Wrapper for the CdkTable with Material design styles. @@ -30,4 +31,4 @@ export class MatTable extends CdkTable { } // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -(MatTable as any)['ctorParameters'] = () => (CdkTable as any)['ctorParameters']; +_inheritCtorParametersMetadata(MatTable, CdkTable); diff --git a/src/lib/tabs/tab-label.ts b/src/lib/tabs/tab-label.ts index b74d7338d1b1..cffa8104a77c 100644 --- a/src/lib/tabs/tab-label.ts +++ b/src/lib/tabs/tab-label.ts @@ -8,6 +8,7 @@ import {Directive} from '@angular/core'; import {CdkPortal} from '@angular/cdk/portal'; +import {_inheritCtorParametersMetadata} from '@angular/material/core'; /** Used to flag tab labels for use with the portal directive */ @Directive({ @@ -16,4 +17,4 @@ import {CdkPortal} from '@angular/cdk/portal'; export class MatTabLabel extends CdkPortal {} // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -(MatTabLabel as any)['ctorParameters'] = () => (CdkPortal as any)['ctorParameters']; +_inheritCtorParametersMetadata(MatTabLabel, CdkPortal); diff --git a/src/lib/tree/node.ts b/src/lib/tree/node.ts index cac435e56191..62a71afabc68 100644 --- a/src/lib/tree/node.ts +++ b/src/lib/tree/node.ts @@ -19,6 +19,7 @@ import { QueryList, } from '@angular/core'; import { + _inheritCtorParametersMetadata, CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor, @@ -77,7 +78,7 @@ export class MatTreeNodeDef extends CdkTreeNodeDef { } // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -(MatTreeNodeDef as any)['ctorParameters'] = () => (CdkTreeNodeDef as any)['ctorParameters']; +_inheritCtorParametersMetadata(MatTreeNodeDef, CdkTreeNodeDef); /** * Wrapper for the CdkTree nested node with Material design styles. diff --git a/src/lib/tree/padding.ts b/src/lib/tree/padding.ts index 682e33d05d97..787e2ffc4f36 100644 --- a/src/lib/tree/padding.ts +++ b/src/lib/tree/padding.ts @@ -7,6 +7,7 @@ */ import {CdkTreeNodePadding} from '@angular/cdk/tree'; import {Directive, Input} from '@angular/core'; +import {_inheritCtorParametersMetadata} from '@angular/material/core'; /** * Wrapper for the CdkTree padding with Material design styles. @@ -25,5 +26,4 @@ export class MatTreeNodePadding extends CdkTreeNodePadding { } // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -(MatTreeNodePadding as any)['ctorParameters'] = () => - (CdkTreeNodePadding as any)['ctorParameters']; +_inheritCtorParametersMetadata(MatTreeNodePadding, CdkTreeNodePadding); diff --git a/src/lib/tree/toggle.ts b/src/lib/tree/toggle.ts index 06e85cfa6dfb..e4c1501bbc8c 100644 --- a/src/lib/tree/toggle.ts +++ b/src/lib/tree/toggle.ts @@ -8,6 +8,7 @@ import {CdkTreeNodeToggle} from '@angular/cdk/tree'; import {Directive, Input} from '@angular/core'; +import {_inheritCtorParametersMetadata} from '@angular/material/core'; /** * Wrapper for the CdkTree's toggle with Material design styles. @@ -24,4 +25,4 @@ export class MatTreeNodeToggle extends CdkTreeNodeToggle { } // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -(MatTreeNodeToggle as any)['ctorParameters'] = () => (CdkTreeNodeToggle as any)['ctorParameters']; +_inheritCtorParametersMetadata(MatTreeNodeToggle, CdkTreeNodeToggle); diff --git a/src/lib/tree/tree.ts b/src/lib/tree/tree.ts index 509c248eb782..f1c902c971ae 100644 --- a/src/lib/tree/tree.ts +++ b/src/lib/tree/tree.ts @@ -9,6 +9,7 @@ import {CdkTree} from '@angular/cdk/tree'; import {ChangeDetectionStrategy, Component, ViewChild, ViewEncapsulation} from '@angular/core'; import {MatTreeNodeOutlet} from './outlet'; +import {_inheritCtorParametersMetadata} from '@angular/material/core'; /** * Wrapper for the CdkTable with Material design styles. @@ -33,4 +34,4 @@ export class MatTree extends CdkTree { } // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -(MatTree as any)['ctorParameters'] = () => (CdkTree as any)['ctorParameters']; +_inheritCtorParametersMetadata(MatTree, CdkTree);