Move ADEV to zoneless

adev/BUILD.bazel

@@ -79,9 +79,8 @@ APPLICATION_DEPS = [
     "@npm//@lezer/javascript",
     "@npm//@lezer/common",
     "@npm//@xterm/xterm",
+    "@npm//@xterm/addon-fit",
     "@npm//algoliasearch",
-    "@npm//xterm",
-    "@npm//xterm-addon-fit",
     "@npm//angular-split",
     "@npm//zone.js",
 ]

adev/angular.json

@@ -20,11 +20,16 @@
           "builder": "@angular/build:application",
           "options": {
             "externalDependencies": ["path"],
+            "define": {
+              // Until this is merged https://github.com/xtermjs/xterm.js/issues/5030
+              "self": "this"
+            },
             "outputPath": "dist/angular-dev",
             "index": "src/index.html",
             "browser": "src/main.ts",
             "server": "src/main.server.ts",
-            "polyfills": ["src/polyfills.ts", "zone.js"],
+            "ssr": true,
+            "polyfills": [],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/robots.txt", "src/assets"],

adev/src/app/app.component.ts

@@ -7,15 +7,7 @@
  */
 
 import {DOCUMENT, isPlatformBrowser} from '@angular/common';
-import {
-  Component,
-  inject,
-  NgZone,
-  OnInit,
-  PLATFORM_ID,
-  signal,
-  WritableSignal,
-} from '@angular/core';
+import {Component, inject, OnInit, PLATFORM_ID, signal, WritableSignal} from '@angular/core';
 import {NavigationEnd, NavigationSkipped, Router, RouterLink, RouterOutlet} from '@angular/router';
 import {filter, map, skip} from 'rxjs/operators';
 import {
@@ -49,7 +41,6 @@ import {ESCAPE, SEARCH_TRIGGER_KEY} from './core/constants/keys';
 })
 export class AppComponent implements OnInit {
   private readonly document = inject(DOCUMENT);
-  private readonly ngZone = inject(NgZone);
   private readonly router = inject(Router);
   private readonly window = inject(WINDOW);
 
@@ -106,22 +97,16 @@ export class AppComponent implements OnInit {
   }
 
   private setSearchDialogVisibilityOnKeyPress(): void {
-    this.ngZone.runOutsideAngular(() => {
-      this.window.addEventListener('keydown', (event: KeyboardEvent) => {
-        if (event.key === SEARCH_TRIGGER_KEY && (event.metaKey || event.ctrlKey)) {
-          this.ngZone.run(() => {
-            event.preventDefault();
-            this.displaySearchDialog.update((display) => !display);
-          });
-        }
+    this.window.addEventListener('keydown', (event: KeyboardEvent) => {
+      if (event.key === SEARCH_TRIGGER_KEY && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        this.displaySearchDialog.update((display) => !display);
+      }
 
-        if (event.key === ESCAPE && this.displaySearchDialog()) {
-          this.ngZone.run(() => {
-            event.preventDefault();
-            this.displaySearchDialog.set(false);
-          });
-        }
-      });
+      if (event.key === ESCAPE && this.displaySearchDialog()) {
+        event.preventDefault();
+        this.displaySearchDialog.set(false);
+      }
     });
   }
 

adev/src/app/app.config.ts

@@ -14,6 +14,7 @@ import {
   ErrorHandler,
   inject,
   provideZoneChangeDetection,
+  provideExperimentalZonelessChangeDetection,
 } from '@angular/core';
 import {
   DOCS_CONTENT_LOADER,
@@ -68,6 +69,7 @@ export const appConfig: ApplicationConfig = {
         },
       }),
     ),
+    provideExperimentalZonelessChangeDetection(),
     provideClientHydration(),
     provideHttpClient(withFetch()),
     provideAnimationsAsync(),
@@ -91,7 +93,6 @@ export const appConfig: ApplicationConfig = {
       deps: [DOCUMENT],
     },
     {provide: TitleStrategy, useClass: ADevTitleStrategy},
-    provideZoneChangeDetection({eventCoalescing: true}),
     ReferenceScrollHandler,
   ],
 };

adev/src/app/editor/terminal/terminal-handler.service.ts

@@ -8,7 +8,7 @@
 
 import {Injectable} from '@angular/core';
 import {Terminal} from '@xterm/xterm';
-import {FitAddon} from 'xterm-addon-fit';
+import {FitAddon} from '@xterm/addon-fit';
 import {InteractiveTerminal} from './interactive-terminal';
 
 export enum TerminalType {

adev/src/app/editor/terminal/terminal.component.scss

@@ -2,7 +2,7 @@
 // SASS imports, here we're importing a CSS asset
 //
 // stylelint-disable-next-line @angular/no-import
-@import 'xterm/css/xterm.css';
+@import '@xterm/xterm/css/xterm.css';
 
 .docs-tutorial-terminal {
   display: block;

adev/src/app/features/home/home.component.ts

@@ -13,7 +13,6 @@ import {
   Component,
   ElementRef,
   Injector,
-  NgZone,
   OnDestroy,
   OnInit,
   PLATFORM_ID,
@@ -45,7 +44,6 @@ export default class Home implements OnInit, AfterViewInit, OnDestroy {
 
   private readonly document = inject(DOCUMENT);
   private readonly injector = inject(Injector);
-  private readonly ngZone = inject(NgZone);
   private readonly platformId = inject(PLATFORM_ID);
   private readonly window = inject(WINDOW);
   private readonly activatedRoute = inject(ActivatedRoute);
@@ -65,7 +63,7 @@ export default class Home implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
-  ngAfterViewInit(): void {
+  ngAfterViewInit() {
     this.element = this.home.nativeElement;
 
     if (isPlatformBrowser(this.platformId)) {
@@ -77,9 +75,7 @@ export default class Home implements OnInit, AfterViewInit, OnDestroy {
       this.initIntersectionObserver();
 
       if (this.isWebGLAvailable() && !shouldReduceMotion() && !this.isUwu) {
-        this.ngZone.runOutsideAngular(async () => {
-          await this.loadHomeAnimation();
-        });
+        this.loadHomeAnimation();
       }
     }
   }

adev/src/app/features/references/services/reference-scroll-handler.service.ts

@@ -11,7 +11,6 @@ import {
   DestroyRef,
   EnvironmentInjector,
   Injectable,
-  NgZone,
   OnDestroy,
   afterNextRender,
   inject,
@@ -41,7 +40,6 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
   private readonly destroyRef = inject(DestroyRef);
   private readonly document = inject(DOCUMENT);
   private readonly injector = inject(EnvironmentInjector);
-  private readonly ngZone = inject(NgZone);
   private readonly window = inject(WINDOW);
 
   private readonly cardOffsetTop = new Map<string, number>();
@@ -75,35 +73,31 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
       return;
     }
 
-    this.ngZone.runOutsideAngular(() => {
-      fromEvent(tocContainer, 'click')
-        .pipe(takeUntilDestroyed(this.destroyRef))
-        .subscribe((event) => {
-          // Get the card member ID from the attributes
-          const target =
-            event.target instanceof HTMLButtonElement
-              ? event.target
-              : this.findButtonElement(event.target as HTMLElement);
-          const memberId = this.getMemberId(target);
-
-          if (memberId) {
-            const card = this.document.querySelector<HTMLDivElement>(`#${memberId}`);
-            this.scrollToCard(card);
-          }
-        });
-    });
+    fromEvent(tocContainer, 'click')
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((event) => {
+        // Get the card member ID from the attributes
+        const target =
+          event.target instanceof HTMLButtonElement
+            ? event.target
+            : this.findButtonElement(event.target as HTMLElement);
+        const memberId = this.getMemberId(target);
+
+        if (memberId) {
+          const card = this.document.querySelector<HTMLDivElement>(`#${memberId}`);
+          this.scrollToCard(card);
+        }
+      });
   }
 
   private setupMemberCardListeners(): void {
-    this.ngZone.runOutsideAngular(() => {
-      this.getAllMemberCards().forEach((card) => {
-        this.cardOffsetTop.set(card.id, card.offsetTop);
-        fromEvent(card, 'click')
-          .pipe(takeUntilDestroyed(this.destroyRef))
-          .subscribe(() => {
-            this.scrollToCard(card);
-          });
-      });
+    this.getAllMemberCards().forEach((card) => {
+      this.cardOffsetTop.set(card.id, card.offsetTop);
+      fromEvent(card, 'click')
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe(() => {
+          this.scrollToCard(card);
+        });
     });
   }
 
@@ -113,9 +107,7 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
       takeUntilDestroyed(this.destroyRef),
     );
 
-    this.ngZone.runOutsideAngular(() => {
-      scroll$.subscribe(() => this.setActiveCodeLine());
-    });
+    scroll$.subscribe(() => this.setActiveCodeLine());
   }
 
   private listenToResizeCardContainer(): void {
@@ -209,12 +201,10 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
     this.resizeObserver?.disconnect();
 
     this.resizeObserver = new ResizeObserver((_) => {
-      this.ngZone.run(() => {
-        const offsetTop = tabBody.getBoundingClientRect().top;
-        if (offsetTop) {
-          this.membersMarginTopInPx.set(offsetTop);
-        }
-      });
+      const offsetTop = tabBody.getBoundingClientRect().top;
+      if (offsetTop) {
+        this.membersMarginTopInPx.set(offsetTop);
+      }
     });
 
     this.resizeObserver.observe(tabBody);

adev/src/app/features/tutorial/split-resizer-handler.service.ts

@@ -8,7 +8,7 @@
 
 import {FocusMonitor} from '@angular/cdk/a11y';
 import {DOCUMENT} from '@angular/common';
-import {DestroyRef, ElementRef, Injectable, NgZone, inject, signal} from '@angular/core';
+import {DestroyRef, ElementRef, Injectable, inject, signal} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {fromEvent, combineLatest} from 'rxjs';
 import {map, filter} from 'rxjs/operators';
@@ -33,7 +33,6 @@ export class SplitResizerHandler {
   private readonly destroyRef = inject(DestroyRef);
   private readonly document = inject(DOCUMENT);
   private readonly focusMonitor = inject(FocusMonitor);
-  private readonly ngZone = inject(NgZone);
 
   private container!: ElementRef<any>;
   private content!: ElementRef<HTMLDivElement>;
@@ -151,13 +150,11 @@ export class SplitResizerHandler {
         takeUntilDestroyed(this.destroyRef),
       )
       .subscribe(([_, keyEvent]) => {
-        this.ngZone.run(() => {
-          const shift = keyEvent.key === 'ArrowLeft' ? -1 : 1;
+        const shift = keyEvent.key === 'ArrowLeft' ? -1 : 1;
 
-          const contentWidth = this.getCurrentContainerWidth(this.content.nativeElement);
-          const editorWidth = this.getCurrentContainerWidth(this.editor!.nativeElement);
-          this.setWidthOfTheContainers(contentWidth + shift, editorWidth - shift);
-        });
+        const contentWidth = this.getCurrentContainerWidth(this.content.nativeElement);
+        const editorWidth = this.getCurrentContainerWidth(this.editor!.nativeElement);
+        this.setWidthOfTheContainers(contentWidth + shift, editorWidth - shift);
       });
   }
 

adev/tsconfig.app.json

@@ -5,6 +5,6 @@
     "outDir": "../../out-tsc/app",
     "types": ["node"]
   },
-  "files": ["src/main.ts", "src/main.server.ts", "src/polyfills.ts"],
+  "files": ["src/main.ts", "src/main.server.ts"],
   "include": ["src/**/*.d.ts", "../../node_modules/@types/dom-navigation/index.d.ts"]
 }

package.json

@@ -92,6 +92,7 @@
     "@types/shelljs": "^0.8.6",
     "@types/systemjs": "6.13.5",
     "@types/yargs": "^17.0.3",
+    "@xterm/addon-fit": "^0.10.0",
     "algoliasearch": "^4.23.3",
     "angular-1.5": "npm:angular@1.5",
     "angular-1.6": "npm:angular@1.6",

yarn.lock

@@ -4807,6 +4807,11 @@
   resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz#a1337ca426aa61cef9fe15b5b28e340a72f6fa99"
   integrity sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==
 
+"@xterm/addon-fit@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@xterm/addon-fit/-/addon-fit-0.10.0.tgz#bebf87fadd74e3af30fdcdeef47030e2592c6f55"
+  integrity sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==
+
 "@xterm/xterm@^5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@xterm/xterm/-/xterm-5.5.0.tgz#275fb8f6e14afa6e8a0c05d4ebc94523ff775396"