Skip to content

Commit 28e3c1e

Browse files
hoebbelsBhoebbelsB
committed
feat(demos): implement rxChunk demo
1 parent 8882303 commit 28e3c1e

File tree

8 files changed

+152
-10
lines changed

8 files changed

+152
-10
lines changed

‎apps/demos/src/app/features/template/chunk/basic/rx-chunk-basic.component.ts‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
2+
import { Subject } from 'rxjs';
3+
import { map } from 'rxjs/operators';
4+
5+
@Component({
6+
selector: 'rx-chunk-basic',
7+
template: `
8+
<rxa-visualizer>
9+
<ng-container visualizerHeader>
10+
<h3>*rxChunk</h3>
11+
<rxa-strategy-select
12+
(strategyChange)="strategy = $event"
13+
></rxa-strategy-select>
14+
<div>
15+
Rendercallback:
16+
<ng-container *rxLet="rendered$; let rendered">{{
17+
rendered
18+
}}</ng-container>
19+
</div>
20+
<div>
21+
<button mat-button (click)="showContent = !showContent">
22+
Toggle Content
23+
</button>
24+
</div>
25+
</ng-container>
26+
<div class="row w-100 mt-5">
27+
<ng-container *ngIf="showContent">
28+
<div class="col-6">
29+
<div><strong>Non-Chunked</strong></div>
30+
<rxa-work-visualizer
31+
[reCreateContentOnCd]="false"
32+
[work]="250"
33+
></rxa-work-visualizer>
34+
</div>
35+
<div class="col-6">
36+
<div><strong>Chunked</strong></div>
37+
<ng-container *rxChunk="strategy; renderCallback: renderCallback">
38+
<rxa-work-visualizer
39+
[reCreateContentOnCd]="false"
40+
[work]="250"
41+
></rxa-work-visualizer>
42+
</ng-container>
43+
</div>
44+
</ng-container>
45+
</div>
46+
</rxa-visualizer>
47+
`,
48+
changeDetection: ChangeDetectionStrategy.OnPush,
49+
})
50+
export class RxChunkBasicComponent {
51+
strategy: string;
52+
53+
showContent = true;
54+
55+
renderCallback = new Subject<void>();
56+
private _rendered = 1;
57+
rendered$ = this.renderCallback.pipe(map(() => this._rendered++));
58+
}

‎apps/demos/src/app/features/template/chunk/basic/rx-chunk-basic.module.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { CommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
3+
import { MatButtonModule } from '@angular/material/button';
4+
import { RouterModule, Routes } from '@angular/router';
5+
import { RxChunk } from '@rx-angular/template/chunk';
6+
import { RxLet } from '@rx-angular/template/let';
7+
import { RenderingWorkModule } from '../../../../shared/debug-helper/rendering-work/rendering-work.module';
8+
import { StrategySelectModule } from '../../../../shared/debug-helper/strategy-select/index';
9+
import { VisualizerModule } from '../../../../shared/debug-helper/visualizer/index';
10+
import { WorkModule } from '../../../../shared/debug-helper/work/work.module';
11+
import { RxChunkBasicComponent } from './rx-chunk-basic.component';
12+
13+
const routes: Routes = [
14+
{
15+
path: '',
16+
component: RxChunkBasicComponent,
17+
},
18+
];
19+
20+
@NgModule({
21+
imports: [
22+
RouterModule.forChild(routes),
23+
VisualizerModule,
24+
StrategySelectModule,
25+
RxChunk,
26+
CommonModule,
27+
RxLet,
28+
RenderingWorkModule,
29+
WorkModule,
30+
MatButtonModule,
31+
],
32+
exports: [],
33+
declarations: [RxChunkBasicComponent],
34+
providers: [],
35+
})
36+
export class RxChunkBasicModule {}

‎apps/demos/src/app/features/template/chunk/rx-chunk-demo.module.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { RouterModule } from '@angular/router';
4+
import { ROUTES } from './rx-chunk.routes';
5+
6+
@NgModule({
7+
imports: [CommonModule, RouterModule.forChild(ROUTES)],
8+
})
9+
export class RxChunkDemoModule {}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export const RX_CHUNK_MENU_ITEMS = [
2+
{
3+
label: 'Basic',
4+
link: 'basic',
5+
},
6+
];

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Routes } from '@angular/router';
2+
3+
export const ROUTES: Routes = [
4+
{
5+
path: '',
6+
redirectTo: 'basic',
7+
pathMatch: 'full',
8+
},
9+
{
10+
path: 'basic',
11+
loadChildren: () =>
12+
import('./basic/rx-chunk-basic.module').then((m) => m.RxChunkBasicModule),
13+
},
14+
];

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { RX_CHUNK_MENU_ITEMS } from './chunk/rx-chunk.menu';
12
import { PUSH_PIPE_MENU } from './push/push.menu';
23
import { MENU_ITEMS as RX_LET_MENU_ITEMS } from './rx-let/rx-let.menu';
34
import { MENU_ITEMS as RX_IF_MENU_ITEMS } from './rx-if/rx-if.menu';
@@ -39,6 +40,11 @@ export const TEMPLATE_MENU = [
3940
link: 'rx-for',
4041
children: RX_FOR_MENU_ITEMS,
4142
},
43+
{
44+
label: '*rxChunk',
45+
link: 'rx-chunk',
46+
children: RX_CHUNK_MENU_ITEMS,
47+
},
4248
{
4349
label: 'Virtual Scrolling',
4450
link: 'rx-virtual-for',

‎apps/demos/src/app/features/template/template-shell.module.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@ const ROUTES: Routes = [
1717
loadChildren: () =>
1818
import('./rx-let/rx-let-demo.module').then((m) => m.RxLetDemoModule),
1919
},
20+
{
21+
path: 'rx-chunk',
22+
loadChildren: () =>
23+
import('./chunk/rx-chunk-demo.module').then((m) => m.RxChunkDemoModule),
24+
},
2025
{
2126
path: 'rx-if',
2227
loadChildren: () =>
@@ -31,7 +36,7 @@ const ROUTES: Routes = [
3136
path: 'rx-virtual-for',
3237
loadChildren: () =>
3338
import('./rx-virtual-for/rx-virtual-for.module').then(
34-
(m) => m.RxVirtualForDemoModule
39+
(m) => m.RxVirtualForDemoModule,
3540
),
3641
},
3742
{
@@ -48,7 +53,7 @@ const ROUTES: Routes = [
4853
path: 'rx-context',
4954
loadChildren: () =>
5055
import('./rx-context/rx-context.routed.module').then(
51-
(m) => m.RxContextRoutedModule
56+
(m) => m.RxContextRoutedModule,
5257
),
5358
},
5459
{
@@ -60,14 +65,14 @@ const ROUTES: Routes = [
6065
path: 'view-port-prio',
6166
loadChildren: () =>
6267
import('./viewport-prio/viewport-prio-demo.module').then(
63-
(m) => m.ViewportPrioModule
68+
(m) => m.ViewportPrioModule,
6469
),
6570
},
6671
{
6772
path: 'render-callback',
6873
loadChildren: () =>
6974
import('./render-callback/render-callback.module').then(
70-
(m) => m.RenderCallbackModule
75+
(m) => m.RenderCallbackModule,
7176
),
7277
},
7378
];

‎apps/demos/src/app/shared/debug-helper/visualizer/visualizer/work-visualizer.component.ts‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,8 @@ export class WorkVisualizerComponent extends Hooks {
8181
@Input()
8282
renderingsOn = false;
8383

84+
@Input() reCreateContentOnCd = true;
85+
8486
changeO$ = new ReplaySubject<Observable<any>>(1);
8587

8688
@Input()
@@ -105,24 +107,30 @@ export class WorkVisualizerComponent extends Hooks {
105107
this.changeO$.pipe(
106108
distinctUntilChanged(),
107109
switchMap((o$) =>
108-
!!this.key ? o$.pipe(map((s) => s[this.key])) : o$
110+
!!this.key ? o$.pipe(map((s) => s[this.key])) : o$,
109111
),
110112
distinctUntilChanged(),
111-
tap((v) => console.log('value', v))
112-
)
113-
)
114-
)
113+
tap((v) => console.log('value', v)),
114+
),
115+
),
116+
),
115117
);
116118

119+
private items: any[];
120+
117121
constructor() {
118122
super();
119123
}
120124

121125
getChildren(): number[] {
126+
if (!this.reCreateContentOnCd && this.items) {
127+
return this.items;
128+
}
122129
const items = [];
123130
for (let i = 0; i <= this.work * 10; i++) {
124131
items.push(Math.ceil(Math.random() * 100));
125132
}
126-
return items;
133+
this.items = items;
134+
return this.items;
127135
}
128136
}

0 commit comments

Comments
 (0)