@gechiui/compose/build/hooks/use-warn-on-change/index.js

GeChiUI higher-order components (HOCs).

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _usePrevious = _interopRequireDefault(require("../use-previous"));

/**
 * Internal dependencies
 */
// Disable reason: Object and object are distinctly different types in TypeScript and we mean the lowercase object in thise case
// but eslint wants to force us to use `Object`. See https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript

/* eslint-disable jsdoc/check-types */

/**
 * Hook that performs a shallow comparison between the preview value of an object
 * and the new one, if there's a difference, it prints it to the console.
 * this is useful in performance related work, to check why a component re-renders.
 *
 *  @example
 *
 * ```jsx
 * function MyComponent(props) {
 *    useWarnOnChange(props);
 *
 *    return "Something";
 * }
 * ```
 *
 * @param {object} object Object which changes to compare.
 * @param {string} prefix Just a prefix to show when console logging.
 */
function useWarnOnChange(object) {
  let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Change detection';
  const previousValues = (0, _usePrevious.default)(object);
  Object.entries(previousValues !== null && previousValues !== void 0 ? previousValues : []).forEach(_ref => {
    let [key, value] = _ref;

    if (value !== object[
    /** @type {keyof typeof object} */
    key]) {
      // eslint-disable-next-line no-console
      console.warn(`${prefix}: ${key} key changed:`, value, object[
      /** @type {keyof typeof object} */
      key]
      /* eslint-enable jsdoc/check-types */
      );
    }
  });
}

var _default = useWarnOnChange;
exports.default = _default;
//# sourceMappingURL=index.js.map