Add a zoneless toggle to the dev-app (#28839)

* ci: extend OnPush & standalone lint to dev-app

* build: fix errors due to missing examples

* test: make dev-app OnPush

* test: add a zoneless toggle to dev-app

Author: mmalerba

.prettierignore

@@ -1,5 +1,6 @@
 # Generated files for infrastructure.
 .yarn/releases/*.cjs
+.prettierrc
 
 # These schematic ng-generate files are template files that cannot be formatted.
 src/material/schematics/ng-generate/*/files/**/*
@@ -10,4 +11,4 @@ src/cdk/schematics/ng-generate/*/files/**/*
 src/cdk/schematics/ng-update/test-cases/**/*_input.ts
 src/cdk/schematics/ng-update/test-cases/**/*_expected_output.ts
 src/material/schematics/ng-update/test-cases/**/*_input.ts
-src/material/schematics/ng-update/test-cases/**/*_expected_output.ts
+src/material/schematics/ng-update/test-cases/**/*_expected_output.ts

.prettierrc

@@ -5,5 +5,12 @@
   "quoteProps": "preserve",
   "bracketSpacing": false,
   "arrowParens": "avoid",
-  "embeddedLanguageFormatting": "off"
-}
+  "embeddedLanguageFormatting": "off",
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]}

src/components-examples/example-module.d.ts

@@ -0,0 +1,20 @@
+interface LiveExample {
+  /** Title of the example. */
+  title: string;
+  /** Name of the example component. */
+  componentName: string;
+  /** Selector to match the component of this example. */
+  selector: string;
+  /** Name of the primary file of this example. */
+  primaryFile: string;
+  /** List of files which are part of the example. */
+  files: string[];
+  /** Path to the directory containing the example. */
+  packagePath: string;
+  /** List of additional components which are part of the example. */
+  additionalComponents: string[];
+  /** Path from which to import the xample. */
+  importPath: string;
+}
+
+export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample};

src/dev-app/autocomplete/autocomplete-demo.ts

@@ -6,16 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, inject, ViewChild} from '@angular/core';
-import {FormControl, NgModel, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component, inject, ViewChild} from '@angular/core';
+import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
 import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MatInputModule} from '@angular/material/input';
 import {ThemePalette} from '@angular/material/core';
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {MatInputModule} from '@angular/material/input';
 
 export interface State {
   code: string;
@@ -45,6 +45,7 @@ type DisableStateOption = 'none' | 'first-middle-last' | 'all';
     MatInputModule,
     ReactiveFormsModule,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AutocompleteDemo {
   stateCtrl = new FormControl();
@@ -246,6 +247,7 @@ export class AutocompleteDemo {
   `,
   standalone: true,
   imports: [CommonModule, FormsModule, MatAutocompleteModule, MatButtonModule, MatInputModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AutocompleteDemoExampleDialog {
   constructor(public dialogRef: MatDialogRef<AutocompleteDemoExampleDialog>) {}

src/dev-app/badge/badge-demo.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatBadgeModule} from '@angular/material/badge';
 import {MatButtonModule} from '@angular/material/button';
@@ -19,6 +19,7 @@ import {MatIconModule} from '@angular/material/icon';
   styleUrl: 'badge-demo.css',
   standalone: true,
   imports: [CommonModule, FormsModule, MatBadgeModule, MatButtonModule, MatIconModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BadgeDemo {
   visible = true;

src/dev-app/baseline/baseline-demo.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatCardModule} from '@angular/material/card';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -31,6 +31,7 @@ import {MatToolbarModule} from '@angular/material/toolbar';
     MatSelectModule,
     MatToolbarModule,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BaselineDemo {
   name: string;

src/dev-app/bottom-sheet/bottom-sheet-demo.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, TemplateRef, ViewChild} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component, TemplateRef, ViewChild} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {
   MatBottomSheet,
@@ -44,6 +44,7 @@ const defaultConfig = new MatBottomSheetConfig();
     MatSelectModule,
     MatListModule,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BottomSheetDemo {
   config: MatBottomSheetConfig = {
@@ -80,6 +81,7 @@ export class BottomSheetDemo {
   `,
   standalone: true,
   imports: [CommonModule, MatListModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExampleBottomSheet {
   constructor(private _bottomSheet: MatBottomSheetRef) {}

src/dev-app/button-toggle/button-toggle-demo.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatCheckboxModule} from '@angular/material/checkbox';
@@ -19,6 +19,7 @@ import {MatIconModule} from '@angular/material/icon';
   styleUrl: 'button-toggle-demo.css',
   standalone: true,
   imports: [CommonModule, FormsModule, MatButtonToggleModule, MatCheckboxModule, MatIconModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonToggleDemo {
   isVertical = false;

src/dev-app/button/button-demo.ts

@@ -6,21 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {
-  MatButton,
   MatAnchor,
-  MatFabButton,
+  MatButton,
   MatFabAnchor,
-  MatIconButton,
+  MatFabButton,
   MatIconAnchor,
-  MatMiniFabButton,
+  MatIconButton,
   MatMiniFabAnchor,
+  MatMiniFabButton,
 } from '@angular/material/button';
+import {MatCheckbox} from '@angular/material/checkbox';
 import {MatIcon} from '@angular/material/icon';
 import {MatTooltip} from '@angular/material/tooltip';
-import {MatCheckbox} from '@angular/material/checkbox';
 
 @Component({
   selector: 'button-demo',
@@ -41,6 +41,7 @@ import {MatCheckbox} from '@angular/material/checkbox';
     MatCheckbox,
     FormsModule,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonDemo {
   isDisabled = false;

src/dev-app/card/card-demo.ts

@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ViewEncapsulation} from '@angular/core';
-import {MatCardAppearance, MatCardModule} from '@angular/material/card';
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
+import {MatCardAppearance, MatCardModule} from '@angular/material/card';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 
 @Component({
@@ -19,6 +19,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [MatCardModule, MatButtonModule, MatCheckboxModule, FormsModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardDemo {
   appearance: MatCardAppearance = 'raised';