From e9515b553045be4d303512aeaf47c442452b1ccc Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Mon, 17 Jun 2024 15:42:19 +0200 Subject: [PATCH 1/2] docs: update angular.io references to angular.dev (#4398) --- projects/example-app/README.md | 4 ++-- projects/ngrx.io/content/guide/component-store/install.md | 2 +- projects/ngrx.io/content/guide/component/install.md | 2 +- projects/ngrx.io/content/guide/data/extension-points.md | 2 +- projects/ngrx.io/content/guide/data/install.md | 2 +- projects/ngrx.io/content/guide/data/limitations.md | 2 +- projects/ngrx.io/content/guide/effects/index.md | 4 ++-- projects/ngrx.io/content/guide/effects/install.md | 2 +- projects/ngrx.io/content/guide/entity/install.md | 2 +- projects/ngrx.io/content/guide/eslint-plugin/install.md | 2 +- projects/ngrx.io/content/guide/migration/v13.md | 2 +- projects/ngrx.io/content/guide/operators/install.md | 2 +- projects/ngrx.io/content/guide/router-store/install.md | 2 +- projects/ngrx.io/content/guide/schematics/index.md | 2 +- projects/ngrx.io/content/guide/schematics/install.md | 2 +- projects/ngrx.io/content/guide/signals/install.md | 2 +- projects/ngrx.io/content/guide/store-devtools/install.md | 2 +- projects/ngrx.io/content/guide/store/install.md | 2 +- projects/ngrx.io/content/guide/store/reducers.md | 6 ------ projects/ngrx.io/content/guide/store/why.md | 2 +- 20 files changed, 21 insertions(+), 27 deletions(-) diff --git a/projects/example-app/README.md b/projects/example-app/README.md index 77b21d9adf..5b7ada7704 100644 --- a/projects/example-app/README.md +++ b/projects/example-app/README.md @@ -5,7 +5,7 @@ Example application utilizing @ngrx libraries, showcasing common patterns and be This app is a book collection manager. The user can authenticate, use the Google Books API to search for books and add them to their collection. This application utilizes [@ngrx/store](https://ngrx.io/guide/store) to manage the state of the app and to cache requests made to the Google Books API; -[@ngrx/effects](https://ngrx.io/guide/effects) to isolate side effects; [@angular/router](https://angular.io/guide/router) to manage navigation between routes; [@angular/material](https://github.com/angular/material2) to provide design and styling. +[@ngrx/effects](https://ngrx.io/guide/effects) to isolate side effects; [@angular/router](https://angular.dev/guide/routing) to manage navigation between routes; [@angular/material](https://github.com/angular/material2) to provide design and styling. Built with [@angular/cli](https://github.com/angular/angular-cli) @@ -16,7 +16,7 @@ Built with [@angular/cli](https://github.com/angular/angular-cli) - [@ngrx/router-store](https://ngrx.io/guide/router-store) - Bindings to connect the Angular Router to @ngrx/store - [@ngrx/entity](https://ngrx.io/guide/entity) - Entity State adapter for managing record collections. - [@ngrx/store-devtools](https://ngrx.io/guide/store-devtools) - Instrumentation for @ngrx/store enabling time-travel debugging -- [@angular/router](https://angular.io/guide/router) - Angular Router +- [@angular/router](https://angular.dev/guide/routing) - Angular Router - [@angular/material](https://material.angular.io) - Angular Material - [jest](https://jestjs.io) - JavaScript test runner with easy setup, isolated browser testing and snapshot testing diff --git a/projects/ngrx.io/content/guide/component-store/install.md b/projects/ngrx.io/content/guide/component-store/install.md index 82d3e7cb86..6f140240e1 100644 --- a/projects/ngrx.io/content/guide/component-store/install.md +++ b/projects/ngrx.io/content/guide/component-store/install.md @@ -2,7 +2,7 @@ ## Installing with `ng add` -You can install the ComponentStore to your project with the following `ng add` command (details here): +You can install the ComponentStore to your project with the following `ng add` command (details here): ```sh ng add @ngrx/component-store@latest diff --git a/projects/ngrx.io/content/guide/component/install.md b/projects/ngrx.io/content/guide/component/install.md index 98d6554555..d84095b8f4 100644 --- a/projects/ngrx.io/content/guide/component/install.md +++ b/projects/ngrx.io/content/guide/component/install.md @@ -2,7 +2,7 @@ ## Installing with `ng add` -You can install the Component package to your project with the following `ng add` command (details here): +You can install the Component package to your project with the following `ng add` command (details here): ```sh ng add @ngrx/component@latest diff --git a/projects/ngrx.io/content/guide/data/extension-points.md b/projects/ngrx.io/content/guide/data/extension-points.md index 008c071002..e3895caa4d 100644 --- a/projects/ngrx.io/content/guide/data/extension-points.md +++ b/projects/ngrx.io/content/guide/data/extension-points.md @@ -277,4 +277,4 @@ There are no facilities for this within `NgRx Data` itself although that is a [limitation](guide/data/limitations#serialization) we might address in a future version. One option in the interim is to write such serialization functions and -inject them into the `HttpClient` pipeline with [`HttpClient` interceptors](https://angular.io/guide/http#intercepting-requests-and-responses). +inject them into the `HttpClient` pipeline with [`HttpClient` interceptors](https://angular.dev/guide/http/interceptors). diff --git a/projects/ngrx.io/content/guide/data/install.md b/projects/ngrx.io/content/guide/data/install.md index 739b8e4734..6924ab64ac 100644 --- a/projects/ngrx.io/content/guide/data/install.md +++ b/projects/ngrx.io/content/guide/data/install.md @@ -9,7 +9,7 @@ Changes to this package are limited to critical bug fixes. ## Installing with `ng add` -You can install the Data package to your project with the following `ng add` command (details here): +You can install the Data package to your project with the following `ng add` command (details here): ```sh ng add @ngrx/data@latest diff --git a/projects/ngrx.io/content/guide/data/limitations.md b/projects/ngrx.io/content/guide/data/limitations.md index 174c9ede32..dee28aa5a7 100644 --- a/projects/ngrx.io/content/guide/data/limitations.md +++ b/projects/ngrx.io/content/guide/data/limitations.md @@ -144,7 +144,7 @@ Perhaps the camelCased property names on the client-side entity are PascalCased Maybe a server-side property is spelled differently than on the client. Maybe the client entity should have some properties that don't belong on the server entity (or vice-versa). -Today you could transform the data in both directions with [`HttpClient` interceptors](https://angular.io/guide/http#intercepting-requests-and-responses). +Today you could transform the data in both directions with [`HttpClient` interceptors](https://angular.dev/guide/http/interceptors). But this seems like a problem that would be more easily and transparently addressed as a feature of `NgRx Data`. ## No request concurrency checking diff --git a/projects/ngrx.io/content/guide/effects/index.md b/projects/ngrx.io/content/guide/effects/index.md index 3bf1ec3dd9..83ff0ab51c 100644 --- a/projects/ngrx.io/content/guide/effects/index.md +++ b/projects/ngrx.io/content/guide/effects/index.md @@ -182,7 +182,7 @@ The `loadMovies$` effect returns a new observable in case an error occurs while Functional effects are also created by using the `createEffect` function. They provide the ability to create effects outside the effect classes. -To create a functional effect, add the `functional: true` flag to the effect config. Then, to inject services into the effect, use the [`inject` function](https://angular.io/api/core/inject). +To create a functional effect, add the `functional: true` flag to the effect config. Then, to inject services into the effect, use the [`inject` function](https://angular.dev/api/core/inject). import { inject } from '@angular/core'; @@ -223,7 +223,7 @@ export const displayErrorAlert = createEffect(
-It's recommended to inject all dependencies as effect function arguments for easier testing. However, it's also possible to inject dependencies in the effect function body. In that case, the [`inject` function](https://angular.io/api/core/inject) must be called within the synchronous context. +It's recommended to inject all dependencies as effect function arguments for easier testing. However, it's also possible to inject dependencies in the effect function body. In that case, the [`inject` function](https://angular.dev/api/core/inject) must be called within the synchronous context.
diff --git a/projects/ngrx.io/content/guide/effects/install.md b/projects/ngrx.io/content/guide/effects/install.md index dec96be203..030811d347 100644 --- a/projects/ngrx.io/content/guide/effects/install.md +++ b/projects/ngrx.io/content/guide/effects/install.md @@ -2,7 +2,7 @@ ## Installing with `ng add` -You can install the Effects to your project with the following `ng add` command (details here): +You can install the Effects to your project with the following `ng add` command (details here): ```sh ng add @ngrx/effects@latest diff --git a/projects/ngrx.io/content/guide/entity/install.md b/projects/ngrx.io/content/guide/entity/install.md index 852566dd0e..84426db84d 100644 --- a/projects/ngrx.io/content/guide/entity/install.md +++ b/projects/ngrx.io/content/guide/entity/install.md @@ -2,7 +2,7 @@ ## Installing with `ng add` -You can install the Entity package to your project with the following `ng add` command (details here): +You can install the Entity package to your project with the following `ng add` command (details here): ```sh ng add @ngrx/entity@latest diff --git a/projects/ngrx.io/content/guide/eslint-plugin/install.md b/projects/ngrx.io/content/guide/eslint-plugin/install.md index 25f8de778b..2047162746 100644 --- a/projects/ngrx.io/content/guide/eslint-plugin/install.md +++ b/projects/ngrx.io/content/guide/eslint-plugin/install.md @@ -2,7 +2,7 @@ ## Installing with `ng add` -You can install the ESLint plugin to your project with the following `ng add` command (details here): +You can install the ESLint plugin to your project with the following `ng add` command (details here): ```sh ng add @ngrx/eslint-plugin diff --git a/projects/ngrx.io/content/guide/migration/v13.md b/projects/ngrx.io/content/guide/migration/v13.md index a477879163..006ae60098 100644 --- a/projects/ngrx.io/content/guide/migration/v13.md +++ b/projects/ngrx.io/content/guide/migration/v13.md @@ -102,7 +102,7 @@ The `initialState` provided via the configuration object is now typed and needs Mock stores are not reset automagically after each test. To restore the previous behavior you add add your own reset logic in an `afterEach` hook. -Note that this only applicable when the Angular `TestBed` isn't teared down by Angular, for more info see the [ModuleTeardownOptions options](https://angular.io/api/core/testing/ModuleTeardownOptions). +Note that this only applicable when the Angular `TestBed` isn't teared down by Angular, for more info see the [ModuleTeardownOptions options](https://angular.dev/api/core/testing/ModuleTeardownOptions). When using Jasmine, reset the mock store after each test by adding the following to the `test.ts`: diff --git a/projects/ngrx.io/content/guide/operators/install.md b/projects/ngrx.io/content/guide/operators/install.md index 3715218660..67c787f937 100644 --- a/projects/ngrx.io/content/guide/operators/install.md +++ b/projects/ngrx.io/content/guide/operators/install.md @@ -2,7 +2,7 @@ ## Installing with `ng add` -You can install the `@ngrx/operators` to your project with the following `ng add` command (details here): +You can install the `@ngrx/operators` to your project with the following `ng add` command (details here): ```sh ng add @ngrx/operators@latest diff --git a/projects/ngrx.io/content/guide/router-store/install.md b/projects/ngrx.io/content/guide/router-store/install.md index 811c0559e4..a89fd1b7f9 100644 --- a/projects/ngrx.io/content/guide/router-store/install.md +++ b/projects/ngrx.io/content/guide/router-store/install.md @@ -2,7 +2,7 @@ ## Installing with `ng add` -You can install the Router Store to your project with the following `ng add` command (details here): +You can install the Router Store to your project with the following `ng add` command (details here): ```sh ng add @ngrx/router-store@latest diff --git a/projects/ngrx.io/content/guide/schematics/index.md b/projects/ngrx.io/content/guide/schematics/index.md index f34430d4a1..09b5fc82ca 100644 --- a/projects/ngrx.io/content/guide/schematics/index.md +++ b/projects/ngrx.io/content/guide/schematics/index.md @@ -2,7 +2,7 @@ Scaffolding library for Angular applications using NgRx libraries. -Schematics provides Angular CLI commands for generating files when building new NgRx feature areas and expanding existing ones. Built on top of [`Schematics`](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2), this tool integrates with the [`Angular CLI`](https://cli.angular.io/). +Schematics provides Angular CLI commands for generating files when building new NgRx feature areas and expanding existing ones. Built on top of [`Schematics`](https://angular.dev/tools/cli/schematics), this tool integrates with the [`Angular CLI`](https://angular.dev/tools/cli). ## Installation diff --git a/projects/ngrx.io/content/guide/schematics/install.md b/projects/ngrx.io/content/guide/schematics/install.md index 175f4f1fc9..fe05a06d13 100644 --- a/projects/ngrx.io/content/guide/schematics/install.md +++ b/projects/ngrx.io/content/guide/schematics/install.md @@ -2,7 +2,7 @@ ## Installing with `ng add` -You can make `@ngrx/schematics` the default collection for your application with the following `ng add` command (details here): +You can make `@ngrx/schematics` the default collection for your application with the following `ng add` command (details here): ```sh ng add @ngrx/schematics@latest diff --git a/projects/ngrx.io/content/guide/signals/install.md b/projects/ngrx.io/content/guide/signals/install.md index 902db1b61d..c37e3be7a9 100644 --- a/projects/ngrx.io/content/guide/signals/install.md +++ b/projects/ngrx.io/content/guide/signals/install.md @@ -2,7 +2,7 @@ ## Installing with `ng add` -You can install the `@ngrx/signals` to your project with the following `ng add` command (details here): +You can install the `@ngrx/signals` to your project with the following `ng add` command (details here): ```sh ng add @ngrx/signals@latest diff --git a/projects/ngrx.io/content/guide/store-devtools/install.md b/projects/ngrx.io/content/guide/store-devtools/install.md index 5163871d4f..c541c56720 100644 --- a/projects/ngrx.io/content/guide/store-devtools/install.md +++ b/projects/ngrx.io/content/guide/store-devtools/install.md @@ -2,7 +2,7 @@ ## Installing with `ng add` -You can install the Store Devtools to your project with the following `ng add` command (details here): +You can install the Store Devtools to your project with the following `ng add` command (details here): ```sh ng add @ngrx/store-devtools@latest diff --git a/projects/ngrx.io/content/guide/store/install.md b/projects/ngrx.io/content/guide/store/install.md index eccfb7f980..4f1a3c19a3 100644 --- a/projects/ngrx.io/content/guide/store/install.md +++ b/projects/ngrx.io/content/guide/store/install.md @@ -2,7 +2,7 @@ ## Installing with `ng add` -You can install the Store to your project with the following `ng add` command (details here): +You can install the Store to your project with the following `ng add` command (details here): ```sh ng add @ngrx/store@latest diff --git a/projects/ngrx.io/content/guide/store/reducers.md b/projects/ngrx.io/content/guide/store/reducers.md index 5166e373a9..185e24b3c4 100644 --- a/projects/ngrx.io/content/guide/store/reducers.md +++ b/projects/ngrx.io/content/guide/store/reducers.md @@ -79,12 +79,6 @@ export const scoreboardReducer = createReducer( -
- -**Note:** The exported `reducer` function is no longer required if you use the default Ivy AOT compiler (or JIT). It is only necessary with the View Engine AOT compiler as [function calls are not supported](https://angular.io/guide/aot-compiler#function-calls-are-not-supported) there. - -
- In the example above, the reducer is handling 4 actions: `[Scoreboard Page] Home Score`, `[Scoreboard Page] Away Score`, `[Scoreboard Page] Score Reset` and `[Scoreboard Page] Set Scores`. Each action is strongly-typed. Each action handles the state transition immutably. This means that the state transitions are not modifying the original state, but are returning a new state object using the spread operator. The spread syntax copies the properties from the current state into the object, creating a new reference. This ensures that a new state is produced with each change, preserving the purity of the change. This also promotes referential integrity, guaranteeing that the old reference was discarded when a state change occurred. diff --git a/projects/ngrx.io/content/guide/store/why.md b/projects/ngrx.io/content/guide/store/why.md index 28b16f8eb7..7e2890a1e2 100644 --- a/projects/ngrx.io/content/guide/store/why.md +++ b/projects/ngrx.io/content/guide/store/why.md @@ -31,7 +31,7 @@ Type safety is promoted throughout the architecture with reliance on the TypeScr ### Immutability and Performance -[Store](guide/store) is built on a single, immutable data structure which makes change detection a relatively straightforward task using the [`OnPush`](https://angular.io/api/core/ChangeDetectionStrategy#OnPush) strategy. NgRx Store also provides APIs for creating memoized selector functions that optimize retrieving data from your state. +[Store](guide/store) is built on a single, immutable data structure which makes change detection a relatively straightforward task using the [`OnPush`](https://angular.dev/api/core/ChangeDetectionStrategy#OnPush) strategy. NgRx Store also provides APIs for creating memoized selector functions that optimize retrieving data from your state. ### Encapsulation From f144f8616f9bbaf72a8862cd906e3f5e0a7a017a Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Mon, 17 Jun 2024 16:29:24 +0200 Subject: [PATCH 2/2] docs(eslint-plugin): update docs and include ESLint v9 details (#4401) --- .../content/guide/eslint-plugin/index.md | 74 +++++++++++++++---- 1 file changed, 61 insertions(+), 13 deletions(-) diff --git a/projects/ngrx.io/content/guide/eslint-plugin/index.md b/projects/ngrx.io/content/guide/eslint-plugin/index.md index 970a33dbf9..1d8ff5ba41 100644 --- a/projects/ngrx.io/content/guide/eslint-plugin/index.md +++ b/projects/ngrx.io/content/guide/eslint-plugin/index.md @@ -1,17 +1,19 @@ # Overview -Use [ESLint](https://eslint.org/) to follow the best practices and to avoid common pitfalls in your application. +You can use [ESLint](https://eslint.org/) to follow best practices and avoid common pitfalls in your application. -The NgRx ESLint Plugin is no different and promotes the key concepts to create a maintainable project. It consists of @ngrx/store, @ngrx/effects, and @ngrx/component-store rules and a handful of preconfigured configurations. +The NgRx ESLint Plugin is no different and promotes the key concepts to create maintainable projects. +It consists of [rules](#rules) that are grouped into predefined [configurations](#configurations) for each NgRx package to help you get started quickly. -The plugin comes with a number of rules that help address most popular NgRx malpractices. The rules are configurable so that you can choose the ones you want to follow, and which rules should give a linting error or warning. +By default, all rules have set the severity level to `error`. +Some rules also include a recommendation or an automatic fix using `ng lint --fix`. -Some rules also allow automatic fixes with `ng lint --fix`. +## Configuration and Usage -## Adding rules +### ESLint v8 -To use the a [rule](#rules), import the NgRx plugin via `plugins` or `extends`. -You can add a rule by adding the rule to the `rules` collection. +To use the NgRx ESLint Plugin with ESLint v8, add it to your ESLint file (e.g. `.eslintrc.json`). +Add the `@ngrx` plugin to the `plugins` section and add the rules you want to use within your project to the `rules` section. ```json { @@ -22,26 +24,72 @@ You can add a rule by adding the rule to the `rules` collection. } ``` -or +For rules that require type information, the ESLint configuration needs to provide the `parserOptions.project` property, otherwise the rule throws an error. ```json { - "extends": ["@ngrx/recommended"], + "plugins": ["@ngrx"], + "parserOptions": { + "project": "tsconfig.json" + }, "rules": { - "@ngrx/good-action-hygiene": "error" + "@ngrx/avoid-cyclic-effects": "error" + } +} +``` + +Instead of adding rules individually, you can use one of the [preconfigured configurations](#configurations) by adding it to the `extends` section. +This automatically includes all rules of the configuration. +To override a specific rule, add it to the `rules` section and adjust the severity level or the configuration. + +```json +{ + "extends": ["@ngrx/all"], + "rules": { + "@ngrx/good-action-hygiene": "warn" } } ``` -Instead of manually configuring the rules, there are also [preconfigured configurations](#configurations). To use a configuration, add it to `extends`: +Instead of including all NgRx rules, you can also use a specific configuration for a package. +This is useful if you only use a specific package, as it only includes the rules relevant to that package. ```json { - "extends": ["@ngrx/recommended-requiring-type-checking"], - "rules": {} + "extends": ["@ngrx/signals"] } ``` +### ESLint v9 + +To use the NgRx ESLint Plugin with ESLint v9, include the desired configurations within your ESLint configuration file (e.g. `eslint.config.js`). +Optionally override some rules via the `rules` property. + +Import the NgRx Plugin via `@ngrx/eslint-plugin/v9` and use one or more predefined [configurations](#configurations) by adding them to the `extends` array. + +```ts +const tseslint = require("typescript-eslint"); +const ngrx = require("@ngrx/eslint-plugin/v9"); + +module.exports = tseslint.config({ + files: ["**/*.ts"], + extends: [ + // 👇 Use all rules at once + ...ngrx.configs.all, + // 👇 Or only import the rules for a specific package + ...ngrx.configs.store, + ...ngrx.configs.effects, + ...ngrx.configs.componentStore, + ...ngrx.configs.operators, + ...ngrx.configs.signals, + ], + rules: { + // 👇 Configure specific rules + "@ngrx/with-state-no-arrays-at-root-level": "warn", + }, +}); +``` + ## Rules