Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 9d1d099

Browse filesBrowse files
hoebbelsBhoebbelsB
authored
perf(cdk): coalesce and optimize parent notification (#1262)
1 parent 8be3bc1 commit 9d1d099
Copy full SHA for 9d1d099

File tree

Expand file treeCollapse file tree

22 files changed

+622
-423
lines changed
Filter options
Expand file treeCollapse file tree

22 files changed

+622
-423
lines changed

‎apps/demos/src/app/features/template/rx-let/rx-let.menu.ts

Copy file name to clipboard
+13-9Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,38 @@
11
export const MENU_ITEMS = [
22
{
33
label: 'Basic',
4-
link: 'basic'
4+
link: 'basic',
5+
},
6+
{
7+
label: 'Scoping',
8+
link: 'scoping',
59
},
610
{
711
label: 'Error Handling',
8-
link: 'error-handling'
12+
link: 'error-handling',
913
},
1014
{
1115
label: 'Exception Handling',
12-
link: 'exception-handling'
16+
link: 'exception-handling',
1317
},
1418
{
1519
label: 'Http Errors',
16-
link: 'http-errors'
20+
link: 'http-errors',
1721
},
1822
{
1923
label: '*ngif hack',
20-
link: 'ng-if-hack'
24+
link: 'ng-if-hack',
2125
},
2226
{
2327
label: 'Template Bindings',
24-
link: 'template-bindings'
28+
link: 'template-bindings',
2529
},
2630
{
2731
label: 'Preloading Techniques',
28-
link: 'preloading-images'
32+
link: 'preloading-images',
2933
},
3034
{
3135
label: 'Lazy Components',
32-
link: 'lazy-components'
33-
}
36+
link: 'lazy-components',
37+
},
3438
];

‎apps/demos/src/app/features/template/rx-let/rx-let.routes.ts

Copy file name to clipboardExpand all lines: apps/demos/src/app/features/template/rx-let/rx-let.routes.ts
+35-18Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,46 +3,63 @@ import { Routes } from '@angular/router';
33
export const ROUTES: Routes = [
44
{
55
path: '',
6-
redirectTo: 'basic'
6+
redirectTo: 'basic',
77
},
88
{
99
path: 'basic',
10-
loadChildren: () => import('./basic/rx-let-basic.module')
11-
.then(m => m.RxLetBasicModule)
10+
loadChildren: () =>
11+
import('./basic/rx-let-basic.module').then((m) => m.RxLetBasicModule),
12+
},
13+
{
14+
path: 'scoping',
15+
loadChildren: () =>
16+
import('./scoping/rx-let-scoping.module').then(
17+
(m) => m.RxLetScopingModule
18+
),
1219
},
1320
{
1421
path: 'error-handling',
15-
loadChildren: () => import('./error-handling/error-handing.module')
16-
.then(m => m.ErrorHandingModule)
22+
loadChildren: () =>
23+
import('./error-handling/error-handing.module').then(
24+
(m) => m.ErrorHandingModule
25+
),
1726
},
1827
{
1928
path: 'exception-handling',
20-
loadChildren: () => import('./exception-handling/rx-let-exception-handling.module')
21-
.then(m => m.RxLetExceptionHandlingModule)
29+
loadChildren: () =>
30+
import('./exception-handling/rx-let-exception-handling.module').then(
31+
(m) => m.RxLetExceptionHandlingModule
32+
),
2233
},
2334
{
2435
path: 'http-errors',
25-
loadChildren: () => import('./http-errors/http-error.module')
26-
.then(m => m.HttpErrorModule)
36+
loadChildren: () =>
37+
import('./http-errors/http-error.module').then((m) => m.HttpErrorModule),
2738
},
2839
{
2940
path: 'template-bindings',
30-
loadChildren: () => import('./let-template-binding/let-template-binding.module')
31-
.then(m => m.LetTemplateBindingModule)
41+
loadChildren: () =>
42+
import('./let-template-binding/let-template-binding.module').then(
43+
(m) => m.LetTemplateBindingModule
44+
),
3245
},
3346
{
3447
path: 'ng-if-hack',
35-
loadChildren: () => import('./ng-if-hack/ng-if-hack.module')
36-
.then(m => m.NgIfHackModule)
48+
loadChildren: () =>
49+
import('./ng-if-hack/ng-if-hack.module').then((m) => m.NgIfHackModule),
3750
},
3851
{
3952
path: 'preloading-images',
40-
loadChildren: () => import('./preloading-images/preloading-images.module')
41-
.then(m => m.PreloadingImagesModule)
53+
loadChildren: () =>
54+
import('./preloading-images/preloading-images.module').then(
55+
(m) => m.PreloadingImagesModule
56+
),
4257
},
4358
{
4459
path: 'lazy-components',
45-
loadChildren: () => import('./lazy-loading-components/lazy-loading-components.module')
46-
.then(m => m.LazyLoadingComponentsModule)
47-
}
60+
loadChildren: () =>
61+
import('./lazy-loading-components/lazy-loading-components.module').then(
62+
(m) => m.LazyLoadingComponentsModule
63+
),
64+
},
4865
];

‎apps/demos/src/app/features/template/rx-let/scoping/intermediate.component.ts

Copy file name to clipboard
+38Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import {
2+
AfterContentInit,
3+
ChangeDetectionStrategy,
4+
Component,
5+
ContentChild,
6+
ContentChildren,
7+
Directive,
8+
OnInit,
9+
QueryList,
10+
} from '@angular/core';
11+
import { startWith } from 'rxjs';
12+
13+
@Directive({
14+
selector: '[rxaContentChild]',
15+
})
16+
export class ContentChildDirective {}
17+
18+
@Component({
19+
selector: 'rxa-content-parent',
20+
template: ` <ng-content></ng-content> `,
21+
changeDetection: ChangeDetectionStrategy.OnPush,
22+
})
23+
export class ContentParent implements AfterContentInit {
24+
// @ContentChildren(ContentChildDirective) children: QueryList<ContentChildDirective>;
25+
@ContentChild(ContentChildDirective)
26+
set child(child: ContentChildDirective) {
27+
console.log('child', child);
28+
}
29+
30+
ngAfterContentInit() {
31+
/*console.log('contentParent', this.children);
32+
this.children.changes
33+
.pipe(startWith(this.children))
34+
.subscribe((children) => {
35+
console.log('children', children);
36+
});*/
37+
}
38+
}

‎apps/demos/src/app/features/template/rx-let/scoping/rx-let-scoping.component.ts

Copy file name to clipboard
+128Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import {
2+
AfterViewInit,
3+
ChangeDetectionStrategy,
4+
Component,
5+
ElementRef,
6+
QueryList,
7+
ViewChildren,
8+
} from '@angular/core';
9+
import { LetDirective } from '@rx-angular/template/let';
10+
import { Subject } from 'rxjs';
11+
import { map } from 'rxjs/operators';
12+
13+
@Component({
14+
selector: 'rxa-rx-let-poc',
15+
template: `
16+
<rxa-visualizer>
17+
<div visualizerHeader>
18+
<h2>rxLet SCOPING</h2>
19+
<rxa-strategy-select
20+
(strategyChange)="strategy = $event"
21+
></rxa-strategy-select>
22+
<rxa-value-provider
23+
#v="rxaValueProvider"
24+
[buttons]="true"
25+
></rxa-value-provider>
26+
<button (click)="v.next()" class="mr-1">toggle</button>
27+
<button [unpatch] (click)="v.next()">toggle (unpatched)</button>
28+
</div>
29+
<div class="row w-100">
30+
<div class="col-sm-3">
31+
<h3>RxLet</h3>
32+
<rxa-content-parent>
33+
<div
34+
class="dh-embedded-view"
35+
*rxLet="
36+
v.incremental$;
37+
let value;
38+
parent: withParent;
39+
renderCallback: renderCallback;
40+
strategy: strategy
41+
"
42+
>
43+
<rxa-dirty-check></rxa-dirty-check>
44+
Value: {{ value }}
45+
<div #letChild rxaContentChild></div>
46+
</div>
47+
</rxa-content-parent>
48+
</div>
49+
<div class="col-sm-3">
50+
<h3>RxLet</h3>
51+
<rxa-content-parent>
52+
<div
53+
class="dh-embedded-view"
54+
*rxLet="
55+
v.incremental$;
56+
let value;
57+
parent: withParent;
58+
renderCallback: renderCallback;
59+
strategy: strategy
60+
"
61+
>
62+
<rxa-dirty-check></rxa-dirty-check>
63+
Value: {{ value }}
64+
<div #letChild rxaContentChild></div>
65+
</div>
66+
</rxa-content-parent>
67+
</div>
68+
<div class="col-sm-3">
69+
<h3>RxLet</h3>
70+
<rxa-content-parent>
71+
<div
72+
class="dh-embedded-view"
73+
*rxLet="
74+
v.incremental$;
75+
let value;
76+
parent: withParent;
77+
renderCallback: renderCallback;
78+
strategy: strategy
79+
"
80+
>
81+
<rxa-dirty-check></rxa-dirty-check>
82+
Value: {{ value }}
83+
<div #letChild rxaContentChild></div>
84+
</div>
85+
</rxa-content-parent>
86+
</div>
87+
<div class="col-sm-3">
88+
<h3>RxLet</h3>
89+
<rxa-content-parent>
90+
<div
91+
class="dh-embedded-view"
92+
*rxLet="
93+
v.incremental$;
94+
let value;
95+
parent: withParent;
96+
renderCallback: renderCallback;
97+
strategy: strategy
98+
"
99+
>
100+
<rxa-dirty-check></rxa-dirty-check>
101+
Value: {{ value }}
102+
<div #letChild rxaContentChild></div>
103+
</div>
104+
</rxa-content-parent>
105+
</div>
106+
</div>
107+
</rxa-visualizer>
108+
`,
109+
changeDetection: ChangeDetectionStrategy.OnPush,
110+
})
111+
export class RxLetScopingComponent implements AfterViewInit {
112+
private _renderCalled = 0;
113+
readonly renderCallback = new Subject();
114+
115+
@ViewChildren('letChild') letChildren: QueryList<ElementRef>;
116+
117+
rendered$ = this.renderCallback.pipe(map(() => this._renderCalled++));
118+
119+
strategy;
120+
121+
withParent = true;
122+
123+
ngAfterViewInit() {
124+
this.letChildren.changes.subscribe((letDirs) => {
125+
console.log('letChildren', letDirs);
126+
});
127+
}
128+
}

‎apps/demos/src/app/features/template/rx-let/scoping/rx-let-scoping.module.ts

Copy file name to clipboard
+33Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { NgModule } from '@angular/core';
2+
import { MatButtonModule } from '@angular/material/button';
3+
import { RouterModule, Routes } from '@angular/router';
4+
import { UnpatchEventsModule } from '../../../../rx-angular-pocs/template/directives/unpatch/unpatch-events.module';
5+
import { DirtyChecksModule } from '../../../../shared/debug-helper/dirty-checks/index';
6+
import { StrategySelectModule } from '../../../../shared/debug-helper/strategy-select/strategy-select.module';
7+
import { ValueProvidersModule } from '../../../../shared/debug-helper/value-provider/value-providers.module';
8+
import { VisualizerModule } from '../../../../shared/debug-helper/visualizer/visualizer.module';
9+
import { ContentChildDirective, ContentParent } from './intermediate.component';
10+
import { RxLetScopingComponent } from './rx-let-scoping.component';
11+
import { LetModule } from '@rx-angular/template/let';
12+
13+
const routes: Routes = [
14+
{
15+
path: '',
16+
component: RxLetScopingComponent,
17+
},
18+
];
19+
20+
@NgModule({
21+
declarations: [RxLetScopingComponent, ContentParent, ContentChildDirective],
22+
imports: [
23+
RouterModule.forChild(routes),
24+
MatButtonModule,
25+
ValueProvidersModule,
26+
UnpatchEventsModule,
27+
StrategySelectModule,
28+
VisualizerModule,
29+
LetModule,
30+
DirtyChecksModule,
31+
],
32+
})
33+
export class RxLetScopingModule {}

‎apps/demos/src/app/rx-angular-pocs/cdk/debug/dirty-check/dirty-checks.component.ts

Copy file name to clipboard
+12-7Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import { AfterViewInit, Component, ElementRef, Input, Renderer2 } from '@angular/core';
1+
import {
2+
AfterViewInit,
3+
Component,
4+
ElementRef,
5+
Input,
6+
Renderer2,
7+
} from '@angular/core';
28

39
@Component({
410
selector: 'rxa-dirty-check',
@@ -8,12 +14,12 @@ import { AfterViewInit, Component, ElementRef, Input, Renderer2 } from '@angular
814
</div>
915
`,
1016
styles: [
11-
`
17+
`
1218
:host .indicator {
1319
border: 1px solid #ffff005f;
1420
}
15-
`
16-
]
21+
`,
22+
],
1723
//changeDetection: ChangeDetectionStrategy.OnPush
1824
})
1925
export class DirtyChecksComponent implements AfterViewInit {
@@ -23,8 +29,7 @@ export class DirtyChecksComponent implements AfterViewInit {
2329
@Input()
2430
log;
2531

26-
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
27-
}
32+
constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
2833

2934
ngAfterViewInit() {
3035
this.displayElem = this.elementRef.nativeElement.children[0].children[0];
@@ -35,7 +40,7 @@ export class DirtyChecksComponent implements AfterViewInit {
3540
if (this.log) {
3641
console.log('dirtyCheck', this.log);
3742
} else {
38-
3943
}
44+
return this.dirtyChecks++;
4045
}
4146
}

‎apps/demos/src/app/rx-angular-pocs/template/directives/for/rx-for.directive.ts

Copy file name to clipboardExpand all lines: apps/demos/src/app/rx-angular-pocs/template/directives/for/rx-for.directive.ts
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ import {
2222
createListTemplateManager,
2323
RxDefaultListViewContext,
2424
RxListManager,
25-
RxListViewComputedContext, RxListViewContext
25+
RxListViewComputedContext,
26+
RxListViewContext,
2627
} from '@rx-angular/cdk/template';
2728

2829
import { ReplaySubject, Subject, Observable, Subscription } from 'rxjs';
@@ -632,7 +633,6 @@ export class RxFor<T, U extends NgIterable<T> = NgIterable<T>>
632633
iterableDiffers: this.iterableDiffers,
633634
renderSettings: {
634635
cdRef: this.cdRef,
635-
eRef: this.eRef,
636636
strategies: this.strategyProvider.strategies as any, // TODO: move strategyProvider
637637
defaultStrategyName: this.strategyProvider.primaryStrategy,
638638
parent: coerceBooleanProperty(this.renderParent),

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.