diff --git a/.prettierrc.yaml b/.prettierrc.yaml
index e57cc20758..5cd0937d6b 100644
--- a/.prettierrc.yaml
+++ b/.prettierrc.yaml
@@ -3,3 +3,9 @@ printWidth: 100
trailingComma: "all"
tabWidth: 2
semi: true
+
+# For TS 4.3: https://github.com/prettier/prettier/issues/10642#issuecomment-849879761
+overrides:
+ - files: ["*.ts", "*.tsx"]
+ options:
+ parser: babel-ts
diff --git a/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs b/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
index 416bfcfd07..9eaae2e3b0 100644
--- a/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+++ b/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:9dd75dfd102aafbc0e58aa57ef07c3c2e3b26ebed2ba27fc656ef605ae351947
-size 866637
+oid sha256:dd075b46a985304bb87fe7cd364b2696459f183399020de95a23ec909d6a5df1
+size 861605
diff --git a/.yarn/plugins/@yarnpkg/plugin-typescript.cjs b/.yarn/plugins/@yarnpkg/plugin-typescript.cjs
index 8811abba45..1afc0ce5d3 100644
--- a/.yarn/plugins/@yarnpkg/plugin-typescript.cjs
+++ b/.yarn/plugins/@yarnpkg/plugin-typescript.cjs
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:0779a5d254f388f8d86f7f38262e4fb2292979bdc5a0bb34517141ac868476e1
-size 32718
+oid sha256:d6c3c6912c3b7f46b013ed5580bf3c8b8299997a6110dc9b6e58fed2d13ff44a
+size 32714
diff --git a/.yarn/plugins/@yarnpkg/plugin-version.cjs b/.yarn/plugins/@yarnpkg/plugin-version.cjs
index cc952820a3..3c8df0f140 100644
--- a/.yarn/plugins/@yarnpkg/plugin-version.cjs
+++ b/.yarn/plugins/@yarnpkg/plugin-version.cjs
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:319f6c5f50390e867cfa4a073e41a7d1773a8db9c5fd770802338264dca1234d
-size 836007
+oid sha256:e6a4b5245a5a61de7f1070939c1b9b24c9448f90fb2bf5e9f7fe40df84657120
+size 837584
diff --git a/.yarn/releases/yarn-2.4.1.cjs b/.yarn/releases/yarn-2.4.1.cjs
deleted file mode 100755
index ff74008448..0000000000
--- a/.yarn/releases/yarn-2.4.1.cjs
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:8feb0398db243b0f9deaece6d71b5d18e0dc8795758d41cbe9d1efc70038865e
-size 1640042
diff --git a/.yarn/releases/yarn-3.0.0-rc.2.cjs b/.yarn/releases/yarn-3.0.0-rc.2.cjs
new file mode 100755
index 0000000000..47d2e30f8f
--- /dev/null
+++ b/.yarn/releases/yarn-3.0.0-rc.2.cjs
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:62f520e8107852668b7e7e254501599395b10ddfcbc8067b216acd59c6c9be40
+size 1716619
diff --git a/.yarn/yarn-wrapper.js b/.yarn/yarn-wrapper.js
index b07b505158..f86de0ee90 100755
--- a/.yarn/yarn-wrapper.js
+++ b/.yarn/yarn-wrapper.js
@@ -4,7 +4,7 @@
const path = require("path");
const fs = require("fs");
-const REAL_YARN = path.join(__dirname, "releases", "yarn-2.4.1.cjs");
+const REAL_YARN = path.join(__dirname, "releases", "yarn-3.0.0-rc.2.cjs");
try {
if (fs.statSync(REAL_YARN).size < 10000) {
diff --git a/app/components/Autocomplete.stories.tsx b/app/components/Autocomplete.stories.tsx
index 678fdf9dac..51f25a671b 100644
--- a/app/components/Autocomplete.stories.tsx
+++ b/app/components/Autocomplete.stories.tsx
@@ -29,7 +29,7 @@ function focusInput(el: any) {
storiesOf("components/Autocomplete", module)
.add("filtering to 'o'", () => {
class Example extends Component {
- render() {
+ override render() {
return (
{
class Example extends Component {
- render() {
+ override render() {
return (
{
class Example extends Component {
- render() {
+ override render() {
return (
extends PureComponent<
// When we lose the scrollbar, we can safely set `showAllItems: false` again, because all items
// will be in view anyway. We cannot set it to false earlier, as `` may have a
// reference to the highlighted element, which can cause an error if we hide it.
- componentDidUpdate(): void {
+ override componentDidUpdate(): void {
if (
(this._autocomplete.current?.refs.menu as Element)?.scrollHeight <=
(this._autocomplete.current?.refs.menu as Element)?.clientHeight &&
@@ -256,7 +256,7 @@ export default class Autocomplete extends PureComponent<
}
};
- render(): JSX.Element {
+ override render(): JSX.Element {
const {
autocompleteKey,
autoSize = false,
diff --git a/app/components/ButtonBase.tsx b/app/components/ButtonBase.tsx
index 11ae13014c..ae44c5442b 100644
--- a/app/components/ButtonBase.tsx
+++ b/app/components/ButtonBase.tsx
@@ -37,7 +37,7 @@ class ButtonBaseImpl extends React.Component {
animationId?: ReturnType;
cancelTimeoutId?: ReturnType;
- componentWillUnmount() {
+ override componentWillUnmount() {
if (this.animationId != undefined) {
cancelAnimationFrame(this.animationId);
}
@@ -75,7 +75,7 @@ class ButtonBaseImpl extends React.Component {
this.setState({ mouseDown: false });
};
- render() {
+ override render() {
const {
children,
id,
diff --git a/app/components/Dropdown/index.tsx b/app/components/Dropdown/index.tsx
index 1f42cd060c..43cd8b989a 100644
--- a/app/components/Dropdown/index.tsx
+++ b/app/components/Dropdown/index.tsx
@@ -45,7 +45,7 @@ type State = {
};
export default class Dropdown extends React.Component, State> {
- state = { isOpen: false };
+ override state = { isOpen: false };
toggle = (): void => {
if (!this.props.disabled) {
this.setState({ isOpen: !this.state.isOpen });
@@ -122,7 +122,7 @@ export default class Dropdown extends React.Component, State> {
return button;
}
- render(): JSX.Element {
+ override render(): JSX.Element {
const { isOpen } = this.state;
const { position, flatEdges, menuStyle } = this.props;
const style = {
diff --git a/app/components/ErrorBoundary.stories.tsx b/app/components/ErrorBoundary.stories.tsx
index f54022775f..69c7e275fa 100644
--- a/app/components/ErrorBoundary.stories.tsx
+++ b/app/components/ErrorBoundary.stories.tsx
@@ -20,7 +20,7 @@ import StoreSetup from "@foxglove/studio-base/stories/StoreSetup";
import ErrorBoundary from "./ErrorBoundary";
class Broken extends React.Component {
- render() {
+ override render() {
throw {
stack: `
an error occurred
diff --git a/app/components/ErrorBoundary.tsx b/app/components/ErrorBoundary.tsx
index 90da3fb7be..7371c2bf6d 100644
--- a/app/components/ErrorBoundary.tsx
+++ b/app/components/ErrorBoundary.tsx
@@ -45,17 +45,17 @@ export default class ErrorBoundary extends React.Component<
{ children: React.ReactNode; hideSourceLocations?: boolean },
State
> {
- state: State = {
+ override state: State = {
error: undefined,
errorInfo: undefined,
};
- componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+ override componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
captureException(new AppError(error, errorInfo));
this.setState({ error, errorInfo });
}
- render(): React.ReactNode {
+ override render(): React.ReactNode {
const { error, errorInfo } = this.state;
if (error) {
let name = "this panel";
diff --git a/app/components/KeyListener.tsx b/app/components/KeyListener.tsx
index bb90fd0b3c..8abfb9cc45 100644
--- a/app/components/KeyListener.tsx
+++ b/app/components/KeyListener.tsx
@@ -29,7 +29,7 @@ export default class KeyListener extends React.Component {
global: false,
};
- componentDidMount(): void {
+ override componentDidMount(): void {
const { global } = this.props;
const target = global ? document : this.el?.parentElement;
if (target) {
@@ -39,7 +39,7 @@ export default class KeyListener extends React.Component {
}
}
- componentWillUnmount(): void {
+ override componentWillUnmount(): void {
const { global } = this.props;
const target = global ? document : this.el?.parentElement;
if (target) {
@@ -85,7 +85,7 @@ export default class KeyListener extends React.Component {
}
};
- render(): JSX.Element {
+ override render(): JSX.Element {
return (this.el = el ?? undefined)} />;
}
}
diff --git a/app/components/Menu/Menu.tsx b/app/components/Menu/Menu.tsx
index b11bce3e2a..abe3880e68 100644
--- a/app/components/Menu/Menu.tsx
+++ b/app/components/Menu/Menu.tsx
@@ -27,7 +27,7 @@ type Props = {
// and provides a helper { Item } component which can be used
// to render typical menu items with text & an icon
export default class Menu extends React.PureComponent
{
- render(): JSX.Element {
+ override render(): JSX.Element {
const { children, className, style } = this.props;
const classes = cx(styles.container, className);
return (
diff --git a/app/components/Menu/SubMenu.tsx b/app/components/Menu/SubMenu.tsx
index ad863ff937..b251941e08 100644
--- a/app/components/Menu/SubMenu.tsx
+++ b/app/components/Menu/SubMenu.tsx
@@ -35,7 +35,7 @@ type Props = {
export default class SubMenu extends React.Component {
_unmounted: boolean = false;
- state = {
+ override state = {
open: false,
};
@@ -51,12 +51,12 @@ export default class SubMenu extends React.Component {
this.setState(({ open }) => ({ open: !open }));
};
- componentWillUnmount(): void {
+ override componentWillUnmount(): void {
// the submenu might unmount on click, so don't update state if its gone
this._unmounted = true;
}
- render(): JSX.Element {
+ override render(): JSX.Element {
const { text, children, checked, direction, icon, dataTest, style } = this.props;
const { open } = this.state;
return (
diff --git a/app/components/MessagePathSyntax/MessagePathInput.tsx b/app/components/MessagePathSyntax/MessagePathInput.tsx
index ddbb569e17..4b07d2491f 100644
--- a/app/components/MessagePathSyntax/MessagePathInput.tsx
+++ b/app/components/MessagePathSyntax/MessagePathInput.tsx
@@ -231,7 +231,7 @@ class MessagePathInputUnconnected extends React.PureComponent<
}
};
- render() {
+ override render() {
const {
path,
topics,
diff --git a/app/components/NotificationDisplay.stories.tsx b/app/components/NotificationDisplay.stories.tsx
index 4bcb1cd23a..8fb2ffa999 100644
--- a/app/components/NotificationDisplay.stories.tsx
+++ b/app/components/NotificationDisplay.stories.tsx
@@ -58,7 +58,7 @@ storiesOf("components/NotificationDisplay", module)
})
.add("With one error", () => {
class Wrapper extends React.Component {
- componentDidMount() {
+ override componentDidMount() {
sendNotification(
"Something bad happened",
"This error is on purpose - it comes from the story",
@@ -67,7 +67,7 @@ storiesOf("components/NotificationDisplay", module)
);
}
- render() {
+ override render() {
return ;
}
}
@@ -75,7 +75,7 @@ storiesOf("components/NotificationDisplay", module)
})
.add("With one warning", () => {
class Wrapper extends React.Component {
- componentDidMount() {
+ override componentDidMount() {
sendNotification(
"This is the final countdown",
"This warning is on purpose - it comes from the story",
@@ -84,7 +84,7 @@ storiesOf("components/NotificationDisplay", module)
);
}
- render() {
+ override render() {
return ;
}
}
@@ -92,7 +92,7 @@ storiesOf("components/NotificationDisplay", module)
})
.add("With one message", () => {
class Wrapper extends React.Component {
- componentDidMount() {
+ override componentDidMount() {
sendNotification(
"Here's a helpful tip",
"These are the details of the message",
@@ -101,7 +101,7 @@ storiesOf("components/NotificationDisplay", module)
);
}
- render() {
+ override render() {
return ;
}
}
diff --git a/app/components/NotificationDisplay.tsx b/app/components/NotificationDisplay.tsx
index 860ce816eb..1090c2a83b 100644
--- a/app/components/NotificationDisplay.tsx
+++ b/app/components/NotificationDisplay.tsx
@@ -157,7 +157,7 @@ type NotificationListProps = {
// exported for storybook
export class NotificationList extends React.PureComponent {
- render(): JSX.Element {
+ override render(): JSX.Element {
const { notifications, onClick } = this.props;
return (