fix: optimize React template discover renders

package.json

@@ -44,7 +44,7 @@
     "axe-core": "4.10.2",
     "cheerio": "1.0.0-rc.10",
     "codelyzer": "6.0.2",
-    "devextreme-internal-tools": "16.3.1",
+    "devextreme-internal-tools": "16.4.1",
     "http-server": "14.1.1",
     "husky": "8.0.3",
     "jest": "29.7.0",

packages/devextreme-angular/src/ui/context-menu/nested/item-dxi.ts

@@ -10,7 +10,10 @@ import {
     Inject,
     AfterViewInit,
     SkipSelf,
-    Input
+    Input,
+    ContentChildren,
+    forwardRef,
+    QueryList
 } from '@angular/core';
 
 import { DOCUMENT } from '@angular/common';
@@ -122,6 +125,14 @@ export class DxiContextMenuItemComponent extends CollectionNestedOption implemen
     }
 
 
+    @ContentChildren(forwardRef(() => DxiContextMenuItemComponent))
+    get itemsChildren(): QueryList<DxiContextMenuItemComponent> {
+        return this._getOption('items');
+    }
+    set itemsChildren(value) {
+        this.setChildren('items', value);
+    }
+
     constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
             @Host() optionHost: NestedOptionHost,
             private renderer: Renderer2,

packages/devextreme-angular/src/ui/data-grid/nested/filter-builder-popup.ts

@@ -10,7 +10,10 @@ import {
     SkipSelf,
     Input,
     Output,
-    EventEmitter
+    EventEmitter,
+    ContentChildren,
+    forwardRef,
+    QueryList
 } from '@angular/core';
 
 
@@ -30,6 +33,7 @@ import {
     NestedOptionHost,
 } from 'devextreme-angular/core';
 import { NestedOption } from 'devextreme-angular/core';
+import { DxiDataGridToolbarItemComponent } from './toolbar-item-dxi';
 
 
 @Component({
@@ -464,6 +468,14 @@ export class DxoDataGridFilterBuilderPopupComponent extends NestedOption impleme
     }
 
 
+    @ContentChildren(forwardRef(() => DxiDataGridToolbarItemComponent))
+    get toolbarItemsChildren(): QueryList<DxiDataGridToolbarItemComponent> {
+        return this._getOption('toolbarItems');
+    }
+    set toolbarItemsChildren(value) {
+        this.setChildren('toolbarItems', value);
+    }
+
     constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
             @Host() optionHost: NestedOptionHost) {
         super();

packages/devextreme-angular/src/ui/diagram/nested/command-dxi.ts

@@ -6,7 +6,10 @@ import {
     NgModule,
     Host,
     SkipSelf,
-    Input
+    Input,
+    ContentChildren,
+    forwardRef,
+    QueryList
 } from '@angular/core';
 
 
@@ -19,6 +22,7 @@ import {
     NestedOptionHost,
 } from 'devextreme-angular/core';
 import { CollectionNestedOption } from 'devextreme-angular/core';
+import { DxiDiagramItemComponent } from './item-dxi';
 
 
 @Component({
@@ -74,6 +78,14 @@ export class DxiDiagramCommandComponent extends CollectionNestedOption {
     }
 
 
+    @ContentChildren(forwardRef(() => DxiDiagramItemComponent))
+    get itemsChildren(): QueryList<DxiDiagramItemComponent> {
+        return this._getOption('items');
+    }
+    set itemsChildren(value) {
+        this.setChildren('items', value);
+    }
+
     constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
             @Host() optionHost: NestedOptionHost) {
         super();

packages/devextreme-angular/src/ui/file-manager/nested/context-menu-item-dxi.ts

@@ -6,7 +6,10 @@ import {
     NgModule,
     Host,
     SkipSelf,
-    Input
+    Input,
+    ContentChildren,
+    forwardRef,
+    QueryList
 } from '@angular/core';
 
 
@@ -18,6 +21,7 @@ import {
     NestedOptionHost,
 } from 'devextreme-angular/core';
 import { CollectionNestedOption } from 'devextreme-angular/core';
+import { DxiFileManagerItemComponent } from './item-dxi';
 
 
 @Component({
@@ -113,6 +117,14 @@ export class DxiFileManagerContextMenuItemComponent extends CollectionNestedOpti
     }
 
 
+    @ContentChildren(forwardRef(() => DxiFileManagerItemComponent))
+    get itemsChildren(): QueryList<DxiFileManagerItemComponent> {
+        return this._getOption('items');
+    }
+    set itemsChildren(value) {
+        this.setChildren('items', value);
+    }
+
     constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
             @Host() optionHost: NestedOptionHost) {
         super();

packages/devextreme-angular/src/ui/file-manager/nested/item-dxi.ts

@@ -6,7 +6,10 @@ import {
     NgModule,
     Host,
     SkipSelf,
-    Input
+    Input,
+    ContentChildren,
+    forwardRef,
+    QueryList
 } from '@angular/core';
 
 
@@ -163,6 +166,14 @@ export class DxiFileManagerItemComponent extends CollectionNestedOption {
     }
 
 
+    @ContentChildren(forwardRef(() => DxiFileManagerItemComponent))
+    get itemsChildren(): QueryList<DxiFileManagerItemComponent> {
+        return this._getOption('items');
+    }
+    set itemsChildren(value) {
+        this.setChildren('items', value);
+    }
+
     constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
             @Host() optionHost: NestedOptionHost) {
         super();

packages/devextreme-angular/src/ui/gantt/index.ts

@@ -66,6 +66,7 @@ import { DxoGanttColumnHeaderFilterModule } from 'devextreme-angular/ui/gantt/ne
 import { DxoGanttColumnHeaderFilterSearchModule } from 'devextreme-angular/ui/gantt/nested';
 import { DxoGanttContextMenuModule } from 'devextreme-angular/ui/gantt/nested';
 import { DxiGanttContextMenuItemModule } from 'devextreme-angular/ui/gantt/nested';
+import { DxiGanttContextMenuItemItemModule } from 'devextreme-angular/ui/gantt/nested';
 import { DxoGanttDependenciesModule } from 'devextreme-angular/ui/gantt/nested';
 import { DxoGanttEditingModule } from 'devextreme-angular/ui/gantt/nested';
 import { DxoGanttFilterRowModule } from 'devextreme-angular/ui/gantt/nested';
@@ -1372,6 +1373,7 @@ export class DxGanttComponent extends DxComponent implements OnDestroy, OnChange
     DxoGanttColumnHeaderFilterSearchModule,
     DxoGanttContextMenuModule,
     DxiGanttContextMenuItemModule,
+    DxiGanttContextMenuItemItemModule,
     DxoGanttDependenciesModule,
     DxoGanttEditingModule,
     DxoGanttFilterRowModule,
@@ -1424,6 +1426,7 @@ export class DxGanttComponent extends DxComponent implements OnDestroy, OnChange
     DxoGanttColumnHeaderFilterSearchModule,
     DxoGanttContextMenuModule,
     DxiGanttContextMenuItemModule,
+    DxiGanttContextMenuItemItemModule,
     DxoGanttDependenciesModule,
     DxoGanttEditingModule,
     DxoGanttFilterRowModule,

packages/devextreme-angular/src/ui/gantt/nested/context-menu-item-dxi.ts

@@ -10,7 +10,10 @@ import {
     Inject,
     AfterViewInit,
     SkipSelf,
-    Input
+    Input,
+    ContentChildren,
+    forwardRef,
+    QueryList
 } from '@angular/core';
 
 import { DOCUMENT } from '@angular/common';
@@ -27,6 +30,8 @@ import {
     DxTemplateHost
 } from 'devextreme-angular/core';
 import { CollectionNestedOption } from 'devextreme-angular/core';
+import { DxiGanttContextMenuItemItemComponent } from './context-menu-item-item-dxi';
+import { DxiGanttItemComponent } from './item-dxi';
 
 
 @Component({
@@ -131,6 +136,22 @@ export class DxiGanttContextMenuItemComponent extends CollectionNestedOption imp
     }
 
 
+    @ContentChildren(forwardRef(() => DxiGanttContextMenuItemItemComponent))
+    get contextMenuItemItemsChildren(): QueryList<DxiGanttContextMenuItemItemComponent> {
+        return this._getOption('items');
+    }
+    set contextMenuItemItemsChildren(value) {
+        this.setChildren('items', value);
+    }
+
+    @ContentChildren(forwardRef(() => DxiGanttItemComponent))
+    get itemsChildren(): QueryList<DxiGanttItemComponent> {
+        return this._getOption('items');
+    }
+    set itemsChildren(value) {
+        this.setChildren('items', value);
+    }
+
     constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
             @Host() optionHost: NestedOptionHost,
             private renderer: Renderer2,

packages/devextreme-angular/src/ui/gantt/nested/context-menu-item-item-dxi.ts

@@ -0,0 +1,160 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    Component,
+    NgModule,
+    Host,
+    ElementRef,
+    Renderer2,
+    Inject,
+    AfterViewInit,
+    SkipSelf,
+    Input
+} from '@angular/core';
+
+import { DOCUMENT } from '@angular/common';
+
+
+import { dxContextMenuItem } from 'devextreme/ui/context_menu';
+
+import {
+    NestedOptionHost,
+    extractTemplate,
+    DxTemplateDirective,
+    IDxTemplateHost,
+    DxTemplateHost
+} from 'devextreme-angular/core';
+import { CollectionNestedOption } from 'devextreme-angular/core';
+
+
+@Component({
+    selector: 'dxi-gantt-context-menu-item-item',
+    template: '<ng-content></ng-content>',
+    styles: [':host { display: block; }'],
+    providers: [NestedOptionHost, DxTemplateHost]
+})
+export class DxiGanttContextMenuItemItemComponent extends CollectionNestedOption implements AfterViewInit,
+    IDxTemplateHost {
+    @Input()
+    get beginGroup(): boolean {
+        return this._getOption('beginGroup');
+    }
+    set beginGroup(value: boolean) {
+        this._setOption('beginGroup', value);
+    }
+
+    @Input()
+    get closeMenuOnClick(): boolean {
+        return this._getOption('closeMenuOnClick');
+    }
+    set closeMenuOnClick(value: boolean) {
+        this._setOption('closeMenuOnClick', value);
+    }
+
+    @Input()
+    get disabled(): boolean {
+        return this._getOption('disabled');
+    }
+    set disabled(value: boolean) {
+        this._setOption('disabled', value);
+    }
+
+    @Input()
+    get icon(): string {
+        return this._getOption('icon');
+    }
+    set icon(value: string) {
+        this._setOption('icon', value);
+    }
+
+    @Input()
+    get items(): Array<dxContextMenuItem> {
+        return this._getOption('items');
+    }
+    set items(value: Array<dxContextMenuItem>) {
+        this._setOption('items', value);
+    }
+
+    @Input()
+    get selectable(): boolean {
+        return this._getOption('selectable');
+    }
+    set selectable(value: boolean) {
+        this._setOption('selectable', value);
+    }
+
+    @Input()
+    get selected(): boolean {
+        return this._getOption('selected');
+    }
+    set selected(value: boolean) {
+        this._setOption('selected', value);
+    }
+
+    @Input()
+    get template(): any {
+        return this._getOption('template');
+    }
+    set template(value: any) {
+        this._setOption('template', value);
+    }
+
+    @Input()
+    get text(): string {
+        return this._getOption('text');
+    }
+    set text(value: string) {
+        this._setOption('text', value);
+    }
+
+    @Input()
+    get visible(): boolean {
+        return this._getOption('visible');
+    }
+    set visible(value: boolean) {
+        this._setOption('visible', value);
+    }
+
+
+    protected get _optionPath() {
+        return 'items';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost,
+            private renderer: Renderer2,
+            @Inject(DOCUMENT) private document: any,
+            @Host() templateHost: DxTemplateHost,
+            private element: ElementRef) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+        templateHost.setHost(this);
+    }
+
+    setTemplate(template: DxTemplateDirective) {
+        this.template = template;
+    }
+    ngAfterViewInit() {
+        extractTemplate(this, this.element, this.renderer, this.document);
+    }
+
+
+
+    ngOnDestroy() {
+        this._deleteRemovedOptions(this._fullOptionPath());
+    }
+
+}
+
+@NgModule({
+  declarations: [
+    DxiGanttContextMenuItemItemComponent
+  ],
+  exports: [
+    DxiGanttContextMenuItemItemComponent
+  ],
+})
+export class DxiGanttContextMenuItemItemModule { }