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

Comparing version 0.1.25 to 1.0.0

dist/use-what-changed.cjs.development.js

@@ -8,2 +8,5 @@ 'use strict';
 var what_debug_changed = 0;
+var configuration = {
+  active: true
+};
 /**
@@ -13,2 +16,3 @@ * Taken random color logic from some stackoverflow answer
 
+
 function getRandomColor() {
@@ -51,5 +55,4 @@ var letters = '0123456789ABCDEF';
   return dependencyItem;
-}
+} // const isDevelopment = process.env['NODE_ENV'] === 'development';
 
-var isDevelopment = process.env['NODE_ENV'] === 'development';
 
@@ -64,5 +67,14 @@ function useHotRefs(value) {
 
-function useWhatChanged(dependency, dependencyNames, suffix) {
-  // const logRef =
-  // This ref is responsible for book keeping of the old value
+function useWhatChanged(dependency, dependencyNames, suffix, hookName) {
+  // It's a fair assumption the hooks type will not change for a component during
+  // its life time
+  var hookNameFinal = React.useMemo(function () {
+    if (hookName === "useLayoutEffect") {
+      return "useLayoutEffect";
+    } // if(hookName === "useEffect" || !hookName) {
+
+
+    return "useEffect"; // }
+  }, []); // This ref is responsible for book keeping of the old value
+
   var dependencyRef = React.useRef(dependency); // For count bookkeeping , for easy debugging
@@ -74,4 +86,3 @@
   var isDependencyArr = Array.isArray(dependencyRef.current);
-  React.useEffect(function () {
-    // const MyWindow: IWindow = window;
+  React[hookNameFinal](function () {
     if (dependencyRef.current && isDependencyArr // dependencyRef.current.length > 0
@@ -82,3 +93,4 @@ ) {
         backgroundColorRef.current = getRandomColor();
-      }
+      } // const MyWindow: IWindow = window;
+
   }, [dependencyRef, isDependencyArr]);
@@ -93,8 +105,8 @@
 
-  function logBanners(_ref) {
-    var isFirstMount = _ref.isFirstMount,
-        suffixText = _ref.suffixText,
-        isBlankArrayAsDependency = _ref.isBlankArrayAsDependency;
+  function logBanners(_ref2) {
+    var isFirstMount = _ref2.isFirstMount,
+        suffixText = _ref2.suffixText,
+        isBlankArrayAsDependency = _ref2.isBlankArrayAsDependency;
 
-    if (isDevelopment) {
+    if (configuration.active) {
       console.log("%c///// START SECTION /////", "background: " + backgroundColorRef.current + "; color: white; font-size: 10px", '\n');
@@ -111,3 +123,3 @@ console.log('\n');
   var longBannersRef = useHotRefs(logBanners);
-  React.useEffect(function () {
+  React[hookNameFinal](function () {
     if (!(dependencyRef.current && isDependencyArr)) {
@@ -159,3 +171,3 @@ return;
 
-    if (isDevelopment) {
+    if (configuration.active) {
       var isBlankArrayAsDependency = whatChanged && Object.keys(whatChanged).length === 0 && isDependencyArr;
@@ -179,3 +191,3 @@ longBannersRef.current({
     return [];
-  }(), [dependencyRef, longBannersRef]));
+  }(), [dependencyRef, longBannersRef, hookName]));
 }
@@ -182,0 +194,0 @@

dist/use-what-changed.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";var e,r=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,n=0,t=function(e){return"[object Object]"===Object.prototype.toString.call(e)};function o(e){if(t(e)||Array.isArray(e)){var r;try{r=JSON.stringify(e,null,2)}catch(e){r="CIRCULAR JSON"}return r}return e}var u="development"===process.env.NODE_ENV;exports.useWhatChanged=function(e,t,c){var l=r.useRef(e),a=r.useRef(1),s=r.useRef(""),i=Array.isArray(l.current);function f(){console.log("\n"),console.log("%c///// END SECTION/////","background: "+s.current+"; color: white; font-size: 10px","\n"),console.log("\n"),console.log("\n")}r.useEffect((function(){l.current&&i&&(n++,a.current=n,s.current=function(){for(var e="#",r=0;r<6;r++)e+="0123456789ABCDEF"[Math.floor(16*Math.random())];return e}())}),[l,i]);var d,g,y=(g=r.useRef(d=function(e){var r=e.isFirstMount,n=e.suffixText,t=e.isBlankArrayAsDependency;u&&(console.log("%c///// START SECTION /////","background: "+s.current+"; color: white; font-size: 10px","\n"),console.log("\n"),console.log("%c "+a.current+" "+(c||""),"background: "+s.current+"; color: white; font-size: 10px","👇🏾",r?"FIRST RUN":"UPDATES",""+n),t&&f())}),r.useEffect((function(){g.current=d})),g);r.useEffect((function(){if(l.current&&i){var r=t?t.split(","):null,n=!1,c=e?e.reduce((function(e,u,c){if(l.current&&u!==l.current[c]){var a=l.current[c];return l.current[c]=u,t&&r?(n=!0,e['"✅" '+r[c]]={"Old Value":o(a),"New Value":o(u)}):e['"✅" '+c]={"Old Value":o(a),"New Value":o(u)},e}return t&&r?e['"⏺" '+r[c]]={"Old Value":o(u),"New Value":o(u)}:e['"⏺" '+c]={"Old Value":o(u),"New Value":o(u)},e}),{}):{};if(u){var a=c&&0===Object.keys(c).length&&i;y.current({isFirstMount:!n,suffixText:a?" 👉🏽 This will run only once on mount.":"",isBlankArrayAsDependency:a}),a||(console.table(c),f())}}}),[].concat(e&&i?e:[],[l,y]))};
+"use strict";var e,n=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,r=0,t=function(e){return"[object Object]"===Object.prototype.toString.call(e)};function u(e){if(t(e)||Array.isArray(e)){var n;try{n=JSON.stringify(e,null,2)}catch(e){n="CIRCULAR JSON"}return n}return e}exports.useWhatChanged=function(e,t,o,c){var l=n.useMemo((function(){return"useLayoutEffect"===c?"useLayoutEffect":"useEffect"}),[]),a=n.useRef(e),s=n.useRef(1),f=n.useRef(""),i=Array.isArray(a.current);function y(){console.log("\n"),console.log("%c///// END SECTION/////","background: "+f.current+"; color: white; font-size: 10px","\n"),console.log("\n"),console.log("\n")}n[l]((function(){a.current&&i&&(r++,s.current=r,f.current=function(){for(var e="#",n=0;n<6;n++)e+="0123456789ABCDEF"[Math.floor(16*Math.random())];return e}())}),[a,i]);var d,g,A=(g=n.useRef(d=function(e){var n=e.isFirstMount,r=e.suffixText,t=e.isBlankArrayAsDependency;console.log("%c///// START SECTION /////","background: "+f.current+"; color: white; font-size: 10px","\n"),console.log("\n"),console.log("%c "+s.current+" "+(o||""),"background: "+f.current+"; color: white; font-size: 10px","👇🏾",n?"FIRST RUN":"UPDATES",""+r),t&&y()}),n.useEffect((function(){g.current=d})),g);n[l]((function(){if(a.current&&i){var n=t?t.split(","):null,r=!1,o=e?e.reduce((function(e,o,c){if(a.current&&o!==a.current[c]){var l=a.current[c];return a.current[c]=o,t&&n?(r=!0,e['"✅" '+n[c]]={"Old Value":u(l),"New Value":u(o)}):e['"✅" '+c]={"Old Value":u(l),"New Value":u(o)},e}return t&&n?e['"⏺" '+n[c]]={"Old Value":u(o),"New Value":u(o)}:e['"⏺" '+c]={"Old Value":u(o),"New Value":u(o)},e}),{}):{},c=o&&0===Object.keys(o).length&&i;A.current({isFirstMount:!r,suffixText:c?" 👉🏽 This will run only once on mount.":"",isBlankArrayAsDependency:c}),c||(console.table(o),y())}}),[].concat(e&&i?e:[],[a,A,c]))};
 //# sourceMappingURL=use-what-changed.cjs.production.min.js.map

dist/use-what-changed.esm.js

 import React from 'react';
 
 var what_debug_changed = 0;
+var configuration = {
+  active: true
+};
 /**
@@ -8,2 +11,3 @@ * Taken random color logic from some stackoverflow answer
 
+
 function getRandomColor() {
@@ -46,5 +50,4 @@ var letters = '0123456789ABCDEF';
   return dependencyItem;
-}
+} // const isDevelopment = process.env['NODE_ENV'] === 'development';
 
-var isDevelopment = process.env['NODE_ENV'] === 'development';
 
@@ -59,5 +62,14 @@ function useHotRefs(value) {
 
-function useWhatChanged(dependency, dependencyNames, suffix) {
-  // const logRef =
-  // This ref is responsible for book keeping of the old value
+function useWhatChanged(dependency, dependencyNames, suffix, hookName) {
+  // It's a fair assumption the hooks type will not change for a component during
+  // its life time
+  var hookNameFinal = React.useMemo(function () {
+    if (hookName === "useLayoutEffect") {
+      return "useLayoutEffect";
+    } // if(hookName === "useEffect" || !hookName) {
+
+
+    return "useEffect"; // }
+  }, []); // This ref is responsible for book keeping of the old value
+
   var dependencyRef = React.useRef(dependency); // For count bookkeeping , for easy debugging
@@ -69,4 +81,3 @@
   var isDependencyArr = Array.isArray(dependencyRef.current);
-  React.useEffect(function () {
-    // const MyWindow: IWindow = window;
+  React[hookNameFinal](function () {
     if (dependencyRef.current && isDependencyArr // dependencyRef.current.length > 0
@@ -77,3 +88,4 @@ ) {
         backgroundColorRef.current = getRandomColor();
-      }
+      } // const MyWindow: IWindow = window;
+
   }, [dependencyRef, isDependencyArr]);
@@ -88,8 +100,8 @@
 
-  function logBanners(_ref) {
-    var isFirstMount = _ref.isFirstMount,
-        suffixText = _ref.suffixText,
-        isBlankArrayAsDependency = _ref.isBlankArrayAsDependency;
+  function logBanners(_ref2) {
+    var isFirstMount = _ref2.isFirstMount,
+        suffixText = _ref2.suffixText,
+        isBlankArrayAsDependency = _ref2.isBlankArrayAsDependency;
 
-    if (isDevelopment) {
+    if (configuration.active) {
       console.log("%c///// START SECTION /////", "background: " + backgroundColorRef.current + "; color: white; font-size: 10px", '\n');
@@ -106,3 +118,3 @@ console.log('\n');
   var longBannersRef = useHotRefs(logBanners);
-  React.useEffect(function () {
+  React[hookNameFinal](function () {
     if (!(dependencyRef.current && isDependencyArr)) {
@@ -154,3 +166,3 @@ return;
 
-    if (isDevelopment) {
+    if (configuration.active) {
       var isBlankArrayAsDependency = whatChanged && Object.keys(whatChanged).length === 0 && isDependencyArr;
@@ -174,3 +186,3 @@ longBannersRef.current({
     return [];
-  }(), [dependencyRef, longBannersRef]));
+  }(), [dependencyRef, longBannersRef, hookName]));
 }
@@ -177,0 +189,0 @@

dist/useWhatChanged.d.ts

 declare type TypeDependency = any[];
 declare type TypeDependencyNames = string;
-declare function useWhatChanged(dependency?: TypeDependency, dependencyNames?: TypeDependencyNames, suffix?: string): void;
-export { useWhatChanged };
+declare function setUseWhatChange({ active }?: any): void;
+declare function useWhatChanged(dependency?: TypeDependency, dependencyNames?: TypeDependencyNames, suffix?: string, hookName?: string): void;
+export { useWhatChanged, setUseWhatChange };

package.json

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

README.md

 # use-what-changed
 
 <h2  align="center">A tool and utility to debug major React hooks and custom hooks.</h2>
+<h3 align="center">React | React native | React with Electron </h3>
 
@@ -19,2 +20,6 @@ <p  align="center">
 
+## Debug following hooks
+
+*useEffect* *useCallback* *useMemo* *useLayoutEffect* *Custom hooks using core hooks*
+
 ## Working Example
@@ -258,2 +263,16 @@
 
+## Electron example
+
+
+As this lbrary is just javascript and react. It can be used whereever
+Reactjs exists.
+
+I have included the setup for elctron app with a repo example. 
+
+Todos: Need to add an example for react-native, which is work in progress. I will update it in a couple of days.
+
+<p  align="center"><img  src="demoimages/electron_example.png"  width="500"  align="center"></p>
+
+[Electron repo link](https://github.com/simbathesailor/electron-learner)
+
 ## Contributing
@@ -260,0 +279,0 @@

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55960

8.06%

Lines of code

319

5.28%

Number of low quality alerts

1

-50%

Number of lines in readme file

299

6.79%

Number of low supply chain risk alerts

1

-75%

No dependency changes