feat: add mutationObserver

components/_util/hooks/_vueuse/useMutationObserver.ts

@@ -0,0 +1,62 @@
+import { tryOnScopeDispose } from './tryOnScopeDispose';
+import { watch } from 'vue';
+import type { MaybeElementRef } from './unrefElement';
+import { unrefElement } from './unrefElement';
+import { useSupported } from './useSupported';
+import type { ConfigurableWindow } from './_configurable';
+import { defaultWindow } from './_configurable';
+
+export interface UseMutationObserverOptions extends MutationObserverInit, ConfigurableWindow {}
+
+/**
+ * Watch for changes being made to the DOM tree.
+ *
+ * @see https://vueuse.org/useMutationObserver
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver MutationObserver MDN
+ * @param target
+ * @param callback
+ * @param options
+ */
+export function useMutationObserver(
+  target: MaybeElementRef,
+  callback: MutationCallback,
+  options: UseMutationObserverOptions = {},
+) {
+  const { window = defaultWindow, ...mutationOptions } = options;
+  let observer: MutationObserver | undefined;
+  const isSupported = useSupported(() => window && 'MutationObserver' in window);
+
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = undefined;
+    }
+  };
+
+  const stopWatch = watch(
+    () => unrefElement(target),
+    el => {
+      cleanup();
+
+      if (isSupported.value && window && el) {
+        observer = new MutationObserver(callback);
+        observer!.observe(el, mutationOptions);
+      }
+    },
+    { immediate: true },
+  );
+
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+
+  tryOnScopeDispose(stop);
+
+  return {
+    isSupported,
+    stop,
+  };
+}
+
+export type UseMutationObserverReturn = ReturnType<typeof useMutationObserver>;

components/watermark/__tests__/demo.test.js

@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('watermark');

components/watermark/__tests__/index.test.js

@@ -0,0 +1,29 @@
+import Watermark from '..';
+import mountTest from '../../../tests/shared/mountTest';
+import { mount } from '@vue/test-utils';
+
+describe('Watermark', () => {
+  mountTest(Watermark);
+  const mockSrcSet = jest.spyOn(Image.prototype, 'src', 'set');
+  beforeAll(() => {
+    mockSrcSet.mockImplementation(function fn() {
+      this.onload?.();
+    });
+  });
+
+  afterAll(() => {
+    mockSrcSet.mockRestore();
+  });
+
+  it('The watermark should render successfully ', function () {
+    const wrapper = mount({
+      setup() {
+        return () => {
+          return <Watermark class="watermark" content="Ant Design" />;
+        };
+      },
+    });
+    expect(wrapper.find('.watermark').exists()).toBe(true);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

components/watermark/index.tsx

@@ -1,8 +1,8 @@
 import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
 import { computed, defineComponent, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue';
-import { getStyleStr, getPixelRatio, rotateWatermark } from './utils';
+import { getStyleStr, getPixelRatio, rotateWatermark, reRendering } from './utils';
 import { withInstall } from '../_util/type';
-import MutateObserver from '../_util/mutateObserver';
+import { useMutationObserver } from '../_util/hooks/_vueuse/useMutationObserver';
 
 /**
  * Base size of the canvas, 1 for parallel layout and 2 for alternate layout
@@ -231,22 +231,27 @@ const Watermark = defineComponent({
     onBeforeUnmount(() => {
       destroyWatermark();
     });
-    const onMutate = () => {
+    const onMutate = (mutations: MutationRecord[]) => {
       if (stopObservation.value) {
         return;
       }
+      mutations.forEach(mutation => {
+        if (reRendering(mutation, watermarkRef.value)) {
+          destroyWatermark();
+          renderWatermark();
+        }
+      });
     };
+    useMutationObserver(containerRef, onMutate);
     return () => {
       return (
-        <MutateObserver onMutate={onMutate}>
-          <div
-            ref={containerRef}
-            class={[attrs.class, props.rootClassName]}
-            style={{ position: 'relative' }}
-          >
-            {slots.default?.()}
-          </div>
-        </MutateObserver>
+        <div
+          ref={containerRef}
+          class={[attrs.class, props.rootClassName]}
+          style={{ position: 'relative' }}
+        >
+          {slots.default?.()}
+        </div>
       );
     };
   },