From 846d757f191b7bf1d0d9df5b9a387cd5ef5fa83a Mon Sep 17 00:00:00 2001 From: Sheik Althaf Date: Thu, 16 Jan 2025 08:53:27 +0530 Subject: [PATCH] refactor(devtools): mark devtools components onpush mark all the devtools components onpush because now are only depending on signals for template updates --- .../resolution-path.component.ts | 2 ++ .../lib/devtools-tabs/devtools-tabs.component.ts | 11 ++++++++++- .../directive-explorer.component.ts | 2 ++ .../breadcrumbs/breadcrumbs.component.ts | 2 ++ .../directive-forest/filter/filter.component.ts | 3 ++- .../property-tab/property-tab.component.ts | 5 +++-- .../property-view/property-editor.component.ts | 4 +++- .../property-view/property-preview.component.ts | 3 ++- .../property-view/property-tab-body.component.ts | 5 +++-- .../property-view/property-view-body.component.ts | 12 +++++++++++- .../property-view/property-view-header.component.ts | 3 ++- .../property-view/property-view-tree.component.ts | 3 ++- .../property-view/property-view.component.ts | 3 ++- .../injector-providers.component.ts | 3 ++- .../injector-tree/injector-tree.component.ts | 2 ++ .../profiler/profiler-import-dialog.component.ts | 3 ++- .../devtools-tabs/profiler/profiler.component.ts | 3 ++- .../profiler/timeline/frame-selector.component.ts | 2 ++ .../profiler/timeline/recording-dialog.component.ts | 3 ++- .../profiler/timeline/recording-modal.component.ts | 3 ++- .../timeline/timeline-controls.component.ts | 3 ++- .../profiler/timeline/timeline.component.ts | 11 ++++++++++- .../router-tree/router-tree.component.ts | 13 +++++++++++-- .../ng-devtools/src/lib/devtools.component.ts | 11 ++++++++++- .../projects/shell-browser/src/app/app.component.ts | 3 ++- 25 files changed, 95 insertions(+), 23 deletions(-) diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path.component.ts index de165827c7e3..f66b417464ba 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path.component.ts @@ -8,6 +8,7 @@ import { afterNextRender, + ChangeDetectionStrategy, Component, computed, effect, @@ -22,6 +23,7 @@ import {InjectorTreeNode, InjectorTreeVisualizer} from './injector-tree-visualiz @Component({ selector: 'ng-resolution-path', + changeDetection: ChangeDetectionStrategy.OnPush, template: `
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts index 7a014a2542cc..96e291fd6e03 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts @@ -6,7 +6,15 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, computed, inject, input, output, signal} from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + computed, + inject, + input, + output, + signal, +} from '@angular/core'; import {MatIcon} from '@angular/material/icon'; import {MatMenu, MatMenuItem, MatMenuTrigger} from '@angular/material/menu'; import {MatSlideToggle} from '@angular/material/slide-toggle'; @@ -30,6 +38,7 @@ type Tabs = 'Components' | 'Profiler' | 'Router Tree' | 'Injector Tree'; selector: 'ng-devtools-tabs', templateUrl: './devtools-tabs.component.html', styleUrls: ['./devtools-tabs.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, imports: [ MatTabNav, MatTabNavPanel, diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts index 3f0e07979a72..6e4365e6c920 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts @@ -16,6 +16,7 @@ import { output, signal, viewChild, + ChangeDetectionStrategy, } from '@angular/core'; import { ComponentExplorerView, @@ -67,6 +68,7 @@ const sameDirectives = (a: IndexedNode, b: IndexedNode) => { selector: 'ng-directive-explorer', templateUrl: './directive-explorer.component.html', styleUrls: ['./directive-explorer.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, providers: [ { provide: ElementPropertyResolver, diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts index 2c254e100e69..54d4b6563003 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts @@ -7,6 +7,7 @@ */ import { + ChangeDetectionStrategy, Component, computed, effect, @@ -26,6 +27,7 @@ import {MatCard} from '@angular/material/card'; selector: 'ng-breadcrumbs', templateUrl: './breadcrumbs.component.html', styleUrls: ['./breadcrumbs.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCard, MatIcon, MatButton], }) export class BreadcrumbsComponent { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.ts index 50d8f158cbf3..12be02bd186c 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, input, output} from '@angular/core'; +import {ChangeDetectionStrategy, Component, input, output} from '@angular/core'; import {MatIcon} from '@angular/material/icon'; import {MatCard} from '@angular/material/card'; @@ -14,6 +14,7 @@ import {MatCard} from '@angular/material/card'; selector: 'ng-filter', templateUrl: './filter.component.html', styleUrls: ['./filter.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCard, MatIcon], }) export class FilterComponent { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts index 6e916a8c7d61..8dc44b3b72d7 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, input, output} from '@angular/core'; +import {ChangeDetectionStrategy, Component, input, output} from '@angular/core'; import {DirectivePosition} from 'protocol'; import {IndexedNode} from '../directive-forest/index-forest'; @@ -15,8 +15,9 @@ import {PropertyTabBodyComponent} from './property-view/property-tab-body.compon import {PropertyTabHeaderComponent} from './property-tab-header.component'; @Component({ - templateUrl: './property-tab.component.html', selector: 'ng-property-tab', + templateUrl: './property-tab.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, imports: [PropertyTabHeaderComponent, PropertyTabBodyComponent], }) export class PropertyTabComponent { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts index b9994c12e28c..ce726af285c3 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.ts @@ -15,6 +15,7 @@ import { output, signal, viewChild, + ChangeDetectionStrategy, } from '@angular/core'; import {FormsModule} from '@angular/forms'; import {ContainerType} from 'protocol'; @@ -36,9 +37,10 @@ const parseValue = (value: EditorResult): EditorResult => { }; @Component({ - templateUrl: './property-editor.component.html', selector: 'ng-property-editor', + templateUrl: './property-editor.component.html', styleUrls: ['./property-editor.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], }) export class PropertyEditorComponent { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts index 0c8ac06fe0c1..7012d515dc33 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, computed, input, output} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, input, output} from '@angular/core'; import {PropType} from 'protocol'; import {FlatNode} from '../../property-resolver/element-property-resolver'; @@ -15,6 +15,7 @@ import {FlatNode} from '../../property-resolver/element-property-resolver'; selector: 'ng-property-preview', templateUrl: './property-preview.component.html', styleUrls: ['./property-preview.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class PropertyPreviewComponent { readonly node = input.required(); diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts index 90e5965a9228..4c7afc707a0c 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, computed, input, output} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, input, output} from '@angular/core'; import {DirectivePosition} from 'protocol'; import {IndexedNode} from '../../directive-forest/index-forest'; @@ -14,9 +14,10 @@ import {FlatNode} from '../../property-resolver/element-property-resolver'; import {PropertyViewComponent} from './property-view.component'; @Component({ - templateUrl: './property-tab-body.component.html', selector: 'ng-property-tab-body', + templateUrl: './property-tab-body.component.html', styleUrls: ['./property-tab-body.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, imports: [PropertyViewComponent], }) export class PropertyTabBodyComponent { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts index 0a4282577b07..8ed07fb06862 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts @@ -7,7 +7,14 @@ */ import {CdkDragDrop, moveItemInArray, CdkDropList, CdkDrag} from '@angular/cdk/drag-drop'; -import {Component, computed, forwardRef, input, output} from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + computed, + forwardRef, + input, + output, +} from '@angular/core'; import {DirectivePosition, SerializedInjectedService} from 'protocol'; import { @@ -26,6 +33,7 @@ import {MatExpansionModule} from '@angular/material/expansion'; selector: 'ng-property-view-body', templateUrl: './property-view-body.component.html', styleUrls: ['./property-view-body.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, imports: [ MatExpansionModule, CdkDropList, @@ -106,6 +114,7 @@ export class PropertyViewBodyComponent { @Component({ selector: 'ng-dependency-viewer', + changeDetection: ChangeDetectionStrategy.OnPush, template: ` @@ -173,6 +182,7 @@ export class DependencyViewerComponent { @Component({ selector: 'ng-injected-services', + changeDetection: ChangeDetectionStrategy.OnPush, template: ` @for (dependency of dependencies(); track dependency.position[0]) { }`, diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.ts index abaf5f702874..27b6e33dab6e 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, input, output} from '@angular/core'; +import {ChangeDetectionStrategy, Component, input, output} from '@angular/core'; import {MatIcon} from '@angular/material/icon'; import {MatTooltip} from '@angular/material/tooltip'; import {MatToolbar} from '@angular/material/toolbar'; @@ -15,6 +15,7 @@ import {MatToolbar} from '@angular/material/toolbar'; selector: 'ng-property-view-header', templateUrl: './property-view-header.component.html', styleUrls: ['./property-view-header.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatToolbar, MatTooltip, MatIcon], }) export class PropertyViewHeaderComponent { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts index 435b5d6ea9fb..df05814c90d8 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.ts @@ -7,7 +7,7 @@ */ import {FlatTreeControl} from '@angular/cdk/tree'; -import {Component, input, output} from '@angular/core'; +import {ChangeDetectionStrategy, Component, input, output} from '@angular/core'; import {FlatNode} from '../../property-resolver/element-property-resolver'; import {PropertyDataSource} from '../../property-resolver/property-data-source'; @@ -20,6 +20,7 @@ import {MatTree, MatTreeNode, MatTreeNodeDef, MatTreeNodePadding} from '@angular selector: 'ng-property-view-tree', templateUrl: './property-view-tree.component.html', styleUrls: ['./property-view-tree.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, imports: [ MatTree, MatTreeNode, diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts index b95aa040aaa8..e20efb9317b9 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, computed, inject, input, output} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, inject, input, output} from '@angular/core'; import {DirectivePosition} from 'protocol'; import {ElementPropertyResolver, FlatNode} from '../../property-resolver/element-property-resolver'; @@ -17,6 +17,7 @@ import {PropertyViewHeaderComponent} from './property-view-header.component'; selector: 'ng-property-view', templateUrl: './property-view.component.html', styleUrls: ['./property-view.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, imports: [PropertyViewHeaderComponent, PropertyViewBodyComponent], }) export class PropertyViewComponent { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.ts index 1299a2c4ad5b..08ac2b1048f1 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, computed, inject, input, signal} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, inject, input, signal} from '@angular/core'; import {MatOption} from '@angular/material/core'; import {MatFormField, MatLabel} from '@angular/material/form-field'; import {MatIcon} from '@angular/material/icon'; @@ -20,6 +20,7 @@ import {Events, MessageBus, SerializedInjector, SerializedProviderRecord} from ' selector: 'ng-injector-providers', templateUrl: './injector-providers.component.html', styleUrl: './injector-providers.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, imports: [ MatTableModule, MatIcon, diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.ts index 3c838c666ada..4251a1924f52 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.ts @@ -8,6 +8,7 @@ import { afterNextRender, + ChangeDetectionStrategy, Component, ElementRef, inject, @@ -46,6 +47,7 @@ import { @Component({ selector: 'ng-injector-tree', + changeDetection: ChangeDetectionStrategy.OnPush, imports: [ SplitComponent, SplitAreaDirective, diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts index fe912e6e201e..88121c7c1f08 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, inject} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef, @@ -28,6 +28,7 @@ interface DialogData { selector: 'ng-profiler-import-dialog', templateUrl: './profiler-import-dialog.component.html', styleUrls: ['./profiler-import-dialog.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogActions, MatDialogClose, MatDialogContent, MatDialogTitle, MatButton], }) export class ProfilerImportDialogComponent { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts index e620df1cbdcf..024b0d2dafcc 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, inject, signal} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core'; import {MatDialog} from '@angular/material/dialog'; import {Events, MessageBus, ProfilerFrame} from 'protocol'; import {Subject} from 'rxjs'; @@ -28,6 +28,7 @@ const PROFILER_VERSION = 1; selector: 'ng-profiler', templateUrl: './profiler.component.html', styleUrls: ['./profiler.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCard, MatIconButton, MatTooltip, MatIcon, TimelineComponent], }) export class ProfilerComponent { diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.ts index 6074c15ce6c2..9821606299f0 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.ts @@ -13,6 +13,7 @@ import { } from '@angular/cdk/scrolling'; import { afterRenderEffect, + ChangeDetectionStrategy, Component, computed, ElementRef, @@ -37,6 +38,7 @@ const ITEM_WIDTH = 30; selector: 'ng-frame-selector', templateUrl: './frame-selector.component.html', styleUrls: ['./frame-selector.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, imports: [ MatCard, MatTooltip, diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-dialog.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-dialog.component.ts index 68d704a91724..3adf3c6e8e76 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-dialog.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-dialog.component.ts @@ -6,13 +6,14 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; import {MatProgressBar} from '@angular/material/progress-bar'; @Component({ selector: 'ng-recording-dialog', templateUrl: './recording-dialog.component.html', styleUrls: ['./recording-dialog.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatProgressBar], }) export class RecordingDialogComponent {} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-modal.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-modal.component.ts index e4fecb64a876..670ad02042ed 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-modal.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-modal.component.ts @@ -6,13 +6,14 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; import {RecordingDialogComponent} from './recording-dialog.component'; @Component({ selector: 'ng-recording-modal', templateUrl: './recording-modal.component.html', styleUrls: ['./recording-modal.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, imports: [RecordingDialogComponent], }) export class RecordingModalComponent {} diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.ts index b56a11066961..4903faa8e62d 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, input, model, output} from '@angular/core'; +import {ChangeDetectionStrategy, Component, input, model, output} from '@angular/core'; import {ProfilerFrame} from 'protocol'; import {VisualizationMode} from './visualization-mode'; @@ -22,6 +22,7 @@ import {DecimalPipe} from '@angular/common'; selector: 'ng-timeline-controls', templateUrl: './timeline-controls.component.html', styleUrls: ['./timeline-controls.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, imports: [ MatFormField, MatLabel, diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.ts index 6f902ea7923b..77d9f74ccf05 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.ts @@ -6,7 +6,15 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, computed, effect, input, output, signal} from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + computed, + effect, + input, + output, + signal, +} from '@angular/core'; import {ProfilerFrame} from 'protocol'; import {Observable} from 'rxjs'; @@ -25,6 +33,7 @@ const MAX_HEIGHT = 50; selector: 'ng-recording-timeline', templateUrl: './timeline.component.html', styleUrls: ['./timeline.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, imports: [ RecordingModalComponent, TimelineControlsComponent, diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts index 124313c3bcc3..1dc13edfc8e3 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts @@ -7,19 +7,28 @@ */ import {CommonModule} from '@angular/common'; -import {afterNextRender, Component, effect, ElementRef, input, viewChild} from '@angular/core'; +import { + afterNextRender, + ChangeDetectionStrategy, + Component, + effect, + ElementRef, + input, + viewChild, +} from '@angular/core'; import {MatInputModule} from '@angular/material/input'; import {Route} from 'protocol'; import {RouterTreeVisualizer} from './router-tree-visualizer'; import {MatCheckboxModule} from '@angular/material/checkbox'; const DEFAULT_FILTER = /.^/; + @Component({ selector: 'ng-router-tree', templateUrl: './router-tree.component.html', styleUrls: ['./router-tree.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatInputModule, MatCheckboxModule], - standalone: true, }) export class RouterTreeComponent { private routerTreeSvgContainerRef = viewChild('routerTreeSvgContainer'); diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.ts b/devtools/projects/ng-devtools/src/lib/devtools.component.ts index 00b800d161a2..cb84767ed53f 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools.component.ts +++ b/devtools/projects/ng-devtools/src/lib/devtools.component.ts @@ -9,7 +9,15 @@ import {animate, style, transition, trigger} from '@angular/animations'; import {Platform} from '@angular/cdk/platform'; import {DOCUMENT} from '@angular/common'; -import {Component, computed, inject, OnDestroy, OnInit, signal} from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + computed, + inject, + OnDestroy, + OnInit, + signal, +} from '@angular/core'; import {Events, MessageBus} from 'protocol'; import {interval} from 'rxjs'; @@ -46,6 +54,7 @@ const LAST_SUPPORTED_VERSION = 9; selector: 'ng-devtools', templateUrl: './devtools.component.html', styleUrls: ['./devtools.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, animations: [ trigger('enterAnimation', [ transition(':enter', [style({opacity: 0}), animate('200ms', style({opacity: 1}))]), diff --git a/devtools/projects/shell-browser/src/app/app.component.ts b/devtools/projects/shell-browser/src/app/app.component.ts index 772932fd2790..909cad7b365f 100644 --- a/devtools/projects/shell-browser/src/app/app.component.ts +++ b/devtools/projects/shell-browser/src/app/app.component.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {ChangeDetectorRef, Component, inject, OnInit} from '@angular/core'; +import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit} from '@angular/core'; import {DevToolsComponent} from 'ng-devtools'; import {Events, MessageBus} from 'protocol'; @@ -14,6 +14,7 @@ import {Events, MessageBus} from 'protocol'; selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, imports: [DevToolsComponent], }) export class AppComponent implements OnInit {