New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@simbathesailor/use-what-changed

Package Overview
Dependencies
Maintainers
1
Versions
28
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 0.1.25 to 1.0.0

44

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 @@

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc