@trackunit/react-core-contexts-test 0.1.61 → 0.1.63

package/HookRenderer.cjs

@@ -4,6 +4,7 @@ var index = require('./index2.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@testing-library/react');
 var pure = require('@testing-library/react/pure');
+require('react');
 require('@trackunit/react-core-contexts-api');
 require('@trackunit/react-core-hooks');
 require('@trackunit/tailwind-styled-components');
@@ -11,7 +12,6 @@ require('react-router-dom');
 require('@apollo/client');
 require('@apollo/client/link/error');
 require('@apollo/client/testing');
-require('react');
 require('graphql');
 
 /**

package/HookRenderer.js

@@ -2,6 +2,7 @@ import { _ as __awaiter, f as flushPromises } from './index2.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { act } from '@testing-library/react';
 import { renderHook } from '@testing-library/react/pure';
+import 'react';
 import '@trackunit/react-core-contexts-api';
 import '@trackunit/react-core-hooks';
 import '@trackunit/tailwind-styled-components';
@@ -9,7 +10,6 @@ import 'react-router-dom';
 import '@apollo/client';
 import '@apollo/client/link/error';
 import '@apollo/client/testing';
-import 'react';
 import 'graphql';
 
 /**

package/index.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var index = require('./index2.cjs');
 require('react/jsx-runtime');
+require('react');
 require('@testing-library/react');
 require('@trackunit/react-core-contexts-api');
 require('@trackunit/react-core-hooks');
@@ -12,11 +13,11 @@ require('react-router-dom');
 require('@apollo/client');
 require('@apollo/client/link/error');
 require('@apollo/client/testing');
-require('react');
 require('graphql');
 
 
 
+exports.Debugger = index.Debugger;
 exports.MockContextProviderBuilder = index.MockContextProviderBuilder;
 exports.doNothing = index.doNothing;
 exports.flushPromises = index.flushPromises;

package/index.js

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

package/index2.cjs

@@ -1,7 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('@testing-library/react');
+var react = require('react');
+var react$1 = require('@testing-library/react');
 var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
 var reactCoreHooks = require('@trackunit/react-core-hooks');
 var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
@@ -9,9 +10,76 @@ 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');
 
+/**
+ * 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.useRef(propsToWatch);
+    const parentCaller = (_a = new Error().stack) === null || _a === void 0 ? void 0 : _a.split("\n")[2].trim();
+    react.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;
+        }, {});
+        if (Object.keys(changedProps).length > 0) {
+            // eslint-disable-next-line no-console
+            Object.keys(changedProps).forEach(changedProp => {
+                // eslint-disable-next-line no-console
+                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]);
+                    });
+                // eslint-disable-next-line no-console
+                console.table([result0, result1]);
+            });
+            // eslint-disable-next-line no-console
+            console.dir(changedProps);
+        }
+        prevPropsRef.current = propsToWatch;
+    }, [parentCaller, propsToWatch]);
+};
+/**
+ *  Debugger component for debugging state changes and re-renders.
+ * This component will log when it is mounted and unmounted.
+ * It will also log when any of its props change.
+ *
+ * @param logPropsChanges the props to watch for changes
+ * @param children the children to render
+ */
+const Debugger = ({ logPropsChanges, children }) => {
+    useLogPropsChanged(logPropsChanges);
+    // eslint-disable-next-line no-console
+    console.log("Debugger is rendering");
+    react.useEffect(() => {
+        // eslint-disable-next-line no-console
+        console.log("Debugger is mounting");
+        return () => {
+            // eslint-disable-next-line no-console
+            console.log("Debugger is unmounting");
+        };
+    }, []);
+    return jsxRuntime.jsx("div", Object.assign({ className: "Debugger" }, { children: children }));
+};
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -198,7 +266,7 @@ const flushPromises = (waitTimeInMS = 0) => {
  * @returns {Promise<void>} - Returns a promise that resolves after the wait time.
  */
 const flushPromisesInAct = (waitTimeInMS = 0) => {
-    return react.act(() => {
+    return react$1.act(() => {
         return new Promise(resolve => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (global.ORG_setTimeout) {
@@ -377,16 +445,16 @@ class MockContextProviderBuilder {
         return __awaiter(this, void 0, void 0, function* () {
             this.validateSuppliedMocks();
             let mountedcomponent;
-            yield react.act(() => __awaiter(this, void 0, void 0, function* () {
-                mountedcomponent = react.render(child, {
+            yield react$1.act(() => __awaiter(this, void 0, void 0, function* () {
+                mountedcomponent = react$1.render(child, {
                     wrapper: ({ children }) => this.getMockedCompositionRoot(children),
                 });
                 yield flushPromises();
             }));
-            yield react.act(() => __awaiter(this, void 0, void 0, function* () {
+            yield react$1.act(() => __awaiter(this, void 0, void 0, function* () {
                 yield flushPromises();
             }));
-            yield react.act(() => __awaiter(this, void 0, void 0, function* () {
+            yield react$1.act(() => __awaiter(this, void 0, void 0, function* () {
                 yield flushPromises();
             }));
             return mountedcomponent;
@@ -423,52 +491,6 @@ 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 => {
-                // eslint-disable-next-line no-console
-                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]);
-                    });
-                // eslint-disable-next-line no-console
-                console.table([result0, result1]);
-            });
-            // eslint-disable-next-line no-console
-            console.dir(changedProps);
-        }
-        prevPropsRef.current = propsToWatch;
-    });
-};
-
 /**
  *
  * @param document Document that represents the specific GQL query / mutation schema.
@@ -548,6 +570,7 @@ const validateIrisApp = (irisApp) => __awaiter(void 0, void 0, void 0, function*
     return null;
 });
 
+exports.Debugger = Debugger;
 exports.MockContextProviderBuilder = MockContextProviderBuilder;
 exports.__awaiter = __awaiter;
 exports.doNothing = doNothing;

package/index2.js

@@ -1,4 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
 import { act, render } from '@testing-library/react';
 import { AssetSortByProperty, SortOrder, UserSubscriptionPackage } from '@trackunit/react-core-contexts-api';
 import { EnvironmentContextProvider, CurrentUserProvider, AnalyticsContext, UserSubscriptionProvider, OemBrandingContextProvider, TokenProvider, ToastProvider, GlobalSelectionProvider, AssetSortingProvider } from '@trackunit/react-core-hooks';
@@ -7,9 +8,76 @@ 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';
 
+/**
+ * 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;
+        }, {});
+        if (Object.keys(changedProps).length > 0) {
+            // eslint-disable-next-line no-console
+            Object.keys(changedProps).forEach(changedProp => {
+                // eslint-disable-next-line no-console
+                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]);
+                    });
+                // eslint-disable-next-line no-console
+                console.table([result0, result1]);
+            });
+            // eslint-disable-next-line no-console
+            console.dir(changedProps);
+        }
+        prevPropsRef.current = propsToWatch;
+    }, [parentCaller, propsToWatch]);
+};
+/**
+ *  Debugger component for debugging state changes and re-renders.
+ * This component will log when it is mounted and unmounted.
+ * It will also log when any of its props change.
+ *
+ * @param logPropsChanges the props to watch for changes
+ * @param children the children to render
+ */
+const Debugger = ({ logPropsChanges, children }) => {
+    useLogPropsChanged(logPropsChanges);
+    // eslint-disable-next-line no-console
+    console.log("Debugger is rendering");
+    useEffect(() => {
+        // eslint-disable-next-line no-console
+        console.log("Debugger is mounting");
+        return () => {
+            // eslint-disable-next-line no-console
+            console.log("Debugger is unmounting");
+        };
+    }, []);
+    return jsx("div", Object.assign({ className: "Debugger" }, { children: children }));
+};
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -421,52 +489,6 @@ 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 => {
-                // eslint-disable-next-line no-console
-                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]);
-                    });
-                // eslint-disable-next-line no-console
-                console.table([result0, result1]);
-            });
-            // eslint-disable-next-line no-console
-            console.dir(changedProps);
-        }
-        prevPropsRef.current = propsToWatch;
-    });
-};
-
 /**
  *
  * @param document Document that represents the specific GQL query / mutation schema.
@@ -546,4 +568,4 @@ const validateIrisApp = (irisApp) => __awaiter(void 0, void 0, void 0, function*
     return null;
 });
 
-export { MockContextProviderBuilder as M, __awaiter as _, mockCurrentUserContext as a, mockEnvironmentContext as b, flushPromisesInAct as c, doNothing as d, flushPromises as f, mockAnalyticsContext as m, queryFor as q, rootContext as r, useLogPropsChanged as u, validateIrisApp as v };
+export { Debugger as D, MockContextProviderBuilder as M, __awaiter as _, mockCurrentUserContext as a, mockEnvironmentContext as b, flushPromisesInAct as c, doNothing as d, flushPromises as f, mockAnalyticsContext 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.61",
+  "version": "0.1.63",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "module": "./index.js",

package/src/debugger.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+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;
+/**
+ *  Debugger component for debugging state changes and re-renders.
+ * This component will log when it is mounted and unmounted.
+ * It will also log when any of its props change.
+ *
+ * @param logPropsChanges the props to watch for changes
+ * @param children the children to render
+ */
+export declare const Debugger: ({ logPropsChanges, children }: {
+    children: React.ReactNode;
+    logPropsChanges: {};
+}) => JSX.Element;
+export {};

package/src/index.d.ts

@@ -1,8 +1,8 @@
+export * from "./debugger";
 export * from "./MockContextProviderBuilder";
 export * from "./mocks/mockAnalyticsContext";
 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

@@ -1,11 +0,0 @@
-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 {};