chore: merge main

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

@@ -1,34 +1,38 @@
 export const MENU_ITEMS = [
   {
     label: 'Basic',
-    link: 'basic'
+    link: 'basic',
+  },
+  {
+    label: 'Scoping',
+    link: 'scoping',
   },
   {
     label: 'Error Handling',
-    link: 'error-handling'
+    link: 'error-handling',
   },
   {
     label: 'Exception Handling',
-    link: 'exception-handling'
+    link: 'exception-handling',
   },
   {
     label: 'Http Errors',
-    link: 'http-errors'
+    link: 'http-errors',
   },
   {
     label: '*ngif hack',
-    link: 'ng-if-hack'
+    link: 'ng-if-hack',
   },
   {
     label: 'Template Bindings',
-    link: 'template-bindings'
+    link: 'template-bindings',
   },
   {
     label: 'Preloading Techniques',
-    link: 'preloading-images'
+    link: 'preloading-images',
   },
   {
     label: 'Lazy Components',
-    link: 'lazy-components'
-  }
+    link: 'lazy-components',
+  },
 ];

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

@@ -3,46 +3,63 @@ import { Routes } from '@angular/router';
 export const ROUTES: Routes = [
   {
     path: '',
-    redirectTo: 'basic'
+    redirectTo: 'basic',
   },
   {
     path: 'basic',
-    loadChildren: () => import('./basic/rx-let-basic.module')
-      .then(m => m.RxLetBasicModule)
+    loadChildren: () =>
+      import('./basic/rx-let-basic.module').then((m) => m.RxLetBasicModule),
+  },
+  {
+    path: 'scoping',
+    loadChildren: () =>
+      import('./scoping/rx-let-scoping.module').then(
+        (m) => m.RxLetScopingModule
+      ),
   },
   {
     path: 'error-handling',
-    loadChildren: () => import('./error-handling/error-handing.module')
-      .then(m => m.ErrorHandingModule)
+    loadChildren: () =>
+      import('./error-handling/error-handing.module').then(
+        (m) => m.ErrorHandingModule
+      ),
   },
   {
     path: 'exception-handling',
-    loadChildren: () => import('./exception-handling/rx-let-exception-handling.module')
-      .then(m => m.RxLetExceptionHandlingModule)
+    loadChildren: () =>
+      import('./exception-handling/rx-let-exception-handling.module').then(
+        (m) => m.RxLetExceptionHandlingModule
+      ),
   },
   {
     path: 'http-errors',
-    loadChildren: () => import('./http-errors/http-error.module')
-      .then(m => m.HttpErrorModule)
+    loadChildren: () =>
+      import('./http-errors/http-error.module').then((m) => m.HttpErrorModule),
   },
   {
     path: 'template-bindings',
-    loadChildren: () => import('./let-template-binding/let-template-binding.module')
-      .then(m => m.LetTemplateBindingModule)
+    loadChildren: () =>
+      import('./let-template-binding/let-template-binding.module').then(
+        (m) => m.LetTemplateBindingModule
+      ),
   },
   {
     path: 'ng-if-hack',
-    loadChildren: () => import('./ng-if-hack/ng-if-hack.module')
-      .then(m => m.NgIfHackModule)
+    loadChildren: () =>
+      import('./ng-if-hack/ng-if-hack.module').then((m) => m.NgIfHackModule),
   },
   {
     path: 'preloading-images',
-    loadChildren: () => import('./preloading-images/preloading-images.module')
-      .then(m => m.PreloadingImagesModule)
+    loadChildren: () =>
+      import('./preloading-images/preloading-images.module').then(
+        (m) => m.PreloadingImagesModule
+      ),
   },
   {
     path: 'lazy-components',
-    loadChildren: () => import('./lazy-loading-components/lazy-loading-components.module')
-      .then(m => m.LazyLoadingComponentsModule)
-  }
+    loadChildren: () =>
+      import('./lazy-loading-components/lazy-loading-components.module').then(
+        (m) => m.LazyLoadingComponentsModule
+      ),
+  },
 ];

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

@@ -0,0 +1,38 @@
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  ContentChildren,
+  Directive,
+  OnInit,
+  QueryList,
+} from '@angular/core';
+import { startWith } from 'rxjs';
+
+@Directive({
+  selector: '[rxaContentChild]',
+})
+export class ContentChildDirective {}
+
+@Component({
+  selector: 'rxa-content-parent',
+  template: ` <ng-content></ng-content> `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ContentParent implements AfterContentInit {
+  // @ContentChildren(ContentChildDirective) children: QueryList<ContentChildDirective>;
+  @ContentChild(ContentChildDirective)
+  set child(child: ContentChildDirective) {
+    console.log('child', child);
+  }
+
+  ngAfterContentInit() {
+    /*console.log('contentParent', this.children);
+    this.children.changes
+      .pipe(startWith(this.children))
+      .subscribe((children) => {
+        console.log('children', children);
+      });*/
+  }
+}

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

@@ -0,0 +1,128 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  QueryList,
+  ViewChildren,
+} from '@angular/core';
+import { LetDirective } from '@rx-angular/template/let';
+import { Subject } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'rxa-rx-let-poc',
+  template: `
+    <rxa-visualizer>
+      <div visualizerHeader>
+        <h2>rxLet SCOPING</h2>
+        <rxa-strategy-select
+          (strategyChange)="strategy = $event"
+        ></rxa-strategy-select>
+        <rxa-value-provider
+          #v="rxaValueProvider"
+          [buttons]="true"
+        ></rxa-value-provider>
+        <button (click)="v.next()" class="mr-1">toggle</button>
+        <button [unpatch] (click)="v.next()">toggle (unpatched)</button>
+      </div>
+      <div class="row w-100">
+        <div class="col-sm-3">
+          <h3>RxLet</h3>
+          <rxa-content-parent>
+            <div
+              class="dh-embedded-view"
+              *rxLet="
+                v.incremental$;
+                let value;
+                parent: withParent;
+                renderCallback: renderCallback;
+                strategy: strategy
+              "
+            >
+              <rxa-dirty-check></rxa-dirty-check>
+              Value: {{ value }}
+              <div #letChild rxaContentChild></div>
+            </div>
+          </rxa-content-parent>
+        </div>
+        <div class="col-sm-3">
+          <h3>RxLet</h3>
+          <rxa-content-parent>
+            <div
+              class="dh-embedded-view"
+              *rxLet="
+                v.incremental$;
+                let value;
+                parent: withParent;
+                renderCallback: renderCallback;
+                strategy: strategy
+              "
+            >
+              <rxa-dirty-check></rxa-dirty-check>
+              Value: {{ value }}
+              <div #letChild rxaContentChild></div>
+            </div>
+          </rxa-content-parent>
+        </div>
+        <div class="col-sm-3">
+          <h3>RxLet</h3>
+          <rxa-content-parent>
+            <div
+              class="dh-embedded-view"
+              *rxLet="
+                v.incremental$;
+                let value;
+                parent: withParent;
+                renderCallback: renderCallback;
+                strategy: strategy
+              "
+            >
+              <rxa-dirty-check></rxa-dirty-check>
+              Value: {{ value }}
+              <div #letChild rxaContentChild></div>
+            </div>
+          </rxa-content-parent>
+        </div>
+        <div class="col-sm-3">
+          <h3>RxLet</h3>
+          <rxa-content-parent>
+            <div
+              class="dh-embedded-view"
+              *rxLet="
+                v.incremental$;
+                let value;
+                parent: withParent;
+                renderCallback: renderCallback;
+                strategy: strategy
+              "
+            >
+              <rxa-dirty-check></rxa-dirty-check>
+              Value: {{ value }}
+              <div #letChild rxaContentChild></div>
+            </div>
+          </rxa-content-parent>
+        </div>
+      </div>
+    </rxa-visualizer>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RxLetScopingComponent implements AfterViewInit {
+  private _renderCalled = 0;
+  readonly renderCallback = new Subject();
+
+  @ViewChildren('letChild') letChildren: QueryList<ElementRef>;
+
+  rendered$ = this.renderCallback.pipe(map(() => this._renderCalled++));
+
+  strategy;
+
+  withParent = true;
+
+  ngAfterViewInit() {
+    this.letChildren.changes.subscribe((letDirs) => {
+      console.log('letChildren', letDirs);
+    });
+  }
+}

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

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule, Routes } from '@angular/router';
+import { UnpatchEventsModule } from '../../../../rx-angular-pocs/template/directives/unpatch/unpatch-events.module';
+import { DirtyChecksModule } from '../../../../shared/debug-helper/dirty-checks/index';
+import { StrategySelectModule } from '../../../../shared/debug-helper/strategy-select/strategy-select.module';
+import { ValueProvidersModule } from '../../../../shared/debug-helper/value-provider/value-providers.module';
+import { VisualizerModule } from '../../../../shared/debug-helper/visualizer/visualizer.module';
+import { ContentChildDirective, ContentParent } from './intermediate.component';
+import { RxLetScopingComponent } from './rx-let-scoping.component';
+import { LetModule } from '@rx-angular/template/let';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: RxLetScopingComponent,
+  },
+];
+
+@NgModule({
+  declarations: [RxLetScopingComponent, ContentParent, ContentChildDirective],
+  imports: [
+    RouterModule.forChild(routes),
+    MatButtonModule,
+    ValueProvidersModule,
+    UnpatchEventsModule,
+    StrategySelectModule,
+    VisualizerModule,
+    LetModule,
+    DirtyChecksModule,
+  ],
+})
+export class RxLetScopingModule {}

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

@@ -1,4 +1,10 @@
-import { AfterViewInit, Component, ElementRef, Input, Renderer2 } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  Input,
+  Renderer2,
+} from '@angular/core';
 
 @Component({
   selector: 'rxa-dirty-check',
@@ -8,12 +14,12 @@ import { AfterViewInit, Component, ElementRef, Input, Renderer2 } from '@angular
     </div>
   `,
   styles: [
-      `
+    `
       :host .indicator {
         border: 1px solid #ffff005f;
       }
-    `
-  ]
+    `,
+  ],
   //changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DirtyChecksComponent implements AfterViewInit {
@@ -23,8 +29,7 @@ export class DirtyChecksComponent implements AfterViewInit {
   @Input()
   log;
 
-  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
-  }
+  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
 
   ngAfterViewInit() {
     this.displayElem = this.elementRef.nativeElement.children[0].children[0];
@@ -35,7 +40,7 @@ export class DirtyChecksComponent implements AfterViewInit {
     if (this.log) {
       console.log('dirtyCheck', this.log);
     } else {
-
     }
+    return this.dirtyChecks++;
   }
 }

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

@@ -22,7 +22,8 @@ import {
   createListTemplateManager,
   RxDefaultListViewContext,
   RxListManager,
-  RxListViewComputedContext, RxListViewContext
+  RxListViewComputedContext,
+  RxListViewContext,
 } from '@rx-angular/cdk/template';
 
 import { ReplaySubject, Subject, Observable, Subscription } from 'rxjs';
@@ -632,7 +633,6 @@ export class RxFor<T, U extends NgIterable<T> = NgIterable<T>>
       iterableDiffers: this.iterableDiffers,
       renderSettings: {
         cdRef: this.cdRef,
-        eRef: this.eRef,
         strategies: this.strategyProvider.strategies as any, // TODO: move strategyProvider
         defaultStrategyName: this.strategyProvider.primaryStrategy,
         parent: coerceBooleanProperty(this.renderParent),