Inline tw class and update test file dots

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

@@ -1,6 +1,7 @@
 import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
 import type { MutantModel, TestModel } from 'mutation-testing-metrics';
 import { describeLocation, getEmojiForStatus, plural, renderIf, renderIfPresent } from '../../lib/html-helpers.js';
 import { tailwind } from '../../style/index.js';
@@ -79,12 +80,13 @@ export class MutationTestReportDrawerMutant extends RealTimeElement {
 
   private renderDetail() {
     return html`<ul class="mb-6 mr-2">
-      ${this.mutant?.killedByTests?.map((test) =>
+      ${map(this.mutant?.killedByTests, (test) =>
         renderDetailLine('This mutant was killed by this test', html`${renderEmoji('🎯', 'killed')} ${describeTest(test)}`),
       )}
-      ${this.mutant?.coveredByTests
-        ?.filter((test) => !this.mutant?.killedByTests?.includes(test))
-        .map((test) => renderDetailLine('This mutant was covered by this test', html`${renderEmoji('☂️', 'umbrella')} ${describeTest(test)}`))}
+      ${map(
+        this.mutant?.coveredByTests?.filter((test) => !this.mutant?.killedByTests?.includes(test)),
+        (test) => renderDetailLine('This mutant was covered by this test', html`${renderEmoji('☂️', 'umbrella')} ${describeTest(test)}`),
+      )}
     </ul>`;
   }
 }

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

@@ -1,5 +1,6 @@
 import { html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
 import type { MutantModel, TestModel } from 'mutation-testing-metrics';
 import { TestStatus } from 'mutation-testing-metrics';
 import { describeLocation, getEmojiForTestStatus, plural, renderIfPresent } from '../../lib/html-helpers.js';
@@ -64,12 +65,13 @@ export class MutationTestReportDrawerTestComponent extends RealTimeElement {
   }
   private renderDetail() {
     return html`<ul class="mb-6 mr-2">
-      ${this.test?.killedMutants?.map((mutant) =>
+      ${map(this.test?.killedMutants, (mutant) =>
         renderDetailLine('This test killed this mutant', html`${renderEmoji('🎯', 'killed')} ${describeMutant(mutant)}`),
       )}
-      ${this.test?.coveredMutants
-        ?.filter((mutant) => !this.test?.killedMutants?.includes(mutant))
-        .map((mutant) => renderDetailLine('This test covered this mutant', html`${renderEmoji('☂️', 'umbrella')} ${describeMutant(mutant)}`))}
+      ${map(
+        this.test?.coveredMutants?.filter((mutant) => !this.test?.killedMutants?.includes(mutant)),
+        (mutant) => renderDetailLine('This test covered this mutant', html`${renderEmoji('☂️', 'umbrella')} ${describeMutant(mutant)}`),
+      )}
     </ul>`;
   }
 }

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

@@ -1,6 +1,7 @@
 import type { PropertyValues } from 'lit';
 import { html, nothing, svg, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import type { FileUnderTestModel, MutantModel } from 'mutation-testing-metrics';
 import type { MutantResult, MutantStatus } from 'mutation-testing-report-schema/api';
@@ -9,10 +10,10 @@ import type { MteCustomEvent } from '../../lib/custom-events.js';
 import { createCustomEvent } from '../../lib/custom-events.js';
 import { escapeHtml, getContextClassForStatus, getEmojiForStatus, scrollToCodeFragmentIfNeeded } from '../../lib/html-helpers.js';
 import { prismjs, tailwind } from '../../style/index.js';
+import { RealTimeElement } from '../real-time-element.js';
 import type { StateFilter } from '../state-filter/state-filter.component.js';
 import style from './file.scss?inline';
 import { renderDots, renderLine } from './util.js';
-import { RealTimeElement } from '../real-time-element.js';
 
 const diffOldClass = 'diff-old';
 const diffNewClass = 'diff-new';
@@ -105,7 +106,7 @@ export class FileComponent extends RealTimeElement {
         class="line-numbers ${this.selectedMutantStates.map((state) => `mte-selected-${state}`).join(' ')} flex rounded-md py-4"
       >
         <code ${ref(this.codeRef)} class="flex language-${this.model.language}">
-          <table>${this.lines.map((line, lineIndex) => {
+          <table>${map(this.lines, (line, lineIndex) => {
         const lineNr = lineIndex + 1;
         const mutantDots = this.renderMutantDots(mutantLineMap.get(lineNr));
         const finalMutants = this.lines.length === lineNr ? renderFinalMutants(lineNr) : nothing;

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

@@ -2,6 +2,7 @@ import type { PropertyValues } from 'lit';
 import { html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { map } from 'lit/directives/map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import type { MetricsResult } from 'mutation-testing-metrics';
 import type { Thresholds } from 'mutation-testing-report-schema/api';
@@ -119,7 +120,7 @@ export class MutationTestReportTestMetricsTable<TFile, TMetric> extends RealTime
       if (model.file) {
         return nothing;
       } else {
-        return model.childResults.map((childResult) => {
+        return map(model.childResults, (childResult) => {
           const nameParts: string[] = [childResult.name];
           while (!childResult.file && childResult.childResults.length === 1) {
             childResult = childResult.childResults[0];
@@ -143,7 +144,7 @@ export class MutationTestReportTestMetricsTable<TFile, TMetric> extends RealTime
             : html`<span class="py-4">${row.name}</span>`}
         </div>
       </td>
-      ${this.columns.map((column) => this.renderCell(column, row.metrics))}
+      ${map(this.columns, (column) => this.renderCell(column, row.metrics))}
     </tr>`;
   }
 

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

@@ -6,6 +6,7 @@ import type { TestFileModel, TestModel } from 'mutation-testing-metrics';
 import { TestStatus } from 'mutation-testing-metrics';
 import style from './test-file.scss?inline';
 
+import { map } from 'lit/directives/map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { determineLanguage, gte, highlightCode, transformHighlightedLines } from '../../lib/code-helpers.js';
 import type { MteCustomEvent } from '../../lib/custom-events.js';
@@ -14,8 +15,8 @@ import { getContextClassForTestStatus, getEmojiForTestStatus, scrollToCodeFragme
 import { prismjs, tailwind } from '../../style/index.js';
 import '../../style/prism-plugins';
 import { renderDots, renderLine } from '../file/util.js';
-import type { StateFilter } from '../state-filter/state-filter.component.js';
 import { RealTimeElement } from '../real-time-element.js';
+import type { StateFilter } from '../state-filter/state-filter.component.js';
 
 @customElement('mte-test-file')
 export class TestFileComponent extends RealTimeElement {
@@ -143,7 +144,7 @@ export class TestFileComponent extends RealTimeElement {
         this.model.name,
       )}">
       <table>
-        ${this.lines.map((line, lineIndex) => {
+        ${map(this.lines, (line, lineIndex) => {
         const lineNr = lineIndex + 1;
         const testDots = this.renderTestDots(testsByLine.get(lineNr));
         const finalTests = this.lines.length === lineNr ? renderFinalTests(lineNr) : nothing;