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