Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #7381 from keyanzhang/rename-hooks

Browse Source 
Rename Devtool to Hook
(cherry picked from commit 328fc75bc9)
This commit is contained in:
Keyan Zhang
2016-08-01 11:42:33 -07:00
committed by Paul O’Shannessy
parent 043c249458
commit 992e11b852
20 changed files with 216 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/isomorphic/classic/element/ReactElementValidator.js
+2 -2
View File
@@ -19,7 +19,7 @@
'use strict';
var ReactCurrentOwner = require('ReactCurrentOwner');
var ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
var ReactComponentTreeHook = require('ReactComponentTreeHook');
var ReactElement = require('ReactElement');
var ReactPropTypeLocations = require('ReactPropTypeLocations');
@@ -104,7 +104,7 @@ function validateExplicitKey(element, parentType) {
'%s%s See https://fb.me/react-warning-keys for more information.%s',
currentComponentErrorInfo,
childOwner,
ReactComponentTreeDevtool.getCurrentStackAddendum(element)
ReactComponentTreeHook.getCurrentStackAddendum(element)
);
}
src/isomorphic/classic/types/checkReactTypeSpec.js
+6 -6
View File
@@ -17,7 +17,7 @@ var ReactPropTypesSecret = require('ReactPropTypesSecret');
var invariant = require('invariant');
var warning = require('warning');
var ReactComponentTreeDevtool;
var ReactComponentTreeHook;
if (
typeof process !== 'undefined' &&
@@ -29,7 +29,7 @@ if (
// https://github.com/facebook/react/issues/7240
// Remove the inline requires when we don't need them anymore:
// https://github.com/facebook/react/pull/7178
ReactComponentTreeDevtool = require('ReactComponentTreeDevtool')
ReactComponentTreeHook = require('ReactComponentTreeHook')
}
var loggedTypeFailures = {};
@@ -88,13 +88,13 @@ function checkReactTypeSpec(typeSpecs, values, location, componentName, element,
var componentStackInfo = '';
if (__DEV__) {
if (!ReactComponentTreeDevtool) {
ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
if (!ReactComponentTreeHook) {
ReactComponentTreeHook = require('ReactComponentTreeHook');
}
if (debugID !== null) {
componentStackInfo = ReactComponentTreeDevtool.getStackAddendumByID(debugID);
componentStackInfo = ReactComponentTreeHook.getStackAddendumByID(debugID);
} else if (element !== null) {
componentStackInfo = ReactComponentTreeDevtool.getCurrentStackAddendum(element);
componentStackInfo = ReactComponentTreeHook.getCurrentStackAddendum(element);
}
}
src/isomorphic/hooks/ReactComponentTreeDevtool.js
+14
View File
@@ -0,0 +1,14 @@
/**
* Copyright 2016-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactComponentTreeDevtool
*/
'use strict';
// TODO remove this proxy when RN/www gets updated
module.exports = require('ReactComponentTreeHook');
src/isomorphic/devtools/ReactComponentTreeDevtool.js → src/isomorphic/hooks/ReactComponentTreeHook.js
+12 -12
View File
@@ -6,7 +6,7 @@
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactComponentTreeDevtool
* @providesModule ReactComponentTreeHook
*/
'use strict';
@@ -57,23 +57,23 @@ function describeComponentFrame(name, source, ownerName) {
}
function describeID(id) {
var name = ReactComponentTreeDevtool.getDisplayName(id);
var element = ReactComponentTreeDevtool.getElement(id);
var ownerID = ReactComponentTreeDevtool.getOwnerID(id);
var name = ReactComponentTreeHook.getDisplayName(id);
var element = ReactComponentTreeHook.getElement(id);
var ownerID = ReactComponentTreeHook.getOwnerID(id);
var ownerName;
if (ownerID) {
ownerName = ReactComponentTreeDevtool.getDisplayName(ownerID);
ownerName = ReactComponentTreeHook.getDisplayName(ownerID);
}
warning(
element,
'ReactComponentTreeDevtool: Missing React element for debugID %s when ' +
'ReactComponentTreeHook: Missing React element for debugID %s when ' +
'building stack',
id
);
return describeComponentFrame(name, element && element._source, ownerName);
}
var ReactComponentTreeDevtool = {
var ReactComponentTreeHook = {
onSetDisplayName(id, displayName) {
updateTree(id, item => item.displayName = displayName);
},
@@ -86,7 +86,7 @@ var ReactComponentTreeDevtool = {
var nextChild = tree[nextChildID];
invariant(
nextChild,
'Expected devtool events to fire for the child ' +
'Expected hook events to fire for the child ' +
'before its parent includes it in onSetChildren().'
);
invariant(
@@ -161,7 +161,7 @@ var ReactComponentTreeDevtool = {
},
purgeUnmountedComponents() {
if (ReactComponentTreeDevtool._preventPurging) {
if (ReactComponentTreeHook._preventPurging) {
// Should only be used for testing.
return;
}
@@ -195,7 +195,7 @@ var ReactComponentTreeDevtool = {
var currentOwner = ReactCurrentOwner.current;
var id = currentOwner && currentOwner._debugID;
info += ReactComponentTreeDevtool.getStackAddendumByID(id);
info += ReactComponentTreeHook.getStackAddendumByID(id);
return info;
},
@@ -203,7 +203,7 @@ var ReactComponentTreeDevtool = {
var info = '';
while (id) {
info += describeID(id);
id = ReactComponentTreeDevtool.getParentID(id);
id = ReactComponentTreeHook.getParentID(id);
}
return info;
},
@@ -259,4 +259,4 @@ var ReactComponentTreeDevtool = {
},
};
module.exports = ReactComponentTreeDevtool;
module.exports = ReactComponentTreeHook;
src/renderers/dom/client/ReactMount.js
+1 -1
View File
@@ -302,7 +302,7 @@ var ReactMount = {
},
/**
* Render a new component into the DOM. Hooked by devtools!
* Render a new component into the DOM. Hooked by hooks!
*
* @param {ReactElement} nextElement element to render
* @param {DOMElement} container container to render into
src/renderers/dom/shared/ReactDOMDebugTool.js
+11 -11
View File
@@ -11,8 +11,8 @@
'use strict';
var ReactDOMNullInputValuePropDevtool = require('ReactDOMNullInputValuePropDevtool');
var ReactDOMUnknownPropertyDevtool = require('ReactDOMUnknownPropertyDevtool');
var ReactDOMNullInputValuePropHook = require('ReactDOMNullInputValuePropHook');
var ReactDOMUnknownPropertyHook = require('ReactDOMUnknownPropertyHook');
var ReactDebugTool = require('ReactDebugTool');
var warning = require('warning');
@@ -29,7 +29,7 @@ function emitEvent(handlerFunctionName, arg1, arg2, arg3, arg4, arg5) {
} catch (e) {
warning(
handlerDoesThrowForEvent[handlerFunctionName],
'exception thrown by devtool while handling %s: %s',
'exception thrown by hook while handling %s: %s',
handlerFunctionName,
e + '\n' + e.stack
);
@@ -39,14 +39,14 @@ function emitEvent(handlerFunctionName, arg1, arg2, arg3, arg4, arg5) {
}
var ReactDOMDebugTool = {
addDevtool(devtool) {
ReactDebugTool.addDevtool(devtool);
eventHandlers.push(devtool);
addHook(hook) {
ReactDebugTool.addHook(hook);
eventHandlers.push(hook);
},
removeDevtool(devtool) {
ReactDebugTool.removeDevtool(devtool);
removeHook(hook) {
ReactDebugTool.removeHook(hook);
for (var i = 0; i < eventHandlers.length; i++) {
if (eventHandlers[i] === devtool) {
if (eventHandlers[i] === hook) {
eventHandlers.splice(i, 1);
i--;
}
@@ -66,7 +66,7 @@ var ReactDOMDebugTool = {
},
};
ReactDOMDebugTool.addDevtool(ReactDOMUnknownPropertyDevtool);
ReactDOMDebugTool.addDevtool(ReactDOMNullInputValuePropDevtool);
ReactDOMDebugTool.addHook(ReactDOMUnknownPropertyHook);
ReactDOMDebugTool.addHook(ReactDOMNullInputValuePropHook);
module.exports = ReactDOMDebugTool;
src/renderers/dom/shared/__tests__/ReactDOMDebugTool-test.js
+10 -10
View File
@@ -19,13 +19,13 @@ describe('ReactDOMDebugTool', function() {
ReactDOMDebugTool = require('ReactDOMDebugTool');
});
it('should add and remove devtools', () => {
it('should add and remove hooks', () => {
var handler1 = jasmine.createSpy('spy');
var handler2 = jasmine.createSpy('spy');
var devtool1 = {onTestEvent: handler1};
var devtool2 = {onTestEvent: handler2};
var hook1 = {onTestEvent: handler1};
var hook2 = {onTestEvent: handler2};
ReactDOMDebugTool.addDevtool(devtool1);
ReactDOMDebugTool.addHook(hook1);
ReactDOMDebugTool.onTestEvent();
expect(handler1.calls.count()).toBe(1);
expect(handler2.calls.count()).toBe(0);
@@ -34,7 +34,7 @@ describe('ReactDOMDebugTool', function() {
expect(handler1.calls.count()).toBe(2);
expect(handler2.calls.count()).toBe(0);
ReactDOMDebugTool.addDevtool(devtool2);
ReactDOMDebugTool.addHook(hook2);
ReactDOMDebugTool.onTestEvent();
expect(handler1.calls.count()).toBe(3);
expect(handler2.calls.count()).toBe(1);
@@ -43,20 +43,20 @@ describe('ReactDOMDebugTool', function() {
expect(handler1.calls.count()).toBe(4);
expect(handler2.calls.count()).toBe(2);
ReactDOMDebugTool.removeDevtool(devtool1);
ReactDOMDebugTool.removeHook(hook1);
ReactDOMDebugTool.onTestEvent();
expect(handler1.calls.count()).toBe(4);
expect(handler2.calls.count()).toBe(3);
ReactDOMDebugTool.removeDevtool(devtool2);
ReactDOMDebugTool.removeHook(hook2);
ReactDOMDebugTool.onTestEvent();
expect(handler1.calls.count()).toBe(4);
expect(handler2.calls.count()).toBe(3);
});
it('warns once when an error is thrown in devtool', () => {
it('warns once when an error is thrown in hook', () => {
spyOn(console, 'error');
ReactDOMDebugTool.addDevtool({
ReactDOMDebugTool.addHook({
onTestEvent() {
throw new Error('Hi.');
},
@@ -65,7 +65,7 @@ describe('ReactDOMDebugTool', function() {
ReactDOMDebugTool.onTestEvent();
expect(console.error.calls.count()).toBe(1);
expect(console.error.calls.argsFor(0)[0]).toContain(
'exception thrown by devtool while handling ' +
'exception thrown by hook while handling ' +
'onTestEvent: Error: Hi.'
);
src/renderers/dom/shared/devtools/ReactDOMNullInputValuePropDevtool.js → src/renderers/dom/shared/hooks/ReactDOMNullInputValuePropHook.js
+5 -5
View File
@@ -6,12 +6,12 @@
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactDOMNullInputValuePropDevtool
* @providesModule ReactDOMNullInputValuePropHook
*/
'use strict';
var ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
var ReactComponentTreeHook = require('ReactComponentTreeHook');
var warning = require('warning');
@@ -31,14 +31,14 @@ function handleElement(debugID, element) {
'Consider using the empty string to clear the component or `undefined` ' +
'for uncontrolled components.%s',
element.type,
ReactComponentTreeDevtool.getStackAddendumByID(debugID)
ReactComponentTreeHook.getStackAddendumByID(debugID)
);
didWarnValueNull = true;
}
}
var ReactDOMUnknownPropertyDevtool = {
var ReactDOMNullInputValuePropHook = {
onBeforeMountComponent(debugID, element) {
handleElement(debugID, element);
},
@@ -47,4 +47,4 @@ var ReactDOMUnknownPropertyDevtool = {
},
};
module.exports = ReactDOMUnknownPropertyDevtool;
module.exports = ReactDOMNullInputValuePropHook;
src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js → src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js
+8 -8
View File
@@ -6,14 +6,14 @@
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactDOMUnknownPropertyDevtool
* @providesModule ReactDOMUnknownPropertyHook
*/
'use strict';
var DOMProperty = require('DOMProperty');
var EventPluginRegistry = require('EventPluginRegistry');
var ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
var ReactComponentTreeHook = require('ReactComponentTreeHook');
var warning = require('warning');
@@ -73,7 +73,7 @@ if (__DEV__) {
'Unknown DOM property %s. Did you mean %s?%s',
name,
standardName,
ReactComponentTreeDevtool.getStackAddendumByID(debugID)
ReactComponentTreeHook.getStackAddendumByID(debugID)
);
return true;
} else if (registrationName != null) {
@@ -82,7 +82,7 @@ if (__DEV__) {
'Unknown event handler property %s. Did you mean `%s`?%s',
name,
registrationName,
ReactComponentTreeDevtool.getStackAddendumByID(debugID)
ReactComponentTreeHook.getStackAddendumByID(debugID)
);
return true;
} else {
@@ -115,7 +115,7 @@ var warnUnknownProperties = function(debugID, element) {
'For details, see https://fb.me/react-unknown-prop%s',
unknownPropString,
element.type,
ReactComponentTreeDevtool.getStackAddendumByID(debugID)
ReactComponentTreeHook.getStackAddendumByID(debugID)
);
} else if (unknownProps.length > 1) {
warning(
@@ -124,7 +124,7 @@ var warnUnknownProperties = function(debugID, element) {
'For details, see https://fb.me/react-unknown-prop%s',
unknownPropString,
element.type,
ReactComponentTreeDevtool.getStackAddendumByID(debugID)
ReactComponentTreeHook.getStackAddendumByID(debugID)
);
}
};
@@ -139,7 +139,7 @@ function handleElement(debugID, element) {
warnUnknownProperties(debugID, element);
}
var ReactDOMUnknownPropertyDevtool = {
var ReactDOMUnknownPropertyHook = {
onBeforeMountComponent(debugID, element) {
handleElement(debugID, element);
},
@@ -148,4 +148,4 @@ var ReactDOMUnknownPropertyDevtool = {
},
};
module.exports = ReactDOMUnknownPropertyDevtool;
module.exports = ReactDOMUnknownPropertyHook;
src/renderers/shared/ReactDebugTool.js
+29 -25
View File
@@ -11,10 +11,10 @@
'use strict';
var ReactInvalidSetStateWarningDevTool = require('ReactInvalidSetStateWarningDevTool');
var ReactHostOperationHistoryDevtool = require('ReactHostOperationHistoryDevtool');
var ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
var ReactChildrenMutationWarningDevtool = require('ReactChildrenMutationWarningDevtool');
var ReactInvalidSetStateWarningHook = require('ReactInvalidSetStateWarningHook');
var ReactHostOperationHistoryHook = require('ReactHostOperationHistoryHook');
var ReactComponentTreeHook = require('ReactComponentTreeHook');
var ReactChildrenMutationWarningHook = require('ReactChildrenMutationWarningHook');
var ExecutionEnvironment = require('ExecutionEnvironment');
var performanceNow = require('performanceNow');
@@ -32,7 +32,7 @@ function emitEvent(handlerFunctionName, arg1, arg2, arg3, arg4, arg5) {
} catch (e) {
warning(
handlerDoesThrowForEvent[handlerFunctionName],
'exception thrown by devtool while handling %s: %s',
'exception thrown by hook while handling %s: %s',
handlerFunctionName,
e + '\n' + e.stack
);
@@ -55,21 +55,21 @@ var currentTimerType = null;
var lifeCycleTimerHasWarned = false;
function clearHistory() {
ReactComponentTreeDevtool.purgeUnmountedComponents();
ReactHostOperationHistoryDevtool.clearHistory();
ReactComponentTreeHook.purgeUnmountedComponents();
ReactHostOperationHistoryHook.clearHistory();
}
function getTreeSnapshot(registeredIDs) {
return registeredIDs.reduce((tree, id) => {
var ownerID = ReactComponentTreeDevtool.getOwnerID(id);
var parentID = ReactComponentTreeDevtool.getParentID(id);
var ownerID = ReactComponentTreeHook.getOwnerID(id);
var parentID = ReactComponentTreeHook.getParentID(id);
tree[id] = {
displayName: ReactComponentTreeDevtool.getDisplayName(id),
text: ReactComponentTreeDevtool.getText(id),
updateCount: ReactComponentTreeDevtool.getUpdateCount(id),
childIDs: ReactComponentTreeDevtool.getChildIDs(id),
displayName: ReactComponentTreeHook.getDisplayName(id),
text: ReactComponentTreeHook.getText(id),
updateCount: ReactComponentTreeHook.getUpdateCount(id),
childIDs: ReactComponentTreeHook.getChildIDs(id),
// Text nodes don't have owners but this is close enough.
ownerID: ownerID || ReactComponentTreeDevtool.getOwnerID(parentID),
ownerID: ownerID || ReactComponentTreeHook.getOwnerID(parentID),
parentID,
};
return tree;
@@ -79,7 +79,7 @@ function getTreeSnapshot(registeredIDs) {
function resetMeasurements() {
var previousStartTime = currentFlushStartTime;
var previousMeasurements = currentFlushMeasurements || [];
var previousOperations = ReactHostOperationHistoryDevtool.getHistory();
var previousOperations = ReactHostOperationHistoryHook.getHistory();
if (currentFlushNesting === 0) {
currentFlushStartTime = null;
@@ -89,7 +89,7 @@ function resetMeasurements() {
}
if (previousMeasurements.length || previousOperations.length) {
var registeredIDs = ReactComponentTreeDevtool.getRegisteredIDs();
var registeredIDs = ReactComponentTreeHook.getRegisteredIDs();
flushHistory.push({
duration: performanceNow() - previousStartTime,
measurements: previousMeasurements || [],
@@ -182,12 +182,12 @@ function resumeCurrentLifeCycleTimer() {
}
var ReactDebugTool = {
addDevtool(devtool) {
eventHandlers.push(devtool);
addHook(hook) {
eventHandlers.push(hook);
},
removeDevtool(devtool) {
removeHook(hook) {
for (var i = 0; i < eventHandlers.length; i++) {
if (eventHandlers[i] === devtool) {
if (eventHandlers[i] === hook) {
eventHandlers.splice(i, 1);
i--;
}
@@ -204,7 +204,7 @@ var ReactDebugTool = {
isProfiling = true;
flushHistory.length = 0;
resetMeasurements();
ReactDebugTool.addDevtool(ReactHostOperationHistoryDevtool);
ReactDebugTool.addHook(ReactHostOperationHistoryHook);
},
endProfiling() {
if (!isProfiling) {
@@ -213,7 +213,7 @@ var ReactDebugTool = {
isProfiling = false;
resetMeasurements();
ReactDebugTool.removeDevtool(ReactHostOperationHistoryDevtool);
ReactDebugTool.removeHook(ReactHostOperationHistoryHook);
},
getFlushHistory() {
return flushHistory;
@@ -325,9 +325,13 @@ var ReactDebugTool = {
},
};
ReactDebugTool.addDevtool(ReactInvalidSetStateWarningDevTool);
ReactDebugTool.addDevtool(ReactComponentTreeDevtool);
ReactDebugTool.addDevtool(ReactChildrenMutationWarningDevtool);
// TODO remove these when RN/www gets updated
ReactDebugTool.addDevtool = ReactDebugTool.addHook;
ReactDebugTool.removeDevtool = ReactDebugTool.removeHook;
ReactDebugTool.addHook(ReactInvalidSetStateWarningHook);
ReactDebugTool.addHook(ReactComponentTreeHook);
ReactDebugTool.addHook(ReactChildrenMutationWarningHook);
var url = (ExecutionEnvironment.canUseDOM && window.location.href) || '';
if ((/[?&]react_perf\b/).test(url)) {
ReactDebugTool.beginProfiling();
src/renderers/shared/__tests__/ReactDebugTool-test.js
+10 -10
View File
@@ -19,13 +19,13 @@ describe('ReactDebugTool', function() {
ReactDebugTool = require('ReactDebugTool');
});
it('should add and remove devtools', () => {
it('should add and remove hooks', () => {
var handler1 = jasmine.createSpy('spy');
var handler2 = jasmine.createSpy('spy');
var devtool1 = {onTestEvent: handler1};
var devtool2 = {onTestEvent: handler2};
var hook1 = {onTestEvent: handler1};
var hook2 = {onTestEvent: handler2};
ReactDebugTool.addDevtool(devtool1);
ReactDebugTool.addHook(hook1);
ReactDebugTool.onTestEvent();
expect(handler1.calls.count()).toBe(1);
expect(handler2.calls.count()).toBe(0);
@@ -34,7 +34,7 @@ describe('ReactDebugTool', function() {
expect(handler1.calls.count()).toBe(2);
expect(handler2.calls.count()).toBe(0);
ReactDebugTool.addDevtool(devtool2);
ReactDebugTool.addHook(hook2);
ReactDebugTool.onTestEvent();
expect(handler1.calls.count()).toBe(3);
expect(handler2.calls.count()).toBe(1);
@@ -43,20 +43,20 @@ describe('ReactDebugTool', function() {
expect(handler1.calls.count()).toBe(4);
expect(handler2.calls.count()).toBe(2);
ReactDebugTool.removeDevtool(devtool1);
ReactDebugTool.removeHook(hook1);
ReactDebugTool.onTestEvent();
expect(handler1.calls.count()).toBe(4);
expect(handler2.calls.count()).toBe(3);
ReactDebugTool.removeDevtool(devtool2);
ReactDebugTool.removeHook(hook2);
ReactDebugTool.onTestEvent();
expect(handler1.calls.count()).toBe(4);
expect(handler2.calls.count()).toBe(3);
});
it('warns once when an error is thrown in devtool', () => {
it('warns once when an error is thrown in hook', () => {
spyOn(console, 'error');
ReactDebugTool.addDevtool({
ReactDebugTool.addHook({
onTestEvent() {
throw new Error('Hi.');
},
@@ -65,7 +65,7 @@ describe('ReactDebugTool', function() {
ReactDebugTool.onTestEvent();
expect(console.error.calls.count()).toBe(1);
expect(console.error.calls.argsFor(0)[0]).toContain(
'exception thrown by devtool while handling ' +
'exception thrown by hook while handling ' +
'onTestEvent: Error: Hi.'
);
src/renderers/shared/devtools/ReactChildrenMutationWarningDevtool.js → src/renderers/shared/hooks/ReactChildrenMutationWarningHook.js
+5 -5
View File
@@ -6,12 +6,12 @@
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactChildrenMutationWarningDevtool
* @providesModule ReactChildrenMutationWarningHook
*/
'use strict';
var ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
var ReactComponentTreeHook = require('ReactComponentTreeHook');
var warning = require('warning');
@@ -42,11 +42,11 @@ function handleElement(debugID, element) {
warning(
Array.isArray(element._shadowChildren) && !isMutated,
'Component\'s children should not be mutated.%s',
ReactComponentTreeDevtool.getStackAddendumByID(debugID),
ReactComponentTreeHook.getStackAddendumByID(debugID),
);
}
var ReactDOMUnknownPropertyDevtool = {
var ReactDOMUnknownPropertyHook = {
onBeforeMountComponent(debugID, element) {
elements[debugID] = element;
},
@@ -63,4 +63,4 @@ var ReactDOMUnknownPropertyDevtool = {
},
};
module.exports = ReactDOMUnknownPropertyDevtool;
module.exports = ReactDOMUnknownPropertyHook;
src/renderers/shared/devtools/ReactHostOperationHistoryDevtool.js → src/renderers/shared/hooks/ReactHostOperationHistoryHook.js
+4 -4
View File
@@ -6,14 +6,14 @@
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactHostOperationHistoryDevtool
* @providesModule ReactHostOperationHistoryHook
*/
'use strict';
var history = [];
var ReactHostOperationHistoryDevtool = {
var ReactHostOperationHistoryHook = {
onHostOperation(debugID, type, payload) {
history.push({
instanceID: debugID,
@@ -23,7 +23,7 @@ var ReactHostOperationHistoryDevtool = {
},
clearHistory() {
if (ReactHostOperationHistoryDevtool._preventClearing) {
if (ReactHostOperationHistoryHook._preventClearing) {
// Should only be used for tests.
return;
}
@@ -36,4 +36,4 @@ var ReactHostOperationHistoryDevtool = {
},
};
module.exports = ReactHostOperationHistoryDevtool;
module.exports = ReactHostOperationHistoryHook;
src/renderers/shared/devtools/ReactInvalidSetStateWarningDevTool.js → src/renderers/shared/hooks/ReactInvalidSetStateWarningHook.js
+3 -3
View File
@@ -6,7 +6,7 @@
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactInvalidSetStateWarningDevTool
* @providesModule ReactInvalidSetStateWarningHook
*/
'use strict';
@@ -24,7 +24,7 @@ if (__DEV__) {
};
}
var ReactInvalidSetStateWarningDevTool = {
var ReactInvalidSetStateWarningHook = {
onBeginProcessingChildContext() {
processingChildContext = true;
},
@@ -36,4 +36,4 @@ var ReactInvalidSetStateWarningDevTool = {
},
};
module.exports = ReactInvalidSetStateWarningDevTool;
module.exports = ReactInvalidSetStateWarningHook;
src/renderers/shared/devtools/__tests__/ReactComponentTreeDevtool-test.js → src/renderers/shared/hooks/__tests__/ReactComponentTreeHook-test.js
+22 -22
View File
@@ -11,12 +11,12 @@
'use strict';
describe('ReactComponentTreeDevtool', () => {
describe('ReactComponentTreeHook', () => {
var React;
var ReactDOM;
var ReactDOMServer;
var ReactInstanceMap;
var ReactComponentTreeDevtool;
var ReactComponentTreeHook;
var ReactComponentTreeTestUtils;
beforeEach(() => {
@@ -26,7 +26,7 @@ describe('ReactComponentTreeDevtool', () => {
ReactDOM = require('ReactDOM');
ReactDOMServer = require('ReactDOMServer');
ReactInstanceMap = require('ReactInstanceMap');
ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
ReactComponentTreeHook = require('ReactComponentTreeHook');
ReactComponentTreeTestUtils = require('ReactComponentTreeTestUtils');
});
@@ -68,7 +68,7 @@ describe('ReactComponentTreeDevtool', () => {
// Purging should have no effect
// on the tree we expect to see.
ReactComponentTreeDevtool.purgeUnmountedComponents();
ReactComponentTreeHook.purgeUnmountedComponents();
expectWrapperTreeToEqual(expectedTree);
});
@@ -87,16 +87,16 @@ describe('ReactComponentTreeDevtool', () => {
ReactDOMServer.renderToString(<Wrapper />);
expectWrapperTreeToEqual(null);
// To test it, we tell the devtool to ignore next purge
// To test it, we tell the hook to ignore next purge
// so the cleanup request by ReactDebugTool is ignored.
// This lets us make assertions on the actual tree.
ReactComponentTreeDevtool._preventPurging = true;
ReactComponentTreeHook._preventPurging = true;
ReactDOMServer.renderToString(<Wrapper />);
ReactComponentTreeDevtool._preventPurging = false;
ReactComponentTreeHook._preventPurging = false;
expectWrapperTreeToEqual(expectedTree);
// Purge manually since we skipped the automatic purge.
ReactComponentTreeDevtool.purgeUnmountedComponents();
ReactComponentTreeHook.purgeUnmountedComponents();
expectWrapperTreeToEqual(null);
});
}
@@ -1686,25 +1686,25 @@ describe('ReactComponentTreeDevtool', () => {
var node = document.createElement('div');
ReactDOM.render(<div className="a" />, node);
var divID = ReactComponentTreeDevtool.getRootIDs()[0];
expect(ReactComponentTreeDevtool.getUpdateCount(divID)).toEqual(0);
var divID = ReactComponentTreeHook.getRootIDs()[0];
expect(ReactComponentTreeHook.getUpdateCount(divID)).toEqual(0);
ReactDOM.render(<span className="a" />, node);
var spanID = ReactComponentTreeDevtool.getRootIDs()[0];
expect(ReactComponentTreeDevtool.getUpdateCount(divID)).toEqual(0);
expect(ReactComponentTreeDevtool.getUpdateCount(spanID)).toEqual(0);
var spanID = ReactComponentTreeHook.getRootIDs()[0];
expect(ReactComponentTreeHook.getUpdateCount(divID)).toEqual(0);
expect(ReactComponentTreeHook.getUpdateCount(spanID)).toEqual(0);
ReactDOM.render(<span className="b" />, node);
expect(ReactComponentTreeDevtool.getUpdateCount(divID)).toEqual(0);
expect(ReactComponentTreeDevtool.getUpdateCount(spanID)).toEqual(1);
expect(ReactComponentTreeHook.getUpdateCount(divID)).toEqual(0);
expect(ReactComponentTreeHook.getUpdateCount(spanID)).toEqual(1);
ReactDOM.render(<span className="c" />, node);
expect(ReactComponentTreeDevtool.getUpdateCount(divID)).toEqual(0);
expect(ReactComponentTreeDevtool.getUpdateCount(spanID)).toEqual(2);
expect(ReactComponentTreeHook.getUpdateCount(divID)).toEqual(0);
expect(ReactComponentTreeHook.getUpdateCount(spanID)).toEqual(2);
ReactDOM.unmountComponentAtNode(node);
expect(ReactComponentTreeDevtool.getUpdateCount(divID)).toEqual(0);
expect(ReactComponentTreeDevtool.getUpdateCount(spanID)).toEqual(0);
expect(ReactComponentTreeHook.getUpdateCount(divID)).toEqual(0);
expect(ReactComponentTreeHook.getUpdateCount(spanID)).toEqual(0);
});
it('does not report top-level wrapper as a root', () => {
@@ -1724,7 +1724,7 @@ describe('ReactComponentTreeDevtool', () => {
describe('stack addenda', () => {
it('gets created', () => {
function getAddendum(element) {
var addendum = ReactComponentTreeDevtool.getCurrentStackAddendum(element);
var addendum = ReactComponentTreeHook.getCurrentStackAddendum(element);
return addendum.replace(/\(at .+?:\d+\)/g, '(at **)');
}
@@ -1798,7 +1798,7 @@ describe('ReactComponentTreeDevtool', () => {
it('can be retrieved by ID', () => {
function getAddendum(id) {
var addendum = ReactComponentTreeDevtool.getStackAddendumByID(id);
var addendum = ReactComponentTreeHook.getStackAddendumByID(id);
return addendum.replace(/\(at .+?:\d+\)/g, '(at **)');
}
@@ -1817,7 +1817,7 @@ describe('ReactComponentTreeDevtool', () => {
getAddendum(-17);
expect(console.error.calls.count()).toBe(1);
expect(console.error.calls.argsFor(0)[0]).toBe(
'Warning: ReactComponentTreeDevtool: Missing React element for ' +
'Warning: ReactComponentTreeHook: Missing React element for ' +
'debugID -17 when building stack'
);
});
src/renderers/shared/devtools/__tests__/ReactComponentTreeDevtool-test.native.js → src/renderers/shared/hooks/__tests__/ReactComponentTreeHook-test.native.js
+15 -15
View File
@@ -11,11 +11,11 @@
'use strict';
describe('ReactComponentTreeDevtool', () => {
describe('ReactComponentTreeHook', () => {
var React;
var ReactNative;
var ReactInstanceMap;
var ReactComponentTreeDevtool;
var ReactComponentTreeHook;
var ReactComponentTreeTestUtils;
var createReactNativeComponentClass;
var View;
@@ -28,7 +28,7 @@ describe('ReactComponentTreeDevtool', () => {
React = require('React');
ReactNative = require('ReactNative');
ReactInstanceMap = require('ReactInstanceMap');
ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
ReactComponentTreeHook = require('ReactComponentTreeHook');
ReactComponentTreeTestUtils = require('ReactComponentTreeTestUtils');
View = require('View');
createReactNativeComponentClass = require('createReactNativeComponentClass');
@@ -92,7 +92,7 @@ describe('ReactComponentTreeDevtool', () => {
// Purging should have no effect
// on the tree we expect to see.
ReactComponentTreeDevtool.purgeUnmountedComponents();
ReactComponentTreeHook.purgeUnmountedComponents();
expectWrapperTreeToEqual(expectedTree);
});
@@ -1658,25 +1658,25 @@ describe('ReactComponentTreeDevtool', () => {
it('reports update counts', () => {
ReactNative.render(<View />, 1);
var viewID = ReactComponentTreeDevtool.getRootIDs()[0];
expect(ReactComponentTreeDevtool.getUpdateCount(viewID)).toEqual(0);
var viewID = ReactComponentTreeHook.getRootIDs()[0];
expect(ReactComponentTreeHook.getUpdateCount(viewID)).toEqual(0);
ReactNative.render(<Image />, 1);
var imageID = ReactComponentTreeDevtool.getRootIDs()[0];
expect(ReactComponentTreeDevtool.getUpdateCount(viewID)).toEqual(0);
expect(ReactComponentTreeDevtool.getUpdateCount(imageID)).toEqual(0);
var imageID = ReactComponentTreeHook.getRootIDs()[0];
expect(ReactComponentTreeHook.getUpdateCount(viewID)).toEqual(0);
expect(ReactComponentTreeHook.getUpdateCount(imageID)).toEqual(0);
ReactNative.render(<Image />, 1);
expect(ReactComponentTreeDevtool.getUpdateCount(viewID)).toEqual(0);
expect(ReactComponentTreeDevtool.getUpdateCount(imageID)).toEqual(1);
expect(ReactComponentTreeHook.getUpdateCount(viewID)).toEqual(0);
expect(ReactComponentTreeHook.getUpdateCount(imageID)).toEqual(1);
ReactNative.render(<Image />, 1);
expect(ReactComponentTreeDevtool.getUpdateCount(viewID)).toEqual(0);
expect(ReactComponentTreeDevtool.getUpdateCount(imageID)).toEqual(2);
expect(ReactComponentTreeHook.getUpdateCount(viewID)).toEqual(0);
expect(ReactComponentTreeHook.getUpdateCount(imageID)).toEqual(2);
ReactNative.unmountComponentAtNode(1);
expect(ReactComponentTreeDevtool.getUpdateCount(viewID)).toEqual(0);
expect(ReactComponentTreeDevtool.getUpdateCount(imageID)).toEqual(0);
expect(ReactComponentTreeHook.getUpdateCount(viewID)).toEqual(0);
expect(ReactComponentTreeHook.getUpdateCount(imageID)).toEqual(0);
});
it('does not report top-level wrapper as a root', () => {
src/renderers/shared/devtools/__tests__/ReactHostOperationHistoryDevtool-test.js → src/renderers/shared/hooks/__tests__/ReactHostOperationHistoryHook-test.js
+36 -36
View File
@@ -11,13 +11,13 @@
'use strict';
describe('ReactHostOperationHistoryDevtool', () => {
describe('ReactHostOperationHistoryHook', () => {
var React;
var ReactPerf;
var ReactDOM;
var ReactDOMComponentTree;
var ReactDOMFeatureFlags;
var ReactHostOperationHistoryDevtool;
var ReactHostOperationHistoryHook;
beforeEach(() => {
jest.resetModuleRegistry();
@@ -27,7 +27,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
ReactDOM = require('ReactDOM');
ReactDOMComponentTree = require('ReactDOMComponentTree');
ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
ReactHostOperationHistoryDevtool = require('ReactHostOperationHistoryDevtool');
ReactHostOperationHistoryHook = require('ReactHostOperationHistoryHook');
ReactPerf.start();
});
@@ -37,14 +37,14 @@ describe('ReactHostOperationHistoryDevtool', () => {
});
function assertHistoryMatches(expectedHistory) {
var actualHistory = ReactHostOperationHistoryDevtool.getHistory();
var actualHistory = ReactHostOperationHistoryHook.getHistory();
expect(actualHistory).toEqual(expectedHistory);
}
describe('mount', () => {
it('gets recorded for host roots', () => {
var node = document.createElement('div');
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<div><p>Hi.</p></div>, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
@@ -63,7 +63,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
}
var node = document.createElement('div');
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<Foo />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
@@ -83,10 +83,10 @@ describe('ReactHostOperationHistoryDevtool', () => {
}
var node = document.createElement('div');
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<Foo />, node);
// Empty DOM components should be invisible to devtools.
// Empty DOM components should be invisible to hooks.
assertHistoryMatches([]);
});
@@ -96,7 +96,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
return element;
}
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
var node = document.createElement('div');
element = null;
@@ -106,7 +106,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
ReactDOM.render(<Foo />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
// Since empty components should be invisible to devtools,
// Since empty components should be invisible to hooks,
// we record a "mount" event rather than a "replace with".
assertHistoryMatches([{
instanceID: inst._debugID,
@@ -120,7 +120,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
it('gets recorded during mount', () => {
var node = document.createElement('div');
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<div style={{
color: 'red',
backgroundColor: 'yellow',
@@ -155,7 +155,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
ReactDOM.render(<div />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<div style={{ color: 'red' }} />, node);
ReactDOM.render(<div style={{
color: 'blue',
@@ -188,7 +188,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
ReactDOM.render(<div />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<div style={{
color: 'red',
backgroundColor: 'yellow',
@@ -214,7 +214,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
it('gets recorded during mount', () => {
var node = document.createElement('div');
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<div className="rad" tabIndex={42} />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
@@ -247,7 +247,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
ReactDOM.render(<div />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<div className="rad" />, node);
ReactDOM.render(<div className="mad" tabIndex={42} />, node);
ReactDOM.render(<div tabIndex={43} />, node);
@@ -282,7 +282,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
ReactDOM.render(<div />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<div disabled={true} />, node);
ReactDOM.render(<div disabled={false} />, node);
@@ -302,7 +302,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
it('gets recorded during mount', () => {
var node = document.createElement('div');
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<div data-x="rad" data-y={42} />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
@@ -335,7 +335,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
ReactDOM.render(<div />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<div data-x="rad" />, node);
ReactDOM.render(<div data-x="mad" data-y={42} />, node);
ReactDOM.render(<div data-y={43} />, node);
@@ -368,7 +368,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
it('gets recorded during mount', () => {
var node = document.createElement('div');
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<my-component className="rad" tabIndex={42} />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
@@ -401,7 +401,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
ReactDOM.render(<my-component />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<my-component className="rad" />, node);
ReactDOM.render(<my-component className="mad" tabIndex={42} />, node);
ReactDOM.render(<my-component tabIndex={43} />, node);
@@ -438,7 +438,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
ReactDOM.render(<div>Hi.</div>, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<div>Bye.</div>, node);
assertHistoryMatches([{
@@ -453,7 +453,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
ReactDOM.render(<div dangerouslySetInnerHTML={{__html: 'Hi.'}} />, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<div>Bye.</div>, node);
assertHistoryMatches([{
@@ -468,7 +468,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
ReactDOM.render(<div><span /><p /></div>, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<div>Bye.</div>, node);
assertHistoryMatches([{
@@ -490,7 +490,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
var node = document.createElement('div');
ReactDOM.render(<div>Hi.</div>, node);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<div>Hi.</div>, node);
assertHistoryMatches([]);
@@ -504,7 +504,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
var inst1 = ReactDOMComponentTree.getInstanceFromNode(node.firstChild.childNodes[0]);
var inst2 = ReactDOMComponentTree.getInstanceFromNode(node.firstChild.childNodes[3]);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<div>{'Bye.'}{43}</div>, node);
assertHistoryMatches([{
@@ -522,7 +522,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
var node = document.createElement('div');
ReactDOM.render(<div>{'Hi.'}{42}</div>, node);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<div>{'Hi.'}{42}</div>, node);
assertHistoryMatches([]);
@@ -544,7 +544,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
element = <span />;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<Foo />, node);
assertHistoryMatches([{
@@ -567,7 +567,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
element = null;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<Foo />, node);
assertHistoryMatches([{
@@ -589,7 +589,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
element = <div />;
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<Foo />, node);
assertHistoryMatches([]);
@@ -602,7 +602,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
ReactDOM.render(<div>Hi.</div>, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(
<div dangerouslySetInnerHTML={{__html: 'Bye.'}} />,
node
@@ -623,7 +623,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(
<div dangerouslySetInnerHTML={{__html: 'Bye.'}} />,
node
@@ -641,7 +641,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
ReactDOM.render(<div><span /><p /></div>, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(
<div dangerouslySetInnerHTML={{__html: 'Hi.'}} />,
node
@@ -669,7 +669,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
node
);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(
<div dangerouslySetInnerHTML={{__html: 'Hi.'}} />,
node
@@ -685,7 +685,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
ReactDOM.render(<div><span /></div>, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<div><span /><p /></div>, node);
assertHistoryMatches([{
@@ -702,7 +702,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
ReactDOM.render(<div><span key="a" /><p key="b" /></div>, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<div><p key="b" /><span key="a" /></div>, node);
assertHistoryMatches([{
@@ -719,7 +719,7 @@ describe('ReactHostOperationHistoryDevtool', () => {
ReactDOM.render(<div><span key="a" /><p key="b" /></div>, node);
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
ReactHostOperationHistoryDevtool._preventClearing = true;
ReactHostOperationHistoryHook._preventClearing = true;
ReactDOM.render(<div><span key="a" /></div>, node);
assertHistoryMatches([{
src/renderers/shared/stack/reconciler/ReactChildReconciler.js
+5 -5
View File
@@ -19,7 +19,7 @@ var shouldUpdateReactComponent = require('shouldUpdateReactComponent');
var traverseAllChildren = require('traverseAllChildren');
var warning = require('warning');
var ReactComponentTreeDevtool;
var ReactComponentTreeHook;
if (
typeof process !== 'undefined' &&
@@ -31,15 +31,15 @@ if (
// https://github.com/facebook/react/issues/7240
// Remove the inline requires when we don't need them anymore:
// https://github.com/facebook/react/pull/7178
ReactComponentTreeDevtool = require('ReactComponentTreeDevtool')
ReactComponentTreeHook = require('ReactComponentTreeHook')
}
function instantiateChild(childInstances, child, name, selfDebugID) {
// We found a component instance.
var keyUnique = (childInstances[name] === undefined);
if (__DEV__) {
if (!ReactComponentTreeDevtool) {
ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
if (!ReactComponentTreeHook) {
ReactComponentTreeHook = require('ReactComponentTreeHook');
}
warning(
keyUnique,
@@ -47,7 +47,7 @@ function instantiateChild(childInstances, child, name, selfDebugID) {
'`%s`. Child keys must be unique; when two children share a key, only ' +
'the first child will be used.%s',
KeyEscapeUtils.unescape(name),
ReactComponentTreeDevtool.getStackAddendumByID(selfDebugID)
ReactComponentTreeHook.getStackAddendumByID(selfDebugID)
);
}
if (child != null && keyUnique) {
src/shared/utils/flattenChildren.js
+5 -5
View File
@@ -16,7 +16,7 @@ var KeyEscapeUtils = require('KeyEscapeUtils');
var traverseAllChildren = require('traverseAllChildren');
var warning = require('warning');
var ReactComponentTreeDevtool;
var ReactComponentTreeHook;
if (
typeof process !== 'undefined' &&
@@ -28,7 +28,7 @@ if (
// https://github.com/facebook/react/issues/7240
// Remove the inline requires when we don't need them anymore:
// https://github.com/facebook/react/pull/7178
ReactComponentTreeDevtool = require('ReactComponentTreeDevtool')
ReactComponentTreeHook = require('ReactComponentTreeHook')
}
/**
@@ -48,8 +48,8 @@ function flattenSingleChildIntoContext(
const result = traverseContext;
const keyUnique = (result[name] === undefined);
if (__DEV__) {
if (!ReactComponentTreeDevtool) {
ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
if (!ReactComponentTreeHook) {
ReactComponentTreeHook = require('ReactComponentTreeHook');
}
warning(
keyUnique,
@@ -57,7 +57,7 @@ function flattenSingleChildIntoContext(
'`%s`. Child keys must be unique; when two children share a key, only ' +
'the first child will be used.%s',
KeyEscapeUtils.unescape(name),
ReactComponentTreeDevtool.getStackAddendumByID(selfDebugID)
ReactComponentTreeHook.getStackAddendumByID(selfDebugID)
);
}
if (keyUnique && child != null) {
src/test/ReactComponentTreeTestUtils.js
+13 -13
View File
@@ -11,25 +11,25 @@
'use strict';
var ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
var ReactComponentTreeHook = require('ReactComponentTreeHook');
function getRootDisplayNames() {
return ReactComponentTreeDevtool.getRootIDs()
.map(ReactComponentTreeDevtool.getDisplayName);
return ReactComponentTreeHook.getRootIDs()
.map(ReactComponentTreeHook.getDisplayName);
}
function getRegisteredDisplayNames() {
return ReactComponentTreeDevtool.getRegisteredIDs()
.map(ReactComponentTreeDevtool.getDisplayName);
return ReactComponentTreeHook.getRegisteredIDs()
.map(ReactComponentTreeHook.getDisplayName);
}
function expectTree(rootID, expectedTree, parentPath) {
var displayName = ReactComponentTreeDevtool.getDisplayName(rootID);
var ownerID = ReactComponentTreeDevtool.getOwnerID(rootID);
var parentID = ReactComponentTreeDevtool.getParentID(rootID);
var childIDs = ReactComponentTreeDevtool.getChildIDs(rootID);
var text = ReactComponentTreeDevtool.getText(rootID);
var element = ReactComponentTreeDevtool.getElement(rootID);
var displayName = ReactComponentTreeHook.getDisplayName(rootID);
var ownerID = ReactComponentTreeHook.getOwnerID(rootID);
var parentID = ReactComponentTreeHook.getParentID(rootID);
var childIDs = ReactComponentTreeHook.getChildIDs(rootID);
var text = ReactComponentTreeHook.getText(rootID);
var element = ReactComponentTreeHook.getElement(rootID);
var path = parentPath ? `${parentPath} > ${displayName}` : displayName;
function expectEqual(actual, expected, name) {
@@ -46,14 +46,14 @@ function expectTree(rootID, expectedTree, parentPath) {
if (expectedTree.parentDisplayName !== undefined) {
expectEqual(
ReactComponentTreeDevtool.getDisplayName(parentID),
ReactComponentTreeHook.getDisplayName(parentID),
expectedTree.parentDisplayName,
'parentDisplayName'
);
}
if (expectedTree.ownerDisplayName !== undefined) {
expectEqual(
ReactComponentTreeDevtool.getDisplayName(ownerID),
ReactComponentTreeHook.getDisplayName(ownerID),
expectedTree.ownerDisplayName,
'ownerDisplayName'
);