diff --git a/README.md b/README.md index a73645b..25ca7c6 100644 --- a/README.md +++ b/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. + +
+ + Devtools tree-shaking details + +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" + } +] +``` + +
+ + ## 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 */