34d18af5 docs(store): recommend using NgRx Signals instead of ComponentStore (#4640)

Author: web-flow

commit_message

@@ -1 +1 @@
-5e98142c test(signals): migrate signals testing suite from Jest to Vitest (#4631)
+34d18af5 docs(store): recommend using NgRx Signals instead of ComponentStore (#4640)

generated/docs/app/search-data.json

@@ -1,5 +1,5 @@
 {
   "id": "guide/component-store",
   "title": "@ngrx/component-store",
-  "contents": "\n\n\n  <div class=\"github-links\">\n    <a href=\"https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/guide/component-store/index.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n  </div>\n\n\n<div class=\"content\">\n<div class=\"alert is-helpful\">\n<p><strong><a href=\"/guide/signals\"><b>NgRx Signals</b></a> is the new default.</strong></p>\n<p>The NgRx team recommends using the <code>@ngrx/signals</code> library for local state management in Angular.\nWhile ComponentStore remains supported, we encourage using <code>@ngrx/signals</code> for new projects and considering migration for existing ones.</p>\n</div>\n<h1 id=\"ngrxcomponent-store\">@ngrx/component-store<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#ngrxcomponent-store\"><i class=\"material-icons\">link</i></a></h1>\n<p>ComponentStore is a stand-alone library that helps to manage local/component state. It's an alternative to reactive push-based \"Service with a Subject\" approach.</p>\n<h2 id=\"key-concepts\">Key Concepts<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#key-concepts\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li>Local state has to be initialized, but it can be done lazily.</li>\n<li>Local state is typically tied to the life-cycle of a particular component and is cleaned up when that component is destroyed.</li>\n<li>Users of ComponentStore can update the state through <code>setState</code> or <code>updater</code>, either imperatively or by providing an Observable.</li>\n<li>Users of ComponentStore can read the state through <code><a href=\"api/store/select\" class=\"code-anchor\">select</a></code> or a top-level <code><a href=\"api/component-store/ComponentStore#state$\" class=\"code-anchor\">state$</a></code>. Selectors are very performant.</li>\n<li>Users of ComponentStore may start side-effects with <code><a href=\"api/effects/EffectNotification#effect\" class=\"code-anchor\">effect</a></code>, both sync and async, and feed the data both imperatively or reactively.</li>\n</ul>\n<p>The details about <a href=\"guide/component-store/initialization\">initialization</a>, <a href=\"guide/component-store/write\">writing</a> and <a href=\"guide/component-store/read\">reading</a> from state,\nand <a href=\"guide/component-store/effect\">side-effects</a> management can be found in the corresponding sections of the Architecture.</p>\n<h2 id=\"installation\">Installation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#installation\"><i class=\"material-icons\">link</i></a></h2>\n<p>Detailed installation instructions can be found on the <a href=\"guide/component-store/install\">Installation</a> page.</p>\n<h2 id=\"ngrxstore-or-ngrxcomponent-store\">@ngrx/store or @ngrx/component-store?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#ngrxstore-or-ngrxcomponent-store\"><i class=\"material-icons\">link</i></a></h2>\n<p>The Global Store and Component Store are designed to solve different problems and can be used independently from each other. The detailed comparison can\nbe found at <a href=\"guide/component-store/comparison\">Store vs ComponentStore</a> section.</p>\n\n</div>\n\n<!-- links to this doc:\n - docs\n - guide/store\n - guide/store/why\n-->\n<!-- links from this doc:\n - /guide/signals\n - api/component-store/ComponentStore#state$\n - api/effects/EffectNotification#effect\n - api/store/select\n - guide/component-store#installation\n - guide/component-store#key-concepts\n - guide/component-store#ngrxcomponent-store\n - guide/component-store#ngrxstore-or-ngrxcomponent-store\n - guide/component-store/comparison\n - guide/component-store/effect\n - guide/component-store/initialization\n - guide/component-store/install\n - guide/component-store/read\n - guide/component-store/write\n - https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/guide/component-store/index.md?message=docs%3A%20describe%20your%20change...\n-->"
+  "contents": "\n\n\n  <div class=\"github-links\">\n    <a href=\"https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/guide/component-store/index.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n  </div>\n\n\n<div class=\"content\">\n<div class=\"alert is-helpful\">\n<p><strong><a href=\"/guide/signals\"><b>NgRx Signals</b></a> is the new default.</strong></p>\n<p>The NgRx team recommends using the <code>@ngrx/signals</code> library for local state management in Angular.\nWhile ComponentStore remains supported, we encourage using <code>@ngrx/signals</code> for new projects and considering migration for existing ones.</p>\n</div>\n<h1 id=\"ngrxcomponent-store\">@ngrx/component-store<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#ngrxcomponent-store\"><i class=\"material-icons\">link</i></a></h1>\n<p>ComponentStore is a stand-alone library that helps to manage local/component state. It's an alternative to reactive push-based \"Service with a Subject\" approach.</p>\n<h2 id=\"key-concepts\">Key Concepts<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#key-concepts\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li>Local state has to be initialized, but it can be done lazily.</li>\n<li>Local state is typically tied to the life-cycle of a particular component and is cleaned up when that component is destroyed.</li>\n<li>Users of ComponentStore can update the state through <code>setState</code> or <code>updater</code>, either imperatively or by providing an Observable.</li>\n<li>Users of ComponentStore can read the state through <code><a href=\"api/store/select\" class=\"code-anchor\">select</a></code> or a top-level <code><a href=\"api/component-store/ComponentStore#state$\" class=\"code-anchor\">state$</a></code>. Selectors are very performant.</li>\n<li>Users of ComponentStore may start side-effects with <code><a href=\"api/effects/EffectNotification#effect\" class=\"code-anchor\">effect</a></code>, both sync and async, and feed the data both imperatively or reactively.</li>\n</ul>\n<p>The details about <a href=\"guide/component-store/initialization\">initialization</a>, <a href=\"guide/component-store/write\">writing</a> and <a href=\"guide/component-store/read\">reading</a> from state,\nand <a href=\"guide/component-store/effect\">side-effects</a> management can be found in the corresponding sections of the Architecture.</p>\n<h2 id=\"installation\">Installation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#installation\"><i class=\"material-icons\">link</i></a></h2>\n<p>Detailed installation instructions can be found on the <a href=\"guide/component-store/install\">Installation</a> page.</p>\n<h2 id=\"ngrxstore-or-ngrxcomponent-store\">@ngrx/store or @ngrx/component-store?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#ngrxstore-or-ngrxcomponent-store\"><i class=\"material-icons\">link</i></a></h2>\n<p>The Global Store and Component Store are designed to solve different problems and can be used independently from each other. The detailed comparison can\nbe found at <a href=\"guide/component-store/comparison\">Store vs ComponentStore</a> section.</p>\n\n</div>\n\n<!-- links to this doc:\n - docs\n-->\n<!-- links from this doc:\n - /guide/signals\n - api/component-store/ComponentStore#state$\n - api/effects/EffectNotification#effect\n - api/store/select\n - guide/component-store#installation\n - guide/component-store#key-concepts\n - guide/component-store#ngrxcomponent-store\n - guide/component-store#ngrxstore-or-ngrxcomponent-store\n - guide/component-store/comparison\n - guide/component-store/effect\n - guide/component-store/initialization\n - guide/component-store/install\n - guide/component-store/read\n - guide/component-store/write\n - https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/guide/component-store/index.md?message=docs%3A%20describe%20your%20change...\n-->"
 }

generated/docs/guide/component-store.json

@@ -1,5 +1,5 @@
 {
   "id": "guide/signals",
   "title": "@ngrx/signals",
-  "contents": "\n\n\n  <div class=\"github-links\">\n    <a href=\"https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/guide/signals/index.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n  </div>\n\n\n<div class=\"content\">\n<h1 id=\"ngrxsignals\">@ngrx/signals<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/signals#ngrxsignals\"><i class=\"material-icons\">link</i></a></h1>\n<p>NgRx Signals is a standalone library that provides a reactive state management solution and a set of utilities for Angular Signals.</p>\n<h2 id=\"key-principles\">Key Principles<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/signals#key-principles\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li><strong>Simple and Intuitive:</strong> Designed with ease of use in mind, NgRx Signals provides a straightforward and intuitive API for developers to efficiently work with Angular Signals.</li>\n<li><strong>Lightweight and Performant:</strong> Keep your application size optimal with a lightweight library that adds minimal overhead to your projects and performs efficiently.</li>\n<li><strong>Declarative:</strong> NgRx Signals is built around the concept of declarative programming, ensuring clean and concise code.</li>\n<li><strong>Modular, Extensible, and Scalable:</strong> Modularity and extensibility are the guiding principles of this library. NgRx Signals enables the creation of independent building blocks that can be easily combined for flexible and scalable implementations.</li>\n<li><strong>Opinionated, but Flexible:</strong> Strike a balance between flexibility and opinionation, offering customization where needed while providing thoughtful conventions for a smooth development experience.</li>\n<li><strong>Type-safe:</strong> NgRx Signals is designed with a strong focus on type safety, ensuring the prevention of errors and misuse at compile time.</li>\n</ul>\n<h2 id=\"installation\">Installation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/signals#installation\"><i class=\"material-icons\">link</i></a></h2>\n<p>Detailed installation instructions can be found on the <a href=\"guide/signals/install\">Installation</a> page.</p>\n<h2 id=\"main-features\">Main Features<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/signals#main-features\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li><a href=\"guide/signals/signal-store\">SignalStore</a>: A fully-featured state management solution that provides native support for Angular Signals and offers a robust way to manage application state.</li>\n<li><a href=\"guide/signals/signal-state\">SignalState</a>: A lightweight utility for managing signal-based state in Angular components and services in a concise and minimalistic manner.</li>\n<li><a href=\"guide/signals/rxjs-integration\">RxJS Integration</a>: A plugin for opt-in integration with RxJS, enabling easier handling of asynchronous side effects.</li>\n<li><a href=\"guide/signals/signal-store/entity-management\">Entity Management</a>: A plugin for manipulating and querying entity collections in a simple and performant way.</li>\n</ul>\n\n</div>\n\n<!-- links to this doc:\n - docs\n-->\n<!-- links from this doc:\n - guide/signals#installation\n - guide/signals#key-principles\n - guide/signals#main-features\n - guide/signals#ngrxsignals\n - guide/signals/install\n - guide/signals/rxjs-integration\n - guide/signals/signal-state\n - guide/signals/signal-store\n - guide/signals/signal-store/entity-management\n - https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/guide/signals/index.md?message=docs%3A%20describe%20your%20change...\n-->"
+  "contents": "\n\n\n  <div class=\"github-links\">\n    <a href=\"https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/guide/signals/index.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n  </div>\n\n\n<div class=\"content\">\n<h1 id=\"ngrxsignals\">@ngrx/signals<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/signals#ngrxsignals\"><i class=\"material-icons\">link</i></a></h1>\n<p>NgRx Signals is a standalone library that provides a reactive state management solution and a set of utilities for Angular Signals.</p>\n<h2 id=\"key-principles\">Key Principles<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/signals#key-principles\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li><strong>Simple and Intuitive:</strong> Designed with ease of use in mind, NgRx Signals provides a straightforward and intuitive API for developers to efficiently work with Angular Signals.</li>\n<li><strong>Lightweight and Performant:</strong> Keep your application size optimal with a lightweight library that adds minimal overhead to your projects and performs efficiently.</li>\n<li><strong>Declarative:</strong> NgRx Signals is built around the concept of declarative programming, ensuring clean and concise code.</li>\n<li><strong>Modular, Extensible, and Scalable:</strong> Modularity and extensibility are the guiding principles of this library. NgRx Signals enables the creation of independent building blocks that can be easily combined for flexible and scalable implementations.</li>\n<li><strong>Opinionated, but Flexible:</strong> Strike a balance between flexibility and opinionation, offering customization where needed while providing thoughtful conventions for a smooth development experience.</li>\n<li><strong>Type-safe:</strong> NgRx Signals is designed with a strong focus on type safety, ensuring the prevention of errors and misuse at compile time.</li>\n</ul>\n<h2 id=\"installation\">Installation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/signals#installation\"><i class=\"material-icons\">link</i></a></h2>\n<p>Detailed installation instructions can be found on the <a href=\"guide/signals/install\">Installation</a> page.</p>\n<h2 id=\"main-features\">Main Features<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/signals#main-features\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li><a href=\"guide/signals/signal-store\">SignalStore</a>: A fully-featured state management solution that provides native support for Angular Signals and offers a robust way to manage application state.</li>\n<li><a href=\"guide/signals/signal-state\">SignalState</a>: A lightweight utility for managing signal-based state in Angular components and services in a concise and minimalistic manner.</li>\n<li><a href=\"guide/signals/rxjs-integration\">RxJS Integration</a>: A plugin for opt-in integration with RxJS, enabling easier handling of asynchronous side effects.</li>\n<li><a href=\"guide/signals/signal-store/entity-management\">Entity Management</a>: A plugin for manipulating and querying entity collections in a simple and performant way.</li>\n</ul>\n\n</div>\n\n<!-- links to this doc:\n - docs\n - guide/store\n - guide/store/why\n-->\n<!-- links from this doc:\n - guide/signals#installation\n - guide/signals#key-principles\n - guide/signals#main-features\n - guide/signals#ngrxsignals\n - guide/signals/install\n - guide/signals/rxjs-integration\n - guide/signals/signal-state\n - guide/signals/signal-store\n - guide/signals/signal-store/entity-management\n - https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/guide/signals/index.md?message=docs%3A%20describe%20your%20change...\n-->"
 }