Upgrade Node packages (#2074)

* Revise prettier config

* Let Prettier read config from `.editorconfig`; use default for trailingComma

* Upgrade eslint and introduce typescript parser

* Add overrides for obsolete dependencies

* Fix Cypress tests

* Resolve 'this alias' lint errors and add more typing packages

* Fix tsconfig

* Resolve jQuery and DOM deprecations

* URLSearchParams is fully supported since 2018

* IntersectionObserver has been available since 2019

* Specify version number in NPM override

* Removing sourcemap-codec override

* Revise lockfile back to v3

---------

Co-authored-by: Vidya Ramakrishnan <vidya@hasgeek.in>

.dockerignore

@@ -16,8 +16,6 @@
 
 # Assets and static files
 funnel/static/build
-funnel/static/service-worker.js
-funnel/static/service-worker.js.map
 funnel/static/img/fa5-packed.svg
 **/node_modules
 **/*.packed.css

.editorconfig

@@ -3,42 +3,24 @@ root = True
 
 # For all files
 [*]
-end_of_line = lf
-insert_final_newline = true
-
-# For all code, config and documentation
-[*.{js,py,jinja2,j2,html,xml,css,sass,scss,json,yml,md,rst}]
 charset = utf-8
+end_of_line = lf
+indent_size = 2
 indent_style = space
-tab_width = 8
+insert_final_newline = true
 max_line_length = 88
+tab_width = 8
+trim_trailing_whitespace = true
 
 # Python code
 [*.py]
-indent_style = space
 indent_size = 4
-trim_trailing_whitespace = true
-
-# JavaScript and HTML/CSS
-[*.{js,js.jinja2,html.jinja2,xml.jinja2,j2,html,xml,css,sass,scss}]
-indent_style = space
-indent_size = 2
-trim_trailing_whitespace = true
 
 # Makefile
 [Makefile]
 indent_style = tab
 indent_size = tab
-trim_trailing_whitespace = true
 
-# Config
-[*.{json,toml,yml,yaml}]
-indent_style = space
-indent_size = 2
-trim_trailing_whitespace = true
-
-# Documentation
-[*.{md,rst,md.jinja2}]
-indent_style = space
-indent_size = 4
+# Markdown
+[*.{md,md.jinja2}]
 trim_trailing_whitespace = false

.eslintrc.js

@@ -1,21 +1,36 @@
-const OFF = 0;
-const WARN = 1;
-const ERROR = 2;
 module.exports = {
-  parser: 'babel-eslint',
+  root: true,
+  parser: '@typescript-eslint/parser',
+  ignorePatterns: [
+    'build/*',
+    'funnel/static/build/*',
+    'funnel/static/gen/*',
+    'funnel/static/js/libs/*',
+    'funnel/static/js/*.packed.js',
+  ],
   env: {
     browser: true,
     es6: true,
     jquery: true,
+    node: true,
   },
-  extends: ['airbnb-base', 'plugin:prettier/recommended', 'plugin:cypress/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:prettier/recommended',
+    'plugin:cypress/recommended',
+    'plugin:@typescript-eslint/strict',
+    'plugin:@typescript-eslint/stylistic',
+  ],
+  plugins: ['@typescript-eslint'],
   rules: {
-    'no-console': WARN,
-    'prefer-arrow-callback': [ERROR, { allowNamedFunctions: true }],
-    'prefer-const': WARN,
-    'new-cap': WARN,
-    'no-param-reassign': [ERROR, { props: false }],
+    'no-console': 'warn',
+    'prefer-arrow-callback': ['error', { allowNamedFunctions: true }],
+    'prefer-const': 'warn',
+    'new-cap': 'warn',
+    'no-param-reassign': ['error', { props: false }],
     // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? ERROR : OFF,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'cypress/no-unnecessary-waiting': 'off',
+    '@typescript-eslint/no-this-alias': ['error', { allowedNames: ['self'] }],
   },
 };

.gitignore

@@ -23,8 +23,6 @@ monkeytype.sqlite3
 # Assets and static files
 funnel/static/build
 funnel/static/gen
-funnel/static/service-worker.js
-funnel/static/service-worker.js.map
 funnel/static/img/fa5-packed.svg
 node_modules
 *.packed.css

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

cypress.config.js

@@ -1,4 +1,4 @@
-const { defineConfig } = require('cypress');
+import { defineConfig } from 'cypress';
 
 module.exports = defineConfig({
   projectId: '1kvcow',
@@ -16,7 +16,9 @@ module.exports = defineConfig({
     supportFile: 'tests/cypress/support.js',
   },
   component: {
-    setupNodeEvents(on, config) {},
+    setupNodeEvents() {
+      /* Do nothing */
+    },
     specPattern: 'tests/cypress/component/**/*.cy.{js,jsx,ts,tsx}',
   },
 });

funnel/assets/js/account_form.js

@@ -53,7 +53,7 @@ window.Hasgeek.Accountform = ({
                 .text(remoteData.error_description);
             } else {
               const errorTxt = $('<p class="mui-form__error"></p>').text(
-                remoteData.error_description
+                remoteData.error_description,
               );
               $(errorTxt).insertBefore($(fieldWrapper).find('.mui-form__helptext'));
             }
@@ -143,10 +143,9 @@ window.Hasgeek.Accountform = ({
     });
 
     $(usernameField).on('keydown', function handleUsernameEntry() {
-      const usernamefield = this;
       if (typingTimerUsername) clearTimeout(typingTimerUsername);
       typingTimerUsername = setTimeout(() => {
-        checkUsernameAvailability(usernamefield);
+        checkUsernameAvailability(this);
       }, typingWaitInterval);
     });
   }
@@ -157,10 +156,9 @@ window.Hasgeek.Accountform = ({
     });
 
     $(passwordField).on('keydown', function handlePasswordEntry() {
-      const field = this;
       if (typingTimer) clearTimeout(typingTimer);
       typingTimer = setTimeout(() => {
-        checkPasswordStrength(field);
+        checkPasswordStrength(this);
       }, typingWaitInterval);
     });
 

funnel/assets/js/account_saved.js

@@ -1,11 +1,11 @@
-import SaveProject from './utils/bookmark';
+import saveProject from './utils/bookmark';
 
 $(() => {
   $('.js-save-form').each(function saveProjectButton() {
     const projectSaveConfig = {
       formId: $(this).attr('id'),
       postUrl: $(this).attr('action'),
     };
-    SaveProject(projectSaveConfig);
+    saveProject(projectSaveConfig);
   });
 });

funnel/assets/js/app.js

@@ -1,5 +1,7 @@
 import 'jquery-modal';
 import 'trunk8';
+import pace from 'pace-js';
+
 import Utils from './utils/helper';
 import WebShare from './utils/webshare';
 import ScrollHelper from './utils/scrollhelper';
@@ -16,24 +18,22 @@ import setTimezoneCookie from './utils/timezone';
 import './utils/follow_action';
 import 'muicss/dist/js/mui';
 
-const pace = require('pace-js');
-
 $(() => {
   /* eslint-disable no-console */
   console.log(
-    'Hello, curious geek. Our source is at https://github.com/hasgeek. Why not contribute a patch?'
+    'Hello, curious geek. Our source is at https://github.com/hasgeek. Why not contribute a patch?',
   );
 
   loadLangTranslations();
   window.Hasgeek.Config.errorMsg = {
     serverError: window.gettext(
-      'An internal server error occurred. Our support team has been notified and will investigate'
+      'An internal server error occurred. Our support team has been notified and will investigate',
     ),
     networkError: window.gettext(
-      'Unable to connect. Check connection and refresh the page'
+      'Unable to connect. Check connection and refresh the page',
     ),
     rateLimitError: window.gettext('This is unusually high activity. Try again later'),
-    error: window.gettext('An error occured when submitting the form'),
+    error: window.gettext('An error occurred when submitting the form'),
   };
 
   Utils.collapse();
@@ -52,17 +52,6 @@ $(() => {
   // Request for new CSRF token and update the page every 15 mins
   setInterval(Utils.csrfRefresh, 900000);
 
-  // Add polyfill
-  if (!('URLSearchParams' in window)) {
-    const polyfill = document.createElement('script');
-    polyfill.setAttribute('type', 'text/javascript');
-    polyfill.setAttribute(
-      'src',
-      'https://cdnjs.cloudflare.com/ajax/libs/url-search-params/1.1.0/url-search-params.js'
-    );
-    document.head.appendChild(polyfill);
-  }
-
   setTimezoneCookie();
   updateParsleyConfig();
 });

funnel/assets/js/autosave_form.js

@@ -54,7 +54,7 @@ window.Hasgeek.autoSave = ({ autosave, formId, msgElemId }) => {
   $(window).bind('beforeunload', () => {
     if (haveDirtyFields()) {
       return window.gettext(
-        'You have unsaved changes on this page. Do you want to leave this page?'
+        'You have unsaved changes on this page. Do you want to leave this page?',
       );
     }
     return true;

funnel/assets/js/comments.js

@@ -190,7 +190,7 @@ const Comments = {
               const editorView = codemirrorHelper(
                 textareaId,
                 copyTextAreaContent,
-                SAVE_EDITOR_CONTENT_TIMEOUT
+                SAVE_EDITOR_CONTENT_TIMEOUT,
               );
               editorView.focus();
             });
@@ -268,7 +268,7 @@ const Comments = {
         refreshCommentsTimer() {
           this.refreshTimer = window.setInterval(
             this.fetchCommentsList,
-            REFRESH_INTERVAL
+            REFRESH_INTERVAL,
           );
         },
         getInitials: Utils.getInitials,
@@ -320,22 +320,22 @@ const Comments = {
             {
               rootMargin: '0px',
               threshold: 0,
-            }
+            },
           );
           observer.observe(commentSection);
         }
       },
       updated() {
         if (this.initialLoad && window.location.hash) {
           ScrollHelper.animateScrollTo(
-            $(window.location.hash).offset().top - this.headerHeight
+            $(window.location.hash).offset().top - this.headerHeight,
           );
           this.initialLoad = false;
         }
         if (this.scrollTo) {
           if ($(window).width() < MOBILE_BREAKPOINT) {
             ScrollHelper.animateScrollTo(
-              $(this.scrollTo).offset().top - this.headerHeight
+              $(this.scrollTo).offset().top - this.headerHeight,
             );
           }
           this.scrollTo = '';

funnel/assets/js/contact.js

@@ -6,7 +6,7 @@ $(() => {
     fullname,
     email,
     phone,
-    company
+    company,
   ) {
     const vCard = vCardsJS();
     vCard.firstName = fullname;
@@ -16,8 +16,8 @@ $(() => {
     element.setAttribute(
       'href',
       `data:text/x-vcard;charset=utf-8,${encodeURIComponent(
-        vCard.getFormattedString()
-      )}`
+        vCard.getFormattedString(),
+      )}`,
     );
     element.setAttribute('download', `${vCard.firstName}.vcf`);
   };