Set the browser target to ES6 and reduce the JS bundle size considerably

pgadmin-org · Jul 4, 2024 · fbbcc1a · fbbcc1a
1 parent 10b2e91
commit fbbcc1a
Show file tree

Hide file tree

Showing 21 changed files with 264 additions and 231 deletions.
diff --git a/web/.eslintignore b/web/.eslintignore
diff --git a/web/.eslintrc.js b/web/.eslintrc.js
@@ -6,98 +6,122 @@
 // This software is released under the PostgreSQL Licence
 //
 //////////////////////////////////////////////////////////////
+const globals = require('globals');
+const js = require('@eslint/js');
+const reactjs = require('eslint-plugin-react');
+const jest = require('eslint-plugin-jest');
+const babel = require('@babel/eslint-plugin');
+const babelParser = require('@babel/eslint-parser');
+const ts = require('typescript-eslint');
 
-module.exports = {
-  'env': {
-    'browser': true,
-    'es6': true,
-    'amd': true,
+
+module.exports = [
+  {
+    ignores: [
+      '**/generated',
+      '**/node_modules',
+      '**/vendor',
+      '**/templates/',
+      '**/templates\\',
+      '**/ycache',
+      '**/regression/htmlcov',
+    ],
   },
-  'extends': [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    /* Uncomment the below line to use linter error for React Hooks.
-       By Default commented so that builds are generated successfully.
-       Once all the errors will be resolved will uncomment it and commit it.
-    */
-    // "plugin:react-hooks/recommended",
-  ],
-  'parser': '@babel/eslint-parser',
-  'parserOptions': {
-    'requireConfigFile': false,
-    'ecmaVersion': 2018,
-    'ecmaFeatures': {
-      'jsx': true,
+  js.configs.recommended,
+  {
+    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
+    languageOptions: {
+      'parser': babelParser,
+      ecmaVersion: 2018,
+      parserOptions: {
+        'ecmaFeatures': {
+          'jsx': true,
+        },
+        'requireConfigFile': false,
+        'babelOptions': {
+          'plugins': [
+            '@babel/plugin-syntax-jsx',
+            '@babel/plugin-proposal-class-properties',
+          ],
+        },
+      },
+      'sourceType': 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.es2017,
+        ...globals.amd,
+        '_': 'readonly',
+        'module': 'readonly',
+        '__dirname': 'readonly',
+        'global': 'readonly',
+        'jest': 'readonly',
+        'process': 'readonly',
+      },
     },
-    'sourceType': 'module',
-    'babelOptions': {
-      'plugins': [
-        '@babel/plugin-syntax-jsx',
-        '@babel/plugin-proposal-class-properties',
-      ],
+    'plugins': {
+      'react': reactjs,
+      '@babel': babel,
     },
-  },
-  'plugins': [
-    'react',
-    '@babel',
-    'jest'
-  ],
-  'overrides': [
-    {
-      'files': ['**/*.{ts,tsx}'],
-      'plugins': [
-        '@typescript-eslint',
+    'rules': {
+      'indent': [
+        'error',
+        2,
+      ],
+      'linebreak-style': 0,
+      'quotes': [
+        'error',
+        'single',
+      ],
+      'semi': [
+        'error',
+        'always',
+      ],
+      'comma-dangle': [
+        'error',
+        'only-multiline',
       ],
-      'extends': ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/eslint-recommended'],
-      'parser': '@typescript-eslint/parser',
-      'rules': {
-        '@typescript-eslint/no-explicit-any': ['off'],
-        '@typescript-eslint/no-this-alias': ['off'],
-      }
+      'no-console': ['error', { allow: ['warn', 'error'] }],
+      // We need to exclude below for RegEx case
+      'no-useless-escape': 'off',
+      'no-prototype-builtins': 'off',
+      'no-global-assign': 'off',
+      'no-import-assign': 'off',
+      'react/jsx-uses-vars': 'error',
+      'react/jsx-uses-react': 'error'
     },
-    {
-      'files': ['**/*{spec,test}.{js,jsx}', './regression/javascript/**/*.{js}'],
-      'extends': ['eslint:recommended'],
-      'env': {
-        'jest': true
-      }
+    'settings': {
+      'react': {
+        'version': 'detect',
+      },
     },
-  ],
-  'globals': {
-    '_': true,
-    'module': true,
-    '__dirname': true,
-    'global': true,
-    'jest': true
   },
-  'rules': {
-    'indent': [
-      'error',
-      2,
-    ],
-    'linebreak-style': 0,
-    'quotes': [
-      'error',
-      'single',
-    ],
-    'semi': [
-      'error',
-      'always',
-    ],
-    'comma-dangle': [
-      'error',
-      'only-multiline',
-    ],
-    'no-console': ['error', { allow: ['warn', 'error'] }],
-    // We need to exclude below for RegEx case
-    'no-useless-escape': 0,
-    'no-prototype-builtins': 0,
-    'no-global-assign': 0,
-    'no-import-assign': 0,
-  },
-  'settings': {
-    'react': {
-      'version': 'detect',
+  {
+    'files': ['**/*.{ts,tsx}'],
+    languageOptions: {
+      'parser': ts.parser,
+    },
+    'plugins': {
+      '@typescript-eslint': ts.plugin,
     },
+    'rules': {
+      'no-unused-vars': 'off',
+      'no-undef': 'off',
+      '@typescript-eslint/no-unused-vars': ['error'],
+      '@typescript-eslint/no-explicit-any': ['off'],
+      '@typescript-eslint/no-this-alias': ['off'],
+    }
   },
-};
+  {
+    'files': ['**/*{spec,test}.{js,jsx}', './regression/javascript/**/*.{js}'],
+    ...jest.configs['flat/recommended'],
+    rules: {
+      ...jest.configs['flat/recommended'].rules,
+      'jest/prefer-expect-assertions': 'off',
+      'jest/expect-expect': 'off',
+      'jest/no-identical-title': 'off',
+      'jest/no-done-callback': 'off',
+      'jest/no-conditional-expect': 'off',
+      'jest/valid-title': 'off',
+    },
+  }
+];
diff --git a/web/package.json b/web/package.json
@@ -8,8 +8,8 @@
   "license": "PostgreSQL",
   "devDependencies": {
     "@babel/core": "^7.10.2",
-    "@babel/eslint-parser": "^7.21.3",
-    "@babel/eslint-plugin": "^7.17.7",
+    "@babel/eslint-parser": "^7.24.7",
+    "@babel/eslint-plugin": "^7.24.7",
     "@babel/plugin-proposal-object-rest-spread": "^7.10.1",
     "@babel/plugin-syntax-jsx": "^7.16.0",
     "@babel/plugin-transform-runtime": "^7.22.15",
@@ -25,8 +25,6 @@
     "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.4",
-    "@typescript-eslint/eslint-plugin": "^7.12.0",
-    "@typescript-eslint/parser": "^7.12.0",
     "autoprefixer": "^10.2.4",
     "axios-mock-adapter": "^1.17.0",
     "babel-loader": "^9.1.3",
@@ -36,11 +34,12 @@
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.2",
     "css-minimizer-webpack-plugin": "^5.0.0",
-    "eslint": "^8.37.0",
+    "eslint": "^9.5.0",
     "eslint-plugin-jest": "^27.4.0",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.3.0",
     "exports-loader": "^4.0.0",
+    "globals": "^15.8.0",
     "html-react-parser": "^5.0.6",
     "image-minimizer-webpack-plugin": "^4.0.2",
     "imagemin": "^8.0.1",
@@ -62,6 +61,7 @@
     "svgo-loader": "^2.2.0",
     "terser-webpack-plugin": "^5.1.1",
     "typescript": "^5.4.5",
+    "typescript-eslint": "^7.15.0",
     "url-loader": "^4.1.1",
     "webfonts-loader": "^8.0.1",
     "webpack": "^5.88.2",
@@ -156,7 +156,7 @@
     "zustand": "^4.4.1"
   },
   "scripts": {
-    "linter": "yarn eslint --no-eslintrc -c .eslintrc.js --ext .js  --ext .jsx --ext .ts --ext .tsx .",
+    "linter": "yarn run eslint -c .eslintrc.js .",
     "webpacker": "yarn run webpack --config webpack.config.js --progress",
     "webpacker:watch": "yarn run webpack --config webpack.config.js --progress --watch",
     "bundle:watch": "yarn run linter && yarn run webpacker:watch",
@@ -175,5 +175,8 @@
     "auditpy": "safety check --full-report -i 51668 -i 52495yarn npm audit",
     "audit-all": "yarn run auditjs && yarn run auditpy"
   },
-  "packageManager": "yarn@3.8.3"
+  "packageManager": "yarn@3.8.3",
+  "browserslist": [
+    "defaults and fully supports es6-module"
+  ]
 }
diff --git a/web/pgadmin/browser/server_groups/servers/roles/static/js/role.ui.js b/web/pgadmin/browser/server_groups/servers/roles/static/js/role.ui.js
@@ -32,8 +32,8 @@ export default class RoleSchema extends BaseUISchema {
       variables: [],
       rolbypassrls: false,
     });
-    this.getVariableSchema = getVariableSchema;
-    this.getMembershipSchema = getMembershipSchema;
+    this.variableSchema = getVariableSchema();
+    this.membershipSchema = getMembershipSchema();
     this.fieldOptions = {
       role: [],
       ...fieldOptions,
@@ -165,7 +165,7 @@ export default class RoleSchema extends BaseUISchema {
         disabled: obj.readOnly,
         mode: ['edit', 'create'], cell: 'text',
         type: 'collection',
-        schema: new obj.getMembershipSchema(),
+        schema: obj.membershipSchema,
         helpMessage: obj.isReadOnly ? gettext('Select the checkbox for roles to include WITH ADMIN OPTION.') : gettext('Roles shown with a check mark have the WITH ADMIN OPTION set.'),
       },
       {
@@ -183,7 +183,7 @@ export default class RoleSchema extends BaseUISchema {
         id: 'rolmembers', label: gettext('Members'), group: gettext('Membership'),
         mode: ['edit', 'create'], cell: 'text',
         type: 'collection',
-        schema: new obj.getMembershipSchema(),
+        schema: obj.membershipSchema,
         disabled: obj.readOnly,
         helpMessage: obj.isReadOnly ? gettext('Select the checkbox for roles to include WITH ADMIN OPTION.') : gettext('Roles shown with a check mark have the WITH ADMIN OPTION set.') ,
       },
@@ -201,7 +201,7 @@ export default class RoleSchema extends BaseUISchema {
       {
         id: 'variables', label: '', type: 'collection',
         group: gettext('Parameters'),
-        schema: this.getVariableSchema(),
+        schema: this.variableSchema,
         mode: [ 'edit', 'create'], canAdd: true, canDelete: true,
         disabled: obj.readOnly,
       },

diff --git a/web/pgadmin/dashboard/static/js/Dashboard.jsx b/web/pgadmin/dashboard/static/js/Dashboard.jsx
@@ -468,7 +468,7 @@ function Dashboard({
         link.click();
       }
       document.body.removeChild(link);
-    } catch (error) {
+    } catch {
       setSsMsg(gettext('Failed to download the logs.'));
     }
   };

diff --git a/web/pgadmin/dashboard/static/js/SystemStats/CpuDetails.jsx b/web/pgadmin/dashboard/static/js/SystemStats/CpuDetails.jsx
@@ -6,7 +6,7 @@
 // This software is released under the PostgreSQL Licence
 //
 //////////////////////////////////////////////////////////////
-// eslint-disable-next-line react/display-name
+ 
 import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
 import PgTable from 'sources/components/PgTable';
 import gettext from 'sources/gettext';

diff --git a/web/pgadmin/static/js/clipboard.js b/web/pgadmin/static/js/clipboard.js
@@ -3,7 +3,7 @@ import pgAdmin from 'sources/pgadmin';
 export async function copyToClipboard(text) {
   try {
     await navigator.clipboard.writeText(text);
-  } catch(err) {
+  } catch {
     /* Suppress error */
     pgAdmin.Browser.notifier.error('Does not have clipboard access');
   }

diff --git a/web/pgadmin/static/js/components/ReactCodeMirror/components/Editor.jsx b/web/pgadmin/static/js/components/ReactCodeMirror/components/Editor.jsx
@@ -66,7 +66,7 @@ function handleDrop(e, editor) {
     if (e.stopPropagation) {
       e.stopPropagation();
     }
-  } catch (error) {
+  } catch {
     /* if parsing fails, it must be the drag internal of codemirror text */
     return false;
   }

diff --git a/web/pgadmin/static/js/helpers/withColorPicker.js b/web/pgadmin/static/js/helpers/withColorPicker.js
@@ -15,7 +15,7 @@ import PropTypes from 'prop-types';
 import { fullHexColor } from '../utils';
 
 export function withColorPicker(Component) {
-  // eslint-disable-next-line react/display-name
+   
   const HOCComponent = ({value, currObj, onChange, onSave, options, ...props})=>{
     const pickrOptions = {
       showPalette: true,

diff --git a/web/pgadmin/static/js/helpers/withStandardTabInfo.jsx b/web/pgadmin/static/js/helpers/withStandardTabInfo.jsx
@@ -14,7 +14,7 @@ import { usePgAdmin } from '../../../static/js/BrowserComponent';
 import ErrorBoundary from './ErrorBoundary';
 
 export default function withStandardTabInfo(Component, tabId) {
-  // eslint-disable-next-line react/display-name
+   
   const HOCComponent = (props)=>{
     const [[isStale, nodeItem, nodeData], setNodeInfo] = useState([true, undefined, undefined]);
     const pgAdmin = usePgAdmin();

diff --git a/web/pgadmin/static/js/to_px.js b/web/pgadmin/static/js/to_px.js
@@ -84,7 +84,7 @@ export default function toPx(value, prop, force, el) {
     // set the style on the target element
     try {
       style[prop] = value;
-    } catch (e) {
+    } catch {
       // IE 8 and below throw an exception when setting unsupported units
       return 0;
     }