docs(readme): fix a few issues

Author: solkimicreb

README.md

@@ -6,7 +6,7 @@ Simple React state management. Made with :heart: and ES6 Proxies.
 
 <a href="#platform-support"><img src="images/browser_support.png" alt="Browser support" width="450px" /></a>
 
-**Breaking change in [v5](https://github.com/solkimicreb/react-easy-state/releases/tag/v5.0.0)**: the auto bind feature got removed. See the alternatives for your components at the [official React docs](https://reactjs.org/docs/handling-events.html) and for you stores at [the FAQ docs section](#my-stores-are-broken).
+**Breaking change in [v5](https://github.com/solkimicreb/react-easy-state/releases/tag/v5.0.0)**: the auto bind feature got removed. See the alternatives for your components at the [official React docs](https://reactjs.org/docs/handling-events.html) and for you stores at [the FAQ docs section](#my-store-methods-are-broken).
 
 <details>
 <summary><strong>Table of Contents</strong></summary>
@@ -39,13 +39,11 @@ Simple React state management. Made with :heart: and ES6 Proxies.
 
 ## Introduction
 
-Easy State has two rules:
+Easy State has two rules.
 
 1. Always wrap you components with `view`.
 2. Always wrap you state store objects with `store`.
 
-This is enough for it to automatically update your views when needed - no matter how exotically you mutate your state stores. With this freedom you can invent and use your personal favorite state management patterns.
-
 ```js
 import React from 'react'
 import { store, view } from 'react-easy-state'
@@ -56,6 +54,8 @@ setInterval(() => clock.time = new Date(), 1000)
 export default view(() => <div>{clock.time}</div>)
 ```
 
+This is enough for it to automatically update your views when needed - no matter how exotically you mutate your state stores. With this freedom you can invent and use your personal favorite state management patterns.
+
 ## Installation
 
 `npm install react-easy-state`
@@ -240,7 +240,7 @@ This works as expected, even when you pass store methods as callbacks.
 
 ### My views are not rendering
 
-You should wrap your state stores in `store` as early as possible to make them reactive.
+You should wrap your state stores with `store` as early as possible to make them reactive.
 
 ```js
 const person = { name: 'Bob' }
@@ -249,7 +249,9 @@ person.name = 'Ann'
 export default store(person)
 ```
 
-The above example wouldn't cause any re-renders on the `person.name = 'Ann'` mutation, because it is targeted at the raw object. Mutating the raw - none `store` wrapped object - won't schedule renders. Do this instead of the above code.
+The above example wouldn't trigger re-renders on the `person.name = 'Ann'` mutation, because it is targeted at the raw object. Mutating the raw - none `store` wrapped object - won't schedule renders.
+
+Do this instead of the above code.
 
 ```js
 const person = store({ name: 'Bob' })

examples/clock/dist/bundle.js

@@ -14165,6 +14165,7 @@ function releaseReactionKeyConnection(reactionsForKey) {
 }
 
 var runningReaction;
+var isDebugging = false;
 
 function runAsReaction(reaction, fn, context, args) {
   // do not build reactive relations, if the reaction is unobserved
@@ -14190,9 +14191,7 @@ function runAsReaction(reaction, fn, context, args) {
 // register the currently running reaction to be queued again on obj.key mutations
 function registerRunningReactionForOperation(operation) {
   if (runningReaction) {
-    if (runningReaction.debugger) {
-      runningReaction.debugger(operation);
-    }
+    debugOperation(runningReaction, operation);
     registerReactionForOperation(runningReaction, operation);
   }
 }
@@ -14203,9 +14202,7 @@ function queueReactionsForOperation(operation) {
 }
 
 function queueReaction(reaction) {
-  if (reaction.debugger) {
-    reaction.debugger(this);
-  }
+  debugOperation(reaction, this);
   // queue the reaction for later execution or run it immediately
   if (typeof reaction.scheduler === 'function') {
     reaction.scheduler(reaction);
@@ -14216,6 +14213,17 @@ function queueReaction(reaction) {
   }
 }
 
+function debugOperation(reaction, operation) {
+  if (reaction.debugger && !isDebugging) {
+    try {
+      isDebugging = true;
+      reaction.debugger(operation);
+    } finally {
+      isDebugging = false;
+    }
+  }
+}
+
 function hasRunningReaction() {
   return runningReaction !== undefined;
 }
@@ -14454,7 +14462,14 @@ function set(target, key, value, receiver) {
   if (!hadKey) {
     queueReactionsForOperation({ target: target, key: key, value: value, receiver: receiver, type: 'add' });
   } else if (value !== oldValue) {
-    queueReactionsForOperation({ target: target, key: key, value: value, oldValue: oldValue, receiver: receiver, type: 'set' });
+    queueReactionsForOperation({
+      target: target,
+      key: key,
+      value: value,
+      oldValue: oldValue,
+      receiver: receiver,
+      type: 'set'
+    });
   }
   return result;
 }
@@ -27022,14 +27037,12 @@ module.exports = ReactDOMInvalidARIAHook;
 
 
 
-function view(Comp) {
+function view(Comp, { devtool: rawDevtool } = {}) {
   var _class, _temp;
 
   const isStatelessComp = !(Comp.prototype && Comp.prototype.isReactComponent);
   const BaseComp = isStatelessComp ? __WEBPACK_IMPORTED_MODULE_0_react__["Component"] : Comp;
 
-  const rawDevtool = typeof __REACT_EASY_STATE_DEVTOOL__ === 'function' && __REACT_EASY_STATE_DEVTOOL__;
-
   const devtool = rawDevtool ? operation => rawDevtool(Object.assign({ Component: Comp }, operation)) : undefined;
 
   // return a HOC which overwrites render, shouldComponentUpdate and componentWillUnmount
@@ -27049,7 +27062,6 @@ function view(Comp) {
     }
 
     render() {
-      devtool && devtool({ type: 'render' });
       return isStatelessComp ? Comp(this.props, this.context) : super.render();
     }
 
@@ -27059,18 +27071,29 @@ function view(Comp) {
 
       // respect the case when user prohibits updates
       if (super.shouldComponentUpdate && !super.shouldComponentUpdate(nextProps, nextState)) {
+        devtool && devtool({ type: 'render', renderType: 'blocked' });
         return false;
       }
 
       // return true if it is a reactive render or state changes
       if (state !== nextState) {
+        devtool && devtool({ type: 'render', renderType: 'reactive' });
         return true;
       }
 
       // the component should update if any of its props shallowly changed value
       const keys = Object.keys(props);
       const nextKeys = Object.keys(nextProps);
-      return nextKeys.length !== keys.length || nextKeys.some(key => props[key] !== nextProps[key]);
+      if (nextKeys.length !== keys.length || nextKeys.some(key => props[key] !== nextProps[key])) {
+        devtool && devtool({
+          type: 'render',
+          renderType: 'normal',
+          props: nextProps,
+          oldProps: props
+        });
+        return true;
+      }
+      return false;
     }
 
     componentWillUnmount() {

examples/contacts/dist/bundle.js

@@ -9811,6 +9811,7 @@ function releaseReactionKeyConnection(reactionsForKey) {
 }
 
 var runningReaction;
+var isDebugging = false;
 
 function runAsReaction(reaction, fn, context, args) {
   // do not build reactive relations, if the reaction is unobserved
@@ -9836,9 +9837,7 @@ function runAsReaction(reaction, fn, context, args) {
 // register the currently running reaction to be queued again on obj.key mutations
 function registerRunningReactionForOperation(operation) {
   if (runningReaction) {
-    if (runningReaction.debugger) {
-      runningReaction.debugger(operation);
-    }
+    debugOperation(runningReaction, operation);
     registerReactionForOperation(runningReaction, operation);
   }
 }
@@ -9849,9 +9848,7 @@ function queueReactionsForOperation(operation) {
 }
 
 function queueReaction(reaction) {
-  if (reaction.debugger) {
-    reaction.debugger(this);
-  }
+  debugOperation(reaction, this);
   // queue the reaction for later execution or run it immediately
   if (typeof reaction.scheduler === 'function') {
     reaction.scheduler(reaction);
@@ -9862,6 +9859,17 @@ function queueReaction(reaction) {
   }
 }
 
+function debugOperation(reaction, operation) {
+  if (reaction.debugger && !isDebugging) {
+    try {
+      isDebugging = true;
+      reaction.debugger(operation);
+    } finally {
+      isDebugging = false;
+    }
+  }
+}
+
 function hasRunningReaction() {
   return runningReaction !== undefined;
 }
@@ -10100,7 +10108,14 @@ function set(target, key, value, receiver) {
   if (!hadKey) {
     queueReactionsForOperation({ target: target, key: key, value: value, receiver: receiver, type: 'add' });
   } else if (value !== oldValue) {
-    queueReactionsForOperation({ target: target, key: key, value: value, oldValue: oldValue, receiver: receiver, type: 'set' });
+    queueReactionsForOperation({
+      target: target,
+      key: key,
+      value: value,
+      oldValue: oldValue,
+      receiver: receiver,
+      type: 'set'
+    });
   }
   return result;
 }
@@ -22668,14 +22683,12 @@ module.exports = ReactDOMInvalidARIAHook;
 
 
 
-function view(Comp) {
+function view(Comp, { devtool: rawDevtool } = {}) {
   var _class, _temp;
 
   const isStatelessComp = !(Comp.prototype && Comp.prototype.isReactComponent);
   const BaseComp = isStatelessComp ? __WEBPACK_IMPORTED_MODULE_0_react__["Component"] : Comp;
 
-  const rawDevtool = typeof __REACT_EASY_STATE_DEVTOOL__ === 'function' && __REACT_EASY_STATE_DEVTOOL__;
-
   const devtool = rawDevtool ? operation => rawDevtool(Object.assign({ Component: Comp }, operation)) : undefined;
 
   // return a HOC which overwrites render, shouldComponentUpdate and componentWillUnmount
@@ -22695,7 +22708,6 @@ function view(Comp) {
     }
 
     render() {
-      devtool && devtool({ type: 'render' });
       return isStatelessComp ? Comp(this.props, this.context) : super.render();
     }
 
@@ -22705,18 +22717,29 @@ function view(Comp) {
 
       // respect the case when user prohibits updates
       if (super.shouldComponentUpdate && !super.shouldComponentUpdate(nextProps, nextState)) {
+        devtool && devtool({ type: 'render', renderType: 'blocked' });
         return false;
       }
 
       // return true if it is a reactive render or state changes
       if (state !== nextState) {
+        devtool && devtool({ type: 'render', renderType: 'reactive' });
         return true;
       }
 
       // the component should update if any of its props shallowly changed value
       const keys = Object.keys(props);
       const nextKeys = Object.keys(nextProps);
-      return nextKeys.length !== keys.length || nextKeys.some(key => props[key] !== nextProps[key]);
+      if (nextKeys.length !== keys.length || nextKeys.some(key => props[key] !== nextProps[key])) {
+        devtool && devtool({
+          type: 'render',
+          renderType: 'normal',
+          props: nextProps,
+          oldProps: props
+        });
+        return true;
+      }
+      return false;
     }
 
     componentWillUnmount() {