updated eslint to 8+

.eslintrc

@@ -34,7 +34,7 @@
     "guard-for-in": 0,
     "consistent-return": 0,
     "array-callback-return": 0,
-    "prefer-destructuring": 0,
+    "prefer-destructuring": 1,
     "class-methods-use-this": 0,
     "object-curly-newline": ["error", {
       "ObjectPattern": { "multiline": true },

package.json

@@ -58,10 +58,9 @@
     "clean-webpack-plugin": "^4.0.0",
     "compression-webpack-plugin": "^9.2.0",
     "css-loader": "^6.6.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.9.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-import-resolver-webpack": "^0.13.2",
-    "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.25.4",
     "eslint-webpack-plugin": "3.1.1",
     "file-loader": "^6.2.0",

src/components/api-request.js

@@ -274,11 +274,11 @@ export default class ApiRequest extends LitElement {
     for (const param of filteredParams) {
       const [declaredParamSchema, serializeStyle, mimeTypeElem] = getSchemaFromParam(param);
       if (!declaredParamSchema) {
-        continue;
+        continue; // eslint-disable-line no-continue
       }
       const paramSchema = getTypeInfo(declaredParamSchema);
       if (!paramSchema) {
-        continue;
+        continue; // eslint-disable-line no-continue
       }
       const schemaAsObj = schemaInObjectNotation(declaredParamSchema, {});
       // let exampleVal = '';
@@ -509,7 +509,7 @@ export default class ApiRequest extends LitElement {
     let reqBodyExampleHtml = '';
 
     const requestBodyTypes = [];
-    const content = this.request_body.content;
+    const { content } = this.request_body;
     for (const mimeType in content) {
       requestBodyTypes.push({
         mimeType,
@@ -709,7 +709,7 @@ export default class ApiRequest extends LitElement {
         <div style="width:24px; background-color:var(--light-border-color)">
           <div class="row" style="flex-direction:row-reverse; width:160px; height:24px; transform:rotate(270deg) translateX(-160px); transform-origin:top left; display:block;" @click="${(e) => {
           if (e.target.classList.contains('v-tab-btn')) {
-            const tab = e.target.dataset.tab;
+            const { tab } = e.target.dataset;
             if (tab) {
               const tabPanelEl = e.target.closest('.tab-panel');
               const selectedTabBtnEl = tabPanelEl.querySelector(`.v-tab-btn[data-tab="${tab}"]`);
@@ -1082,8 +1082,7 @@ export default class ApiRequest extends LitElement {
             queryParam.append(el.dataset.pname, el.value);
           }
         } else {
-          const paramSerializeStyle = el.dataset.paramSerializeStyle;
-          const paramSerializeExplode = el.dataset.paramSerializeExplode;
+          const { paramSerializeStyle, paramSerializeExplode } = el.dataset;
           let vals = ((el.value && Array.isArray(el.value)) ? el.value : []);
           vals = Array.isArray(vals) ? vals.filter((v) => v !== '') : [];
           if (vals.length > 0) {
@@ -1112,8 +1111,7 @@ export default class ApiRequest extends LitElement {
         const queryParam = new URLSearchParams();
         try {
           let queryParamObj = {};
-          const paramSerializeStyle = el.dataset.paramSerializeStyle;
-          const paramSerializeExplode = el.dataset.paramSerializeExplode;
+          const { paramSerializeStyle, paramSerializeExplode } = el.dataset.paramSerializeStyle;
           queryParamObj = Object.assign(queryParamObj, JSON.parse(el.value.replace(/\s+/g, ' ')));
           if (el.dataset.paramAllowReserved === 'true') {
             queryParamsWithReservedCharsAllowed.push(el.dataset.pname);
@@ -1283,7 +1281,7 @@ export default class ApiRequest extends LitElement {
       } else if (/^audio\/|^image\/|^video\/|^font\/|tar$|zip$|7z$|rtf$|msword$|excel$|\/pdf$|\/octet-stream$/.test(requestBodyType)) {
         const bodyParamFileEl = requestPanelEl.querySelector('.request-body-param-file');
         if (bodyParamFileEl?.files[0]) {
-          fetchOptions.body = bodyParamFileEl.files[0];
+          fetchOptions.body = bodyParamFileEl.files[0]; // eslint-disable-line prefer-destructuring
           curlData = ` --data-binary @${bodyParamFileEl.files[0].name} \\\n`;
         }
       } else if (requestBodyType.includes('json') || requestBodyType.includes('xml') || requestBodyType.includes('text')) {

src/components/api-response.js

@@ -148,7 +148,7 @@ export default class ApiResponse extends LitElement {
                   @click="${() => {
                     this.selectedStatus = respStatus;
                     if (this.responses[respStatus].content && Object.keys(this.responses[respStatus].content)[0]) {
-                      this.selectedMimeType = Object.keys(this.responses[respStatus].content)[0];
+                      this.selectedMimeType = Object.keys(this.responses[respStatus].content)[0]; // eslint-disable-line prefer-destructuring
                     } else {
                       this.selectedMimeType = undefined;
                     }

src/components/schema-table.js

@@ -162,8 +162,8 @@ export default class SchemaTable extends LitElement {
       isOneOfLabel = true;
     } else if (key.startsWith('::OPTION')) {
       const parts = key.split('~');
-      keyLabel = parts[1];
-      keyDescr = parts[2];
+      keyLabel = parts[1]; // eslint-disable-line prefer-destructuring
+      keyDescr = parts[2]; // eslint-disable-line prefer-destructuring
     } else {
       keyLabel = key;
     }

src/components/schema-tree.js

@@ -156,8 +156,8 @@ export default class SchemaTree extends LitElement {
       keyLabel = key.replace('::', '').replace('~', ' ');
     } else if (key.startsWith('::OPTION')) {
       const parts = key.split('~');
-      keyLabel = parts[1];
-      keyDescr = parts[2];
+      keyLabel = parts[1]; // eslint-disable-line prefer-destructuring
+      keyDescr = parts[2]; // eslint-disable-line prefer-destructuring
     } else {
       keyLabel = key;
     }

src/oauth-receiver.js

@@ -24,7 +24,7 @@ export default class OauthReceiver extends HTMLElement {
     } else if (window.location.hash) { // Applies to Implicit flow
       const token_type = this.parseQueryString(window.location.hash.substring(1), 'token_type'); // eslint-disable-line camelcase
       const access_token = this.parseQueryString(window.location.hash.substring(1), 'access_token'); // eslint-disable-line camelcase
-      authData = { token_type, access_token, responseType: 'token' };
+      authData = { token_type, access_token, responseType: 'token' }; // eslint-disable-line camelcase
     }
 
     if (window.opener) {

src/rapidoc-mini.js

@@ -316,7 +316,7 @@ export default class RapiDocMini extends LitElement {
     }
     if (!this.selectedServer) {
       if (this.resolvedSpec.servers) {
-        this.selectedServer = this.resolvedSpec.servers[0];
+        this.selectedServer = this.resolvedSpec.servers[0]; // eslint-disable-line prefer-destructuring
       }
     }
     this.requestUpdate();

src/rapidoc.js

@@ -709,7 +709,7 @@ export default class RapiDoc extends LitElement {
     }
     if (!this.selectedServer) {
       if (this.resolvedSpec.servers) {
-        this.selectedServer = this.resolvedSpec.servers[0];
+        this.selectedServer = this.resolvedSpec.servers[0]; // eslint-disable-line prefer-destructuring
       }
     }
     this.requestUpdate();

src/templates/security-scheme-template.js

@@ -253,9 +253,7 @@ async function onInvokeOAuthFlow(securitySchemeId, flowType, authUrl, tokenUrl,
 /* eslint-disable indent */
 
 function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, authFlow) {
-  let authorizationUrl = authFlow.authorizationUrl;
-  let tokenUrl = authFlow.tokenUrl;
-  let refreshUrl = authFlow.refreshUrl;
+  let { authorizationUrl, tokenUrl, refreshUrl } = authFlow.authorizationUrl;
   const isUrlAbsolute = (url) => (url.indexOf('://') > 0 || url.indexOf('//') === 0);
   if (refreshUrl && !isUrlAbsolute(refreshUrl)) {
     refreshUrl = `${this.selectedServer.computedUrl}/${refreshUrl.replace(/^\//, '')}`;

src/utils/schema-utils.js

@@ -105,7 +105,7 @@ export function normalizeExamples(examples, dataType = 'string') {
       }
       if (examples.length > 0) {
         if (dataType === 'array') {
-          exampleVal = examples[0];
+          [exampleVal] = examples;
           exampleList = examples.map((v) => ({ value: v, description: Array.isArray(v) ? v.join(' , ') : v }));
         } else {
           exampleVal = examples[0].toString();

src/utils/spec-parser.js

@@ -313,7 +313,7 @@ function groupByTags(openApiSpec, sortEndpointsBy, generateMissingTags = false,
           // Generate a short summary which is broken
           let shortSummary = (pathOrHookObj.summary || pathOrHookObj.description || `${methodName.toUpperCase()} ${pathOrHookName}`).trim();
           if (shortSummary.length > 100) {
-            shortSummary = shortSummary.split(/[.|!|?]\s|[\r?\n]/)[0]; // take the first line (period or carriage return)
+            [shortSummary] = shortSummary.split(/[.|!|?]\s|[\r?\n]/); // take the first line (period or carriage return)
           }
           // Merge Common Parameters with This methods parameters
           let finalParameters = [];

webpack.config.js

@@ -20,7 +20,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const UnminifiedWebpackPlugin = require('unminified-webpack-plugin');
 const path = require('path');
-// const ESLintPlugin = require('eslint-webpack-plugin');
+const ESLintPlugin = require('eslint-webpack-plugin');
 
 const rapidocVersion = JSON.stringify(require('./package.json').version).replace(/"/g, '');
 
@@ -36,6 +36,7 @@ const rapidocBanner = `
 const commonPlugins = [
   new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] }),
   new webpack.HotModuleReplacementPlugin(),
+  new ESLintPlugin({ extensions: ['js'] }),
   new CleanWebpackPlugin(),
   new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
   new HtmlWebpackPlugin({ template: 'index.html' }),
@@ -101,23 +102,6 @@ module.exports = {
   },
   module: {
     rules: [
-      {
-        enforce: 'pre',
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: 'eslint-loader',
-        options: {
-          emitWarning: true,
-          // failOnWarning: true,
-          // failOnError: true,
-          fix: false,
-          configFile: './.eslintrc',
-          outputReport: {
-            filePath: './eslint_report.html',
-            formatter: 'html',
-          },
-        },
-      },
       {
         test: /\.js$/,
         exclude: /node_modules/,