@trackunit/react-core-contexts-test 0.1.47 → 0.1.49

package/HookRenderer.cjs

@@ -11,6 +11,7 @@ require('react-router-dom');
 require('@apollo/client');
 require('@apollo/client/link/error');
 require('@apollo/client/testing');
+require('react');
 require('graphql');
 
 /**

package/HookRenderer.js

@@ -9,6 +9,7 @@ import 'react-router-dom';
 import '@apollo/client';
 import '@apollo/client/link/error';
 import '@apollo/client/testing';
+import 'react';
 import 'graphql';
 
 /**

package/index.cjs

@@ -12,6 +12,7 @@ require('react-router-dom');
 require('@apollo/client');
 require('@apollo/client/link/error');
 require('@apollo/client/testing');
+require('react');
 require('graphql');
 
 
@@ -24,4 +25,5 @@ exports.mockCurrentUserContext = index.mockCurrentUserContext;
 exports.mockEnvironmentContext = index.mockEnvironmentContext;
 exports.queryFor = index.queryFor;
 exports.rootContext = index.rootContext;
+exports.useLogPropsChanged = index.useLogPropsChanged;
 exports.validateIrisApp = index.validateIrisApp;

package/index.js

@@ -1,4 +1,4 @@
-export { M as MockContextProviderBuilder, d as doNothing, f as flushPromises, b as flushPromisesInAct, m as mockCurrentUserContext, a as mockEnvironmentContext, q as queryFor, r as rootContext, v as validateIrisApp } from './index2.js';
+export { M as MockContextProviderBuilder, d as doNothing, f as flushPromises, b as flushPromisesInAct, m as mockCurrentUserContext, a as mockEnvironmentContext, q as queryFor, r as rootContext, u as useLogPropsChanged, v as validateIrisApp } from './index2.js';
 import 'react/jsx-runtime';
 import '@testing-library/react';
 import '@trackunit/react-core-contexts-api';
@@ -8,4 +8,5 @@ import 'react-router-dom';
 import '@apollo/client';
 import '@apollo/client/link/error';
 import '@apollo/client/testing';
+import 'react';
 import 'graphql';

package/index2.cjs

@@ -9,6 +9,7 @@ var reactRouterDom = require('react-router-dom');
 var client = require('@apollo/client');
 var error = require('@apollo/client/link/error');
 var testing = require('@apollo/client/testing');
+var react$1 = require('react');
 var graphql = require('graphql');
 
 /******************************************************************************
@@ -380,6 +381,49 @@ const TestRoot = tailwindStyledComponents.tw.div `
   inline-block;
 `;
 
+/**
+ * Logs props that have changed.
+ * Use this for debugging which props force a component to re-render.
+ * This is a hook version of the class component lifecycle method `componentDidUpdate`.
+ * ALWAYS wrap in your own object.
+ *
+ * @param propsToWatch all the props to watch for changes
+ */
+const useLogPropsChanged = (propsToWatch) => {
+    var _a;
+    const prevPropsRef = react$1.useRef(propsToWatch);
+    const parentCaller = (_a = new Error().stack) === null || _a === void 0 ? void 0 : _a.split("\n")[2].trim();
+    react$1.useEffect(() => {
+        const changedProps = Object.entries(propsToWatch !== null && propsToWatch !== void 0 ? propsToWatch : {}).reduce((result, [key, value]) => {
+            if (prevPropsRef.current && prevPropsRef.current[key] !== value) {
+                result[key] = [prevPropsRef.current[key], value];
+            }
+            return result;
+        }, [Object.keys(propsToWatch !== null && propsToWatch !== void 0 ? propsToWatch : {})]);
+        if (Object.keys(changedProps).length > 0) {
+            // eslint-disable-next-line no-console
+            Object.keys(changedProps).forEach(changedProp => {
+                console.log("Props changed:", changedProp, parentCaller);
+                // JSON stringify is used to avoid console.table from logging the object reference
+                const result = JSON.parse(JSON.stringify(changedProps[changedProp]));
+                const result0 = result[0];
+                const result1 = result[1];
+                result0 &&
+                    Object.keys(result0).forEach(prop => {
+                        result0[prop] = JSON.stringify(result0[prop]);
+                    });
+                result1 &&
+                    Object.keys(result1).forEach(prop => {
+                        result1[prop] = JSON.stringify(result1[prop]);
+                    });
+                console.table([result0, result1]);
+            });
+            console.dir(changedProps);
+        }
+        prevPropsRef.current = propsToWatch;
+    });
+};
+
 /**
  *
  * @param document Document that represents the specific GQL query / mutation schema.
@@ -468,4 +512,5 @@ exports.mockCurrentUserContext = mockCurrentUserContext;
 exports.mockEnvironmentContext = mockEnvironmentContext;
 exports.queryFor = queryFor;
 exports.rootContext = rootContext;
+exports.useLogPropsChanged = useLogPropsChanged;
 exports.validateIrisApp = validateIrisApp;

package/index2.js

@@ -7,6 +7,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { ApolloLink } from '@apollo/client';
 import { onError } from '@apollo/client/link/error';
 import { MockLink, MockedProvider } from '@apollo/client/testing';
+import { useRef, useEffect } from 'react';
 import { GraphQLError } from 'graphql';
 
 /******************************************************************************
@@ -378,6 +379,49 @@ const TestRoot = tw.div `
   inline-block;
 `;
 
+/**
+ * Logs props that have changed.
+ * Use this for debugging which props force a component to re-render.
+ * This is a hook version of the class component lifecycle method `componentDidUpdate`.
+ * ALWAYS wrap in your own object.
+ *
+ * @param propsToWatch all the props to watch for changes
+ */
+const useLogPropsChanged = (propsToWatch) => {
+    var _a;
+    const prevPropsRef = useRef(propsToWatch);
+    const parentCaller = (_a = new Error().stack) === null || _a === void 0 ? void 0 : _a.split("\n")[2].trim();
+    useEffect(() => {
+        const changedProps = Object.entries(propsToWatch !== null && propsToWatch !== void 0 ? propsToWatch : {}).reduce((result, [key, value]) => {
+            if (prevPropsRef.current && prevPropsRef.current[key] !== value) {
+                result[key] = [prevPropsRef.current[key], value];
+            }
+            return result;
+        }, [Object.keys(propsToWatch !== null && propsToWatch !== void 0 ? propsToWatch : {})]);
+        if (Object.keys(changedProps).length > 0) {
+            // eslint-disable-next-line no-console
+            Object.keys(changedProps).forEach(changedProp => {
+                console.log("Props changed:", changedProp, parentCaller);
+                // JSON stringify is used to avoid console.table from logging the object reference
+                const result = JSON.parse(JSON.stringify(changedProps[changedProp]));
+                const result0 = result[0];
+                const result1 = result[1];
+                result0 &&
+                    Object.keys(result0).forEach(prop => {
+                        result0[prop] = JSON.stringify(result0[prop]);
+                    });
+                result1 &&
+                    Object.keys(result1).forEach(prop => {
+                        result1[prop] = JSON.stringify(result1[prop]);
+                    });
+                console.table([result0, result1]);
+            });
+            console.dir(changedProps);
+        }
+        prevPropsRef.current = propsToWatch;
+    });
+};
+
 /**
  *
  * @param document Document that represents the specific GQL query / mutation schema.
@@ -457,4 +501,4 @@ const validateIrisApp = (irisApp) => __awaiter(void 0, void 0, void 0, function*
     return null;
 });
 
-export { MockContextProviderBuilder as M, __awaiter as _, mockEnvironmentContext as a, flushPromisesInAct as b, doNothing as d, flushPromises as f, mockCurrentUserContext as m, queryFor as q, rootContext as r, validateIrisApp as v };
+export { MockContextProviderBuilder as M, __awaiter as _, mockEnvironmentContext as a, flushPromisesInAct as b, doNothing as d, flushPromises as f, mockCurrentUserContext as m, queryFor as q, rootContext as r, useLogPropsChanged as u, validateIrisApp as v };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-core-contexts-test",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "module": "./index.js",
@@ -10,8 +10,8 @@
   "dependencies": {
     "@apollo/client": "3.7.10",
     "@trackunit/react-core-contexts-api": "0.2.25",
-    "@trackunit/react-core-hooks": "0.2.43",
-    "@trackunit/tailwind-styled-components": "0.0.55",
+    "@trackunit/react-core-hooks": "0.2.44",
+    "@trackunit/tailwind-styled-components": "0.0.56",
     "graphql": "15.8.0",
     "react": "18.2.0",
     "react-router-dom": "6.4.5"

package/src/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./MockContextProviderBuilder";
 export * from "./mocks/mockCurrentUserContext";
 export * from "./mocks/mockEnvironmentContext";
+export * from "./useLogPropsChanged";
 export * from "./utils/doNothing";
 export * from "./utils/queryFor";
 export * from "./utils/validateIrisApp";

package/src/useLogPropsChanged.d.ts

@@ -0,0 +1,11 @@
+type PropsToWatch<P> = P extends object ? P : never;
+/**
+ * Logs props that have changed.
+ * Use this for debugging which props force a component to re-render.
+ * This is a hook version of the class component lifecycle method `componentDidUpdate`.
+ * ALWAYS wrap in your own object.
+ *
+ * @param propsToWatch all the props to watch for changes
+ */
+export declare const useLogPropsChanged: <P extends object>(propsToWatch: PropsToWatch<P> | null) => void;
+export {};