From f358fb62cf8e4cf419a263ab98b8fae108050402 Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Sat, 5 Nov 2022 18:46:38 +0000 Subject: [PATCH 1/2] docs: few tweaks to the migration guide --- .../ngrx.io/content/guide/migration/v15.md | 86 ++++++------------- 1 file changed, 24 insertions(+), 62 deletions(-) diff --git a/projects/ngrx.io/content/guide/migration/v15.md b/projects/ngrx.io/content/guide/migration/v15.md index eca4bb4cfd..114ea28608 100644 --- a/projects/ngrx.io/content/guide/migration/v15.md +++ b/projects/ngrx.io/content/guide/migration/v15.md @@ -23,11 +23,14 @@ Version 15 has the minimum version requirements: ### @ngrx/store +#### Strict Selector Projector + The projector function on the selector is type-safe by default. +The projector function also has become strict for selectors with props. BEFORE: -The projector is not type-safe by default, allowing for potential mismatch types in the projector function. +The projector is not type-safe, allowing for potential mismatch types in the projector function. ```ts const mySelector = createSelector( @@ -41,7 +44,7 @@ mySelector.projector() // <- type is projector(...args: any[]): number AFTER: -The projector is strict by default, but can be bypassed with an `any` generic parameter. +The projector is strict by default, but can be bypassed with an `any` type assertion to specify a less specific type. ```ts const mySelector = createSelector( @@ -65,95 +68,53 @@ const mySelector = createSelector( (mySelector.projector as any)() ``` -The projector method has become strict for selectors with props - -BEFORE: - -You could pass any arguments to the projector method - -```ts -const selector = createSelector( - selectString, // returning a string - selectNumber, // returning a number - (s, n, prefix: string) => { - return prefix + s.repeat(n); - } -) - -// you could pass any argument -selector.projector(1, 'a', true); -``` - -AFTER: - -```ts -const selector = createSelector( - selectString, // returning a string - selectNumber, // returning a number - (s, n, prefix: string) => { - return prefix + s.repeat(n); - } -) +### @ngrx/effects -// this throws -selector.projector(1, 'a', true); -// this does not throw because the arguments have the correct type -selector.projector(1, 'a', 'prefix'); -``` +#### Removal of @Effect -### @ngrx/effects +The `@Effect` decorator is removed in favor of [`createEffect`](https://ngrx.io/api/effects/createEffect). +This change also means that the ESLint rules @ngrx/no-effect-decorator-and-creator and @ngrx/no-effect-decorator are removed. -The @Effect decorator is removed +> A migration was added (in the v13 release) to upgrade existing codebases to the `createEffect` function. BEFORE: -Defining an effect is done with @Effect +An effect is defined with the `@Effect` decorator. ```ts @Effect() data$ = this.actions$.pipe(); ``` -A migration was added in the v13 release to upgrade existing codebases to the `createEffect` function. - AFTER: -Defining an effect is done with createEffect +You need to define an effect with `createEffect`. ```ts data$ = createEffect(() => this.actions$.pipe()); ``` -The signature of `provideEffects` is changed to expect a -spreaded array of effects. +### @ngrx/router-store -BEFORE: +#### Title -`provideEffects` expected the effects to be passed as an array. +BREAKING CHANGE: -```ts -// single effect -provideEffects([MyEffect]) +The property `title: string | undefined` is added to the `MinimalActivatedRouteSnapshot` interface when a title added to the route config. -// multiple effects -provideEffects([MyEffect, MySecondEffect]) -```ts +BEFORE: -AFTER: +The `MinimalActivatedRouteSnapshot` interface doesn't contain the `title` property. -`provideEffects` expects the effects as a spreaded array as argument. +AFTER: -```ts -// single effect -provideEffects(MyEffect) +The `MinimalActivatedRouteSnapshot` interface contains the required `title` property. -// multiple effects -provideEffects(MyEffect, MySecondEffect) -``` +### @ngrx/component -## @ngrx/component +#### Removal of ReactiveComponentModule - `ReactiveComponentModule` is removed in favor of `LetModule` and `PushModule`. +The `ReactiveComponentModule` is removed in favor of [`LetModule`](https://ngrx.io/api/component/LetModule) and [`PushModule`](https://ngrx.io/api/component/PushModule). BEFORE: @@ -182,3 +143,4 @@ import { LetModule, PushModule } from '@ngrx/component'; ], }) export class MyFeatureModule {} +``` From fd74f510cc62709b31191d0987c061cef599f853 Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Sun, 6 Nov 2022 13:33:20 +0100 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: Brandon --- projects/ngrx.io/content/guide/migration/v15.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/ngrx.io/content/guide/migration/v15.md b/projects/ngrx.io/content/guide/migration/v15.md index 114ea28608..c6c554a8a5 100644 --- a/projects/ngrx.io/content/guide/migration/v15.md +++ b/projects/ngrx.io/content/guide/migration/v15.md @@ -72,7 +72,7 @@ const mySelector = createSelector( #### Removal of @Effect -The `@Effect` decorator is removed in favor of [`createEffect`](https://ngrx.io/api/effects/createEffect). +The `@Effect` decorator is removed in favor of [`createEffect`](api/effects/createEffect). This change also means that the ESLint rules @ngrx/no-effect-decorator-and-creator and @ngrx/no-effect-decorator are removed. > A migration was added (in the v13 release) to upgrade existing codebases to the `createEffect` function. @@ -114,7 +114,7 @@ The `MinimalActivatedRouteSnapshot` interface contains the required `title` prop #### Removal of ReactiveComponentModule -The `ReactiveComponentModule` is removed in favor of [`LetModule`](https://ngrx.io/api/component/LetModule) and [`PushModule`](https://ngrx.io/api/component/PushModule). +The `ReactiveComponentModule` is removed in favor of [`LetModule`](/api/component/LetModule) and [`PushModule`](/api/component/PushModule). BEFORE: