From df0d4df729f54d570d0e1280170fac80bb473530 Mon Sep 17 00:00:00 2001 From: markostanimirovic Date: Wed, 8 Jun 2022 16:08:02 +0200 Subject: [PATCH 1/2] feat(component): deprecate ReactiveComponentModule --- .../src/reactive-component.module.ts | 5 ++ .../src/ngrx-push-migration/index.spec.ts | 60 +++++-------- .../src/ngrx-push-migration/index.ts | 32 +++---- .../ngrx.io/content/guide/component/let.md | 7 ++ .../ngrx.io/content/guide/component/push.md | 7 ++ .../ngrx.io/content/guide/migration/v14.md | 89 ++++++++++++++++--- 6 files changed, 131 insertions(+), 69 deletions(-) diff --git a/modules/component/src/reactive-component.module.ts b/modules/component/src/reactive-component.module.ts index 3ef405ca96..b1e846c4f0 100644 --- a/modules/component/src/reactive-component.module.ts +++ b/modules/component/src/reactive-component.module.ts @@ -2,6 +2,11 @@ import { NgModule } from '@angular/core'; import { LetModule } from './let/let.module'; import { PushModule } from './push/push.module'; +/** + * @deprecated `ReactiveComponentModule` is deprecated in favor of `LetModule` and `PushModule`. + * See the {@link https://ngrx.io/guide/migration/v14#reactivecomponentmodule migration guide} + * for more information. + */ @NgModule({ exports: [LetModule, PushModule], }) diff --git a/modules/schematics/src/ngrx-push-migration/index.spec.ts b/modules/schematics/src/ngrx-push-migration/index.spec.ts index 6b3ba8f409..178c7b1d74 100644 --- a/modules/schematics/src/ngrx-push-migration/index.spec.ts +++ b/modules/schematics/src/ngrx-push-migration/index.spec.ts @@ -76,8 +76,8 @@ describe('NgrxPush migration', () => { }); }); - describe('importReactiveComponentModule', () => { - it('should import ReactiveComponentModule when BrowserModule is imported', async () => { + describe('importPushModule', () => { + it('should import PushModule when BrowserModule is imported', async () => { appTree.create( './sut.module.ts', ` @@ -100,15 +100,11 @@ describe('NgrxPush migration', () => { .toPromise(); const actual = tree.readContent('./sut.module.ts'); - expect(actual).toMatch( - /imports: \[ BrowserModule, ReactiveComponentModule \],/ - ); - expect(actual).toMatch( - /import { ReactiveComponentModule } from '@ngrx\/component'/ - ); + expect(actual).toMatch(/imports: \[ BrowserModule, PushModule \],/); + expect(actual).toMatch(/import { PushModule } from '@ngrx\/component'/); }); - it('should import ReactiveComponentModule when CommonModule is imported', async () => { + it('should import PushModule when CommonModule is imported', async () => { appTree.create( './sut.module.ts', ` @@ -131,15 +127,11 @@ describe('NgrxPush migration', () => { .toPromise(); const actual = tree.readContent('./sut.module.ts'); - expect(actual).toMatch( - /imports: \[ CommonModule, ReactiveComponentModule \],/ - ); - expect(actual).toMatch( - /import { ReactiveComponentModule } from '@ngrx\/component'/ - ); + expect(actual).toMatch(/imports: \[ CommonModule, PushModule \],/); + expect(actual).toMatch(/import { PushModule } from '@ngrx\/component'/); }); - it("should not import ReactiveComponentModule when it doesn't need to", async () => { + it("should not import PushModule when it doesn't need to", async () => { appTree.create( './sut.module.ts', ` @@ -158,17 +150,15 @@ describe('NgrxPush migration', () => { .toPromise(); const actual = tree.readContent('./sut.module.ts'); + expect(actual).not.toMatch(/imports: \[ CommonModule, PushModule \],/); expect(actual).not.toMatch( - /imports: \[ CommonModule, ReactiveComponentModule \],/ - ); - expect(actual).not.toMatch( - /import { ReactiveComponentModule } from '@ngrx\/component'/ + /import { PushModule } from '@ngrx\/component'/ ); }); }); - describe('exportReactiveComponentModule', () => { - it('should export ReactiveComponentModule when BrowserModule is exported', async () => { + describe('exportPushModule', () => { + it('should export PushModule when BrowserModule is exported', async () => { appTree.create( './sut.module.ts', ` @@ -191,15 +181,11 @@ describe('NgrxPush migration', () => { .toPromise(); const actual = tree.readContent('./sut.module.ts'); - expect(actual).toMatch( - /exports: \[ BrowserModule, ReactiveComponentModule \],/ - ); - expect(actual).toMatch( - /import { ReactiveComponentModule } from '@ngrx\/component'/ - ); + expect(actual).toMatch(/exports: \[ BrowserModule, PushModule \],/); + expect(actual).toMatch(/import { PushModule } from '@ngrx\/component'/); }); - it('should export ReactiveComponentModule when CommonModule is exported', async () => { + it('should export PushModule when CommonModule is exported', async () => { appTree.create( './sut.module.ts', ` @@ -222,15 +208,11 @@ describe('NgrxPush migration', () => { .toPromise(); const actual = tree.readContent('./sut.module.ts'); - expect(actual).toMatch( - /exports: \[ CommonModule, ReactiveComponentModule \],/ - ); - expect(actual).toMatch( - /import { ReactiveComponentModule } from '@ngrx\/component'/ - ); + expect(actual).toMatch(/exports: \[ CommonModule, PushModule \],/); + expect(actual).toMatch(/import { PushModule } from '@ngrx\/component'/); }); - it("should not export ReactiveComponentModule when it doesn't need to", async () => { + it("should not export PushModule when it doesn't need to", async () => { appTree.create( './sut.module.ts', ` @@ -249,11 +231,9 @@ describe('NgrxPush migration', () => { .toPromise(); const actual = tree.readContent('./sut.module.ts'); + expect(actual).not.toMatch(/exports: \[ CommonModule, PushModule \],/); expect(actual).not.toMatch( - /exports: \[ CommonModule, ReactiveComponentModule \],/ - ); - expect(actual).not.toMatch( - /import { ReactiveComponentModule } from '@ngrx\/component'/ + /import { PushModule } from '@ngrx\/component'/ ); }); }); diff --git a/modules/schematics/src/ngrx-push-migration/index.ts b/modules/schematics/src/ngrx-push-migration/index.ts index e76edfd25e..441a0bcfb5 100644 --- a/modules/schematics/src/ngrx-push-migration/index.ts +++ b/modules/schematics/src/ngrx-push-migration/index.ts @@ -13,11 +13,11 @@ import { } from '../../schematics-core'; const ASYNC_REGEXP = /\| {0,}async/g; -const REACTIVE_MODULE = 'ReactiveComponentModule'; +const PUSH_MODULE = 'PushModule'; const COMPONENT_MODULE = '@ngrx/component'; -const reactiveModuleToFind = (node: ts.Node) => - ts.isIdentifier(node) && node.text === REACTIVE_MODULE; +const pushModuleToFind = (node: ts.Node) => + ts.isIdentifier(node) && node.text === PUSH_MODULE; const ngModulesToFind = (node: ts.Node) => ts.isIdentifier(node) && @@ -46,22 +46,22 @@ export function migrateToNgrxPush(): Rule { }); } -export function importReactiveComponentModule(): Rule { +export function importPushModule(): Rule { return (host: Tree) => { visitTSSourceFiles(host, (sourceFile) => { let hasCommonModuleOrBrowserModule = false; - let hasReactiveComponentModule = false; + let hasPushModule = false; visitNgModuleImports(sourceFile, (_, importNodes) => { hasCommonModuleOrBrowserModule = importNodes.some(ngModulesToFind); - hasReactiveComponentModule = importNodes.some(reactiveModuleToFind); + hasPushModule = importNodes.some(pushModuleToFind); }); - if (hasCommonModuleOrBrowserModule && !hasReactiveComponentModule) { + if (hasCommonModuleOrBrowserModule && !hasPushModule) { const changes: Change[] = addImportToModule( sourceFile, sourceFile.fileName, - REACTIVE_MODULE, + PUSH_MODULE, COMPONENT_MODULE ); commitChanges(host, sourceFile.fileName, changes); @@ -70,22 +70,22 @@ export function importReactiveComponentModule(): Rule { }; } -export function exportReactiveComponentModule(): Rule { +export function exportPushModule(): Rule { return (host: Tree) => { visitTSSourceFiles(host, (sourceFile) => { let hasCommonModuleOrBrowserModule = false; - let hasReactiveComponentModule = false; + let hasPushModule = false; visitNgModuleExports(sourceFile, (_, exportNodes) => { hasCommonModuleOrBrowserModule = exportNodes.some(ngModulesToFind); - hasReactiveComponentModule = exportNodes.some(reactiveModuleToFind); + hasPushModule = exportNodes.some(pushModuleToFind); }); - if (hasCommonModuleOrBrowserModule && !hasReactiveComponentModule) { + if (hasCommonModuleOrBrowserModule && !hasPushModule) { const changes: Change[] = addExportToModule( sourceFile, sourceFile.fileName, - REACTIVE_MODULE, + PUSH_MODULE, COMPONENT_MODULE ); commitChanges(host, sourceFile.fileName, changes); @@ -95,9 +95,5 @@ export function exportReactiveComponentModule(): Rule { } export default function (): Rule { - return chain([ - migrateToNgrxPush(), - importReactiveComponentModule(), - exportReactiveComponentModule(), - ]); + return chain([migrateToNgrxPush(), importPushModule(), exportPushModule()]); } diff --git a/projects/ngrx.io/content/guide/component/let.md b/projects/ngrx.io/content/guide/component/let.md index 17daf872b7..321bf8c58d 100644 --- a/projects/ngrx.io/content/guide/component/let.md +++ b/projects/ngrx.io/content/guide/component/let.md @@ -38,6 +38,13 @@ import { ReactiveComponentModule } from '@ngrx/component'; export class MyFeatureModule {} ``` +
+ +`ReactiveComponentModule` is deprecated in favor of `LetModule`. +See the [migration guide](https://ngrx.io/guide/migration/v14#reactivecomponentmodule) for more information. + +
+ ## Comparison with `*ngIf` and `async` The current way of binding an observable to the view looks like this: diff --git a/projects/ngrx.io/content/guide/component/push.md b/projects/ngrx.io/content/guide/component/push.md index 18e057f1e3..0fb36533b9 100644 --- a/projects/ngrx.io/content/guide/component/push.md +++ b/projects/ngrx.io/content/guide/component/push.md @@ -39,6 +39,13 @@ import { ReactiveComponentModule } from '@ngrx/component'; export class MyFeatureModule {} ``` +
+ +`ReactiveComponentModule` is deprecated in favor of `PushModule`. +See the [migration guide](https://ngrx.io/guide/migration/v14#reactivecomponentmodule) for more information. + +
+ ## Comparison with `async` Pipe The current way of binding an observable to the view looks like this: diff --git a/projects/ngrx.io/content/guide/migration/v14.md b/projects/ngrx.io/content/guide/migration/v14.md index 7f3e911f96..c4610a4aa2 100644 --- a/projects/ngrx.io/content/guide/migration/v14.md +++ b/projects/ngrx.io/content/guide/migration/v14.md @@ -68,7 +68,7 @@ AFTER: - `e` will be thrown error when `obs$` emits error event. - `e` will be `undefined` when `obs$` emits next/complete event. -#### add ability to pass non-observable values +#### Add ability to pass non-observable values 1. The context of `LetDirective` is strongly typed when `null` or `undefined` is passed as input. @@ -105,13 +105,13 @@ BEFORE: ```ts @Component({ -template: ` -

{{ n }}

-

{{ numbers | ngrxPush }}

-`, + template: ` +

{{ n }}

+

{{ numbers | ngrxPush }}

+ `, }) export class NumbersComponent { - numbers = [1, 2, 3]; + numbers = [1, 2, 3]; } ``` @@ -119,13 +119,13 @@ AFTER: ```ts @Component({ -template: ` -

{{ n }}

-

{{ numbers$ | ngrxPush }}

-`, + template: ` +

{{ n }}

+

{{ numbers$ | ngrxPush }}

+ `, }) export class NumbersComponent { - numbers$ = from([1, 2, 3]); + numbers$ = from([1, 2, 3]); } ``` @@ -139,3 +139,70 @@ When the schematics are installed, `@ngrx/schematics` is added to the `schematic
A migration is provided to add `@ngrx/schematics` to the `schematicCollections`.
+ +## Deprecations + +### @ngrx/component + +#### `ReactiveComponentModule` + +`ReactiveComponentModule` is deprecated in favor of `LetModule` and `PushModule`. + +BEFORE: + +```ts +import { ReactiveComponentModule } from '@ngrx/component'; + +@NgModule({ + imports: [ + // ... other imports + ReactiveComponentModule, + ], +}) +export class MyFeatureModule {} +``` + +AFTER: + +If the components declared in the `MyFeatureModule` use only the `*ngrxLet` directive: + +```ts +import { LetModule } from '@ngrx/component'; + +@NgModule({ + imports: [ + // ... other imports + LetModule, + ], +}) +export class MyFeatureModule {} +``` + +If the components declared in the `MyFeatureModule` use only the `ngrxPush` pipe: + +```ts +import { PushModule } from '@ngrx/component'; + +@NgModule({ + imports: [ + // ... other imports + PushModule, + ], +}) +export class MyFeatureModule {} +``` + +If the components declared in the `MyFeatureModule` use both the `*ngrxLet` directive and the `ngrxPush` pipe: + +```ts +import { LetModule, PushModule } from '@ngrx/component'; + +@NgModule({ + imports: [ + // ... other imports + LetModule, + PushModule, + ], +}) +export class MyFeatureModule {} +``` From e902ad4f56572415ff97408ad7431e6cafcc02b0 Mon Sep 17 00:00:00 2001 From: markostanimirovic Date: Wed, 8 Jun 2022 16:54:39 +0200 Subject: [PATCH 2/2] chore: replace absolute links --- projects/ngrx.io/content/guide/component/let.md | 2 +- projects/ngrx.io/content/guide/component/push.md | 2 +- projects/ngrx.io/content/guide/migration/v14.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/ngrx.io/content/guide/component/let.md b/projects/ngrx.io/content/guide/component/let.md index 321bf8c58d..b433ee2003 100644 --- a/projects/ngrx.io/content/guide/component/let.md +++ b/projects/ngrx.io/content/guide/component/let.md @@ -41,7 +41,7 @@ export class MyFeatureModule {}
`ReactiveComponentModule` is deprecated in favor of `LetModule`. -See the [migration guide](https://ngrx.io/guide/migration/v14#reactivecomponentmodule) for more information. +See the [migration guide](guide/migration/v14#reactivecomponentmodule) for more information.
diff --git a/projects/ngrx.io/content/guide/component/push.md b/projects/ngrx.io/content/guide/component/push.md index 0fb36533b9..d9ceb3939c 100644 --- a/projects/ngrx.io/content/guide/component/push.md +++ b/projects/ngrx.io/content/guide/component/push.md @@ -42,7 +42,7 @@ export class MyFeatureModule {}
`ReactiveComponentModule` is deprecated in favor of `PushModule`. -See the [migration guide](https://ngrx.io/guide/migration/v14#reactivecomponentmodule) for more information. +See the [migration guide](guide/migration/v14#reactivecomponentmodule) for more information.
diff --git a/projects/ngrx.io/content/guide/migration/v14.md b/projects/ngrx.io/content/guide/migration/v14.md index c4610a4aa2..2c090e909f 100644 --- a/projects/ngrx.io/content/guide/migration/v14.md +++ b/projects/ngrx.io/content/guide/migration/v14.md @@ -144,7 +144,7 @@ When the schematics are installed, `@ngrx/schematics` is added to the `schematic ### @ngrx/component -#### `ReactiveComponentModule` +#### ReactiveComponentModule `ReactiveComponentModule` is deprecated in favor of `LetModule` and `PushModule`.