diff --git a/karma.conf.js b/karma.conf.js index 8e29f6a1793a0334a11fe432b8f8e73d003b9ff9..bd8d91cfe8efbe0eec65993e3550164662b6d6ca 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -3,30 +3,30 @@ module.exports = function(config) { config.set({ - basePath: "", - frameworks: ["jasmine", "@angular-devkit/build-angular"], + basePath: '', + frameworks: ['jasmine', '@angular-devkit/build-angular'], plugins: [ - require("karma-jasmine"), - require("karma-firefox-launcher"), - require("karma-jasmine-html-reporter"), - require("karma-coverage-istanbul-reporter"), - require("@angular-devkit/build-angular/plugins/karma") + require('karma-jasmine'), + require('karma-firefox-launcher'), + require('karma-jasmine-html-reporter'), + require('karma-coverage-istanbul-reporter'), + require('@angular-devkit/build-angular/plugins/karma'), ], client: { - clearContext: false // leave Jasmine Spec Runner output visible in browser + clearContext: false, // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { - dir: __dirname + "/coverage/ngx-errors", - reports: ["html", "lcovonly", "text-summary"], - fixWebpackSourcePaths: true + dir: __dirname + '/coverage/ngx-errors', + reports: ['html', 'lcovonly', 'text-summary'], + fixWebpackSourcePaths: true, }, - reporters: ["progress", "kjhtml"], + reporters: ['progress', 'kjhtml'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, - browsers: ["Firefox"], + browsers: ['Firefox'], singleRun: false, - restartOnFileChange: true + restartOnFileChange: true, }); }; diff --git a/src/lib/api/api-debug.component.html b/src/lib/api/api-debug.component.html index fc6e185cdab8cfb64c67ed86c555ab4e652c223b..a157fa9ffb0df787ea20c96eec6bf87b219a618f 100644 --- a/src/lib/api/api-debug.component.html +++ b/src/lib/api/api-debug.component.html @@ -1,29 +1,42 @@ <div class="total" *ngIf="totalCount">{{ totalCount }}</div> <div class="new" *ngIf="unseenCount">{{ unseenCount }}</div> -<div class="request" *ngFor="let request of all;" (mouseover)="seen(request)"> +<div class="request" *ngFor="let request of all" (mouseover)="seen(request)"> <div class="open"> - <a *ngIf="request.response?.tokenLink as tokenLink" href="{{ tokenLink }}" target="_debug"> + <a + *ngIf="request.response?.tokenLink as tokenLink" + href="{{ tokenLink }}" + target="_debug" + > <i class="fa fa-search"></i> </a> </div> <div class="profiler"> - <a *ngIf="request.method == 'GET'" href="{{ request.url }}" target="_request"> + <a + *ngIf="request.method == 'GET'" + href="{{ request.url }}" + target="_request" + > <i class="fa fa-external-link-alt"></i> </a> </div> <div [ngSwitch]="request.status" class="status {{ request.status }}"> - - <i *ngSwitchCase="'pending'" class="fa fa-spinner fa-pulse" pTooltip="Pending"></i> + <i + *ngSwitchCase="'pending'" + class="fa fa-spinner fa-pulse" + pTooltip="Pending" + ></i> <i *ngSwitchCase="'cancelled'" class="fa fa-times" pTooltip="Cancelled"></i> - <span *ngSwitchDefault pTooltip="{{ request.response.status }} {{ request.response.statusText }}"> - {{ request.response.status }} - </span> - + <span + *ngSwitchDefault + pTooltip="{{ request.response.status }} {{ request.response.statusText }}" + > + {{ request.response.status }} + </span> </div> <div class="method">{{ request.method }}</div> @@ -32,6 +45,4 @@ <i *ngIf="isUnseen(request)" class="fa fa-asterisk"></i> </div> <div class="url" title="{{ request.url }}">{{ request.url }}</div> - - </div> diff --git a/src/lib/api/api-debug.component.ts b/src/lib/api/api-debug.component.ts index 9a11d054463a986c532affa8ecb3bc68b51e0b25..9fd875fb8ffc93cd6fa13d259c7cbd915f1b39ca 100644 --- a/src/lib/api/api-debug.component.ts +++ b/src/lib/api/api-debug.component.ts @@ -29,7 +29,7 @@ interface ResponseInfo { } @Component({ - selector: 'app-api-debug', + selector: 'dbg-api-debug', templateUrl: './api-debug.component.html', styleUrls: ['./api-debug.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, @@ -40,8 +40,7 @@ export class ApiDebugComponent { private readonly ids: string[] = []; private readonly apiPrefix: string; - @Output() - public countChanged = new EventEmitter<number>(); + @Output() public countChanged = new EventEmitter<number>(); constructor( interceptor: ApiDebugInterceptor, diff --git a/src/lib/debug-toggle.component.ts b/src/lib/debug-toggle.component.ts index 6e6c7040b8745a0f15eb27cbfe89e4b487a485ca..4345c7afee18d8081b516eb0c9a0da492af67362 100644 --- a/src/lib/debug-toggle.component.ts +++ b/src/lib/debug-toggle.component.ts @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; import { DebugStateService } from './debug-state.service'; @Component({ - selector: 'app-debug-toggle', + selector: 'dbg-debug-toggle', template: ` <ng-container *ngIf="state.available"> <p-toggleButton diff --git a/src/lib/debug.module.ts b/src/lib/debug.module.ts index e98dc576af575898337b52662e53040c97794ce1..965cf60cf601cf6f9b851be256a92496c5c5d6cb 100644 --- a/src/lib/debug.module.ts +++ b/src/lib/debug.module.ts @@ -16,6 +16,7 @@ import { TreeTableModule } from 'primeng/treetable'; import { ApiDebugComponent } from './api/api-debug.component'; import { Configuration, configurationFactory } from './configuration'; +import { DebugToggleComponent } from './debug-toggle.component'; import { DumpPanelComponent } from './dump-panel.component'; import { DumpValueComponent } from './dump-value.component'; import { SpyDisplayComponent } from './spy/spy-display.component'; @@ -27,6 +28,7 @@ const EXPORTED_COMPONENTS = [ ApiDebugComponent, WatchComponent, DumpPanelComponent, + DebugToggleComponent, ]; @NgModule({ diff --git a/src/lib/dump-panel.component.html b/src/lib/dump-panel.component.html index 579f5034002d173f66225a7bb7820e658e57ec8e..f0fdd9d7d2d27bed5a7ffeeb1bfd95b72b3cff6b 100644 --- a/src/lib/dump-panel.component.html +++ b/src/lib/dump-panel.component.html @@ -1,4 +1,4 @@ -<div *ngIf="(debugState.enabled$ | async)"> +<div *ngIf="debugState.enabled$ | async"> <p-sidebar [(visible)]="visible" [fullScreen]="fullScreen" @@ -18,21 +18,32 @@ <p-tabView> <p-tabPanel header="Watches ({{ watchCount }})"> <div class="data-panel"> - <app-watch-display (countChanged)="setWatchCount($event)"></app-watch-display> + <dbg-watch-display + (countChanged)="setWatchCount($event)" + ></dbg-watch-display> </div> </p-tabPanel> <p-tabPanel header="Spies ({{ spyCount }})"> <div class="data-panel"> - <app-spy-display (countChanged)="setSpyCount($event)"></app-spy-display> + <dbg-spy-display + (countChanged)="setSpyCount($event)" + ></dbg-spy-display> </div> </p-tabPanel> <p-tabPanel header="API ({{ apiCallCount }})"> <div class="data-panel"> - <app-api-debug (countChanged)="setApiCallCount($event)"></app-api-debug> + <dbg-api-debug + (countChanged)="setApiCallCount($event)" + ></dbg-api-debug> </div> </p-tabPanel> </p-tabView> </p-sidebar> - <p-button *ngIf="!visible" ngClass="open-button" (onClick)="visible = true" icon="fa fa-angle-double-left"></p-button> + <p-button + *ngIf="!visible" + ngClass="open-button" + (onClick)="visible = true" + icon="fa fa-angle-double-left" + ></p-button> </div> diff --git a/src/lib/dump-panel.component.ts b/src/lib/dump-panel.component.ts index 2ff072558aae1a6c4d867d7a18432902fc48a0ee..e6d498a832d0bca9fcfea1beaf2890798a62702c 100644 --- a/src/lib/dump-panel.component.ts +++ b/src/lib/dump-panel.component.ts @@ -7,7 +7,7 @@ import { import { DebugStateService } from './debug-state.service'; @Component({ - selector: 'app-dump-panel', + selector: 'dbg-dump-panel', templateUrl: './dump-panel.component.html', styleUrls: ['./dump-panel.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/lib/dump-value.component.html b/src/lib/dump-value.component.html index f0709135c1a3d0602aa3fe3491fac60b4aad9def..08364f66566c8594522fd9cc0749639604535cb7 100644 --- a/src/lib/dump-value.component.html +++ b/src/lib/dump-value.component.html @@ -12,6 +12,8 @@ >: </ng-container> <span class="{{ node.styleClass || 'label' }}">{{ node.label }}</span> - <span class="size" *ngIf="node.children"> ({{ node.children.length }})</span> + <span class="size" *ngIf="node.children" + > ({{ node.children.length }})</span + > </ng-template> </p-tree> diff --git a/src/lib/dump-value.component.ts b/src/lib/dump-value.component.ts index 81f3800bf9e1f81bc7a20b0438da112ce33a0dfc..501fe298ef143c3075316f6e99cc6583abacda60 100644 --- a/src/lib/dump-value.component.ts +++ b/src/lib/dump-value.component.ts @@ -4,7 +4,7 @@ import { TreeNode } from 'primeng/api'; type PropertyPath = Array<string | number>; @Component({ - selector: 'app-dump-value', + selector: 'dbg-dump-value', templateUrl: './dump-value.component.html', styleUrls: ['./dump-value.component.scss'], }) @@ -15,8 +15,7 @@ export class DumpValueComponent { public root: TreeNode[] = []; public loading = true; - @Input() - public set value(value: any) { + @Input() public set value(value: any) { this.loading = false; if (value !== this._value) { this._value = value; diff --git a/src/lib/spy/spy-display.component.html b/src/lib/spy/spy-display.component.html index 9f3424b23786506200911655b667d19db412192b..a634b154d2c375a04868b50de5e3fc67cc9bde37 100644 --- a/src/lib/spy/spy-display.component.html +++ b/src/lib/spy/spy-display.component.html @@ -25,9 +25,11 @@ </form> <table class="notifications"> - <tr *ngFor="let notif of (notifs$ | async)"> + <tr *ngFor="let notif of notifs$ | async"> <td class="timestamp">{{ (notif.timestamp / 1000).toFixed(3) }}</td> - <td class="type"><span class="fa fa-{{ eventTypes[notif.type] }}"></span></td> + <td class="type"> + <span class="fa fa-{{ eventTypes[notif.type] }}"></span> + </td> <td class="tag">{{ notif.tag }}</td> <td class="value" *ngIf="notif.type === 'next'"> <app-dump-value [value]="notif.payload"></app-dump-value> diff --git a/src/lib/spy/spy-display.component.ts b/src/lib/spy/spy-display.component.ts index 7f086fd211df8cb3d19f2c1cf5a0c5e05bb0f27e..137656ac13c41cc73d8d1ad364ecaa4cd5bc759d 100644 --- a/src/lib/spy/spy-display.component.ts +++ b/src/lib/spy/spy-display.component.ts @@ -3,10 +3,10 @@ import { FormBuilder } from '@angular/forms'; import { combineLatest, concat, of } from 'rxjs'; import { debounceTime, map, scan, share, tap } from 'rxjs/operators'; -import { Notification, notifications$, NotificationType } from '../rxjs'; +import { Notification, notifications$, NotificationType } from './spy.operator'; @Component({ - selector: 'app-spy-display', + selector: 'dbg-spy-display', templateUrl: './spy-display.component.html', styleUrls: ['./spy-display.component.scss'], }) @@ -32,8 +32,7 @@ export class SpyDisplayComponent { }; public readonly eventTypeList = Object.entries(this.eventTypes); - @Output() - public countChanged = new EventEmitter<number>(); + @Output() public countChanged = new EventEmitter<number>(); private readonly notifList$ = notifications$.pipe( tap(notif => this.consoleLog(notif)), diff --git a/src/lib/watch/watch-display.component.html b/src/lib/watch/watch-display.component.html index 9154fe2b86b140b6a43ee15df4e08ff992f6b2d0..084eb2cc38de7a355b0aa098533216b5865d0a5f 100644 --- a/src/lib/watch/watch-display.component.html +++ b/src/lib/watch/watch-display.component.html @@ -1,4 +1,4 @@ -<ng-container *ngFor="let value of (values$ | async); trackBy: label"> +<ng-container *ngFor="let value of values$ | async; trackBy: label"> <p-panel header="{{ value.label }}" [toggleable]="true" ngClass="value"> <app-dump-value [value]="value.value"></app-dump-value> </p-panel> diff --git a/src/lib/watch/watch-display.component.ts b/src/lib/watch/watch-display.component.ts index c9a4730b7a1fab9836fe3266d2acc8f047913a12..2e6dd96804d369895ee59233b9fca436439e29f1 100644 --- a/src/lib/watch/watch-display.component.ts +++ b/src/lib/watch/watch-display.component.ts @@ -4,7 +4,7 @@ import { tap } from 'rxjs/operators'; import { WatchedValue, WatchService } from './watch.service'; @Component({ - selector: 'app-watch-display', + selector: 'dbg-watch-display', templateUrl: './watch-display.component.html', }) export class WatchDisplayComponent { @@ -12,8 +12,7 @@ export class WatchDisplayComponent { tap(values => this.countChanged.emit(values.length)) ); - @Output() - public countChanged = new EventEmitter<number>(); + @Output() public countChanged = new EventEmitter<number>(); public constructor(private readonly watchService: WatchService) {} diff --git a/src/lib/watch/watch.component.ts b/src/lib/watch/watch.component.ts index 290c6e06377664f0ac8b01bcbc18f67a6ec53100..988e16cb8dd7732de3bf9f1caed05c35c912e389 100644 --- a/src/lib/watch/watch.component.ts +++ b/src/lib/watch/watch.component.ts @@ -10,13 +10,13 @@ import { distinctUntilChanged, map } from 'rxjs/operators'; import { WatchedValue, WatchService } from './watch.service'; @Component({ - selector: 'app-watch', + selector: 'dbg-watch', template: '', }) export class WatchComponent implements OnInit, OnDestroy { private readonly label$ = new BehaviorSubject('Watched value'); private readonly value$ = new ReplaySubject<any>(1); - private readonly dumpValue$ = combineLatest(this.label$, this.value$).pipe( + private readonly dumpValue$ = combineLatest([this.label$, this.value$]).pipe( distinctUntilChanged(), map(([label, value]) => ({ label, value } as WatchedValue)) ); @@ -25,13 +25,11 @@ export class WatchComponent implements OnInit, OnDestroy { public constructor(private readonly watchService: WatchService) {} - @Input() - public set label(value: any) { + @Input() public set label(value: any) { this.label$.next(value); } - @Input() - public set value(value: any) { + @Input() public set value(value: any) { this.value$.next(value); } diff --git a/src/lib/watch/watch.service.ts b/src/lib/watch/watch.service.ts index d92042fde4f30e0a37461587b1e03ec985310031..55aae635424f83aab604621c88b6c400d2e7ab86 100644 --- a/src/lib/watch/watch.service.ts +++ b/src/lib/watch/watch.service.ts @@ -1,9 +1,8 @@ import { Injectable } from '@angular/core'; +import { safeCombineLatest } from '@devatscience/ngx-rxtools/rxjs'; import { BehaviorSubject, Observable, Unsubscribable } from 'rxjs'; import { switchMap } from 'rxjs/operators'; -import { safeCombineLatest } from '../rxjs'; - export interface WatchedValue { readonly label: string; readonly value: any; diff --git a/src/public-api.ts b/src/public-api.ts index 4d3287609a64a50d08594992445d6be0af7136af..59450309c267f65789eaa9c87e7facc7721b8e10 100644 --- a/src/public-api.ts +++ b/src/public-api.ts @@ -2,21 +2,5 @@ * Public API Surface of ngx-debug */ -export * from './lib/api/api-debug.component'; -export * from './lib/api/api-debug.interceptor'; -export * from './lib/debug.module'; -export * from './lib/debug-state.service'; -export * from './lib/debug-toggle.component'; -export * from './lib/dump-panel.component'; -export * from './lib/dump-value.component'; -export * from './lib/rxjs/index'; -export * from './lib/spy/spy-display.component'; -export * from './lib/watch/watch.component'; -export * from './lib/watch/watch-display.component'; -export * from './lib/watch/watch.service'; -export * from './lib/configuration'; -export * from './lib/debug.module'; -export * from './lib/debug-state.service'; -export * from './lib/debug-toggle.component'; -export * from './lib/dump-panel.component'; -export * from './lib/dump-value.component'; +export { DebugModule } from './lib/debug.module'; +export { spy } from './lib/spy/spy.operator';