Added context changes to sidebar; fixed a initial-mount detection bug
This commit is contained in:
parent
5672d686dc
commit
7a72ee5ac0
File diff suppressed because it is too large
Load Diff
|
@ -649,7 +649,7 @@ export function attach(
|
|||
}
|
||||
|
||||
function getChangeDescription(
|
||||
prevFiber: Fiber,
|
||||
prevFiber: Fiber | null,
|
||||
nextFiber: Fiber
|
||||
): ChangeDescription | null {
|
||||
switch (getElementTypeForFiber(nextFiber)) {
|
||||
|
@ -657,12 +657,22 @@ export function attach(
|
|||
case ElementTypeFunction:
|
||||
case ElementTypeMemo:
|
||||
case ElementTypeForwardRef:
|
||||
if (prevFiber === null) {
|
||||
return {
|
||||
context: null,
|
||||
didHooksChange: false,
|
||||
isFirstMount: true,
|
||||
props: null,
|
||||
state: null,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
context: getContextChangedKeys(nextFiber),
|
||||
didHooksChange: didHooksChange(
|
||||
prevFiber.memoizedState,
|
||||
nextFiber.memoizedState
|
||||
),
|
||||
context: getContextChangedKeys(nextFiber),
|
||||
isFirstMount: false,
|
||||
props: getChangedKeys(
|
||||
prevFiber.memoizedProps,
|
||||
nextFiber.memoizedProps
|
||||
|
@ -672,6 +682,7 @@ export function attach(
|
|||
nextFiber.memoizedState
|
||||
),
|
||||
};
|
||||
}
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
@ -1214,14 +1225,13 @@ export function attach(
|
|||
actualDuration
|
||||
);
|
||||
|
||||
if (recordChangeDescriptions && metadata.changeDescriptions) {
|
||||
const changeDescription =
|
||||
alternate === null
|
||||
? null
|
||||
: getChangeDescription(alternate, fiber);
|
||||
if (recordChangeDescriptions) {
|
||||
const changeDescription = getChangeDescription(alternate, fiber);
|
||||
if (changeDescription !== null) {
|
||||
if (metadata.changeDescriptions !== null) {
|
||||
metadata.changeDescriptions.set(id, changeDescription);
|
||||
}
|
||||
}
|
||||
|
||||
updateContextsForFiber(fiber);
|
||||
}
|
||||
|
|
|
@ -116,6 +116,7 @@ export type ReactRenderer = {
|
|||
export type ChangeDescription = {|
|
||||
context: Array<string> | boolean | null,
|
||||
didHooksChange: boolean,
|
||||
isFirstMount: boolean,
|
||||
props: Array<string> | null,
|
||||
state: Array<string> | null,
|
||||
|};
|
||||
|
|
|
@ -104,7 +104,10 @@ function WhatChanged({
|
|||
|
||||
const changeDescription = changeDescriptions.get(fiberID);
|
||||
if (changeDescription == null) {
|
||||
// This indicates that the component mounted during this commit
|
||||
return null;
|
||||
}
|
||||
|
||||
if (changeDescription.isFirstMount) {
|
||||
return (
|
||||
<div className={styles.Content}>
|
||||
<label className={styles.Label}>Why did this render?</label>
|
||||
|
@ -117,6 +120,29 @@ function WhatChanged({
|
|||
|
||||
const changes = [];
|
||||
|
||||
if (changeDescription.context === true) {
|
||||
changes.push(
|
||||
<div key="context" className={styles.WhatChangedItem}>
|
||||
• Context changed
|
||||
</div>
|
||||
);
|
||||
} else if (
|
||||
typeof changeDescription.context === 'object' &&
|
||||
changeDescription.context !== null &&
|
||||
changeDescription.context.length !== 0
|
||||
) {
|
||||
changes.push(
|
||||
<div key="context" className={styles.WhatChangedItem}>
|
||||
• Context changed:
|
||||
{changeDescription.context.map(key => (
|
||||
<span key={key} className={styles.WhatChangedKey}>
|
||||
{key}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (changeDescription.didHooksChange) {
|
||||
changes.push(
|
||||
<div key="hooks" className={styles.WhatChangedItem}>
|
||||
|
@ -124,6 +150,7 @@ function WhatChanged({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
changeDescription.props !== null &&
|
||||
changeDescription.props.length !== 0
|
||||
|
@ -139,6 +166,7 @@ function WhatChanged({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
changeDescription.state !== null &&
|
||||
changeDescription.state.length !== 0
|
||||
|
|
|
@ -35,6 +35,7 @@ export type SnapshotNode = {|
|
|||
export type ChangeDescription = {|
|
||||
context: Array<string> | boolean | null,
|
||||
didHooksChange: boolean,
|
||||
isFirstMount: boolean,
|
||||
props: Array<string> | null,
|
||||
state: Array<string> | null,
|
||||
|};
|
||||
|
|
Loading…
Reference in New Issue