chore(*): upgrade prettier (#743)

* chore(*): upgrade prettier

* Update snapshots

extension/examples/counter/components/Counter.js

@@ -3,13 +3,8 @@ import PropTypes from 'prop-types';
 
 class Counter extends Component {
   render() {
-    const {
+    const { increment, autoIncrement, incrementAsync, decrement, counter } =
-      increment,
+      this.props;
-      autoIncrement,
-      incrementAsync,
-      decrement,
-      counter,
-    } = this.props;
     return (
       <p>
         Clicked: {counter} times <button onClick={increment}>+</button>{' '}

extension/src/app/api/index.js

@@ -149,12 +149,8 @@ export function toContentScript(message, serializeState, serializeAction) {
     message.action = stringify(message.action, serializeAction);
     message.payload = stringify(message.payload, serializeState);
   } else if (message.type === 'STATE' || message.type === 'PARTIAL_STATE') {
-    const {
+    const { actionsById, computedStates, committedState, ...rest } =
-      actionsById,
+      message.payload;
-      computedStates,
-      committedState,
-      ...rest
-    } = message.payload;
     message.payload = rest;
     message.actionsById = stringify(actionsById, serializeAction);
     message.computedStates = stringify(computedStates, serializeState);

extension/src/browser/extension/inject/pageScript.js

@@ -448,11 +448,8 @@ window.devToolsExtension.disconnect = (...args) => {
   return disconnect.apply(null, args);
 };
 
-const preEnhancer = (instanceId) => (next) => (
+const preEnhancer =
-  reducer,
+  (instanceId) => (next) => (reducer, preloadedState, enhancer) => {
-  preloadedState,
-  enhancer
-) => {
     const store = next(reducer, preloadedState, enhancer);
 
     if (stores[instanceId]) {
@@ -464,9 +461,11 @@ const preEnhancer = (instanceId) => (next) => (
       dispatch: (...args) =>
         !window.__REDUX_DEVTOOLS_EXTENSION_LOCKED__ && store.dispatch(...args),
     };
-};
+  };
 
-const extensionCompose = (config) => (...funcs) => {
+const extensionCompose =
+  (config) =>
+  (...funcs) => {
     return (...args) => {
       const instanceId = generateId(config.instanceId);
       return [preEnhancer(instanceId), ...funcs].reduceRight(
@@ -474,7 +473,7 @@ const extensionCompose = (config) => (...funcs) => {
         __REDUX_DEVTOOLS_EXTENSION__({ ...config, instanceId })(...args)
       );
     };
-};
+  };
 
 window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ = (...funcs) => {
   if (funcs.length === 0) {

extension/src/browser/extension/options/syncOptions.js

@@ -43,8 +43,7 @@ const get = (callback) => {
         blacklist: '',
         shouldCatchErrors: false,
         inject: true,
-        urls:
+        urls: '^https?://localhost|0\\.0\\.0\\.0:\\d+\n^https?://.+\\.github\\.io',
-          '^https?://localhost|0\\.0\\.0\\.0:\\d+\n^https?://.+\\.github\\.io',
         showContextMenus: true,
       },
       function (items) {

extension/test/app/inject/enhancer.spec.js

@@ -155,9 +155,9 @@ describe('Redux enhancer', () => {
           state: JSON.stringify({
             monitorState: {},
             actionsById: {
-              '0': { type: 'PERFORM_ACTION', action: { type: '@@INIT' } },
+              0: { type: 'PERFORM_ACTION', action: { type: '@@INIT' } },
-              '1': { type: 'PERFORM_ACTION', action: { type: 'INCREMENT' } },
+              1: { type: 'PERFORM_ACTION', action: { type: 'INCREMENT' } },
-              '2': { type: 'PERFORM_ACTION', action: { type: 'INCREMENT' } },
+              2: { type: 'PERFORM_ACTION', action: { type: 'INCREMENT' } },
             },
             nextActionId: 3,
             stagedActionIds: [0, 1, 2],
@@ -193,9 +193,8 @@ describe('Redux enhancer', () => {
 
   it('should create the store using old Redux api', async () => {
     const message = await listenMessage(() => {
-      window.store = window.__REDUX_DEVTOOLS_EXTENSION__()(createStore)(
+      window.store =
-        counter
+        window.__REDUX_DEVTOOLS_EXTENSION__()(createStore)(counter);
-      );
       expect(typeof window.store).toBe('object');
     });
     expect(message.type).toBe('INIT_INSTANCE');

extension/test/chrome/extension.spec.js

@@ -6,7 +6,8 @@ import { switchMonitorTests, delay } from '../utils/e2e';
 const port = 9515;
 const path = resolve('build/extension');
 const extensionId = 'lmhkpmbekcpmknklioeibfkpmmfibljd';
-const actionsPattern = /^@@INIT(.|\n)+@@reduxReactRouter\/routerDidChange(.|\n)+@@reduxReactRouter\/initRoutes(.|\n)+$/;
+const actionsPattern =
+  /^@@INIT(.|\n)+@@reduxReactRouter\/routerDidChange(.|\n)+@@reduxReactRouter\/initRoutes(.|\n)+$/;
 
 describe('Chrome extension', function () {
   beforeAll(async () => {

package.json

@@ -30,7 +30,7 @@
     "html-webpack-plugin": "^4.3.0",
     "jest": "^26.2.2",
     "lerna": "^3.22.1",
-    "prettier": "^2.0.5",
+    "prettier": "^2.3.1",
     "raw-loader": "^4.0.1",
     "rimraf": "^3.0.2",
     "style-loader": "^1.2.1",

packages/d3-state-visualizer/src/charts/tree/tree.ts

@@ -214,13 +214,13 @@ export default function (
     preserveAspectRatio: 'xMinYMin slice',
   };
 
-  if (!((style as unknown) as { [key: string]: Primitive }).width) {
+  if (!(style as unknown as { [key: string]: Primitive }).width) {
     attr.width = fullWidth;
   }
 
   if (
-    !((style as unknown) as { [key: string]: Primitive }).width ||
+    !(style as unknown as { [key: string]: Primitive }).width ||
-    !((style as unknown) as { [key: string]: Primitive }).height
+    !(style as unknown as { [key: string]: Primitive }).height
   ) {
     attr.viewBox = `0 0 ${fullWidth} ${fullHeight}`;
   }
@@ -230,7 +230,7 @@ export default function (
   const vis = root
     .append('svg')
     .attr(attr)
-    .style(({ cursor: '-webkit-grab', ...style } as unknown) as {
+    .style({ cursor: '-webkit-grab', ...style } as unknown as {
       [key: string]: Primitive;
     })
     .call(
@@ -303,10 +303,10 @@ export default function (
       : (nextState as NodeWithId);
 
     if (isEmpty(data) || !data.name) {
-      data = ({
+      data = {
         name: 'error',
         message: 'Please provide a state map or a tree structure',
-      } as unknown) as NodeWithId;
+      } as unknown as NodeWithId;
     }
 
     let nodeIndex = 0;
@@ -366,10 +366,7 @@ export default function (
       const node = vis
         .selectAll('g.node')
         .property('__oldData__', (d: NodeWithId) => d)
-        .data(
+        .data(nodes, (d) => d.id || (d.id = ++nodeIndex as unknown as string));
-          nodes,
-          (d) => d.id || (d.id = (++nodeIndex as unknown) as string)
-        );
       const nodeEnter = node
         .enter()
         .append('g')
@@ -550,7 +547,7 @@ export default function (
         .transition()
         .duration(transitionDuration)
         .attr({
-          d: (diagonal as unknown) as Primitive,
+          d: diagonal as unknown as Primitive,
         });
 
       // transition exiting nodes to the parent's new position

packages/devui/src/Button/styles/common.ts

@@ -192,7 +192,7 @@ export const tooltipStyle = ({
   ${commonStyle({ theme, mark, size })}
 
   &:before {
-    content: "${tooltipTitle}";
+    content: '${tooltipTitle}';
     white-space: pre;
     color: ${theme.base06};
     line-height: 16px;
@@ -200,9 +200,8 @@ export const tooltipStyle = ({
     border-radius: 3px;
     background: ${theme.base01};
     border: 1px solid ${theme.base02};
-    box-shadow: 1px 1px 2px -1px ${theme.base02}, 1px 1px 2px 0px ${
+    box-shadow: 1px 1px 2px -1px ${theme.base02},
-  theme.base02
+      1px 1px 2px 0px ${theme.base02};
-};
   }
 
   &:after,
@@ -223,17 +222,14 @@ export const tooltipStyle = ({
   &:before {
     ${before(tooltipPosition)}
     ${getDirection(tooltipPosition)}: 3px;
-    ${
+    ${theme.type === 'material'
-      theme.type === 'material'
       ? css`
           animation: ${fadeIn} 500ms;
         `
-        : ''
+      : ''}
-    }
   }
 
-  ${
+  ${theme.type !== 'material' &&
-    theme.type !== 'material' &&
   `
   &:after {
     content: "";
@@ -243,8 +239,7 @@ export const tooltipStyle = ({
     ${after(tooltipPosition, theme.base02)}
     ${getDirection(tooltipPosition)}: 7px;
   }
-  `
+  `}
-  }
 
   &:hover:after,
   &:hover:before {

packages/devui/src/Button/styles/default.ts

@@ -21,8 +21,7 @@ export const style = ({
   margin: auto 0;
   border: 1px solid ${theme.base02};
   border-radius: 4px;
-  ${
+  ${primary
-    primary
     ? `
   background-color: ${theme.base05};
   color: ${theme.base00};
@@ -30,29 +29,24 @@ export const style = ({
     : `
   background-color: ${theme.base01};
   color: ${theme.base05};
- `
+ `}
-  }
+  ${disabled
-  ${
-    disabled
     ? `
   cursor: not-allowed;
   opacity: 0.6;
   `
     : `
   cursor: pointer;
-  `
+  `}
-  }
 
-  ${
+  ${!disabled &&
-    !disabled &&
   `
   &:hover,
   &:focus {
     background-color: ${primary ? theme.base07 : theme.base02};
     box-shadow: 1px 1px 2px ${theme.base03};
   }
- `
+ `}
-  }
   &:focus {
     border: 1px solid ${theme.base0D};
   }

packages/devui/src/Editor/Editor.tsx

@@ -7,7 +7,7 @@ import { defaultStyle, themedStyle } from './styles';
 import { Theme } from '../themes/default';
 
 const EditorContainer = styled.div(
-  ('' as unknown) as TemplateStringsArray,
+  '' as unknown as TemplateStringsArray,
   ({ theme }: { theme: Theme }) =>
     theme.scheme === 'default' && theme.light
       ? defaultStyle

packages/devui/src/Editor/WithTabs.tsx

@@ -33,12 +33,12 @@ export default class WithTabs extends Component<WithTabsProps> {
         tabs={[
           {
             name: 'Function 1',
-            component: (Editor as unknown) as ComponentType<TabProps>,
+            component: Editor as unknown as ComponentType<TabProps>,
             selector: () => ({ value: value1, lineNumbers }),
           },
           {
             name: 'Function 2',
-            component: (Editor as unknown) as ComponentType<TabProps>,
+            component: Editor as unknown as ComponentType<TabProps>,
             selector: () => ({ value: value2, lineNumbers }),
           },
         ]}

packages/devui/src/Form/Form.tsx

@@ -22,14 +22,8 @@ export interface Props<T> extends FormProps<T> {
  */
 export default class Form<T> extends (PureComponent || Component)<Props<T>> {
   render() {
-    const {
+    const { widgets, children, submitText, primaryButton, noSubmit, ...rest } =
-      widgets,
+      this.props;
-      children,
-      submitText,
-      primaryButton,
-      noSubmit,
-      ...rest
-    } = this.props;
     return (
       <FormContainer
         {...(rest as Props<unknown>)}

packages/devui/src/Slider/styles/default.ts

@@ -36,7 +36,9 @@ export const style = ({
     width: 100%;
     color: ${theme.base06};
 
-    > span { color: ${theme.base04}; } 
+    > span {
+      color: ${theme.base04};
+    }
   }
 
   input {
@@ -54,9 +56,8 @@ export const style = ({
     border-radius: 0.8em/1.1em;
     font-size: 1em;
     cursor: pointer;
-    background: linear-gradient(${theme.base02}, ${
+    background: linear-gradient(${theme.base02}, ${theme.base00}) padding-box,
-  theme.base00
+      50% 50% border-box;
-}) padding-box, 50% 50% border-box;
     background-size: 100% 100%;
   }
 

packages/devui/src/Tabs/Tabs.stories.tsx

@@ -37,9 +37,9 @@ Default.argTypes = {
   onClick: { control: { disable: true } },
 };
 
-export const WithContent = (Template as Story<
+export const WithContent = (
-  TabsProps<{ selected: string }>
+  Template as Story<TabsProps<{ selected: string }>>
->).bind({});
+).bind({});
 WithContent.args = {
   tabs,
   selected: 'Tab2',

packages/devui/src/Tabs/TabsHeader.tsx

@@ -82,9 +82,8 @@ export default class TabsHeader<P> extends Component<Props<P>, State> {
         (this.tabsRef!.children[tabButtons.length - 1] as HTMLButtonElement)
           .value === 'expandIcon'
       ) {
-        this.iconWidth = tabButtons[
+        this.iconWidth =
-          tabButtons.length - 1
+          tabButtons[tabButtons.length - 1].getBoundingClientRect().width;
-        ].getBoundingClientRect().width;
         shouldCollapse = true;
       }
     } else if (this.state.hiddenTabs.length === 0) {

packages/devui/src/Tabs/styles/default.ts

@@ -15,13 +15,11 @@ export const style = ({
   background-color: ${theme.base01};
   width: 100%;
   overflow: hidden;
-  ${
+  ${!main &&
-    !main &&
   `
   border-top: 1px solid ${theme.base01};
   border-bottom: 1px solid ${theme.base02};
-  `
+  `}
-  }
 
   > div {
     display: flex;
@@ -50,16 +48,14 @@ export const style = ({
     }
 
     > [data-selected] {
-      ${
+      ${main
-        main
         ? `border-bottom: 2px solid ${theme.base0D};`
         : `
       background-color: ${theme.base00};
       border: 1px solid ${theme.base02};
       border-bottom: 1px solid ${theme.base00};
       box-shadow: 0 1px ${theme.base00};
-      `
+      `}
-      }
       color: ${theme.base07};
     }
   }

packages/devui/src/Toolbar/styles/Toolbar.ts

@@ -11,9 +11,11 @@ export interface Props {
   noBorder?: boolean;
 }
 
-const Toolbar = (styled as ThemedStyledInterface<
+const Toolbar = (
+  styled as ThemedStyledInterface<
     Base16Theme & { fontFamily?: CSS.Property.FontFamily }
->).div<Props>`
+  >
+).div<Props>`
   display: flex;
   flex-shrink: 0;
   box-sizing: border-box;

packages/devui/tests/Select.test.tsx

@@ -44,7 +44,7 @@ describe('Select', function () {
     );
 
     const input = wrapper.find('input');
-    ((input.at(0).instance() as unknown) as HTMLInputElement).value = 'two';
+    (input.at(0).instance() as unknown as HTMLInputElement).value = 'two';
     input.first().simulate('change');
     expect(mountToJson(wrapper)).toMatchSnapshot();
     input.first().simulate('keyDown', { keyCode: 13 });
@@ -56,7 +56,7 @@ describe('Select', function () {
     const wrapper = mount(<Select options={options} onChange={onChange} />);
 
     const input = wrapper.find('input');
-    ((input.at(0).instance() as unknown) as HTMLInputElement).value = 'text';
+    (input.at(0).instance() as unknown as HTMLInputElement).value = 'text';
     input.first().simulate('change');
     expect(mountToJson(wrapper)).toMatchSnapshot(); // 'No results found'
     input.first().simulate('keyDown', { keyCode: 13 });

packages/devui/tests/__snapshots__/Slider.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Slider renders correctly 1`] = `
 <div
-  class="sc-AxheI ikoHwk"
+  class="sc-AxheI gaYXK"
 >
   <input
     max="100"
@@ -15,7 +15,7 @@ exports[`Slider renders correctly 1`] = `
 
 exports[`Slider renders with props 1`] = `
 <div
-  class="sc-AxheI bySZMR"
+  class="sc-AxheI goWhEX"
   disabled=""
 >
   <label>

packages/react-base16-styling/src/index.ts

@@ -146,7 +146,7 @@ const getStylingByKeys = (
   ...args: any[]
 ): Styling => {
   if (keys === null) {
-    return (mergedStyling as unknown) as Styling;
+    return mergedStyling as unknown as Styling;
   }
 
   if (!Array.isArray(keys)) {

packages/react-dock/demo/index.html

@@ -15,7 +15,7 @@
   <body>
     <a href="https://github.com/alexkuz/react-dock"
       ><img
-        style="z-index: 999999999; position: fixed; top: 0; left: 0; border: 0;"
+        style="z-index: 999999999; position: fixed; top: 0; left: 0; border: 0"
         src="https://camo.githubusercontent.com/121cd7cbdc3e4855075ea8b558508b91ac463ac2/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677265656e5f3030373230302e706e67"
         alt="Fork me on GitHub"
         data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png"

packages/react-dock/src/Dock.tsx

@@ -378,12 +378,14 @@ export default class Dock extends Component<Props, State> {
           />
           <div style={styles.dockContent}>
             {typeof children === 'function'
-              ? (children as React.FunctionComponent<{
+              ? (
+                  children as React.FunctionComponent<{
                     position: 'left' | 'right' | 'top' | 'bottom';
                     isResizing: boolean | undefined;
                     size: number;
                     isVisible: boolean | undefined;
-                }>)({
+                  }>
+                )({
                   position,
                   isResizing,
                   size,

packages/react-json-tree/src/createStylingFromTheme.ts

@@ -82,7 +82,8 @@ const getDefaultThemeStyling = (theme: Base16Theme): StylingConfig => {
     valueText: ({ style }, nodeType) => ({
       style: {
         ...style,
-        color: valueColorMap(colors)[
+        color:
+          valueColorMap(colors)[
             nodeType as keyof ReturnType<typeof valueColorMap>
           ],
       },

packages/react-json-tree/src/types.ts

@@ -21,7 +21,8 @@ interface JSONValueNodeCircularPropsPassedThroughJSONTree {
     ...keyPath: (string | number)[]
   ) => React.ReactNode;
 }
-export type JSONValueNodeCircularPropsProvidedByJSONNode = SharedCircularPropsProvidedByJSONTree &
+export type JSONValueNodeCircularPropsProvidedByJSONNode =
+  SharedCircularPropsProvidedByJSONTree &
     JSONValueNodeCircularPropsPassedThroughJSONTree;
 
 interface JSONNestedNodeCircularPropsPassedThroughJSONTree {
@@ -43,7 +44,8 @@ interface JSONNestedNodeCircularPropsPassedThroughJSONTree {
   collectionLimit: number;
   sortObjectKeys?: ((a: any, b: any) => number) | boolean;
 }
-export type CircularPropsPassedThroughJSONTree = SharedCircularPropsPassedThroughJSONTree &
+export type CircularPropsPassedThroughJSONTree =
+  SharedCircularPropsPassedThroughJSONTree &
     JSONValueNodeCircularPropsPassedThroughJSONTree &
     JSONNestedNodeCircularPropsPassedThroughJSONTree;
 
@@ -53,7 +55,8 @@ interface JSONNestedNodeCircularPropsPassedThroughJSONNode
   isCircular?: boolean;
   level?: number;
 }
-export type CircularPropsPassedThroughJSONNode = SharedCircularPropsProvidedByJSONTree &
+export type CircularPropsPassedThroughJSONNode =
+  SharedCircularPropsProvidedByJSONTree &
     JSONValueNodeCircularPropsPassedThroughJSONTree &
     JSONNestedNodeCircularPropsPassedThroughJSONNode;
 
@@ -62,14 +65,17 @@ export interface JSONNestedNodeCircularPropsPassedThroughJSONNestedNode
   circularCache: any[];
   level: number;
 }
-export type CircularPropsPassedThroughJSONNestedNode = SharedCircularPropsProvidedByJSONTree &
+export type CircularPropsPassedThroughJSONNestedNode =
+  SharedCircularPropsProvidedByJSONTree &
     JSONValueNodeCircularPropsPassedThroughJSONTree &
     JSONNestedNodeCircularPropsPassedThroughJSONNestedNode;
 
-export type CircularPropsPassedThroughRenderChildNodes = SharedCircularPropsProvidedByJSONTree &
+export type CircularPropsPassedThroughRenderChildNodes =
+  SharedCircularPropsProvidedByJSONTree &
     JSONValueNodeCircularPropsPassedThroughJSONTree &
     JSONNestedNodeCircularPropsPassedThroughJSONNestedNode;
 
-export type CircularPropsPassedThroughItemRange = SharedCircularPropsProvidedByJSONTree &
+export type CircularPropsPassedThroughItemRange =
+  SharedCircularPropsProvidedByJSONTree &
     JSONValueNodeCircularPropsPassedThroughJSONTree &
     JSONNestedNodeCircularPropsPassedThroughJSONNestedNode;

packages/redux-devtools-app/src/components/TopButtons.tsx

@@ -53,12 +53,8 @@ export default class TopButtons extends Component<Props> {
   render() {
     const options = this.props.options;
     const features = options.features;
-    const {
+    const { computedStates, skippedActionIds, isPaused, isLocked } =
-      computedStates,
+      this.props.liftedState;
-      skippedActionIds,
-      isPaused,
-      isLocked,
-    } = this.props.liftedState;
     const noStates = computedStates.length < 2;
 
     return (

packages/redux-devtools-app/src/components/buttons/PrintButton.tsx

@@ -8,7 +8,7 @@ export default class PrintButton extends Component {
   }
 
   handlePrint = () => {
-    const d3svg = (document.getElementById('d3svg') as unknown) as SVGGElement;
+    const d3svg = document.getElementById('d3svg') as unknown as SVGGElement;
     if (!d3svg) {
       window.print();
       return;

packages/redux-devtools-app/src/constants/socketActionTypes.ts

@@ -16,7 +16,7 @@ export const {
   AUTHENTICATED,
   PENDING,
   UNAUTHENTICATED,
-} = (socketCluster.SCClientSocket as unknown) as States;
+} = socketCluster.SCClientSocket as unknown as States;
 export const CONNECT_REQUEST = 'socket/CONNECT_REQUEST';
 export const CONNECT_SUCCESS = 'socket/CONNECT_SUCCESS';
 export const CONNECT_ERROR = 'socket/CONNECT_ERROR';

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

@@ -72,20 +72,20 @@ class ChartTab extends Component<Props> {
       style: {
         width: '100%',
         height: '100%',
-        node: ({
+        node: {
           colors: {
             default: theme.base0B,
             collapsed: theme.base0B,
             parent: theme.base0E,
           },
           radius: 7,
-        } as unknown) as string,
+        } as unknown as string,
-        text: ({
+        text: {
           colors: {
             default: theme.base0D,
             hover: theme.base06,
           },
-        } as unknown) as string,
+        } as unknown as string,
       },
       onClickText: this.onClickText,
     };

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

@@ -43,7 +43,7 @@ class InspectorWrapper extends Component<Props> {
     if (features && features.test) {
       tabs = () => [
         ...(DEFAULT_TABS as Tab<unknown, Action<unknown>>[]),
-        ({ name: 'Test', component: TestTab } as unknown) as Tab<
+        { name: 'Test', component: TestTab } as unknown as Tab<
           unknown,
           Action<unknown>
         >,

packages/redux-devtools-app/src/middlewares/api.ts

@@ -109,8 +109,8 @@ function monitoring(request: MonitoringRequest) {
 
   store.dispatch({
     type: UPDATE_STATE,
-    request: ((request as unknown) as RequestWithData).data
+    request: (request as unknown as RequestWithData).data
-      ? { ...((request as unknown) as RequestWithData).data, id: request.id }
+      ? { ...(request as unknown as RequestWithData).data, id: request.id }
       : request,
   });
 

packages/redux-devtools-app/src/middlewares/exportState.ts

@@ -22,9 +22,10 @@ function download(state: string) {
   }, 0);
 }
 
-const exportState = (
+const exportState =
-  store: MiddlewareAPI<Dispatch<StoreAction>, StoreState>
+  (store: MiddlewareAPI<Dispatch<StoreAction>, StoreState>) =>
-) => (next: Dispatch<StoreAction>) => (action: StoreAction) => {
+  (next: Dispatch<StoreAction>) =>
+  (action: StoreAction) => {
     const result = next(action);
 
     if (
@@ -52,13 +53,15 @@ const exportState = (
       const instanceId = getActiveInstance(instances);
       const options = instances.options[instanceId];
       if (options.features.export === true) {
-      download(stringifyJSON(instances.states[instanceId], options.serialize));
+        download(
+          stringifyJSON(instances.states[instanceId], options.serialize)
+        );
       } else {
         toExport = instanceId;
         next({ type: LIFTED_ACTION, message: 'EXPORT', toExport: true });
       }
     }
     return result;
-};
+  };
 
 export default exportState;

packages/redux-devtools-app/src/reducers/instances.ts

@@ -102,7 +102,7 @@ function updateState(
       payload.committedState = payload.computedStates[0].state;
     }
   } else {
-    payload = parseJSON((payload as unknown) as string, serialize) as State;
+    payload = parseJSON(payload as unknown as string, serialize) as State;
   }
 
   let newState;
@@ -127,7 +127,7 @@ function updateState(
         for (let i = 0; i < action.length; i++) {
           newState = recompute(
             newState,
-            request.batched ? payload : ((payload as unknown) as State[])[i],
+            request.batched ? payload : (payload as unknown as State[])[i],
             action[i],
             newState.nextActionId + 1,
             maxAge,

packages/redux-devtools-app/src/reducers/reports.ts

@@ -25,10 +25,7 @@ export default function reports(
       ...state,
       data: state.data.map(d => (d.id === id ? action.data : d))
     };
-  } else */ if (
+  } else */ if (action.type !== UPDATE_REPORTS) return state;
-    action.type !== UPDATE_REPORTS
-  )
-    return state;
 
   const request = action.request;
   switch (request.type) {

packages/redux-devtools-app/src/store/configureStore.ts

@@ -17,26 +17,30 @@ export default function configureStore(
   ) => void,
   key?: string
 ) {
-  const persistConfig: PersistorConfig = ({
+  const persistConfig: PersistorConfig = {
     keyPrefix: `redux-devtools${key || ''}:`,
     blacklist: ['instances', 'socket'],
     storage: localForage,
     serialize: (data: unknown) => data,
     deserialize: (data: unknown) => data,
-  } as unknown) as PersistorConfig;
+  } as unknown as PersistorConfig;
 
   // eslint-disable-next-line @typescript-eslint/no-floating-promises
   getStoredState<StoreState>(persistConfig, (err, restoredState) => {
     let composeEnhancers = compose;
     if (process.env.NODE_ENV !== 'production') {
       if (
-        ((window as unknown) as {
+        (
+          window as unknown as {
             __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
-        }).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+          }
+        ).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
       ) {
-        composeEnhancers = ((window as unknown) as {
+        composeEnhancers = (
+          window as unknown as {
             __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: typeof compose;
-        }).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
+          }
+        ).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
       }
       if (module.hot) {
         // Enable Webpack hot module replacement for reducers

packages/redux-devtools-app/src/utils/stringifyJSON.ts

@@ -19,6 +19,6 @@ export default function stringifyJSON(
   serialize: boolean | undefined
 ) {
   return serialize
-    ? jsan.stringify(data, replacer, (null as unknown) as undefined, true)
+    ? jsan.stringify(data, replacer, null as unknown as undefined, true)
     : jsan.stringify(data);
 }

packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx

@@ -189,7 +189,7 @@ class ChartMonitor<S, A extends Action<unknown>> extends PureComponent<
       heightBetweenNodesCoeff: 1,
       widthBetweenNodesCoeff: 1.3,
       tooltipOptions,
-      style: (this.getChartStyle() as unknown) as
+      style: this.getChartStyle() as unknown as
         | { [key: string]: Primitive }
         | undefined,
     };

packages/redux-devtools-cli/src/index.ts

@@ -12,9 +12,7 @@ export interface ExtendedOptions extends Options {
   allowClientPublish: boolean;
 }
 
-export default function (argv: {
+export default function (argv: { [arg: string]: any }): Promise<{
-  [arg: string]: any;
-}): Promise<{
   portAlreadyUsed?: boolean;
   on: (status: 'ready', cb: () => void) => void;
 }> {

packages/redux-devtools-cli/test/integration.spec.ts

@@ -73,10 +73,10 @@ describe('Server', function () {
     });
 
     it('should login', function () {
-      socket.emit('login', 'master', function (
+      socket.emit(
-        error: Error | undefined,
+        'login',
-        channelName: string
+        'master',
-      ) {
+        function (error: Error | undefined, channelName: string) {
           if (error) {
             /* eslint-disable-next-line no-console */
             console.log(error);
@@ -85,7 +85,8 @@ describe('Server', function () {
           expect(channelName).toBe('respond');
           channel = socket.subscribe(channelName);
           expect(channel.SUBSCRIBED).toBe('subscribed');
-      });
+        }
+      );
     });
 
     it('should send message', function () {
@@ -107,10 +108,10 @@ describe('Server', function () {
           id: 'tAmA7H5fclyWhvizAAAi',
         };
 
-        socket2.emit('login', '', function (
+        socket2.emit(
-          error: Error | undefined,
+          'login',
-          channelName: string
+          '',
-        ) {
+          function (error: Error | undefined, channelName: string) {
             if (error) {
               /* eslint-disable-next-line no-console */
               console.log(error);
@@ -126,7 +127,8 @@ describe('Server', function () {
               });
               socket.emit(channelName, data);
             });
-        });
+          }
+        );
       });
     });
   });

packages/redux-devtools-dock-monitor/src/DockMonitor.tsx

@@ -235,7 +235,7 @@ class DockMonitor<S, A extends Action<unknown>> extends Component<
   }
 }
 
-export default (DockMonitor as unknown) as React.ComponentType<
+export default DockMonitor as unknown as React.ComponentType<
   ExternalProps<unknown, Action<unknown>>
 > & {
   update(

packages/redux-devtools-dock-monitor/src/reducers.ts

@@ -81,7 +81,7 @@ export default function reducer<S, A extends Action<unknown>>(
             `(${
               child.type.displayName ||
               child.type.name ||
-              ((child.type as unknown) as string)
+              (child.type as unknown as string)
             }) ` +
             'does not appear to be a valid Redux DevTools monitor.'
         );

packages/redux-devtools-inspector-monitor-test-tab/demo/src/js/index.tsx

@@ -35,16 +35,18 @@ const DevTools = getDevTools(window.location);
 const history = createBrowserHistory();
 
 const useDevtoolsExtension =
-  !!((window as unknown) as { __REDUX_DEVTOOLS_EXTENSION__: unknown }) &&
+  !!(window as unknown as { __REDUX_DEVTOOLS_EXTENSION__: unknown }) &&
   getOptions(window.location).useExtension;
 
 const enhancer = compose(
   applyMiddleware(logger, routerMiddleware(history)),
   (next: StoreEnhancerStoreCreator) => {
     const instrument = useDevtoolsExtension
-      ? ((window as unknown) as {
+      ? (
+          window as unknown as {
             __REDUX_DEVTOOLS_EXTENSION__(): StoreEnhancer;
-        }).__REDUX_DEVTOOLS_EXTENSION__()
+          }
+        ).__REDUX_DEVTOOLS_EXTENSION__()
       : DevTools.instrument();
     return instrument(next);
   },

packages/redux-devtools-inspector-monitor-test-tab/src/TestGenerator.tsx

@@ -39,7 +39,7 @@ export function compare<S>(
       if (paths.length && paths.indexOf(path) !== -1) return;
       paths.push(path);
       // eslint-disable-next-line @typescript-eslint/ban-types
-      const v = objectPath.get((s2.state as unknown) as object, event.newPath);
+      const v = objectPath.get(s2.state as unknown as object, event.newPath);
       curState = v.length;
       path += '.length';
     } else if (event.type === 'add-item') {
@@ -79,8 +79,8 @@ export default class TestGenerator<
   getMethod(action: A) {
     let type: string = action.type as string;
     if (type[0] === '┗') type = type.substr(1).trim();
-    const args = ((action as unknown) as { arguments: unknown[] }).arguments
+    const args = (action as unknown as { arguments: unknown[] }).arguments
-      ? ((action as unknown) as { arguments: unknown[] }).arguments
+      ? (action as unknown as { arguments: unknown[] }).arguments
           .map((arg) => stringify(arg))
           .join(',')
       : '';

packages/redux-devtools-inspector-monitor-test-tab/src/index.tsx

@@ -66,10 +66,8 @@ export default class TestTab<S, A extends Action<unknown>> extends Component<
   };
 
   handleSubmit = ({ formData: template }: { formData: Template }) => {
-    const {
+    const { templates = getDefaultTemplates(), selected = 0 } =
-      templates = getDefaultTemplates(),
+      this.getPersistedState();
-      selected = 0,
-    } = this.getPersistedState();
     if (this.state.dialogStatus === 'Add') {
       this.updateState({
         selected: templates.length,
@@ -86,10 +84,8 @@ export default class TestTab<S, A extends Action<unknown>> extends Component<
   };
 
   handleRemove = () => {
-    const {
+    const { templates = getDefaultTemplates(), selected = 0 } =
-      templates = getDefaultTemplates(),
+      this.getPersistedState();
-      selected = 0,
-    } = this.getPersistedState();
     this.updateState({
       selected: 0,
       templates:
@@ -111,9 +107,11 @@ export default class TestTab<S, A extends Action<unknown>> extends Component<
   updateState = (newState: TestGeneratorMonitorState) => {
     this.props.updateMonitorState({
       testGenerator: {
-        ...(this.props.monitorState as {
+        ...(
+          this.props.monitorState as {
             testGenerator?: TestGeneratorMonitorState;
-        }).testGenerator,
+          }
+        ).testGenerator,
         ...newState,
       },
     } as Partial<DevtoolsInspectorState>);

packages/redux-devtools-inspector-monitor-trace-tab/src/openFile.ts

@@ -13,10 +13,8 @@ function openResource(
   }) => {
     //console.log("openResource callback args: ", callbackArgs);
     if (result.isError) {
-      const {
+      const { fileName: finalFileName, lineNumber: finalLineNumber } =
-        fileName: finalFileName,
+        stackFrame;
-        lineNumber: finalLineNumber,
-      } = stackFrame;
       const adjustedLineNumber = Math.max(finalLineNumber! - 1, 0);
       chrome.devtools.panels.openResource(
         finalFileName!,
@@ -61,7 +59,7 @@ function openInEditor(editor: string, path: string, stackFrame: StackFrame) {
   const projectPath = path.replace(/\/$/, '');
   const file =
     stackFrame._originalFileName ||
-    ((stackFrame as unknown) as { finalFileName: string }).finalFileName ||
+    (stackFrame as unknown as { finalFileName: string }).finalFileName ||
     stackFrame.fileName ||
     '';
   let filePath = /^https?:\/\//.test(file)
@@ -111,11 +109,9 @@ export default function openFile(
   const storage = isFF
     ? chrome.storage.local
     : chrome.storage.sync || chrome.storage.local;
-  storage.get(['useEditor', 'editor', 'projectPath'], function ({
+  storage.get(
-    useEditor,
+    ['useEditor', 'editor', 'projectPath'],
-    editor,
+    function ({ useEditor, editor, projectPath }) {
-    projectPath,
-  }) {
       if (
         useEditor &&
         projectPath &&
@@ -144,5 +140,6 @@ export default function openFile(
           }
         }
       }
-  });
+    }
+  );
 }

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrame.tsx

@@ -67,10 +67,8 @@ class StackFrame extends Component<Props, State> {
   };
 
   getErrorLocation(): ErrorLocation | null {
-    const {
+    const { _originalFileName: fileName, _originalLineNumber: lineNumber } =
-      _originalFileName: fileName,
+      this.props.frame;
-      _originalLineNumber: lineNumber,
-    } = this.props.frame;
     // Unknown file
     if (!fileName) {
       return null;

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/getSourceMap.ts

@@ -70,7 +70,7 @@ class SourceMap {
   }
 
   getSources(): string[] {
-    return ((this.__source_map as unknown) as { sources: string[] }).sources;
+    return (this.__source_map as unknown as { sources: string[] }).sources;
   }
 }
 
@@ -115,9 +115,7 @@ async function getSourceMap(
     sm = sm.substring(match2[0].length);
     sm = window.atob(sm);
     sm = JSON.parse(sm);
-    return new SourceMap(
+    return new SourceMap(new SourceMapConsumer(sm as unknown as RawSourceMap));
-      new SourceMapConsumer((sm as unknown) as RawSourceMap)
-    );
   } else {
     const index = fileUri.lastIndexOf('/');
     const url = fileUri.substring(0, index + 1) + sm;

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/getStackFrames.ts

@@ -19,15 +19,19 @@ function getStackFrames(
   const parsedFrames = parse(error);
   let enhancedFramesPromise;
   if (
-    ((error as unknown) as {
+    (
+      error as unknown as {
         __unmap_source: string | { uri: string; contents: string };
-    }).__unmap_source
+      }
+    ).__unmap_source
   ) {
     enhancedFramesPromise = unmap(
       // $FlowFixMe
-      ((error as unknown) as {
+      (
+        error as unknown as {
           __unmap_source: string | { uri: string; contents: string };
-      }).__unmap_source,
+        }
+      ).__unmap_source,
       parsedFrames,
       contextSize
     );

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/parseCompileError.ts

@@ -39,9 +39,8 @@ function parseCompileError(message: string): ErrorLocation | null | undefined {
 
     let k = 0;
     while (k < lineNumberRegexes.length) {
-      const match: string[] | null | undefined = lineNumberRegexes[k].exec(
+      const match: string[] | null | undefined =
-        line
+        lineNumberRegexes[k].exec(line);
-      );
       if (match) {
         lineNumber = parseInt(match[1], 10);
         // colNumber starts with 0 and hence add 1

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/parser.ts

@@ -23,7 +23,8 @@ function extractLocation(token: string): [string, number, number] {
 }
 
 const regexValidFrame_Chrome = /^\s*(at|in)\s.+(:\d+)/;
-const regexValidFrame_FireFox = /(^|@)\S+:\d+|.+line\s+\d+\s+>\s+(eval|Function).+/;
+const regexValidFrame_FireFox =
+  /(^|@)\S+:\d+|.+line\s+\d+\s+>\s+(eval|Function).+/;
 
 function parseStack(stack: string[]): StackFrame[] {
   const frames = stack

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/unmapper.ts

@@ -42,12 +42,8 @@ async function unmap(
   }
   const map = await getSourceMap(fileUri, fileContents!);
   return frames.map((frame) => {
-    const {
+    const { functionName, lineNumber, columnNumber, _originalLineNumber } =
-      functionName,
+      frame;
-      lineNumber,
-      columnNumber,
-      _originalLineNumber,
-    } = frame;
     if (_originalLineNumber != null) {
       return frame;
     }

packages/redux-devtools-inspector-monitor/demo/src/index.html

@@ -20,7 +20,7 @@
   <body>
     <a href="<%= htmlWebpackPlugin.options.package.repository.url %>"
       ><img
-        style="z-index: 999999999; position: fixed; top: 0; left: 0; border: 0;"
+        style="z-index: 999999999; position: fixed; top: 0; left: 0; border: 0"
         src="https://camo.githubusercontent.com/121cd7cbdc3e4855075ea8b558508b91ac463ac2/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677265656e5f3030373230302e706e67"
         alt="Fork me on GitHub"
         data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png"

packages/redux-devtools-inspector-monitor/demo/src/js/index.tsx

@@ -33,16 +33,18 @@ const DevTools = getDevTools(window.location);
 const history = createBrowserHistory();
 
 const useDevtoolsExtension =
-  !!((window as unknown) as { __REDUX_DEVTOOLS_EXTENSION__: unknown })
+  !!(window as unknown as { __REDUX_DEVTOOLS_EXTENSION__: unknown })
     .__REDUX_DEVTOOLS_EXTENSION__ && getOptions(window.location).useExtension;
 
 const enhancer = compose(
   applyMiddleware(logger, routerMiddleware(history)),
   (next: StoreEnhancerStoreCreator) => {
     const instrument = useDevtoolsExtension
-      ? ((window as unknown) as {
+      ? (
+          window as unknown as {
             __REDUX_DEVTOOLS_EXTENSION__(): StoreEnhancer;
-        }).__REDUX_DEVTOOLS_EXTENSION__()
+          }
+        ).__REDUX_DEVTOOLS_EXTENSION__()
       : DevTools.instrument();
     return instrument(next);
   },

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

@@ -78,14 +78,12 @@ export default class ActionListRow<
       <div
         onClick={onSelect}
         onMouseEnter={
-          (!hideActionButtons && this.handleMouseEnter) as MouseEventHandler<
+          (!hideActionButtons &&
-            HTMLDivElement
+            this.handleMouseEnter) as MouseEventHandler<HTMLDivElement>
-          >
         }
         onMouseLeave={
-          (!hideActionButtons && this.handleMouseLeave) as MouseEventHandler<
+          (!hideActionButtons &&
-            HTMLDivElement
+            this.handleMouseLeave) as MouseEventHandler<HTMLDivElement>
-          >
         }
         onMouseDown={this.handleMouseDown}
         onMouseUp={this.handleMouseEnter}
@@ -193,7 +191,7 @@ export default class ActionListRow<
 
   handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
     if (
-      ((e.target as unknown) as { className: string[] }).className.indexOf(
+      (e.target as unknown as { className: string[] }).className.indexOf(
         'selectorButton'
       ) === 0
     )

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

@@ -121,7 +121,7 @@ class ActionPreview<S, A extends Action<unknown>> extends Component<
     return (
       <div key="actionPreview" {...styling('actionPreview')}>
         <ActionPreviewHeader
-          tabs={(renderedTabs as unknown) as Tab<unknown, Action<unknown>>[]}
+          tabs={renderedTabs as unknown as Tab<unknown, Action<unknown>>[]}
           {...{ styling, inspectedPath, onInspectPath, tabName, onSelectTab }}
         />
         {!error && (

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

@@ -13,17 +13,8 @@ interface Props<S, A extends Action<unknown>> {
   onSelectTab: (tabName: string) => void;
 }
 
-const ActionPreviewHeader: FunctionComponent<Props<
+const ActionPreviewHeader: FunctionComponent<Props<unknown, Action<unknown>>> =
-  unknown,
+  ({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) => (
-  Action<unknown>
->> = ({
-  styling,
-  inspectedPath,
-  onInspectPath,
-  tabName,
-  onSelectTab,
-  tabs,
-}) => (
     <div key="previewHeader" {...styling('previewHeader')}>
       <div {...styling('tabSelector')}>
         {tabs.map((tab) => (
@@ -71,7 +62,7 @@ const ActionPreviewHeader: FunctionComponent<Props<
         )}
       </div>
     </div>
-);
+  );
 
 ActionPreviewHeader.propTypes = {
   tabs: PropTypes.array.isRequired,

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

@@ -301,22 +301,12 @@ class DevtoolsInspector<S, A extends Action<unknown>> extends PureComponent<
       hideMainButtons,
       hideActionButtons,
     } = this.props;
-    const {
+    const { selectedActionId, startActionId, searchValue, tabName } =
-      selectedActionId,
+      monitorState;
-      startActionId,
-      searchValue,
-      tabName,
-    } = monitorState;
     const inspectedPathType =
       tabName === 'Action' ? 'inspectedActionPath' : 'inspectedStatePath';
-    const {
+    const { themeState, isWideLayout, action, nextState, delta, error } =
-      themeState,
+      this.state;
-      isWideLayout,
-      action,
-      nextState,
-      delta,
-      error,
-    } = this.state;
     const { base16Theme, styling } = themeState;
 
     return (
@@ -467,7 +457,7 @@ class DevtoolsInspector<S, A extends Action<unknown>> extends PureComponent<
   };
 }
 
-export default (DevtoolsInspector as unknown) as React.ComponentType<
+export default DevtoolsInspector as unknown as React.ComponentType<
   ExternalProps<unknown, Action<unknown>>
 > & {
   update(

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

@@ -6,10 +6,9 @@ import getItemString from './getItemString';
 import getJsonTreeTheme from './getJsonTreeTheme';
 import { TabComponentProps } from '../ActionPreview';
 
-const ActionTab: FunctionComponent<TabComponentProps<
+const ActionTab: FunctionComponent<
-  unknown,
+  TabComponentProps<unknown, Action<unknown>>
-  Action<unknown>
+> = ({
->> = ({
   action,
   styling,
   base16Theme,

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

@@ -4,10 +4,8 @@ import JSONDiff from './JSONDiff';
 import { TabComponentProps } from '../ActionPreview';
 import { Action } from 'redux';
 
-const DiffTab: FunctionComponent<TabComponentProps<
+const DiffTab: FunctionComponent<TabComponentProps<unknown, Action<unknown>>> =
-  unknown,
+  ({
-  Action<unknown>
->> = ({
     delta,
     styling,
     base16Theme,
@@ -15,7 +13,7 @@ const DiffTab: FunctionComponent<TabComponentProps<
     labelRenderer,
     isWideLayout,
     dataTypeKey,
-}) => (
+  }) => (
     <JSONDiff
       {...{
         delta,
@@ -27,7 +25,7 @@ const DiffTab: FunctionComponent<TabComponentProps<
         dataTypeKey,
       }}
     />
-);
+  );
 
 DiffTab.propTypes = {
   delta: PropTypes.any,

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

@@ -6,10 +6,9 @@ import getItemString from './getItemString';
 import getJsonTreeTheme from './getJsonTreeTheme';
 import { TabComponentProps } from '../ActionPreview';
 
-const StateTab: React.FunctionComponent<TabComponentProps<
+const StateTab: React.FunctionComponent<
-  any,
+  TabComponentProps<any, Action<unknown>>
-  Action<unknown>
+> = ({
->> = ({
   nextState,
   styling,
   base16Theme,

packages/redux-devtools-instrument/src/instrument.ts

@@ -902,7 +902,7 @@ export function unliftStore<
     return action;
   }
 
-  return ({
+  return {
     ...liftedStore,
 
     liftedStore,
@@ -913,9 +913,9 @@ export function unliftStore<
 
     replaceReducer(nextReducer: Reducer<S & NextStateExt, A>) {
       liftedStore.replaceReducer(
-        (liftReducer(
+        liftReducer(
-          (nextReducer as unknown) as Reducer<S, A>
+          nextReducer as unknown as Reducer<S, A>
-        ) as unknown) as Reducer<
+        ) as unknown as Reducer<
           LiftedState<S, A, MonitorState> & NextStateExt,
           LiftedAction<S, A, MonitorState>
         >
@@ -946,7 +946,7 @@ export function unliftStore<
         },
       };
     },
-  } as unknown) as Store<S & NextStateExt, A> &
+  } as unknown as Store<S & NextStateExt, A> &
     NextExt & {
       liftedStore: Store<
         LiftedState<S, A, MonitorState> & NextStateExt,
@@ -986,8 +986,8 @@ export default function instrument<
   MonitorState = null,
   MonitorAction extends Action<unknown> = never
 >(
-  monitorReducer: Reducer<MonitorState, MonitorAction> = ((() =>
+  monitorReducer: Reducer<MonitorState, MonitorAction> = (() =>
-    null) as unknown) as Reducer<MonitorState, MonitorAction>,
+    null) as unknown as Reducer<MonitorState, MonitorAction>,
   options: Options<OptionsS, OptionsA, MonitorState, MonitorAction> = {}
 ): StoreEnhancer<InstrumentExt<any, any, MonitorState>> {
   if (typeof options.maxAge === 'number' && options.maxAge < 2) {
@@ -999,7 +999,8 @@ export default function instrument<
 
   return <NextExt, NextStateExt>(
       createStore: StoreEnhancerStoreCreator<NextExt, NextStateExt>
-  ) => <S, A extends Action<unknown>>(
+    ) =>
+    <S, A extends Action<unknown>>(
       reducer: Reducer<S, A>,
       initialState?: PreloadedState<S>
     ) => {
@@ -1019,13 +1020,14 @@ export default function instrument<
           r,
           initialState,
           monitorReducer,
-        (options as unknown) as Options<S, A, MonitorState, MonitorAction>
+          options as unknown as Options<S, A, MonitorState, MonitorAction>
         );
       }
 
       const liftedStore = createStore(liftReducer(reducer));
       if (
-      (liftedStore as Store<
+        (
+          liftedStore as Store<
             LiftedState<S, A, MonitorState> & NextStateExt,
             LiftedAction<S, A, MonitorState>
           > &
@@ -1034,7 +1036,8 @@ export default function instrument<
                 LiftedState<S, A, MonitorState>,
                 LiftedAction<S, A, MonitorState>
               >;
-        }).liftedStore
+            }
+        ).liftedStore
       ) {
         throw new Error(
           'DevTools instrumentation should not be applied more than once. ' +
@@ -1052,7 +1055,7 @@ export default function instrument<
       >(
         liftedStore,
         liftReducer,
-      (options as unknown) as Options<S, A, MonitorState, MonitorAction>
+        options as unknown as Options<S, A, MonitorState, MonitorAction>
       );
     };
 }

packages/redux-devtools-instrument/test/instrument.spec.ts

@@ -33,7 +33,7 @@ function counterWithBug(state = 0, action: CounterWithBugAction) {
       // @ts-ignore
       return mistake - 1;
     case 'SET_UNDEFINED':
-      return (undefined as unknown) as number;
+      return undefined as unknown as number;
     default:
       return state;
   }
@@ -48,7 +48,7 @@ function counterWithAnotherBug(state = 0, action: CounterWithBugAction) {
     case 'INCREMENT':
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      return ((mistake as unknown) as number) + 1;
+      return (mistake as unknown as number) + 1;
     case 'DECREMENT':
       return state - 1;
     case 'SET_UNDEFINED':
@@ -108,7 +108,7 @@ describe('instrument', () => {
     let lastValue;
     // let calls = 0;
 
-    from((store as unknown) as Observable<number>).subscribe((state) => {
+    from(store as unknown as Observable<number>).subscribe((state) => {
       lastValue = state;
       // calls++;
     });
@@ -258,81 +258,49 @@ describe('instrument', () => {
     storeWithMultiply.dispatch({ type: 'INCREMENT' });
     storeWithMultiply.dispatch({ type: 'MULTIPLY' });
     expect(storeWithMultiply.liftedStore.getState().stagedActionIds).toEqual([
-      0,
+      0, 1, 2, 3, 4,
-      1,
-      2,
-      3,
-      4,
     ]);
     expect(storeWithMultiply.getState()).toBe(2);
 
     storeWithMultiply.liftedStore.dispatch(ActionCreators.reorderAction(4, 1));
     expect(storeWithMultiply.liftedStore.getState().stagedActionIds).toEqual([
-      0,
+      0, 4, 1, 2, 3,
-      4,
-      1,
-      2,
-      3,
     ]);
     expect(storeWithMultiply.getState()).toBe(1);
 
     storeWithMultiply.liftedStore.dispatch(ActionCreators.reorderAction(4, 1));
     expect(storeWithMultiply.liftedStore.getState().stagedActionIds).toEqual([
-      0,
+      0, 4, 1, 2, 3,
-      4,
-      1,
-      2,
-      3,
     ]);
     expect(storeWithMultiply.getState()).toBe(1);
 
     storeWithMultiply.liftedStore.dispatch(ActionCreators.reorderAction(4, 2));
     expect(storeWithMultiply.liftedStore.getState().stagedActionIds).toEqual([
-      0,
+      0, 1, 4, 2, 3,
-      1,
-      4,
-      2,
-      3,
     ]);
     expect(storeWithMultiply.getState()).toBe(2);
 
     storeWithMultiply.liftedStore.dispatch(ActionCreators.reorderAction(1, 10));
     expect(storeWithMultiply.liftedStore.getState().stagedActionIds).toEqual([
-      0,
+      0, 4, 2, 3, 1,
-      4,
-      2,
-      3,
-      1,
     ]);
     expect(storeWithMultiply.getState()).toBe(1);
 
     storeWithMultiply.liftedStore.dispatch(ActionCreators.reorderAction(10, 1));
     expect(storeWithMultiply.liftedStore.getState().stagedActionIds).toEqual([
-      0,
+      0, 4, 2, 3, 1,
-      4,
-      2,
-      3,
-      1,
     ]);
     expect(storeWithMultiply.getState()).toBe(1);
 
     storeWithMultiply.liftedStore.dispatch(ActionCreators.reorderAction(1, -2));
     expect(storeWithMultiply.liftedStore.getState().stagedActionIds).toEqual([
-      0,
+      0, 1, 4, 2, 3,
-      1,
-      4,
-      2,
-      3,
     ]);
     expect(storeWithMultiply.getState()).toBe(2);
 
     storeWithMultiply.liftedStore.dispatch(ActionCreators.reorderAction(0, 1));
     expect(storeWithMultiply.liftedStore.getState().stagedActionIds).toEqual([
-      0,
+      0, 1, 4, 2, 3,
-      1,
-      4,
-      2,
-      3,
     ]);
     expect(storeWithMultiply.getState()).toBe(2);
   });
@@ -366,7 +334,7 @@ describe('instrument', () => {
     store.replaceReducer(
       (() => ({ test: true } as unknown)) as Reducer<number, CounterAction>
     );
-    const newStore = (store as unknown) as Store<{ test: boolean }>;
+    const newStore = store as unknown as Store<{ test: boolean }>;
     expect(newStore.getState()).toEqual({ test: true });
   });
 
@@ -395,7 +363,7 @@ describe('instrument', () => {
 
   it('should catch invalid action type (undefined type)', () => {
     expect(() => {
-      store.dispatch(({ type: undefined } as unknown) as CounterAction);
+      store.dispatch({ type: undefined } as unknown as CounterAction);
     }).toThrow(
       'Actions may not have an undefined "type" property. ' +
         'Have you misspelled a constant?'
@@ -612,7 +580,8 @@ describe('instrument', () => {
       storeWithBug.replaceReducer(
         counterWithAnotherBug as Reducer<number, CounterWithBugAction>
       );
-      const liftedStoreWithAnotherBug = (liftedStoreWithBug as unknown) as LiftedStore<
+      const liftedStoreWithAnotherBug =
+        liftedStoreWithBug as unknown as LiftedStore<
           number,
           CounterWithAnotherBugAction,
           null
@@ -1027,7 +996,7 @@ describe('instrument', () => {
     it('should include 3 extra frames when Error.captureStackTrace not suported', () => {
       // eslint-disable-next-line @typescript-eslint/unbound-method
       const captureStackTrace = Error.captureStackTrace;
-      Error.captureStackTrace = (undefined as unknown) as () => unknown;
+      Error.captureStackTrace = undefined as unknown as () => unknown;
       monitoredStore = createStore(
         counter,
         instrument(undefined, { trace: true, traceLimit: 5 })
@@ -1395,18 +1364,18 @@ describe('instrument', () => {
 
   it('throws if reducer is not a function', () => {
     expect(() =>
-      createStore((undefined as unknown) as Reducer, instrument())
+      createStore(undefined as unknown as Reducer, instrument())
     ).toThrow('Expected the reducer to be a function.');
   });
 
   it('warns if the reducer is not a function but has a default field that is', () => {
     expect(() =>
       createStore(
-        ({
+        {
           default: () => {
             // noop
           },
-        } as unknown) as Reducer,
+        } as unknown as Reducer,
         instrument()
       )
     ).toThrow(

packages/redux-devtools-log-monitor/src/LogMonitor.tsx

@@ -273,7 +273,7 @@ class LogMonitor<S, A extends Action<unknown>> extends PureComponent<
   }
 }
 
-export default (LogMonitor as unknown) as React.ComponentType<
+export default LogMonitor as unknown as React.ComponentType<
   ExternalProps<unknown, Action<unknown>>
 > & {
   update(

packages/redux-devtools-log-monitor/src/LogMonitorEntry.tsx

@@ -154,15 +154,8 @@ export default class LogMonitorEntry<
   };
 
   render() {
-    const {
+    const { actionId, error, action, state, collapsed, selected, inFuture } =
-      actionId,
+      this.props;
-      error,
-      action,
-      state,
-      collapsed,
-      selected,
-      inFuture,
-    } = this.props;
     const styleEntry = {
       opacity: collapsed ? 0.5 : 1,
       cursor: actionId > 0 ? 'pointer' : 'default',

packages/redux-devtools-serialize/test/immutable.spec.ts

@@ -148,9 +148,11 @@ describe('Immutable', function () {
         if (key === 'map' || key === 'orderedMap') {
           const deserializedDefault = parse(stringified);
           expect(
-            (deserializedDefault as
+            (
+              deserializedDefault as
                 | Map<unknown, unknown>
-              | OrderedMap<unknown, unknown>).get('a')
+                | OrderedMap<unknown, unknown>
+            ).get('a')
           ).toEqual(customOneRepresentation);
         }
       });

packages/redux-devtools-slider-monitor/src/SliderMonitor.tsx

@@ -374,7 +374,7 @@ class SliderMonitor<S, A extends Action<unknown>> extends (PureComponent ||
   }
 }
 
-export default (SliderMonitor as unknown) as React.ComponentType<
+export default SliderMonitor as unknown as React.ComponentType<
   ExternalProps<unknown, Action<unknown>>
 > & {
   update(

packages/redux-devtools-utils/src/importState.ts

@@ -52,27 +52,35 @@ export default function importState(
   let preloadedState: State | undefined;
   let nextLiftedState: State = parse(state) as State;
   if (
-    ((nextLiftedState as unknown) as {
+    (
+      nextLiftedState as unknown as {
         payload?: string;
         preloadedState?: string;
-    }).payload
+      }
+    ).payload
   ) {
     if (
-      ((nextLiftedState as unknown) as {
+      (
+        nextLiftedState as unknown as {
           payload: string;
           preloadedState?: string;
-      }).preloadedState
+        }
+      ).preloadedState
     )
       preloadedState = parse(
-        ((nextLiftedState as unknown) as {
+        (
+          nextLiftedState as unknown as {
             payload: string;
             preloadedState: string;
-        }).preloadedState
+          }
+        ).preloadedState
       ) as State;
     nextLiftedState = parse(
-      ((nextLiftedState as unknown) as {
+      (
+        nextLiftedState as unknown as {
           payload: string;
-      }).payload
+        }
+      ).payload
     ) as State;
   }
   if (deserializeState) {
@@ -92,7 +100,7 @@ export default function importState(
     }
     if (typeof preloadedState !== 'undefined') {
       preloadedState = deserializeState(
-        (preloadedState as unknown) as string
+        preloadedState as unknown as string
       ) as State;
     }
   }
@@ -102,7 +110,7 @@ export default function importState(
       nextLiftedState.actionsById,
       (liftedAction) => ({
         ...liftedAction,
-        action: deserializeAction((liftedAction.action as unknown) as string),
+        action: deserializeAction(liftedAction.action as unknown as string),
       })
     );
   }

packages/redux-devtools-utils/src/index.ts

@@ -124,11 +124,11 @@ function tryCatchStringify(obj: unknown) {
     /* eslint-enable no-console */
     return jsan.stringify(
       obj,
-      (null as unknown) as undefined,
+      null as unknown as undefined,
-      (null as unknown) as undefined,
+      null as unknown as undefined,
-      ({
+      {
         circular: '[CIRCULAR]',
-      } as unknown) as boolean
+      } as unknown as boolean
     );
   }
 }
@@ -153,14 +153,14 @@ export function stringify(
           return (value as any).toJS();
         return value;
       },
-      (null as unknown) as undefined,
+      null as unknown as undefined,
       true
     );
   }
   return jsan.stringify(
     obj,
     serialize.replacer,
-    (null as unknown) as undefined,
+    null as unknown as undefined,
     serialize.options as boolean
   );
 }
@@ -195,12 +195,14 @@ export function getSeralizeParameter(
     return { replacer: serialize.replacer, options: serialize.options || true };
   }
 
-  const value = (config as {
+  const value = (
+    config as {
       [param: string]: {
         replacer?: (key: string, value: unknown) => unknown;
         options: unknown | boolean;
       };
-  })[param];
+    }
+  )[param];
   if (typeof value === 'undefined') return undefined;
   // eslint-disable-next-line no-console
   console.warn(

packages/redux-devtools/src/createDevTools.tsx

@@ -136,7 +136,7 @@ export default function createDevTools<
                 return null;
               }
               if (
-                !((props.store as unknown) as EnhancedStore<S, A, MonitorState>)
+                !(props.store as unknown as EnhancedStore<S, A, MonitorState>)
                   .liftedStore
               ) {
                 logError('NoLiftedStore');
@@ -145,11 +145,13 @@ export default function createDevTools<
               return (
                 <Provider
                   store={
-                    ((props.store as unknown) as EnhancedStore<
+                    (
+                      props.store as unknown as EnhancedStore<
                         S,
                         A,
                         MonitorState
-                    >).liftedStore
+                      >
+                    ).liftedStore
                   }
                 >
                   <ConnectedMonitor {...monitorProps} />

packages/redux-devtools/src/persistState.ts

@@ -13,7 +13,9 @@ export default function persistState<
   deserializeAction: (action: A) => A = identity
 ): StoreEnhancer {
   if (!sessionId) {
-    return (next) => (...args) => next(...args);
+    return (next) =>
+      (...args) =>
+        next(...args);
   }
 
   function deserialize(
@@ -33,7 +35,8 @@ export default function persistState<
     };
   }
 
-  return (next) => <S, A extends Action<unknown>>(
+  return (next) =>
+    <S, A extends Action<unknown>>(
       reducer: Reducer<S, A>,
       initialState?: PreloadedState<S>
     ) => {

yarn.lock

@@ -19323,7 +19323,16 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"prettier@npm:^2.0.5, prettier@npm:~2.0.5":
+"prettier@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "prettier@npm:2.3.1"
+  bin:
+    prettier: bin-prettier.js
+  checksum: 9b4a695b87ce5f510fc20feec01cce7371f0fa0b92ffe79d543f6be52e2004c532861629de4d7ab1c577e1f649dce3cfccd62cb2ca6526b1da8d9c63eb84bf36
+  languageName: node
+  linkType: hard
+
+"prettier@npm:~2.0.5":
   version: 2.0.5
   resolution: "prettier@npm:2.0.5"
   bin:
@@ -21265,7 +21274,7 @@ fsevents@^1.2.7:
     html-webpack-plugin: ^4.3.0
     jest: ^26.2.2
     lerna: ^3.22.1
-    prettier: ^2.0.5
+    prettier: ^2.3.1
     raw-loader: ^4.0.1
     rimraf: ^3.0.2
     style-loader: ^1.2.1