jotai/umd/devtools.development.js

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('jotai')) :
  typeof define === 'function' && define.amd ? define(['exports', 'react', 'jotai'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.jotaiDevtools = {}, global.React, global.jotai));
})(this, (function (exports, react, jotai) { 'use strict';

  function _extends() {
    _extends = Object.assign ? Object.assign.bind() : function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];

        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }

      return target;
    };
    return _extends.apply(this, arguments);
  }

  function _unsupportedIterableToArray(o, minLen) {
    if (!o) return;
    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
    var n = Object.prototype.toString.call(o).slice(8, -1);
    if (n === "Object" && o.constructor) n = o.constructor.name;
    if (n === "Map" || n === "Set") return Array.from(o);
    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
  }

  function _arrayLikeToArray(arr, len) {
    if (len == null || len > arr.length) len = arr.length;

    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

    return arr2;
  }

  function _createForOfIteratorHelperLoose(o, allowArrayLike) {
    var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
    if (it) return (it = it.call(o)).next.bind(it);

    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
      if (it) o = it;
      var i = 0;
      return function () {
        if (i >= o.length) return {
          done: true
        };
        return {
          done: false,
          value: o[i++]
        };
      };
    }

    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
  }

  var RESTORE_ATOMS = 'h';
  var DEV_SUBSCRIBE_STATE = 'n';
  var DEV_GET_MOUNTED_ATOMS = 'l';
  var DEV_GET_ATOM_STATE = 'a';
  var DEV_GET_MOUNTED = 'm';

  var atomToPrintable$1 = function atomToPrintable(atom) {
    return atom.debugLabel || atom.toString();
  };

  var stateToPrintable = function stateToPrintable(_ref) {
    var store = _ref[0],
        atoms = _ref[1];
    return Object.fromEntries(atoms.flatMap(function (atom) {
      var _store$DEV_GET_MOUNTE, _store$DEV_GET_ATOM_S;

      var mounted = (_store$DEV_GET_MOUNTE = store[DEV_GET_MOUNTED]) == null ? void 0 : _store$DEV_GET_MOUNTE.call(store, atom);

      if (!mounted) {
        return [];
      }

      var dependents = mounted.t;
      var atomState = ((_store$DEV_GET_ATOM_S = store[DEV_GET_ATOM_STATE]) == null ? void 0 : _store$DEV_GET_ATOM_S.call(store, atom)) || {};
      return [[atomToPrintable$1(atom), _extends({}, 'e' in atomState && {
        error: atomState.e
      }, 'p' in atomState && {
        promise: atomState.p
      }, 'v' in atomState && {
        value: atomState.v
      }, {
        dependents: Array.from(dependents).map(atomToPrintable$1)
      })]];
    }));
  };

  var useAtomsDebugValue = function useAtomsDebugValue(options) {
    var _options$enabled;

    var enabled = (_options$enabled = options == null ? void 0 : options.enabled) != null ? _options$enabled : true;
    var ScopeContext = jotai.SECRET_INTERNAL_getScopeContext(options == null ? void 0 : options.scope);

    var _useContext = react.useContext(ScopeContext),
        store = _useContext.s;

    var _useState = react.useState([]),
        atoms = _useState[0],
        setAtoms = _useState[1];

    react.useEffect(function () {
      var _store$DEV_SUBSCRIBE_;

      if (!enabled) {
        return;
      }

      var callback = function callback() {
        var _store$DEV_GET_MOUNTE2;

        setAtoms(Array.from(((_store$DEV_GET_MOUNTE2 = store[DEV_GET_MOUNTED_ATOMS]) == null ? void 0 : _store$DEV_GET_MOUNTE2.call(store)) || []));
      };

      var unsubscribe = (_store$DEV_SUBSCRIBE_ = store[DEV_SUBSCRIBE_STATE]) == null ? void 0 : _store$DEV_SUBSCRIBE_.call(store, callback);
      callback();
      return unsubscribe;
    }, [enabled, store]);
    react.useDebugValue([store, atoms], stateToPrintable);
  };

  function useAtomDevtools(anAtom, options, deprecatedScope) {
    if (typeof options === 'string' || typeof deprecatedScope !== 'undefined') {
      console.warn('DEPRECATED [useAtomDevtools] use DevtoolOptions');
      options = {
        name: options,
        scope: deprecatedScope
      };
    }

    var _ref = options || {},
        enabled = _ref.enabled,
        name = _ref.name,
        scope = _ref.scope;

    var extension;

    try {
      extension = (enabled != null ? enabled : true) && window.__REDUX_DEVTOOLS_EXTENSION__;
    } catch (_unused) {}

    if (!extension) {
      if (enabled) {
        console.warn('Please install/enable Redux devtools extension');
      }
    }

    var _useAtom = jotai.useAtom(anAtom, scope),
        value = _useAtom[0],
        setValue = _useAtom[1];

    var lastValue = react.useRef(value);
    var isTimeTraveling = react.useRef(false);
    var devtools = react.useRef();
    var atomName = name || anAtom.debugLabel || anAtom.toString();
    react.useEffect(function () {
      if (!extension) {
        return;
      }

      var setValueIfWritable = function setValueIfWritable(value) {
        if (typeof setValue === 'function') {
          setValue(value);
          return;
        }

        console.warn('[Warn] you cannot do write operations (Time-travelling, etc) in read-only atoms\n', anAtom);
      };

      devtools.current = extension.connect({
        name: atomName
      });
      var unsubscribe = devtools.current.subscribe(function (message) {
        var _message$payload3, _message$payload4;

        if (message.type === 'ACTION' && message.payload) {
          try {
            setValueIfWritable(JSON.parse(message.payload));
          } catch (e) {
            console.error('please dispatch a serializable value that JSON.parse() support\n', e);
          }
        } else if (message.type === 'DISPATCH' && message.state) {
          var _message$payload, _message$payload2;

          if (((_message$payload = message.payload) == null ? void 0 : _message$payload.type) === 'JUMP_TO_ACTION' || ((_message$payload2 = message.payload) == null ? void 0 : _message$payload2.type) === 'JUMP_TO_STATE') {
            isTimeTraveling.current = true;
            setValueIfWritable(JSON.parse(message.state));
          }
        } else if (message.type === 'DISPATCH' && ((_message$payload3 = message.payload) == null ? void 0 : _message$payload3.type) === 'COMMIT') {
          var _devtools$current;

          (_devtools$current = devtools.current) == null ? void 0 : _devtools$current.init(lastValue.current);
        } else if (message.type === 'DISPATCH' && ((_message$payload4 = message.payload) == null ? void 0 : _message$payload4.type) === 'IMPORT_STATE') {
          var _message$payload$next;

          var computedStates = ((_message$payload$next = message.payload.nextLiftedState) == null ? void 0 : _message$payload$next.computedStates) || [];
          computedStates.forEach(function (_ref2, index) {
            var state = _ref2.state;

            if (index === 0) {
              var _devtools$current2;

              (_devtools$current2 = devtools.current) == null ? void 0 : _devtools$current2.init(state);
            } else {
              setValueIfWritable(state);
            }
          });
        }
      });
      devtools.current.shouldInit = true;
      return unsubscribe;
    }, [anAtom, extension, atomName, setValue]);
    react.useEffect(function () {
      if (!devtools.current) {
        return;
      }

      lastValue.current = value;

      if (devtools.current.shouldInit) {
        devtools.current.init(value);
        devtools.current.shouldInit = false;
      } else if (isTimeTraveling.current) {
        isTimeTraveling.current = false;
      } else {
        devtools.current.send(atomName + " - " + new Date().toLocaleString(), value);
      }
    }, [anAtom, extension, atomName, value]);
  }

  var createAtomsSnapshot = function createAtomsSnapshot(store, atoms) {
    var tuples = atoms.map(function (atom) {
      var _store$DEV_GET_ATOM_S, _store$DEV_GET_ATOM_S2;

      var atomState = (_store$DEV_GET_ATOM_S = (_store$DEV_GET_ATOM_S2 = store[DEV_GET_ATOM_STATE]) == null ? void 0 : _store$DEV_GET_ATOM_S2.call(store, atom)) != null ? _store$DEV_GET_ATOM_S : {};
      return [atom, 'v' in atomState ? atomState.v : undefined];
    });
    return new Map(tuples);
  };

  function useAtomsSnapshot(scope) {
    var ScopeContext = jotai.SECRET_INTERNAL_getScopeContext(scope);
    var scopeContainer = react.useContext(ScopeContext);
    var store = scopeContainer.s;

    if (!store[DEV_SUBSCRIBE_STATE]) {
      throw new Error('useAtomsSnapshot can only be used in dev mode.');
    }

    var _useState = react.useState(function () {
      return new Map();
    }),
        atomsSnapshot = _useState[0],
        setAtomsSnapshot = _useState[1];

    react.useEffect(function () {
      var _store$DEV_SUBSCRIBE_;

      var callback = function callback() {
        var _store$DEV_GET_MOUNTE;

        var atoms = Array.from(((_store$DEV_GET_MOUNTE = store[DEV_GET_MOUNTED_ATOMS]) == null ? void 0 : _store$DEV_GET_MOUNTE.call(store)) || []);
        setAtomsSnapshot(createAtomsSnapshot(store, atoms));
      };

      var unsubscribe = (_store$DEV_SUBSCRIBE_ = store[DEV_SUBSCRIBE_STATE]) == null ? void 0 : _store$DEV_SUBSCRIBE_.call(store, callback);
      callback();
      return unsubscribe;
    }, [store]);
    return atomsSnapshot;
  }

  function useGotoAtomsSnapshot(scope) {
    var ScopeContext = jotai.SECRET_INTERNAL_getScopeContext(scope);
    var scopeContainer = react.useContext(ScopeContext);
    var store = scopeContainer.s;

    if (!store[DEV_SUBSCRIBE_STATE]) {
      throw new Error('useGotoAtomsSnapshot can only be used in dev mode.');
    }

    return react.useCallback(function (values) {
      store[RESTORE_ATOMS](values);
    }, [store]);
  }

  var isEqualAtomsValues = function isEqualAtomsValues(left, right) {
    return left.size === right.size && Array.from(left).every(function (_ref) {
      var left = _ref[0],
          v = _ref[1];
      return Object.is(right.get(left), v);
    });
  };

  var isEqualAtomsDependents = function isEqualAtomsDependents(left, right) {
    return left.size === right.size && Array.from(left).every(function (_ref2) {
      var a = _ref2[0],
          dLeft = _ref2[1];
      var dRight = right.get(a);
      return dRight && dLeft.size === dRight.size && Array.from(dLeft).every(function (d) {
        return dRight.has(d);
      });
    });
  };

  var atomToPrintable = function atomToPrintable(atom) {
    return atom.debugLabel ? atom + ":" + atom.debugLabel : "" + atom;
  };

  var getDevtoolsState = function getDevtoolsState(atomsSnapshot) {
    var values = {};
    atomsSnapshot.values.forEach(function (v, atom) {
      values[atomToPrintable(atom)] = v;
    });
    var dependents = {};
    atomsSnapshot.dependents.forEach(function (d, atom) {
      dependents[atomToPrintable(atom)] = Array.from(d).map(atomToPrintable);
    });
    return {
      values: values,
      dependents: dependents
    };
  };

  function useAtomsDevtools(name, options) {
    if (typeof options !== 'undefined' && typeof options !== 'object') {
      console.warn('DEPRECATED [useAtomsDevtools] use DevtoolsOptions');
      options = {
        scope: options
      };
    }

    var _ref3 = options || {},
        enabled = _ref3.enabled,
        scope = _ref3.scope;

    var ScopeContext = jotai.SECRET_INTERNAL_getScopeContext(scope);

    var _useContext = react.useContext(ScopeContext),
        store = _useContext.s,
        versionedWrite = _useContext.w;

    var extension;

    try {
      extension = (enabled != null ? enabled : true) && window.__REDUX_DEVTOOLS_EXTENSION__;
    } catch (_unused) {}

    if (!extension) {
      if (enabled) {
        console.warn('Please install/enable Redux devtools extension');
      }
    }

    if (extension && !store[DEV_SUBSCRIBE_STATE]) {
      throw new Error('useAtomsDevtools can only be used in dev mode.');
    }

    var _useState = react.useState(function () {
      return {
        values: new Map(),
        dependents: new Map()
      };
    }),
        atomsSnapshot = _useState[0],
        setAtomsSnapshot = _useState[1];

    react.useEffect(function () {
      var _store$DEV_SUBSCRIBE_;

      if (!extension) {
        return;
      }

      var callback = function callback() {
        var values = new Map();
        var dependents = new Map();

        for (var _iterator = _createForOfIteratorHelperLoose(((_store$DEV_GET_MOUNTE = store[DEV_GET_MOUNTED_ATOMS]) == null ? void 0 : _store$DEV_GET_MOUNTE.call(store)) || []), _step; !(_step = _iterator()).done;) {
          var _store$DEV_GET_MOUNTE, _store$DEV_GET_ATOM_S, _store$DEV_GET_MOUNTE2;

          var atom = _step.value;
          var atomState = (_store$DEV_GET_ATOM_S = store[DEV_GET_ATOM_STATE]) == null ? void 0 : _store$DEV_GET_ATOM_S.call(store, atom);

          if (atomState) {
            if (atomState.r === atomState.i) {
              return;
            }

            if ('v' in atomState) {
              values.set(atom, atomState.v);
            }
          }

          var mounted = (_store$DEV_GET_MOUNTE2 = store[DEV_GET_MOUNTED]) == null ? void 0 : _store$DEV_GET_MOUNTE2.call(store, atom);

          if (mounted) {
            dependents.set(atom, mounted.t);
          }
        }

        setAtomsSnapshot(function (prev) {
          if (isEqualAtomsValues(prev.values, values) && isEqualAtomsDependents(prev.dependents, dependents)) {
            return prev;
          }

          return {
            values: values,
            dependents: dependents
          };
        });
      };

      var unsubscribe = (_store$DEV_SUBSCRIBE_ = store[DEV_SUBSCRIBE_STATE]) == null ? void 0 : _store$DEV_SUBSCRIBE_.call(store, callback);
      callback();
      return unsubscribe;
    }, [extension, store]);
    var goToSnapshot = react.useCallback(function (snapshot) {
      var values = snapshot.values;

      if (versionedWrite) {
        versionedWrite(function (version) {
          store[RESTORE_ATOMS](values, version);
        });
      } else {
        store[RESTORE_ATOMS](values);
      }
    }, [store, versionedWrite]);
    var isTimeTraveling = react.useRef(false);
    var isRecording = react.useRef(true);
    var devtools = react.useRef();
    var snapshots = react.useRef([]);
    react.useEffect(function () {
      if (!extension) {
        return;
      }

      var getSnapshotAt = function getSnapshotAt(index) {
        if (index === void 0) {
          index = snapshots.current.length - 1;
        }

        var snapshot = snapshots.current[index >= 0 ? index : 0];

        if (!snapshot) {
          throw new Error('snaphost index out of bounds');
        }

        return snapshot;
      };

      var connection = extension.connect({
        name: name
      });
      var devtoolsUnsubscribe = connection.subscribe(function (message) {
        var _message$payload;

        switch (message.type) {
          case 'DISPATCH':
            switch ((_message$payload = message.payload) == null ? void 0 : _message$payload.type) {
              case 'RESET':
                break;

              case 'COMMIT':
                connection.init(getDevtoolsState(getSnapshotAt()));
                snapshots.current = [];
                break;

              case 'JUMP_TO_ACTION':
              case 'JUMP_TO_STATE':
                isTimeTraveling.current = true;
                goToSnapshot(getSnapshotAt(message.payload.actionId - 1));
                break;

              case 'PAUSE_RECORDING':
                isRecording.current = !isRecording.current;
                break;
            }

        }
      });
      devtools.current = connection;
      devtools.current.shouldInit = true;
      return devtoolsUnsubscribe;
    }, [extension, goToSnapshot, name]);
    react.useEffect(function () {
      if (!devtools.current) {
        return;
      }

      if (devtools.current.shouldInit) {
        devtools.current.init(undefined);
        devtools.current.shouldInit = false;
        return;
      }

      if (isTimeTraveling.current) {
        isTimeTraveling.current = false;
      } else if (isRecording.current) {
        snapshots.current.push(atomsSnapshot);
        devtools.current.send({
          type: "" + snapshots.current.length,
          updatedAt: new Date().toLocaleString()
        }, getDevtoolsState(atomsSnapshot));
      }
    }, [atomsSnapshot]);
  }

  exports.useAtomDevtools = useAtomDevtools;
  exports.useAtomsDebugValue = useAtomsDebugValue;
  exports.useAtomsDevtools = useAtomsDevtools;
  exports.useAtomsSnapshot = useAtomsSnapshot;
  exports.useGotoAtomsSnapshot = useGotoAtomsSnapshot;

  Object.defineProperty(exports, '__esModule', { value: true });

}));