feat: withDevTools disabled in prod - tree-shaking docs

README.md

@@ -76,6 +76,63 @@ 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>
+
+It is required to add the `withDevtools` function to the environment files.
+
+environments/environment.ts:
+```typescript
+import { withDevtools } from '@angular-architects/ngrx-toolkit';
+
+export const environment = {
+  storeWithDevTools: withDevtools
+}
+```
+
+environments/environment.prod.ts
+```typescript
+import { withDevtoolsStub } from '@angular-architects/ngrx-toolkit';
+
+export const environment = {
+  storeWithDevTools: withDevToolsStub
+}
+```
+
+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[] }),
+  withTreeShakableDevTools('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.

libs/ngrx-toolkit/src/index.ts

@@ -1,4 +1,5 @@
 export {
+  withDevToolsStub,
   withDevtools,
   patchState,
   updateState,

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