Enable zoneless change detection

Author: lberrymage

angular.json

@@ -21,7 +21,6 @@
                             "base": "dist/console"
                         },
                         "index": "src/index.html",
-                        "polyfills": ["zone.js"],
                         "tsConfig": "tsconfig.app.json",
                         "inlineStyleLanguage": "scss",
                         "assets": ["src/favicon.ico", "src/assets"],

package-lock.json

@@ -26,8 +26,7 @@
         "@fontsource-variable/roboto": "^5.2.10",
         "@fontsource/material-icons": "^5.2.7",
         "rxjs": "~7.8.0",
-        "tslib": "^2.3.0",
-        "zone.js": "~0.15.1"
+        "tslib": "^2.3.0"
     },
     "devDependencies": {
         "@angular/build": "^21.2.1",

package.json

@@ -15,7 +15,7 @@ <h2 class="section-header">Badge</h2>
 <p>Use the following HTML badge to share your app:</p>
 <mat-form-field>
     <textarea rows="4" readonly matInput>
-<a href="https://accrescent.app/app/{{ app?.id }}">
+<a href="https://accrescent.app/app/{{ app()?.id }}">
     <img alt="Get it on Accrescent" src="https://accrescent.app/badges/get-it-on.png" height="80">
 </a>
 </textarea
@@ -26,9 +26,9 @@ <h2 class="section-header">Badge</h2>
 
 <div class="grid-forms">
     <acc-new-update-editor (formSubmit)="createUpdate($event)">
-        @if (uploadProgress !== undefined) {
-            <mat-progress-bar [value]="uploadProgress" />
-        } @else if (submitDisabled) {
+        @if (uploadProgress() !== undefined) {
+            <mat-progress-bar [value]="uploadProgress()" />
+        } @else if (submitDisabled()) {
             <mat-progress-bar mode="indeterminate" />
         }
     </acc-new-update-editor>
@@ -41,19 +41,19 @@ <h2 class="section-header">Badge</h2>
 <h2 class="section-header">Updates</h2>
 <mat-chip-listbox multiple>
     <mat-chip-option
-        [selected]="showRejectedUpdates"
-        (selectionChange)="showRejectedUpdates = $event.selected">
+        [selected]="showRejectedUpdates()"
+        (selectionChange)="showRejectedUpdates.set($event.selected)">
         Rejected
     </mat-chip-option>
     <mat-chip-option
-        [selected]="showPublishedUpdates"
-        (selectionChange)="showPublishedUpdates = $event.selected">
+        [selected]="showPublishedUpdates()"
+        (selectionChange)="showPublishedUpdates.set($event.selected)">
         Published
     </mat-chip-option>
 </mat-chip-listbox>
 <div class="grid-cards">
     @for (
-        update of updates | updateFilter: showRejectedUpdates : showPublishedUpdates;
+        update of updates() | updateFilter: showRejectedUpdates() : showPublishedUpdates();
         track update
     ) {
         <acc-update-card
@@ -70,24 +70,24 @@ <h2 class="section-header">Updates</h2>
 <h2 class="section-header">Edits</h2>
 <mat-chip-listbox multiple>
     <mat-chip-option
-        [selected]="showRejectedEdits"
-        (selectionChange)="showRejectedEdits = $event.selected">
+        [selected]="showRejectedEdits()"
+        (selectionChange)="showRejectedEdits.set($event.selected)">
         Rejected
     </mat-chip-option>
     <mat-chip-option
-        [selected]="showPublishedEdits"
-        (selectionChange)="showPublishedEdits = $event.selected">
+        [selected]="showPublishedEdits()"
+        (selectionChange)="showPublishedEdits.set($event.selected)">
         Published
     </mat-chip-option>
 </mat-chip-listbox>
 <div class="grid-cards">
-    @for (edit of edits | editFilter: showRejectedEdits : showPublishedEdits; track edit) {
+    @for (edit of edits() | editFilter: showRejectedEdits() : showPublishedEdits(); track edit) {
         <acc-edit-card
             [edit]="edit"
             (delete)="deleteEdit($event)"
             (submitForReview)="submitEdit($event)" />
     }
-    @if (edits.length === 0) {
+    @if (edits().length === 0) {
         <p>No edits</p>
     }
 </div>

src/app/app-details-screen/app-details-screen.component.html

@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import { Component, OnInit, inject } from "@angular/core";
+import { Component, OnInit, inject, signal } from "@angular/core";
 import { HttpEventType, HttpResponse } from "@angular/common/http";
 import { MatChipsModule } from "@angular/material/chips";
 import { MatDialog, MatDialogModule } from "@angular/material/dialog";
@@ -62,60 +62,61 @@ export class AppDetailsScreenComponent implements OnInit {
     private snackbar = inject(MatSnackBar);
     private updateService = inject(UpdateService);
 
-    app?: App;
-    updates: Update[] = [];
-    edits: Edit[] = [];
-    uploadProgress?: number = undefined;
+    readonly app = signal<App | undefined>(undefined);
+    readonly updates = signal<Update[]>([]);
+    readonly edits = signal<Edit[]>([]);
+    readonly uploadProgress = signal<number | undefined>(undefined);
 
-    showRejectedEdits = false;
-    showPublishedEdits = false;
-    showRejectedUpdates = false;
-    showPublishedUpdates = false;
-    submitDisabled = false;
+    readonly showRejectedEdits = signal(false);
+    readonly showPublishedEdits = signal(false);
+    readonly showRejectedUpdates = signal(false);
+    readonly showPublishedUpdates = signal(false);
+    readonly submitDisabled = signal(false);
 
     ngOnInit(): void {
         this.activatedRoute.paramMap.subscribe((params) => {
             // TODO: Handle error case
             const appId = params.get("id");
             if (appId !== null) {
                 this.appService.getApp(appId).subscribe({
-                    next: (app) => (this.app = app),
+                    next: (app) => this.app.set(app),
                     error: showApiErrorSnackbar(this.snackbar),
                 });
                 this.editService.getEdits(appId).subscribe({
-                    next: (edits) => (this.edits = edits),
+                    next: (edits) => this.edits.set(edits),
                     error: showApiErrorSnackbar(this.snackbar),
                 });
                 this.updateService.getUpdates(appId).subscribe({
-                    next: (updates) => (this.updates = updates),
+                    next: (updates) => this.updates.set(updates),
                     error: showApiErrorSnackbar(this.snackbar),
                 });
             }
         });
     }
 
     createUpdate(form: NewUpdateForm): void {
-        if (this.app !== undefined) {
-            this.submitDisabled = true;
+        const app = this.app();
+        if (app !== undefined) {
+            this.submitDisabled.set(true);
             this.updateService
-                .createUpdate(this.app.id, form)
-                .pipe(finalize(() => (this.submitDisabled = false)))
+                .createUpdate(app.id, form)
+                .pipe(finalize(() => this.submitDisabled.set(false)))
                 .subscribe({
                     next: (event) => {
                         if (event.type === HttpEventType.UploadProgress) {
-                            this.uploadProgress = (100 * event.loaded) / event.total!;
+                            this.uploadProgress.set((100 * event.loaded) / event.total!);
 
                             // Clear the progress bar once the upload is complete
                             if (event.loaded === event.total!) {
-                                this.uploadProgress = undefined;
+                                this.uploadProgress.set(undefined);
                             }
                         } else if (event instanceof HttpResponse) {
                             const update = event.body!;
 
-                            this.updates.push(update);
+                            this.updates.update((updates) => [...updates, update]);
                             this.dialog
                                 .open(UpdateSubmissionDialogComponent, {
-                                    data: { app: this.app, update: update },
+                                    data: { app, update },
                                 })
                                 .afterClosed()
                                 .subscribe((confirmed) => {
@@ -134,19 +135,20 @@ export class AppDetailsScreenComponent implements OnInit {
         this.updateService.submitUpdate(id).subscribe({
             next: (submittedUpdate) => {
                 // Mark as submitted in the UI
-                const update = this.updates.find(
-                    (update) => update.id === id && update.status === UpdateStatus.Unsubmitted,
+                this.updates.update((updates) =>
+                    updates.map((update) =>
+                        update.id === id && update.status === UpdateStatus.Unsubmitted
+                            ? { ...update, status: submittedUpdate.status }
+                            : update,
+                    ),
                 );
-                if (update !== undefined) {
-                    update.status = submittedUpdate.status;
-                }
             },
             error: showApiErrorSnackbar(this.snackbar),
         });
     }
 
     deleteUpdate(id: string): void {
-        const update = this.updates.find((update) => update.id === id);
+        const update = this.updates().find((update) => update.id === id);
 
         this.dialog
             .open(UpdateDeletionDialogComponent, { data: update })
@@ -156,10 +158,9 @@ export class AppDetailsScreenComponent implements OnInit {
                     this.updateService.deleteUpdate(id).subscribe({
                         next: () => {
                             // Remove update from the UI
-                            const i = this.updates.findIndex((update) => update.id === id);
-                            if (i > -1) {
-                                this.updates.splice(i, 1);
-                            }
+                            this.updates.update((updates) =>
+                                updates.filter((update) => update.id !== id),
+                            );
                         },
                         error: showApiErrorSnackbar(this.snackbar),
                     });
@@ -168,16 +169,17 @@ export class AppDetailsScreenComponent implements OnInit {
     }
 
     createEdit(form: NewEditForm): void {
-        if (this.app !== undefined) {
-            this.editService.createEdit(this.app.id, form).subscribe({
+        const app = this.app();
+        if (app !== undefined) {
+            this.editService.createEdit(app.id, form).subscribe({
                 next: (event) => {
                     if (event instanceof HttpResponse) {
                         const edit = event.body!;
 
-                        this.edits.push(edit);
+                        this.edits.update((edits) => [...edits, edit]);
                         this.dialog
                             .open(EditSubmissionDialogComponent, {
-                                data: { app: this.app, edit: edit },
+                                data: { app, edit },
                             })
                             .afterClosed()
                             .subscribe((confirmed) => {
@@ -196,19 +198,20 @@ export class AppDetailsScreenComponent implements OnInit {
         this.editService.submitEdit(id).subscribe({
             next: () => {
                 // Mark as submitted in the UI
-                const edit = this.edits.find(
-                    (edit) => edit.id === id && edit.status === EditStatus.Unsubmitted,
+                this.edits.update((edits) =>
+                    edits.map((edit) =>
+                        edit.id === id && edit.status === EditStatus.Unsubmitted
+                            ? { ...edit, status: EditStatus.Submitted }
+                            : edit,
+                    ),
                 );
-                if (edit !== undefined) {
-                    edit.status = EditStatus.Submitted;
-                }
             },
             error: showApiErrorSnackbar(this.snackbar),
         });
     }
 
     deleteEdit(id: string): void {
-        const edit = this.edits.find((edit) => edit.id === id);
+        const edit = this.edits().find((edit) => edit.id === id);
 
         this.dialog
             .open(EditDeletionDialogComponent, { data: edit })
@@ -217,11 +220,8 @@ export class AppDetailsScreenComponent implements OnInit {
                 if (confirmed) {
                     this.editService.deleteEdit(id).subscribe({
                         next: () => {
-                            // Remove update from the UI
-                            const i = this.edits.findIndex((edit) => edit.id === id);
-                            if (i > -1) {
-                                this.edits.splice(i, 1);
-                            }
+                            // Remove edit from the UI
+                            this.edits.update((edits) => edits.filter((edit) => edit.id !== id));
                         },
                         error: showApiErrorSnackbar(this.snackbar),
                     });

src/app/app-details-screen/app-details-screen.component.ts

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { provideHttpClient, withInterceptors } from "@angular/common/http";
-import { ApplicationConfig, provideZoneChangeDetection } from "@angular/core";
+import { ApplicationConfig } from "@angular/core";
 import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from "@angular/material/snack-bar";
 import { provideRouter } from "@angular/router";
 
@@ -19,6 +19,5 @@ export const appConfig: ApplicationConfig = {
             useValue: { duration: 5000 },
         },
         provideRouter(routes),
-        provideZoneChangeDetection({ eventCoalescing: true }),
     ],
 };

src/app/app.config.ts

@@ -16,7 +16,7 @@
 
 <h2 class="section-header">Apps</h2>
 <div class="grid-container">
-    @for (app of apps; track app) {
+    @for (app of apps(); track app) {
         <acc-app-card [app]="app" />
     } @empty {
         <p>No published apps</p>
@@ -25,7 +25,7 @@ <h2 class="section-header">Apps</h2>
 
 <h2 class="section-header">Drafts</h2>
 <div class="grid-container">
-    @for (draft of drafts; track draft) {
+    @for (draft of drafts(); track draft) {
         <acc-draft-card
             [draft]="draft"
             (delete)="deleteDraft($event)"