Skip to content

Commit 7b0777b

Browse files
JeanMechealxhub
JeanMeche
authored and
alxhub
committed
docs(docs-infra): Go zoneless and enable the zoneless scheduler (angular#55161)
PR Close angular#55161
1 parent 81486c2 commit 7b0777b

File tree

8 files changed

+56
-90
lines changed

8 files changed

+56
-90
lines changed

‎adev/angular.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,17 @@
2020
"builder": "@angular/build:application",
2121
"options": {
2222
"externalDependencies": ["path"],
23+
"define": {
24+
// We need this until xterm 5.6.0 is released
25+
// see https://github.com/xtermjs/xterm.js/pull/4940
26+
"self": "this"
27+
},
2328
"outputPath": "dist/angular-dev",
2429
"index": "src/index.html",
2530
"browser": "src/main.ts",
2631
"server": "src/main.server.ts",
27-
"polyfills": ["src/polyfills.ts", "zone.js"],
32+
"ssr": true,
33+
"polyfills": [],
2834
"tsConfig": "tsconfig.app.json",
2935
"inlineStyleLanguage": "scss",
3036
"assets": ["src/favicon.ico", "src/robots.txt", "src/assets"],

‎adev/src/app/app.component.ts‎

Lines changed: 12 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
ChangeDetectionStrategy,
1212
Component,
1313
inject,
14-
NgZone,
1514
OnInit,
1615
PLATFORM_ID,
1716
signal,
@@ -48,10 +47,12 @@ import {ESCAPE, SEARCH_TRIGGER_KEY} from './core/constants/keys';
4847
],
4948
templateUrl: './app.component.html',
5049
styleUrls: ['./app.component.scss'],
50+
host: {
51+
'(window:keydown)': 'setSearchDialogVisibilityOnKeyPress($event)',
52+
},
5153
})
5254
export class AppComponent implements OnInit {
5355
private readonly document = inject(DOCUMENT);
54-
private readonly ngZone = inject(NgZone);
5556
private readonly router = inject(Router);
5657
private readonly window = inject(WINDOW);
5758

@@ -63,7 +64,6 @@ export class AppComponent implements OnInit {
6364
isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
6465

6566
ngOnInit(): void {
66-
this.setSearchDialogVisibilityOnKeyPress();
6767
this.closeSearchDialogOnNavigationSkipped();
6868
this.router.events
6969
.pipe(
@@ -107,24 +107,16 @@ export class AppComponent implements OnInit {
107107
});
108108
}
109109

110-
private setSearchDialogVisibilityOnKeyPress(): void {
111-
this.ngZone.runOutsideAngular(() => {
112-
this.window.addEventListener('keydown', (event: KeyboardEvent) => {
113-
if (event.key === SEARCH_TRIGGER_KEY && (event.metaKey || event.ctrlKey)) {
114-
this.ngZone.run(() => {
115-
event.preventDefault();
116-
this.displaySearchDialog.update((display) => !display);
117-
});
118-
}
110+
private setSearchDialogVisibilityOnKeyPress(event: KeyboardEvent): void {
111+
if (event.key === SEARCH_TRIGGER_KEY && (event.metaKey || event.ctrlKey)) {
112+
event.preventDefault();
113+
this.displaySearchDialog.update((display) => !display);
114+
}
119115

120-
if (event.key === ESCAPE && this.displaySearchDialog()) {
121-
this.ngZone.run(() => {
122-
event.preventDefault();
123-
this.displaySearchDialog.set(false);
124-
});
125-
}
126-
});
127-
});
116+
if (event.key === ESCAPE && this.displaySearchDialog()) {
117+
event.preventDefault();
118+
this.displaySearchDialog.set(false);
119+
}
128120
}
129121

130122
private closeSearchDialogOnNavigationSkipped(): void {

‎adev/src/app/app.config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
VERSION,
1616
inject,
1717
provideZoneChangeDetection,
18+
provideExperimentalZonelessChangeDetection,
1819
} from '@angular/core';
1920
import {
2021
DOCS_CONTENT_LOADER,
@@ -70,6 +71,7 @@ export const appConfig: ApplicationConfig = {
7071
},
7172
}),
7273
),
74+
provideExperimentalZonelessChangeDetection(),
7375
provideClientHydration(),
7476
provideHttpClient(withFetch()),
7577
provideAnimationsAsync(),
@@ -97,7 +99,6 @@ export const appConfig: ApplicationConfig = {
9799
deps: [DOCUMENT],
98100
},
99101
{provide: TitleStrategy, useClass: ADevTitleStrategy},
100-
provideZoneChangeDetection({eventCoalescing: true}),
101102
ReferenceScrollHandler,
102103
],
103104
};

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
Component,
1414
ElementRef,
1515
Injector,
16-
NgZone,
1716
OnDestroy,
1817
OnInit,
1918
PLATFORM_ID,
@@ -45,7 +44,6 @@ export default class Home implements OnInit, AfterViewInit, OnDestroy {
4544

4645
private readonly document = inject(DOCUMENT);
4746
private readonly injector = inject(Injector);
48-
private readonly ngZone = inject(NgZone);
4947
private readonly platformId = inject(PLATFORM_ID);
5048
private readonly window = inject(WINDOW);
5149
private readonly activatedRoute = inject(ActivatedRoute);
@@ -65,7 +63,7 @@ export default class Home implements OnInit, AfterViewInit, OnDestroy {
6563
}
6664
}
6765

68-
ngAfterViewInit(): void {
66+
ngAfterViewInit() {
6967
this.element = this.home.nativeElement;
7068

7169
if (isPlatformBrowser(this.platformId)) {
@@ -77,9 +75,7 @@ export default class Home implements OnInit, AfterViewInit, OnDestroy {
7775
this.initIntersectionObserver();
7876

7977
if (this.isWebGLAvailable() && !shouldReduceMotion() && !this.isUwu) {
80-
this.ngZone.runOutsideAngular(async () => {
81-
await this.loadHomeAnimation();
82-
});
78+
this.loadHomeAnimation();
8379
}
8480
}
8581
}

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

Lines changed: 27 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
DestroyRef,
1212
EnvironmentInjector,
1313
Injectable,
14-
NgZone,
1514
OnDestroy,
1615
afterNextRender,
1716
inject,
@@ -41,7 +40,6 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
4140
private readonly destroyRef = inject(DestroyRef);
4241
private readonly document = inject(DOCUMENT);
4342
private readonly injector = inject(EnvironmentInjector);
44-
private readonly ngZone = inject(NgZone);
4543
private readonly window = inject(WINDOW);
4644

4745
private readonly cardOffsetTop = new Map<string, number>();
@@ -75,35 +73,31 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
7573
return;
7674
}
7775

78-
this.ngZone.runOutsideAngular(() => {
79-
fromEvent(tocContainer, 'click')
80-
.pipe(takeUntilDestroyed(this.destroyRef))
81-
.subscribe((event) => {
82-
// Get the card member ID from the attributes
83-
const target =
84-
event.target instanceof HTMLButtonElement
85-
? event.target
86-
: this.findButtonElement(event.target as HTMLElement);
87-
const memberId = this.getMemberId(target);
88-
89-
if (memberId) {
90-
const card = this.document.querySelector<HTMLDivElement>(`#${memberId}`);
91-
this.scrollToCard(card);
92-
}
93-
});
94-
});
76+
fromEvent(tocContainer, 'click')
77+
.pipe(takeUntilDestroyed(this.destroyRef))
78+
.subscribe((event) => {
79+
// Get the card member ID from the attributes
80+
const target =
81+
event.target instanceof HTMLButtonElement
82+
? event.target
83+
: this.findButtonElement(event.target as HTMLElement);
84+
const memberId = this.getMemberId(target);
85+
86+
if (memberId) {
87+
const card = this.document.querySelector<HTMLDivElement>(`#${memberId}`);
88+
this.scrollToCard(card);
89+
}
90+
});
9591
}
9692

9793
private setupMemberCardListeners(): void {
98-
this.ngZone.runOutsideAngular(() => {
99-
this.getAllMemberCards().forEach((card) => {
100-
this.cardOffsetTop.set(card.id, card.offsetTop);
101-
fromEvent(card, 'click')
102-
.pipe(takeUntilDestroyed(this.destroyRef))
103-
.subscribe(() => {
104-
this.scrollToCard(card);
105-
});
106-
});
94+
this.getAllMemberCards().forEach((card) => {
95+
this.cardOffsetTop.set(card.id, card.offsetTop);
96+
fromEvent(card, 'click')
97+
.pipe(takeUntilDestroyed(this.destroyRef))
98+
.subscribe(() => {
99+
this.scrollToCard(card);
100+
});
107101
});
108102
}
109103

@@ -113,9 +107,7 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
113107
takeUntilDestroyed(this.destroyRef),
114108
);
115109

116-
this.ngZone.runOutsideAngular(() => {
117-
scroll$.subscribe(() => this.setActiveCodeLine());
118-
});
110+
scroll$.subscribe(() => this.setActiveCodeLine());
119111
}
120112

121113
private listenToResizeCardContainer(): void {
@@ -209,12 +201,10 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
209201
this.resizeObserver?.disconnect();
210202

211203
this.resizeObserver = new ResizeObserver((_) => {
212-
this.ngZone.run(() => {
213-
const offsetTop = tabBody.getBoundingClientRect().top;
214-
if (offsetTop) {
215-
this.membersMarginTopInPx.set(offsetTop);
216-
}
217-
});
204+
const offsetTop = tabBody.getBoundingClientRect().top;
205+
if (offsetTop) {
206+
this.membersMarginTopInPx.set(offsetTop);
207+
}
218208
});
219209

220210
this.resizeObserver.observe(tabBody);

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import {FocusMonitor} from '@angular/cdk/a11y';
1010
import {DOCUMENT} from '@angular/common';
11-
import {DestroyRef, ElementRef, Injectable, NgZone, inject, signal} from '@angular/core';
11+
import {DestroyRef, ElementRef, Injectable, inject, signal} from '@angular/core';
1212
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
1313
import {fromEvent, combineLatest} from 'rxjs';
1414
import {map, filter} from 'rxjs/operators';
@@ -33,7 +33,6 @@ export class SplitResizerHandler {
3333
private readonly destroyRef = inject(DestroyRef);
3434
private readonly document = inject(DOCUMENT);
3535
private readonly focusMonitor = inject(FocusMonitor);
36-
private readonly ngZone = inject(NgZone);
3736

3837
private container!: ElementRef<any>;
3938
private content!: ElementRef<HTMLDivElement>;
@@ -151,13 +150,11 @@ export class SplitResizerHandler {
151150
takeUntilDestroyed(this.destroyRef),
152151
)
153152
.subscribe(([_, keyEvent]) => {
154-
this.ngZone.run(() => {
155-
const shift = keyEvent.key === 'ArrowLeft' ? -1 : 1;
153+
const shift = keyEvent.key === 'ArrowLeft' ? -1 : 1;
156154

157-
const contentWidth = this.getCurrentContainerWidth(this.content.nativeElement);
158-
const editorWidth = this.getCurrentContainerWidth(this.editor!.nativeElement);
159-
this.setWidthOfTheContainers(contentWidth + shift, editorWidth - shift);
160-
});
155+
const contentWidth = this.getCurrentContainerWidth(this.content.nativeElement);
156+
const editorWidth = this.getCurrentContainerWidth(this.editor!.nativeElement);
157+
this.setWidthOfTheContainers(contentWidth + shift, editorWidth - shift);
161158
});
162159
}
163160

‎adev/src/polyfills.ts‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎adev/tsconfig.app.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
"outDir": "../../out-tsc/app",
66
"types": ["node"]
77
},
8-
"files": ["src/main.ts", "src/main.server.ts", "src/polyfills.ts"],
8+
"files": ["src/main.ts", "src/main.server.ts"],
99
"include": ["src/**/*.d.ts", "../../node_modules/@types/dom-navigation/index.d.ts"]
1010
}

0 commit comments

Comments
 (0)