Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 3359903

Browse files
hoebbelsBhoebbelsB
committed
refactor(cdk): render-strategies: convert renderbehavior params to object
1 parent 5bc8b73 commit 3359903

File tree

6 files changed

+114
-74
lines changed

6 files changed

+114
-74
lines changed

‎apps/demos/src/app/features/template/rx-for/nested-lists/rx-for-normal.directive.ts

Lines changed: 49 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,44 @@ import {
1616
} from '@angular/core';
1717
import { RxStrategyProvider } from '@rx-angular/cdk/render-strategies';
1818
import { RxDefaultListViewContext } from '@rx-angular/cdk/template';
19-
import { concat, forkJoin, Observable, ObservableInput, of, ReplaySubject, Subject, Subscription } from 'rxjs';
20-
import { catchError, distinctUntilChanged, filter, map, shareReplay, switchAll, switchMap, take, tap } from 'rxjs/operators';
19+
import {
20+
concat,
21+
forkJoin,
22+
Observable,
23+
ObservableInput,
24+
of,
25+
ReplaySubject,
26+
Subject,
27+
Subscription,
28+
} from 'rxjs';
29+
import {
30+
catchError,
31+
distinctUntilChanged,
32+
filter,
33+
map,
34+
shareReplay,
35+
switchAll,
36+
switchMap,
37+
take,
38+
tap,
39+
} from 'rxjs/operators';
2140

2241
@Directive({
23-
selector: '[rxForNormal]'
42+
selector: '[rxForNormal]',
2443
})
2544
export class RxForNormal<T, U extends NgIterable<T> = NgIterable<T>>
26-
implements OnInit, OnDestroy {
45+
implements OnInit, OnDestroy
46+
{
2747
@Input()
2848
set rxForNormal(potentialObservable: ObservableInput<U> | null | undefined) {
2949
this._rxFor = potentialObservable;
3050
this.observables$.next(potentialObservable);
3151
}
3252

3353
@Input()
34-
set rxForNormalOf(potentialObservable: ObservableInput<U> | null | undefined) {
54+
set rxForNormalOf(
55+
potentialObservable: ObservableInput<U> | null | undefined
56+
) {
3557
this._rxFor = potentialObservable;
3658
this.observables$.next(potentialObservable);
3759
}
@@ -59,7 +81,6 @@ export class RxForNormal<T, U extends NgIterable<T> = NgIterable<T>>
5981
private iterableDiffers: IterableDiffers
6082
) {}
6183

62-
6384
private differ: IterableDiffer<T> | null = null;
6485
private observables$ = new ReplaySubject<ObservableInput<U>>(1);
6586
private readonly strategies = this.strategyProvider.strategies;
@@ -105,25 +126,23 @@ export class RxForNormal<T, U extends NgIterable<T> = NgIterable<T>>
105126
rxForDistinctBy = (a, b) => a.value === b.value;
106127

107128
initDiffer(iterable: U = [] as U) {
108-
this.differ = this.iterableDiffers
109-
.find(iterable)
110-
.create(this._trackByFn);
129+
this.differ = this.iterableDiffers.find(iterable).create(this._trackByFn);
111130
}
112131

113132
ngOnInit() {
114133
this.sub.add(
115134
concat(
116135
this.values$.pipe(
117136
take(1),
118-
tap(value => this.initDiffer(value || ([] as any)))
137+
tap((value) => this.initDiffer(value || ([] as any)))
119138
),
120139
this.values$
121140
)
122141
.pipe(
123-
map(i => this.differ.diff(i)),
124-
filter(diff => !!diff),
125-
switchMap(diff => this.applyChanges(diff)),
126-
catchError(e => {
142+
map((i) => this.differ.diff(i)),
143+
filter((diff) => !!diff),
144+
switchMap((diff) => this.applyChanges(diff)),
145+
catchError((e) => {
127146
console.error(e);
128147
return of(null);
129148
}),
@@ -144,7 +163,10 @@ export class RxForNormal<T, U extends NgIterable<T> = NgIterable<T>>
144163
const strat = this.strategies[this.strategy];
145164

146165
const insertMap = new Map<number, RxDefaultListViewContext<T, U>>();
147-
const scheduleInsert = (idx: number, ctx: RxDefaultListViewContext<T, U>) => {
166+
const scheduleInsert = (
167+
idx: number,
168+
ctx: RxDefaultListViewContext<T, U>
169+
) => {
148170
if (!insertMap.has(idx)) {
149171
insertMap.set(idx, ctx);
150172
const insert = new Subject<void>();
@@ -163,7 +185,7 @@ export class RxForNormal<T, U extends NgIterable<T> = NgIterable<T>>
163185
};
164186
this.sub.add(
165187
of(null)
166-
.pipe(strat.behavior(work, this), take(1))
188+
.pipe(strat.behavior({ work, scope: this }), take(1))
167189
.subscribe(insert)
168190
);
169191
behaviors$.push(insert);
@@ -172,7 +194,7 @@ export class RxForNormal<T, U extends NgIterable<T> = NgIterable<T>>
172194
const updateMap = new WeakMap<
173195
EmbeddedViewRef<any>,
174196
((context: RxDefaultListViewContext<T, U>) => void)[]
175-
>();
197+
>();
176198
const scheduleUpdate = (
177199
idx: number,
178200
update: (context: RxDefaultListViewContext<T, U>) => void
@@ -188,11 +210,11 @@ export class RxForNormal<T, U extends NgIterable<T> = NgIterable<T>>
188210
// detach the view so that the parent cd cycle does not render this view
189211
const work = () => {
190212
view.reattach();
191-
updateMap.get(view).forEach(u => u(view.context));
213+
updateMap.get(view).forEach((u) => u(view.context));
192214
strat.work(view);
193215
};
194216
behaviors$.push(
195-
of(null).pipe(strat.behavior(work, view), take(1))
217+
of(null).pipe(strat.behavior({ work, scope: view as any }), take(1))
196218
);
197219
}
198220
} else if (insertMap.has(idx)) {
@@ -216,8 +238,7 @@ export class RxForNormal<T, U extends NgIterable<T> = NgIterable<T>>
216238
detectParent = true;
217239
} else if (currentIndex == null) {
218240
// remove
219-
const i =
220-
previousIndex === null ? undefined : previousIndex;
241+
const i = previousIndex === null ? undefined : previousIndex;
221242
if (this.viewContainerRef.get(i)) {
222243
this.viewContainerRef.remove(i);
223244
// a view got removed, notify parent about the change
@@ -230,7 +251,7 @@ export class RxForNormal<T, U extends NgIterable<T> = NgIterable<T>>
230251
);
231252
this.viewContainerRef.move(view, idx);
232253
const $implicit = r.item;
233-
scheduleUpdate(idx, ctx => {
254+
scheduleUpdate(idx, (ctx) => {
234255
ctx.$implicit = $implicit;
235256
});
236257
}
@@ -239,10 +260,7 @@ export class RxForNormal<T, U extends NgIterable<T> = NgIterable<T>>
239260
// if views only had identityChanges, update the $implict value
240261
changes.forEachIdentityChange((record: IterableChangeRecord<T>) => {
241262
const $implicit = record.item;
242-
scheduleUpdate(
243-
record.currentIndex,
244-
ctx => (ctx.$implicit = $implicit)
245-
);
263+
scheduleUpdate(record.currentIndex, (ctx) => (ctx.$implicit = $implicit));
246264
});
247265
// update view contexts (index, count, odd/even and stuff)
248266
const count = this.viewContainerRef.length + insertMap.size;
@@ -254,9 +272,9 @@ export class RxForNormal<T, U extends NgIterable<T> = NgIterable<T>>
254272
first: index === 0,
255273
last: index === count - 1,
256274
even,
257-
odd: !even
275+
odd: !even,
258276
};
259-
scheduleUpdate(index, ctx => {
277+
scheduleUpdate(index, (ctx) => {
260278
ctx.updateContext(newCtx);
261279
});
262280
}
@@ -268,9 +286,9 @@ export class RxForNormal<T, U extends NgIterable<T> = NgIterable<T>>
268286
first: index === 0,
269287
last: index === count - 1,
270288
even,
271-
odd: !even
289+
odd: !even,
272290
};
273-
scheduleUpdate(index, ctx => {
291+
scheduleUpdate(index, (ctx) => {
274292
ctx.updateContext(newCtx);
275293
});
276294
}
@@ -281,11 +299,10 @@ export class RxForNormal<T, U extends NgIterable<T> = NgIterable<T>>
281299
// console.log('parent notified');
282300
},
283301
strategy: this.strategy,
284-
scope: (this.cdRef as any).context
302+
scope: (this.cdRef as any).context,
285303
});
286304
});
287305
}
288306
return forkJoin(behaviors$);
289307
}
290-
291308
}

‎apps/demos/src/app/rx-angular-pocs/cdk/decorators/stateful.ts

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,51 @@
11
import {
22
ɵɵdirectiveInject as directiveInject,
3-
ChangeDetectorRef, Type
3+
ChangeDetectorRef,
4+
Type,
45
} from '@angular/core';
5-
import { RxStrategyCredentials, RxStrategyProvider } from '@rx-angular/cdk/render-strategies';
6+
import {
7+
RxStrategyCredentials,
8+
RxStrategyProvider,
9+
} from '@rx-angular/cdk/render-strategies';
610
import { fromEvent, of } from 'rxjs';
711
import { takeUntil } from 'rxjs/operators';
812

913
export function renderOnChange<T = Type<any>>(
1014
component: T,
1115
keys: (keyof T)[],
1216
config: {
13-
cdRef: ChangeDetectorRef,
14-
strategyName?: string
17+
cdRef: ChangeDetectorRef;
18+
strategyName?: string;
1519
}
1620
) {
17-
18-
const strategyProvider: RxStrategyProvider = directiveInject(RxStrategyProvider);
21+
const strategyProvider: RxStrategyProvider =
22+
directiveInject(RxStrategyProvider);
1923
const strategyName = config?.strategyName || strategyProvider.primaryStrategy;
2024
const strategy = strategyProvider.strategies[strategyName];
2125

22-
function scheduleCD(s: RxStrategyCredentials, work: () => void): AbortController {
26+
function scheduleCD(
27+
s: RxStrategyCredentials,
28+
work: () => void
29+
): AbortController {
2330
const abC = new AbortController();
24-
of(null).pipe(
25-
s.behavior(work, component as any),
26-
takeUntil(fromEvent(abC.signal, 'abort'))
27-
).subscribe();
31+
of(null)
32+
.pipe(
33+
s.behavior({ work, scope: component as any }),
34+
takeUntil(fromEvent(abC.signal, 'abort'))
35+
)
36+
.subscribe();
2837
return abC;
2938
}
3039

3140
let workScheduled: AbortController;
3241

3342
const values = new Map<keyof T, any>();
34-
keys.forEach(key => {
43+
keys.forEach((key) => {
3544
Object.defineProperty(component, key, {
36-
get: function() {
45+
get: function () {
3746
return values.get(key);
3847
},
39-
set: function(newVal: any) {
48+
set: function (newVal: any) {
4049
values.set(key, newVal);
4150
if (workScheduled) {
4251
workScheduled.abort();
@@ -47,7 +56,7 @@ export function renderOnChange<T = Type<any>>(
4756
workScheduled = scheduleCD(strategy, work);
4857
},
4958
enumerable: true,
50-
configurable: true
59+
configurable: true,
5160
});
52-
})
61+
});
5362
}

‎libs/cdk/render-strategies/src/lib/concurrent-strategies.ts

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
RxConcurrentStrategyNames,
1414
RxStrategyCredentials,
1515
} from './model';
16-
import { coalescingManager } from '@rx-angular/cdk/coalescing';
16+
import { coalescingManager, coalescingObj } from '@rx-angular/cdk/coalescing';
1717

1818
forceFrameRate(60);
1919

@@ -96,28 +96,29 @@ function scheduleOnQueue<T>(
9696
work: (...args: any[]) => void,
9797
options: {
9898
priority: PriorityLevel;
99-
scope: Record<string, unknown>;
99+
scope: coalescingObj;
100100
delay?: number;
101101
ngZone: NgZone;
102102
}
103103
): MonoTypeOperatorFunction<T> {
104+
const scope = (options.scope as Record<string, unknown>) || {};
104105
return (o$: Observable<T>): Observable<T> =>
105106
o$.pipe(
106-
filter(() => !coalescingManager.isCoalescing(options.scope)),
107+
filter(() => !coalescingManager.isCoalescing(scope)),
107108
switchMap((v) =>
108109
new Observable<T>((subscriber) => {
109-
coalescingManager.add(options.scope);
110+
coalescingManager.add(scope);
110111
const task = scheduleCallback(
111112
options.priority,
112113
() => {
113114
work();
114-
coalescingManager.remove(options.scope);
115+
coalescingManager.remove(scope);
115116
subscriber.next(v);
116117
},
117118
{ delay: options.delay, ngZone: options.ngZone }
118119
);
119120
return () => {
120-
coalescingManager.remove(options.scope);
121+
coalescingManager.remove(scope);
121122
cancelCallback(task);
122123
};
123124
}).pipe(mapTo(v))

‎libs/cdk/render-strategies/src/lib/model.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { ChangeDetectorRef, NgZone } from '@angular/core';
2+
import { coalescingObj, RxCoalescingOptions } from '@rx-angular/cdk/coalescing';
23
import { RxNotification } from '@rx-angular/cdk/notifications';
34
import { Observable } from 'rxjs';
45

@@ -10,12 +11,12 @@ export interface ScheduleOnStrategyOptions {
1011

1112
export type RxRenderWork = <T = unknown>(
1213
cdRef: ChangeDetectorRef,
13-
scope?: Record<string, unknown>,
14+
scope?: coalescingObj,
1415
notification?: RxNotification<T>
1516
) => void;
1617
export type RxRenderBehavior = <T = unknown>(params: {
1718
work: () => any;
18-
scope?: Record<string, unknown>;
19+
scope?: coalescingObj;
1920
ngZone?: NgZone;
2021
}) => (o: Observable<T>) => Observable<T>;
2122

‎libs/cdk/render-strategies/src/lib/native-strategies.ts

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ import { ɵmarkDirty as markDirty } from '@angular/core';
22
import { Observable } from 'rxjs';
33
import { tap } from 'rxjs/operators';
44
import { coalesceWith } from '@rx-angular/cdk/coalescing';
5-
import { RxCustomStrategyCredentials, RxNativeStrategyNames, RxRenderWork, RxStrategyCredentials } from './model';
5+
import {
6+
RxCustomStrategyCredentials,
7+
RxNativeStrategyNames,
8+
RxStrategyCredentials,
9+
} from './model';
610
import { getZoneUnPatchedApi } from '@rx-angular/cdk/internals/core';
711

812
const animationFrameTick = () =>
@@ -24,17 +28,21 @@ const localCredentials: RxStrategyCredentials = {
2428
cdRef.detectChanges();
2529
},
2630
behavior:
27-
(work: () => RxRenderWork, scope: Record<string, unknown>, ngZone) => (o$) =>
31+
({ work, scope, ngZone }) =>
32+
(o$) =>
2833
o$.pipe(
29-
coalesceWith(animationFrameTick(), scope),
30-
tap(() => ngZone ? ngZone.run(() => work()) : work())
34+
coalesceWith(animationFrameTick(), scope as Record<string, unknown>),
35+
tap(() => (ngZone ? ngZone.run(() => work()) : work()))
3136
),
3237
};
3338

3439
const globalCredentials: RxStrategyCredentials = {
3540
name: 'global',
3641
work: (_, context) => markDirty(context),
37-
behavior: (work: any, scope, ngZone) => (o$) => o$.pipe(tap(() => ngZone ? ngZone.run(() => work()) : work())),
42+
behavior:
43+
({ work, ngZone }) =>
44+
(o$) =>
45+
o$.pipe(tap(() => (ngZone ? ngZone.run(() => work()) : work()))),
3846
};
3947

4048
const noopCredentials: RxStrategyCredentials = {
@@ -46,8 +54,10 @@ const noopCredentials: RxStrategyCredentials = {
4654
const nativeCredentials: RxStrategyCredentials = {
4755
name: 'native',
4856
work: (cdRef) => cdRef.markForCheck(),
49-
behavior: (work: any, scope, ngZone) => (o$) => o$.pipe(tap(() =>
50-
ngZone ? ngZone.run(() => work()) : work())),
57+
behavior:
58+
({ work, ngZone }) =>
59+
(o$) =>
60+
o$.pipe(tap(() => (ngZone ? ngZone.run(() => work()) : work()))),
5161
};
5262

5363
export type RxNativeStrategies =

0 commit comments

Comments
 (0)