Update development dependencies

Author: dgraham

.eslintrc.json

@@ -1,8 +1,8 @@
 {
   "parser": "@typescript-eslint/parser",
   "extends": [
-    "plugin:github/es6",
     "plugin:github/browser",
+    "plugin:github/recommended",
     "plugin:github/typescript"
   ],
   "globals": {

package-lock.json

@@ -12,25 +12,27 @@
   ],
   "scripts": {
     "clean": "rm -rf dist",
-    "lint": "github-lint",
+    "lint": "eslint src/*.ts test/*.js",
     "prebuild": "npm run clean && npm run lint && mkdir dist",
     "build": "tsc",
     "pretest": "npm run build",
     "test": "karma start test/karma.config.js",
     "prepublishOnly": "npm run build",
     "postpublish": "npm publish --ignore-scripts --@github:registry='https://npm.pkg.github.com'"
   },
+  "prettier": "@github/prettier-config",
   "devDependencies": {
+    "@github/prettier-config": "0.0.4",
     "chai": "^4.2.0",
-    "eslint": "^6.8.0",
-    "eslint-plugin-github": "^3.4.1",
-    "karma": "^4.4.1",
+    "eslint": "^7.9.0",
+    "eslint-plugin-github": "^4.1.1",
+    "karma": "^5.2.2",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.1.0",
-    "karma-mocha": "^1.3.0",
+    "karma-mocha": "^2.0.1",
     "karma-mocha-reporter": "^2.2.5",
     "mocha": "^7.1.0",
-    "typescript": "^3.8.3"
+    "typescript": "^4.0.3"
   },
   "eslintIgnore": [
     "dist/"

package.json

@@ -38,7 +38,7 @@ export default class TabContainerElement extends HTMLElement {
     })
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
     for (const tab of this.querySelectorAll('[role="tablist"] [role="tab"]')) {
       if (!tab.hasAttribute('aria-selected')) {
         tab.setAttribute('aria-selected', 'false')

src/index.ts

@@ -1,6 +1,7 @@
 {
   "env": {
-    "mocha": true
+    "mocha": true,
+    "node": true
   },
   "globals": {
     "assert": true

test/.eslintrc.json

@@ -1,4 +1,4 @@
-module.exports = function(config) {
+module.exports = function (config) {
   config.set({
     frameworks: ['mocha', 'chai'],
     files: [{pattern: '../dist/index.js', type: 'module'}, 'test.js'],

test/karma.config.js

@@ -1,18 +1,18 @@
-describe('tab-container', function() {
-  describe('element creation', function() {
-    it('creates from document.createElement', function() {
+describe('tab-container', function () {
+  describe('element creation', function () {
+    it('creates from document.createElement', function () {
       const el = document.createElement('tab-container')
       assert.equal('TAB-CONTAINER', el.nodeName)
     })
 
-    it('creates from constructor', function() {
+    it('creates from constructor', function () {
       const el = new window.TabContainerElement()
       assert.equal('TAB-CONTAINER', el.nodeName)
     })
   })
 
-  describe('after tree insertion', function() {
-    beforeEach(function() {
+  describe('after tree insertion', function () {
+    beforeEach(function () {
       document.body.innerHTML = `
       <tab-container>
         <div role="tablist">
@@ -33,11 +33,11 @@ describe('tab-container', function() {
       `
     })
 
-    afterEach(function() {
+    afterEach(function () {
       document.body.innerHTML = ''
     })
 
-    it('click works and `tab-container-changed` event is dispatched', function() {
+    it('click works and `tab-container-changed` event is dispatched', function () {
       const tabContainer = document.querySelector('tab-container')
       const tabs = document.querySelectorAll('button')
       const panels = document.querySelectorAll('[role="tabpanel"]')
@@ -54,7 +54,7 @@ describe('tab-container', function() {
       assert.equal(document.activeElement, tabs[1])
     })
 
-    it('keyboard shortcuts work and `tab-container-changed` events are dispatched', function() {
+    it('keyboard shortcuts work and `tab-container-changed` events are dispatched', function () {
       const tabContainer = document.querySelector('tab-container')
       const tabs = document.querySelectorAll('button')
       const panels = document.querySelectorAll('[role="tabpanel"]')
@@ -73,7 +73,7 @@ describe('tab-container', function() {
       assert.equal(counter, 2)
     })
 
-    it('click works and a cancellable `tab-container-change` event is dispatched', function() {
+    it('click works and a cancellable `tab-container-change` event is dispatched', function () {
       const tabContainer = document.querySelector('tab-container')
       const tabs = document.querySelectorAll('button')
       const panels = document.querySelectorAll('[role="tabpanel"]')
@@ -94,7 +94,7 @@ describe('tab-container', function() {
       assert.equal(counter, 1)
     })
 
-    it("panels that don't have a `data-tab-container-no-tabstop` attribute have tabindex with value '0'", function() {
+    it("panels that don't have a `data-tab-container-no-tabstop` attribute have tabindex with value '0'", function () {
       const tabs = document.querySelectorAll('button')
       const panels = document.querySelectorAll('[role="tabpanel"]')
 
@@ -105,22 +105,22 @@ describe('tab-container', function() {
       assert(!panels[2].hasAttribute('tabindex'))
     })
 
-    it('the aria-selected attribute is set to "false" for all tabs that don\'t have a aria-selected attribute', function() {
+    it('the aria-selected attribute is set to "false" for all tabs that don\'t have a aria-selected attribute', function () {
       for (const tab of document.querySelectorAll('[role="tab"]:not([aria-selected="true"])')) {
         assert.equal(tab.getAttribute('aria-selected'), 'false')
       }
     })
 
-    it('the tabindex attribute is set to "0" for the selected tab', function() {
+    it('the tabindex attribute is set to "0" for the selected tab', function () {
       assert.equal(document.querySelector('[role="tab"][aria-selected="true"]').getAttribute('tabindex'), '0')
     })
 
-    it('the tabindex attribute is set to "-1" for the non-selected tabs', function() {
+    it('the tabindex attribute is set to "-1" for the non-selected tabs', function () {
       for (const tab of document.querySelectorAll('[role="tab"]:not([aria-selected="true"])')) {
         assert.equal(tab.getAttribute('tabindex'), '-1')
       }
     })
-    it('selected tab has tabindex="0" after selection', function() {
+    it('selected tab has tabindex="0" after selection', function () {
       const tabs = document.querySelectorAll('[role="tab"]')
 
       tabs[1].click()