rx-angular · hoebbelsB · Nov 12, 2024 · Nov 12, 2024
diff --git a/apps/demos/src/app/features/template/chunk/basic/rx-chunk-basic.component.ts b/apps/demos/src/app/features/template/chunk/basic/rx-chunk-basic.component.ts
@@ -0,0 +1,58 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'rx-chunk-basic',
+  template: `
+    <rxa-visualizer>
+      <ng-container visualizerHeader>
+        <h3>*rxChunk</h3>
+        <rxa-strategy-select
+          (strategyChange)="strategy = $event"
+        ></rxa-strategy-select>
+        <div>
+          Rendercallback:
+          <ng-container *rxLet="rendered$; let rendered">{{
+            rendered
+          }}</ng-container>
+        </div>
+        <div>
+          <button mat-button (click)="showContent = !showContent">
+            Toggle Content
+          </button>
+        </div>
+      </ng-container>
+      <div class="row w-100 mt-5">
+        <ng-container *ngIf="showContent">
+          <div class="col-6">
+            <div><strong>Non-Chunked</strong></div>
+            <rxa-work-visualizer
+              [reCreateContentOnCd]="false"
+              [work]="250"
+            ></rxa-work-visualizer>
+          </div>
+          <div class="col-6">
+            <div><strong>Chunked</strong></div>
+            <ng-container *rxChunk="strategy; renderCallback: renderCallback">
+              <rxa-work-visualizer
+                [reCreateContentOnCd]="false"
+                [work]="250"
+              ></rxa-work-visualizer>
+            </ng-container>
+          </div>
+        </ng-container>
+      </div>
+    </rxa-visualizer>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RxChunkBasicComponent {
+  strategy: string;
+
+  showContent = true;
+
+  renderCallback = new Subject<void>();
+  private _rendered = 1;
+  rendered$ = this.renderCallback.pipe(map(() => this._rendered++));
+}
diff --git a/apps/demos/src/app/features/template/chunk/basic/rx-chunk-basic.module.ts b/apps/demos/src/app/features/template/chunk/basic/rx-chunk-basic.module.ts
@@ -0,0 +1,36 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule, Routes } from '@angular/router';
+import { RxChunk } from '@rx-angular/template/chunk';
+import { RxLet } from '@rx-angular/template/let';
+import { RenderingWorkModule } from '../../../../shared/debug-helper/rendering-work/rendering-work.module';
+import { StrategySelectModule } from '../../../../shared/debug-helper/strategy-select/index';
+import { VisualizerModule } from '../../../../shared/debug-helper/visualizer/index';
+import { WorkModule } from '../../../../shared/debug-helper/work/work.module';
+import { RxChunkBasicComponent } from './rx-chunk-basic.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: RxChunkBasicComponent,
+  },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes),
+    VisualizerModule,
+    StrategySelectModule,
+    RxChunk,
+    CommonModule,
+    RxLet,
+    RenderingWorkModule,
+    WorkModule,
+    MatButtonModule,
+  ],
+  exports: [],
+  declarations: [RxChunkBasicComponent],
+  providers: [],
+})
+export class RxChunkBasicModule {}
diff --git a/apps/demos/src/app/features/template/chunk/rx-chunk-demo.module.ts b/apps/demos/src/app/features/template/chunk/rx-chunk-demo.module.ts
@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { ROUTES } from './rx-chunk.routes';
+
+@NgModule({
+  imports: [CommonModule, RouterModule.forChild(ROUTES)],
+})
+export class RxChunkDemoModule {}
diff --git a/apps/demos/src/app/features/template/chunk/rx-chunk.menu.ts b/apps/demos/src/app/features/template/chunk/rx-chunk.menu.ts
@@ -0,0 +1,6 @@
+export const RX_CHUNK_MENU_ITEMS = [
+  {
+    label: 'Basic',
+    link: 'basic',
+  },
+];
diff --git a/apps/demos/src/app/features/template/chunk/rx-chunk.routes.ts b/apps/demos/src/app/features/template/chunk/rx-chunk.routes.ts
@@ -0,0 +1,14 @@
+import { Routes } from '@angular/router';
+
+export const ROUTES: Routes = [
+  {
+    path: '',
+    redirectTo: 'basic',
+    pathMatch: 'full',
+  },
+  {
+    path: 'basic',
+    loadChildren: () =>
+      import('./basic/rx-chunk-basic.module').then((m) => m.RxChunkBasicModule),
+  },
+];
diff --git a/apps/demos/src/app/features/template/template-shell.menu.ts b/apps/demos/src/app/features/template/template-shell.menu.ts
@@ -1,3 +1,4 @@
+import { RX_CHUNK_MENU_ITEMS } from './chunk/rx-chunk.menu';
 import { PUSH_PIPE_MENU } from './push/push.menu';
 import { MENU_ITEMS as RX_LET_MENU_ITEMS } from './rx-let/rx-let.menu';
 import { MENU_ITEMS as RX_IF_MENU_ITEMS } from './rx-if/rx-if.menu';
@@ -39,6 +40,11 @@ export const TEMPLATE_MENU = [
     link: 'rx-for',
     children: RX_FOR_MENU_ITEMS,
   },
+  {
+    label: '*rxChunk',
+    link: 'rx-chunk',
+    children: RX_CHUNK_MENU_ITEMS,
+  },
   {
     label: 'Virtual Scrolling',
     link: 'rx-virtual-for',

diff --git a/apps/demos/src/app/features/template/template-shell.module.ts b/apps/demos/src/app/features/template/template-shell.module.ts
@@ -17,6 +17,11 @@ const ROUTES: Routes = [
     loadChildren: () =>
       import('./rx-let/rx-let-demo.module').then((m) => m.RxLetDemoModule),
   },
+  {
+    path: 'rx-chunk',
+    loadChildren: () =>
+      import('./chunk/rx-chunk-demo.module').then((m) => m.RxChunkDemoModule),
+  },
   {
     path: 'rx-if',
     loadChildren: () =>
@@ -31,7 +36,7 @@ const ROUTES: Routes = [
     path: 'rx-virtual-for',
     loadChildren: () =>
       import('./rx-virtual-for/rx-virtual-for.module').then(
-        (m) => m.RxVirtualForDemoModule
+        (m) => m.RxVirtualForDemoModule,
       ),
   },
   {
@@ -48,7 +53,7 @@ const ROUTES: Routes = [
     path: 'rx-context',
     loadChildren: () =>
       import('./rx-context/rx-context.routed.module').then(
-        (m) => m.RxContextRoutedModule
+        (m) => m.RxContextRoutedModule,
       ),
   },
   {
@@ -60,14 +65,14 @@ const ROUTES: Routes = [
     path: 'view-port-prio',
     loadChildren: () =>
       import('./viewport-prio/viewport-prio-demo.module').then(
-        (m) => m.ViewportPrioModule
+        (m) => m.ViewportPrioModule,
       ),
   },
   {
     path: 'render-callback',
     loadChildren: () =>
       import('./render-callback/render-callback.module').then(
-        (m) => m.RenderCallbackModule
+        (m) => m.RenderCallbackModule,
       ),
   },
 ];

diff --git a/apps/demos/src/app/shared/debug-helper/visualizer/visualizer/work-visualizer.component.ts b/apps/demos/src/app/shared/debug-helper/visualizer/visualizer/work-visualizer.component.ts
@@ -81,6 +81,8 @@ export class WorkVisualizerComponent extends Hooks {
   @Input()
   renderingsOn = false;
 
+  @Input() reCreateContentOnCd = true;
+
   changeO$ = new ReplaySubject<Observable<any>>(1);
 
   @Input()
@@ -105,24 +107,30 @@ export class WorkVisualizerComponent extends Hooks {
         this.changeO$.pipe(
           distinctUntilChanged(),
           switchMap((o$) =>
-            !!this.key ? o$.pipe(map((s) => s[this.key])) : o$
+            !!this.key ? o$.pipe(map((s) => s[this.key])) : o$,
           ),
           distinctUntilChanged(),
-          tap((v) => console.log('value', v))
-        )
-      )
-    )
+          tap((v) => console.log('value', v)),
+        ),
+      ),
+    ),
   );
 
+  private items: any[];
+
   constructor() {
     super();
   }
 
   getChildren(): number[] {
+    if (!this.reCreateContentOnCd && this.items) {
+      return this.items;
+    }
     const items = [];
     for (let i = 0; i <= this.work * 10; i++) {
       items.push(Math.ceil(Math.random() * 100));
     }
-    return items;
+    this.items = items;
+    return this.items;
   }
 }
diff --git a/libs/template/chunk/ng-package.json b/libs/template/chunk/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/package.schema.json",
+  "lib": {
+    "entryFile": "src/index.ts",
+    "flatModuleFile": "template-chunk"
+  }
+}
diff --git a/libs/template/chunk/src/index.ts b/libs/template/chunk/src/index.ts
@@ -0,0 +1 @@
+export { RxChunk } from './lib/chunk.directive';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { RxChunk } from './lib/chunk.directive';