Upgrade JS dependencies: semver-compatible, ESlint, uuid

ui/frontend/.prettierignore

@@ -12,7 +12,6 @@ node_modules
 *.scss
 
 # Slowly migrate files that we've touched
-!.eslintrc.js
 !BuildMenu.tsx
 !ButtonSet.tsx
 !Header.tsx
@@ -32,6 +31,7 @@ node_modules
 !editor/MonacoEditorCore.tsx
 !editor/SimpleEditor.tsx
 !editor/rust_monaco_def.ts
+!eslint.config.mjs
 !hooks.ts
 !observer.ts
 !prism-shim.ts

ui/frontend/ConfigElement.tsx

@@ -11,7 +11,7 @@ interface EitherProps<T extends string> extends ConfigElementProps {
   aLabel?: string;
   bLabel?: string;
   value: T;
-  onChange: (_: T) => any;
+  onChange: (_: T) => void;
 }
 
 export const Either =
@@ -39,7 +39,7 @@ export const Either =
 interface SelectProps<T extends string> extends ConfigElementProps {
   children: React.ReactNode;
   value: T;
-  onChange: (_: T) => any;
+  onChange: (_: T) => void;
 }
 
 export const Select = <T extends string,>({ value, onChange, children, ...rest }: SelectProps<T>) => (

ui/frontend/Icon.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 
 import * as styles from './Icon.module.css';
 
-/* eslint-disable max-len */
-
 // These icons came from Material Design originally
 // https://material.io/tools/icons/?icon=assignment&style=outline
 
@@ -30,7 +28,6 @@ export const MoreOptionsIcon = () => (
 
 export const MoreOptionsActiveIcon = () => (
   <svg className={styles.icon} height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
-    {/* eslint-disable-next-line react/no-unknown-property */}
     <path fillRule="evenodd" fill="#428bca" d="M4,5 h16 a3,3 0 0,1 3,3 v8 a3,3 0 0,1 -3,3 h-16 a3,3 0 0,1 -3,-3 v-8 a3,3 0 0,1 3,-3 Z M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
   </svg>
 );

ui/frontend/Output.tsx

@@ -31,7 +31,7 @@ interface TabProps {
   kind: Focus;
   focus?: Focus;
   label: string;
-  onClick: () => any;
+  onClick: () => void;
   tabProps: object;
 }
 

ui/frontend/Output/Execute.tsx

@@ -24,7 +24,7 @@ const Execute: React.FC = () => {
 };
 
 interface WarningProps {
-  addMainFunction: () => any;
+  addMainFunction: () => void;
 }
 
 const Warning: React.FC<WarningProps> = props => (

ui/frontend/Router.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { UnknownAction } from '@reduxjs/toolkit';
+import { Reducer, UnknownAction } from '@reduxjs/toolkit';
 
 import { createBrowserHistory as createHistory, Path, Location } from 'history';
-import { createRouter, PlainOrThunk } from './uss-router';
+import { createRouter, PlainOrThunk, RouterObject, StoreArg } from './uss-router';
 import UssRouter from './uss-router/Router';
 
 import qs from 'qs';
@@ -82,7 +82,7 @@ const locationToAction = (location: Location): PlainOrThunk<State, UnknownAction
 };
 
 export default class Router extends React.Component<RouterProps> {
-  private router: any;
+  private router: RouterObject<UnknownAction>;
 
   public constructor(props: RouterProps) {
     super(props);
@@ -104,6 +104,6 @@ export default class Router extends React.Component<RouterProps> {
 
 interface RouterProps {
   children: React.ReactNode;
-  store: any;
-  reducer: any;
+  store: StoreArg<State, UnknownAction>;
+  reducer: Reducer<State>;
 }

ui/frontend/SelectOne.tsx

@@ -7,7 +7,7 @@ interface SelectOneProps<T> {
   name: string;
   currentValue: T;
   thisValue: T;
-  changeValue: (_: T) => any;
+  changeValue: (_: T) => void;
 }
 
 export default class SelectOne<T> extends React.PureComponent<SelectOneProps<T>> {

ui/frontend/api.ts

@@ -23,7 +23,9 @@ export function jsonGet(url: FetchArg): Promise<unknown> {
   });
 }
 
-export function jsonPost(url: FetchArg, body: Record<string, any>): Promise<unknown> {
+type ToJson = Parameters<typeof JSON.stringify>[0];
+
+export function jsonPost(url: FetchArg, body: ToJson): Promise<unknown> {
   return fetchJson(url, {
     method: 'post',
     body: JSON.stringify(body),

ui/frontend/compileActions.ts

@@ -32,7 +32,7 @@ interface Props {
 }
 
 interface CompileActions {
-  action: AsyncThunk<CompileResponseBody, CompileRequestBody, {}>;
+  action: AsyncThunk<CompileResponseBody, CompileRequestBody, object>;
   performCompile: () => ThunkAction;
 }
 

ui/frontend/editor/AceEditorCore.tsx

@@ -64,7 +64,7 @@ const buildCrateAutocompleter = (autocompleteOnUse: boolean, crates: Crate[]): A
   },
 });
 
-function useRafDebouncedFunction<A extends any[]>(fn: (...args: A) => void, onCall?: (...args: A) => void) {
+function useRafDebouncedFunction<A extends unknown[]>(fn: (...args: A) => void, onCall?: (...args: A) => void) {
   const timeout = useRef<number>();
 
   return useCallback((...args: A): void => {
@@ -82,9 +82,9 @@ function useRafDebouncedFunction<A extends any[]>(fn: (...args: A) => void, onCa
 interface AceEditorProps {
   autocompleteOnUse: boolean;
   code: string;
-  execute: () => any;
+  execute: () => void;
   keybinding: string;
-  onEditCode: (_: string) => any;
+  onEditCode: (_: string) => void;
   position: Position;
   selection: Selection;
   theme: string;

ui/frontend/eslint.config.mjs

@@ -0,0 +1,62 @@
+// @ts-check
+import { fixupPluginRules } from '@eslint/compat';
+import eslint from '@eslint/js';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  tseslint.configs.recommended,
+  reactPlugin.configs.flat.recommended,
+
+  {
+    plugins: {
+      'react-hooks': fixupPluginRules(reactHooksPlugin),
+    },
+
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+
+    rules: {
+      'no-restricted-syntax': [
+        'error',
+        {
+          message: 'Use `useAppDispatch` instead',
+          selector: 'CallExpression[callee.name="useDispatch"]',
+        },
+        {
+          message: 'Use `useAppSelector` instead',
+          selector: 'CallExpression[callee.name="useSelector"]',
+        },
+      ],
+
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'all',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+      '@typescript-eslint/no-use-before-define': [
+        'error',
+        {
+          functions: false,
+          variables: false,
+        },
+      ],
+
+      'react/jsx-boolean-value': ['error', 'never'],
+
+      ...reactHooksPlugin.configs.recommended.rules,
+    },
+  },
+);

ui/frontend/highlighting.ts

@@ -47,7 +47,7 @@ export function configureRustErrors({
     'rust-errors-help': {
       pattern: /help:.*\n/,
       inside: {
-        'feature-gate': /add `#\!\[feature\(.+?\)\]`/,
+        'feature-gate': /add `#!\[feature\(.+?\)\]`/,
       },
     },
     'backtrace': {
@@ -60,7 +60,7 @@ export function configureRustErrors({
   };
 
   Prism.languages.rust_mir = {
-    'mir-source': /src\/[A-Za-z0-9_.\-]+\.rs:\d+:\d+: \d+:\d+/,
+    'mir-source': /src\/[A-Za-z0-9_.-]+\.rs:\d+:\d+: \d+:\d+/,
   }
 
   Prism.hooks.add('wrap', env => {

ui/frontend/local_storage.spec.ts

@@ -1,7 +1,9 @@
 import { deserialize } from './local_storage';
 
+type ToJson = Parameters<typeof JSON.stringify>[0];
+
 describe('restoring saved state', () => {
-  const easyDeserialize = (state: any) => {
+  const easyDeserialize = (state: string | ToJson) => {
     if (typeof state === 'string' || state === undefined) {
       return deserialize(state);
     } else {

ui/frontend/local_storage.ts

@@ -32,7 +32,7 @@ interface V2Configuration {
     processAssembly: ProcessAssembly;
   };
   code: string;
-  notifications: any;
+  notifications: object;
 }
 
 interface V1Configuration {
@@ -48,7 +48,7 @@ interface V1Configuration {
     processAssembly: ProcessAssembly;
   };
   code: string;
-  notifications: any;
+  notifications: object;
 }
 
 type CurrentConfiguration = V2Configuration;