Partially adhere to stricter TypeScript rules

ui/frontend/.eslintrc.js

@@ -22,6 +22,9 @@ module.exports = {
     'no-trailing-spaces': 'error',
     'quotes': ['error', 'single'],
 
+    '@typescript-eslint/ban-ts-comment': ['error', {
+      'ts-ignore': 'allow-with-description',
+    }],
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/indent': ['error', 2],
     '@typescript-eslint/no-explicit-any': 'off',

ui/frontend/AdvancedOptionsMenu.tsx

@@ -8,7 +8,7 @@ import { State } from './reducers';
 import * as selectors from './selectors';
 import { Backtrace, Edition } from './types';
 
-const AdvancedOptionsMenu: React.SFC = () => {
+const AdvancedOptionsMenu: React.FC = () => {
   const isEditionDefault = useSelector(selectors.isEditionDefault);
   const edition = useSelector((state: State) => state.configuration.edition);
   const isBacktraceSet = useSelector(selectors.getBacktraceSet);

ui/frontend/BuildMenu.tsx

@@ -27,7 +27,7 @@ const useDispatchAndClose = (action: () => actions.ThunkAction, close: () => voi
   );
 }
 
-const BuildMenu: React.SFC<BuildMenuProps> = props => {
+const BuildMenu: React.FC<BuildMenuProps> = props => {
   const isHirAvailable = useSelector(selectors.isHirAvailable);
   const isWasmAvailable = useSelector(selectors.isWasmAvailable);
 
@@ -75,14 +75,14 @@ const BuildMenu: React.SFC<BuildMenuProps> = props => {
   );
 };
 
-const HirAside: React.SFC = () => (
+const HirAside: React.FC = () => (
   <MenuAside>
     Note: HIR currently requires using the Nightly channel, selecting this
     option will switch to Nightly.
   </MenuAside>
 );
 
-const WasmAside: React.SFC = () => (
+const WasmAside: React.FC = () => (
   <MenuAside>
     Note: WASM currently requires using the Nightly channel, selecting this
     option will switch to Nightly.

ui/frontend/ButtonMenuItem.tsx

@@ -10,7 +10,7 @@ interface ButtonMenuItemProps extends Button {
   name: string;
 }
 
-const ButtonMenuItem: React.SFC<ButtonMenuItemProps> = ({ name, children, ...props }) => (
+const ButtonMenuItem: React.FC<ButtonMenuItemProps> = ({ name, children, ...props }) => (
   <MenuItem>
     <button className={styles.container} {...props}>
       <div className={styles.name} data-test-id="button-menu-item__name">{name}</div>

ui/frontend/ChannelMenu.tsx

@@ -15,7 +15,7 @@ interface ChannelMenuProps {
   close: () => void;
 }
 
-const ChannelMenu: React.SFC<ChannelMenuProps> = props => {
+const ChannelMenu: React.FC<ChannelMenuProps> = props => {
   const channel = useSelector((state: State) => state.configuration.channel);
   const stableVersion = useSelector(selectors.stableVersionText);
   const betaVersion = useSelector(selectors.betaVersionText);
@@ -63,7 +63,7 @@ const ChannelMenu: React.SFC<ChannelMenuProps> = props => {
   );
 };
 
-const Desc: React.SFC<{}> = ({ children }) => (
+const Desc: React.FC<{}> = ({ children }) => (
   <p className={styles.description}>{children}</p>
 );
 

ui/frontend/ConfigElement.tsx

@@ -14,7 +14,7 @@ interface EitherProps extends ConfigElementProps {
   onChange: (_: string) => any;
 }
 
-export const Either: React.SFC<EitherProps> =
+export const Either: React.FC<EitherProps> =
   ({ id, a, b, aLabel = a, bLabel = b, value, onChange, ...rest }) => (
     <ConfigElement {...rest}>
       <div className={styles.toggle}>
@@ -41,7 +41,7 @@ interface SelectProps extends ConfigElementProps {
   onChange: (_: string) => any;
 }
 
-export const Select: React.SFC<SelectProps> = ({ value, onChange, children, ...rest }) => (
+export const Select: React.FC<SelectProps> = ({ value, onChange, children, ...rest }) => (
   <ConfigElement {...rest}>
     <select className={styles.select} value={value} onChange={e => onChange(e.target.value)}>
       {children}
@@ -55,7 +55,7 @@ interface ConfigElementProps {
   aside?: JSX.Element,
 }
 
-const ConfigElement: React.SFC<ConfigElementProps> = ({ name, isNotDefault, aside, children }) => (
+const ConfigElement: React.FC<ConfigElementProps> = ({ name, isNotDefault, aside, children }) => (
   <MenuItem>
     <div className={styles.container}>
       <span className={isNotDefault ? styles.notDefault : styles.name}>{name}</span>

ui/frontend/ConfigMenu.tsx

@@ -25,7 +25,7 @@ const MONACO_THEMES = [
   'vs', 'vs-dark', 'vscode-dark-plus',
 ];
 
-const ConfigMenu: React.SFC<ConfigMenuProps> = () => {
+const ConfigMenu: React.FC<ConfigMenuProps> = () => {
   const keybinding = useSelector((state: State) => state.configuration.ace.keybinding);
   const aceTheme = useSelector((state: State) => state.configuration.ace.theme);
   const monacoTheme = useSelector((state: State) => state.configuration.monaco.theme);

ui/frontend/Header.tsx

@@ -18,7 +18,7 @@ import { useAppDispatch } from './configureStore';
 
 import styles from './Header.module.css';
 
-const Header: React.SFC = () => (
+const Header: React.FC = () => (
   <div data-test-id="header" className={styles.container}>
     <HeaderSet id="build">
       <SegmentedButtonSet>
@@ -60,11 +60,11 @@ interface HeaderSetProps {
   id: string;
 }
 
-const HeaderSet: React.SFC<HeaderSetProps> = ({ id, children }) => (
+const HeaderSet: React.FC<HeaderSetProps> = ({ id, children }) => (
   <div className={id == 'channel-mode' ? styles.setChannelMode : styles.set}>{children}</div>
 );
 
-const ExecuteButton: React.SFC = () => {
+const ExecuteButton: React.FC = () => {
   const executionLabel = useSelector(selectors.getExecutionLabel);
 
   const dispatch = useAppDispatch();
@@ -79,7 +79,7 @@ const ExecuteButton: React.SFC = () => {
   );
 };
 
-const BuildMenuButton: React.SFC = () => {
+const BuildMenuButton: React.FC = () => {
   const Button = React.forwardRef<HTMLButtonElement, { toggle: () => void }>(({ toggle }, ref) => (
     <SegmentedButton title="Select what to build" ref={ref} onClick={toggle}>
       <HeaderButton icon={<MoreOptionsIcon />} />
@@ -90,7 +90,7 @@ const BuildMenuButton: React.SFC = () => {
   return <PopButton Button={Button} Menu={BuildMenu} />;
 };
 
-const ModeMenuButton: React.SFC = () => {
+const ModeMenuButton: React.FC = () => {
   const label = useSelector(selectors.getModeLabel);
 
   const Button = React.forwardRef<HTMLButtonElement, { toggle: () => void }>(({ toggle }, ref) => (
@@ -103,7 +103,7 @@ const ModeMenuButton: React.SFC = () => {
   return <PopButton Button={Button} Menu={ModeMenu} />;
 };
 
-const ChannelMenuButton: React.SFC = () => {
+const ChannelMenuButton: React.FC = () => {
   const label = useSelector(selectors.getChannelLabel);
 
   const Button = React.forwardRef<HTMLButtonElement, { toggle: () => void }>(({ toggle }, ref) => (
@@ -116,7 +116,7 @@ const ChannelMenuButton: React.SFC = () => {
   return <PopButton Button={Button} Menu={ChannelMenu} />;
 }
 
-const AdvancedOptionsMenuButton: React.SFC = () => {
+const AdvancedOptionsMenuButton: React.FC = () => {
   const advancedOptionsSet = useSelector(selectors.getAdvancedOptionsSet);
 
   const Button = React.forwardRef<HTMLButtonElement, { toggle: () => void }>(({ toggle }, ref) => (
@@ -129,7 +129,7 @@ const AdvancedOptionsMenuButton: React.SFC = () => {
   return <PopButton Button={Button} Menu={AdvancedOptionsMenu} />;
 }
 
-const ShareButton: React.SFC = () => {
+const ShareButton: React.FC = () => {
   const dispatch = useAppDispatch();
   const gistSave = useCallback(() => dispatch(actions.performGistSave()), [dispatch]);
 
@@ -141,7 +141,7 @@ const ShareButton: React.SFC = () => {
 };
 
 
-const ToolsMenuButton: React.SFC = () => {
+const ToolsMenuButton: React.FC = () => {
   const Button = React.forwardRef<HTMLButtonElement, { toggle: () => void }>(({ toggle }, ref) => (
     <SegmentedButton title="Run extra tools on the source code" ref={ref} onClick={toggle}>
       <HeaderButton isExpandable>Tools</HeaderButton>
@@ -152,7 +152,7 @@ const ToolsMenuButton: React.SFC = () => {
   return <PopButton Button={Button} Menu={ToolsMenu} />;
 };
 
-const ConfigMenuButton: React.SFC = () => {
+const ConfigMenuButton: React.FC = () => {
   const Button = React.forwardRef<HTMLButtonElement, { toggle: () => void }>(({ toggle }, ref) => (
     <SegmentedButton title="Show the configuration options" ref={ref} onClick={toggle}>
       <HeaderButton icon={<ConfigIcon />} isExpandable>Config</HeaderButton>
@@ -163,7 +163,7 @@ const ConfigMenuButton: React.SFC = () => {
   return <PopButton Button={Button} Menu={ConfigMenu} />;
 };
 
-const HelpButton: React.SFC = () => (
+const HelpButton: React.FC = () => (
   <SegmentedLink title="View help" action={actions.navigateToHelp}>
     <HeaderButton icon={<HelpIcon />} />
   </SegmentedLink>

ui/frontend/HeaderButton.tsx

@@ -11,7 +11,7 @@ interface HeaderButtonProps {
   isExpandable?: boolean;
 }
 
-const HeaderButton: React.SFC<HeaderButtonProps> = ({ bold, icon, rightIcon, isExpandable, children }) => {
+const HeaderButton: React.FC<HeaderButtonProps> = ({ bold, icon, rightIcon, isExpandable, children }) => {
   const c = [styles.container];
 
   if (bold) { c.push(styles.bold); }

ui/frontend/Help.tsx

@@ -75,13 +75,13 @@ fn main() {
     println!("{}", a_loop());
 }`;
 
-const Help: React.SFC = () => {
+const Help: React.FC = () => {
   return (
     <section className={styles.container}>
       <h1>The Rust Playground</h1>
       <Link action={actions.navigateToIndex}>Return to the playground</Link>
 
-      <LinkableSection id="about" header="About" level={H2}>
+      <LinkableSection id="about" header="About" level="h2">
         <p>
           The playground is an <a href={REPO_URL}>open source project</a>.
           If you have any suggestions for features, issues with the
@@ -107,8 +107,8 @@ const Help: React.SFC = () => {
         </p>
       </LinkableSection>
 
-      <LinkableSection id="features" header="Features" level={H2}>
-        <LinkableSection id="features-crates" header="Crates" level={H3}>
+      <LinkableSection id="features" header="Features" level="h2">
+        <LinkableSection id="features-crates" header="Crates" level="h3">
           <p>
             The playground provides the top 100 most downloaded crates
           from <a href={CRATES_IO_URL}>crates.io</a>, the crates from
@@ -126,7 +126,7 @@ const Help: React.SFC = () => {
           </p>
         </LinkableSection>
 
-        <LinkableSection id="features-formatting" header="Formatting code" level={H3}>
+        <LinkableSection id="features-formatting" header="Formatting code" level="h3">
           <p>
             <a href={RUSTFMT_URL}>rustfmt</a> is a tool for formatting Rust code
           according to the Rust style guidelines. Click on the <strong>Format</strong>
@@ -137,7 +137,7 @@ const Help: React.SFC = () => {
           <Example code={RUSTFMT_EXAMPLE} />
         </LinkableSection>
 
-        <LinkableSection id="features-linting" header="Linting code" level={H3}>
+        <LinkableSection id="features-linting" header="Linting code" level="h3">
           <p>
             <a href={CLIPPY_URL}>Clippy</a> is a collection of lints to catch common
           mistakes and improve your Rust code. Click on the <strong>Clippy</strong>
@@ -149,7 +149,7 @@ const Help: React.SFC = () => {
           <Example code={CLIPPY_EXAMPLE} />
         </LinkableSection>
 
-        <LinkableSection id="features-miri" header="Checking code for undefined behavior" level={H3}>
+        <LinkableSection id="features-miri" header="Checking code for undefined behavior" level="h3">
           <p>
             <a href={MIRI_URL}>Miri</a> is an interpreter for Rust’s mid-level intermediate
             representation (MIR) and can be used to detect certain kinds of undefined behavior
@@ -160,7 +160,7 @@ const Help: React.SFC = () => {
           <Example code={MIRI_EXAMPLE} />
         </LinkableSection>
 
-        <LinkableSection id="features-sharing" header="Sharing code" level={H3}>
+        <LinkableSection id="features-sharing" header="Sharing code" level="h3">
           <p>
             Once you have some code worth saving or sharing, click on the
             {' '}
@@ -171,7 +171,7 @@ const Help: React.SFC = () => {
           </p>
         </LinkableSection>
 
-        <LinkableSection id="features-linking" header="Linking to the playground with initial code" level={H3}>
+        <LinkableSection id="features-linking" header="Linking to the playground with initial code" level="h3">
           <p>
             If you have a web page with Rust code that you’d like to
             show in action, you can link to the playground with the
@@ -183,7 +183,7 @@ const Help: React.SFC = () => {
           <pre className={styles.code}><code>{LINK_EXAMPLE}</code></pre>
         </LinkableSection>
 
-        <LinkableSection id="features-tests" header="Executing tests" level={H3}>
+        <LinkableSection id="features-tests" header="Executing tests" level="h3">
           <p>
             If your code contains the <Code>#[test]</Code> attribute and does not
           contain a <Code>main</Code> method, <Code>cargo test</Code> will be
@@ -193,7 +193,7 @@ const Help: React.SFC = () => {
           <Example code={TEST_EXAMPLE} />
         </LinkableSection>
 
-        <LinkableSection id="features-library" header="Compiling as a library" level={H3}>
+        <LinkableSection id="features-library" header="Compiling as a library" level="h3">
           <p>
             If your code contains the <Code>#![crate_type=&quot;lib&quot;]</Code> attribute,
             {' '}
@@ -204,7 +204,7 @@ const Help: React.SFC = () => {
           <Example code={LIBRARY_EXAMPLE} />
         </LinkableSection>
 
-        <LinkableSection id="features-output-formats" header="Output formats" level={H3}>
+        <LinkableSection id="features-output-formats" header="Output formats" level="h3">
           <p>
             Instead of executing the code, you can also see intermediate
             output of the compiler as x86_64 assembly, LLVM IR, Rust MIR, or
@@ -217,7 +217,7 @@ const Help: React.SFC = () => {
           <Example code={OUTPUT_EXAMPLE} />
         </LinkableSection>
 
-        <LinkableSection id="features-modes" header="Compilation modes" level={H3}>
+        <LinkableSection id="features-modes" header="Compilation modes" level="h3">
           <p>
             Rust has two primary compilation modes: <strong>Debug</strong> and
             {' '}
@@ -232,7 +232,7 @@ const Help: React.SFC = () => {
           </p>
         </LinkableSection>
 
-        <LinkableSection id="features-channels" header="Rust channels" level={H3}>
+        <LinkableSection id="features-channels" header="Rust channels" level="h3">
           <p>
             Rust releases new <strong>stable</strong> versions every 6
           weeks. Between these stable releases, <strong>beta</strong> versions of the
@@ -247,7 +247,7 @@ const Help: React.SFC = () => {
           </p>
         </LinkableSection>
 
-        <LinkableSection id="features-customization" header="Customization" level={H3}>
+        <LinkableSection id="features-customization" header="Customization" level="h3">
           <p>
             The <a href={ACE_URL}>Ajax.org Cloud9 Editor (Ace)</a> is used to
             provide a better interface for editing code. Ace comes with
@@ -265,7 +265,7 @@ const Help: React.SFC = () => {
           </p>
         </LinkableSection>
 
-        <LinkableSection id="features-persistence" header="Persistence" level={H3}>
+        <LinkableSection id="features-persistence" header="Persistence" level="h3">
           <p>
             The most recently entered code will be automatically saved in your browser’s
             {' '}
@@ -280,7 +280,7 @@ const Help: React.SFC = () => {
         </LinkableSection>
       </LinkableSection>
 
-      <LinkableSection id="limitations" header="Limitations" level={H2}>
+      <LinkableSection id="limitations" header="Limitations" level="h2">
         <p>
           To prevent the playground from being used to attack other computers and
           to ensure it is available for everyone to use, some limitations
@@ -316,10 +316,7 @@ const Help: React.SFC = () => {
   );
 };
 
-const H2: React.SFC = ({ children }) => <h2>{children}</h2>;
-const H3: React.SFC = ({ children }) => <h3>{children}</h3>;
-
-const LinkableSection: React.SFC<LinkableSectionProps> = ({
+const LinkableSection: React.FC<LinkableSectionProps> = ({
   id, header, level: Level, children,
 }) => (
   <div id={id}>
@@ -335,10 +332,10 @@ const LinkableSection: React.SFC<LinkableSectionProps> = ({
 interface LinkableSectionProps {
   id: string;
   header: string;
-  level: (ChildrenProps) => JSX.Element;
+  level: React.ElementType;
 }
 
-const Code: React.SFC = ({ children }) => (
+const Code: React.FC = ({ children }) => (
   <code className={styles.code}>{children}</code>
 );
 

ui/frontend/HelpExample.tsx

@@ -14,7 +14,7 @@ export interface HelpExampleProps {
   code: string;
 }
 
-const HelpExample: React.SFC<HelpExampleProps> = ({ code }) => {
+const HelpExample: React.FC<HelpExampleProps> = ({ code }) => {
   const dispatch = useAppDispatch();
   const showExample = useCallback(
     () => dispatch(actions.showExample(code)),

ui/frontend/Loader.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import styles from './Loader.module.css';
 
-const Loader: React.SFC = () => (
+const Loader: React.FC = () => (
   <div>
     <span className={styles.dot}>⬤</span>
     <span className={styles.dot}>⬤</span>