Code updates

packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/SubTabs.tsx

@@ -13,7 +13,7 @@ import RawTab from './RawTab';
 import ChartTab from './ChartTab';
 import VisualDiffTab from './VisualDiffTab';
 import { StoreState } from '../../../reducers';
-import { Delta } from 'jsondiffpatch';
+import type { Delta } from 'jsondiffpatch';
 
 type StateProps = ReturnType<typeof mapStateToProps>;
 type DispatchProps = ResolveThunks<typeof actionCreators>;

packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/VisualDiffTab.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Delta, formatters } from 'jsondiffpatch';
+import type { Delta } from 'jsondiffpatch';
+import * as htmlFormatter from 'jsondiffpatch/formatters/html';
 import styled, { ThemedStyledProps } from 'styled-components';
 import { effects, Theme } from '@redux-devtools/ui';
 
@@ -240,7 +241,7 @@ export default class VisualDiffTab extends Component<Props> {
     let __html: string | undefined;
     const data = this.props.data;
     if (data) {
-      __html = formatters.html.format(data, undefined);
+      __html = htmlFormatter.format(data, undefined);
     }
 
     return <StyledContainer dangerouslySetInnerHTML={{ __html: __html! }} />;

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

@@ -3,7 +3,7 @@ import { Base16Theme } from 'redux-devtools-themes';
 import { Action } from 'redux';
 import type { LabelRenderer } from 'react-json-tree';
 import { PerformAction } from '@redux-devtools/core';
-import { Delta } from 'jsondiffpatch';
+import type { Delta } from 'jsondiffpatch';
 import { DEFAULT_STATE, DevtoolsInspectorState } from './redux';
 import ActionPreviewHeader from './ActionPreviewHeader';
 import DiffTab from './tabs/DiffTab';

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

@@ -6,7 +6,7 @@ import {
   LiftedState,
 } from '@redux-devtools/core';
 import { Action, Dispatch } from 'redux';
-import { Delta, DiffContext } from 'jsondiffpatch';
+import type { Delta, DiffContext } from 'jsondiffpatch';
 import {
   createInspectorMonitorThemeFromBase16Theme,
   resolveBase16Theme,
@@ -160,7 +160,7 @@ export interface DevtoolsInspectorProps<S, A extends Action<string>>
   select: (state: S) => unknown;
   theme: Base16ThemeName | Base16Theme;
   supportImmutable: boolean;
-  diffObjectHash?: (item: unknown, index: number) => string;
+  diffObjectHash?: (item: unknown, index: number | undefined) => string;
   diffPropertyFilter?: (name: string, context: DiffContext) => boolean;
   hideMainButtons?: boolean;
   hideActionButtons?: boolean;

packages/redux-devtools-inspector-monitor/src/createDiffPatcher.ts

@@ -1,14 +1,19 @@
-import { DiffContext, DiffPatcher } from 'jsondiffpatch';
+import { DiffPatcher } from 'jsondiffpatch';
+import type { DiffContext } from 'jsondiffpatch';
 
-const defaultObjectHash = (o: any, idx: number) =>
+const defaultObjectHash = (obj: object, idx: number | undefined) => {
+  const o = obj as Record<string, unknown>;
+  return (
     (o === null && '$$null') ||
     (o && (o.id || o.id === 0) && `$$id:${JSON.stringify(o.id)}`) ||
     (o && (o._id || o._id === 0) && `$$_id:${JSON.stringify(o._id)}`) ||
-  `$$index:${idx}`;
+    `$$index:${idx}`
+  );
+};
 
 const defaultPropertyFilter = (name: string, context: DiffContext) =>
-  typeof context.left[name] !== 'function' &&
+  typeof (context.left as Record<string, unknown>)[name] !== 'function' &&
-  typeof context.right[name] !== 'function';
+  typeof (context.right as Record<string, unknown>)[name] !== 'function';
 
 const defaultDiffPatcher = new DiffPatcher({
   arrays: { detectMove: false } as {
@@ -20,7 +25,9 @@ const defaultDiffPatcher = new DiffPatcher({
 });
 
 export default function createDiffPatcher(
-  objectHash: ((item: unknown, index: number) => string) | undefined,
+  objectHash:
+    | ((item: unknown, index: number | undefined) => string)
+    | undefined,
   propertyFilter: ((name: string, context: DiffContext) => boolean) | undefined,
 ) {
   if (!objectHash && !propertyFilter) {

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

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { JSONTree } from 'react-json-tree';
 import type { LabelRenderer, ShouldExpandNodeInitially } from 'react-json-tree';
 import { stringify } from 'javascript-stringify';
-import { Delta } from 'jsondiffpatch';
+import type { Delta } from 'jsondiffpatch';
 import { Base16Theme } from 'redux-devtools-themes';
 import { css } from '@emotion/react';
 import type { Interpolation, Theme } from '@emotion/react';

tsconfig.base.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "es2020",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "declaration": true,
     "strict": true,
     "allowSyntheticDefaultImports": true,