chore: use type-safe PropertyValues and use linting suggestion

Author: hugo-vrijswijk

packages/elements/src/components/app/app.component.ts

@@ -124,7 +124,7 @@ export class MutationTestReportAppComponent extends RealTimeElement {
     }
   }
 
-  public willUpdate(changedProperties: PropertyValues) {
+  public willUpdate(changedProperties: PropertyValues<this>) {
     if (this.report) {
       // Set the theme when no theme is selected (light vs dark)
       if (!this.theme) {
@@ -146,7 +146,7 @@ export class MutationTestReportAppComponent extends RealTimeElement {
   private mutants = new Map<string, MutantModel>();
   private tests = new Map<string, TestModel>();
 
-  public updated(changedProperties: PropertyValues) {
+  public updated(changedProperties: PropertyValues<this>) {
     if (changedProperties.has('theme') && this.theme) {
       this.dispatchEvent(
         createCustomEvent('theme-changed', {

packages/elements/src/components/breadcrumb.ts

@@ -7,7 +7,7 @@ import { tailwind } from '../style/index.js';
 
 @customElement('mte-breadcrumb')
 export class MutationTestReportBreadcrumbComponent extends LitElement {
-  @property()
+  @property({ attribute: false })
   public declare path: string[] | undefined;
 
   @property()

packages/elements/src/components/drawer-test/drawer-test.component.ts

@@ -14,7 +14,7 @@ const describeMutant = (mutant: MutantModel) => html`<code>${mutant.getMutatedLi
 
 @customElement('mte-drawer-test')
 export class MutationTestReportDrawerTestComponent extends RealTimeElement {
-  @property()
+  @property({ attribute: false })
   public declare test?: TestModel;
 
   @property({ reflect: true })

packages/elements/src/components/drawer/drawer.component.ts

@@ -22,7 +22,7 @@ export class MutationTestReportDrawer extends LitElement {
   @property({ reflect: true, type: Boolean })
   public declare hasDetail;
 
-  @property()
+  @property({ attribute: false })
   public get toggleMoreLabel() {
     switch (this.mode) {
       case 'half':

packages/elements/src/components/file/file.component.ts

@@ -24,7 +24,7 @@ export class FileComponent extends RealTimeElement {
   @state()
   public declare filters: StateFilter<MutantStatus>[];
 
-  @property()
+  @property({ attribute: false })
   public declare model: FileUnderTestModel;
 
   @state()
@@ -203,7 +203,7 @@ export class FileComponent extends RealTimeElement {
     this.updateFileRepresentation();
   }
 
-  public update(changes: PropertyValues<FileComponent>) {
+  public update(changes: PropertyValues<this>) {
     if (changes.has('model') && this.model) {
       this.updateFileRepresentation();
     }

packages/elements/src/components/metrics-table/metrics-table.component.ts

@@ -29,16 +29,16 @@ export interface Column<TMetric> {
 
 @customElement('mte-metrics-table')
 export class MutationTestReportTestMetricsTable<TFile, TMetric> extends RealTimeElement {
-  @property()
+  @property({ attribute: false })
   public declare model?: MetricsResult<TFile, TMetric>;
 
-  @property()
+  @property({ type: Array })
   public declare currentPath: string[];
 
   @property({ type: Array })
   public declare columns: Column<TMetric>[];
 
-  @property()
+  @property({ attribute: false })
   public declare thresholds: Thresholds;
 
   public static styles = [tailwind];
@@ -54,7 +54,7 @@ export class MutationTestReportTestMetricsTable<TFile, TMetric> extends RealTime
 
   private hasMultipleColspan = false;
 
-  public override willUpdate(changedProperties: PropertyValues) {
+  public override willUpdate(changedProperties: PropertyValues<this>) {
     if (changedProperties.has('columns')) {
       this.hasMultipleColspan = this.columns.some((column) => column.category === 'percentage');
     }

packages/elements/src/components/mutant-view/mutant-view.ts

@@ -15,12 +15,12 @@ export class MutationTestReportMutantViewComponent extends RealTimeElement {
   @property()
   public declare drawerMode: DrawerMode;
 
-  @property()
+  @property({ attribute: false })
   private declare selectedMutant?: MutantModel;
 
   public static styles = [unsafeCSS(style), tailwind];
 
-  @property()
+  @property({ attribute: false })
   public declare result: MetricsResult<FileUnderTestModel, Metrics>;
 
   @property({ attribute: false, reflect: false })
@@ -44,7 +44,7 @@ export class MutationTestReportMutantViewComponent extends RealTimeElement {
     this.drawerMode = event.detail.selected ? 'half' : 'closed';
   };
 
-  updated(changes: PropertyValues) {
+  updated(changes: PropertyValues<this>) {
     if (changes.has('result') && !this.result.file) {
       this.drawerMode = 'closed';
     }

packages/elements/src/components/state-filter/state-filter.component.ts

@@ -23,7 +23,7 @@ export class FileStateFilterComponent<TStatus extends string> extends RealTimeEl
   @property({ type: Array })
   public declare filters?: StateFilter<TStatus>[];
 
-  public updated(changedProperties: PropertyValues) {
+  public updated(changedProperties: PropertyValues<this>) {
     if (changedProperties.has('filters')) {
       this.dispatchFiltersChangedEvent();
     }

packages/elements/src/components/test-file/test-file.component.ts

@@ -22,7 +22,7 @@ import type { StateFilter } from '../state-filter/state-filter.component.js';
 export class TestFileComponent extends RealTimeElement {
   public static styles = [prismjs, tailwind, unsafeCSS(style)];
 
-  @property()
+  @property({ attribute: false })
   public declare model: TestFileModel | undefined;
 
   @state()
@@ -212,7 +212,7 @@ export class TestFileComponent extends RealTimeElement {
     this.updateFileRepresentation();
   }
 
-  override willUpdate(changes: PropertyValues<TestFileComponent>) {
+  override willUpdate(changes: PropertyValues<this>) {
     if (changes.has('model')) {
       this.updateFileRepresentation();
     }
@@ -229,7 +229,8 @@ export class TestFileComponent extends RealTimeElement {
           }
         });
     }
-    super.update(changes);
+
+    super.willUpdate(changes);
   }
 
   private updateFileRepresentation() {

packages/elements/src/components/test-view/test-view.ts

@@ -14,13 +14,13 @@ export class MutationTestReportTestViewComponent extends RealTimeElement {
   @property()
   public declare drawerMode: DrawerMode;
 
-  @property()
+  @property({ attribute: false })
   public declare result: MetricsResult<TestFileModel, TestMetrics>;
 
   @property({ attribute: false, reflect: false })
   public declare path: string[];
 
-  @property()
+  @property({ attribute: false })
   private declare selectedTest?: TestModel;
 
   public static styles = [unsafeCSS(style), tailwind];
@@ -40,7 +40,7 @@ export class MutationTestReportTestViewComponent extends RealTimeElement {
     this.drawerMode = event.detail.selected ? 'half' : 'closed';
   };
 
-  public updated(changes: PropertyValues) {
+  public updated(changes: PropertyValues<this>) {
     if (changes.has('result') && !this.result.file) {
       this.drawerMode = 'closed';
     }