@neo4j-ndl/react 2.16.18 → 2.16.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/cjs/hooks/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useRenderCount = exports.useEffectDebugger = exports.usePrevious = exports.useEventListener = exports.useLockedBody = exports.useCopyToClipboard = exports.useMediaQuery = exports.useInterval = exports.useOnClickOutside = exports.useWindowSize = exports.useDebounce = void 0;
|
|
3
|
+
exports.useRenderDebugger = exports.useRenderCount = exports.useEffectDebugger = exports.usePrevious = exports.useEventListener = exports.useLockedBody = exports.useCopyToClipboard = exports.useMediaQuery = exports.useInterval = exports.useOnClickOutside = exports.useWindowSize = exports.useDebounce = void 0;
|
|
4
4
|
/**
|
|
5
5
|
*
|
|
6
6
|
* Copyright (c) "Neo4j"
|
|
@@ -95,4 +95,40 @@ function useRenderCount() {
|
|
|
95
95
|
return count.current;
|
|
96
96
|
}
|
|
97
97
|
exports.useRenderCount = useRenderCount;
|
|
98
|
+
/**
|
|
99
|
+
* The `useRenderDebugger` outputs to console what props or states are causing a render (or re-render) of a component
|
|
100
|
+
* if all relevant props and states variables are passed to the hook.
|
|
101
|
+
* For debugging purposes only.
|
|
102
|
+
*
|
|
103
|
+
* Howto use:
|
|
104
|
+
* Place the hook at the top of the component you want to debug and call it like this:
|
|
105
|
+
* useRenderDebugger('MyComponent', props);
|
|
106
|
+
*
|
|
107
|
+
* if there are state variables include them as well:
|
|
108
|
+
*
|
|
109
|
+
* useRenderDebugger('MyComponent', { ...props, stateVar1, stateVar2 });
|
|
110
|
+
*
|
|
111
|
+
* @param componentName Name of the component to debug
|
|
112
|
+
* @param propsAndStates an object containing all props and states variables of the component
|
|
113
|
+
*/
|
|
114
|
+
const useRenderDebugger = (componentName, propsAndStates) => {
|
|
115
|
+
const prev = (0, react_1.useRef)(propsAndStates);
|
|
116
|
+
(0, react_1.useEffect)(() => {
|
|
117
|
+
const changedPropsOrState = {};
|
|
118
|
+
Object.entries(propsAndStates).forEach(([key, newValue]) => {
|
|
119
|
+
if (prev.current[key] !== newValue) {
|
|
120
|
+
changedPropsOrState[key] = {
|
|
121
|
+
old: prev.current[key],
|
|
122
|
+
new: newValue,
|
|
123
|
+
};
|
|
124
|
+
}
|
|
125
|
+
}, {});
|
|
126
|
+
if (Object.keys(changedPropsOrState).length > 0) {
|
|
127
|
+
// eslint-disable-next-line no-console
|
|
128
|
+
console.debug(`[${componentName}] Re-rendered due to:`, changedPropsOrState);
|
|
129
|
+
}
|
|
130
|
+
prev.current = propsAndStates;
|
|
131
|
+
});
|
|
132
|
+
};
|
|
133
|
+
exports.useRenderDebugger = useRenderDebugger;
|
|
98
134
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,iCAA0C;AAE1C,2CASqB;AARnB,0GAAA,WAAW,OAAA;AACX,4GAAA,aAAa,OAAA;AACb,gHAAA,iBAAiB,OAAA;AACjB,0GAAA,WAAW,OAAA;AACX,4GAAA,aAAa,OAAA;AACb,iHAAA,kBAAkB,OAAA;AAClB,4GAAA,aAAa,OAAA;AACb,+GAAA,gBAAgB,OAAA;AAGlB;;;;;;GAMG;AAEH;;;GAGG;AACH,SAAgB,WAAW,CAAI,KAAQ;IACrC,0EAA0E;IAC1E,qEAAqE;IACrE,8DAA8D;IAC9D,MAAM,GAAG,GAAQ,IAAA,cAAM,GAAK,CAAC;IAC7B,6BAA6B;IAC7B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;IACtB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,+BAA+B;IAC5C,mEAAmE;IACnE,OAAO,GAAG,CAAC,OAAO,CAAC;AACrB,CAAC;AAXD,kCAWC;AAED;;;;;;;GAOG;AACH,SAAgB,iBAAiB,CAC/B,UAAmB,EACnB,YAAuB,EACvB,kBAA4B,EAAE;IAE9B,MAAM,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAE/C,8DAA8D;IAC9D,MAAM,WAAW,GAAQ,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE;QACxE,IAAI,YAAY,KAAK,SAAS,EAAE;YAC9B,OAAO,KAAK,CAAC;SACd;QACD,IAAI,UAAU,KAAK,YAAY,CAAC,KAAK,CAAC,EAAE;YACtC,MAAM,OAAO,GAAG,eAAe,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;YAChD,uCAEM,KAAa,KACjB,CAAC,OAAO,CAAC,EAAE;oBACT,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC;oBAC3B,KAAK,EAAE,UAAU;iBAClB,IACD;SACH;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,EAAE;QACnC,OAAO,CAAC,IAAI,CAAC,wBAAwB,EAAE,WAAW,CAAC,CAAC;KACrD;IAED,2FAA2F;IAC3F,IAAA,iBAAS,EAAC,UAAiB,EAAE,YAAY,CAAC,CAAC;AAC7C,CAAC;AAjCD,8CAiCC;AAED;;GAEG;AACH,SAAgB,cAAc;IAC5B,MAAM,KAAK,GAAG,IAAA,cAAM,EAAC,CAAC,CAAC,CAAC;IAExB,KAAK,CAAC,OAAO,EAAE,CAAC;IAEhB,OAAO,KAAK,CAAC,OAAO,CAAC;AACvB,CAAC;AAND,wCAMC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,iCAA0C;AAE1C,2CASqB;AARnB,0GAAA,WAAW,OAAA;AACX,4GAAA,aAAa,OAAA;AACb,gHAAA,iBAAiB,OAAA;AACjB,0GAAA,WAAW,OAAA;AACX,4GAAA,aAAa,OAAA;AACb,iHAAA,kBAAkB,OAAA;AAClB,4GAAA,aAAa,OAAA;AACb,+GAAA,gBAAgB,OAAA;AAGlB;;;;;;GAMG;AAEH;;;GAGG;AACH,SAAgB,WAAW,CAAI,KAAQ;IACrC,0EAA0E;IAC1E,qEAAqE;IACrE,8DAA8D;IAC9D,MAAM,GAAG,GAAQ,IAAA,cAAM,GAAK,CAAC;IAC7B,6BAA6B;IAC7B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;IACtB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,+BAA+B;IAC5C,mEAAmE;IACnE,OAAO,GAAG,CAAC,OAAO,CAAC;AACrB,CAAC;AAXD,kCAWC;AAED;;;;;;;GAOG;AACH,SAAgB,iBAAiB,CAC/B,UAAmB,EACnB,YAAuB,EACvB,kBAA4B,EAAE;IAE9B,MAAM,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAE/C,8DAA8D;IAC9D,MAAM,WAAW,GAAQ,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE;QACxE,IAAI,YAAY,KAAK,SAAS,EAAE;YAC9B,OAAO,KAAK,CAAC;SACd;QACD,IAAI,UAAU,KAAK,YAAY,CAAC,KAAK,CAAC,EAAE;YACtC,MAAM,OAAO,GAAG,eAAe,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;YAChD,uCAEM,KAAa,KACjB,CAAC,OAAO,CAAC,EAAE;oBACT,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC;oBAC3B,KAAK,EAAE,UAAU;iBAClB,IACD;SACH;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,EAAE;QACnC,OAAO,CAAC,IAAI,CAAC,wBAAwB,EAAE,WAAW,CAAC,CAAC;KACrD;IAED,2FAA2F;IAC3F,IAAA,iBAAS,EAAC,UAAiB,EAAE,YAAY,CAAC,CAAC;AAC7C,CAAC;AAjCD,8CAiCC;AAED;;GAEG;AACH,SAAgB,cAAc;IAC5B,MAAM,KAAK,GAAG,IAAA,cAAM,EAAC,CAAC,CAAC,CAAC;IAExB,KAAK,CAAC,OAAO,EAAE,CAAC;IAEhB,OAAO,KAAK,CAAC,OAAO,CAAC;AACvB,CAAC;AAND,wCAMC;AAED;;;;;;;;;;;;;;;GAeG;AACI,MAAM,iBAAiB,GAAG,CAC/B,aAAqB,EACrB,cAAuC,EACvC,EAAE;IACF,MAAM,IAAI,GAAG,IAAA,cAAM,EAAC,cAAc,CAAC,CAAC;IAEpC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,mBAAmB,GACvB,EAAE,CAAC;QAEL,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,OAAO,CACpC,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAoB,EAAE,EAAE;YACrC,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,QAAQ,EAAE;gBAClC,mBAAmB,CAAC,GAAG,CAAC,GAAG;oBACzB,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;oBACtB,GAAG,EAAE,QAAQ;iBACd,CAAC;aACH;QACH,CAAC,EACD,EAAE,CACH,CAAC;QAEF,IAAI,MAAM,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YAC/C,sCAAsC;YACtC,OAAO,CAAC,KAAK,CACX,IAAI,aAAa,uBAAuB,EACxC,mBAAmB,CACpB,CAAC;SACH;QAED,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC;IAChC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAhCW,QAAA,iBAAiB,qBAgC5B"}
|
package/lib/esm/hooks/index.js
CHANGED
|
@@ -81,4 +81,39 @@ export function useRenderCount() {
|
|
|
81
81
|
count.current++;
|
|
82
82
|
return count.current;
|
|
83
83
|
}
|
|
84
|
+
/**
|
|
85
|
+
* The `useRenderDebugger` outputs to console what props or states are causing a render (or re-render) of a component
|
|
86
|
+
* if all relevant props and states variables are passed to the hook.
|
|
87
|
+
* For debugging purposes only.
|
|
88
|
+
*
|
|
89
|
+
* Howto use:
|
|
90
|
+
* Place the hook at the top of the component you want to debug and call it like this:
|
|
91
|
+
* useRenderDebugger('MyComponent', props);
|
|
92
|
+
*
|
|
93
|
+
* if there are state variables include them as well:
|
|
94
|
+
*
|
|
95
|
+
* useRenderDebugger('MyComponent', { ...props, stateVar1, stateVar2 });
|
|
96
|
+
*
|
|
97
|
+
* @param componentName Name of the component to debug
|
|
98
|
+
* @param propsAndStates an object containing all props and states variables of the component
|
|
99
|
+
*/
|
|
100
|
+
export const useRenderDebugger = (componentName, propsAndStates) => {
|
|
101
|
+
const prev = useRef(propsAndStates);
|
|
102
|
+
useEffect(() => {
|
|
103
|
+
const changedPropsOrState = {};
|
|
104
|
+
Object.entries(propsAndStates).forEach(([key, newValue]) => {
|
|
105
|
+
if (prev.current[key] !== newValue) {
|
|
106
|
+
changedPropsOrState[key] = {
|
|
107
|
+
old: prev.current[key],
|
|
108
|
+
new: newValue,
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
}, {});
|
|
112
|
+
if (Object.keys(changedPropsOrState).length > 0) {
|
|
113
|
+
// eslint-disable-next-line no-console
|
|
114
|
+
console.debug(`[${componentName}] Re-rendered due to:`, changedPropsOrState);
|
|
115
|
+
}
|
|
116
|
+
prev.current = propsAndStates;
|
|
117
|
+
});
|
|
118
|
+
};
|
|
84
119
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EACL,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,aAAa,EACb,gBAAgB,GACjB,MAAM,aAAa,CAAC;AAErB;;;;;;GAMG;AAEH;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAI,KAAQ;IACrC,0EAA0E;IAC1E,qEAAqE;IACrE,8DAA8D;IAC9D,MAAM,GAAG,GAAQ,MAAM,EAAK,CAAC;IAC7B,6BAA6B;IAC7B,SAAS,CAAC,GAAG,EAAE;QACb,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;IACtB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,+BAA+B;IAC5C,mEAAmE;IACnE,OAAO,GAAG,CAAC,OAAO,CAAC;AACrB,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,iBAAiB,CAC/B,UAAmB,EACnB,YAAuB,EACvB,kBAA4B,EAAE;IAE9B,MAAM,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAE/C,8DAA8D;IAC9D,MAAM,WAAW,GAAQ,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE;QACxE,IAAI,YAAY,KAAK,SAAS,EAAE;YAC9B,OAAO,KAAK,CAAC;SACd;QACD,IAAI,UAAU,KAAK,YAAY,CAAC,KAAK,CAAC,EAAE;YACtC,MAAM,OAAO,GAAG,eAAe,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;YAChD,uCAEM,KAAa,KACjB,CAAC,OAAO,CAAC,EAAE;oBACT,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC;oBAC3B,KAAK,EAAE,UAAU;iBAClB,IACD;SACH;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,EAAE;QACnC,OAAO,CAAC,IAAI,CAAC,wBAAwB,EAAE,WAAW,CAAC,CAAC;KACrD;IAED,2FAA2F;IAC3F,SAAS,CAAC,UAAiB,EAAE,YAAY,CAAC,CAAC;AAC7C,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,cAAc;IAC5B,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAExB,KAAK,CAAC,OAAO,EAAE,CAAC;IAEhB,OAAO,KAAK,CAAC,OAAO,CAAC;AACvB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -45,3 +45,20 @@ export declare function useEffectDebugger(effectHook: unknown, dependencies: unk
|
|
|
45
45
|
* The `useRenderCount` hook returns the number of times a component has rendered.
|
|
46
46
|
*/
|
|
47
47
|
export declare function useRenderCount(): number;
|
|
48
|
+
/**
|
|
49
|
+
* The `useRenderDebugger` outputs to console what props or states are causing a render (or re-render) of a component
|
|
50
|
+
* if all relevant props and states variables are passed to the hook.
|
|
51
|
+
* For debugging purposes only.
|
|
52
|
+
*
|
|
53
|
+
* Howto use:
|
|
54
|
+
* Place the hook at the top of the component you want to debug and call it like this:
|
|
55
|
+
* useRenderDebugger('MyComponent', props);
|
|
56
|
+
*
|
|
57
|
+
* if there are state variables include them as well:
|
|
58
|
+
*
|
|
59
|
+
* useRenderDebugger('MyComponent', { ...props, stateVar1, stateVar2 });
|
|
60
|
+
*
|
|
61
|
+
* @param componentName Name of the component to debug
|
|
62
|
+
* @param propsAndStates an object containing all props and states variables of the component
|
|
63
|
+
*/
|
|
64
|
+
export declare const useRenderDebugger: (componentName: string, propsAndStates: Record<string, unknown>) => void;
|