[inspector-monitor] Add explicit return types (#1573)

* Cleanup

* Explicitly define return type

* Create violet-hotels-appear.md

* Strip out module augmentation

* Update violet-hotels-appear.md

.changeset/violet-hotels-appear.md

@@ -0,0 +1,6 @@
+---
+'@redux-devtools/inspector-monitor': patch
+'@redux-devtools/rtk-query-monitor': patch
+---
+
+Add explicit return types

.gitattributes

@@ -1,14 +1 @@
-*.js text eol=lf
+* text=auto eol=lf
-*.jsx text eol=lf
-*.ts text eol=lf
-*.tsx text eol=lf
-*.json text eol=lf
-*.css text eol=lf
-*.html text eol=lf
-*.md text eol=lf
-*.yml text eol=lf
-*.graphql text eol=lf
-.eslintrc text eol=lf
-.prettierrc text eol=lf
-.babelrc text eol=lf
-.stylelintrc text eol=lf

package.json

@@ -4,6 +4,7 @@
     "@babel/core": "^7.23.5",
     "@babel/eslint-parser": "^7.23.3",
     "@changesets/cli": "^2.27.1",
+    "@nrwl/nx-cloud": "^16.5.2",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@typescript-eslint/parser": "^6.13.2",
     "eslint": "^8.55.0",
@@ -12,10 +13,9 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.7.0",
-    "prettier": "3.1.0",
-    "typescript": "~5.3.3",
     "nx": "^16.10.0",
-    "@nrwl/nx-cloud": "^16.5.2"
+    "prettier": "3.1.0",
+    "typescript": "~5.3.3"
   },
   "scripts": {
     "format": "prettier --write .",

packages/redux-devtools-inspector-monitor/src/ActionList.tsx

@@ -18,6 +18,7 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import type { JSX } from '@emotion/react/jsx-runtime';
 import ActionListRow from './ActionListRow';
 import ActionListHeader from './ActionListHeader';
 
@@ -80,7 +81,7 @@ export default function ActionList<A extends Action<string>>({
   onJumpToState,
   lastActionId,
   onReorderAction,
-}: Props<A>) {
+}: Props<A>): JSX.Element {
   const nodeRef = useRef<HTMLDivElement | null>(null);
   const prevLastActionId = useRef<number | undefined>();
 

packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx

@@ -4,6 +4,7 @@ import type { DebouncedFunc } from 'lodash';
 import debounce from 'lodash.debounce';
 import { Action } from 'redux';
 import type { Interpolation, Theme } from '@emotion/react';
+import type { JSX } from '@emotion/react/jsx-runtime';
 import RightSlider from './RightSlider';
 import {
   selectorButtonCss,
@@ -52,7 +53,7 @@ export default class ActionListRow<
 > extends PureComponent<Props<A>, State> {
   state: State = { hover: false };
 
-  render() {
+  render(): JSX.Element {
     const {
       isSelected,
       action,

packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx

@@ -4,6 +4,7 @@ import { Action } from 'redux';
 import type { LabelRenderer } from 'react-json-tree';
 import { PerformAction } from '@redux-devtools/core';
 import { Delta } from 'jsondiffpatch';
+import type { JSX } from '@emotion/react/jsx-runtime';
 import { DEFAULT_STATE, DevtoolsInspectorState } from './redux';
 import ActionPreviewHeader from './ActionPreviewHeader';
 import DiffTab from './tabs/DiffTab';
@@ -80,7 +81,7 @@ class ActionPreview<S, A extends Action<string>> extends Component<
     tabName: DEFAULT_STATE.tabName,
   };
 
-  render() {
+  render(): JSX.Element {
     const {
       delta,
       error,

packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx

@@ -6,6 +6,7 @@ import { Delta } from 'jsondiffpatch';
 import { Base16Theme } from 'redux-devtools-themes';
 import { css } from '@emotion/react';
 import type { Interpolation, Theme } from '@emotion/react';
+import type { JSX } from '@emotion/react/jsx-runtime';
 import getItemString from './getItemString';
 import getJsonTreeTheme from './getJsonTreeTheme';
 
@@ -91,7 +92,7 @@ export default class JSONDiff extends Component<Props, State> {
     this.setState({ data: this.props.delta });
   }
 
-  render() {
+  render(): JSX.Element {
     const { base16Theme, ...props } = this.props;
 
     if (!this.state.data) {

packages/redux-devtools-inspector-monitor/src/tabs/getItemString.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { isCollection, isIndexed, isKeyed } from 'immutable';
+import type { JSX } from '@emotion/react/jsx-runtime';
 import isIterable from '../utils/isIterable';
 
 const IS_IMMUTABLE_KEY = '@@__IS_IMMUTABLE__@@';
@@ -76,7 +77,7 @@ const getItemString = (
   dataTypeKey: string | symbol | undefined,
   isWideLayout: boolean,
   isDiff?: boolean,
-) => (
+): JSX.Element => (
   <span css={(theme) => ({ color: theme.ITEM_HINT_COLOR })}>
     {data[IS_IMMUTABLE_KEY] ? 'Immutable' : ''}
     {dataTypeKey && data[dataTypeKey] ? `${data[dataTypeKey] as string} ` : ''}

packages/redux-devtools-inspector-monitor/src/utils/themes.ts

@@ -11,6 +11,9 @@ export function resolveBase16Theme(theme: Base16ThemeName | Base16Theme) {
   return getBase16Theme(theme, base16Themes);
 }
 
+/**
+ * @internal
+ */
 declare module '@emotion/react' {
   export interface Theme {
     TEXT_COLOR: string;

packages/redux-devtools-inspector-monitor/tsconfig.json

@@ -4,7 +4,8 @@
     "outDir": "lib/types",
     "resolveJsonModule": true,
     "jsx": "react-jsx",
-    "jsxImportSource": "@emotion/react"
+    "jsxImportSource": "@emotion/react",
+    "stripInternal": true
   },
   "include": ["src"]
 }

packages/redux-devtools-rtk-query-monitor/src/styles/themes.ts

@@ -11,6 +11,9 @@ export function resolveBase16Theme(
   return getBase16Theme(theme, reduxThemes) ?? reduxThemes.nicinabox;
 }
 
+/**
+ * @internal
+ */
 declare module '@emotion/react' {
   export interface Theme {
     TEXT_COLOR: string;

packages/redux-devtools-rtk-query-monitor/tsconfig.json

@@ -4,7 +4,8 @@
     "outDir": "lib/types",
     "resolveJsonModule": true,
     "jsx": "react-jsx",
-    "jsxImportSource": "@emotion/react"
+    "jsxImportSource": "@emotion/react",
+    "stripInternal": true
   },
   "include": ["src"]
 }