chore(deps): update dependency prettier to v3.7.1 (#3998)

renovate[bot] · hugo-vrijswijk · web-flow · commit 34aa43e42203 · 2025-11-28T11:31:16.000Z
* chore(deps): update dependency prettier to v3.7.1

* Formatting

---------

Co-authored-by: renovate[bot] &lt;29139614+renovate[bot]@users.noreply.github.com&gt;
Co-authored-by: Hugo van Rijswijk &lt;git@hugovr.nl&gt;
diff --git a/docs/supported-mutators.md b/docs/supported-mutators.md
@@ -13,7 +13,7 @@ All Stryker versions support a variety of different mutators. We've aligned on a
 | [Array Declaration](#array-declaration)           |                     ✅                     |                        ✅                        |                      ❌                      |
 | [Assignment Expression](#assignment-expression)   |                     ❌                     |                        ✅                        |                     n/a                      |
 | [Block Statement](#block-statement)               |                     ✅                     |                        ✅                        |                      ❌                      |
-| [Boolean Literal](#boolean-literal)               |                     ✅                     |                        ✅                        |                     ️✅                      |
+| [Boolean Literal](#boolean-literal)               |                     ✅                     |                        ✅                        |                      ️✅                      |
 | [Checked Statement](#checked-statement)           |                    n/a                     |                        ✅                        |                     n/a                      |
 | [Conditional Expression](#conditional-expression) |                     ✅                     |                        ✅                        |                      ✅                      |
 | [Equality Operator](#equality-operator)           |                     ✅                     |                        ✅                        |                      ✅                      |
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,7 +52,7 @@
     "lerna": "9.0.1",
     "mocha": "11.7.5",
     "nx": "22.1.1",
-    "prettier": "3.6.2",
+    "prettier": "3.7.1",
     "prettier-plugin-tailwindcss": "0.7.1",
     "rimraf": "6.1.2",
     "sinon": "21.0.0",
diff --git a/packages/elements/src/components/app/app.component.ts b/packages/elements/src/components/app/app.component.ts
@@ -363,37 +363,37 @@ export class MutationTestReportAppComponent extends RealTimeElement {
     return when(
       this.context.result ?? this.errorMessage,
       () =>
-        html`<mte-file-picker .rootModel="${this.rootModel}"></mte-file-picker>
+        html`<mte-file-picker .rootModel=${this.rootModel}></mte-file-picker>
           <div class="container space-y-4 bg-white pb-4 font-sans text-gray-800 transition-colors motion-safe:transition-max-width">
             ${this.#renderErrorMessage()}
-            <mte-theme-switch @theme-switch="${this.themeSwitch}" class="sticky top-offset z-20 float-right mb-0 pt-7" .theme="${this.theme}">
+            <mte-theme-switch @theme-switch=${this.themeSwitch} class="sticky top-offset z-20 float-right mb-0 pt-7" .theme=${this.theme}>
             </mte-theme-switch>
             ${this.#renderTitle()} ${this.#renderTabs()}
             <mte-breadcrumb
-              @mte-file-picker-open="${() => this.filePicker.open()}"
-              .view="${this.context.view}"
-              .path="${this.context.path}"
+              @mte-file-picker-open=${() => this.filePicker.open()}
+              .view=${this.context.view}
+              .path=${this.context.path}
             ></mte-breadcrumb>
             <mte-result-status-bar
-              detected="${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.totalDetected)}"
-              no-coverage="${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.noCoverage)}"
-              pending="${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.pending)}"
-              survived="${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.survived)}"
-              total="${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.totalValid)}"
+              detected=${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.totalDetected)}
+              no-coverage=${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.noCoverage)}
+              pending=${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.pending)}
+              survived=${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.survived)}
+              total=${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.totalValid)}
             ></mte-result-status-bar>
             ${when(
               this.context.view === 'mutant' && this.context.result,
               () =>
                 html`<mte-mutant-view
                   id="mte-mutant-view"
-                  .result="${this.context.result}"
-                  .thresholds="${this.report!.thresholds}"
-                  .path="${this.path}"
+                  .result=${this.context.result}
+                  .thresholds=${this.report!.thresholds}
+                  .path=${this.path}
                 ></mte-mutant-view>`,
             )}
             ${when(
               this.context.view === 'test' && this.context.result,
-              () => html`<mte-test-view id="mte-test-view" .result="${this.context.result}" .path="${this.path}"></mte-test-view>`,
+              () => html`<mte-test-view id="mte-test-view" .result=${this.context.result} .path=${this.path}></mte-test-view>`,
             )}
           </div>`,
     );
@@ -422,8 +422,8 @@ export class MutationTestReportAppComponent extends RealTimeElement {
                 <a
                   class="inline-block rounded-t-lg border-b-2 border-transparent p-4 transition-colors hover:border-gray-300 hover:bg-gray-200 hover:text-gray-700 aria-selected:border-b-[3px] aria-selected:border-solid aria-selected:border-primary-700 aria-selected:text-primary-on"
                   role="tab"
-                  href="${toAbsoluteUrl(type)}"
-                  aria-selected="${isActive}"
+                  href=${toAbsoluteUrl(type)}
+                  aria-selected=${isActive}
                   aria-controls="mte-${type}-view"
                   >${text}</a
                 >
diff --git a/packages/elements/src/components/breadcrumb.ts b/packages/elements/src/components/breadcrumb.ts
@@ -62,15 +62,15 @@ export class MutationTestReportBreadcrumbComponent extends BaseElement {
   #renderLink(title: string, path: string[]) {
     return html`<li class="after:text-gray-800 after:content-['/'] md:after:pl-1">
       <a
-        href="${toAbsoluteUrl(this.view, ...path)}"
+        href=${toAbsoluteUrl(this.view, ...path)}
         class="ml-1 text-sm font-medium text-primary-800 underline hover:text-gray-900 hover:underline md:ml-2"
         >${title}</a
       >
     </li>`;
   }
 
   #renderSearchIcon() {
-    return html`<button @click="${() => this.#dispatchFilePickerOpenEvent()}" class="ml-auto cursor-pointer" title="Open file picker (Ctrl-K)"
+    return html`<button @click=${() => this.#dispatchFilePickerOpenEvent()} class="ml-auto cursor-pointer" title="Open file picker (Ctrl-K)"
       >${searchIcon}</button
     >`;
   }
diff --git a/packages/elements/src/components/drawer-mutant/util.ts b/packages/elements/src/components/drawer-mutant/util.ts
@@ -12,4 +12,4 @@ export const renderSummaryContainer = (content: TemplateResult) => html`<div cla
 /**
  * Wrap the given emoji in an accessible-friendly span
  */
-export const renderEmoji = (emoji: string, label: string) => html`<span role="img" aria-label="${label}">${emoji}</span>`;
+export const renderEmoji = (emoji: string, label: string) => html`<span role="img" aria-label=${label}>${emoji}</span>`;
diff --git a/packages/elements/src/components/drawer/drawer.component.ts b/packages/elements/src/components/drawer/drawer.component.ts
@@ -86,22 +86,22 @@ export class MutationTestReportDrawer extends BaseElement {
     const isOpen = this.mode === 'open';
     const height = this.#contentHeightController.value;
 
-    return html`<aside @click="${(event: Event) => event.stopPropagation()}" class="mr-4 ml-6">
+    return html`<aside @click=${(event: Event) => event.stopPropagation()} class="mr-4 ml-6">
       <header class="w-full py-4">
         <h2>
           <slot name="header"></slot>
           ${when(
             this.hasDetail,
             () =>
-              html`<button data-testId="btnReadMoreToggle" class="ml-2 cursor-pointer align-middle" @click="${this.toggleReadMore}">
+              html`<button data-testId="btnReadMoreToggle" class="ml-2 cursor-pointer align-middle" @click=${this.toggleReadMore}>
                 ${this.toggleMoreLabel}
               </button>`,
           )}
         </h2>
       </header>
       <div
-        style="${height && isOpen ? `height: ${height}px;` : nothing}"
-        class="${classMap({ ['mb-4 motion-safe:transition-max-width']: true, 'overflow-y-auto': isOpen })}"
+        style=${height && isOpen ? `height: ${height}px;` : nothing}
+        class=${classMap({ ['mb-4 motion-safe:transition-max-width']: true, 'overflow-y-auto': isOpen })}
       >
         <slot name="summary"></slot>
         ${when(this.hasDetail && this.mode === 'open', () => html`<slot name="detail"></slot>`)}
diff --git a/packages/elements/src/components/drawer/util.ts b/packages/elements/src/components/drawer/util.ts
@@ -7,7 +7,7 @@ export const renderDrawer = ({ hasDetail, mode }: { hasDetail: boolean; mode: Dr
   html`<mte-drawer
     class="fixed bottom-0 z-10 container rounded-t-3xl bg-gray-200/60 shadow-xl backdrop-blur-lg motion-safe:transition-[height,max-width] motion-safe:duration-200"
     ?has-detail=${hasDetail}
-    mode="${mode}"
+    mode=${mode}
   >
     ${content}
   </mte-drawer>`;
diff --git a/packages/elements/src/components/file-picker/file-picker.component.ts b/packages/elements/src/components/file-picker/file-picker.component.ts
@@ -89,19 +89,19 @@ export class MutationTestReportFilePickerComponent extends BaseElement {
 
   render() {
     return html`<dialog
-      @click="${this.close}"
-      @toggle="${this.#handleToggle}"
+      @click=${this.close}
+      @toggle=${this.#handleToggle}
       aria-labelledby="file-picker-label"
       class="mx-auto my-4 max-w-160 bg-transparent backdrop:bg-gray-950/50 backdrop:backdrop-blur-lg md:w-1/2"
     >
-      <div @click="${(e: MouseEvent) => e.stopPropagation()}" class="flex h-fit max-h-132 flex-col rounded-lg bg-gray-200/60 p-4 backdrop-blur-lg">
+      <div @click=${(e: MouseEvent) => e.stopPropagation()} class="flex h-fit max-h-132 flex-col rounded-lg bg-gray-200/60 p-4 backdrop-blur-lg">
         <div class="mb-3 flex items-center rounded-sm bg-gray-200/60 p-2 text-gray-800 shadow-lg">
           <div class="mx-2 flex items-center">${searchIcon}</div>
           <label id="file-picker-label" for="file-picker-input" class="sr-only">Search for a file</label>
           <input
             autocomplete="off"
             id="file-picker-input"
-            @input="${this.#handleSearch}"
+            @input=${this.#handleSearch}
             type="search"
             style="box-shadow: none"
             class="mr-2 w-full border-0 border-transparent bg-transparent focus:shadow-none"
@@ -126,14 +126,14 @@ export class MutationTestReportFilePickerComponent extends BaseElement {
               return html`<li
                 class="group snap-start rounded-sm bg-gray-200 text-gray-900 transition-shadow aria-selected:bg-primary-500 aria-selected:text-gray-50 aria-selected:shadow-lg"
                 role="option"
-                aria-selected="${index === this.fileIndex}"
+                aria-selected=${index === this.fileIndex}
               >
                 <a
-                  tabindex="${index === this.fileIndex ? 0 : -1}"
-                  @click="${this.close}"
+                  tabindex=${index === this.fileIndex ? 0 : -1}
+                  @click=${this.close}
                   class="flex h-full flex-wrap items-center p-2 outline-hidden"
-                  @mousemove="${() => (this.fileIndex = index)}"
-                  href="${toAbsoluteUrl(view, name)}"
+                  @mousemove=${() => (this.fileIndex = index)}
+                  href=${toAbsoluteUrl(view, name)}
                 >
                   <span class="inline-flex" title="File with ${view}s">${this.#renderTestOrMutantIndication(view)}</span>
                   <span class="ms-1">${file.result?.name}</span>
diff --git a/packages/elements/src/components/file/file.component.ts b/packages/elements/src/components/file/file.component.ts
@@ -110,13 +110,13 @@ export class FileComponent extends RealTimeElement {
 
     return html`<mte-state-filter
         allow-toggle-all
-        .filters="${this.filters}"
-        @filters-changed="${this.#filtersChanged}"
+        .filters=${this.filters}
+        @filters-changed=${this.#filtersChanged}
         @next=${this.#nextMutant}
         @previous=${this.#previousMutant}
       ></mte-state-filter>
       <pre
-        @click="${this.#codeClicked}"
+        @click=${this.#codeClicked}
         id="report-code-block"
         class="line-numbers ${this.selectedMutantStates.map((state) => `mte-selected-${state}`).join(' ')} flex rounded-md py-4"
       >
diff --git a/packages/elements/src/components/metrics-table/metrics-table.component.ts b/packages/elements/src/components/metrics-table/metrics-table.component.ts
@@ -105,8 +105,8 @@ export class MutationTestReportTestMetricsTable<TFile, TMetric> extends RealTime
   #renderTableHead(column: Column<TMetric>) {
     const id = `tooltip-${column.key.toString()}`;
     const header = column.tooltip
-      ? html`<mte-tooltip title="${column.tooltip}" id="${id}">${column.label}</mte-tooltip>`
-      : html`<span id="${id}">${column.label}</span>`;
+      ? html`<mte-tooltip title=${column.tooltip} id=${id}>${column.label}</mte-tooltip>`
+      : html`<span id=${id}>${column.label}</span>`;
     if (column.group) {
       return html`<th colspan="2" class="bg-gray-200 px-2"> ${header} </th>`;
     }
@@ -136,13 +136,11 @@ export class MutationTestReportTestMetricsTable<TFile, TMetric> extends RealTime
   }
 
   #renderRow(name: string, row: MetricsResult<TFile, TMetric>, ...path: string[]) {
-    return html`<tr title="${row.name}" class="group hover:bg-gray-200">
+    return html`<tr title=${row.name} class="group hover:bg-gray-200">
       <td class="font-semibold">
         <div class="flex items-center justify-start">
-          <mte-file-icon file-name="${row.name}" ?file="${row.file}" class="mx-1 flex items-center"></mte-file-icon> ${path.length > 0
-            ? html`<a class="mr-auto inline-block w-full py-4 pr-2 hover:text-primary-on hover:underline" href="${toAbsoluteUrl(...path)}"
-                >${name}</a
-              >`
+          <mte-file-icon file-name=${row.name} ?file=${row.file} class="mx-1 flex items-center"></mte-file-icon> ${path.length > 0
+            ? html`<a class="mr-auto inline-block w-full py-4 pr-2 hover:text-primary-on hover:underline" href=${toAbsoluteUrl(...path)}>${name}</a>`
             : html`<span class="py-4">${row.name}</span>`}
         </div>
       </td>
@@ -171,12 +169,12 @@ export class MutationTestReportTestMetricsTable<TFile, TMetric> extends RealTime
                 <div
                   class="${bgColoringClass} h-3 rounded-full pl-1 transition-all"
                   role="progressbar"
-                  aria-valuenow="${mutationScoreRounded}"
+                  aria-valuenow=${mutationScoreRounded}
                   aria-valuemin="0"
                   aria-valuemax="100"
                   aria-describedby="tooltip-mutationScore"
-                  title="${column.label}"
-                  style="${progressBarStyle}"
+                  title=${column.label}
+                  style=${progressBarStyle}
                 ></div>
               </div>`
             : html`<span class="text-light-muted font-bold">N/A</span>`}
@@ -187,7 +185,7 @@ export class MutationTestReportTestMetricsTable<TFile, TMetric> extends RealTime
     }
     return html`<td
       class="${classMap({ 'font-bold': column.isBold ?? false, [backgroundColoringClass]: true })} py-4 text-center group-hover:bg-gray-200!"
-      aria-describedby="${`tooltip-${column.key.toString()}`}"
+      aria-describedby=${`tooltip-${column.key.toString()}`}
       >${value}</td
     >`;
   }
diff --git a/packages/elements/src/components/mutant-view/mutant-view.ts b/packages/elements/src/components/mutant-view/mutant-view.ts
@@ -49,12 +49,11 @@ export class MutationTestReportMutantViewComponent extends RealTimeElement {
   }
 
   public render() {
-    return html`<main class="pb-drawer-half-open" @click="${this.#handleClick}">
-        <mte-metrics-table .columns="${COLUMNS}" .currentPath="${this.path}" .thresholds="${this.thresholds}" .model="${this.result}">
-        </mte-metrics-table>
-        ${when(this.result.file, (file) => html`<mte-file @mutant-selected="${this.#handleMutantSelected}" .model="${file}"></mte-file>`)}
+    return html`<main class="pb-drawer-half-open" @click=${this.#handleClick}>
+        <mte-metrics-table .columns=${COLUMNS} .currentPath=${this.path} .thresholds=${this.thresholds} .model=${this.result}> </mte-metrics-table>
+        ${when(this.result.file, (file) => html`<mte-file @mutant-selected=${this.#handleMutantSelected} .model=${file}></mte-file>`)}
       </main>
-      <mte-drawer-mutant mode="${this.drawerMode}" .mutant="${this.selectedMutant}"></mte-drawer-mutant>`;
+      <mte-drawer-mutant mode=${this.drawerMode} .mutant=${this.selectedMutant}></mte-drawer-mutant>`;
   }
 }
 
diff --git a/packages/elements/src/components/result-status-bar/result-status-bar.ts b/packages/elements/src/components/result-status-bar/result-status-bar.ts
@@ -77,7 +77,7 @@ export class ResultStatusBar extends BaseElement {
       (metric) => metric.type,
       (metric) =>
         html`<div
-          title="${shouldBeSmall ? nothing : metric.tooltip}"
+          title=${shouldBeSmall ? nothing : metric.tooltip}
           style="width: ${this.#calculatePercentage(metric.amount)}%"
           class="${this.#colorFromMetric(metric.type)} ${metric.amount === 0
             ? 'opacity-0'
diff --git a/packages/elements/src/components/state-filter/state-filter.component.ts b/packages/elements/src/components/state-filter/state-filter.component.ts
@@ -62,14 +62,14 @@ export class FileStateFilterComponent<TStatus extends string> extends RealTimeEl
         // see https://lit-html.polymer-project.org/guide/writing-templates#repeating-templates-with-the-repeat-directive
         (filter) => filter.status,
         (filter) =>
-          html`<div class="flex items-center gap-2 last:mr-12" data-status="${filter.status.toString()}">
+          html`<div class="flex items-center gap-2 last:mr-12" data-status=${filter.status.toString()}>
             <input
-              ?checked="${filter.enabled}"
+              ?checked=${filter.enabled}
               id="filter-${filter.status}"
               aria-describedby="status-description"
               type="checkbox"
-              .value="${filter.status.toString()}"
-              @input="${(el: Event) => this.#checkboxChanged(filter, (el.target as HTMLInputElement).checked)}"
+              .value=${filter.status.toString()}
+              @input=${(el: Event) => this.#checkboxChanged(filter, (el.target as HTMLInputElement).checked)}
               class="h-5 w-5 shrink-0 rounded-sm bg-gray-100 ring-offset-gray-200! transition-colors checked:bg-primary-600 focus:ring-2 focus:ring-primary-500 focus:outline-hidden"
             />
 
@@ -86,7 +86,7 @@ export class FileStateFilterComponent<TStatus extends string> extends RealTimeEl
 
   #renderStepButton(handleClick: (ev: Event) => void, icon: SVGTemplateResult, title: string, srText: string) {
     return html`<button
-      title="${title}"
+      title=${title}
       @click=${handleClick}
       type="button"
       class="inline-flex items-center rounded-sm bg-primary-600 p-1 text-center text-white hover:bg-primary-700 focus:ring-2 focus:ring-primary-500 focus:outline-hidden"
diff --git a/packages/elements/src/components/test-file/test-file.component.ts b/packages/elements/src/components/test-file/test-file.component.ts
diff --git a/packages/elements/src/components/test-view/test-view.ts b/packages/elements/src/components/test-view/test-view.ts
diff --git a/packages/elements/src/components/theme-switch/theme-switch.component.ts b/packages/elements/src/components/theme-switch/theme-switch.component.ts
diff --git a/packages/elements/src/components/tooltip/tooltip.component.ts b/packages/elements/src/components/tooltip/tooltip.component.ts

Original file line number	Diff line number	Diff line change
`@@ -62,15 +62,15 @@ export class MutationTestReportBreadcrumbComponent extends BaseElement {`
`62`	`62`	`#renderLink(title: string, path: string[]) {`
`63`	`63`	return html`<li class="after:text-gray-800 after:content-['/'] md:after:pl-1">
`64`	`64`	`<a`
`65`		`- href="${toAbsoluteUrl(this.view, ...path)}"`
	`65`	`+ href=${toAbsoluteUrl(this.view, ...path)}`
`66`	`66`	`class="ml-1 text-sm font-medium text-primary-800 underline hover:text-gray-900 hover:underline md:ml-2"`
`67`	`67`	`>${title}</a`
`68`	`68`	`>`
`69`	`69`	</li>`;
`70`	`70`	`}`
`71`	`71`
`72`	`72`	`#renderSearchIcon() {`
`73`		- return html`<button @click="${() => this.#dispatchFilePickerOpenEvent()}" class="ml-auto cursor-pointer" title="Open file picker (Ctrl-K)"
	`73`	+ return html`<button @click=${() => this.#dispatchFilePickerOpenEvent()} class="ml-auto cursor-pointer" title="Open file picker (Ctrl-K)"
`74`	`74`	`>${searchIcon}</button`
`75`	`75`	>`;
`76`	`76`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ export const renderDrawer = ({ hasDetail, mode }: { hasDetail: boolean; mode: Dr`
`7`	`7`	html`<mte-drawer
`8`	`8`	`class="fixed bottom-0 z-10 container rounded-t-3xl bg-gray-200/60 shadow-xl backdrop-blur-lg motion-safe:transition-[height,max-width] motion-safe:duration-200"`
`9`	`9`	`?has-detail=${hasDetail}`
`10`		`- mode="${mode}"`
	`10`	`+ mode=${mode}`
`11`	`11`	`>`
`12`	`12`	`${content}`
`13`	`13`	</mte-drawer>`;