From 067be79244a831c54e63a76569791cc25fbe5306 Mon Sep 17 00:00:00 2001
From: marcindz88 <marcindz88@gmail.com>
Date: Sat, 14 Sep 2024 15:17:24 +0200
Subject: [PATCH 1/2] feat: withDevTools disabled in prod, and tree-shaking
 docs

---
 README.md                                  | 46 ++++++++++++++++++++++
 libs/ngrx-toolkit/src/index.ts             |  1 +
 libs/ngrx-toolkit/src/lib/with-devtools.ts |  5 +++
 3 files changed, 52 insertions(+)

diff --git a/README.md b/README.md
index a73645b..2329c18 100644
--- a/README.md
+++ b/README.md
@@ -76,6 +76,52 @@ patchState(this.store, {loading: false});
 updateState(this.store 'update loading', {loading: false});
 ```
 
+`withDevtools()` is by default enabled in production mode, if you want to tree-shake it from the application bundle you need to abstract it in your environment file.
+
+<details>
+
+  <summary>Devtools tree-shaking details</summary>
+
+  environment.ts:
+```typescript
+import { withDevtools } from '@angular-architects/ngrx-toolkit';
+
+export const environment = {
+  storeWithDevTools: withDevtools
+}
+```
+
+environment.prod.ts
+```typescript
+import { withDevtoolsStub } from '@angular-architects/ngrx-toolkit';
+
+export const environment = {
+  storeWithDevTools: withDevToolsStub
+}
+```
+
+Then all you need to do is replace `withDevTools` everywhere in your app with `environment.storeWithDevTools`
+e.g.:
+```typescript
+export const SomeStore = signalStore(
+  withState({strings: [] as string[] }),
+  environment.storeWithDevTools('featureName')
+);
+```
+
+Also make sure you have defined file replacements in angular.json prod configuration:
+```json
+"fileReplacements": [
+  {
+    "replace": "src/environments/environment.ts",
+    "with": "src/environments/environment.prod.ts"
+  }
+]
+```
+
+</details>
+
+
 ## Redux: `withRedux()`
 
 `withRedux()` bring back the Redux pattern into the Signal Store.
diff --git a/libs/ngrx-toolkit/src/index.ts b/libs/ngrx-toolkit/src/index.ts
index fe69e84..e9138d8 100644
--- a/libs/ngrx-toolkit/src/index.ts
+++ b/libs/ngrx-toolkit/src/index.ts
@@ -1,4 +1,5 @@
 export {
+  withDevToolsStub,
   withDevtools,
   patchState,
   updateState,
diff --git a/libs/ngrx-toolkit/src/lib/with-devtools.ts b/libs/ngrx-toolkit/src/lib/with-devtools.ts
index be316dc..7f5c56d 100644
--- a/libs/ngrx-toolkit/src/lib/with-devtools.ts
+++ b/libs/ngrx-toolkit/src/lib/with-devtools.ts
@@ -79,6 +79,11 @@ export function reset() {
   storeRegistry.set({});
 }
 
+/**
+ * Stub for DevTools integration. Can be used to disable DevTools in production.
+ */
+export const withDevToolsStub: typeof withDevtools = () => store => store;
+
 /**
  * @param name store's name as it should appear in the DevTools
  */

From a490354f9b952c0d0f56adec1274b396f1fe03ec Mon Sep 17 00:00:00 2001
From: marcindz88 <marcindz88@gmail.com>
Date: Fri, 18 Oct 2024 18:47:58 +0200
Subject: [PATCH 2/2] feat: withDevTools disabled in prod, and tree-shaking
 docs - docs utility function update

---
 README.md | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 2329c18..25ca7c6 100644
--- a/README.md
+++ b/README.md
@@ -82,7 +82,9 @@ updateState(this.store 'update loading', {loading: false});
 
   <summary>Devtools tree-shaking details</summary>
 
-  environment.ts:
+It is required to add the `withDevtools` function to the environment files.
+
+environments/environment.ts:
 ```typescript
 import { withDevtools } from '@angular-architects/ngrx-toolkit';
 
@@ -91,7 +93,7 @@ export const environment = {
 }
 ```
 
-environment.prod.ts
+environments/environment.prod.ts
 ```typescript
 import { withDevtoolsStub } from '@angular-architects/ngrx-toolkit';
 
@@ -100,12 +102,21 @@ export const environment = {
 }
 ```
 
-Then all you need to do is replace `withDevTools` everywhere in your app with `environment.storeWithDevTools`
+Then you can create utility function which can be used across the application
 e.g.:
+
+shared/store.features.ts (or any other file)
+```typescript
+import { environment } from 'src/environments/environment';
+
+export const withTreeShakableDevTools = environment.storeWithDevTools;
+```
+
+And use it in your store definitions:
 ```typescript
 export const SomeStore = signalStore(
   withState({strings: [] as string[] }),
-  environment.storeWithDevTools('featureName')
+  withTreeShakableDevTools('featureName')
 );
 ```