feat(component): make LetDirective and PushPipe standalone (#3826)

Closes #3804

Author: stefanoslig

modules/component/spec/let/let.directive.spec.ts

@@ -117,7 +117,8 @@ let componentNativeElement: any;
 
 const setupLetDirectiveTestComponent = (): void => {
   TestBed.configureTestingModule({
-    declarations: [LetDirectiveTestComponent, LetDirective],
+    declarations: [LetDirectiveTestComponent],
+    imports: [LetDirective],
     providers: [
       { provide: ChangeDetectorRef, useClass: MockChangeDetectorRef },
       TemplateRef,
@@ -134,7 +135,8 @@ const setupLetDirectiveTestComponent = (): void => {
 
 const setupLetDirectiveTestComponentError = (): void => {
   TestBed.configureTestingModule({
-    declarations: [LetDirectiveTestErrorComponent, LetDirective],
+    declarations: [LetDirectiveTestErrorComponent],
+    imports: [LetDirective],
     providers: [
       { provide: ChangeDetectorRef, useClass: MockChangeDetectorRef },
       { provide: ErrorHandler, useClass: MockErrorHandler },
@@ -153,7 +155,8 @@ const setupLetDirectiveTestComponentError = (): void => {
 
 const setupLetDirectiveTestComponentComplete = (): void => {
   TestBed.configureTestingModule({
-    declarations: [LetDirectiveTestCompleteComponent, LetDirective],
+    declarations: [LetDirectiveTestCompleteComponent],
+    imports: [LetDirective],
     providers: [
       { provide: ChangeDetectorRef, useClass: MockChangeDetectorRef },
       TemplateRef,
@@ -171,7 +174,8 @@ const setupLetDirectiveTestComponentComplete = (): void => {
 
 const setupLetDirectiveTestComponentSuspense = (): void => {
   TestBed.configureTestingModule({
-    declarations: [LetDirectiveTestSuspenseComponent, LetDirective],
+    declarations: [LetDirectiveTestSuspenseComponent],
+    imports: [LetDirective],
     providers: [
       { provide: ChangeDetectorRef, useClass: MockChangeDetectorRef },
       { provide: ErrorHandler, useClass: MockErrorHandler },
@@ -190,7 +194,8 @@ const setupLetDirectiveTestComponentSuspense = (): void => {
 
 const setupLetDirectiveTestComponentSuspenseTpl = (): void => {
   TestBed.configureTestingModule({
-    declarations: [LetDirectiveTestSuspenseTplComponent, LetDirective],
+    declarations: [LetDirectiveTestSuspenseTplComponent],
+    imports: [LetDirective],
     providers: [
       { provide: ChangeDetectorRef, useClass: MockChangeDetectorRef },
       { provide: ErrorHandler, useClass: MockErrorHandler },
@@ -210,11 +215,8 @@ const setupLetDirectiveTestComponentSuspenseTpl = (): void => {
 const setupLetDirectiveTestRecursionComponent = (): void => {
   const subject = new BehaviorSubject(0);
   TestBed.configureTestingModule({
-    declarations: [
-      LetDirectiveTestRecursionComponent,
-      RecursiveDirective,
-      LetDirective,
-    ],
+    declarations: [LetDirectiveTestRecursionComponent, RecursiveDirective],
+    imports: [LetDirective],
     providers: [
       { provide: ChangeDetectorRef, useClass: MockChangeDetectorRef },
       TemplateRef,
@@ -541,7 +543,8 @@ describe('LetDirective', () => {
       }
 
       TestBed.configureTestingModule({
-        declarations: [LetDirectiveTestComponent, LetDirective],
+        declarations: [LetDirectiveTestComponent],
+        imports: [LetDirective],
         providers: [
           { provide: ChangeDetectorRef, useClass: MockChangeDetectorRef },
           { provide: ErrorHandler, useClass: MockErrorHandler },

modules/component/spec/push/push.pipe.spec.ts

@@ -163,7 +163,8 @@ describe('PushPipe', () => {
   describe('used as a Pipe', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({
-        declarations: [PushPipe, PushPipeTestComponent],
+        declarations: [PushPipeTestComponent],
+        imports: [PushPipe],
         providers: [{ provide: ErrorHandler, useClass: MockErrorHandler }],
       });
 

modules/component/src/let/let.directive.ts

@@ -104,6 +104,7 @@ export interface LetViewContext<PO> {
  * @publicApi
  */
 @Directive({
+  standalone: true,
   selector: '[ngrxLet]',
   providers: [RenderScheduler],
 })

modules/component/src/let/let.module.ts

@@ -1,8 +1,11 @@
 import { NgModule } from '@angular/core';
 import { LetDirective } from './let.directive';
 
+/**
+ * @deprecated This module is deprecated in favor of the standalone `LetDirective`.
+ */
 @NgModule({
-  declarations: [LetDirective],
+  imports: [LetDirective],
   exports: [LetDirective],
 })
 export class LetModule {}

modules/component/src/push/push.module.ts

@@ -1,8 +1,11 @@
 import { NgModule } from '@angular/core';
 import { PushPipe } from './push.pipe';
 
+/**
+ * @deprecated This module is deprecated in favor of the standalone `PushPipe`.
+ */
 @NgModule({
-  declarations: [PushPipe],
+  imports: [PushPipe],
   exports: [PushPipe],
 })
 export class PushModule {}

modules/component/src/push/push.pipe.ts

@@ -37,7 +37,11 @@ type PushPipeResult<PO> = PotentialObservableResult<PO, undefined>;
  *
  * @publicApi
  */
-@Pipe({ name: 'ngrxPush', pure: false })
+@Pipe({
+  standalone: true,
+  name: 'ngrxPush',
+  pure: false,
+})
 export class PushPipe implements PipeTransform, OnDestroy {
   private renderedValue: unknown;
   private readonly renderScheduler = createRenderScheduler();

projects/ngrx.io/content/guide/component/let.md

@@ -5,24 +5,32 @@ The `*ngrxLet` directive serves a convenient way of binding observables to a vie
 
 ## Usage
 
-The `*ngrxLet` directive is provided through the `LetModule`.
-To use it, add the `LetModule` to the `imports` of your standalone component or NgModule:
+The `*ngrxLet` directive is a standalone directive.
+To use it, add the `LetDirective` to the `imports` of your standalone component or NgModule:
 
 ```ts
 import { Component } from '@angular/core';
-import { LetModule } from '@ngrx/component';
+import { LetDirective } from '@ngrx/component';
 
 @Component({
   // ... other metadata
   standalone: true,
   imports: [
     // ... other imports
-    LetModule,
+    LetDirective,
   ],
 })
 export class MyStandaloneComponent {}
 ```
 
+<div class="alert is-critical">
+
+The `*ngrxLet` directive can be also used by importing the `LetModule`.
+However, the `LetModule` is deprecated in favor of the standalone `LetDirective`.
+See the [migration guide](guide/migration/v16#letmodule) for more information.
+
+</div>
+
 ## Comparison with `*ngIf` and `async`
 
 The current way of binding an observable to the view looks like this:

projects/ngrx.io/content/guide/component/push.md

@@ -6,24 +6,32 @@ running in zone-full as well as zone-less mode without any changes to the code.
 
 ## Usage
 
-The `ngrxPush` pipe is provided through the `PushModule`.
-To use it, add the `PushModule` to the `imports` of your standalone component or NgModule:
+The `ngrxPush` pipe is a standalone pipe.
+To use it, add the `PushPipe` to the `imports` of your standalone component or NgModule:
 
 ```ts
 import { Component } from '@angular/core';
-import { PushModule } from '@ngrx/component';
+import { PushPipe } from '@ngrx/component';
 
 @Component({
   // ... other metadata
   standalone: true,
   imports: [
     // ... other imports
-    PushModule,
+    PushPipe,
   ],
 })
 export class MyStandaloneComponent {}
 ```
 
+<div class="alert is-critical">
+
+The `ngrxPush` pipe can be also used by importing the `PushModule`.
+However, the `PushModule` is deprecated in favor of the standalone `PushPipe`.
+See the [migration guide](guide/migration/v16#pushmodule) for more information.
+
+</div>
+
 ## Comparison with `async` Pipe
 
 The current way of binding an observable to the view looks like this:

projects/ngrx.io/content/guide/migration/v16.md

@@ -154,7 +154,6 @@ import { createMockStore } from '@ngrx/store/testing';
 const mockStore = createMockStore();
 ```
 
-
 ### @ngrx/router-store
 
 #### Replace `getSelectors` with `getRouterSelectors`
@@ -184,3 +183,132 @@ const routerSelectors = getRouterSelectors();
 #### Replace `any` types with `unknown` type
 
 NgRx schematics do not use `any` types to define actions, these are replaced with the `unknown` type.
+
+
+## Deprecations
+
+### @ngrx/component
+
+#### LetModule
+
+`LetModule` is deprecated in favor of the standalone `LetDirective`. 
+
+BEFORE:
+
+```ts
+import { LetModule } from '@ngrx/component';
+
+@NgModule({
+  imports: [
+    // ... other imports
+    LetModule,
+  ],
+})
+export class MyFeatureModule {}
+```
+
+```ts
+import { Component } from '@angular/core';
+import { LetModule } from '@ngrx/component';
+
+@Component({
+  // ... other metadata
+  standalone: true,
+  imports: [
+    // ... other imports
+    LetModule,
+  ],
+})
+export class MyStandaloneComponent {}
+```
+
+AFTER:
+
+```ts
+import { LetDirective } from '@ngrx/component';
+
+@NgModule({
+  imports: [
+    // ... other imports
+    LetDirective,
+  ],
+})
+export class MyFeatureModule {}
+```
+
+```ts
+import { Component } from '@angular/core';
+import { LetDirective } from '@ngrx/component';
+
+@Component({
+  // ... other metadata
+  standalone: true,
+  imports: [
+    // ... other imports
+    LetDirective,
+  ],
+})
+export class MyStandaloneComponent {}
+```
+
+#### PushModule
+
+`PushModule` is deprecated in favor of the standalone `PushPipe`. 
+
+BEFORE:
+
+```ts
+import { PushModule } from '@ngrx/component';
+
+@NgModule({
+  imports: [
+    // ... other imports
+    PushModule,
+  ],
+})
+export class MyFeatureModule {}
+```
+
+```ts
+import { Component } from '@angular/core';
+import { PushModule } from '@ngrx/component';
+
+@Component({
+  // ... other metadata
+  standalone: true,
+  imports: [
+    // ... other imports
+    PushModule,
+  ],
+})
+export class MyStandaloneComponent {}
+```
+
+AFTER:
+
+```ts
+import { PushPipe } from '@ngrx/component';
+
+@NgModule({
+  imports: [
+    // ... other imports
+    PushPipe,
+  ],
+})
+export class MyFeatureModule {}
+```
+
+```ts
+import { Component } from '@angular/core';
+import { PushPipe } from '@ngrx/component';
+
+@Component({
+  // ... other metadata
+  standalone: true,
+  imports: [
+    // ... other imports
+    PushPipe,
+  ],
+})
+export class MyStandaloneComponent {}
+```