chore: update ESLint, Prettier and TypeScript version (#7549)

vaadin · Jul 12, 2024 · 01919cf · 01919cf
1 parent a02b4a0
commit 01919cf
Show file tree

Hide file tree

Showing 49 changed files with 1,053 additions and 934 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -19,13 +19,14 @@
  ],
  "rules": {
  "@typescript-eslint/class-literal-property-style": "off",
+ "@typescript-eslint/class-methods-use-this": "off",
  "@typescript-eslint/consistent-indexed-object-style": "off",
  "@typescript-eslint/no-dynamic-delete": "off",
  "@typescript-eslint/no-empty-interface": "off",
  "@typescript-eslint/no-extraneous-class": "off",
+ "@typescript-eslint/max-params": ["error", { "max": 5 }],
  "@typescript-eslint/no-shadow": "off",
  "@typescript-eslint/no-unused-expressions": "off",
- "@typescript-eslint/prefer-optional-chain": "off",
  "no-only-tests/no-only-tests": "error",
  "simple-import-sort/imports": [
  "error",
@@ -47,24 +48,16 @@
  }
  ],
  "arrow-body-style": "off",
- "class-methods-use-this": "off",
- "consistent-return": "off",
  "func-names": "off",
- "max-depth": "off",
- "max-params": "off",
  "no-await-in-loop": "off",
  "no-bitwise": "off",
  "no-multi-assign": "off",
  "no-param-reassign": "off",
- "no-shadow": "off",
- "no-unused-vars": "off",
- "no-use-before-define": "off",
  "one-var": "off",
  "prefer-destructuring": "off",
  "prefer-object-has-own": "off",
  "prefer-promise-reject-errors": "off",
- "radix": "off",
- "sort-keys": "off"
+ "radix": "off"
  },
  "overrides": [
  {

diff --git a/integration/tests/polymer.test.js b/integration/tests/polymer.test.js
@@ -6,10 +6,12 @@ import { templatize } from '@polymer/polymer/lib/utils/templatize.js';
 
 it('should not throw when templatized', () => {
  // Use Templatizer to create a new instances
- const TemplateClass = templatize(html`<div>
- <vaadin-combo-box></vaadin-combo-box>
- <vaadin-multi-select-combo-box></vaadin-multi-select-combo-box>
- </div>`);
+ const TemplateClass = templatize(html`
+ <div>
+ <vaadin-combo-box></vaadin-combo-box>
+ <vaadin-multi-select-combo-box></vaadin-multi-select-combo-box>
+ </div>
+ `);
 
  const instance = new TemplateClass();
  const wrapper = instance.root.querySelector('div');

diff --git a/package.json b/package.json
@@ -46,27 +46,27 @@
  "@web/test-runner-visual-regression": "^0.9.0",
  "axios": "^1.4.0",
  "dotenv": "^16.0.3",
- "eslint": "^8.49.0",
- "eslint-config-vaadin": "^1.0.0-alpha.17",
+ "eslint": "^8.57.0",
+ "eslint-config-vaadin": "^1.0.0-alpha.25",
  "eslint-plugin-es": "^4.1.0",
  "eslint-plugin-no-only-tests": "^3.1.0",
- "eslint-plugin-prettier": "^4.2.1",
- "eslint-plugin-simple-import-sort": "^10.0.0",
+ "eslint-plugin-prettier": "^5.1.3",
+ "eslint-plugin-simple-import-sort": "^12.0.0",
  "glob": "^8.0.3",
  "husky": "^8.0.1",
  "lerna": "^4.0.0",
  "lint-staged": "^13.2.2",
  "npm-run-all": "^4.1.5",
  "patch-package": "^7.0.0",
  "postcss-lit": "^1.1.0",
- "prettier": "^2.8.8",
+ "prettier": "^3.1.0",
  "prettier-plugin-package": "^1.3.0",
  "replace-in-file": "^6.3.5",
  "rimraf": "^5.0.1",
  "rollup": "^4.4.0",
  "stylelint": "^15.10.0",
  "stylelint-config-vaadin": "^1.0.0-alpha.1",
- "typescript": "^5.1.6"
+ "typescript": "^5.5.2"
  },
  "lint-staged": {
  "*.{js,ts}": [

diff --git a/packages/app-layout/src/vaadin-app-layout.js b/packages/app-layout/src/vaadin-app-layout.js
@@ -194,7 +194,9 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
  top: var(--vaadin-app-layout-navbar-offset-top, 0);
  bottom: var(--vaadin-app-layout-navbar-offset-bottom, var(--vaadin-viewport-offset-bottom, 0));
  inset-inline: var(--vaadin-app-layout-navbar-offset-left, 0) auto;
- transition: transform var(--vaadin-app-layout-transition), visibility var(--vaadin-app-layout-transition);
+ transition:
+ transform var(--vaadin-app-layout-transition),
+ visibility var(--vaadin-app-layout-transition);
  transform: translateX(-100%);
  max-width: 90%;
  width: var(--_vaadin-app-layout-drawer-width);

diff --git a/packages/avatar-group/src/vaadin-avatar-group.js b/packages/avatar-group/src/vaadin-avatar-group.js
@@ -430,18 +430,17 @@ class AvatarGroup extends ResizeMixin(OverlayClassMixin(ElementMixin(ThemableMix
  render(
  html`
  ${items.map(
- (item) =>
- html`
- <vaadin-avatar
- .name="${item.name}"
- .abbr="${item.abbr}"
- .img="${item.img}"
- .colorIndex="${item.colorIndex}"
- .i18n="${this.i18n}"
- class="${ifDefined(item.className)}"
- with-tooltip
- ></vaadin-avatar>
- `,
+ (item) => html`
+ <vaadin-avatar
+ .name="${item.name}"
+ .abbr="${item.abbr}"
+ .img="${item.img}"
+ .colorIndex="${item.colorIndex}"
+ .i18n="${this.i18n}"
+ class="${ifDefined(item.className)}"
+ with-tooltip
+ ></vaadin-avatar>
+ `,
  )}
  `,
  this,

diff --git a/packages/button/theme/lumo/vaadin-button-styles.js b/packages/button/theme/lumo/vaadin-button-styles.js
@@ -83,7 +83,9 @@ const button = css`
  /* Active */
 
  :host::after {
- transition: opacity 1.4s, transform 0.1s;
+ transition:
+ opacity 1.4s,
+ transform 0.1s;
  filter: blur(8px);
  }
 
@@ -101,7 +103,8 @@ const button = css`
  /* Keyboard focus */
 
  :host([focus-ring]) {
- box-shadow: 0 0 0 calc(1px * var(--_focus-ring-gap-on, 0)) var(--_focus-ring-gap-color, var(--lumo-base-color)),
+ box-shadow:
+ 0 0 0 calc(1px * var(--_focus-ring-gap-on, 0)) var(--_focus-ring-gap-color, var(--lumo-base-color)),
  0 0 0 calc(var(--_focus-ring-width) + 1px * var(--_focus-ring-gap-on, 0)) var(--_focus-ring-color);
  }
 

diff --git a/packages/charts/theme/vaadin-chart-base-theme.js b/packages/charts/theme/vaadin-chart-base-theme.js
@@ -155,7 +155,9 @@ const chartBaseTheme = css`
  cursor: pointer;
  fill: var(--vaadin-charts-disabled-label, hsla(214, 50%, 22%, 0.26));
  font-size: 0.7em;
- transition: fill 250ms, font-size 250ms;
+ transition:
+ fill 250ms,
+ font-size 250ms;
  }
 
  :where([styled-mode]) .highcharts-credits:hover {
@@ -435,14 +437,20 @@ const chartBaseTheme = css`
  :where([styled-mode]) .highcharts-treemap-series .highcharts-point {
  stroke-width: 2px;
  stroke: var(--vaadin-charts-background, #fff);
- transition: stroke 250ms, fill 250ms, fill-opacity 250ms;
+ transition:
+ stroke 250ms,
+ fill 250ms,
+ fill-opacity 250ms;
  }
 
  :where([styled-mode]) .highcharts-treemap-series .highcharts-point-hover {
  stroke-width: 0px;
  stroke: var(--vaadin-charts-background, #fff);
  fill-opacity: 0.75;
- transition: stroke 25ms, fill 25ms, fill-opacity 25ms;
+ transition:
+ stroke 25ms,
+ fill 25ms,
+ fill-opacity 25ms;
  }
 
  :where([styled-mode]) .highcharts-treemap-series .highcharts-above-level {
@@ -561,7 +569,9 @@ const chartBaseTheme = css`
  height: 0 !important;
  opacity: 0;
  overflow: hidden;
- transition: opacity 250ms, height 250ms step-end;
+ transition:
+ opacity 250ms,
+ height 250ms step-end;
  }
 
  :where([styled-mode]) .highcharts-loading-inner {
@@ -629,19 +639,25 @@ const chartBaseTheme = css`
  }
 
  :where([styled-mode]) .highcharts-sankey-series .highcharts-link {
- transition: fill 250ms, fill-opacity 250ms;
+ transition:
+ fill 250ms,
+ fill-opacity 250ms;
  fill-opacity: 0.5;
  }
 
  :where([styled-mode]) .highcharts-sankey-series .highcharts-point-hover.highcharts-link {
- transition: fill 50ms, fill-opacity 50ms;
+ transition:
+ fill 50ms,
+ fill-opacity 50ms;
  fill-opacity: 1;
  }
 
  :where([styled-mode]) .highcharts-venn-series .highcharts-point {
  fill-opacity: 0.75;
  stroke: var(--vaadin-charts-background, #fff);
- transition: stroke 250ms, fill-opacity 250ms;
+ transition:
+ stroke 250ms,
+ fill-opacity 250ms;
  }
 
  :where([styled-mode]) .highcharts-venn-series .highcharts-point-hover {
@@ -848,12 +864,17 @@ const chartBaseTheme = css`
 
  /* Highmaps */
  :where([styled-mode]) .highcharts-map-series .highcharts-point {
- transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
+ transition:
+ fill 500ms,
+ fill-opacity 500ms,
+ stroke-width 250ms;
  stroke: var(--vaadin-charts-contrast-20pct, hsla(214, 53%, 23%, 0.16));
  }
 
  :where([styled-mode]) .highcharts-map-series .highcharts-point-hover {
- transition: fill 0ms, fill-opacity 0ms;
+ transition:
+ fill 0ms,
+ fill-opacity 0ms;
  fill-opacity: 0.5;
  stroke-width: 2px;
  }
@@ -925,7 +946,9 @@ const chartBaseTheme = css`
  background: none;
  color: var(--vaadin-charts-button-label, hsl(214, 90%, 52%));
  cursor: pointer;
- transition: background 250ms, color 250ms;
+ transition:
+ background 250ms,
+ color 250ms;
  }
 
  :where([styled-mode]) .highcharts-menu-item:hover {

diff --git a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js
@@ -57,7 +57,9 @@ registerStyles(
  position: relative;
  border-radius: var(--vaadin-checkbox-border-radius, var(--lumo-border-radius-s));
  background: var(--vaadin-checkbox-background, var(--lumo-contrast-20pct));
- transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), background-color 0.15s;
+ transition:
+ transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2),
+ background-color 0.15s;
  cursor: var(--lumo-clickable-cursor);
  /* Default field border color */
  --_input-border-color: var(--vaadin-input-field-border-color, var(--lumo-contrast-50pct));
@@ -128,12 +130,16 @@ registerStyles(
 
  /* Focus ring */
  :host([focus-ring]) [part='checkbox'] {
- box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color),
+ box-shadow:
+ 0 0 0 1px var(--lumo-base-color),
+ 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color),
  inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
  }
 
  :host([focus-ring][readonly]:not([checked]):not([indeterminate])) [part='checkbox'] {
- box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
+ box-shadow:
+ 0 0 0 1px var(--lumo-base-color),
+ 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
  }
 
  /* Disabled */
@@ -180,7 +186,9 @@ registerStyles(
  background-color: inherit;
  transform: scale(1.4);
  opacity: 0;
- transition: transform 0.1s, opacity 0.8s;
+ transition:
+ transform 0.1s,
+ opacity 0.8s;
  }
 
  /* Hover */

diff --git a/packages/checkbox/theme/material/vaadin-checkbox-styles.js b/packages/checkbox/theme/material/vaadin-checkbox-styles.js
@@ -45,7 +45,9 @@ registerStyles(
  background-color: var(--material-disabled-text-color);
  transform: scale(0);
  opacity: 0;
- transition: transform 0s 0.8s, opacity 0.8s;
+ transition:
+ transform 0s 0.8s,
+ opacity 0.8s;
  will-change: transform, opacity;
  }
 

diff --git a/packages/combo-box/src/vaadin-combo-box-mixin.js b/packages/combo-box/src/vaadin-combo-box-mixin.js
@@ -512,7 +512,7 @@ export const ComboBoxMixin = (subclass) =>
  }
 
  /** @private */
- // eslint-disable-next-line max-params
+ // eslint-disable-next-line @typescript-eslint/max-params
  _updateScroller(
  scroller,
  items,

diff --git a/packages/cookie-consent/src/vaadin-cookie-consent.js b/packages/cookie-consent/src/vaadin-cookie-consent.js
@@ -188,6 +188,7 @@ class CookieConsent extends ElementMixin(PolymerElement) {
  }
 
  /** @private */
+ // eslint-disable-next-line @typescript-eslint/max-params
  __initialize(_showLearnMore, message, dismiss, learnMore, learnMoreLink, cookieName, position) {
  this.__closePopup();
 

diff --git a/packages/crud/src/vaadin-crud.js b/packages/crud/src/vaadin-crud.js
@@ -966,7 +966,7 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(PolymerElement)))
  * @param {Array<unknown> | undefined} items
  * @private
  */
- // eslint-disable-next-line max-params
+ // eslint-disable-next-line @typescript-eslint/max-params
  __gridPropsChanged(grid, theme, include, exclude, noFilter, noHead, noSort, items) {
  if (!grid) {
  return;

diff --git a/packages/date-picker/src/vaadin-date-picker-mixin.js b/packages/date-picker/src/vaadin-date-picker-mixin.js
@@ -735,7 +735,7 @@ export const DatePickerMixin = (subclass) =>
  }
 
  /** @private */
- // eslint-disable-next-line max-params
+ // eslint-disable-next-line @typescript-eslint/max-params
  _isNoInput(inputElement, fullscreen, ios, i18n, opened, autoOpenDisabled) {
  // On fullscreen mode, text input is disabled if auto-open isn't disabled or
  // whenever the dropdown is opened
@@ -863,7 +863,7 @@ export const DatePickerMixin = (subclass) =>
  }
 
  /** @private */
- // eslint-disable-next-line max-params
+ // eslint-disable-next-line @typescript-eslint/max-params
  __updateOverlayContent(
  overlayContent,
  i18n,
@@ -960,8 +960,8 @@ export const DatePickerMixin = (subclass) =>
  return parsedInitialPosition || dateAllowed(initialPosition, this._minDate, this._maxDate, this.isDateDisabled)
  ? initialPosition
  : this._minDate || this._maxDate
- ? getClosestDate(initialPosition, [this._minDate, this._maxDate])
- : new Date();
+  ? getClosestDate(initialPosition, [this._minDate, this._maxDate])
+  : new Date();
  }
 
  /**

diff --git a/packages/date-picker/src/vaadin-date-picker-overlay-content-mixin.js b/packages/date-picker/src/vaadin-date-picker-overlay-content-mixin.js
@@ -327,7 +327,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
  }
  }
 
- // eslint-disable-next-line max-params
+ // eslint-disable-next-line @typescript-eslint/max-params
  __updateCalendars(
  calendars,
  i18n,

diff --git a/packages/date-picker/src/vaadin-month-calendar.js b/packages/date-picker/src/vaadin-month-calendar.js
@@ -107,6 +107,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
  }
 
  /** @private */
+ // eslint-disable-next-line @typescript-eslint/max-params
  __getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled) {
  const result = ['date'];