@trackunit/react-core-contexts-test 0.1.68 → 0.1.69

package/index.cjs

@@ -27,5 +27,5 @@ exports.mockCurrentUserContext = index.mockCurrentUserContext;
 exports.mockEnvironmentContext = index.mockEnvironmentContext;
 exports.queryFor = index.queryFor;
 exports.trackunitProviders = index.trackunitProviders;
-exports.useLogPropsChanged = index.useLogPropsChanged;
+exports.useDebugger = index.useDebugger;
 exports.validateIrisApp = index.validateIrisApp;

package/index.js

@@ -1,4 +1,4 @@
-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, t as trackunitProviders, 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, t as trackunitProviders, u as useDebugger, v as validateIrisApp } from './index2.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@testing-library/react';

package/index2.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var react$1 = require('@testing-library/react');
+var React = require('react');
+var react = 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');
@@ -12,20 +12,30 @@ var error = require('@apollo/client/link/error');
 var testing = require('@apollo/client/testing');
 var graphql = require('graphql');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
 /**
  * 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 id optional id to use for logging or it will guess the id from the stack trace
  * @param propsToWatch all the props to watch for changes
+ * @example
+ * const propsToWatch = { foo: props.foo, bar: props.bar };
+ * useDebugger({ id: "MyComponent", propsToWatch });
  */
-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]) => {
+const useDebugger = ({ id, propsToWatch, }) => {
+    const prevPropsRef = React.useRef(propsToWatch);
+    const uniqueId = React.useMemo(() => {
+        var _a;
+        return id || ((_a = new Error().stack) === null || _a === void 0 ? void 0 : _a.split("\n")[2].trim()) || "unknown-id";
+    }, [id]);
+    React.useEffect(() => {
+        const changedProps = Object.entries(propsToWatch || {}).reduce((result, [key, value]) => {
             if (prevPropsRef.current && prevPropsRef.current[key] !== value) {
                 result[key + ""] = [prevPropsRef.current[key], value];
             }
@@ -35,7 +45,7 @@ const useLogPropsChanged = (propsToWatch) => {
             // eslint-disable-next-line no-console
             Object.keys(changedProps).forEach(changedProp => {
                 // eslint-disable-next-line no-console
-                console.log("Props changed:", changedProp, parentCaller);
+                console.log(`${uniqueId} changed property: ${changedProp}`);
                 // 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];
@@ -55,28 +65,41 @@ const useLogPropsChanged = (propsToWatch) => {
             console.dir(changedProps);
         }
         prevPropsRef.current = propsToWatch;
-    }, [parentCaller, propsToWatch]);
+    }, [propsToWatch, uniqueId]);
 };
 /**
- *  Debugger component for debugging state changes and re-renders.
- * This component will log when it is mounted and unmounted.
+ * Debugger component for debugging state changes and re-renders.
+ *
+ * This component will log when it is mounted, re-renders or unmounted.
  * It will also log when any of its props change.
  *
- * @param logPropsChanges the props to watch for changes
+ * @param id optional id to use for logging
+ * @param stop if true, will stop execution and open debugger
+ * @param logPropsChanges optional object with props to watch for changes
  * @param children the children to render
  */
-const Debugger = ({ logPropsChanges, children }) => {
-    useLogPropsChanged(logPropsChanges);
+const Debugger = ({ id, logPropsChanges, stop, children, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const uniqueId = id ||
+        ((_e = (_d = (_c = (_b = (_a = React__default["default"]["__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED"]) === null || _a === void 0 ? void 0 : _a.ReactCurrentOwner) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c._debugOwner) === null || _d === void 0 ? void 0 : _d.type) === null || _e === void 0 ? void 0 : _e.name) ||
+        ((_f = new Error().stack) === null || _f === void 0 ? void 0 : _f.split("\n")[2].trim()) ||
+        "unknown-id";
+    useDebugger({ id: uniqueId, propsToWatch: logPropsChanges || {} });
     // eslint-disable-next-line no-console
-    console.log("Debugger is rendering");
-    react.useEffect(() => {
+    console.log(`${uniqueId} Debugger is rendering`);
+    React.useEffect(() => {
         // eslint-disable-next-line no-console
-        console.log("Debugger is mounting");
+        console.log(`${uniqueId} Debugger is mounting`);
         return () => {
             // eslint-disable-next-line no-console
-            console.log("Debugger is unmounting");
+            console.log(`${uniqueId} Debugger is unmounting`);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    if (stop === true) {
+        // eslint-disable-next-line no-debugger
+        debugger;
+    }
     return jsxRuntime.jsx("div", Object.assign({ className: "Debugger" }, { children: children }));
 };
 
@@ -267,7 +290,7 @@ const flushPromises = (waitTimeInMS = 0) => {
  * @returns {Promise<void>} - Returns a promise that resolves after the wait time.
  */
 const flushPromisesInAct = (waitTimeInMS = 0) => {
-    return react$1.act(() => {
+    return react.act(() => {
         return new Promise(resolve => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (global.ORG_setTimeout) {
@@ -446,16 +469,16 @@ class MockContextProviderBuilder {
         return __awaiter(this, void 0, void 0, function* () {
             this.validateSuppliedMocks();
             let mountedcomponent;
-            yield react$1.act(() => __awaiter(this, void 0, void 0, function* () {
-                mountedcomponent = react$1.render(child, {
+            yield react.act(() => __awaiter(this, void 0, void 0, function* () {
+                mountedcomponent = react.render(child, {
                     wrapper: ({ children }) => this.getMockedCompositionRoot(children),
                 });
                 yield flushPromises();
             }));
-            yield react$1.act(() => __awaiter(this, void 0, void 0, function* () {
+            yield react.act(() => __awaiter(this, void 0, void 0, function* () {
                 yield flushPromises();
             }));
-            yield react$1.act(() => __awaiter(this, void 0, void 0, function* () {
+            yield react.act(() => __awaiter(this, void 0, void 0, function* () {
                 yield flushPromises();
             }));
             return mountedcomponent;
@@ -582,5 +605,5 @@ exports.mockCurrentUserContext = mockCurrentUserContext;
 exports.mockEnvironmentContext = mockEnvironmentContext;
 exports.queryFor = queryFor;
 exports.trackunitProviders = trackunitProviders;
-exports.useLogPropsChanged = useLogPropsChanged;
+exports.useDebugger = useDebugger;
 exports.validateIrisApp = validateIrisApp;

package/index2.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
+import React, { useRef, useMemo, 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';
@@ -16,14 +16,20 @@ import { GraphQLError } from 'graphql';
  * This is a hook version of the class component lifecycle method `componentDidUpdate`.
  * ALWAYS wrap in your own object.
  *
+ * @param id optional id to use for logging or it will guess the id from the stack trace
  * @param propsToWatch all the props to watch for changes
+ * @example
+ * const propsToWatch = { foo: props.foo, bar: props.bar };
+ * useDebugger({ id: "MyComponent", propsToWatch });
  */
-const useLogPropsChanged = (propsToWatch) => {
-    var _a;
+const useDebugger = ({ id, propsToWatch, }) => {
     const prevPropsRef = useRef(propsToWatch);
-    const parentCaller = (_a = new Error().stack) === null || _a === void 0 ? void 0 : _a.split("\n")[2].trim();
+    const uniqueId = useMemo(() => {
+        var _a;
+        return id || ((_a = new Error().stack) === null || _a === void 0 ? void 0 : _a.split("\n")[2].trim()) || "unknown-id";
+    }, [id]);
     useEffect(() => {
-        const changedProps = Object.entries(propsToWatch !== null && propsToWatch !== void 0 ? propsToWatch : {}).reduce((result, [key, value]) => {
+        const changedProps = Object.entries(propsToWatch || {}).reduce((result, [key, value]) => {
             if (prevPropsRef.current && prevPropsRef.current[key] !== value) {
                 result[key + ""] = [prevPropsRef.current[key], value];
             }
@@ -33,7 +39,7 @@ const useLogPropsChanged = (propsToWatch) => {
             // eslint-disable-next-line no-console
             Object.keys(changedProps).forEach(changedProp => {
                 // eslint-disable-next-line no-console
-                console.log("Props changed:", changedProp, parentCaller);
+                console.log(`${uniqueId} changed property: ${changedProp}`);
                 // 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];
@@ -53,28 +59,41 @@ const useLogPropsChanged = (propsToWatch) => {
             console.dir(changedProps);
         }
         prevPropsRef.current = propsToWatch;
-    }, [parentCaller, propsToWatch]);
+    }, [propsToWatch, uniqueId]);
 };
 /**
- *  Debugger component for debugging state changes and re-renders.
- * This component will log when it is mounted and unmounted.
+ * Debugger component for debugging state changes and re-renders.
+ *
+ * This component will log when it is mounted, re-renders or unmounted.
  * It will also log when any of its props change.
  *
- * @param logPropsChanges the props to watch for changes
+ * @param id optional id to use for logging
+ * @param stop if true, will stop execution and open debugger
+ * @param logPropsChanges optional object with props to watch for changes
  * @param children the children to render
  */
-const Debugger = ({ logPropsChanges, children }) => {
-    useLogPropsChanged(logPropsChanges);
+const Debugger = ({ id, logPropsChanges, stop, children, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const uniqueId = id ||
+        ((_e = (_d = (_c = (_b = (_a = React["__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED"]) === null || _a === void 0 ? void 0 : _a.ReactCurrentOwner) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c._debugOwner) === null || _d === void 0 ? void 0 : _d.type) === null || _e === void 0 ? void 0 : _e.name) ||
+        ((_f = new Error().stack) === null || _f === void 0 ? void 0 : _f.split("\n")[2].trim()) ||
+        "unknown-id";
+    useDebugger({ id: uniqueId, propsToWatch: logPropsChanges || {} });
     // eslint-disable-next-line no-console
-    console.log("Debugger is rendering");
+    console.log(`${uniqueId} Debugger is rendering`);
     useEffect(() => {
         // eslint-disable-next-line no-console
-        console.log("Debugger is mounting");
+        console.log(`${uniqueId} Debugger is mounting`);
         return () => {
             // eslint-disable-next-line no-console
-            console.log("Debugger is unmounting");
+            console.log(`${uniqueId} Debugger is unmounting`);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    if (stop === true) {
+        // eslint-disable-next-line no-debugger
+        debugger;
+    }
     return jsx("div", Object.assign({ className: "Debugger" }, { children: children }));
 };
 
@@ -569,4 +588,4 @@ const validateIrisApp = (irisApp) => __awaiter(void 0, void 0, void 0, function*
     return null;
 });
 
-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, trackunitProviders as t, 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, trackunitProviders as t, useDebugger as u, validateIrisApp as v };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-core-contexts-test",
-  "version": "0.1.68",
+  "version": "0.1.69",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "module": "./index.js",

package/src/debugger.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 type PropsToWatch<P> = P extends object ? P : never;
 /**
  * Logs props that have changed.
@@ -6,19 +6,31 @@ type PropsToWatch<P> = P extends object ? P : never;
  * This is a hook version of the class component lifecycle method `componentDidUpdate`.
  * ALWAYS wrap in your own object.
  *
+ * @param id optional id to use for logging or it will guess the id from the stack trace
  * @param propsToWatch all the props to watch for changes
+ * @example
+ * const propsToWatch = { foo: props.foo, bar: props.bar };
+ * useDebugger({ id: "MyComponent", propsToWatch });
  */
-export declare const useLogPropsChanged: <P extends object>(propsToWatch: PropsToWatch<P> | null) => void;
+export declare const useDebugger: <P extends object>({ id, propsToWatch, }: {
+    id?: string | undefined;
+    propsToWatch: PropsToWatch<P> | null;
+}) => void;
 /**
- *  Debugger component for debugging state changes and re-renders.
- * This component will log when it is mounted and unmounted.
+ * Debugger component for debugging state changes and re-renders.
+ *
+ * This component will log when it is mounted, re-renders or unmounted.
  * It will also log when any of its props change.
  *
- * @param logPropsChanges the props to watch for changes
+ * @param id optional id to use for logging
+ * @param stop if true, will stop execution and open debugger
+ * @param logPropsChanges optional object with props to watch for changes
  * @param children the children to render
  */
-export declare const Debugger: ({ logPropsChanges, children }: {
+export declare const Debugger: ({ id, logPropsChanges, stop, children, }: {
     children: React.ReactNode;
-    logPropsChanges: {};
+    id?: string | undefined;
+    stop?: boolean | undefined;
+    logPropsChanges?: {} | undefined;
 }) => JSX.Element;
 export {};