@v-c/resize-observer 1.0.1 → 1.0.4

package/dist/Collection.cjs

@@ -1,3 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
 let vue = require("vue");
 const CollectionContext = Symbol("CollectionContext");

package/dist/SingleObserver/DomWrapper.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
 let vue = require("vue");
 var DomWrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({ setup(_, { slots }) {

package/dist/SingleObserver/index.cjs

@@ -1,12 +1,15 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
 const require_Collection = require("../Collection.cjs");
-const require_observerUtil = require("../utils/observerUtil.cjs");
+const require_useResizeObserver = require("../useResizeObserver.cjs");
 const require_DomWrapper = require("./DomWrapper.cjs");
 let vue = require("vue");
-let __v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
-let __v_c_util_dist_Dom_findDOMNode = require("@v-c/util/dist/Dom/findDOMNode");
-__v_c_util_dist_Dom_findDOMNode = require_rolldown_runtime.__toESM(__v_c_util_dist_Dom_findDOMNode);
+let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
+let _v_c_util_dist_Dom_findDOMNode = require("@v-c/util/dist/Dom/findDOMNode");
+_v_c_util_dist_Dom_findDOMNode = require_rolldown_runtime.__toESM(_v_c_util_dist_Dom_findDOMNode);
 var SingleObserver = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		data: {
@@ -27,67 +30,26 @@ var SingleObserver = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "SingleObserver",
 	inheritAttrs: false,
 	setup(props, { expose, slots }) {
-		const elementRef = (0, vue.shallowRef)();
 		const wrapperRef = (0, vue.shallowRef)();
-		const setWrapperRef = (el) => {
-			if (el?.elementEl && typeof el.elementEl === "object") elementRef.value = el.elementEl;
-			else if (el?.__$el && typeof el.__$el === "object") elementRef.value = el.__$el;
-			else wrapperRef.value = el;
-		};
-		const onCollectionResize = (0, vue.inject)(require_Collection.CollectionContext, () => {});
-		const sizeRef = (0, vue.shallowRef)({
-			width: -1,
-			height: -1,
-			offsetWidth: -1,
-			offsetHeight: -1
-		});
-		const getDom = () => {
-			const dom = (0, __v_c_util_dist_Dom_findDOMNode.default)(elementRef) || (elementRef.value && typeof elementRef.value === "object" ? (0, __v_c_util_dist_Dom_findDOMNode.default)(elementRef.value.nativeElement) : null) || (0, __v_c_util_dist_Dom_findDOMNode.default)(wrapperRef.value);
-			if (dom && dom.nodeType === 3 && dom.nextElementSibling) return dom.nextElementSibling;
+		const getDom = (el) => {
+			const dom = (0, _v_c_util_dist_Dom_findDOMNode.default)(el);
+			if (dom && (dom.nodeType === 3 || dom.nodeType === 8) && dom.nextElementSibling) return dom.nextElementSibling;
 			return dom;
 		};
-		const onInternalResize = (target) => {
-			const { onResize, data } = props;
-			const { width, height } = target.getBoundingClientRect();
-			const { offsetHeight, offsetWidth } = target;
-			const fixedWidth = Math.floor(width);
-			const fixedHeight = Math.floor(height);
-			if (sizeRef.value.width !== fixedWidth || sizeRef.value.height !== fixedHeight || sizeRef.value.offsetWidth !== offsetWidth || sizeRef.value.offsetHeight !== offsetHeight) {
-				const size = {
-					width: fixedWidth,
-					height: fixedHeight,
-					offsetWidth,
-					offsetHeight
-				};
-				sizeRef.value = size;
-				const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth;
-				const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight;
-				const sizeInfo = {
-					...size,
-					offsetWidth: mergedOffsetWidth,
-					offsetHeight: mergedOffsetHeight
-				};
-				onCollectionResize?.(sizeInfo, target, data);
-				if (onResize) Promise.resolve().then(() => {
-					onResize(sizeInfo, target);
-				});
-			}
+		const setWrapperRef = (el) => {
+			const _wrapper = el;
+			if (el?.elementEl && typeof el.elementEl === "object") _wrapper.value = el.elementEl;
+			else if (el?.__$el && typeof el.__$el === "object") _wrapper.value = el.__$el;
+			else _wrapper.value = el;
+			wrapperRef.value = getDom(el);
 		};
-		const disabled = (0, vue.computed)(() => props.disabled);
-		(0, vue.watch)([wrapperRef, disabled], (_n, _o, onCleanup) => {
-			if (disabled.value) return;
-			const currentElement = getDom();
-			if (currentElement) require_observerUtil.observe(currentElement, onInternalResize);
-			onCleanup(() => {
-				if (currentElement) require_observerUtil.unobserve(currentElement, onInternalResize);
-			});
-		}, {
-			immediate: true,
-			flush: "post"
+		const onCollectionResize = (0, vue.inject)(require_Collection.CollectionContext, () => {});
+		require_useResizeObserver.default((0, vue.computed)(() => props.disabled), wrapperRef, (...args) => props?.onResize?.(...args), (size, element) => {
+			onCollectionResize?.(size, element, props.data);
 		});
 		expose({ getDom });
 		return () => {
-			const children = (0, __v_c_util_dist_props_util.filterEmpty)(slots?.default?.());
+			const children = (0, _v_c_util_dist_props_util.filterEmpty)(slots?.default?.());
 			if (children.length === 1 && (0, vue.isVNode)(children[0])) return (0, vue.createVNode)(children[0], { ref: setWrapperRef });
 			return (0, vue.createVNode)(require_DomWrapper.default, { "ref": wrapperRef }, { default: () => [slots.default?.()] });
 		};

package/dist/SingleObserver/index.js

@@ -1,7 +1,7 @@
 import { CollectionContext } from "../Collection.js";
-import { observe, unobserve } from "../utils/observerUtil.js";
+import useResizeObserver from "../useResizeObserver.js";
 import DomWrapper_default from "./DomWrapper.js";
-import { computed, createVNode, defineComponent, inject, isVNode, shallowRef, watch } from "vue";
+import { computed, createVNode, defineComponent, inject, isVNode, shallowRef } from "vue";
 import { filterEmpty } from "@v-c/util/dist/props-util";
 import findDOMNode from "@v-c/util/dist/Dom/findDOMNode";
 var SingleObserver_default = /* @__PURE__ */ defineComponent({
@@ -24,63 +24,22 @@ var SingleObserver_default = /* @__PURE__ */ defineComponent({
 	name: "SingleObserver",
 	inheritAttrs: false,
 	setup(props, { expose, slots }) {
-		const elementRef = shallowRef();
 		const wrapperRef = shallowRef();
-		const setWrapperRef = (el) => {
-			if (el?.elementEl && typeof el.elementEl === "object") elementRef.value = el.elementEl;
-			else if (el?.__$el && typeof el.__$el === "object") elementRef.value = el.__$el;
-			else wrapperRef.value = el;
-		};
-		const onCollectionResize = inject(CollectionContext, () => {});
-		const sizeRef = shallowRef({
-			width: -1,
-			height: -1,
-			offsetWidth: -1,
-			offsetHeight: -1
-		});
-		const getDom = () => {
-			const dom = findDOMNode(elementRef) || (elementRef.value && typeof elementRef.value === "object" ? findDOMNode(elementRef.value.nativeElement) : null) || findDOMNode(wrapperRef.value);
-			if (dom && dom.nodeType === 3 && dom.nextElementSibling) return dom.nextElementSibling;
+		const getDom = (el) => {
+			const dom = findDOMNode(el);
+			if (dom && (dom.nodeType === 3 || dom.nodeType === 8) && dom.nextElementSibling) return dom.nextElementSibling;
 			return dom;
 		};
-		const onInternalResize = (target) => {
-			const { onResize, data } = props;
-			const { width, height } = target.getBoundingClientRect();
-			const { offsetHeight, offsetWidth } = target;
-			const fixedWidth = Math.floor(width);
-			const fixedHeight = Math.floor(height);
-			if (sizeRef.value.width !== fixedWidth || sizeRef.value.height !== fixedHeight || sizeRef.value.offsetWidth !== offsetWidth || sizeRef.value.offsetHeight !== offsetHeight) {
-				const size = {
-					width: fixedWidth,
-					height: fixedHeight,
-					offsetWidth,
-					offsetHeight
-				};
-				sizeRef.value = size;
-				const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth;
-				const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight;
-				const sizeInfo = {
-					...size,
-					offsetWidth: mergedOffsetWidth,
-					offsetHeight: mergedOffsetHeight
-				};
-				onCollectionResize?.(sizeInfo, target, data);
-				if (onResize) Promise.resolve().then(() => {
-					onResize(sizeInfo, target);
-				});
-			}
+		const setWrapperRef = (el) => {
+			const _wrapper = el;
+			if (el?.elementEl && typeof el.elementEl === "object") _wrapper.value = el.elementEl;
+			else if (el?.__$el && typeof el.__$el === "object") _wrapper.value = el.__$el;
+			else _wrapper.value = el;
+			wrapperRef.value = getDom(el);
 		};
-		const disabled = computed(() => props.disabled);
-		watch([wrapperRef, disabled], (_n, _o, onCleanup) => {
-			if (disabled.value) return;
-			const currentElement = getDom();
-			if (currentElement) observe(currentElement, onInternalResize);
-			onCleanup(() => {
-				if (currentElement) unobserve(currentElement, onInternalResize);
-			});
-		}, {
-			immediate: true,
-			flush: "post"
+		const onCollectionResize = inject(CollectionContext, () => {});
+		useResizeObserver(computed(() => props.disabled), wrapperRef, (...args) => props?.onResize?.(...args), (size, element) => {
+			onCollectionResize?.(size, element, props.data);
 		});
 		expose({ getDom });
 		return () => {

package/dist/index.cjs

@@ -1,11 +1,15 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
 const require_Collection = require("./Collection.cjs");
 const require_observerUtil = require("./utils/observerUtil.cjs");
+const require_useResizeObserver = require("./useResizeObserver.cjs");
 const require_index = require("./SingleObserver/index.cjs");
 let vue = require("vue");
-let __v_c_util = require("@v-c/util");
-let __v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
+let _v_c_util = require("@v-c/util");
+let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
 }
@@ -29,10 +33,10 @@ var ResizeObserver = /* @__PURE__ */ (0, vue.defineComponent)({
 	},
 	setup(props, { slots }) {
 		return () => {
-			const childNodes = (0, __v_c_util_dist_props_util.filterEmpty)(slots.default?.() ?? []);
+			const childNodes = (0, _v_c_util_dist_props_util.filterEmpty)(slots.default?.() ?? []).filter(Boolean);
 			if (process.env.NODE_ENV !== "production") {
-				if (childNodes.length > 1) (0, __v_c_util.warning)(false, "Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead.");
-				else if (childNodes.length === 0) (0, __v_c_util.warning)(false, "`children` of ResizeObserver is empty. Nothing is in observe.");
+				if (childNodes.length > 1) (0, _v_c_util.warning)(false, "Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead.");
+				else if (childNodes.length === 0) (0, _v_c_util.warning)(false, "`children` of ResizeObserver is empty. Nothing is in observe.");
 			}
 			return childNodes.map((child, index) => {
 				const key = child?.key || `${INTERNAL_PREFIX_KEY}-${index}`;
@@ -45,3 +49,4 @@ ResizeObserver.Collection = require_Collection.Collection;
 var src_default = ResizeObserver;
 exports._rs = require_observerUtil._rs;
 exports.default = src_default;
+exports.useResizeObserver = require_useResizeObserver.default;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { Collection } from './Collection.tsx';
 import { _rs } from './utils/observerUtil';
+export { default as useResizeObserver } from './useResizeObserver';
 export { 
 /** @private Test only for mock trigger resize event */
 _rs, };

package/dist/index.js

@@ -1,5 +1,6 @@
 import { Collection } from "./Collection.js";
 import { _rs } from "./utils/observerUtil.js";
+import useResizeObserver from "./useResizeObserver.js";
 import SingleObserver_default from "./SingleObserver/index.js";
 import { createVNode, defineComponent, isVNode, mergeProps } from "vue";
 import { warning } from "@v-c/util";
@@ -27,7 +28,7 @@ var ResizeObserver = /* @__PURE__ */ defineComponent({
 	},
 	setup(props, { slots }) {
 		return () => {
-			const childNodes = filterEmpty(slots.default?.() ?? []);
+			const childNodes = filterEmpty(slots.default?.() ?? []).filter(Boolean);
 			if (process.env.NODE_ENV !== "production") {
 				if (childNodes.length > 1) warning(false, "Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead.");
 				else if (childNodes.length === 0) warning(false, "`children` of ResizeObserver is empty. Nothing is in observe.");
@@ -41,4 +42,4 @@ var ResizeObserver = /* @__PURE__ */ defineComponent({
 });
 ResizeObserver.Collection = Collection;
 var src_default = ResizeObserver;
-export { _rs, src_default as default };
+export { _rs, src_default as default, useResizeObserver };

package/dist/useResizeObserver.cjs

@@ -0,0 +1,54 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+const require_observerUtil = require("./utils/observerUtil.cjs");
+let vue = require("vue");
+function useResizeObserver(enabled, getTarget, onDelayResize, onSyncResize) {
+	const sizeRef = (0, vue.shallowRef)({
+		width: -1,
+		height: -1,
+		offsetWidth: -1,
+		offsetHeight: -1
+	});
+	const onInternalResize = (target) => {
+		const { width, height } = target.getBoundingClientRect();
+		const { offsetWidth, offsetHeight } = target;
+		const fixedWidth = Math.floor(width);
+		const fixedHeight = Math.floor(height);
+		if (sizeRef.value.width !== fixedWidth || sizeRef.value.height !== fixedHeight || sizeRef.value.offsetWidth !== offsetWidth || sizeRef.value.offsetHeight !== offsetHeight) {
+			const size = {
+				width: fixedWidth,
+				height: fixedHeight,
+				offsetWidth,
+				offsetHeight
+			};
+			sizeRef.value = size;
+			const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth;
+			const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight;
+			const sizeInfo = {
+				...size,
+				offsetWidth: mergedOffsetWidth,
+				offsetHeight: mergedOffsetHeight
+			};
+			onSyncResize?.(sizeInfo, target);
+			Promise.resolve().then(() => {
+				onDelayResize?.(sizeInfo, target);
+			});
+		}
+	};
+	(0, vue.watch)([enabled, getTarget], (_, _o, onCleanup) => {
+		const target = typeof getTarget === "function" ? getTarget() : (0, vue.unref)(getTarget);
+		if (target && enabled) {
+			require_observerUtil.observe(target, onInternalResize);
+			onCleanup(() => {
+				if (target) require_observerUtil.unobserve(target, onInternalResize);
+			});
+		}
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+}
+exports.default = useResizeObserver;

package/dist/useResizeObserver.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+import { OnResize } from './index';
+export default function useResizeObserver(enabled: Ref<boolean | undefined>, getTarget: Ref<Element | undefined> | (() => HTMLElement), onDelayResize?: OnResize, onSyncResize?: OnResize): void;

package/dist/useResizeObserver.js

@@ -0,0 +1,49 @@
+import { observe, unobserve } from "./utils/observerUtil.js";
+import { shallowRef, unref, watch } from "vue";
+function useResizeObserver(enabled, getTarget, onDelayResize, onSyncResize) {
+	const sizeRef = shallowRef({
+		width: -1,
+		height: -1,
+		offsetWidth: -1,
+		offsetHeight: -1
+	});
+	const onInternalResize = (target) => {
+		const { width, height } = target.getBoundingClientRect();
+		const { offsetWidth, offsetHeight } = target;
+		const fixedWidth = Math.floor(width);
+		const fixedHeight = Math.floor(height);
+		if (sizeRef.value.width !== fixedWidth || sizeRef.value.height !== fixedHeight || sizeRef.value.offsetWidth !== offsetWidth || sizeRef.value.offsetHeight !== offsetHeight) {
+			const size = {
+				width: fixedWidth,
+				height: fixedHeight,
+				offsetWidth,
+				offsetHeight
+			};
+			sizeRef.value = size;
+			const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth;
+			const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight;
+			const sizeInfo = {
+				...size,
+				offsetWidth: mergedOffsetWidth,
+				offsetHeight: mergedOffsetHeight
+			};
+			onSyncResize?.(sizeInfo, target);
+			Promise.resolve().then(() => {
+				onDelayResize?.(sizeInfo, target);
+			});
+		}
+	};
+	watch([enabled, getTarget], (_, _o, onCleanup) => {
+		const target = typeof getTarget === "function" ? getTarget() : unref(getTarget);
+		if (target && enabled) {
+			observe(target, onInternalResize);
+			onCleanup(() => {
+				if (target) unobserve(target, onInternalResize);
+			});
+		}
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+}
+export { useResizeObserver as default };

package/dist/utils/observerUtil.cjs

@@ -1,3 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
 let resize_observer_polyfill = require("resize-observer-polyfill");
 resize_observer_polyfill = require_rolldown_runtime.__toESM(resize_observer_polyfill);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/resize-observer",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "resize-observer-polyfill": "^1.5.1",
-    "@v-c/util": "^1.0.2"
+    "@v-c/util": "^1.0.8"
   },
   "scripts": {
     "build": "vite build",

package/src/SingleObserver/index.tsx

@@ -1,4 +1,4 @@
-import type { ResizeObserverProps, SizeInfo } from '../index.tsx'
+import type { ResizeObserverProps } from '../index.tsx'
 import findDOMNode from '@v-c/util/dist/Dom/findDOMNode'
 import { filterEmpty } from '@v-c/util/dist/props-util'
 import {
@@ -8,102 +8,46 @@ import {
   inject,
   isVNode,
   shallowRef,
-  watch,
 } from 'vue'
 import { CollectionContext } from '../Collection'
-import { observe, unobserve } from '../utils/observerUtil.ts'
+import useResizeObserver from '../useResizeObserver.ts'
 import DomWrapper from './DomWrapper'
 
 const SingleObserver = defineComponent<ResizeObserverProps>({
   name: 'SingleObserver',
   inheritAttrs: false,
   setup(props, { expose, slots }) {
-    const elementRef = shallowRef<HTMLElement>()
     const wrapperRef = shallowRef()
+
+    const getDom = (el: any): any => {
+      const dom = findDOMNode(el)
+      // 判断当前的dom是不是一个text元素
+      if (dom && (dom.nodeType === 3 || dom.nodeType === 8) && (dom as any).nextElementSibling)
+        return (dom as any).nextElementSibling as HTMLElement
+      return dom
+    }
     const setWrapperRef = (el: any) => {
+      const _wrapper = el
       if (el?.elementEl && typeof el.elementEl === 'object') {
-        elementRef.value = el.elementEl
+        _wrapper.value = el.elementEl
       }
       else if (el?.__$el && typeof el.__$el === 'object') {
-        elementRef.value = el.__$el
+        _wrapper.value = el.__$el
       }
       else {
-        wrapperRef.value = el
+        _wrapper.value = el
       }
+      wrapperRef.value = getDom(el)
     }
     const onCollectionResize = inject(CollectionContext, () => {})
-    const sizeRef = shallowRef<SizeInfo>({ width: -1, height: -1, offsetWidth: -1, offsetHeight: -1 })
-    const getDom = () => {
-      const dom = findDOMNode(elementRef as any)
-        || (elementRef.value && typeof elementRef.value === 'object' ? findDOMNode((elementRef.value as any).nativeElement) : null)
-        || findDOMNode(wrapperRef.value)
-      // 判断当前的dom是不是一个text元素
-      if (dom && dom.nodeType === 3 && dom.nextElementSibling)
-        return dom.nextElementSibling as HTMLElement
-      return dom
-    }
-
-    const onInternalResize = (target: HTMLElement) => {
-      const { onResize, data } = props
-      const { width, height } = target.getBoundingClientRect()
-      const { offsetHeight, offsetWidth } = target
-      /**
-       * Resize observer trigger when content size changed.
-       * In most case we just care about element size,
-       * let's use `boundary` instead of `contentRect` here to avoid shaking.
-       */
-      const fixedWidth = Math.floor(width)
-      const fixedHeight = Math.floor(height)
-      if (
-        sizeRef.value.width !== fixedWidth
-        || sizeRef.value.height !== fixedHeight
-        || sizeRef.value.offsetWidth !== offsetWidth
-        || sizeRef.value.offsetHeight !== offsetHeight
-      ) {
-        const size = { width: fixedWidth, height: fixedHeight, offsetWidth, offsetHeight }
-        sizeRef.value = size
 
-        // IE is strange, right?
-        const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth
-        const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight
-
-        const sizeInfo = {
-          ...size,
-          offsetWidth: mergedOffsetWidth,
-          offsetHeight: mergedOffsetHeight,
-        }
-
-        // Let collection know what happened
-        onCollectionResize?.(sizeInfo, target, data)
-
-        if (onResize) {
-          // defer the callback but not defer to next frame
-          Promise.resolve().then(() => {
-            onResize(sizeInfo, target)
-          })
-        }
-      }
-    }
     const disabled = computed(() => props.disabled)
-    // 记录上一个元素
-    watch(
-      [wrapperRef, disabled],
-      (_n, _o, onCleanup) => {
-        if (disabled.value) {
-          return
-        }
-        const currentElement = getDom() as HTMLElement
-        if (currentElement) {
-          observe(currentElement, onInternalResize as any)
-        }
-        onCleanup(() => {
-          if (currentElement)
-            unobserve(currentElement, onInternalResize as any)
-        })
-      },
-      {
-        immediate: true,
-        flush: 'post',
+    useResizeObserver(
+      disabled,
+      wrapperRef,
+      (...args) => props?.onResize?.(...args),
+      (size, element) => {
+        onCollectionResize?.(size, element, props.data)
       },
     )
     expose({

package/src/index.tsx

@@ -5,6 +5,7 @@ import { Collection } from './Collection.tsx'
 import SingleObserver from './SingleObserver'
 import { _rs } from './utils/observerUtil'
 
+export { default as useResizeObserver } from './useResizeObserver'
 const INTERNAL_PREFIX_KEY = 'vc-observer-key'
 export {
   /** @private Test only for mock trigger resize event */
@@ -31,7 +32,7 @@ export interface ResizeObserverProps {
 const ResizeObserver = defineComponent<ResizeObserverProps>({
   setup(props, { slots }) {
     return () => {
-      const childNodes = filterEmpty(slots.default?.() ?? [])
+      const childNodes = filterEmpty(slots.default?.() ?? []).filter(Boolean)
       if (process.env.NODE_ENV !== 'production') {
         if (childNodes.length > 1) {
           warning(

package/src/useResizeObserver.ts

@@ -0,0 +1,82 @@
+import type { Ref } from 'vue'
+import type { OnResize } from './index'
+import { shallowRef, unref, watch } from 'vue'
+import { observe, unobserve } from './utils/observerUtil'
+
+export default function useResizeObserver(
+  enabled: Ref<boolean | undefined>,
+  getTarget: Ref<Element | undefined> | (() => HTMLElement),
+  onDelayResize?: OnResize,
+  onSyncResize?: OnResize,
+) {
+// ============================= Size =============================
+  const sizeRef = shallowRef({
+    width: -1,
+    height: -1,
+    offsetWidth: -1,
+    offsetHeight: -1,
+  })
+
+  // ============================= Size =============================
+  const onInternalResize = (target: HTMLElement) => {
+    const { width, height } = target.getBoundingClientRect()
+    const { offsetWidth, offsetHeight } = target
+
+    /**
+     * Resize observer trigger when content size changed.
+     * In most case we just care about element size,
+     * let's use `boundary` instead of `contentRect` here to avoid shaking.
+     */
+    const fixedWidth = Math.floor(width)
+    const fixedHeight = Math.floor(height)
+
+    if (
+      sizeRef.value.width !== fixedWidth
+      || sizeRef.value.height !== fixedHeight
+      || sizeRef.value.offsetWidth !== offsetWidth
+      || sizeRef.value.offsetHeight !== offsetHeight
+    ) {
+      const size = { width: fixedWidth, height: fixedHeight, offsetWidth, offsetHeight }
+      sizeRef.value = size
+
+      // IE is strange, right?
+      const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth
+      const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight
+
+      const sizeInfo = {
+        ...size,
+        offsetWidth: mergedOffsetWidth,
+        offsetHeight: mergedOffsetHeight,
+      }
+
+      // Call the callback immediately, let the caller decide whether to defer
+      // onResize(sizeInfo, target);
+      onSyncResize?.(sizeInfo, target)
+
+      // defer the callback but not defer to next frame
+      Promise.resolve().then(() => {
+        onDelayResize?.(sizeInfo, target)
+      })
+    }
+  }
+
+  // Dynamic observe
+  watch(
+    [enabled, getTarget],
+    (_, _o, onCleanup) => {
+      const target = typeof getTarget === 'function' ? getTarget() : unref(getTarget)
+      if (target && enabled) {
+        observe(target, onInternalResize as any)
+        onCleanup(() => {
+          if (target) {
+            unobserve(target, onInternalResize as any)
+          }
+        })
+      }
+    },
+    {
+      immediate: true,
+      flush: 'post',
+    },
+  )
+}