Don't pass trace as extra argument

Using `props.trace` (in the constructor) or `nextProps.trace` (in `getDerivedStateFromProps`) is easy enough and more consistent.

Author: Oblosys

README.md

@@ -79,7 +79,7 @@ resetInstanceIdCounters(); // clear instance counters on hot reload
 
 This isn't strictly necessary, but without it, instance counters will keep increasing on each hot reload, making the log less readable.
 
-#### Trace components
+#### Tracing components
 
 To trace a component (e.g. `ComponentToTrace`,) apply the `traceLifecycle` HOC to it. This is most easily done with a decorator.
 
@@ -112,19 +112,43 @@ class ComponentToTraceOrg extends React.Component {...}
 const ComponentToTrace = traceLifeCycle(ComponentToTraceOrg);
 ```
 
-A `this.props.trace` method gets added to component and can be used to log specific information:
+#### Traced component props: `LifecyclePanel` and `trace`
+
+The traced component receives two additional props: `LifecyclePanel` and `trace`. The `LifecyclePanel` prop is a component that can be included in the rendering with `<this.props.LifecyclePanel/>` to display the lifecycle methods of the traced component.
+
+```jsx
+render() {
+  return (
+    ..
+    <this.props.LifecyclePanel/>
+    ..
+  );
+}
+```
+
+The `trace` prop is a function of type `(msg: string) => void` that can be used to log custom messages:
 
 ```jsx
 componentDidUpdate(prevProps, prevState) {
   this.props.trace('prevProps: ' + JSON.stringify(prevProps));
 }
 ```
 
-Because we cannot use `this` to refer to the component instance in the static `getDerivedStateFromProps`, `trace` is passed as a third parameter to this method:
+In the constructor we can use `this.props.trace` after the call to `super`, or access `trace` on the `props` parameter:
+
+```jsx
+constructor(props) {
+  props.trace('before super(props)');
+  super(props);
+  this.props.trace('after super(props)');
+}
+```
+
+In the static `getDerivedStateFromProps` we cannot use `this` to refer to the component instance, but we can access `trace` on the `nextProps` parameter:
 
 ```jsx
-static getDerivedStateFromProps(nextProps, prevState, trace) {
-    trace('nextProps: ' + JSON.stringify(nextProps));
+static getDerivedStateFromProps(nextProps, prevState) {
+    nextProps.trace('nextProps: ' + JSON.stringify(nextProps));
     ..
 }
 ```

src/traceLifecycle.jsx

@@ -45,7 +45,7 @@ export default function traceLifecycle(ComponentToTrace) {
   class TracedComponent extends ComponentToTrace {
     constructor(props, context) {
       props.trace(MConstructor);
-      super(props, context, props.trace);
+      super(props, context);
       this.LifecyclePanel = withDeprecationWarning(
         constants.DEPRECATED_THIS_LIFECYCLE_PANEL,
         props.LifecyclePanel
@@ -70,7 +70,7 @@ export default function traceLifecycle(ComponentToTrace) {
     static getDerivedStateFromProps(nextProps, prevState) {
       nextProps.trace(MGetDerivedState);
       return ComponentToTrace.getDerivedStateFromProps
-               ? ComponentToTrace.getDerivedStateFromProps(nextProps, prevState, nextProps.trace)
+               ? ComponentToTrace.getDerivedStateFromProps(nextProps, prevState)
                : null;
     }
 

test/TracedChild.jsx

@@ -6,9 +6,9 @@ class Child extends Component {
 
   static staticProperty = 'a static property'
 
-  constructor(props, context, trace) {
-    super(props, context, trace);
-    trace('custom:constructor');
+  constructor(props, context) {
+    super(props, context);
+    props.trace('custom:constructor');
   }
 
   // eslint-disable-next-line no-unused-vars

test/TracedLegacyChild.jsx

@@ -4,9 +4,9 @@ import { traceLifecycle } from '../src';
 class LegacyChild extends Component {
   state = {}
 
-  constructor(props, context, trace) {
-    super(props, context, trace);
-    trace('custom:constructor');
+  constructor(props, context) {
+    super(props, context);
+    props.trace('custom:constructor');
   }
 
   componentWillMount() {