@simbathesailor/use-what-changed
Advanced tools
Comparing version 0.1.25 to 1.0.0
@@ -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 @@ |
@@ -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 |
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 @@ |
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 }; |
{ | ||
"name": "@simbathesailor/use-what-changed", | ||
"version": "0.1.25", | ||
"version": "1.0.0", | ||
"license": "MIT", | ||
@@ -5,0 +5,0 @@ "author": "simbathesailor", |
# 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 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
55960
319
1
299
1