chore: update to latest eslint

.eslintrc.js

@@ -17,6 +17,9 @@ module.exports = {
         '**/*.config.js',
       ],
       rules: {
+        'lit/binding-positions': 'off',
+        'lit/no-invalid-html': 'off',
+        'lit/no-useless-template-literals': 'off',
         'no-console': 'off',
         'no-unused-expressions': 'off',
         'class-methods-use-this': 'off',

package.json

@@ -47,7 +47,7 @@
     "@mdjs/core": "^0.3.1",
     "@open-wc/building-rollup": "^1.2.1",
     "@open-wc/demoing-storybook": "^2.0.2",
-    "@open-wc/eslint-config": "^1.0.0",
+    "@open-wc/eslint-config": "^4.2.0",
     "@open-wc/testing": "^2.5.18",
     "@open-wc/testing-helpers": "^1.0.0",
     "@storybook/addon-a11y": "^5.3.21",
@@ -60,15 +60,19 @@
     "@webcomponents/webcomponentsjs": "^2.4.4",
     "babel-eslint": "^8.2.6",
     "babel-polyfill": "^6.26.0",
-    "bundlesize": "^0.17.1",
+    "bundlesize": "^1.0.0-beta.2",
     "chai": "^4.2.0",
     "chalk": "^4.1.0",
     "concurrently": "^5.2.0",
     "cross-env": "^7.0.2",
     "eclint": "^2.1.0",
     "es6-promisify": "^6.1.1",
-    "eslint": "^6.1.0",
+    "eslint": "^7.20.0",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-prettier": "^8.0.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-lit": "^1.3.0",
+    "eslint-plugin-lit-a11y": "^1.0.1",
+    "eslint-plugin-wc": "^1.2.0",
     "husky": "^1.3.1",
     "lint-staged": "^10.0.0",
     "looks-same": "^7.2.3",

packages-node/babel-plugin-extend-docs/demo/src/MyCounter.js

@@ -7,7 +7,8 @@ export class MyCounter extends LitElement {
     };
   }
 
-  static styles = css`
+  static get styles() {
+    return css`
       :host {
         display: block;
         width: 220px;
@@ -38,6 +39,7 @@ export class MyCounter extends LitElement {
         text-align: center;
       }
     `;
+  }
 
   constructor() {
     super();

packages-node/providence-analytics/dashboard/src/app/p-board.js

@@ -89,7 +89,7 @@ class PBoard extends DecorateMixin(LitElement) {
                       type="checkbox"
                       name="references"
                       .checked=${colName === 'lion-based-ui'}
-                      value="${refName}"
+                      .value="${refName}"
                     />${refName}</label
                   >
                 `,
@@ -130,7 +130,7 @@ class PBoard extends DecorateMixin(LitElement) {
                           type="checkbox"
                           name="repos"
                           .checked="${dep}"
-                          value="${dep}"
+                          .value="${dep}"
                         />${dep}</label
                       >
                     `,
@@ -302,12 +302,11 @@ class PBoard extends DecorateMixin(LitElement) {
       const refSearch = `_${ref.replace('#', '_')}_`;
       activeRepos.forEach(dep => {
         const depSearch = `_${dep.replace('#', '_')}_`;
-        const found = this.__resultFiles[activeAnalyzer].find(({ fileName }) => {
+        const found = this.__resultFiles[activeAnalyzer].find(
-          return (
+          ({ fileName }) =>
             fileName.includes(encodeURIComponent(refSearch)) &&
-            fileName.includes(encodeURIComponent(depSearch))
+            fileName.includes(encodeURIComponent(depSearch)),
         );
-        });
         if (found) {
           jsonResultsActiveFilter.push(found.content);
         } else {

packages/ajax/test/AjaxClient.test.js

@@ -103,9 +103,7 @@ describe('AjaxClient', () => {
 
   describe('request and response interceptors', () => {
     it('addRequestInterceptor() adds a function which intercepts the request', async () => {
-      ajax.addRequestInterceptor(async r => {
+      ajax.addRequestInterceptor(async r => new Request(`${r.url}/intercepted-1`));
-        return new Request(`${r.url}/intercepted-1`);
-      });
       ajax.addRequestInterceptor(async r => new Request(`${r.url}/intercepted-2`));
 
       await ajax.request('/foo', { method: 'POST' });

packages/ajax/test/interceptors-cache.test.js

@@ -4,7 +4,7 @@ import '../src/typedef.js';
 
 import { cacheRequestInterceptorFactory, cacheResponseInterceptorFactory, ajax } from '../index.js';
 
-describe('ajax cache', function describeLibCache() {
+describe('ajax cache', () => {
   /** @type {number | undefined} */
   let cacheId;
   /** @type {import('sinon').SinonStub} */

packages/button/test/lion-button.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable lit-a11y/click-events-have-key-events */
 import { browserDetection } from '@lion/core';
 import { aTimeout, expect, fixture, html, oneEvent, unsafeStatic } from '@open-wc/testing';
 import sinon from 'sinon';

packages/combobox/docs/gh-combobox/gh-combobox.js

@@ -293,7 +293,11 @@ export class GhCombobox extends LionCombobox {
           </div>
           <div class="form-field__group-two">
             <div class="gh-section-wrapper">${this._groupTwoTemplate()}</div>
-            <div class="gh-categories" @click="${this.__handleCategory}">
+            <div
+              class="gh-categories"
+              @click="${this.__handleCategory}"
+              @keydown="${this.__handleCategory}"
+            >
               <button type="button" data-category="branches" class="gh-categories__btn">
                 Branches
               </button>
@@ -351,8 +355,9 @@ export class GhCombobox extends LionCombobox {
   get slots() {
     return {
       ...super.slots,
-      'selection-display': () => {
+      'selection-display': () =>
-        return renderLitAsNode(html` <gh-button>
+        renderLitAsNode(html`
+          <gh-button>
             <svg
               slot="before"
               text="gray"
@@ -370,8 +375,8 @@ export class GhCombobox extends LionCombobox {
             </svg>
 
             <span slot="after"> </span>
-        </gh-button>`);
+          </gh-button>
-      },
+        `),
     };
   }
 

packages/combobox/docs/google-combobox/google-combobox.js

@@ -96,7 +96,7 @@ export class GoogleOption extends LinkMixin(LionOption) {
     return html`
       ${!this.imageUrl
         ? html` <div class="google-option__icon">${googleSearchIcon}</div>`
-        : html` <img class="google-option__icon" src="${this.imageUrl}" />`}
+        : html` <img class="google-option__icon" src="${this.imageUrl}" alt="" />`}
       ${super.render()}
     `;
   }

packages/core/test/DisabledWithTabIndexMixin.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable lit-a11y/tabindex-no-positive */
 import { expect, fixture, html } from '@open-wc/testing';
 
 import { LitElement } from '../index.js';

packages/form-core/src/form-group/FormGroupMixin.js

@@ -388,9 +388,9 @@ const FormGroupMixinImplementation = superclass =>
     _anyFormElementHasFeedbackFor(state) {
       return Object.keys(this.formElements).some(name => {
         if (Array.isArray(this.formElements[name])) {
-          return this.formElements[name].some((/** @type {FormControl} */ el) => {
+          return this.formElements[name].some((/** @type {FormControl} */ el) =>
-            return Boolean(el.hasFeedbackFor && el.hasFeedbackFor.includes(state));
+            Boolean(el.hasFeedbackFor && el.hasFeedbackFor.includes(state)),
-          });
+          );
         }
         return Boolean(
           this.formElements[name].hasFeedbackFor &&

packages/form-core/test-suites/FormatMixin.suite.js

@@ -310,7 +310,7 @@ export function runFormatMixinSuite(customConfig) {
         await fixture(html`
           <${elem} value="${generatedViewValue}" .formatter="${formatterSpy}"
             .formatOptions="${{ locale: 'en-GB', decimalSeparator: '-' }}">
-            <input slot="input" value="${generatedViewValue}">
+            <input slot="input" .value="${generatedViewValue}">
           </${elem}>
         `);
 
@@ -327,7 +327,7 @@ export function runFormatMixinSuite(customConfig) {
         const parserSpy = sinon.spy();
         const el = /** @type {FormatClass} */ (await fixture(html`
           <${elem} .parser="${parserSpy}">
-            <input slot="input" value="${generatedValue}">
+            <input slot="input" .value="${generatedValue}">
           </${elem}>
         `));
 
@@ -367,7 +367,7 @@ export function runFormatMixinSuite(customConfig) {
 
         const el = /** @type {FormatClass} */ (await fixture(html`
           <${elem} .formatter=${formatterSpy}>
-            <input slot="input" value="${generatedViewValue}">
+            <input slot="input" .value="${generatedViewValue}">
           </${elem}>
         `));
         expect(formatterSpy.callCount).to.equal(1);

packages/icon/test/IconManager.test.js

@@ -21,9 +21,7 @@ describe('IconManager', () => {
      * @return {TemplateResult | Promise<TemplateResult> | nothing | Promise<nothing>}
      */
     // eslint-disable-next-line no-unused-vars
-    const resolver = (iconset, icon) => {
+    const resolver = (iconset, icon) => nothing;
-      return nothing;
-    };
     manager.addIconResolver('foo', resolver);
 
     expect(manager.__iconResolvers.get('foo')).to.equal(resolver);

packages/localize/test/date/formatDate.test.js

@@ -240,9 +240,7 @@ describe('formatDate', () => {
      * @param {string} str
      * @returns {string}
      */
-    const upperCaseProcessor = str => {
+    const upperCaseProcessor = str => str.toUpperCase();
-      return str.toUpperCase();
-    };
 
     /**
      * Lowercase processor
@@ -250,9 +248,7 @@ describe('formatDate', () => {
      * @param {string} str
      * @returns {string}
      */
-    const lowerCaseProcessor = str => {
+    const lowerCaseProcessor = str => str.toLocaleLowerCase();
-      return str.toLocaleLowerCase();
-    };
 
     it('displays the appropriate date after post processor set in options', async () => {
       const testDate = new Date('2012/05/21');

packages/localize/test/number/formatNumber.test.js

@@ -379,9 +379,7 @@ describe('formatNumber', () => {
      * @param {string} str
      * @returns {string}
      */
-    const commaToSpaceProcessor = str => {
+    const commaToSpaceProcessor = str => str.replace(/,/g, ' ');
-      return str.replace(/,/g, ' ');
-    };
 
     /**
      * First space to dot processor
@@ -389,9 +387,7 @@ describe('formatNumber', () => {
      * @param {string} str
      * @returns {string}
      */
-    const firstSpaceToDotProcessor = str => {
+    const firstSpaceToDotProcessor = str => str.replace(' ', '.');
-      return str.replace(' ', '.');
-    };
 
     it('uses `options.postProcessors`', () => {
       const postProcessors = new Map();

packages/overlays/test-suites/OverlayMixin.suite.js

@@ -144,7 +144,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
     it('fires "before-closed" event on hide', async () => {
       const beforeSpy = sinon.spy();
       const el = /** @type {OverlayEl} */ (await fixture(html`
-        <${tag} @before-closed="${beforeSpy}" .opened="${true}">
+        <${tag} @before-closed="${beforeSpy}" opened>
           <div slot="content">content of the overlay</div>
           <button slot="invoker">invoker button</button>
         </${tag}>

packages/overlays/test/local-positioning.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable lit-a11y/click-events-have-key-events */
 import { expect, fixture, fixtureSync, html } from '@open-wc/testing';
 import { OverlayController } from '../src/OverlayController.js';
 import { normalizeTransformStyle } from './utils-tests/local-positioning-helpers.js';

packages/overlays/test/utils-tests/contain-focus.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable lit-a11y/no-autofocus */
 import { expect, fixture, html, nextFrame } from '@open-wc/testing';
 import { renderLitAsNode } from '@lion/helpers';
 import { getDeepActiveElement } from '../../src/utils/get-deep-active-element.js';
@@ -24,7 +25,7 @@ function simulateTabInWindow(elToRecieveFocus) {
 const interactionElementsNode = renderLitAsNode(html`
   <div>
     <button id="el1"></button>
-    <a id="el2" href="#"></a>
+    <a id="el2" href="#">foo</a>
     <div id="el3" tabindex="0"></div>
     <input id="el4" />
     <div id="el5" contenteditable="true"></div>
@@ -49,7 +50,7 @@ const lightDomAutofocusTemplate = html`
 
     <div id="rootElement">
       <button id="el1"></button>
-      <a id="el2" href="#"></a>
+      <a id="el2" href="#">foo</a>
       <div id="el3" tabindex="0"></div>
       <input id="el4" autofocus />
       <div id="el5" contenteditable="true"></div>

packages/overlays/test/utils-tests/get-focusable-elements.test.js

@@ -7,7 +7,7 @@ class ElementB extends LitElement {
   render() {
     const marker = this.getAttribute('marker') || '';
     return html`
-      <a id="el-b-${marker}-1" href="#"></a>
+      <a id="el-b-${marker}-1" href="#">foo</a>
 
       <div>
         <div id="el-b-${marker}-2" tabindex="0">
@@ -137,7 +137,7 @@ describe('getFocusableElements()', () => {
 
             <slot name="slot-a"></slot>
 
-            <a id="el-a-2" href="#"></a>
+            <a id="el-a-2" href="#">foo</a>
 
             <slot></slot>
 

packages/singleton-manager/demo/singleton-complex/overlayCompatibility.js

@@ -14,7 +14,10 @@ blocker.innerText = `Shared Blocker for App`;
 document.body.appendChild(blocker);
 
 class CompatibleManager1 extends OverlaysManager {
-  name = 'Compatible1 from App';
+  constructor() {
+    super();
+    this.name = 'Compatible1 from App';
+  }
 
   block(sync = true) {
     super.block();
@@ -36,7 +39,10 @@ class CompatibleManager1 extends OverlaysManager {
 }
 
 class CompatibleManager2 extends OverlaysManager2 {
-  name = 'Compatible2 from App';
+  constructor() {
+    super();
+    this.name = 'Compatible2 from App';
+  }
 
   blockBody(sync = true) {
     super.blockBody();

packages/singleton-manager/demo/singleton/overlayCompatibility.js

@@ -2,10 +2,9 @@ import { OverlaysManager } from 'overlays';
 import { singletonManager } from '../../index.js';
 
 class CompatibleManager extends OverlaysManager {
-  name = 'Compatible from App';
-
   constructor() {
     super();
+    this.name = 'Compatible from App';
     this.blocker.innerText = `Blocker for ${this.name}`;
   }