refactor(dev-app): convert to zoneless app

Author: nzbin

angular.json

@@ -63,9 +63,6 @@
             "outputPath": "dist/dev-app",
             "index": "projects/dev-app/src/index.html",
             "browser": "projects/dev-app/src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
             "tsConfig": "projects/dev-app/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [

projects/dev-app/src/app/app.config.ts

@@ -1,8 +1,16 @@
-import { ApplicationConfig } from '@angular/core';
+import {
+  ApplicationConfig,
+  provideBrowserGlobalErrorListeners,
+  provideZonelessChangeDetection,
+} from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)],
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZonelessChangeDetection(),
+    provideRouter(routes),
+  ],
 };

projects/dev-app/src/app/diff/diff.html

@@ -4,25 +4,19 @@
   [(ngModel)]="value"
   (originalValueChange)="log($event)"
   (modifiedValueChange)="log($event)"
-  [orientation]="orientation"
-  [revertControls]="revertControls"
-  [highlightChanges]="highlightChanges"
-  [gutter]="gutter"
-  [disabled]="disabled"
+  [orientation]="orientation()"
+  [revertControls]="revertControls()"
+  [highlightChanges]="highlightChanges()"
+  [gutter]="gutter()"
+  [disabled]="disabled()"
 />
 
-<button (click)="doc = '123'">change original value</button>
-<button (click)="doc2 = '13\n456'">change modified value</button>
-<button (click)="orientation === 'a-b' ? (orientation = 'b-a') : (orientation = 'a-b')">
-  orientation
-</button>
-<button
-  (click)="revertControls === 'a-to-b' ? (revertControls = 'b-to-a') : (revertControls = 'a-to-b')"
->
-  revertControls
-</button>
-<button (click)="highlightChanges = !highlightChanges">highlightChanges</button>
-<button (click)="gutter = !gutter">gutter</button>
-<button (click)="disabled = !disabled">disabled</button>
+<button (click)="setOriginalValue()">change original value</button>
+<button (click)="setModifiedValue()">change modified value</button>
+<button (click)="setOrientation()">orientation</button>
+<button (click)="setRevertControls()">revertControls</button>
+<button (click)="setHighlightChanges()">highlightChanges</button>
+<button (click)="setGutter()">gutter</button>
+<button (click)="setDisabled()">disabled</button>
 
-<code-editor [value]="doc2" [extensions]="unifiedExts" />
+<code-editor [value]="doc2()" [extensions]="unifiedExts" />

projects/dev-app/src/app/diff/diff.ts

@@ -1,5 +1,5 @@
 import { CodeEditor, DiffEditor, Orientation, RevertControls, Setup } from '@acrodata/code-editor';
-import { Component } from '@angular/core';
+import { Component, linkedSignal, signal } from '@angular/core';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { unifiedMergeView } from '@codemirror/merge';
 
@@ -10,36 +10,72 @@ import { unifiedMergeView } from '@codemirror/merge';
   styleUrl: './diff.scss',
 })
 export class Diff {
-  doc = `one
+  doc = signal(`one
 two
 three
 four
-five`;
+five`);
 
-  doc2 = this.doc.replace(/t/g, 'T') + '\nSix';
+  doc2 = signal(this.doc().replace(/t/g, 'T') + '\nSix');
 
-  value = {
-    original: this.doc,
-    modified: this.doc2,
-  };
+  value = linkedSignal(() => ({
+    original: this.doc(),
+    modified: this.doc2(),
+  }));
 
   control = new FormControl({ value: this.value, disabled: true });
 
   unifiedExts = [
     unifiedMergeView({
-      original: this.doc,
+      original: this.doc(),
       gutter: true,
     }),
   ];
 
   setup: Setup = 'minimal';
-  orientation: Orientation = 'a-b';
-  revertControls: RevertControls = 'a-to-b';
-  highlightChanges = true;
-  gutter = true;
-  disabled = false;
+  orientation = signal<Orientation>('a-b');
+  revertControls = signal<RevertControls>('a-to-b');
+  highlightChanges = signal(true);
+  gutter = signal(true);
+  disabled = signal(false);
 
   log(e: any) {
     console.log(e);
   }
+
+  setOriginalValue() {
+    this.doc.set('123');
+  }
+
+  setModifiedValue() {
+    this.doc2.set('13\n456');
+  }
+
+  setOrientation() {
+    if (this.orientation() === 'a-b') {
+      this.orientation.set('b-a');
+    } else {
+      this.orientation.set('a-b');
+    }
+  }
+
+  setRevertControls() {
+    if (this.revertControls() === 'a-to-b') {
+      this.revertControls.set('b-to-a');
+    } else {
+      this.revertControls.set('a-to-b');
+    }
+  }
+
+  setHighlightChanges() {
+    this.highlightChanges.update(v => !v);
+  }
+
+  setGutter() {
+    this.gutter.update(v => !v);
+  }
+
+  setDisabled() {
+    this.disabled.update(v => !v);
+  }
 }

projects/dev-app/src/app/home/home.html

@@ -8,7 +8,7 @@ <h4>Code Editor Config</h4>
 
   <div>
     <h4>
-      <button matButton (click)="showOutput = !showOutput">Toggle output</button>
+      <button matButton (click)="toggleOutput()">Toggle output</button>
     </h4>
     <div class="editor-wrap">
       <code-editor
@@ -29,7 +29,7 @@ <h4>
         [languages]="languages"
       />
 
-      @if (showOutput) {
+      @if (showOutput()) {
         <textarea [style.height]="'500px'" [(ngModel)]="code"></textarea>
       }
     </div>
@@ -38,7 +38,7 @@ <h4>Unified diff-editor</h4>
     <code-editor
       #editor
       [style.height]="'500px'"
-      [value]="modifiedCode"
+      [value]="modifiedCode()"
       [theme]="options.theme"
       [setup]="options.setup"
       [readonly]="options.readonly"
@@ -65,8 +65,8 @@ <h4>Split diff-editor</h4>
     <diff-editor
       #editor
       [style.height]="'100vh'"
-      [originalValue]="originalCode"
-      [modifiedValue]="modifiedCode"
+      [originalValue]="originalCode()"
+      [modifiedValue]="modifiedCode()"
       [orientation]="options2.orientation"
       [revertControls]="options2.revertControls"
       [highlightChanges]="options2.highlightChanges"

projects/dev-app/src/app/home/home.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { AfterViewInit, Component, DestroyRef, OnInit, inject, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -89,9 +89,9 @@ export class Home implements OnInit, AfterViewInit {
     highlightWhitespace: false,
   };
 
-  code = '';
+  code = signal('');
 
-  showOutput = false;
+  showOutput = signal(false);
 
   ngOnInit(): void {
     this.getLangSample('javascript');
@@ -110,9 +110,10 @@ export class Home implements OnInit, AfterViewInit {
   getLangSample(lang: string) {
     fetch(`lang_samples/${lang}.txt`).then(async response => {
       if (response.ok) {
-        this.code = await response.text();
+        const text = await response.text();
+        this.code.set(text);
       } else {
-        this.code = '';
+        this.code.set('');
       }
     });
   }
@@ -121,16 +122,16 @@ export class Home implements OnInit, AfterViewInit {
     console.log(e);
   }
 
-  originalCode = `one
+  originalCode = signal(`one
 two
 three
 four
-five`;
-  modifiedCode = this.originalCode.replace(/t/g, 'T') + '\nSix';
+five`);
+  modifiedCode = signal(this.originalCode().replace(/t/g, 'T') + '\nSix');
 
   unifiedExts = [
     unifiedMergeView({
-      original: this.originalCode,
+      original: this.originalCode(),
     }),
   ];
 
@@ -168,4 +169,8 @@ five`;
     highlightChanges: true,
     gutter: true,
   };
+
+  toggleOutput() {
+    this.showOutput.update(v => !v);
+  }
 }