useMutationObserver.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.useMutationObserver = useMutationObserver;
  6. var _tryOnScopeDispose = require("./tryOnScopeDispose");
  7. var _vue = require("vue");
  8. var _unrefElement = require("./unrefElement");
  9. var _useSupported = require("./useSupported");
  10. var _configurable = require("./_configurable");
  11. var __rest = void 0 && (void 0).__rest || function (s, e) {
  12. var t = {};
  13. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  14. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  15. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  16. }
  17. return t;
  18. };
  19. /**
  20. * Watch for changes being made to the DOM tree.
  21. *
  22. * @see https://vueuse.org/useMutationObserver
  23. * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver MutationObserver MDN
  24. * @param target
  25. * @param callback
  26. * @param options
  27. */
  28. function useMutationObserver(target, callback) {
  29. let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  30. const {
  31. window = _configurable.defaultWindow
  32. } = options,
  33. mutationOptions = __rest(options, ["window"]);
  34. let observer;
  35. const isSupported = (0, _useSupported.useSupported)(() => window && 'MutationObserver' in window);
  36. const cleanup = () => {
  37. if (observer) {
  38. observer.disconnect();
  39. observer = undefined;
  40. }
  41. };
  42. const stopWatch = (0, _vue.watch)(() => (0, _unrefElement.unrefElement)(target), el => {
  43. cleanup();
  44. if (isSupported.value && window && el) {
  45. observer = new MutationObserver(callback);
  46. observer.observe(el, mutationOptions);
  47. }
  48. }, {
  49. immediate: true
  50. });
  51. const stop = () => {
  52. cleanup();
  53. stopWatch();
  54. };
  55. (0, _tryOnScopeDispose.tryOnScopeDispose)(stop);
  56. return {
  57. isSupported,
  58. stop
  59. };
  60. }