diff --git a/extension/.babelrc b/extension/.babelrc index 0d42ef44..202d425a 100644 --- a/extension/.babelrc +++ b/extension/.babelrc @@ -3,6 +3,5 @@ "@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript" - ], - "plugins": ["@babel/plugin-proposal-class-properties"] + ] } diff --git a/extension/jest.config.js b/extension/jest.config.js index a56b83cd..b70a7b3e 100644 --- a/extension/jest.config.js +++ b/extension/jest.config.js @@ -2,4 +2,7 @@ module.exports = { setupFilesAfterEnv: ['/test/setup.js'], testPathIgnorePatterns: ['/examples'], testEnvironment: 'jsdom', + moduleNameMapper: { + '\\.css$': '/test/__mocks__/styleMock.ts', + }, }; diff --git a/extension/src/app/middlewares/api.ts b/extension/src/app/middlewares/api.ts index b6dd67c0..ce36b002 100644 --- a/extension/src/app/middlewares/api.ts +++ b/extension/src/app/middlewares/api.ts @@ -355,7 +355,7 @@ function getReducerError() { function togglePersist() { const state = window.store.getState(); - if (state.persistStates) { + if (state.instances.persisted) { Object.keys(state.instances.connections).forEach((id) => { if (connections.tab[id]) return; window.store.dispatch({ type: REMOVE_INSTANCE, id }); @@ -492,7 +492,7 @@ function disconnect( if (p) p.onDisconnect.removeListener(disconnectListener); delete connections[type][id]; if (type === 'tab') { - if (!window.store.getState().persistStates) { + if (!window.store.getState().instances.persisted) { window.store.dispatch({ type: REMOVE_INSTANCE, id }); toMonitors({ type: 'NA', id }); } @@ -522,7 +522,7 @@ function onConnect>(port: chrome.runtime.Port) { if (isMonitored) port.postMessage({ type: 'START' }); const state = window.store.getState(); - if (state.persistStates) { + if (state.instances.persisted) { const instanceId = `${id}/${msg.instanceId}`; const persistedState = state.instances.states[instanceId]; if (!persistedState) return; @@ -585,7 +585,6 @@ window.syncOptions = syncOptions(toAllTabs); // Expose to the options page export default function api() { return (next: Dispatch) => (action: BackgroundAction) => { if (action.type === LIFTED_ACTION) toContentScript(action); - else if (action.type === 'TOGGLE_PERSIST') togglePersist(); return next(action); }; } diff --git a/extension/src/app/middlewares/panelSync.ts b/extension/src/app/middlewares/panelSync.ts index 488708b3..558524c0 100644 --- a/extension/src/app/middlewares/panelSync.ts +++ b/extension/src/app/middlewares/panelSync.ts @@ -6,17 +6,15 @@ import { import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances'; import { Dispatch, MiddlewareAPI } from 'redux'; import { StoreState } from '@redux-devtools/app/lib/reducers'; -import { StoreActionWithTogglePersist } from '../stores/windowStore'; +import { StoreAction } from '@redux-devtools/app/lib/actions'; function panelDispatcher(bgConnection: chrome.runtime.Port) { let autoselected = false; const tabId = chrome.devtools.inspectedWindow.tabId; - return ( - store: MiddlewareAPI, StoreState> - ) => - (next: Dispatch) => - (action: StoreActionWithTogglePersist) => { + return (store: MiddlewareAPI, StoreState>) => + (next: Dispatch) => + (action: StoreAction) => { const result = next(action); if (!autoselected && action.type === UPDATE_STATE && tabId) { autoselected = true; @@ -25,7 +23,7 @@ function panelDispatcher(bgConnection: chrome.runtime.Port) { next({ type: SELECT_INSTANCE, selected: connections[0] }); } } - if (action.type === LIFTED_ACTION || action.type === 'TOGGLE_PERSIST') { + if (action.type === LIFTED_ACTION) { const instances = store.getState().instances; const instanceId = getActiveInstance(instances); const id = instances.options[instanceId].connectionId; diff --git a/extension/src/app/middlewares/windowSync.ts b/extension/src/app/middlewares/windowSync.ts index f8823ba8..fb5cb549 100644 --- a/extension/src/app/middlewares/windowSync.ts +++ b/extension/src/app/middlewares/windowSync.ts @@ -6,10 +6,7 @@ import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances'; import { Dispatch, MiddlewareAPI, Store } from 'redux'; import { BackgroundState } from '../reducers/background'; import { StoreAction } from '@redux-devtools/app/lib/actions'; -import { - WindowStoreAction, - StoreActionWithTogglePersist, -} from '../stores/windowStore'; +import { WindowStoreAction } from '../stores/windowStore'; import { StoreState } from '@redux-devtools/app/lib/reducers'; import { BackgroundAction } from '../stores/backgroundStore'; @@ -17,14 +14,14 @@ const syncStores = (baseStore: Store) => (store: MiddlewareAPI, StoreState>) => (next: Dispatch) => - (action: StoreActionWithTogglePersist) => { + (action: StoreAction) => { if (action.type === UPDATE_STATE) { return next({ ...action, instances: baseStore.getState().instances, }); } - if (action.type === LIFTED_ACTION || action.type === 'TOGGLE_PERSIST') { + if (action.type === LIFTED_ACTION) { const instances = store.getState().instances; const instanceId = getActiveInstance(instances); const id = instances.options[instanceId].connectionId; diff --git a/extension/src/app/reducers/background/index.ts b/extension/src/app/reducers/background/index.ts index d2d607ed..242541d7 100644 --- a/extension/src/app/reducers/background/index.ts +++ b/extension/src/app/reducers/background/index.ts @@ -2,18 +2,15 @@ import { combineReducers, Reducer } from 'redux'; import instances, { InstancesState, } from '@redux-devtools/app/lib/reducers/instances'; -import persistStates from './persistStates'; import { BackgroundAction } from '../../stores/backgroundStore'; export interface BackgroundState { readonly instances: InstancesState; - readonly persistStates: boolean; } const rootReducer: Reducer = combineReducers({ instances, - persistStates, }); export default rootReducer; diff --git a/extension/src/app/reducers/background/persistStates.ts b/extension/src/app/reducers/background/persistStates.ts deleted file mode 100644 index 90b5c5c7..00000000 --- a/extension/src/app/reducers/background/persistStates.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { BackgroundAction } from '../../stores/backgroundStore'; - -export default function persistStates(state = false, action: BackgroundAction) { - if (action.type === 'TOGGLE_PERSIST') return !state; - return state; -} diff --git a/extension/src/app/reducers/panel/index.ts b/extension/src/app/reducers/panel/index.ts index a463a24e..50753130 100644 --- a/extension/src/app/reducers/panel/index.ts +++ b/extension/src/app/reducers/panel/index.ts @@ -1,17 +1,37 @@ import { combineReducers, Reducer } from 'redux'; -import instances from '@redux-devtools/app/lib/reducers/instances'; -import monitor from '@redux-devtools/app/lib/reducers/monitor'; -import notification from '@redux-devtools/app/lib/reducers/notification'; -import reports from '@redux-devtools/app/lib/reducers/reports'; -import section from '@redux-devtools/app/lib/reducers/section'; -import theme from '@redux-devtools/app/lib/reducers/theme'; -import connection from '@redux-devtools/app/lib/reducers/connection'; -import socket from '@redux-devtools/app/lib/reducers/socket'; -import { StoreState } from '@redux-devtools/app/lib/reducers'; -import { StoreActionWithTogglePersist } from '../../stores/windowStore'; +import instances, { + InstancesState, +} from '@redux-devtools/app/lib/reducers/instances'; +import monitor, { + MonitorState, +} from '@redux-devtools/app/lib/reducers/monitor'; +import notification, { + NotificationState, +} from '@redux-devtools/app/lib/reducers/notification'; +import reports, { + ReportsState, +} from '@redux-devtools/app/lib/reducers/reports'; +import section, { + SectionState, +} from '@redux-devtools/app/lib/reducers/section'; +import theme, { ThemeState } from '@redux-devtools/app/lib/reducers/theme'; +import connection, { + ConnectionState, +} from '@redux-devtools/app/lib/reducers/connection'; +import { StoreAction } from '@redux-devtools/app/lib/actions'; -const rootReducer: Reducer = - combineReducers({ +export interface StoreStateWithoutSocket { + readonly section: SectionState; + readonly theme: ThemeState; + readonly connection: ConnectionState; + readonly monitor: MonitorState; + readonly instances: InstancesState; + readonly reports: ReportsState; + readonly notification: NotificationState; +} + +const rootReducer: Reducer = + combineReducers({ instances, monitor, reports, @@ -19,7 +39,6 @@ const rootReducer: Reducer = section, theme, connection, - socket, }); export default rootReducer; diff --git a/extension/src/app/stores/backgroundStore.ts b/extension/src/app/stores/backgroundStore.ts index ace3e77e..4ca94f9c 100644 --- a/extension/src/app/stores/backgroundStore.ts +++ b/extension/src/app/stores/backgroundStore.ts @@ -45,12 +45,6 @@ export type LiftedActionAction = | LiftedActionActionAction | LiftedActionExportAction; -interface TogglePersistAction { - readonly type: 'TOGGLE_PERSIST'; - readonly instanceId: string | number; - readonly id: string | number | undefined; -} - interface ConnectedAction { readonly type: typeof CONNECTED; } @@ -62,7 +56,6 @@ interface DisconnectedAction { export type BackgroundAction = | StoreActionWithoutLiftedAction | LiftedActionAction - | TogglePersistAction | ConnectedAction | DisconnectedAction; diff --git a/extension/src/app/stores/windowStore.ts b/extension/src/app/stores/windowStore.ts index 2499daa5..37dc535e 100644 --- a/extension/src/app/stores/windowStore.ts +++ b/extension/src/app/stores/windowStore.ts @@ -23,19 +23,12 @@ import { BackgroundState } from '../reducers/background'; import { BackgroundAction } from './backgroundStore'; import { EmptyUpdateStateAction, NAAction } from '../middlewares/api'; -export interface TogglePersistAction { - readonly type: 'TOGGLE_PERSIST'; -} - -export type StoreActionWithTogglePersist = StoreAction | TogglePersistAction; - export interface ExpandedUpdateStateAction extends UpdateStateAction { readonly instances: InstancesState; } export type WindowStoreAction = | StoreActionWithoutUpdateState - | TogglePersistAction | ExpandedUpdateStateAction | NAAction | EmptyUpdateStateAction; diff --git a/extension/src/browser/extension/background/contextMenus.ts b/extension/src/browser/extension/background/contextMenus.ts index 070a1a3b..d8a30145 100644 --- a/extension/src/browser/extension/background/contextMenus.ts +++ b/extension/src/browser/extension/background/contextMenus.ts @@ -1,4 +1,4 @@ -import openDevToolsWindow from './openWindow'; +import openDevToolsWindow, { DevToolsPosition } from './openWindow'; export function createMenu() { const menus = [ @@ -33,5 +33,5 @@ export function removeMenu() { } chrome.contextMenus.onClicked.addListener(({ menuItemId }) => { - openDevToolsWindow(menuItemId); + openDevToolsWindow(menuItemId as DevToolsPosition); }); diff --git a/extension/src/browser/extension/devpanel/index.tsx b/extension/src/browser/extension/devpanel/index.tsx index 484e5e38..7847a5e9 100644 --- a/extension/src/browser/extension/devpanel/index.tsx +++ b/extension/src/browser/extension/devpanel/index.tsx @@ -9,8 +9,9 @@ import getPreloadedState from '../background/getPreloadedState'; import '../../views/devpanel.pug'; import { Action, PreloadedState, Store } from 'redux'; import { StoreState } from '@redux-devtools/app/lib/reducers'; +import { StoreAction } from '@redux-devtools/app/lib/actions'; import { PanelMessage } from '../../../app/middlewares/api'; -import { StoreActionWithTogglePersist } from '../../../app/stores/windowStore'; +import { StoreStateWithoutSocket } from '../../../app/reducers/panel'; const position = location.hash; const messageStyle: CSSProperties = { @@ -20,7 +21,7 @@ const messageStyle: CSSProperties = { }; let rendered: boolean | undefined; -let store: Store | undefined; +let store: Store | undefined; let bgConnection: chrome.runtime.Port; let naTimeout: NodeJS.Timeout; let preloadedState: PreloadedState; diff --git a/extension/src/browser/extension/window/index.tsx b/extension/src/browser/extension/window/index.tsx index d583cbbf..f108fbb5 100644 --- a/extension/src/browser/extension/window/index.tsx +++ b/extension/src/browser/extension/window/index.tsx @@ -7,9 +7,9 @@ import { StoreState } from '@redux-devtools/app/lib/reducers'; import App from '../../../app/containers/App'; import configureStore from '../../../app/stores/windowStore'; import getPreloadedState from '../background/getPreloadedState'; +import { MonitorMessage } from '../../../app/middlewares/api'; import '../../views/window.pug'; -import { MonitorMessage } from '../../../app/middlewares/api'; const position = location.hash; let preloadedState: PreloadedState; diff --git a/extension/test/__mocks__/styleMock.ts b/extension/test/__mocks__/styleMock.ts new file mode 100644 index 00000000..ff8b4c56 --- /dev/null +++ b/extension/test/__mocks__/styleMock.ts @@ -0,0 +1 @@ +export default {}; diff --git a/extension/webpack/base.config.js b/extension/webpack/base.config.js index b7151873..0fde60d6 100644 --- a/extension/webpack/base.config.js +++ b/extension/webpack/base.config.js @@ -1,6 +1,7 @@ import path from 'path'; import webpack from 'webpack'; import CopyPlugin from 'copy-webpack-plugin'; +import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; const extpath = path.join(__dirname, '../src/browser/extension/'); const mock = `${extpath}chromeAPIMock`; @@ -31,7 +32,15 @@ const baseConfig = (params) => ({ }, plugins: [ new webpack.DefinePlugin(params.globals), - ...(params.plugins ? params.plugins : []), + ...(params.plugins + ? params.plugins + : [ + new ForkTsCheckerWebpackPlugin({ + typescript: { + configFile: 'tsconfig.json', + }, + }), + ]), ].concat( params.copy ? new CopyPlugin({ @@ -77,7 +86,7 @@ const baseConfig = (params) => ({ ]), { test: /\.css?$/, - use: ['style-loader', 'raw-loader'], + use: ['style-loader', 'css-loader'], }, { test: /\.pug$/, diff --git a/package.json b/package.json index a3bd3672..4a3c2526 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "stylelint-processor-styled-components": "^1.10.0", "ts-jest": "^27.0.5", "ts-node": "^10.2.1", - "typescript": "^4.3.5", + "typescript": "~4.3.5", "url-loader": "^4.1.1", "webpack": "^5.51.1", "webpack-cli": "^4.8.0", @@ -71,5 +71,8 @@ "packages/redux-devtools/examples/counter", "packages/redux-devtools/examples/todomvc", "packages/redux-devtools-slider-monitor/examples/todomvc" - ] + ], + "resolutions": { + "@babel/highlight/chalk": "Methuselah96/chalk#head=v2-without-process" + } } diff --git a/packages/d3-state-visualizer/.babelrc b/packages/d3-state-visualizer/.babelrc index 5259cd24..3313ff9e 100644 --- a/packages/d3-state-visualizer/.babelrc +++ b/packages/d3-state-visualizer/.babelrc @@ -1,4 +1,3 @@ { - "presets": ["@babel/preset-env", "@babel/preset-typescript"], - "plugins": ["@babel/plugin-proposal-class-properties"] + "presets": ["@babel/preset-env", "@babel/preset-typescript"] } diff --git a/packages/d3-state-visualizer/examples/tree/package.json b/packages/d3-state-visualizer/examples/tree/package.json index 0b8d671f..eb842d0e 100644 --- a/packages/d3-state-visualizer/examples/tree/package.json +++ b/packages/d3-state-visualizer/examples/tree/package.json @@ -14,7 +14,7 @@ }, "license": "MIT", "scripts": { - "start": "webpack-dev-server --open" + "start": "webpack serve --open" }, "repository": { "type": "git", diff --git a/packages/d3tooltip/.babelrc b/packages/d3tooltip/.babelrc index 5259cd24..3313ff9e 100644 --- a/packages/d3tooltip/.babelrc +++ b/packages/d3tooltip/.babelrc @@ -1,4 +1,3 @@ { - "presets": ["@babel/preset-env", "@babel/preset-typescript"], - "plugins": ["@babel/plugin-proposal-class-properties"] + "presets": ["@babel/preset-env", "@babel/preset-typescript"] } diff --git a/packages/devui/.babelrc b/packages/devui/.babelrc index 0d42ef44..202d425a 100755 --- a/packages/devui/.babelrc +++ b/packages/devui/.babelrc @@ -3,6 +3,5 @@ "@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript" - ], - "plugins": ["@babel/plugin-proposal-class-properties"] + ] } diff --git a/packages/devui/.storybook/preview.tsx b/packages/devui/.storybook/preview.tsx index 47b89177..a117e8cf 100644 --- a/packages/devui/.storybook/preview.tsx +++ b/packages/devui/.storybook/preview.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Container } from '../src'; import { listSchemes, listThemes } from '../src/utils/theme'; -import '../src/presets'; export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, diff --git a/packages/devui/jest.config.js b/packages/devui/jest.config.js index 0d26c6e5..1db14ea5 100644 --- a/packages/devui/jest.config.js +++ b/packages/devui/jest.config.js @@ -2,4 +2,7 @@ module.exports = { preset: 'ts-jest', setupFilesAfterEnv: ['/tests/setup.ts'], testEnvironment: 'jsdom', + moduleNameMapper: { + '\\.css$': '/tests/__mocks__/styleMock.ts', + }, }; diff --git a/packages/devui/package.json b/packages/devui/package.json index c14d373f..775ca022 100755 --- a/packages/devui/package.json +++ b/packages/devui/package.json @@ -36,11 +36,11 @@ "prepublishOnly": "npm run clean && npm run build" }, "dependencies": { - "@rjsf/core": "^2.5.1", + "@rjsf/core": "^3.1.0", "@types/base16": "^1.0.2", "@types/codemirror": "^5.60.2", "@types/prop-types": "^15.7.4", - "@types/react-select": "^3.1.2", + "@types/react-select": "^4.0.17", "@types/redux-devtools-themes": "^1.0.0", "@types/simple-element-resize-detector": "^1.3.0", "@types/styled-components": "^5.1.13", @@ -49,7 +49,7 @@ "color": "^3.2.1", "prop-types": "^15.7.2", "react-icons": "^4.2.0", - "react-select": "^3.2.0", + "react-select": "^4.3.1", "redux-devtools-themes": "^1.0.0", "simple-element-resize-detector": "^1.3.0", "styled-components": "^5.3.1" diff --git a/packages/devui/src/Editor/Editor.tsx b/packages/devui/src/Editor/Editor.tsx index 5ea7af44..587e184c 100644 --- a/packages/devui/src/Editor/Editor.tsx +++ b/packages/devui/src/Editor/Editor.tsx @@ -6,6 +6,15 @@ import { Base16Theme } from 'base16'; import { defaultStyle, themedStyle } from './styles'; import { Theme } from '../themes/default'; +import 'codemirror/mode/javascript/javascript'; +import 'codemirror/addon/fold/foldgutter'; +import 'codemirror/addon/fold/foldcode'; +import 'codemirror/addon/fold/brace-fold'; + +import '../../fonts/index.css'; +import 'codemirror/lib/codemirror.css'; +import 'codemirror/addon/fold/foldgutter.css'; + const EditorContainer = styled.div( '' as unknown as TemplateStringsArray, ({ theme }: { theme: Theme }) => diff --git a/packages/devui/src/Select/Select.tsx b/packages/devui/src/Select/Select.tsx index 00b6e399..4b59d016 100644 --- a/packages/devui/src/Select/Select.tsx +++ b/packages/devui/src/Select/Select.tsx @@ -1,6 +1,7 @@ import React, { PureComponent, Component, ReactElement } from 'react'; import PropTypes from 'prop-types'; import ReactSelect, { + GroupTypeBase, NamedProps as ReactSelectProps, OptionTypeBase, } from 'react-select'; @@ -8,9 +9,10 @@ import createThemedComponent from '../utils/createThemedComponent'; import { Theme } from '../themes/default'; export interface SelectProps< - Option extends OptionTypeBase = OptionTypeBase, - IsMulti extends boolean = false -> extends Omit, 'theme'> { + Option extends OptionTypeBase, + IsMulti extends boolean = false, + Group extends GroupTypeBase