Skip to content

Commit

Permalink
Merge branch 'main' into fix/migrations/schematics-18
Browse files Browse the repository at this point in the history
  • Loading branch information
brandonroberts authored Jun 18, 2024
2 parents e4d4155 + f144f86 commit 5c211d6
Show file tree
Hide file tree
Showing 21 changed files with 82 additions and 40 deletions.
4 changes: 2 additions & 2 deletions projects/example-app/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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

Expand Down
2 changes: 1 addition & 1 deletion projects/ngrx.io/content/guide/component-store/install.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Installing with `ng add`

You can install the ComponentStore to your project with the following `ng add` command <a href="https://angular.io/cli/add" target="_blank">(details here)</a>:
You can install the ComponentStore to your project with the following `ng add` command <a href="https://angular.dev/cli/add" target="_blank">(details here)</a>:

```sh
ng add @ngrx/component-store@latest
Expand Down
2 changes: 1 addition & 1 deletion projects/ngrx.io/content/guide/component/install.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Installing with `ng add`

You can install the Component package to your project with the following `ng add` command <a href="https://angular.io/cli/add" target="_blank">(details here)</a>:
You can install the Component package to your project with the following `ng add` command <a href="https://angular.dev/cli/add" target="_blank">(details here)</a>:

```sh
ng add @ngrx/component@latest
Expand Down
2 changes: 1 addition & 1 deletion projects/ngrx.io/content/guide/data/extension-points.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
2 changes: 1 addition & 1 deletion projects/ngrx.io/content/guide/data/install.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 <a href="https://angular.io/cli/add" target="_blank">(details here)</a>:
You can install the Data package to your project with the following `ng add` command <a href="https://angular.dev/cli/add" target="_blank">(details here)</a>:

```sh
ng add @ngrx/data@latest
Expand Down
2 changes: 1 addition & 1 deletion projects/ngrx.io/content/guide/data/limitations.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions projects/ngrx.io/content/guide/effects/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).

<code-example header="actors.effects.ts">
import { inject } from '@angular/core';
Expand Down Expand Up @@ -223,7 +223,7 @@ export const displayErrorAlert = createEffect(

<div class="alert is-important">

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.

</div>

Expand Down
2 changes: 1 addition & 1 deletion projects/ngrx.io/content/guide/effects/install.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Installing with `ng add`

You can install the Effects to your project with the following `ng add` command <a href="https://angular.io/cli/add" target="_blank">(details here)</a>:
You can install the Effects to your project with the following `ng add` command <a href="https://angular.dev/cli/add" target="_blank">(details here)</a>:

```sh
ng add @ngrx/effects@latest
Expand Down
2 changes: 1 addition & 1 deletion projects/ngrx.io/content/guide/entity/install.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Installing with `ng add`

You can install the Entity package to your project with the following `ng add` command <a href="https://angular.io/cli/add" target="_blank">(details here)</a>:
You can install the Entity package to your project with the following `ng add` command <a href="https://angular.dev/cli/add" target="_blank">(details here)</a>:

```sh
ng add @ngrx/entity@latest
Expand Down
74 changes: 61 additions & 13 deletions projects/ngrx.io/content/guide/eslint-plugin/index.md
Original file line number Diff line number Diff line change
@@ -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
{
Expand All @@ -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

<!-- DO NOT EDIT, this table is automatically generated-->
Expand Down
2 changes: 1 addition & 1 deletion projects/ngrx.io/content/guide/eslint-plugin/install.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Installing with `ng add`

You can install the ESLint plugin to your project with the following `ng add` command <a href="https://angular.io/cli/add" target="_blank">(details here)</a>:
You can install the ESLint plugin to your project with the following `ng add` command <a href="https://angular.dev/cli/add" target="_blank">(details here)</a>:

```sh
ng add @ngrx/eslint-plugin
Expand Down
2 changes: 1 addition & 1 deletion projects/ngrx.io/content/guide/migration/v13.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`:

Expand Down
2 changes: 1 addition & 1 deletion projects/ngrx.io/content/guide/operators/install.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Installing with `ng add`

You can install the `@ngrx/operators` to your project with the following `ng add` command <a href="https://angular.io/cli/add" target="_blank">(details here)</a>:
You can install the `@ngrx/operators` to your project with the following `ng add` command <a href="https://angular.dev/cli/add" target="_blank">(details here)</a>:

```sh
ng add @ngrx/operators@latest
Expand Down
2 changes: 1 addition & 1 deletion projects/ngrx.io/content/guide/router-store/install.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Installing with `ng add`

You can install the Router Store to your project with the following `ng add` command <a href="https://angular.io/cli/add" target="_blank">(details here)</a>:
You can install the Router Store to your project with the following `ng add` command <a href="https://angular.dev/cli/add" target="_blank">(details here)</a>:

```sh
ng add @ngrx/router-store@latest
Expand Down
2 changes: 1 addition & 1 deletion projects/ngrx.io/content/guide/schematics/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion projects/ngrx.io/content/guide/schematics/install.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 <a href="https://angular.io/cli/add" target="_blank">(details here)</a>:
You can make `@ngrx/schematics` the default collection for your application with the following `ng add` command <a href="https://angular.dev/cli/add" target="_blank">(details here)</a>:

```sh
ng add @ngrx/schematics@latest
Expand Down
2 changes: 1 addition & 1 deletion projects/ngrx.io/content/guide/signals/install.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Installing with `ng add`

You can install the `@ngrx/signals` to your project with the following `ng add` command <a href="https://angular.io/cli/add" target="_blank">(details here)</a>:
You can install the `@ngrx/signals` to your project with the following `ng add` command <a href="https://angular.dev/cli/add" target="_blank">(details here)</a>:

```sh
ng add @ngrx/signals@latest
Expand Down
2 changes: 1 addition & 1 deletion projects/ngrx.io/content/guide/store-devtools/install.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Installing with `ng add`

You can install the Store Devtools to your project with the following `ng add` command <a href="https://angular.io/cli/add" target="_blank">(details here)</a>:
You can install the Store Devtools to your project with the following `ng add` command <a href="https://angular.dev/cli/add" target="_blank">(details here)</a>:

```sh
ng add @ngrx/store-devtools@latest
Expand Down
2 changes: 1 addition & 1 deletion projects/ngrx.io/content/guide/store/install.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Installing with `ng add`

You can install the Store to your project with the following `ng add` command <a href="https://angular.io/cli/add" target="_blank">(details here)</a>:
You can install the Store to your project with the following `ng add` command <a href="https://angular.dev/cli/add" target="_blank">(details here)</a>:

```sh
ng add @ngrx/store@latest
Expand Down
6 changes: 0 additions & 6 deletions projects/ngrx.io/content/guide/store/reducers.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,12 +79,6 @@ export const scoreboardReducer = createReducer(

</code-example>

<div class="alert is-important">

**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.

</div>

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.


Expand Down
2 changes: 1 addition & 1 deletion projects/ngrx.io/content/guide/store/why.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down

0 comments on commit 5c211d6

Please sign in to comment.