Рефакторинг

.eslintrc.json

@@ -28,7 +28,33 @@
             "style": "kebab-case"
           }
         ],
-        "@angular-eslint/prefer-on-push-component-change-detection": ["error"]
+        "@angular-eslint/prefer-on-push-component-change-detection": "error",
+        "@typescript-eslint/explicit-member-accessibility": [
+          "error",
+          {
+            "overrides": {
+              "constructors": "no-public"
+            }
+          }
+        ],
+        "@typescript-eslint/explicit-function-return-type": [
+          "error",
+          {
+            "allowExpressions": true
+          }
+        ],
+        "no-empty-function": "off",
+        "@typescript-eslint/no-empty-function": [
+          "error",
+          { "allow": ["private-constructors", "protected-constructors"] }
+        ],
+        "eqeqeq": ["error", "always", { "null": "ignore" }]
+      }
+    },
+    {
+      "files": ["*.spec.ts"],
+      "rules": {
+        "@angular-eslint/prefer-on-push-component-change-detection": "off"
       }
     },
     {

.github/workflows/deploy.yml

@@ -1,12 +1,23 @@
 name: HAR Viewer Deployer
 
-on: workflow_dispatch
+on:
+  workflow_dispatch:
+    inputs:
+      pages_branch:
+        description: "GitHub Pages branch"
+        required: true
+        default: "gh-pages"
+        type: choice
+        options:
+          - "gh-pages"
+          - "gh-pages-test"
 
 jobs:
   deploy:
     runs-on: ubuntu-20.04
     env:
       NODE_ENV: production
+      PAGES_BRANCH: ${{ inputs.pages_branch }}
     steps:
       - uses: actions/checkout@v4
       - name: Set up Node.js
@@ -22,15 +33,15 @@ jobs:
           mkdir output
           git config --global user.email "[email protected]"
           git config --global user.name "${GITHUB_ACTOR}"
-          git clone https://${{ secrets.ACCESS_TOKEN }}@github.com/sunriselink/har-viewer.git --branch gh-pages --single-branch ./output
+          git clone https://${{ secrets.ACCESS_TOKEN }}@github.com/sunriselink/har-viewer.git --branch ${PAGES_BRANCH} --single-branch ./output
       - name: Deploy
         working-directory: output
         run: |
           git rm -rfq .
           cp -rv ../dist/har-viewer/browser/** .
           cp -v ../dist/har-viewer/3rdpartylicenses.txt .
           git add --all
-          git commit -m "Update $(date +'%Y-%m-%d %H:%M:%S')"
+          git commit -m "Update $(date +'%Y-%m-%d %H:%M:%S %:z')"
           git push
       - name: Send Telegram Notification
         run: |

.gitignore

@@ -40,3 +40,6 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+# Created dynamically
+/src/environments/environment.prod.ts

.prettierrc.json

@@ -13,7 +13,7 @@
   "htmlWhitespaceSensitivity": "ignore",
   "overrides": [
     {
-      "files": ["*.js", "*.ts", "*.html"],
+      "files": ["*.js", "*.mjs", "*.ts", "*.html"],
       "options": {
         "tabWidth": 4
       }

package.json

@@ -1,13 +1,14 @@
 {
   "name": "har-viewer",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "prepare": "node scripts/prepare.mjs",
     "start": "ng serve",
-    "build:prod": "node scripts/build-prod.js",
+    "prebuild:prod": "node scripts/write-app-info.mjs",
+    "build:prod": "ng build",
     "test": "ng test",
-    "lint": "ng lint",
+    "lint": "ng lint --max-warnings 0",
     "prettier": "prettier --write ."
   },
   "dependencies": {

scripts/prepare.mjs

@@ -1,13 +1,13 @@
 await husky();
 
 async function husky() {
-  if (process.env.NODE_ENV === 'production') {
-    console.log('Husky installation skipped');
-    return;
-  }
+    if (process.env.NODE_ENV === 'production') {
+        console.log('Husky installation skipped');
+        return;
+    }
 
-  const husky = await import('husky');
+    const husky = await import('husky');
 
-  console.log(husky.default());
-  console.log('Husky installed');
+    console.log(husky.default());
+    console.log('Husky installed');
 }

scripts/write-app-info.mjs

@@ -0,0 +1,46 @@
+import { readFileSync, writeFileSync } from 'fs';
+import { execSync } from 'child_process';
+
+const VARIABLES = new Map([
+    ['APP_VERSION', getVersion()],
+    ['GIT_COMMIT_HASH', getCommitHash()],
+]);
+
+createEnvironmentFile(VARIABLES);
+
+/**
+ * @param {Map<string, string>} variables
+ */
+function createEnvironmentFile(variables) {
+    let template = readFileSync('./src/environments/environment.prod.template.ts').toString();
+
+    for (const [name, value] of variables.entries()) {
+        template = template.replaceAll(`{{ ${name} }}`, value);
+    }
+
+    writeFileSync('./src/environments/environment.prod.ts', template);
+}
+
+/**
+ * @return {string}
+ */
+function getVersion() {
+    const packageJson = JSON.parse(readFileSync('package.json').toString());
+    return packageJson.version;
+}
+
+/**
+ * @return {string}
+ */
+function getCommitHash() {
+    return shell('git rev-parse --verify HEAD');
+}
+
+/**
+ * @param {string} command
+ * @return {string}
+ */
+function shell(command) {
+    const stdout = execSync(command, { encoding: 'utf8' });
+    return stdout?.trim() ?? '';
+}

src/app/app.component.html

@@ -1,22 +1,18 @@
-<app-modal></app-modal>
-
 <div
     class="drop"
     appFileDropZone
-    [class.file-over]="fileOver"
-    (fileOver)="fileOver = $event"
+    [class.file-over]="fileOver()"
+    (fileOver)="fileOver.set($event)"
     (fileDrop)="loadHAR($event)"
 >
-    <ng-container *ngIf="harLog$ | async as harLog; else selectHAR">
-        <app-har-viewer [harLog]="harLog"></app-har-viewer>
-    </ng-container>
-
-    <ng-template #selectHAR>
+    @if (harLog(); as har) {
+        <app-har-viewer [harLog]="har"></app-har-viewer>
+    } @else {
         <div class="upload">
             <app-file-uploader buttonText="SELECT HAR FILE" (fileSelect)="loadHAR($event)"></app-file-uploader>
             <div class="upload__tip">Or drop file here</div>
         </div>
-    </ng-template>
+    }
 </div>
 
 <app-version></app-version>

src/app/app.component.ts

@@ -1,12 +1,11 @@
-import { AsyncPipe, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { BehaviorSubject, map, Observable, of, switchMap } from 'rxjs';
+import { ChangeDetectionStrategy, Component, inject, Signal, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { BehaviorSubject, Observable, of, switchMap } from 'rxjs';
 import { FileUploaderComponent } from './components/file-uploader/file-uploader.component';
 import { HarViewerComponent } from './components/har-viewer/har-viewer.component';
-import { ModalComponent } from './components/modal/modal.component';
 import { VersionComponent } from './components/version/version.component';
 import { FileDropZoneDirective } from './directives/file-drop-zone.directive';
-import { BlobService } from './services/blob.service';
+import { HarReaderService } from './services/har-reader.service';
 import { IHAR } from './types/har-log';
 import { Unsafe } from './types/unsafe';
 import { catchAndLogError } from './utils/catch-and-log-error';
@@ -17,39 +16,30 @@ import { catchAndLogError } from './utils/catch-and-log-error';
     templateUrl: './app.component.html',
     styleUrl: './app.component.scss',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [
-        ModalComponent,
-        FileDropZoneDirective,
-        AsyncPipe,
-        NgIf,
-        FileUploaderComponent,
-        VersionComponent,
-        HarViewerComponent,
-    ],
+    imports: [FileDropZoneDirective, FileUploaderComponent, VersionComponent, HarViewerComponent],
 })
 export class AppComponent {
-    protected fileOver = false;
-    protected readonly harLog$: Observable<Unsafe<IHAR>>;
+    protected readonly fileOver = signal(false);
 
-    private readonly blobService = inject(BlobService);
-    private readonly harFile$$ = new BehaviorSubject<Unsafe<File>>(null);
+    protected readonly harFile$ = new BehaviorSubject<Unsafe<File>>(null);
+    protected readonly harLog = this.createHARSignal();
 
-    constructor() {
-        this.harLog$ = this.harFile$$.pipe(switchMap(file => this.readFile(file)));
-    }
+    protected readonly harReader = inject(HarReaderService);
 
     protected loadHAR(file: File): void {
-        this.harFile$$.next(file);
+        this.harFile$.next(file);
+    }
+
+    private createHARSignal(): Signal<Unsafe<IHAR>> {
+        const harLog$ = this.harFile$.pipe(switchMap(file => this.readFile(file)));
+        return toSignal(harLog$);
     }
 
-    private readFile(file: Unsafe<File>) {
+    private readFile(file: Unsafe<File>): Observable<Unsafe<IHAR>> {
         if (!file) {
             return of(null);
         }
 
-        return this.blobService.readContent(file).pipe(
-            map((content: string) => JSON.parse(content) as IHAR),
-            catchAndLogError(),
-        );
+        return this.harReader.readHAR(file).pipe(catchAndLogError());
     }
 }

src/app/components/expansion-panel/expansion-panel-content.directive.ts

@@ -0,0 +1,9 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+    selector: '[appExpansionPanelContent]',
+    standalone: true,
+})
+export class ExpansionPanelContentDirective {
+    constructor(public templateRef: TemplateRef<unknown>) {}
+}

src/app/components/expansion-panel/expansion-panel.component.html

@@ -1,8 +1,13 @@
-<div (click)="toggle()">
-    <div *ngIf="showToggle" class="toggle" [class.toggle_opened]="opened"></div>
-    <ng-content select="app-expansion-panel-header"></ng-content>
-</div>
+<div class="header" (click)="toggle()">
+    @if (showArrow) {
+        <div class="toggle" [class.toggle_opened]="opened()"></div>
+    }
 
-<div *ngIf="opened">
-    <ng-content select="app-expansion-panel-content"></ng-content>
+    <ng-content></ng-content>
 </div>
+
+@if (opened()) {
+    <div>
+        <ng-template [ngTemplateOutlet]="content.templateRef"></ng-template>
+    </div>
+}