refactor: apply standalone migration (#41)

.eslintrc.json

@@ -1,20 +1,16 @@
 {
   "root": true,
-  "ignorePatterns": [
-    "projects/**/*"
-  ],
+  "ignorePatterns": ["projects/**/*"],
   "overrides": [
     {
-      "files": [
-        "*.ts"
-      ],
+      "files": ["*.ts"],
       "parserOptions": {
-        "project": [
-          "tsconfig.json"
-        ],
+        "project": ["tsconfig.json"],
         "createDefaultProgram": true
       },
       "extends": [
+        "plugin:import/recommended",
+        "plugin:import/typescript",
         "plugin:@angular-eslint/recommended",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
@@ -34,16 +30,20 @@
             "prefix": "t9n",
             "style": "kebab-case"
           }
+        ],
+        "import/no-unresolved": "off",
+        "import/order": [
+          "error",
+          {
+            "alphabetize": { "order": "asc", "caseInsensitive": true },
+            "newlines-between": "always"
+          }
         ]
       }
     },
     {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@angular-eslint/template/recommended"
-      ],
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
       "rules": {}
     }
   ]

.prettierignore

@@ -1,10 +1,9 @@
+.angular/*
 .github/*
 browserslist
 LICENSE
 coverage
 app/*
-package-lock.json
-.*
 *.ico
 *.xlf
 *.svg
@@ -16,5 +15,6 @@ server/client/*
 schematics/*/index.js
 schematics/*/index.d.ts
 yarn.lock
+package-lock.json
 test/xlf
 test/xlf2

.vscode/launch.json

@@ -22,10 +22,7 @@
       "type": "node",
       "request": "launch",
       "name": "t9n xlf cli",
-      "runtimeArgs": [
-        "${workspaceRoot}/bin/cli.js",
-        "t9n-xlf.json"
-      ],
+      "runtimeArgs": ["${workspaceRoot}/bin/cli.js", "t9n-xlf.json"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "port": 9229
@@ -44,4 +41,4 @@
       "port": 9229
     }
   ]
-}
+}

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
   "typescript.tsdk": "node_modules\\typescript\\lib"
-}
+}

package.json

@@ -22,7 +22,7 @@
     "build": "yarn -s build:ng && yarn -s build:node",
     "build:ng": "ng build --configuration production",
     "build:node": "rollup --config rollup.config.mjs",
-    "format": "prettier --ignore-unknown --write **/*",
+    "format": "prettier --ignore-unknown --write \"**/*\"",
     "test": "yarn -s test:node",
     "test:node": "jest",
     "lint": "ng lint",
@@ -93,6 +93,7 @@
     "@typescript-eslint/eslint-plugin": "^5.59.2",
     "@typescript-eslint/parser": "^5.59.2",
     "eslint": "^8.39.0",
+    "eslint-plugin-import": "^2.27.5",
     "husky": "^8.0.3",
     "jasmine-core": "~4.6.0",
     "jest": "^29.5.0",

src/app/app.component.spec.ts

@@ -6,8 +6,7 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
-      declarations: [AppComponent],
+      imports: [RouterTestingModule, AppComponent],
     }).compileComponents();
   }));
 

src/app/app.component.ts

@@ -1,12 +1,32 @@
 import { Component, HostBinding } from '@angular/core';
-import { MatSnackBar, MatSnackBarRef, SimpleSnackBar } from '@angular/material/snack-bar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import {
+  MatSnackBar,
+  MatSnackBarModule,
+  MatSnackBarRef,
+  SimpleSnackBar,
+} from '@angular/material/snack-bar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 import { WebsocketService } from './core/websocket.service';
 
 @Component({
   selector: 't9n-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    MatToolbarModule,
+    MatButtonModule,
+    RouterLink,
+    MatIconModule,
+    MatSnackBarModule,
+    MatTooltipModule,
+    RouterOutlet,
+  ],
 })
 export class AppComponent {
   @HostBinding('class.service-down') serviceDown = false;

src/app/core/websocket.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { delay, filter, retryWhen, skip, tap } from 'rxjs/operators';
+import { distinctUntilChanged, filter, retry, tap } from 'rxjs/operators';
 import { webSocket } from 'rxjs/webSocket';
 
 import { environment } from '../../environments/environment';
@@ -12,19 +12,14 @@ import { ProjectInfo } from './project-info';
 })
 export class WebsocketService {
   private readonly _projectSubject = new BehaviorSubject<ProjectInfo | null>(null);
-  readonly project = this._projectSubject.pipe(skip(1));
+  readonly project = this._projectSubject.pipe(
+    distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))
+  );
   readonly projectChange = this.project.pipe(filter((p): p is ProjectInfo => !!p));
 
   constructor() {
     webSocket(environment.translationSocket)
-      .pipe(
-        retryWhen((errors) =>
-          errors.pipe(
-            tap(() => this._projectSubject.next(null)),
-            delay(1000)
-          )
-        )
-      )
+      .pipe(tap({ error: () => this._projectSubject.next(null) }), retry({ delay: 1000 }))
       .subscribe((r) => this._projectSubject.next(r as ProjectInfo));
   }
 }

src/app/i18n-examples-template/i18n-examples-template.component.ts

@@ -1,8 +1,11 @@
+import { TitleCasePipe } from '@angular/common';
 import { Component } from '@angular/core';
 
 @Component({
   selector: 't9n-i18n-examples-template',
   templateUrl: './i18n-examples-template.component.html',
+  standalone: true,
+  imports: [TitleCasePipe],
 })
 export class I18nExamplesTemplateComponent {
   title = 'angular-t9n';

src/app/overview/add-language-modal/add-language-modal.component.spec.ts

@@ -8,7 +8,7 @@ describe('AddLanguageModalComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [AddLanguageModalComponent],
+      imports: [AddLanguageModalComponent],
     }).compileComponents();
   }));
 

src/app/overview/add-language-modal/add-language-modal.component.ts

@@ -1,6 +1,18 @@
+import { NgIf, NgFor, AsyncPipe } from '@angular/common';
 import { Component } from '@angular/core';
-import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { MatDialogRef } from '@angular/material/dialog';
+import {
+  AbstractControl,
+  UntypedFormBuilder,
+  UntypedFormGroup,
+  Validators,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatOptionModule } from '@angular/material/core';
+import { MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { Observable } from 'rxjs';
 import { map, startWith, switchMap, take } from 'rxjs/operators';
 
@@ -11,6 +23,19 @@ import { TranslationService } from '../../core/translation.service';
   selector: 't9n-add-language-modal',
   templateUrl: './add-language-modal.component.html',
   styleUrls: ['./add-language-modal.component.scss'],
+  standalone: true,
+  imports: [
+    MatDialogModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatAutocompleteModule,
+    NgIf,
+    NgFor,
+    MatOptionModule,
+    MatButtonModule,
+    AsyncPipe,
+  ],
 })
 export class AddLanguageModalComponent {
   form: UntypedFormGroup;

src/app/overview/overview-routing.ts

@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('./overview/overview.component').then((m) => m.OverviewComponent),
+  },
+];

src/app/overview/overview/overview.component.spec.ts

@@ -8,7 +8,7 @@ describe('OverviewComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [OverviewComponent],
+      imports: [OverviewComponent],
     }).compileComponents();
   }));
 

src/app/overview/overview/overview.component.ts

@@ -1,5 +1,10 @@
+import { NgFor, NgIf, AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterLink } from '@angular/router';
 import { forkJoin, Observable, of } from 'rxjs';
 import { map, switchMap, take } from 'rxjs/operators';
 
@@ -13,6 +18,17 @@ import { AddLanguageModalComponent } from '../add-language-modal/add-language-mo
   templateUrl: './overview.component.html',
   styleUrls: ['./overview.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    MatButtonModule,
+    MatCardModule,
+    MatDialogModule,
+    MatTooltipModule,
+    RouterLink,
+    NgFor,
+    NgIf,
+  ],
 })
 export class OverviewComponent implements OnInit {
   project: Observable<string>;