"Upgrades" tgui eslint

uses the current tgui eslint and upgrades react to 18.2. At least it will stop worrying about the line length

tgui/.eslintrc.yml

@@ -1,4 +1,5 @@
 root: true
+extends: prettier
 parser: '@typescript-eslint/parser'
 parserOptions:
   ecmaVersion: 2020
@@ -10,13 +11,14 @@ env:
   browser: true
   node: true
 plugins:
-  - radar
+  - sonarjs
   - react
+  - unused-imports
+  - simple-import-sort
 settings:
   react:
-    version: '16.10'
+    version: '18.2'
 rules:
-
   ## Possible Errors
   ## ----------------------------------------
   ## Enforce “for” loop update clause moving the counter in the right
@@ -307,13 +309,16 @@ rules:
   ## Enforce or disallow capitalization of the first letter of a comment
   # capitalized-comments: error
   ## Require or disallow trailing commas
-  comma-dangle: [error, {
-    arrays: always-multiline,
-    objects: always-multiline,
-    imports: always-multiline,
-    exports: always-multiline,
-    functions: only-multiline, ## Optional on functions
-  }]
+  comma-dangle: [
+      error,
+      {
+        arrays: always-multiline,
+        objects: always-multiline,
+        imports: always-multiline,
+        exports: always-multiline,
+        functions: only-multiline, ## Optional on functions
+      },
+    ]
   ## Enforce consistent spacing before and after commas
   comma-spacing: [error, { before: false, after: true }]
   ## Enforce consistent comma style
@@ -333,7 +338,7 @@ rules:
   ## Require or disallow named function expressions
   # func-names: error
   ## Enforce the consistent use of either function declarations or expressions
-  func-style: [error, expression]
+  # func-style: [error, expression]
   ## Enforce line breaks between arguments of a function call
   # function-call-argument-newline: error
   ## Enforce consistent line breaks inside function parentheses
@@ -348,15 +353,15 @@ rules:
   ## Enforce the location of arrow function bodies
   # implicit-arrow-linebreak: error
   ## Enforce consistent indentation
-  indent: [error, 2, { SwitchCase: 1 }]
+  # indent: [error, 2, { SwitchCase: 1 }]
   ## Enforce the consistent use of either double or single quotes in JSX
   ## attributes
-  jsx-quotes: [error, prefer-double]
+  # jsx-quotes: [error, prefer-double]
   ## Enforce consistent spacing between keys and values in object literal
   ## properties
-  key-spacing: [error, { beforeColon: false, afterColon: true }]
+  # key-spacing: [error, { beforeColon: false, afterColon: true }]
   ## Enforce consistent spacing before and after keywords
-  keyword-spacing: [error, { before: true, after: true }]
+  # keyword-spacing: [error, { before: true, after: true }]
   ## Enforce position of line comments
   # line-comment-position: error
   ## Enforce consistent linebreak style
@@ -368,14 +373,15 @@ rules:
   ## Enforce a maximum depth that blocks can be nested
   # max-depth: error
   ## Enforce a maximum line length
-  max-len: [error, {
-    code: 80,
-    ## Ignore imports
-    ignorePattern: '^(import\s.+\sfrom\s|.*require\()',
-    ignoreUrls: true,
-    ignoreRegExpLiterals: true,
-    ignoreStrings: true,
-  }]
+  # max-len: [error, {
+  #   code: 80,
+  #   ## Ignore imports
+  #   ignorePattern: '^(import\s.+\sfrom\s|.*require\()',
+  #   ignoreUrls: true,
+  #   ignoreRegExpLiterals: true,
+  #   ignoreStrings: true,
+  #   ignoreTemplateLiterals: true,
+  # }]
   ## Enforce a maximum number of lines per file
   # max-lines: error
   ## Enforce a maximum number of line of code in a function
@@ -412,7 +418,7 @@ rules:
   ## Disallow mixed binary operators
   # no-mixed-operators: error
   ## Disallow mixed spaces and tabs for indentation
-  no-mixed-spaces-and-tabs: error
+  # no-mixed-spaces-and-tabs: error
   ## Disallow use of chained assignment expressions
   # no-multi-assign: error
   ## Disallow multiple empty lines
@@ -438,7 +444,7 @@ rules:
   ## Disallow ternary operators when simpler alternatives exist
   # no-unneeded-ternary: error
   ## Disallow whitespace before properties
-  no-whitespace-before-property: error
+  # no-whitespace-before-property: error
   ## Enforce the location of single-line statements
   # nonblock-statement-body-position: error
   ## Enforce consistent line breaks inside braces
@@ -455,7 +461,7 @@ rules:
   ## Require or disallow assignment operator shorthand where possible
   # operator-assignment: error
   ## Enforce consistent linebreak style for operators
-  operator-linebreak: [error, before]
+  # operator-linebreak: [error, before]
   ## Require or disallow padding within blocks
   # padded-blocks: error
   ## Require or disallow padding lines between statements
@@ -480,11 +486,11 @@ rules:
   ## Enforce consistent spacing before blocks
   space-before-blocks: [error, always]
   ## Enforce consistent spacing before function definition opening parenthesis
-  space-before-function-paren: [error, {
-    anonymous: always,
-    named: never,
-    asyncArrow: always,
-  }]
+  # space-before-function-paren: [error, {
+  #   anonymous: always,
+  #   named: never,
+  #   asyncArrow: always,
+  # }]
   ## Enforce consistent spacing inside parentheses
   space-in-parens: [error, never]
   ## Require spacing around infix operators
@@ -646,7 +652,7 @@ rules:
   ## Enforce ES5 or ES6 class for React Components
   react/prefer-es6-class: error
   ## Enforce that props are read-only
-  react/prefer-read-only-props: error
+  react/prefer-read-only-props: off
   ## Enforce stateless React Components to be written as a pure function
   react/prefer-stateless-function: error
   ## Prevent missing props validation in a React component definition
@@ -668,7 +674,7 @@ rules:
   # react/sort-prop-types: error
   ## Enforce the state initialization style to be either in a constructor or
   ## with a class property
-  react/state-in-constructor: error
+  # react/state-in-constructor: error
   ## Enforces where React component static properties should be positioned.
   # react/static-property-placement: error
   ## Enforce style prop value being an object
@@ -693,7 +699,7 @@ rules:
   react/jsx-closing-tag-location: error
   ## Enforce or disallow newlines inside of curly braces in JSX attributes and
   ## expressions (fixable)
-  react/jsx-curly-newline: error
+  # react/jsx-curly-newline: error
   ## Enforce or disallow spaces inside of curly braces in JSX attributes and
   ## expressions (fixable)
   react/jsx-curly-spacing: error
@@ -706,11 +712,11 @@ rules:
   ## Enforce event handler naming conventions in JSX
   react/jsx-handler-names: error
   ## Validate JSX indentation (fixable)
-  react/jsx-indent: [error, 2, {
-    checkAttributes: true,
-  }]
+  # react/jsx-indent: [error, 2, {
+  #   checkAttributes: true,
+  # }]
   ## Validate props indentation in JSX (fixable)
-  react/jsx-indent-props: [error, 2]
+  # react/jsx-indent-props: [error, 2]
   ## Validate JSX has key prop when in array or iterator
   react/jsx-key: error
   ## Validate JSX maximum depth
@@ -756,3 +762,9 @@ rules:
   react/jsx-uses-vars: error
   ## Prevent missing parentheses around multilines JSX (fixable)
   react/jsx-wrap-multilines: error
+  ## Prevents the use of unused imports.
+  ## This could be done by enabling no-unused-vars, but we're doing this for now
+  unused-imports/no-unused-imports: error
+  ## https://github.com/lydell/eslint-plugin-simple-import-sort/
+  simple-import-sort/imports: error
+  simple-import-sort/exports: error

tgui/package.json

@@ -51,6 +51,8 @@
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-radar": "^0.2.1",
     "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-simple-import-sort": "latest",
+    "eslint-plugin-sonarjs": "latest",
     "eslint-plugin-unused-imports": "^3.0.0",
     "globals": "^13.23.0",
     "inferno": "^8.2.2",
@@ -60,6 +62,8 @@
     "jsdom": "^22.1.0",
     "katex": "^0.15.6",
     "mini-css-extract-plugin": "^2.7.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",

tgui/packages/tgui-dev-server/dreamseeker.js

@@ -6,6 +6,7 @@
 
 import { exec } from 'child_process';
 import { promisify } from 'util';
+
 import { createLogger } from './logging.js';
 import { require } from './require.js';
 

tgui/packages/tgui-dev-server/index.js

@@ -4,8 +4,8 @@
  * @license MIT
  */
 
-import { createCompiler } from './webpack.js';
 import { reloadByondCache } from './reloader.js';
+import { createCompiler } from './webpack.js';
 
 const noHot = process.argv.includes('--no-hot');
 const noTmp = process.argv.includes('--no-tmp');

tgui/packages/tgui-dev-server/link/retrace.js

@@ -6,6 +6,7 @@
 
 import fs from 'fs';
 import { basename } from 'path';
+
 import { createLogger } from '../logging.js';
 import { require } from '../require.js';
 import { resolveGlob } from '../util.js';

tgui/packages/tgui-dev-server/link/server.js

@@ -6,6 +6,7 @@
 
 import http from 'http';
 import { inspect } from 'util';
+
 import { createLogger, directLog } from '../logging.js';
 import { require } from '../require.js';
 import { loadSourceMaps, retrace } from './retrace.js';

tgui/packages/tgui-dev-server/reloader.js

@@ -7,6 +7,7 @@
 import fs from 'fs';
 import os from 'os';
 import { basename } from 'path';
+
 import { DreamSeeker } from './dreamseeker.js';
 import { createLogger } from './logging.js';
 import { resolveGlob, resolvePath } from './util.js';

tgui/packages/tgui-dev-server/util.js

@@ -6,6 +6,7 @@
 
 import fs from 'fs';
 import path from 'path';
+
 import { require } from './require.js';
 
 const globPkg = require('glob');

tgui/packages/tgui-dev-server/webpack.js

@@ -7,6 +7,7 @@
 import fs from 'fs';
 import { createRequire } from 'module';
 import { dirname } from 'path';
+
 import { loadSourceMaps, setupLink } from './link/server.js';
 import { createLogger } from './logging.js';
 import { reloadByondCache } from './reloader.js';

tgui/packages/tgui-dev-server/winreg.js

@@ -8,6 +8,7 @@
 
 import { exec } from 'child_process';
 import { promisify } from 'util';
+
 import { createLogger } from './logging.js';
 
 const logger = createLogger('winreg');

tgui/packages/tgui-panel/Panel.js

@@ -6,6 +6,7 @@
 
 import { Button, Section, Stack } from 'tgui/components';
 import { Pane } from 'tgui/layouts';
+
 import { NowPlayingWidget, useAudio } from './audio';
 import { ChatPanel, ChatTabs } from './chat';
 import { useGame } from './game';

tgui/packages/tgui-panel/audio/NowPlayingWidget.js

@@ -7,6 +7,7 @@
 import { toFixed } from 'common/math';
 import { useDispatch, useSelector } from 'common/redux';
 import { Button, Flex, Knob } from 'tgui/components';
+
 import { useSettings } from '../settings';
 import { selectAudio } from './selectors';
 

tgui/packages/tgui-panel/audio/hooks.js

@@ -4,7 +4,8 @@
  * @license MIT
  */
 
-import { useSelector, useDispatch } from 'common/redux';
+import { useDispatch, useSelector } from 'common/redux';
+
 import { selectAudio } from './selectors';
 
 export const useAudio = context => {

tgui/packages/tgui-panel/chat/ChatPageSettings.js

@@ -6,6 +6,7 @@
 
 import { useDispatch, useSelector } from 'common/redux';
 import { Button, Collapsible, Divider, Input, Section, Stack } from 'tgui/components';
+
 import { removeChatPage, toggleAcceptedType, updateChatPage } from './actions';
 import { MESSAGE_TYPES } from './constants';
 import { selectCurrentChatPage } from './selectors';

tgui/packages/tgui-panel/chat/ChatPanel.js

@@ -7,6 +7,7 @@
 import { shallowDiffers } from 'common/react';
 import { Component, createRef } from 'inferno';
 import { Button } from 'tgui/components';
+
 import { chatRenderer } from './renderer';
 
 export class ChatPanel extends Component {

tgui/packages/tgui-panel/chat/ChatTabs.js

@@ -5,10 +5,11 @@
  */
 
 import { useDispatch, useSelector } from 'common/redux';
-import { Box, Tabs, Flex, Button } from 'tgui/components';
-import { changeChatPage, addChatPage } from './actions';
-import { selectChatPages, selectCurrentChatPage } from './selectors';
+import { Box, Button, Flex, Tabs } from 'tgui/components';
+
 import { openChatSettings } from '../settings/actions';
+import { addChatPage, changeChatPage } from './actions';
+import { selectChatPages, selectCurrentChatPage } from './selectors';
 
 const UnreadCountWidget = ({ value }) => (
   <Box

tgui/packages/tgui-panel/chat/actions.js

@@ -5,6 +5,7 @@
  */
 
 import { createAction } from 'common/redux';
+
 import { createPage } from './model';
 
 export const loadChat = createAction('chat/load');

tgui/packages/tgui-panel/chat/middleware.js

@@ -4,8 +4,9 @@
  * @license MIT
  */
 
-import DOMPurify from 'dompurify';
 import { storage } from 'common/storage';
+import DOMPurify from 'dompurify';
+
 import { loadSettings, updateSettings } from '../settings/actions';
 import { selectSettings } from '../settings/selectors';
 import { addChatPage, changeChatPage, changeScrollTracking, loadChat, rebuildChat, removeChatPage, saveChatToDisk, toggleAcceptedType, updateMessageCount } from './actions';

tgui/packages/tgui-panel/chat/model.js

@@ -5,7 +5,8 @@
  */
 
 import { createUuid } from 'common/uuid';
-import { MESSAGE_TYPES, MESSAGE_TYPE_INTERNAL } from './constants';
+
+import { MESSAGE_TYPE_INTERNAL, MESSAGE_TYPES } from './constants';
 
 export const canPageAcceptType = (page, type) => (
   type.startsWith(MESSAGE_TYPE_INTERNAL) || page.acceptedTypes[type]

tgui/packages/tgui-panel/chat/reducer.js

@@ -4,7 +4,7 @@
  * @license MIT
  */
 
-import { addChatPage, changeChatPage, loadChat, removeChatPage, toggleAcceptedType, updateChatPage, updateMessageCount, changeScrollTracking } from './actions';
+import { addChatPage, changeChatPage, changeScrollTracking, loadChat, removeChatPage, toggleAcceptedType, updateChatPage, updateMessageCount } from './actions';
 import { canPageAcceptType, createMainPage } from './model';
 
 const mainPage = createMainPage();

tgui/packages/tgui-panel/chat/renderer.js

@@ -7,7 +7,8 @@
 import { EventEmitter } from 'common/events';
 import { classes } from 'common/react';
 import { createLogger } from 'tgui/logging';
-import { COMBINE_MAX_MESSAGES, COMBINE_MAX_TIME_WINDOW, IMAGE_RETRY_DELAY, IMAGE_RETRY_LIMIT, IMAGE_RETRY_MESSAGE_AGE, MAX_PERSISTED_MESSAGES, MAX_VISIBLE_MESSAGES, MESSAGE_PRUNE_INTERVAL, MESSAGE_TYPES, MESSAGE_TYPE_INTERNAL, MESSAGE_TYPE_UNKNOWN } from './constants';
+
+import { COMBINE_MAX_MESSAGES, COMBINE_MAX_TIME_WINDOW, IMAGE_RETRY_DELAY, IMAGE_RETRY_LIMIT, IMAGE_RETRY_MESSAGE_AGE, MAX_PERSISTED_MESSAGES, MAX_VISIBLE_MESSAGES, MESSAGE_PRUNE_INTERVAL, MESSAGE_TYPE_INTERNAL, MESSAGE_TYPE_UNKNOWN, MESSAGE_TYPES } from './constants';
 import { canPageAcceptType, createMessage, isSameMessage } from './model';
 import { highlightNode, linkifyNode } from './replaceInTextNode';
 

tgui/packages/tgui-panel/game/hooks.js

@@ -5,6 +5,7 @@
  */
 
 import { useSelector } from 'common/redux';
+
 import { selectGame } from './selectors';
 
 export const useGame = context => {