Initial move towards new ESLint config supporting TS

Co-authored-by: Sidney Keese <sidney@carbonfive.com>

.eslintignore

@@ -27,3 +27,31 @@ test/blanket_mocha.js
 # TypeScript generated files
 ts/**/*.js
 
+**/*.d.ts
+webpack.config.ts
+
+# Temporarily ignored during TSLint transition
+# JIRA: DESKTOP-304
+ts/*.ts
+ts/backbone/**
+ts/build/**
+ts/components/*.ts
+ts/components/*.tsx
+ts/components/conversation/**
+ts/components/stickers/**
+ts/notifications/**
+ts/protobuf/**
+ts/scripts/**
+ts/services/**
+ts/shims/**
+ts/sql/**
+ts/state/**
+ts/storybook/**
+ts/styleguide/**
+ts/test/**
+ts/textsecure/**
+ts/types/**
+ts/updater/**
+ts/util/**
+sticker-creator/**/*.ts
+sticker-creator/**/*.tsx

.eslintrc.js

@@ -1,7 +1,11 @@
 // For reference: https://github.com/airbnb/javascript
 
 module.exports = {
+  root: true,
   settings: {
+    react: {
+      version: 'detect',
+    },
     'import/core-modules': ['electron'],
   },
 
@@ -9,6 +13,35 @@ module.exports = {
 
   plugins: ['mocha', 'more'],
 
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        project: 'tsconfig.json',
+        ecmaFeatures: {
+          jsx: true,
+        },
+        ecmaVersion: 2018,
+        sourceType: 'module',
+      },
+      plugins: ['@typescript-eslint'],
+      extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react/recommended',
+        'airbnb-typescript-prettier',
+      ],
+    },
+    {
+      files: ['**/*.stories.tsx'],
+      rules: {
+        'import/no-extraneous-dependencies': 'off',
+        'react/jsx-props-no-spreading': 'off',
+      },
+    },
+  ],
+
   rules: {
     'comma-dangle': [
       'error',
@@ -37,7 +70,19 @@ module.exports = {
     'no-console': 'error',
 
     // consistently place operators at end of line except ternaries
-    'operator-linebreak': 'error',
+    'operator-linebreak': [
+      'error',
+      'after',
+      { overrides: { '?': 'ignore', ':': 'ignore' } },
+    ],
+
+    // Temporarily turned off during transition from TSLint
+    // JIRA: DESKTOP-623
+    'import/order': 'off',
+    'no-else-return': 'off',
+    'no-async-promise-executor': 'off',
+    'prefer-object-spread': 'off',
+    strict: 'off',
 
     quotes: [
       'error',

_locales/en/messages.json

@@ -1910,6 +1910,42 @@
     },
     "description": "Shown as a tooltip over the emoji tone buttons."
   },
+  "EmojiPicker__button--recents": {
+    "message": "Recents",
+    "description": "Label for recents emoji picker button"
+  },
+  "EmojiPicker__button--emoji": {
+    "message": "Emoji",
+    "description": "Label for emoji emoji picker button"
+  },
+  "EmojiPicker__button--animal": {
+    "message": "Animal",
+    "description": "Label for animal emoji picker button"
+  },
+  "EmojiPicker__button--food": {
+    "message": "Food",
+    "description": "Label for food emoji picker button"
+  },
+  "EmojiPicker__button--activity": {
+    "message": "Activity",
+    "description": "Label for activity emoji picker button"
+  },
+  "EmojiPicker__button--travel": {
+    "message": "Travel",
+    "description": "Label for travel emoji picker button"
+  },
+  "EmojiPicker__button--object": {
+    "message": "Object",
+    "description": "Label for object emoji picker button"
+  },
+  "EmojiPicker__button--symbol": {
+    "message": "Symbol",
+    "description": "Label for symbol emoji picker button"
+  },
+  "EmojiPicker__button--flag": {
+    "message": "Flag",
+    "description": "Label for flag emoji picker button"
+  },
   "confirmation-dialog--Cancel": {
     "message": "Cancel",
     "description": "Appears on the cancel button in confirmation dialogs."
@@ -2783,5 +2819,9 @@
         "example": "10/23/2023, 7:10 PM"
       }
     }
+  },
+  "EmojiButton__label": {
+    "message": "Emoji",
+    "description": "Label for emoji button"
   }
 }

app/spell_check.js

@@ -1,4 +1,3 @@
-/* global exports, require */
 /* eslint-disable strict */
 
 const { Menu, clipboard } = require('electron');

js/modules/i18n.d.ts

@@ -0,0 +1,6 @@
+import { LocalizerType } from '../../ts/types/Util';
+
+export const setup: (
+  language: string,
+  messages: Record<string, unknown>
+) => LocalizerType;

js/modules/link_previews.js

@@ -239,7 +239,7 @@ function assembleChunks(chunkDescriptors) {
   return concatenateBytes(...chunks);
 }
 
-const ASCII_PATTERN = new RegExp('[\\u0000-\\u007F]', 'g');
+const ASCII_PATTERN = new RegExp('[\\u0020-\\u007F]', 'g');
 
 function isLinkSneaky(link) {
   // Any links which contain auth are considered sneaky

js/notifications.js

@@ -3,7 +3,6 @@
 
 /* global drawAttention: false */
 /* global i18n: false */
-/* global Signal: false */
 /* global storage: false */
 /* global Whisper: false */
 /* global _: false */

js/read_receipts.js

@@ -4,7 +4,6 @@
   _,
   ConversationController,
   MessageController,
-  window
 */
 
 /* eslint-disable more/no-then */

libtextsecure/test/_test.js

@@ -1,4 +1,4 @@
-/* global mocha, chai, assert */
+/* global chai */
 
 mocha.setup('bdd');
 window.assert = chai.assert;

package.json

@@ -195,6 +195,8 @@
     "@types/webpack": "4.39.0",
     "@types/webpack-dev-server": "3.1.7",
     "@types/websocket": "1.0.0",
+    "@typescript-eslint/eslint-plugin": "3.10.1",
+    "@typescript-eslint/parser": "3.10.1",
     "arraybuffer-loader": "1.0.3",
     "asar": "0.14.0",
     "babel-core": "7.0.0-bridge.0",
@@ -209,12 +211,13 @@
     "electron-builder": "22.3.6",
     "electron-mocha": "8.1.1",
     "electron-notarize": "0.1.1",
-    "eslint": "4.18.2",
-    "eslint-config-airbnb-base": "12.1.0",
-    "eslint-config-prettier": "2.9.0",
-    "eslint-plugin-import": "2.8.0",
-    "eslint-plugin-mocha": "4.12.1",
-    "eslint-plugin-more": "0.3.1",
+    "eslint": "7.7.0",
+    "eslint-config-airbnb-typescript-prettier": "3.1.0",
+    "eslint-config-prettier": "6.11.0",
+    "eslint-plugin-import": "2.22.0",
+    "eslint-plugin-mocha": "8.0.0",
+    "eslint-plugin-more": "1.0.0",
+    "eslint-plugin-react": "7.20.6",
     "file-loader": "4.2.0",
     "grunt": "1.0.1",
     "grunt-cli": "1.2.0",
@@ -242,7 +245,7 @@
     "style-loader": "1.0.0",
     "ts-loader": "4.1.0",
     "ts-node": "8.3.0",
-    "tslint": "5.13.0",
+    "tslint": "6",
     "tslint-microsoft-contrib": "6.2.0",
     "tslint-react": "3.6.0",
     "typed-scss-modules": "0.0.11",

test/backup_test.js

@@ -1,4 +1,4 @@
-/* global Signal, Whisper, assert, textsecure, _, libsignal */
+/* global Signal, Whisper, textsecure, _, libsignal */
 
 /* eslint-disable no-console */
 

ts/components/emoji/Emoji.stories.tsx

@@ -1,13 +1,7 @@
 import * as React from 'react';
-import { Emoji, EmojiSizes, Props } from './Emoji';
-
-// @ts-ignore
-import { setup as setupI18n } from '../../js/modules/i18n';
-
-// @ts-ignore
-import enMessages from '../../_locales/en/messages.json';
 import { storiesOf } from '@storybook/react';
 import { boolean, select, text } from '@storybook/addon-knobs';
+import { Emoji, EmojiSizes, Props } from './Emoji';
 
 const story = storiesOf('Components/Emoji/Emoji', module);
 

ts/components/emoji/Emoji.tsx

@@ -33,11 +33,13 @@ export const Emoji = React.memo(
       }: Props,
       ref
     ) => {
-      const image = shortName
-        ? getImagePath(shortName, skinTone)
-        : emoji
-        ? emojiToImage(emoji)
-        : '';
+      let image = '';
+      if (shortName) {
+        image = getImagePath(shortName, skinTone);
+      } else if (emoji) {
+        image = emojiToImage(emoji) || '';
+      }
+
       const backgroundStyle = inline
         ? { backgroundImage: `url('${image}')` }
         : {};

ts/components/emoji/EmojiButton.stories.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
 
-// @ts-ignore
-import { setup as setupI18n } from '../../../js/modules/i18n';
-// @ts-ignore
-import enMessages from '../../../_locales/en/messages.json';
-
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+
+import { setup as setupI18n } from '../../../js/modules/i18n';
+import enMessages from '../../../_locales/en/messages.json';
+
 import { EmojiButton } from './EmojiButton';
 
 const i18n = setupI18n('en', enMessages);

ts/components/emoji/EmojiButton.tsx

@@ -105,12 +105,14 @@ export const EmojiButton = React.memo(
         <Reference>
           {({ ref }) => (
             <button
+              type="button"
               ref={ref}
               onClick={handleClickButton}
               className={classNames({
                 'module-emoji-button__button': true,
                 'module-emoji-button__button--active': open,
               })}
+              aria-label={i18n('EmojiButton__label')}
             />
           )}
         </Reference>

ts/components/emoji/EmojiPicker.stories.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
 
-// @ts-ignore
-import { setup as setupI18n } from '../../../js/modules/i18n';
-// @ts-ignore
-import enMessages from '../../../_locales/en/messages.json';
-
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+
+import { setup as setupI18n } from '../../../js/modules/i18n';
+import enMessages from '../../../_locales/en/messages.json';
+
 import { EmojiPicker } from './EmojiPicker';
 
 const i18n = setupI18n('en', enMessages);

ts/components/emoji/EmojiPicker.tsx

@@ -73,10 +73,7 @@ export const EmojiPicker = React.memo(
       ref
     ) => {
       const focusRef = React.useRef<HTMLButtonElement>(null);
-      // Per design: memoize the initial recent emojis so the grid only updates after re-opening the picker.
-      const firstRecent = React.useMemo(() => {
-        return recentEmojis;
-      }, []);
+      const [firstRecent] = React.useState(recentEmojis);
       const [selectedCategory, setSelectedCategory] = React.useState(
         categories[0]
       );
@@ -208,7 +205,7 @@ export const EmojiPicker = React.memo(
         );
 
         return [...chunk(firstRecent, COL_COUNT), ...chunks];
-      }, [dataByCategory, categories, firstRecent, searchText]);
+      }, [firstRecent, renderableCategories, searchText]);
 
       const catRowEnds = React.useMemo(() => {
         const rowEnds: Array<number> = [
@@ -223,13 +220,13 @@ export const EmojiPicker = React.memo(
         });
 
         return rowEnds;
-      }, [categories, dataByCategory]);
+      }, [firstRecent.length, renderableCategories]);
 
       const catToRowOffsets = React.useMemo(() => {
         const offsets = initial(catRowEnds).map(i => i + 1);
 
         return zipObject(categories, [0, ...offsets]);
-      }, [categories, catRowEnds]);
+      }, [catRowEnds]);
 
       const catOffsetEntries = React.useMemo(
         () => Object.entries(catToRowOffsets),
@@ -259,6 +256,7 @@ export const EmojiPicker = React.memo(
               style={cellStyle}
             >
               <button
+                type="button"
                 className="module-emoji-picker__button"
                 onClick={handlePickEmoji}
                 onKeyDown={handlePickEmoji}
@@ -270,7 +268,7 @@ export const EmojiPicker = React.memo(
             </div>
           ) : null;
         },
-        [emojiGrid, selectedTone]
+        [emojiGrid, handlePickEmoji, selectedTone]
       );
 
       const getRowHeight = React.useCallback(
@@ -297,13 +295,14 @@ export const EmojiPicker = React.memo(
 
             setSelectedCategory(cat);
           }, 10),
-        [catOffsetEntries, categories]
+        [catOffsetEntries]
       );
 
       return (
         <div className="module-emoji-picker" ref={ref} style={style}>
           <header className="module-emoji-picker__header">
             <button
+              type="button"
               ref={focusRef}
               onClick={handleToggleSearch}
               title={i18n('EmojiPicker--search-placeholder')}
@@ -314,6 +313,7 @@ export const EmojiPicker = React.memo(
                   ? 'module-emoji-picker__button--icon--close'
                   : 'module-emoji-picker__button--icon--search'
               )}
+              aria-label={i18n('EmojiPicker--search-placeholder')}
             />
             {searchMode ? (
               <div className="module-emoji-picker__header__search-field">
@@ -328,6 +328,7 @@ export const EmojiPicker = React.memo(
               categories.map(cat =>
                 cat === 'recents' && firstRecent.length === 0 ? null : (
                   <button
+                    type="button"
                     key={cat}
                     data-category={cat}
                     title={cat}
@@ -340,6 +341,7 @@ export const EmojiPicker = React.memo(
                         ? 'module-emoji-picker__button--selected'
                         : null
                     )}
+                    aria-label={i18n(`EmojiPicker__button--${cat}`)}
                   />
                 )
               )
@@ -377,7 +379,7 @@ export const EmojiPicker = React.memo(
               <Emoji
                 shortName="slightly_frowning_face"
                 size={16}
-                inline={true}
+                inline
                 style={{ marginLeft: '4px' }}
               />
             </div>
@@ -386,6 +388,7 @@ export const EmojiPicker = React.memo(
             <footer className="module-emoji-picker__footer">
               {[0, 1, 2, 3, 4, 5].map(tone => (
                 <button
+                  type="button"
                   key={tone}
                   data-tone={tone}
                   onClick={handlePickTone}

ts/components/emoji/lib.ts

@@ -1,4 +1,5 @@
-// @ts-ignore: untyped json
+// Camelcase disabled due to emoji-datasource using snake_case
+/* eslint-disable camelcase */
 import untypedData from 'emoji-datasource';
 import emojiRegex from 'emoji-regex';
 import {
@@ -17,8 +18,6 @@ import Fuse from 'fuse.js';
 import PQueue from 'p-queue';
 import is from '@sindresorhus/is';
 
-export type ValuesOf<T extends Array<any>> = T[number];
-
 export const skinTones = ['1F3FB', '1F3FC', '1F3FD', '1F3FE', '1F3FF'];
 
 export type SkinToneKey = '1F3FB' | '1F3FC' | '1F3FD' | '1F3FE' | '1F3FF';
@@ -82,7 +81,6 @@ const data = (untypedData as Array<EmojiData>)
       : emoji
   );
 
-// @ts-ignore
 const ROOT_PATH = get(
   // tslint:disable-next-line no-typeof-undefined
   typeof window !== 'undefined' ? window : null,
@@ -97,7 +95,7 @@ const makeImagePath = (src: string) => {
 const imageQueue = new PQueue({ concurrency: 10 });
 const images = new Set();
 
-export const preloadImages = async () => {
+export const preloadImages = async (): Promise<void> => {
   // Preload images
   const preload = async (src: string) =>
     new Promise((resolve, reject) => {
@@ -110,7 +108,7 @@ export const preloadImages = async () => {
       setTimeout(reject, 5000);
     });
 
-  // tslint:disable-next-line no-console
+  // eslint-disable-next-line no-console
   console.log('Preloading emoji images');
   const start = Date.now();
 
@@ -129,7 +127,7 @@ export const preloadImages = async () => {
   await imageQueue.onEmpty();
 
   const end = Date.now();
-  // tslint:disable-next-line no-console
+  // eslint-disable-next-line no-console
   console.log(`Done preloading emoji images in ${end - start}ms`);
 };
 
@@ -222,7 +220,7 @@ const fuse = new Fuse(data, {
   keys: ['name', 'short_name', 'short_names'],
 });
 
-export function search(query: string, count: number = 0) {
+export function search(query: string, count = 0): Array<EmojiData> {
   const results = fuse.search(query.substr(0, 32));
 
   if (count) {
@@ -237,11 +235,11 @@ const shortNames = new Set([
   ...compact<string>(flatMap(data, 'short_names')),
 ]);
 
-export function isShortName(name: string) {
+export function isShortName(name: string): boolean {
   return shortNames.has(name);
 }
 
-export function unifiedToEmoji(unified: string) {
+export function unifiedToEmoji(unified: string): string {
   return unified
     .split('-')
     .map(c => String.fromCodePoint(parseInt(c, 16)))
@@ -251,7 +249,7 @@ export function unifiedToEmoji(unified: string) {
 export function convertShortName(
   shortName: string,
   skinTone: number | SkinToneKey = 0
-) {
+): string {
   const base = dataByShortName[shortName];
 
   if (!base) {
@@ -300,15 +298,17 @@ export function getSizeClass(str: string): SizeClassType {
 
   if (emojiCount > 8) {
     return '';
-  } else if (emojiCount > 6) {
-    return 'small';
-  } else if (emojiCount > 4) {
-    return 'medium';
-  } else if (emojiCount > 2) {
-    return 'large';
-  } else {
-    return 'jumbo';
   }
+  if (emojiCount > 6) {
+    return 'small';
+  }
+  if (emojiCount > 4) {
+    return 'medium';
+  }
+  if (emojiCount > 2) {
+    return 'large';
+  }
+  return 'jumbo';
 }
 
 data.forEach(emoji => {

tslint.json

@@ -61,7 +61,7 @@
       true,
       {
         "import-sources-order": "any",
-        "named-imports-order": "case-insensitive"
+        "named-imports-order": "case-insensitive-legacy"
       }
     ],
 
@@ -174,5 +174,8 @@
     // We use || and && shortcutting because we're javascript programmers
     "strict-boolean-expressions": false
   },
-  "rulesDirectory": ["node_modules/tslint-microsoft-contrib"]
+  "rulesDirectory": ["node_modules/tslint-microsoft-contrib"],
+  "linterOptions": {
+    "exclude": ["ts/components/emoji/**/*.ts"]
+  }
 }

webpack.config.ts

@@ -1,7 +1,8 @@
+import { resolve } from 'path';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { Configuration, EnvironmentPlugin } from 'webpack';
 // tslint:disable-next-line no-require-imports
 import HtmlWebpackPlugin = require('html-webpack-plugin');
-import { resolve } from 'path';
 
 const context = __dirname;
 const { NODE_ENV: mode = 'development' } = process.env;
@@ -77,7 +78,6 @@ const stickerCreatorConfig: Configuration = {
       },
     }),
   ],
-  // @ts-ignore: this typing broke at some point
   devServer: {
     port: 6380,
     historyApiFallback: {