Skip to content

Commit 01d5a15

Browse files
wolfmanfxwolfmanfx
authored
Merge branch 'main' into wolfmanfx/issue236
2 parents 4754aa8 + 9fcaa03 commit 01d5a15

8 files changed

Lines changed: 102 additions & 22 deletions

File tree

‎apps/demo/src/app/app.component.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<mat-toolbar color="primary">
2+
<button matIconButton (click)="drawer.toggle()">
3+
<mat-icon>menu</mat-icon>
4+
</button>
25
<span>NgRx Toolkit Demo</span>
36
</mat-toolbar>
47
<mat-drawer-container class="container">
5-
<mat-drawer mode="side" opened>
8+
<mat-drawer mode="side" #drawer [opened]="opened()">
69
<mat-nav-list>
710
<a mat-list-item routerLink="/todo">DevTools</a>
811
<a mat-list-item routerLink="/flight-search">withRedux</a>
@@ -31,6 +34,7 @@
3134
<a mat-list-item routerLink="/todo-entity-resource"
3235
>withEntityResources</a
3336
>
37+
<a mat-list-item routerLink="/with-resource">withResource</a>
3438
</mat-nav-list>
3539
</mat-drawer>
3640
<mat-drawer-content>

‎apps/demo/src/app/app.component.ts‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
import { CommonModule } from '@angular/common';
2-
import { Component } from '@angular/core';
1+
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
2+
import { Component, inject } from '@angular/core';
3+
import { toSignal } from '@angular/core/rxjs-interop';
4+
import { MatButtonModule } from '@angular/material/button';
35
import { MatCheckboxModule } from '@angular/material/checkbox';
46
import { MatIconModule } from '@angular/material/icon';
57
import { MatListModule } from '@angular/material/list';
6-
import {
7-
MatDrawer,
8-
MatDrawerContainer,
9-
MatDrawerContent,
10-
} from '@angular/material/sidenav';
8+
import { MatSidenavModule } from '@angular/material/sidenav';
119
import { MatTableModule } from '@angular/material/table';
1210
import { MatToolbarModule } from '@angular/material/toolbar';
1311
import { RouterLink, RouterOutlet } from '@angular/router';
12+
import { map } from 'rxjs';
1413

1514
@Component({
1615
selector: 'demo-root',
@@ -22,11 +21,9 @@ import { RouterLink, RouterOutlet } from '@angular/router';
2221
MatListModule,
2322
RouterLink,
2423
RouterOutlet,
25-
CommonModule,
2624
MatToolbarModule,
27-
MatDrawer,
28-
MatDrawerContainer,
29-
MatDrawerContent,
25+
MatSidenavModule,
26+
MatButtonModule,
3027
],
3128
styles: `
3229
.container {
@@ -37,4 +34,18 @@ import { RouterLink, RouterOutlet } from '@angular/router';
3734
}
3835
`,
3936
})
40-
export class AppComponent {}
37+
export class AppComponent {
38+
opened = toSignal(
39+
inject(BreakpointObserver)
40+
.observe([Breakpoints.XSmall, Breakpoints.Small])
41+
.pipe(
42+
map(
43+
({ breakpoints }) =>
44+
!(
45+
breakpoints[Breakpoints.XSmall] || breakpoints[Breakpoints.Small]
46+
),
47+
),
48+
),
49+
{ requireSync: true },
50+
);
51+
}

‎apps/demo/src/app/lazy-routes.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,12 @@ export const lazyRoutes: Route[] = [
8080
loadComponent: () =>
8181
import('./todo-entity-resource/todo-entity-resource.component').then(
8282
(m) => m.TodoEntityResourceComponent,
83+
},
84+
{
85+
path: 'with-resource',
86+
loadComponent: () =>
87+
import('./with-resource/with-resource.component').then(
88+
(m) => m.WithResourceComponent,
8389
),
8490
},
8591
];

‎apps/demo/src/app/with-resource/with-resource.component.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { withResource } from '@angular-architects/ngrx-toolkit';
2+
import { JsonPipe } from '@angular/common';
3+
import { httpResource } from '@angular/common/http';
4+
import { Component, inject } from '@angular/core';
5+
import { signalStore, withState } from '@ngrx/signals';
6+
import { Flight } from '../shared/flight';
7+
8+
const url = 'https://demo.angulararchitects.io/api/flight?from=Paris&to=';
9+
10+
export const FlightStore = signalStore(
11+
withState({ flightTo: 'New York' }),
12+
withResource(({ flightTo }) => httpResource(() => `${url}${flightTo()}`)),
13+
withResource(({ flightTo }) => ({
14+
list: httpResource<Flight[]>(() => `${url}${flightTo()}`, {
15+
defaultValue: [],
16+
}),
17+
})),
18+
);
19+
20+
@Component({
21+
selector: 'demo-with-resource',
22+
imports: [JsonPipe],
23+
template: `,
24+
<h1>withResource</h1>
25+
<a
26+
href="https://ngrx-toolkit.angulararchitects.io/docs/with-resource"
27+
target="_blank"
28+
>withResource doc page</a
29+
>
30+
31+
<h2>Single Resource</h2>
32+
<pre>value: {{ store.value() | json }}</pre>
33+
<pre>status: {{ store.status() }}</pre>
34+
<pre>error: {{ store.error() | json }}</pre>
35+
<pre>hasValue: {{ store.hasValue() }}</pre>
36+
37+
<h2>Named Resource</h2>
38+
<pre>{{ store.listValue() | json }}</pre>
39+
<pre>status: {{ store.listStatus() }}</pre>
40+
<pre>error: {{ store.listError() | json }}</pre>
41+
<pre>hasValue: {{ store.listHasValue() }}</pre> `,
42+
providers: [FlightStore],
43+
})
44+
export class WithResourceComponent {
45+
store = inject(FlightStore);
46+
}

‎libs/ngrx-toolkit/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@angular-architects/ngrx-toolkit",
3-
"version": "20.4.0",
3+
"version": "20.4.1",
44
"license": "MIT",
55
"repository": {
66
"type": "GitHub",

‎libs/ngrx-toolkit/src/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export {
88
export { renameDevtoolsName } from './lib/devtools/rename-devtools-name';
99
export { patchState, updateState } from './lib/devtools/update-state';
1010
export { withDevToolsStub } from './lib/devtools/with-dev-tools-stub';
11-
export { withDevtools } from './lib/devtools/with-devtools';
11+
export { DevtoolsFeature, withDevtools } from './lib/devtools/with-devtools';
1212

1313
export {
1414
createEffects,
@@ -56,3 +56,5 @@ export {
5656

5757
export * from './lib/mutation/http-mutation';
5858
export { rxMutation } from './lib/mutation/rx-mutation';
59+
60+
export * from './lib/mutation/mutation';

‎libs/ngrx-toolkit/src/lib/devtools/internal/devtools-syncer.service.ts‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import { isPlatformBrowser } from '@angular/common';
2-
import { inject, Injectable, OnDestroy, PLATFORM_ID } from '@angular/core';
2+
import {
3+
inject,
4+
Injectable,
5+
NgZone,
6+
OnDestroy,
7+
PLATFORM_ID,
8+
} from '@angular/core';
39
import { StateSource } from '@ngrx/signals';
410
import { REDUX_DEVTOOLS_CONFIG } from '../provide-devtools-config';
511
import { currentActionNames } from './current-action-names';
@@ -52,11 +58,13 @@ export class DevtoolsSyncer implements OnDestroy {
5258
#currentState: Record<string, object> = {};
5359
#currentId = 1;
5460

55-
readonly #connection: Connection = this.#isBrowser
56-
? window.__REDUX_DEVTOOLS_EXTENSION__
57-
? window.__REDUX_DEVTOOLS_EXTENSION__.connect(this.#devtoolsConfig)
58-
: dummyConnection
59-
: dummyConnection;
61+
readonly #connection: Connection = inject(NgZone).runOutsideAngular(() =>
62+
this.#isBrowser
63+
? window.__REDUX_DEVTOOLS_EXTENSION__
64+
? window.__REDUX_DEVTOOLS_EXTENSION__.connect(this.#devtoolsConfig)
65+
: dummyConnection
66+
: dummyConnection,
67+
);
6068

6169
constructor() {
6270
if (!this.#isBrowser) {

‎libs/ngrx-toolkit/src/lib/devtools/with-devtools.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,15 @@ import {
88
} from '@ngrx/signals';
99
import { DefaultTracker } from './internal/default-tracker';
1010
import {
11-
DevtoolsFeature,
11+
DevtoolsFeature as DevtoolsFeatureInternal,
1212
DevtoolsInnerOptions,
1313
} from './internal/devtools-feature';
1414
import { DevtoolsSyncer } from './internal/devtools-syncer.service';
1515
import { ReduxDevtoolsExtension } from './internal/models';
1616

17+
// Users requested that we export this type: https://github.com/angular-architects/ngrx-toolkit/issues/178
18+
export type DevtoolsFeature = DevtoolsFeatureInternal;
19+
1720
declare global {
1821
interface Window {
1922
__REDUX_DEVTOOLS_EXTENSION__: ReduxDevtoolsExtension | undefined;

0 commit comments

Comments
 (0)