Skip to content

Commit

Permalink
Type ReactHostOperationHistoryHook (facebook#7672)
Browse files Browse the repository at this point in the history 
In order to properly type an `Operation`, we need to change the call site from having two arguments: one for `type` and one for `payload` into an object that contains both. This isn't a perf regression because we were already constructing this object in the first place and doesn't change the emitted event so shouldn't affect the dev tools.

None of the call sites are actually flow-ified so it isn't technically used but once we will, it'll make sure that we don't send random strings and payload through those very generic methods.
  • Loading branch information
@vjeux
vjeux authored Sep 8, 2016
1 parent 82598ee commit eaefd90
Show file tree
Hide file tree
Showing 6 changed files with 94 additions and 98 deletions.
10 changes: 5 additions & 5 deletions src/renderers/dom/client/ReactMount.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -729,11 +729,11 @@ var ReactMount = {
if (__DEV__) {
var hostNode = ReactDOMComponentTree.getInstanceFromNode(container.firstChild);
if (hostNode._debugID !== 0) {
ReactInstrumentation.debugTool.onHostOperation(
hostNode._debugID,
'mount',
markup.toString()
);
ReactInstrumentation.debugTool.onHostOperation({
instanceID: hostNode._debugID,
type: 'mount',
payload: markup.toString(),
});
}
}
},
Expand Down
80 changes: 40 additions & 40 deletions src/renderers/dom/client/utils/DOMChildrenOperations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,11 +122,11 @@ function replaceDelimitedText(openingComment, closingComment, stringText) {
}

if (__DEV__) {
ReactInstrumentation.debugTool.onHostOperation(
ReactDOMComponentTree.getInstanceFromNode(openingComment)._debugID,
'replace text',
stringText
);
ReactInstrumentation.debugTool.onHostOperation({
instanceID: ReactDOMComponentTree.getInstanceFromNode(openingComment)._debugID,
type: 'replace text',
payload: stringText,
});
}
}

Expand All @@ -135,19 +135,19 @@ if (__DEV__) {
dangerouslyReplaceNodeWithMarkup = function(oldChild, markup, prevInstance) {
Danger.dangerouslyReplaceNodeWithMarkup(oldChild, markup);
if (prevInstance._debugID !== 0) {
ReactInstrumentation.debugTool.onHostOperation(
prevInstance._debugID,
'replace with',
markup.toString()
);
ReactInstrumentation.debugTool.onHostOperation({
instanceID: prevInstance._debugID,
type: 'replace with',
payload: markup.toString(),
});
} else {
var nextInstance = ReactDOMComponentTree.getInstanceFromNode(markup.node);
if (nextInstance._debugID !== 0) {
ReactInstrumentation.debugTool.onHostOperation(
nextInstance._debugID,
'mount',
markup.toString()
);
ReactInstrumentation.debugTool.onHostOperation({
instanceID: nextInstance._debugID,
type: 'mount',
payload: markup.toString(),
});
}
}
};
Expand Down Expand Up @@ -185,11 +185,11 @@ var DOMChildrenOperations = {
getNodeAfter(parentNode, update.afterNode)
);
if (__DEV__) {
ReactInstrumentation.debugTool.onHostOperation(
parentNodeDebugID,
'insert child',
{toIndex: update.toIndex, content: update.content.toString()}
);
ReactInstrumentation.debugTool.onHostOperation({
instanceID: parentNodeDebugID,
type: 'insert child',
payload: {toIndex: update.toIndex, content: update.content.toString()},
});
}
break;
case 'MOVE_EXISTING':
Expand All @@ -199,11 +199,11 @@ var DOMChildrenOperations = {
getNodeAfter(parentNode, update.afterNode)
);
if (__DEV__) {
ReactInstrumentation.debugTool.onHostOperation(
parentNodeDebugID,
'move child',
{fromIndex: update.fromIndex, toIndex: update.toIndex}
);
ReactInstrumentation.debugTool.onHostOperation({
instanceID: parentNodeDebugID,
type: 'move child',
payload: {fromIndex: update.fromIndex, toIndex: update.toIndex},
});
}
break;
case 'SET_MARKUP':
Expand All @@ -212,11 +212,11 @@ var DOMChildrenOperations = {
update.content
);
if (__DEV__) {
ReactInstrumentation.debugTool.onHostOperation(
parentNodeDebugID,
'replace children',
update.content.toString()
);
ReactInstrumentation.debugTool.onHostOperation({
instanceID: parentNodeDebugID,
type: 'replace children',
payload: update.content.toString(),
});
}
break;
case 'TEXT_CONTENT':
Expand All @@ -225,21 +225,21 @@ var DOMChildrenOperations = {
update.content
);
if (__DEV__) {
ReactInstrumentation.debugTool.onHostOperation(
parentNodeDebugID,
'replace text',
update.content.toString()
);
ReactInstrumentation.debugTool.onHostOperation({
instanceID: parentNodeDebugID,
type: 'replace text',
payload: update.content.toString(),
});
}
break;
case 'REMOVE_NODE':
removeChild(parentNode, update.fromNode);
if (__DEV__) {
ReactInstrumentation.debugTool.onHostOperation(
parentNodeDebugID,
'remove child',
{fromIndex: update.fromIndex}
);
ReactInstrumentation.debugTool.onHostOperation({
instanceID: parentNodeDebugID,
type: 'remove child',
payload: {fromIndex: update.fromIndex},
});
}
break;
}
Expand Down
10 changes: 5 additions & 5 deletions src/renderers/dom/shared/CSSPropertyOperations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,11 +193,11 @@ var CSSPropertyOperations = {
*/
setValueForStyles: function(node, styles, component) {
if (__DEV__) {
ReactInstrumentation.debugTool.onHostOperation(
component._debugID,
'update styles',
styles
);
ReactInstrumentation.debugTool.onHostOperation({
instanceID: component._debugID,
type: 'update styles',
payload: styles,
});
}

var style = node.style;
Expand Down
40 changes: 20 additions & 20 deletions src/renderers/dom/shared/DOMPropertyOperations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,11 +166,11 @@ var DOMPropertyOperations = {
if (__DEV__) {
var payload = {};
payload[name] = value;
ReactInstrumentation.debugTool.onHostOperation(
ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
'update attribute',
payload
);
ReactInstrumentation.debugTool.onHostOperation({
instanceID: ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
type: 'update attribute',
payload: payload,
});
}
},

Expand All @@ -187,11 +187,11 @@ var DOMPropertyOperations = {
if (__DEV__) {
var payload = {};
payload[name] = value;
ReactInstrumentation.debugTool.onHostOperation(
ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
'update attribute',
payload
);
ReactInstrumentation.debugTool.onHostOperation({
instanceID: ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
type: 'update attribute',
payload: payload,
});
}
},

Expand All @@ -204,11 +204,11 @@ var DOMPropertyOperations = {
deleteValueForAttribute: function(node, name) {
node.removeAttribute(name);
if (__DEV__) {
ReactInstrumentation.debugTool.onHostOperation(
ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
'remove attribute',
name
);
ReactInstrumentation.debugTool.onHostOperation({
instanceID: ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
type: 'remove attribute',
payload: name,
});
}
},

Expand Down Expand Up @@ -240,11 +240,11 @@ var DOMPropertyOperations = {
}

if (__DEV__) {
ReactInstrumentation.debugTool.onHostOperation(
ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
'remove attribute',
name
);
ReactInstrumentation.debugTool.onHostOperation({
instanceID: ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
type: 'remove attribute',
payload: name,
});
}
},

Expand Down
23 changes: 4 additions & 19 deletions src/renderers/shared/ReactDebugTool.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ var warning = require('warning');

import type { ReactElement } from 'ReactElementType';
import type { DebugID } from 'ReactInstanceType';
import type { Operation } from 'ReactHostOperationHistoryHook';

type Hook = any;
type Payload = mixed;

type TimerType =
'ctor' |
Expand All @@ -38,21 +38,6 @@ type TimerType =
'componentDidUpdate' |
'componentDidMount';

type HostOperationType =
'mount' |
'insert child' |
'move child' |
'remove child' |
'replace children' |
'replace text' |
'replace with';

type Operation = {
instanceID: DebugID,
type: string,
payload: Payload,
};

type Measurement = {
timerType: TimerType,
instanceID: DebugID,
Expand Down Expand Up @@ -378,9 +363,9 @@ var ReactDebugTool = {
onEndProcessingChildContext(): void {
emitEvent('onEndProcessingChildContext');
},
onHostOperation(debugID: DebugID, type: HostOperationType, payload: Payload): void {
checkDebugID(debugID);
emitEvent('onHostOperation', debugID, type, payload);
onHostOperation(operation: Operation) {
checkDebugID(operation.instanceID);
emitEvent('onHostOperation', operation);
},
onSetState(): void {
emitEvent('onSetState');
Expand Down
29 changes: 20 additions & 9 deletions src/renderers/shared/hooks/ReactHostOperationHistoryHook.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,33 @@
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactHostOperationHistoryHook
* @flow
*/

'use strict';

var history = [];
import type { DebugID } from 'ReactInstanceType';

export type Operation = {instanceID: DebugID} & (
{type: 'mount', payload: string} |
{type: 'insert child', payload: {toIndex: number, content: string}} |
{type: 'move child', payload: {fromIndex: number, toIndex: number}} |
{type: 'replace children', payload: string} |
{type: 'replace text', payload: string} |
{type: 'replace with', payload: string} |
{type: 'update styles', payload: mixed /* Style Object */} |
{type: 'update attribute', payload: {[name: string]: string}} |
{type: 'remove attribute', payload: string}
);

var history: Array<Operation> = [];

var ReactHostOperationHistoryHook = {
onHostOperation(debugID, type, payload) {
history.push({
instanceID: debugID,
type,
payload,
});
onHostOperation(operation: Operation) {
history.push(operation);
},

clearHistory() {
clearHistory(): void {
if (ReactHostOperationHistoryHook._preventClearing) {
// Should only be used for tests.
return;
Expand All @@ -31,7 +42,7 @@ var ReactHostOperationHistoryHook = {
history = [];
},

getHistory() {
getHistory(): Array<Operation> {
return history;
},
};
Expand Down

0 comments on commit eaefd90

Please sign in to comment.