Skip to content

Instantly share code, notes, and snippets.

@limarc
Last active November 8, 2016 08:16
Show Gist options
  • Select an option

  • Save limarc/91abf34baa47b456c56242e2ce3a640b to your computer and use it in GitHub Desktop.

Select an option

Save limarc/91abf34baa47b456c56242e2ce3a640b to your computer and use it in GitHub Desktop.
// Define global React
if (typeof window !== 'undefined') {
window.React = React;
}
// https://github.com/facebook/react/blob/e3131c1d55d6695c2f0966379535f88b813f912b/src/renderers/dom/ReactDOM.js
Object.defineProperty(
window, '__REACT_DEVTOOLS_GLOBAL_HOOK__', {
value: {
inject: function(runtime){ this._reactRuntime = runtime },
getSelectedInstance: null,
Overlay: null,
}
}
);
// // Instrumental
// ReactDebugTool.addDevtool({
// onMountRootComponent(i) {
// console.log('onMountRootComponent', i);
// },
// onMountComponent(i) {
// console.log('onMountComponent', i);
// },
// onUpdateComponent(i) {
// console.log('onUpdateComponent', i);
// },
// onUnmountComponent(i) {
// console.log('onUnmountComponent', i);
// },
// });
// Logs perfomance
import ReactFeatureFlags from 'react/lib/ReactFeatureFlags';
// ReactFeatureFlags.logTopLevelRenders = true;
// Instrumental
// https://github.com/facebook/react/blob/9bfa45bd2db57ccfd086cc0faa843d51e8489858/src/renderers/shared/ReactDebugTool.js
import ReactInstrumentation from 'react/lib/ReactInstrumentation';
ReactInstrumentation.debugTool.addDevtool({
onMountRootComponent(i) {
console.log('onMountRootComponent', i);
},
,
onUnmountComponent(i) {
console.log('onUnmountComponent', i);
},
onMountComponent(i) {
console.log('onMountComponent', i);
},
onUpdateComponent(component) {
var namedComponent = component;
// Duck type TopLevelWrapper. This is probably always true.
if (component._currentElement.type && component._currentElement.type.isReactTopLevelWrapper) {
namedComponent = component._renderedComponent;
}
// Get NODE
var nativeNode = component._renderedComponent ? component._renderedComponent._nativeNode : component._nativeNode;
if (nativeNode) {
if (nativeNode.nodeType === 1) {
console.log('YEP:', nativeNode);
nativeNode.classList.add('hook');
setTimeout(function() {
nativeNode.classList.remove('hook');
}, 3000);
}
}
//console.log('onUpdateComponent', namedComponent.getName ? namedComponent.getName() : component);
console.log('onUpdateComponent', component);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment