Maintenance

tests/.gitignore

@@ -1 +1,2 @@
 screenshots/
+test-failures/

ui/frontend/ButtonMenuItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import MenuItem from './MenuItem';
 

ui/frontend/ButtonSet.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import Link, { LinkProps } from './uss-router/Link';
 

ui/frontend/ConfigElement.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import MenuItem from './MenuItem';
 

ui/frontend/Header.tsx

@@ -70,7 +70,7 @@ const Header: React.FC = () => {
 };
 
 interface PortalProps {
-  menuContainer: RefObject<HTMLDivElement>;
+  menuContainer: RefObject<HTMLDivElement | null>;
 }
 
 const ExecuteButton: React.FC = () => {

ui/frontend/Output/Gist.module.css

@@ -1,12 +1,12 @@
-$copied-duration: 1s ease-in-out;
-
 .container {
   display: flex;
+
+  --copied-duration: 1s ease-in-out;
 }
 
 .button {
   composes: -buttonReset from '../shared.module.css';
-  transition: color $copied-duration;
+  transition: color var(--copied-duration);
   cursor: pointer;
   margin: 0 0.25em 0 0.5em;
 }
@@ -15,9 +15,9 @@ $copied-duration: 1s ease-in-out;
   visibility: hidden;
   opacity: 0;
   transition:
-    visibility $copied-duration,
-    opacity $copied-duration,
-    color $copied-duration;
+    visibility var(--copied-duration),
+    opacity var(--copied-duration),
+    color var(--copied-duration);
 }
 
 .active {

ui/frontend/Output/Gist.tsx

@@ -1,5 +1,4 @@
-import React, { Fragment } from 'react';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
+import React, { Fragment, useCallback, useState } from 'react';
 
 import { ClipboardIcon } from '../Icon';
 import * as selectors from '../selectors';
@@ -34,33 +33,27 @@ interface CopiedProps {
   href: string;
 }
 
-interface CopiedState {
-  copied: boolean;
-}
+const Copied: React.FC<CopiedProps> = ({ children, href }) => {
+  const [copied, setCopied] = useState(false);
 
-class Copied extends React.PureComponent<CopiedProps, CopiedState> {
-  public constructor(props: CopiedProps) {
-    super(props);
-    this.state = { copied: false };
-  }
+  const startCopy = useCallback(() => {
+    setCopied(true);
 
-  public render() {
-    return (
-      <p className={this.state.copied ? styles.active : styles.container}>
-        <a href={this.props.href}>{this.props.children}</a>
-        <CopyToClipboard text={this.props.href} onCopy={this.copied}>
-          <button className={styles.button}><ClipboardIcon /></button>
-        </CopyToClipboard>
-        <span className={styles.text}>Copied!</span>
-      </p>
-    );
-  }
+    setTimeout(() => {
+      setCopied(false);
+    }, 1000);
+  }, []);
 
-  private copied = () => {
-    this.setState({ copied: true });
-    setTimeout(() => { this.setState({ copied: false }); }, 1000);
-  }
-}
+  return (
+    <p className={copied ? styles.active : styles.container}>
+      <a href={href}>{children}</a>
+      <button className={styles.button} onClick={startCopy}>
+        <ClipboardIcon />
+      </button>
+      <span className={styles.text}>Copied!</span>
+    </p>
+  );
+};
 
 const Links: React.FC = () => {
   const codeUrl = useAppSelector(selectors.codeUrlSelector);

ui/frontend/PopButton.tsx

@@ -29,7 +29,7 @@ export interface MenuProps {
 interface NewPopProps {
   Button: React.ComponentType<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
   Menu: React.ComponentType<MenuProps>;
-  menuContainer?: React.RefObject<HTMLDivElement>;
+  menuContainer?: React.RefObject<HTMLDivElement | null>;
 }
 
 const CONTAINER_STYLE: { [key in Placement]?: string } = {

ui/frontend/SelectableMenuItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { CheckmarkIcon } from './Icon';
 import MenuItem from './MenuItem';

ui/frontend/editor/AceEditorCore.tsx

@@ -65,7 +65,7 @@ const buildCrateAutocompleter = (autocompleteOnUse: boolean, crates: Crate[]): A
 });
 
 function useRafDebouncedFunction<A extends unknown[]>(fn: (...args: A) => void, onCall?: (...args: A) => void) {
-  const timeout = useRef<number>();
+  const timeout = useRef<number>(undefined);
 
   return useCallback((...args: A): void => {
     if (timeout.current) {
@@ -159,6 +159,7 @@ const AceEditor: React.FC<AceEditorProps> = props => {
   // open the autocomplete. This should help people understand that
   // there are crates available.
   useEditorProp(editor, autocompleteProps, useCallback((editor, { autocompleteOnUse, crates }) => {
+    // @ts-expect-error https://github.com/ajaxorg/ace/issues/5742
     editor.commands.on('afterExec', ({ editor, command }) => {
       if (!(command.name === 'backspace' || command.name === 'insertstring')) {
         return;
@@ -257,6 +258,7 @@ const AceEditor: React.FC<AceEditorProps> = props => {
     editor.setOption('keyboardHandler', handler);
 
     if (keybinding === 'vim') {
+      // @ts-expect-error https://github.com/ajaxorg/ace/issues/5743
       const { CodeMirror: { Vim } }: VimKeybindings = ace.require('ace/keyboard/vim');
       Vim.defineEx('write', 'w', (cm) => {
         cm.ace.execCommand('executeCode');

ui/frontend/editor/SimpleEditor.tsx

@@ -50,8 +50,9 @@ class SimpleEditor extends React.PureComponent<CommonEditorProps> {
 
   private onChange: React.ChangeEventHandler<HTMLTextAreaElement> = (e) =>
     this.props.onEditCode(e.target.value);
-  private trackEditor: React.RefCallback<HTMLTextAreaElement> = (component) =>
-    (this._editor = component);
+  private trackEditor: React.RefCallback<HTMLTextAreaElement> = (component) => {
+    this._editor = component;
+  };
   private onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
     if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
       this.props.execute();

ui/frontend/package.json

@@ -4,7 +4,7 @@
   "description": "UI for the Rust playground",
   "main": "index.js",
   "dependencies": {
-    "@floating-ui/react": "^0.26.2",
+    "@floating-ui/react": "^0.27.4",
     "@reduxjs/toolkit": "^2.0.1",
     "ace-builds": "^1.23.0",
     "common-tags": "^1.8.0",
@@ -15,9 +15,8 @@
     "monaco-editor": "^0.52.0",
     "prismjs": "^1.6.0",
     "qs": "^6.4.0",
-    "react": "^18.2.0",
-    "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-portal": "^4.1.4",
     "react-redux": "^9.0.2",
     "react-shadow": "^20.0.0",
@@ -33,15 +32,16 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@eslint/compat": "^1.2.3",
-    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "@eslint/js": "^9.15.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/common-tags": "^1.8.1",
     "@types/jest": "^29.2.5",
     "@types/lodash-es": "^4.17.6",
     "@types/prismjs": "^1.26.0",
     "@types/qs": "^6.9.7",
-    "@types/react": "^18.0.26",
+    "@types/react": "^19.0.8",
     "@types/react-copy-to-clipboard": "^5.0.4",
-    "@types/react-dom": "^18.0.10",
+    "@types/react-dom": "^19.0.3",
     "@types/react-portal": "^4.0.4",
     "@types/route-parser": "^0.1.4",
     "autoprefixer": "^10.2.4",
@@ -69,19 +69,19 @@
     "prettier-plugin-css-order": "^2.0.0",
     "stylelint": "^16.2.1",
     "stylelint-config-css-modules": "^4.0.0",
-    "stylelint-config-standard": "^36.0.0",
+    "stylelint-config-standard": "^37.0.0",
     "ts-essentials": "^10.0.0",
     "ts-jest": "^29.0.4",
     "ts-loader": "^9.2.3",
     "typescript": "^5.0.2",
     "typescript-eslint": "^8.15.0",
     "typescript-plugin-css-modules": "^5.0.0",
     "webpack": "^5.24.3",
-    "webpack-cli": "^5.0.1"
+    "webpack-cli": "^6.0.1"
   },
   "engines": {
     "node": "^22.2",
-    "pnpm": "^9.1"
+    "pnpm": "^10.1"
   },
   "scripts": {
     "test": "jest",