@simbathesailor/use-what-changed - npm Package Compare versions

Comparing version 0.1.15 to 0.1.16

package.json

 {
   "name": "@simbathesailor/use-what-changed",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "license": "MIT",
@@ -5,0 +5,0 @@ "author": "simbathesailor",

README.md

 # use-what-changed
 
-<h2 align="center">A simple hook to debug major Reactjs hooks and custom hooks.</h2>
-<p align="center">
-    <img src="https://badgen.net/npm/v/@simbathesailor/use-what-changed">
-    <img src="https://badgen.net/bundlephobia/minzip/@simbathesailor/use-what-changed">
-    <img src="https://badgen.net/npm/dw/@simbathesailor/use-what-changed">
+<h2  align="center">A simple hook to debug major Reactjs hooks and custom hooks.</h2>
+
+<p  align="center">
+
+<img  src="https://badgen.net/npm/v/@simbathesailor/use-what-changed">
+
+<img  src="https://badgen.net/bundlephobia/minzip/@simbathesailor/use-what-changed">
+
+<img  src="https://badgen.net/npm/dw/@simbathesailor/use-what-changed">
+
 </p>
@@ -17,3 +22,5 @@
 ```sh
+
 yarn add @simbathesailor/use-what-changed
+
 ```
@@ -24,3 +31,5 @@
 ```
+
 npm i @simbathesailor/use-what-changed --save
+
 ```
@@ -38,3 +47,3 @@
 
-2. Make use of usePrevious hook which can be defined something like this
+2) Make use of usePrevious hook which can be defined something like this
 
@@ -129,2 +138,49 @@ ```jsx
 
+## Usage with babel plugin.
+
+The package can also be used with a babel plugin which make it more easy to debug.
+
+1. Run
+   ```
+   npm i @simbathesailor/use-what-changed --save-dev
+   ```
+2. Run
+
+```
+npm i @simbathesailor/babel-plugin-use-what-changed --save-dev
+```
+
+Add the plugin entry to your babel configurations
+
+```json
+{
+  "plugins": ["@simbathesailor/babel-plugin-use-what-changed"]
+}
+```
+
+Make sure the comments are enabled for your development build. As the plugin is solely dependent on the comments.
+
+Now to debug a useEffect, useMemo or useCallback. You can do something like this:
+
+```jsx
+// uwc-debug
+React.useEffect(() => {
+  // console.log("some thing changed , need to figure out")
+}, [a, b, c, d]);
+
+// uwc-debug
+const d = React.useCallback(() => {
+  // console.log("some thing changed , need to figure out")
+}, [a, b, d]);
+
+// uwc-debug
+const d = React.useMemo(() => {
+  // console.log("some thing changed , need to figure out")
+}, [a]);
+```
+
+No need to add any import for use-what-changed. just add a comment //uwc-debug' above your hooks and you should start seeing use-what-changed debug consoles.
+
+<strong>Note: Frankly speaking the whole package was built, cause I was facing problems with hooks and debugging it was eating up a lot of my time. Now I think I feel quite comfortable with hooks. Now I do not need this often, but i think it can be quite useful for debugging hooks </strong>
+
 ## Color coding
@@ -139,2 +195,3 @@
 [Demo link](https://ozj1e.csb.app/)
+
 [Codesandbox link](https://codesandbox.io/s/cranky-tree-ozj1e)
@@ -166,2 +223,2 @@
 
-<table><tr><td  align="center"><a  href="https://github.com/simbathesailor"><img  src="https://avatars2.githubusercontent.com/u/5938110?s=400&u=f94d3ad624faa17c799d7bbd88cf2d2170b26813&v=4"  width="100px;"  alt="Anil kumar chaudhary"/><br /><sub><b>Anil kumar Chaudhary</b></sub></a><br /><a  href="https://github.com/simbathesailor/use-what-changed/commits?author=simbathesailor"  title="Code">💻</a>  <a  href="#ideas-simbathesailor"  title="Ideas, Planning, & Feedback">🤔</a>  <a  href="#design-simbathesailor"  title="Design">🎨</a>  <a  href="https://github.com/simbathesailor/use-what-changed/commits?author=simbathesailor"  title="Documentation">📖</a>  <a  href="https://github.com/simbathesailor/use-what-changed/issues/created_by/simbathesailor"  title="Bug reports">🐛</a></td></tr></table>
+<table><tr><td  align="center"><a  href="https://github.com/simbathesailor"><img  src="https://avatars2.githubusercontent.com/u/5938110?s=400&u=f94d3ad624faa17c799d7bbd88cf2d2170b26813&v=4"  width="100px;"  alt="Anil kumar chaudhary"/><br  /><sub><b>Anil kumar Chaudhary</b></sub></a><br  /><a  href="https://github.com/simbathesailor/use-what-changed/commits?author=simbathesailor"  title="Code">💻</a>  <a  href="#ideas-simbathesailor"  title="Ideas, Planning, & Feedback">🤔</a>  <a  href="#design-simbathesailor"  title="Design">🎨</a>  <a  href="https://github.com/simbathesailor/use-what-changed/commits?author=simbathesailor"  title="Documentation">📖</a>  <a  href="https://github.com/simbathesailor/use-what-changed/issues/created_by/simbathesailor"  title="Bug reports">🐛</a></td></tr></table>

No alert changes

Improved metrics

Total package byte prevSize

39053

increased by3.77%

Number of lines in readme file

219

increased by35.19%

No dependency changes