@samitouri / QOS-React / commits / eaefd9052a

Type ReactHostOperationHistoryHook (#7672)

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.

Christopher Chedeau committed Sep 7, 2016 at 20:08 UTC eaefd9052ae41d3318a2add286828a75da362193
6 files changed +94 -98
src/renderers/dom/client/ReactMount.js
+5 -5
@@ -729,11 +729,11 @@ var ReactMount = {
729 if (__DEV__) {
730 var hostNode = ReactDOMComponentTree.getInstanceFromNode(container.firstChild);
731 if (hostNode._debugID !== 0) {
732 - ReactInstrumentation.debugTool.onHostOperation(
733 - hostNode._debugID,
734 - 'mount',
735 - markup.toString()
736 - );
732 + ReactInstrumentation.debugTool.onHostOperation({
733 + instanceID: hostNode._debugID,
734 + type: 'mount',
735 + payload: markup.toString(),
736 + });
737 }
738 }
739 },
src/renderers/dom/client/utils/DOMChildrenOperations.js
+40 -40
@@ -122,11 +122,11 @@ function replaceDelimitedText(openingComment, closingComment, stringText) {
122 }
123
124 if (__DEV__) {
125 - ReactInstrumentation.debugTool.onHostOperation(
126 - ReactDOMComponentTree.getInstanceFromNode(openingComment)._debugID,
127 - 'replace text',
128 - stringText
129 - );
125 + ReactInstrumentation.debugTool.onHostOperation({
126 + instanceID: ReactDOMComponentTree.getInstanceFromNode(openingComment)._debugID,
127 + type: 'replace text',
128 + payload: stringText,
129 + });
130 }
131 }
132
@@ -135,19 +135,19 @@ if (__DEV__) {
135 dangerouslyReplaceNodeWithMarkup = function(oldChild, markup, prevInstance) {
136 Danger.dangerouslyReplaceNodeWithMarkup(oldChild, markup);
137 if (prevInstance._debugID !== 0) {
138 - ReactInstrumentation.debugTool.onHostOperation(
139 - prevInstance._debugID,
140 - 'replace with',
141 - markup.toString()
142 - );
138 + ReactInstrumentation.debugTool.onHostOperation({
139 + instanceID: prevInstance._debugID,
140 + type: 'replace with',
141 + payload: markup.toString(),
142 + });
143 } else {
144 var nextInstance = ReactDOMComponentTree.getInstanceFromNode(markup.node);
145 if (nextInstance._debugID !== 0) {
146 - ReactInstrumentation.debugTool.onHostOperation(
147 - nextInstance._debugID,
148 - 'mount',
149 - markup.toString()
150 - );
146 + ReactInstrumentation.debugTool.onHostOperation({
147 + instanceID: nextInstance._debugID,
148 + type: 'mount',
149 + payload: markup.toString(),
150 + });
151 }
152 }
153 };
@@ -185,11 +185,11 @@ var DOMChildrenOperations = {
185 getNodeAfter(parentNode, update.afterNode)
186 );
187 if (__DEV__) {
188 - ReactInstrumentation.debugTool.onHostOperation(
189 - parentNodeDebugID,
190 - 'insert child',
191 - {toIndex: update.toIndex, content: update.content.toString()}
192 - );
188 + ReactInstrumentation.debugTool.onHostOperation({
189 + instanceID: parentNodeDebugID,
190 + type: 'insert child',
191 + payload: {toIndex: update.toIndex, content: update.content.toString()},
192 + });
193 }
194 break;
195 case 'MOVE_EXISTING':
@@ -199,11 +199,11 @@ var DOMChildrenOperations = {
199 getNodeAfter(parentNode, update.afterNode)
200 );
201 if (__DEV__) {
202 - ReactInstrumentation.debugTool.onHostOperation(
203 - parentNodeDebugID,
204 - 'move child',
205 - {fromIndex: update.fromIndex, toIndex: update.toIndex}
206 - );
202 + ReactInstrumentation.debugTool.onHostOperation({
203 + instanceID: parentNodeDebugID,
204 + type: 'move child',
205 + payload: {fromIndex: update.fromIndex, toIndex: update.toIndex},
206 + });
207 }
208 break;
209 case 'SET_MARKUP':
@@ -212,11 +212,11 @@ var DOMChildrenOperations = {
212 update.content
213 );
214 if (__DEV__) {
215 - ReactInstrumentation.debugTool.onHostOperation(
216 - parentNodeDebugID,
217 - 'replace children',
218 - update.content.toString()
219 - );
215 + ReactInstrumentation.debugTool.onHostOperation({
216 + instanceID: parentNodeDebugID,
217 + type: 'replace children',
218 + payload: update.content.toString(),
219 + });
220 }
221 break;
222 case 'TEXT_CONTENT':
@@ -225,21 +225,21 @@ var DOMChildrenOperations = {
225 update.content
226 );
227 if (__DEV__) {
228 - ReactInstrumentation.debugTool.onHostOperation(
229 - parentNodeDebugID,
230 - 'replace text',
231 - update.content.toString()
232 - );
228 + ReactInstrumentation.debugTool.onHostOperation({
229 + instanceID: parentNodeDebugID,
230 + type: 'replace text',
231 + payload: update.content.toString(),
232 + });
233 }
234 break;
235 case 'REMOVE_NODE':
236 removeChild(parentNode, update.fromNode);
237 if (__DEV__) {
238 - ReactInstrumentation.debugTool.onHostOperation(
239 - parentNodeDebugID,
240 - 'remove child',
241 - {fromIndex: update.fromIndex}
242 - );
238 + ReactInstrumentation.debugTool.onHostOperation({
239 + instanceID: parentNodeDebugID,
240 + type: 'remove child',
241 + payload: {fromIndex: update.fromIndex},
242 + });
243 }
244 break;
245 }
src/renderers/dom/shared/CSSPropertyOperations.js
+5 -5
@@ -193,11 +193,11 @@ var CSSPropertyOperations = {
193 */
194 setValueForStyles: function(node, styles, component) {
195 if (__DEV__) {
196 - ReactInstrumentation.debugTool.onHostOperation(
197 - component._debugID,
198 - 'update styles',
199 - styles
200 - );
196 + ReactInstrumentation.debugTool.onHostOperation({
197 + instanceID: component._debugID,
198 + type: 'update styles',
199 + payload: styles,
200 + });
201 }
202
203 var style = node.style;
src/renderers/dom/shared/DOMPropertyOperations.js
+20 -20
@@ -166,11 +166,11 @@ var DOMPropertyOperations = {
166 if (__DEV__) {
167 var payload = {};
168 payload[name] = value;
169 - ReactInstrumentation.debugTool.onHostOperation(
170 - ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
171 - 'update attribute',
172 - payload
173 - );
169 + ReactInstrumentation.debugTool.onHostOperation({
170 + instanceID: ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
171 + type: 'update attribute',
172 + payload: payload,
173 + });
174 }
175 },
176
@@ -187,11 +187,11 @@ var DOMPropertyOperations = {
187 if (__DEV__) {
188 var payload = {};
189 payload[name] = value;
190 - ReactInstrumentation.debugTool.onHostOperation(
191 - ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
192 - 'update attribute',
193 - payload
194 - );
190 + ReactInstrumentation.debugTool.onHostOperation({
191 + instanceID: ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
192 + type: 'update attribute',
193 + payload: payload,
194 + });
195 }
196 },
197
@@ -204,11 +204,11 @@ var DOMPropertyOperations = {
204 deleteValueForAttribute: function(node, name) {
205 node.removeAttribute(name);
206 if (__DEV__) {
207 - ReactInstrumentation.debugTool.onHostOperation(
208 - ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
209 - 'remove attribute',
210 - name
211 - );
207 + ReactInstrumentation.debugTool.onHostOperation({
208 + instanceID: ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
209 + type: 'remove attribute',
210 + payload: name,
211 + });
212 }
213 },
214
@@ -240,11 +240,11 @@ var DOMPropertyOperations = {
240 }
241
242 if (__DEV__) {
243 - ReactInstrumentation.debugTool.onHostOperation(
244 - ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
245 - 'remove attribute',
246 - name
247 - );
243 + ReactInstrumentation.debugTool.onHostOperation({
244 + instanceID: ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
245 + type: 'remove attribute',
246 + payload: name,
247 + });
248 }
249 },
250
src/renderers/shared/ReactDebugTool.js
+4 -19
@@ -23,9 +23,9 @@ var warning = require('warning');
23
24 import type { ReactElement } from 'ReactElementType';
25 import type { DebugID } from 'ReactInstanceType';
26 +import type { Operation } from 'ReactHostOperationHistoryHook';
27
28 type Hook = any;
28 -type Payload = mixed;
29
30 type TimerType =
31 'ctor' |
@@ -38,21 +38,6 @@ type TimerType =
38 'componentDidUpdate' |
39 'componentDidMount';
40
41 -type HostOperationType =
42 - 'mount' |
43 - 'insert child' |
44 - 'move child' |
45 - 'remove child' |
46 - 'replace children' |
47 - 'replace text' |
48 - 'replace with';
49 -
50 -type Operation = {
51 - instanceID: DebugID,
52 - type: string,
53 - payload: Payload,
54 -};
55 -
41 type Measurement = {
42 timerType: TimerType,
43 instanceID: DebugID,
@@ -378,9 +363,9 @@ var ReactDebugTool = {
363 onEndProcessingChildContext(): void {
364 emitEvent('onEndProcessingChildContext');
365 },
381 - onHostOperation(debugID: DebugID, type: HostOperationType, payload: Payload): void {
382 - checkDebugID(debugID);
383 - emitEvent('onHostOperation', debugID, type, payload);
366 + onHostOperation(operation: Operation) {
367 + checkDebugID(operation.instanceID);
368 + emitEvent('onHostOperation', operation);
369 },
370 onSetState(): void {
371 emitEvent('onSetState');
src/renderers/shared/hooks/ReactHostOperationHistoryHook.js
+20 -9
@@ -7,22 +7,33 @@
7 * of patent rights can be found in the PATENTS file in the same directory.
8 *
9 * @providesModule ReactHostOperationHistoryHook
10 + * @flow
11 */
12
13 'use strict';
14
14 -var history = [];
15 +import type { DebugID } from 'ReactInstanceType';
16 +
17 +export type Operation = {instanceID: DebugID} & (
18 + {type: 'mount', payload: string} |
19 + {type: 'insert child', payload: {toIndex: number, content: string}} |
20 + {type: 'move child', payload: {fromIndex: number, toIndex: number}} |
21 + {type: 'replace children', payload: string} |
22 + {type: 'replace text', payload: string} |
23 + {type: 'replace with', payload: string} |
24 + {type: 'update styles', payload: mixed /* Style Object */} |
25 + {type: 'update attribute', payload: {[name: string]: string}} |
26 + {type: 'remove attribute', payload: string}
27 +);
28 +
29 +var history: Array<Operation> = [];
30
31 var ReactHostOperationHistoryHook = {
17 - onHostOperation(debugID, type, payload) {
18 - history.push({
19 - instanceID: debugID,
20 - type,
21 - payload,
22 - });
32 + onHostOperation(operation: Operation) {
33 + history.push(operation);
34 },
35
25 - clearHistory() {
36 + clearHistory(): void {
37 if (ReactHostOperationHistoryHook._preventClearing) {
38 // Should only be used for tests.
39 return;
@@ -31,7 +42,7 @@ var ReactHostOperationHistoryHook = {
42 history = [];
43 },
44
34 - getHistory() {
45 + getHistory(): Array<Operation> {
46 return history;
47 },
48 };