feat(common): make the CommonModule pipes standalone

This commit updates the pipes presents in the `CommonModule` and annotates them with the `standalone: true` flag. With that flag, the pipes can now be imported individually, as well as imported via the `CommonModule`.

goldens/public-api/common/index.md

@@ -45,7 +45,7 @@ export class AsyncPipe implements OnDestroy, PipeTransform {
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<AsyncPipe, never>;
     // (undocumented)
-    static ɵpipe: i0.ɵɵPipeDeclaration<AsyncPipe, "async", false>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<AsyncPipe, "async", true>;
 }
 
 // @public
@@ -55,7 +55,7 @@ export class CommonModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<CommonModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<CommonModule, [typeof i1.NgClass, typeof i2.NgComponentOutlet, typeof i3.NgForOf, typeof i4.NgIf, typeof i5.NgTemplateOutlet, typeof i6.NgStyle, typeof i7.NgSwitch, typeof i7.NgSwitchCase, typeof i7.NgSwitchDefault, typeof i8.NgPlural, typeof i8.NgPluralCase, typeof i9.AsyncPipe, typeof i10.UpperCasePipe, typeof i10.LowerCasePipe, typeof i11.JsonPipe, typeof i12.SlicePipe, typeof i13.DecimalPipe, typeof i13.PercentPipe, typeof i10.TitleCasePipe, typeof i13.CurrencyPipe, typeof i14.DatePipe, typeof i15.I18nPluralPipe, typeof i16.I18nSelectPipe, typeof i17.KeyValuePipe], never, [typeof i1.NgClass, typeof i2.NgComponentOutlet, typeof i3.NgForOf, typeof i4.NgIf, typeof i5.NgTemplateOutlet, typeof i6.NgStyle, typeof i7.NgSwitch, typeof i7.NgSwitchCase, typeof i7.NgSwitchDefault, typeof i8.NgPlural, typeof i8.NgPluralCase, typeof i9.AsyncPipe, typeof i10.UpperCasePipe, typeof i10.LowerCasePipe, typeof i11.JsonPipe, typeof i12.SlicePipe, typeof i13.DecimalPipe, typeof i13.PercentPipe, typeof i10.TitleCasePipe, typeof i13.CurrencyPipe, typeof i14.DatePipe, typeof i15.I18nPluralPipe, typeof i16.I18nSelectPipe, typeof i17.KeyValuePipe]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CommonModule, [typeof i1.NgClass, typeof i2.NgComponentOutlet, typeof i3.NgForOf, typeof i4.NgIf, typeof i5.NgTemplateOutlet, typeof i6.NgStyle, typeof i7.NgSwitch, typeof i7.NgSwitchCase, typeof i7.NgSwitchDefault, typeof i8.NgPlural, typeof i8.NgPluralCase], [typeof i9.AsyncPipe, typeof i10.UpperCasePipe, typeof i10.LowerCasePipe, typeof i11.JsonPipe, typeof i12.SlicePipe, typeof i13.DecimalPipe, typeof i13.PercentPipe, typeof i10.TitleCasePipe, typeof i13.CurrencyPipe, typeof i14.DatePipe, typeof i15.I18nPluralPipe, typeof i16.I18nSelectPipe, typeof i17.KeyValuePipe], [typeof i1.NgClass, typeof i2.NgComponentOutlet, typeof i3.NgForOf, typeof i4.NgIf, typeof i5.NgTemplateOutlet, typeof i6.NgStyle, typeof i7.NgSwitch, typeof i7.NgSwitchCase, typeof i7.NgSwitchDefault, typeof i8.NgPlural, typeof i8.NgPluralCase, typeof i9.AsyncPipe, typeof i10.UpperCasePipe, typeof i10.LowerCasePipe, typeof i11.JsonPipe, typeof i12.SlicePipe, typeof i13.DecimalPipe, typeof i13.PercentPipe, typeof i10.TitleCasePipe, typeof i13.CurrencyPipe, typeof i14.DatePipe, typeof i15.I18nPluralPipe, typeof i16.I18nSelectPipe, typeof i17.KeyValuePipe]>;
 }
 
 // @public
@@ -70,7 +70,7 @@ export class CurrencyPipe implements PipeTransform {
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CurrencyPipe, never>;
     // (undocumented)
-    static ɵpipe: i0.ɵɵPipeDeclaration<CurrencyPipe, "currency", false>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<CurrencyPipe, "currency", true>;
 }
 
 // @public
@@ -88,7 +88,7 @@ export class DatePipe implements PipeTransform {
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<DatePipe, [null, { optional: true; }]>;
     // (undocumented)
-    static ɵpipe: i0.ɵɵPipeDeclaration<DatePipe, "date", false>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<DatePipe, "date", true>;
 }
 
 // @public
@@ -103,7 +103,7 @@ export class DecimalPipe implements PipeTransform {
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<DecimalPipe, never>;
     // (undocumented)
-    static ɵpipe: i0.ɵɵPipeDeclaration<DecimalPipe, "number", false>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<DecimalPipe, "number", true>;
 }
 
 // @public
@@ -241,7 +241,7 @@ export class I18nPluralPipe implements PipeTransform {
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<I18nPluralPipe, never>;
     // (undocumented)
-    static ɵpipe: i0.ɵɵPipeDeclaration<I18nPluralPipe, "i18nPlural", false>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<I18nPluralPipe, "i18nPlural", true>;
 }
 
 // @public
@@ -253,7 +253,7 @@ export class I18nSelectPipe implements PipeTransform {
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<I18nSelectPipe, never>;
     // (undocumented)
-    static ɵpipe: i0.ɵɵPipeDeclaration<I18nSelectPipe, "i18nSelect", false>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<I18nSelectPipe, "i18nSelect", true>;
 }
 
 // @public
@@ -275,7 +275,7 @@ export class JsonPipe implements PipeTransform {
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<JsonPipe, never>;
     // (undocumented)
-    static ɵpipe: i0.ɵɵPipeDeclaration<JsonPipe, "json", false>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<JsonPipe, "json", true>;
 }
 
 // @public
@@ -306,7 +306,7 @@ export class KeyValuePipe implements PipeTransform {
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<KeyValuePipe, never>;
     // (undocumented)
-    static ɵpipe: i0.ɵɵPipeDeclaration<KeyValuePipe, "keyvalue", false>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<KeyValuePipe, "keyvalue", true>;
 }
 
 // @public
@@ -392,7 +392,7 @@ export class LowerCasePipe implements PipeTransform {
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<LowerCasePipe, never>;
     // (undocumented)
-    static ɵpipe: i0.ɵɵPipeDeclaration<LowerCasePipe, "lowercase", false>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<LowerCasePipe, "lowercase", true>;
 }
 
 // @public
@@ -673,7 +673,7 @@ export class PercentPipe implements PipeTransform {
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<PercentPipe, never>;
     // (undocumented)
-    static ɵpipe: i0.ɵɵPipeDeclaration<PercentPipe, "percent", false>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<PercentPipe, "percent", true>;
 }
 
 // @public
@@ -761,7 +761,7 @@ export class SlicePipe implements PipeTransform {
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<SlicePipe, never>;
     // (undocumented)
-    static ɵpipe: i0.ɵɵPipeDeclaration<SlicePipe, "slice", false>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<SlicePipe, "slice", true>;
 }
 
 // @public
@@ -781,7 +781,7 @@ export class TitleCasePipe implements PipeTransform {
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<TitleCasePipe, never>;
     // (undocumented)
-    static ɵpipe: i0.ɵɵPipeDeclaration<TitleCasePipe, "titlecase", false>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<TitleCasePipe, "titlecase", true>;
 }
 
 // @public
@@ -803,7 +803,7 @@ export class UpperCasePipe implements PipeTransform {
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<UpperCasePipe, never>;
     // (undocumented)
-    static ɵpipe: i0.ɵɵPipeDeclaration<UpperCasePipe, "uppercase", false>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<UpperCasePipe, "uppercase", true>;
 }
 
 // @public (undocumented)

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_PIPES],
+  declarations: [COMMON_DIRECTIVES],
   exports: [COMMON_DIRECTIVES, COMMON_PIPES],
 })
 export class CommonModule {

packages/common/src/pipes/async_pipe.ts

@@ -73,7 +73,11 @@ const _subscribableStrategy = new SubscribableStrategy();
  *
  * @publicApi
  */
-@Pipe({name: 'async', pure: false})
+@Pipe({
+  name: 'async',
+  pure: false,
+  standalone: true,
+})
 export class AsyncPipe implements OnDestroy, PipeTransform {
   private _ref: ChangeDetectorRef|null;
   private _latestValue: any = null;

packages/common/src/pipes/case_conversion_pipes.ts

@@ -25,7 +25,10 @@ import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
  * @ngModule CommonModule
  * @publicApi
  */
-@Pipe({name: 'lowercase'})
+@Pipe({
+  name: 'lowercase',
+  standalone: true,
+})
 export class LowerCasePipe implements PipeTransform {
   /**
    * @param value The string to transform to lower case.
@@ -71,7 +74,10 @@ const unicodeWordMatch =
  * @ngModule CommonModule
  * @publicApi
  */
-@Pipe({name: 'titlecase'})
+@Pipe({
+  name: 'titlecase',
+  standalone: true,
+})
 export class TitleCasePipe implements PipeTransform {
   /**
    * @param value The string to transform to title case.
@@ -98,7 +104,10 @@ export class TitleCasePipe implements PipeTransform {
  * @ngModule CommonModule
  * @publicApi
  */
-@Pipe({name: 'uppercase'})
+@Pipe({
+  name: 'uppercase',
+  standalone: true,
+})
 export class UpperCasePipe implements PipeTransform {
   /**
    * @param value The string to transform to upper case.

packages/common/src/pipes/date_pipe.ts

@@ -177,7 +177,11 @@ export const DATE_PIPE_DEFAULT_TIMEZONE = new InjectionToken<string>('DATE_PIPE_
  * @publicApi
  */
 // clang-format on
-@Pipe({name: 'date', pure: true})
+@Pipe({
+  name: 'date',
+  pure: true,
+  standalone: true,
+})
 export class DatePipe implements PipeTransform {
   constructor(
       @Inject(LOCALE_ID) private locale: string,

packages/common/src/pipes/i18n_plural_pipe.ts

@@ -28,7 +28,11 @@ const _INTERPOLATION_REGEXP: RegExp = /#/g;
  *
  * @publicApi
  */
-@Pipe({name: 'i18nPlural', pure: true})
+@Pipe({
+  name: 'i18nPlural',
+  pure: true,
+  standalone: true,
+})
 export class I18nPluralPipe implements PipeTransform {
   constructor(private _localization: NgLocalization) {}
 

packages/common/src/pipes/i18n_select_pipe.ts

@@ -7,6 +7,7 @@
  */
 
 import {Pipe, PipeTransform} from '@angular/core';
+
 import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
 
 /**
@@ -26,7 +27,11 @@ import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
  *
  * @publicApi
  */
-@Pipe({name: 'i18nSelect', pure: true})
+@Pipe({
+  name: 'i18nSelect',
+  pure: true,
+  standalone: true,
+})
 export class I18nSelectPipe implements PipeTransform {
   /**
    * @param value a string to be internationalized.

packages/common/src/pipes/json_pipe.ts

@@ -23,7 +23,11 @@ import {Pipe, PipeTransform} from '@angular/core';
  *
  * @publicApi
  */
-@Pipe({name: 'json', pure: false})
+@Pipe({
+  name: 'json',
+  pure: false,
+  standalone: true,
+})
 export class JsonPipe implements PipeTransform {
   /**
    * @param value A value of any type to convert into a JSON-format string.

packages/common/src/pipes/keyvalue_pipe.ts

@@ -43,7 +43,11 @@ export interface KeyValue<K, V> {
  *
  * @publicApi
  */
-@Pipe({name: 'keyvalue', pure: false})
+@Pipe({
+  name: 'keyvalue',
+  pure: false,
+  standalone: true,
+})
 export class KeyValuePipe implements PipeTransform {
   constructor(private readonly differs: KeyValueDiffers) {}
 

packages/common/src/pipes/number_pipe.ts

@@ -77,7 +77,10 @@ import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
  *
  * @publicApi
  */
-@Pipe({name: 'number'})
+@Pipe({
+  name: 'number',
+  standalone: true,
+})
 export class DecimalPipe implements PipeTransform {
   constructor(@Inject(LOCALE_ID) private _locale: string) {}
 
@@ -126,7 +129,10 @@ export class DecimalPipe implements PipeTransform {
  *
  * @publicApi
  */
-@Pipe({name: 'percent'})
+@Pipe({
+  name: 'percent',
+  standalone: true,
+})
 export class PercentPipe implements PipeTransform {
   constructor(@Inject(LOCALE_ID) private _locale: string) {}
 
@@ -202,7 +208,10 @@ export class PercentPipe implements PipeTransform {
  *
  * @publicApi
  */
-@Pipe({name: 'currency'})
+@Pipe({
+  name: 'currency',
+  standalone: true,
+})
 export class CurrencyPipe implements PipeTransform {
   constructor(
       @Inject(LOCALE_ID) private _locale: string,

packages/common/src/pipes/slice_pipe.ts

@@ -7,6 +7,7 @@
  */
 
 import {Pipe, PipeTransform} from '@angular/core';
+
 import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
 
 /**
@@ -44,7 +45,11 @@ import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
  *
  * @publicApi
  */
-@Pipe({name: 'slice', pure: false})
+@Pipe({
+  name: 'slice',
+  pure: false,
+  standalone: true,
+})
 export class SlicePipe implements PipeTransform {
   /**
    * @param value a list or a string to be sliced.

packages/common/test/pipes/async_pipe_spec.ts

@@ -7,8 +7,9 @@
  */
 
 import {AsyncPipe, ɵgetDOM as getDOM} from '@angular/common';
-import {ChangeDetectorRef, EventEmitter} from '@angular/core';
-import {Subscribable, Unsubscribable} from 'rxjs';
+import {ChangeDetectorRef, Component, EventEmitter} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {of, Subscribable, Unsubscribable} from 'rxjs';
 
 {
   describe('AsyncPipe', () => {
@@ -260,5 +261,23 @@ import {Subscribable, Unsubscribable} from 'rxjs';
         expect(() => pipe.transform('some bogus object' as any)).toThrowError();
       });
     });
+
+    it('should be available as a standalone pipe', () => {
+      @Component({
+        selector: 'test-component',
+        imports: [AsyncPipe],
+        template: '{{ value | async }}',
+        standalone: true,
+      })
+      class TestComponent {
+        value = of('foo');
+      }
+
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+
+      const content = fixture.nativeElement.textContent;
+      expect(content).toBe('foo');
+    });
   });
 }