From def16955ebb7ea29cff40a3a54f6ba1f15e6302b Mon Sep 17 00:00:00 2001 From: Andrew Kushnir Date: Wed, 22 Jun 2022 22:53:56 -0700 Subject: [PATCH] feat(common): make the CommonModule directives standalone This commit updates the directives presents in the `CommonModule` and annotates them with the `standalone: true` flag. With that flag, the directives can now be imported individually, as well as imported via the `CommonModule`. --- goldens/public-api/common/index.md | 24 +++++++++---------- packages/common/src/common_module.ts | 3 ++- packages/common/src/directives/ng_class.ts | 5 +++- .../src/directives/ng_component_outlet.ts | 5 +++- packages/common/src/directives/ng_for_of.ts | 5 +++- packages/common/src/directives/ng_if.ts | 5 +++- packages/common/src/directives/ng_plural.ts | 10 ++++++-- packages/common/src/directives/ng_style.ts | 5 +++- packages/common/src/directives/ng_switch.ts | 15 +++++++++--- .../src/directives/ng_template_outlet.ts | 5 +++- 10 files changed, 58 insertions(+), 24 deletions(-) diff --git a/goldens/public-api/common/index.md b/goldens/public-api/common/index.md index f9675dd74f572..c5d92e39eafc9 100644 --- a/goldens/public-api/common/index.md +++ b/goldens/public-api/common/index.md @@ -55,7 +55,7 @@ export class CommonModule { // (undocumented) static ɵinj: i0.ɵɵInjectorDeclaration; // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public @@ -407,7 +407,7 @@ export class NgClass implements DoCheck { // (undocumented) ngDoCheck(): void; // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration; + static ɵdir: i0.ɵɵDirectiveDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } @@ -430,7 +430,7 @@ export class NgComponentOutlet implements OnChanges, OnDestroy { // (undocumented) ngOnDestroy(): void; // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration; + static ɵdir: i0.ɵɵDirectiveDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } @@ -446,7 +446,7 @@ export class NgForOf = NgIterable> implements DoCh get ngForTrackBy(): TrackByFunction; static ngTemplateContextGuard>(dir: NgForOf, ctx: any): ctx is NgForOfContext; // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration, "[ngFor][ngForOf]", never, { "ngForOf": "ngForOf"; "ngForTrackBy": "ngForTrackBy"; "ngForTemplate": "ngForTemplate"; }, {}, never, never, false>; + static ɵdir: i0.ɵɵDirectiveDeclaration, "[ngFor][ngForOf]", never, { "ngForOf": "ngForOf"; "ngForTrackBy": "ngForTrackBy"; "ngForTemplate": "ngForTemplate"; }, {}, never, never, true>; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration, never>; } @@ -481,7 +481,7 @@ export class NgIf { static ngTemplateContextGuard(dir: NgIf, ctx: any): ctx is NgIfContext>; static ngTemplateGuard_ngIf: 'binding'; // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration, "[ngIf]", never, { "ngIf": "ngIf"; "ngIfThen": "ngIfThen"; "ngIfElse": "ngIfElse"; }, {}, never, never, false>; + static ɵdir: i0.ɵɵDirectiveDeclaration, "[ngIf]", never, { "ngIf": "ngIf"; "ngIfThen": "ngIfThen"; "ngIfElse": "ngIfElse"; }, {}, never, never, true>; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration, never>; } @@ -525,7 +525,7 @@ export class NgPlural { // (undocumented) set ngPlural(value: number); // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration; + static ɵdir: i0.ɵɵDirectiveDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } @@ -536,7 +536,7 @@ export class NgPluralCase { // (undocumented) value: string; // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration; + static ɵdir: i0.ɵɵDirectiveDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } @@ -551,7 +551,7 @@ export class NgStyle implements DoCheck { [klass: string]: any; } | null); // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration; + static ɵdir: i0.ɵɵDirectiveDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } @@ -561,7 +561,7 @@ export class NgSwitch { // (undocumented) set ngSwitch(newValue: any); // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration; + static ɵdir: i0.ɵɵDirectiveDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } @@ -572,7 +572,7 @@ export class NgSwitchCase implements DoCheck { ngDoCheck(): void; ngSwitchCase: any; // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration; + static ɵdir: i0.ɵɵDirectiveDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } @@ -581,7 +581,7 @@ export class NgSwitchCase implements DoCheck { export class NgSwitchDefault { constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef, ngSwitch: NgSwitch); // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration; + static ɵdir: i0.ɵɵDirectiveDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } @@ -595,7 +595,7 @@ export class NgTemplateOutlet implements OnChanges { ngTemplateOutletContext: Object | null; ngTemplateOutletInjector: Injector | null; // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration; + static ɵdir: i0.ɵɵDirectiveDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } diff --git a/packages/common/src/common_module.ts b/packages/common/src/common_module.ts index 91d31727d847f..b4b1e7e5e1011 100644 --- a/packages/common/src/common_module.ts +++ b/packages/common/src/common_module.ts @@ -29,7 +29,8 @@ import {COMMON_PIPES} from './pipes/index'; * @publicApi */ @NgModule({ - declarations: [COMMON_DIRECTIVES, COMMON_PIPES], + imports: [COMMON_DIRECTIVES], + declarations: [COMMON_PIPES], exports: [COMMON_DIRECTIVES, COMMON_PIPES], }) export class CommonModule { diff --git a/packages/common/src/directives/ng_class.ts b/packages/common/src/directives/ng_class.ts index 8b8c69d3b3fcf..9c9d815b18de8 100644 --- a/packages/common/src/directives/ng_class.ts +++ b/packages/common/src/directives/ng_class.ts @@ -37,7 +37,10 @@ type NgClassSupportedTypes = string[]|Set|{[klass: string]: any}|null|un * * @publicApi */ -@Directive({selector: '[ngClass]'}) +@Directive({ + selector: '[ngClass]', + standalone: true, +}) export class NgClass implements DoCheck { private _iterableDiffer: IterableDiffer|null = null; private _keyValueDiffer: KeyValueDiffer|null = null; diff --git a/packages/common/src/directives/ng_component_outlet.ts b/packages/common/src/directives/ng_component_outlet.ts index 15060c109181f..4f5fb64dbc623 100644 --- a/packages/common/src/directives/ng_component_outlet.ts +++ b/packages/common/src/directives/ng_component_outlet.ts @@ -68,7 +68,10 @@ import {ComponentRef, createNgModuleRef, Directive, Injector, Input, NgModuleFac * @publicApi * @ngModule CommonModule */ -@Directive({selector: '[ngComponentOutlet]'}) +@Directive({ + selector: '[ngComponentOutlet]', + standalone: true, +}) export class NgComponentOutlet implements OnChanges, OnDestroy { @Input() ngComponentOutlet: Type|null = null; diff --git a/packages/common/src/directives/ng_for_of.ts b/packages/common/src/directives/ng_for_of.ts index 32bbb2cb2108f..e0938ac1eb2d4 100644 --- a/packages/common/src/directives/ng_for_of.ts +++ b/packages/common/src/directives/ng_for_of.ts @@ -129,7 +129,10 @@ export class NgForOfContext = NgIterable> { * @ngModule CommonModule * @publicApi */ -@Directive({selector: '[ngFor][ngForOf]'}) +@Directive({ + selector: '[ngFor][ngForOf]', + standalone: true, +}) export class NgForOf = NgIterable> implements DoCheck { /** * The value of the iterable expression, which can be used as a diff --git a/packages/common/src/directives/ng_if.ts b/packages/common/src/directives/ng_if.ts index fec23963eeed2..830d63c2f7469 100644 --- a/packages/common/src/directives/ng_if.ts +++ b/packages/common/src/directives/ng_if.ts @@ -148,7 +148,10 @@ import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef, ɵstri * @ngModule CommonModule * @publicApi */ -@Directive({selector: '[ngIf]'}) +@Directive({ + selector: '[ngIf]', + standalone: true, +}) export class NgIf { private _context: NgIfContext = new NgIfContext(); private _thenTemplateRef: TemplateRef>|null = null; diff --git a/packages/common/src/directives/ng_plural.ts b/packages/common/src/directives/ng_plural.ts index fbd824472411c..3e40841a37ca6 100644 --- a/packages/common/src/directives/ng_plural.ts +++ b/packages/common/src/directives/ng_plural.ts @@ -44,7 +44,10 @@ import {SwitchView} from './ng_switch'; * * @publicApi */ -@Directive({selector: '[ngPlural]'}) +@Directive({ + selector: '[ngPlural]', + standalone: true, +}) export class NgPlural { // TODO(issue/24571): remove '!'. private _switchValue!: number; @@ -104,7 +107,10 @@ export class NgPlural { * * @publicApi */ -@Directive({selector: '[ngPluralCase]'}) +@Directive({ + selector: '[ngPluralCase]', + standalone: true, +}) export class NgPluralCase { constructor( @Attribute('ngPluralCase') public value: string, template: TemplateRef, diff --git a/packages/common/src/directives/ng_style.ts b/packages/common/src/directives/ng_style.ts index 1252ee1628e17..ce547f0c33b3e 100644 --- a/packages/common/src/directives/ng_style.ts +++ b/packages/common/src/directives/ng_style.ts @@ -44,7 +44,10 @@ import {Directive, DoCheck, ElementRef, Input, KeyValueChanges, KeyValueDiffer, * * @publicApi */ -@Directive({selector: '[ngStyle]'}) +@Directive({ + selector: '[ngStyle]', + standalone: true, +}) export class NgStyle implements DoCheck { private _ngStyle: {[key: string]: string}|null = null; private _differ: KeyValueDiffer|null = null; diff --git a/packages/common/src/directives/ng_switch.ts b/packages/common/src/directives/ng_switch.ts index a17aa58392d54..a0cba16afb1f5 100644 --- a/packages/common/src/directives/ng_switch.ts +++ b/packages/common/src/directives/ng_switch.ts @@ -101,7 +101,10 @@ export class SwitchView { * @see [Structural Directives](guide/structural-directives) * */ -@Directive({selector: '[ngSwitch]'}) +@Directive({ + selector: '[ngSwitch]', + standalone: true, +}) export class NgSwitch { // TODO(issue/24571): remove '!'. private _defaultViews!: SwitchView[]; @@ -189,7 +192,10 @@ export class NgSwitch { * @see `NgSwitchDefault` * */ -@Directive({selector: '[ngSwitchCase]'}) +@Directive({ + selector: '[ngSwitchCase]', + standalone: true, +}) export class NgSwitchCase implements DoCheck { private _view: SwitchView; /** @@ -231,7 +237,10 @@ export class NgSwitchCase implements DoCheck { * @see `NgSwitchCase` * */ -@Directive({selector: '[ngSwitchDefault]'}) +@Directive({ + selector: '[ngSwitchDefault]', + standalone: true, +}) export class NgSwitchDefault { constructor( viewContainer: ViewContainerRef, templateRef: TemplateRef, diff --git a/packages/common/src/directives/ng_template_outlet.ts b/packages/common/src/directives/ng_template_outlet.ts index ebb2a951b081e..bc77de6372008 100644 --- a/packages/common/src/directives/ng_template_outlet.ts +++ b/packages/common/src/directives/ng_template_outlet.ts @@ -32,7 +32,10 @@ import {Directive, EmbeddedViewRef, Injector, Input, OnChanges, SimpleChanges, T * * @publicApi */ -@Directive({selector: '[ngTemplateOutlet]'}) +@Directive({ + selector: '[ngTemplateOutlet]', + standalone: true, +}) export class NgTemplateOutlet implements OnChanges { private _viewRef: EmbeddedViewRef|null = null;