From 6f15c87d69d924056c79690289c9e858c7f4d79d Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Mon, 21 Dec 2020 08:05:17 -0500 Subject: [PATCH] Misc small things: Updated OVERVIEW, TODO, debug log, and minor formatting changes --- .../react-devtools-shared/src/devtools/store.js | 5 +++-- .../InspectedElementErrorsAndWarningsTree.js | 2 +- packages/react-devtools-shared/src/utils.js | 2 +- packages/react-devtools/OVERVIEW.md | 13 ++++++++++--- 4 files changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index ecaef46344b14..0536954b86ca8 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -1017,8 +1017,10 @@ export default class Store extends EventEmitter<{| case TREE_OPERATION_REMOVE_ROOT: { i += 1; + const id = operations[1]; + if (__DEBUG__) { - debug('Remove all fibers'); + debug(`Remove root ${id}`); } const recursivelyDeleteElements = elementID => { @@ -1032,7 +1034,6 @@ export default class Store extends EventEmitter<{| } }; - const id = operations[1]; const root = ((this._idToElement.get(id): any): Element); recursivelyDeleteElements(id); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js index 1bbec38685e79..d567ba139af1d 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js @@ -36,7 +36,7 @@ export default function InspectedElementErrorsAndWarningsTree({ const {errors, warnings} = inspectedElement; - // TODO Would be nice if there were some way to either: + // TODO (inline errors) Would be nice if there were some way to either: // (1) Temporarily disable the button after click (unstable_useTransition?) or // (2) Immediately reflect the cleared list of warnings/errors. // The current clear button feels a little unresponsive because we wait to poll for new values. diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index d1633c701c9b5..d84d5e67e98b6 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -210,7 +210,7 @@ export function printOperationsArray(operations: Array) { case TREE_OPERATION_REMOVE_ROOT: { i += 1; - logs.push(`Remove all nodes`); + logs.push(`Remove root ${rootID}`); break; } case TREE_OPERATION_REORDER_CHILDREN: { diff --git a/packages/react-devtools/OVERVIEW.md b/packages/react-devtools/OVERVIEW.md index 25f5eeb849d5d..ee73da31c64ab 100644 --- a/packages/react-devtools/OVERVIEW.md +++ b/packages/react-devtools/OVERVIEW.md @@ -141,6 +141,7 @@ While profiling is in progress, we send an extra operation any time a fiber is a For example, updating the base duration for a fiber with an id of 1: ```js [ + 4, // update tree base duration operation 4, // tree base duration operation 1, // fiber id 32, // new tree base duration value @@ -156,18 +157,24 @@ We only send the serialized messages as part of the `inspectElement` event. ```js [ + 5, // update error/warning counts operation 4, // fiber id 0, // number of calls to console.error from that fiber 3, // number of calls to console.warn from that fiber ] ``` -#### Clearing a root +#### Removing a root -Special case of unmounting a fiber. Lets us avoid sending all the fiber ids of this root (reducing bridge traffic) and preserves fiber ids if we immediately remount when e.g. applying a component filter. +Special case of unmounting an entire root (include its decsendants). This specialized message replaces what would otherwise be a series of remove-node operations. It is currently only used in one case: updating component filters. The primary motivation for this is actually to preserve fiber ids for components that are re-added to the tree after the updated filters have been applied. This preserves mappings between the Fiber (id) and things like error and warning logs. -This operation has no additional payload because the root id is already sent in the second entry of the update. +```js +[ + 6, // remove root operation +] +``` +This operation has no additional payload because renderer and root ids are already sent at the beginning of every operations payload. ## Reconstructing the tree