fix(deps): update dependency jsondiffpatch to ^0.6.0 (#1586)

* fix(deps): update dependency jsondiffpatch to ^0.6.0

* Cleanup renovate.json

* Code updates

* Update test config

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Nathan Bierema <[email protected]>

Author: renovate[bot]

extension/jest.config.js

@@ -6,6 +6,6 @@ module.exports = {
     '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
   },
   transformIgnorePatterns: [
-    'node_modules/(?!.pnpm|@babel/code-frame|@babel/highlight|@babel/helper-validator-identifier|chalk|d3|dateformat|delaunator|internmap|nanoid|robust-predicates|uuid)',
+    'node_modules/(?!.pnpm|@babel/code-frame|@babel/highlight|@babel/helper-validator-identifier|chalk|d3|dateformat|delaunator|internmap|jsondiffpatch|nanoid|robust-predicates|uuid)',
   ],
 };

packages/redux-devtools-app/jest.config.js

@@ -10,6 +10,6 @@ module.exports = {
     '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }],
   },
   transformIgnorePatterns: [
-    'node_modules/(?!.pnpm|@babel/code-frame|@babel/highlight|@babel/helper-validator-identifier|chalk|d3|dateformat|delaunator|internmap|nanoid|robust-predicates|uuid)',
+    'node_modules/(?!.pnpm|@babel/code-frame|@babel/highlight|@babel/helper-validator-identifier|chalk|d3|dateformat|delaunator|internmap|jsondiffpatch|nanoid|robust-predicates|uuid)',
   ],
 };

packages/redux-devtools-app/package.json

@@ -54,7 +54,7 @@
     "d3-state-visualizer": "^2.0.0",
     "javascript-stringify": "^2.1.0",
     "jsan": "^3.1.14",
-    "jsondiffpatch": "^0.5.0",
+    "jsondiffpatch": "^0.6.0",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "react-icons": "^5.0.1",

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/package.json

@@ -46,7 +46,7 @@
     "hex-rgba": "^1.0.2",
     "immutable": "^4.3.4",
     "javascript-stringify": "^2.1.0",
-    "jsondiffpatch": "^0.5.0",
+    "jsondiffpatch": "^0.6.0",
     "lodash.debounce": "^4.0.8",
     "react-base16-styling": "^0.9.1",
     "react-json-tree": "^0.18.0",

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 type { JSX } from '@emotion/react/jsx-runtime';
 import { DEFAULT_STATE, DevtoolsInspectorState } from './redux';
 import ActionPreviewHeader from './ActionPreviewHeader';

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,
@@ -154,7 +154,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) =>
-  (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}`;
+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}`
+  );
+};
 
 const defaultPropertyFilter = (name: string, context: DiffContext) =>
-  typeof context.left[name] !== 'function' &&
-  typeof context.right[name] !== 'function';
+  typeof (context.left as Record<string, unknown>)[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';