From 18e425b2cd38ed63a5e09d0e6de60badad5e1d9a Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Tue, 23 Jan 2024 21:22:50 -0500 Subject: [PATCH] Code updates --- .../monitors/InspectorWrapper/SubTabs.tsx | 2 +- .../InspectorWrapper/VisualDiffTab.tsx | 5 ++-- .../src/ActionPreview.tsx | 2 +- .../src/DevtoolsInspector.tsx | 4 +-- .../src/createDiffPatcher.ts | 25 ++++++++++++------- .../src/tabs/JSONDiff.tsx | 2 +- 6 files changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/SubTabs.tsx b/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/SubTabs.tsx index e5ae3c3d..6b1f0513 100644 --- a/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/SubTabs.tsx +++ b/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; type DispatchProps = ResolveThunks; diff --git a/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/VisualDiffTab.tsx b/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/VisualDiffTab.tsx index f9296bb9..8fe54ee6 100644 --- a/packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/VisualDiffTab.tsx +++ b/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 { let __html: string | undefined; const data = this.props.data; if (data) { - __html = formatters.html.format(data, undefined); + __html = htmlFormatter.format(data, undefined); } return ; diff --git a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx index f233f0fa..3427fb2d 100644 --- a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx +++ b/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'; diff --git a/packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx b/packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx index a2914ec4..0ec2d40d 100644 --- a/packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx +++ b/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> 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; diff --git a/packages/redux-devtools-inspector-monitor/src/createDiffPatcher.ts b/packages/redux-devtools-inspector-monitor/src/createDiffPatcher.ts index a98c342a..5e19352f 100644 --- a/packages/redux-devtools-inspector-monitor/src/createDiffPatcher.ts +++ b/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; + 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)[name] !== 'function' && + typeof (context.right as Record)[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) { diff --git a/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx b/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx index aee6acdc..c229a336 100644 --- a/packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx +++ b/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';