reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2024-09-21 03:19:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix remounting root for devpanel (#1302)

Browse Source 
* Fix remounting root for devpanel

* Create seven-turkeys-battle.md
This commit is contained in:
Nathan Bierema 2022-12-26 12:37:55 -05:00 committed by GitHub
parent 76c6b2d19a
commit 1aa6c4f7a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/seven-turkeys-battle.md Normal file
View File

@ -0,0 +1,5 @@
---
'remotedev-redux-devtools-extension': patch
---
Fix remounting root for devpanel

29
extension/src/devpanel/index.tsx
View File

@ -1,4 +1,4 @@
import React, { CSSProperties } from 'react';
import React, { CSSProperties, ReactNode } from 'react';
import { createRoot, Root } from 'react-dom/client';
import { Provider } from 'react-redux';
import { Persistor } from 'redux-persist';
@ -20,6 +20,7 @@ const messageStyle: CSSProperties = {
};
let rendered: boolean | undefined;
let currentRoot: Root | undefined;
let store: Store<StoreStateWithoutSocket, StoreAction> | undefined;
let persistor: Persistor | undefined;
let bgConnection: chrome.runtime.Port;
@ -27,11 +28,16 @@ let naTimeout: NodeJS.Timeout;
const isChrome = navigator.userAgent.indexOf('Firefox') === -1;
function renderDevTools(root: Root) {
root.unmount();
function renderNodeAtRoot(node: ReactNode) {
if (currentRoot) currentRoot.unmount();
currentRoot = createRoot(document.getElementById('root')!);
currentRoot.render(node);
}
function renderDevTools() {
clearTimeout(naTimeout);
({ store, persistor } = configureStore(position, bgConnection));
root.render(
renderNodeAtRoot(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App position={position} />
@ -41,7 +47,7 @@ function renderDevTools(root: Root) {
rendered = true;
}
function renderNA(root: Root) {
function renderNA() {
if (rendered === false) return;
rendered = false;
naTimeout = setTimeout(() => {
@ -74,31 +80,28 @@ function renderNA(root: Root) {
);
}
root.unmount();
root.render(message);
renderNodeAtRoot(message);
store = undefined;
});
} else {
root.unmount();
root.render(message);
renderNodeAtRoot(message);
store = undefined;
}
}, 3500);
}
function init(id: number) {
const root = createRoot(document.getElementById('root')!);
renderNA(root);
renderNA();
bgConnection = chrome.runtime.connect({
name: id ? id.toString() : undefined,
});
bgConnection.onMessage.addListener(
<S, A extends Action<unknown>>(message: PanelMessage<S, A>) => {
if (message.type === 'NA') {
if (message.id === id) renderNA(root);
if (message.id === id) renderNA();
else store!.dispatch({ type: REMOVE_INSTANCE, id: message.id });
} else {
if (!rendered) renderDevTools(root);
if (!rendered) renderDevTools();
store!.dispatch(message);
}
}