@v-c/resize-observer 0.0.2 → 0.0.4

package/bump.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'bumpp'
+
+export default defineConfig({
+  commit: 'chore(release): @v-c/resize-observer %s',
+  tag: '@v-c/resize-observer@%s',
+})

package/dist/Collection.cjs

@@ -1 +1,38 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),u=Symbol("CollectionContext"),d=n.defineComponent({props:{onBatchResize:{type:Function,required:!1}},setup(o,{slots:t}){const i=n.shallowRef(0),l=n.shallowRef([]),c=n.inject(u,()=>{}),v=(e,r,s)=>{const a=i.value+1;i.value=a,l.value.push({size:e,element:r,data:s}),Promise.resolve().then(()=>{var f;if(i.value===a){const C=l.value;l.value=[],(f=o.onBatchResize)==null||f.call(o,C)}}),c==null||c(e,r,s)};return n.provide(u,v),()=>{var e;return(e=t.default)==null?void 0:e.call(t)}}});exports.Collection=d;exports.CollectionContext=u;
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+const CollectionContext = Symbol("CollectionContext");
+const Collection = /* @__PURE__ */ (0, vue.defineComponent)({
+	props: { onBatchResize: {
+		type: Function,
+		required: false,
+		default: void 0
+	} },
+	setup(props, { slots }) {
+		const resizeIdRef = (0, vue.shallowRef)(0);
+		const resizeInfosRef = (0, vue.shallowRef)([]);
+		const onCollectionResize = (0, vue.inject)(CollectionContext, () => {});
+		const onResize = (size, element, data) => {
+			const resizeId = resizeIdRef.value + 1;
+			resizeIdRef.value = resizeId;
+			resizeInfosRef.value.push({
+				size,
+				element,
+				data
+			});
+			Promise.resolve().then(() => {
+				if (resizeIdRef.value === resizeId) {
+					const resizeInfos = resizeInfosRef.value;
+					resizeInfosRef.value = [];
+					props.onBatchResize?.(resizeInfos);
+				}
+			});
+			onCollectionResize?.(size, element, data);
+		};
+		(0, vue.provide)(CollectionContext, onResize);
+		return () => {
+			return slots.default?.();
+		};
+	}
+});
+exports.Collection = Collection;
+exports.CollectionContext = CollectionContext;

package/dist/Collection.js

@@ -1,36 +1,36 @@
-import { defineComponent as z, shallowRef as f, inject as R, provide as d } from "vue";
-const a = Symbol("CollectionContext"), m = /* @__PURE__ */ z({
-  props: {
-    onBatchResize: {
-      type: Function,
-      required: !1
-    }
-  },
-  setup(n, {
-    slots: o
-  }) {
-    const t = f(0), i = f([]), c = R(a, () => {
-    });
-    return d(a, (e, r, u) => {
-      const l = t.value + 1;
-      t.value = l, i.value.push({
-        size: e,
-        element: r,
-        data: u
-      }), Promise.resolve().then(() => {
-        var s;
-        if (t.value === l) {
-          const v = i.value;
-          i.value = [], (s = n.onBatchResize) == null || s.call(n, v);
-        }
-      }), c == null || c(e, r, u);
-    }), () => {
-      var e;
-      return (e = o.default) == null ? void 0 : e.call(o);
-    };
-  }
+import { defineComponent, inject, provide, shallowRef } from "vue";
+const CollectionContext = Symbol("CollectionContext");
+const Collection = /* @__PURE__ */ defineComponent({
+	props: { onBatchResize: {
+		type: Function,
+		required: false,
+		default: void 0
+	} },
+	setup(props, { slots }) {
+		const resizeIdRef = shallowRef(0);
+		const resizeInfosRef = shallowRef([]);
+		const onCollectionResize = inject(CollectionContext, () => {});
+		const onResize = (size, element, data) => {
+			const resizeId = resizeIdRef.value + 1;
+			resizeIdRef.value = resizeId;
+			resizeInfosRef.value.push({
+				size,
+				element,
+				data
+			});
+			Promise.resolve().then(() => {
+				if (resizeIdRef.value === resizeId) {
+					const resizeInfos = resizeInfosRef.value;
+					resizeInfosRef.value = [];
+					props.onBatchResize?.(resizeInfos);
+				}
+			});
+			onCollectionResize?.(size, element, data);
+		};
+		provide(CollectionContext, onResize);
+		return () => {
+			return slots.default?.();
+		};
+	}
 });
-export {
-  m as Collection,
-  a as CollectionContext
-};
+export { Collection, CollectionContext };

package/dist/SingleObserver/DomWrapper.cjs

@@ -1 +1,7 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),t=r.defineComponent({setup(n,{slots:e}){return()=>{var u;return(u=e.default)==null?void 0:u.call(e)}}});exports.default=t;
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+var DomWrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({ setup(_, { slots }) {
+	return () => slots.default?.();
+} });
+exports.default = DomWrapper_default;

package/dist/SingleObserver/DomWrapper.js

@@ -1,14 +1,5 @@
-import { defineComponent as p } from "vue";
-const f = /* @__PURE__ */ p({
-  setup(n, {
-    slots: e
-  }) {
-    return () => {
-      var r;
-      return (r = e.default) == null ? void 0 : r.call(e);
-    };
-  }
-});
-export {
-  f as default
-};
+import { defineComponent } from "vue";
+var DomWrapper_default = /* @__PURE__ */ defineComponent({ setup(_, { slots }) {
+	return () => slots.default?.();
+} });
+export { DomWrapper_default as default };

package/dist/SingleObserver/index.cjs

@@ -1 +1,94 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),a=require("@v-c/util/dist/Dom/findDOMNode"),O=require("../Collection.cjs"),w=require("../utils/observerUtil.cjs"),S=require("./DomWrapper.cjs"),x=t.defineComponent({props:{data:{type:null,required:!1},disabled:{type:Boolean,required:!1},onResize:{type:Function,required:!1}},name:"SingleObserver",inheritAttrs:!1,setup(h,{expose:M,slots:f}){const i=t.shallowRef(),c=t.shallowRef(),l=t.inject(O.CollectionContext,()=>{}),n=t.shallowRef({width:-1,height:-1,offsetWidth:-1,offsetHeight:-1}),v=()=>{const e=a(i)||(i.value&&typeof i.value=="object"?a(i.value.nativeElement):null)||a(c.value);return e&&e.nodeType===3&&e.nextElementSibling?e.nextElementSibling:e},g=e=>{const{onResize:m,data:W}=h,{width:u,height:d}=e.getBoundingClientRect(),{offsetHeight:r,offsetWidth:s}=e,b=Math.floor(u),p=Math.floor(d);if(n.value.width!==b||n.value.height!==p||n.value.offsetWidth!==s||n.value.offsetHeight!==r){const R={width:b,height:p,offsetWidth:s,offsetHeight:r};n.value=R;const y=s===Math.round(u)?u:s,H=r===Math.round(d)?d:r,q={...R,offsetWidth:y,offsetHeight:H};l==null||l(q,e,W),m&&Promise.resolve().then(()=>{m(q,e)})}};let o;return t.onMounted(()=>{o=v(),o&&!h.disabled&&w.observe(o,g)}),t.onBeforeUnmount(()=>{o&&w.unobserve(o,g)}),M({getDom:v}),()=>t.createVNode(S.default,{ref:c},{default:()=>{var e;return[(e=f.default)==null?void 0:e.call(f)]}})}});exports.default=x;
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_Collection = require("../Collection.cjs");
+const require_observerUtil = require("../utils/observerUtil.cjs");
+const require_DomWrapper = require("./DomWrapper.cjs");
+let vue = require("vue");
+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");
+var SingleObserver = /* @__PURE__ */ (0, vue.defineComponent)({
+	props: {
+		data: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onResize: {
+			type: Function,
+			required: false,
+			default: void 0
+		}
+	},
+	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;
+			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);
+				});
+			}
+		};
+		let currentElement;
+		(0, vue.onMounted)(() => {
+			currentElement = getDom();
+			if (currentElement && !props.disabled) require_observerUtil.observe(currentElement, onInternalResize);
+		});
+		(0, vue.onBeforeUnmount)(() => {
+			if (currentElement) require_observerUtil.unobserve(currentElement, onInternalResize);
+		});
+		expose({ getDom });
+		return () => {
+			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?.()] });
+		};
+	}
+});
+var SingleObserver_default = SingleObserver;
+exports.default = SingleObserver_default;

package/dist/SingleObserver/index.js

@@ -1,84 +1,90 @@
-import { defineComponent as y, shallowRef as a, inject as z, onMounted as O, onBeforeUnmount as E, createVNode as S } from "vue";
-import h from "@v-c/util/dist/Dom/findDOMNode";
-import { CollectionContext as q } from "../Collection.js";
-import { observe as B, unobserve as C } from "../utils/observerUtil.js";
-import D from "./DomWrapper.js";
-const P = /* @__PURE__ */ y({
-  props: {
-    data: {
-      type: null,
-      required: !1
-    },
-    disabled: {
-      type: Boolean,
-      required: !1
-    },
-    onResize: {
-      type: Function,
-      required: !1
-    }
-  },
-  name: "SingleObserver",
-  inheritAttrs: !1,
-  setup(u, {
-    expose: w,
-    slots: r
-  }) {
-    const n = a(), m = a(), s = z(q, () => {
-    }), t = a({
-      width: -1,
-      height: -1,
-      offsetWidth: -1,
-      offsetHeight: -1
-    }), c = () => {
-      const e = h(n) || (n.value && typeof n.value == "object" ? h(n.value.nativeElement) : null) || h(m.value);
-      return e && e.nodeType === 3 && e.nextElementSibling ? e.nextElementSibling : e;
-    }, p = (e) => {
-      const {
-        onResize: g,
-        data: x
-      } = u, {
-        width: d,
-        height: l
-      } = e.getBoundingClientRect(), {
-        offsetHeight: i,
-        offsetWidth: f
-      } = e, v = Math.floor(d), b = Math.floor(l);
-      if (t.value.width !== v || t.value.height !== b || t.value.offsetWidth !== f || t.value.offsetHeight !== i) {
-        const R = {
-          width: v,
-          height: b,
-          offsetWidth: f,
-          offsetHeight: i
-        };
-        t.value = R;
-        const H = f === Math.round(d) ? d : f, M = i === Math.round(l) ? l : i, W = {
-          ...R,
-          offsetWidth: H,
-          offsetHeight: M
-        };
-        s == null || s(W, e, x), g && Promise.resolve().then(() => {
-          g(W, e);
-        });
-      }
-    };
-    let o;
-    return O(() => {
-      o = c(), o && !u.disabled && B(o, p);
-    }), E(() => {
-      o && C(o, p);
-    }), w({
-      getDom: c
-    }), () => S(D, {
-      ref: m
-    }, {
-      default: () => {
-        var e;
-        return [(e = r.default) == null ? void 0 : e.call(r)];
-      }
-    });
-  }
+import { CollectionContext } from "../Collection.js";
+import { observe, unobserve } from "../utils/observerUtil.js";
+import DomWrapper_default from "./DomWrapper.js";
+import { createVNode, defineComponent, inject, isVNode, onBeforeUnmount, onMounted, shallowRef } from "vue";
+import findDOMNode from "@v-c/util/dist/Dom/findDOMNode";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+var SingleObserver_default = /* @__PURE__ */ defineComponent({
+	props: {
+		data: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onResize: {
+			type: Function,
+			required: false,
+			default: void 0
+		}
+	},
+	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;
+			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);
+				});
+			}
+		};
+		let currentElement;
+		onMounted(() => {
+			currentElement = getDom();
+			if (currentElement && !props.disabled) observe(currentElement, onInternalResize);
+		});
+		onBeforeUnmount(() => {
+			if (currentElement) unobserve(currentElement, onInternalResize);
+		});
+		expose({ getDom });
+		return () => {
+			const children = filterEmpty(slots?.default?.());
+			if (children.length === 1 && isVNode(children[0])) return createVNode(children[0], { ref: setWrapperRef });
+			return createVNode(DomWrapper_default, { "ref": wrapperRef }, { default: () => [slots.default?.()] });
+		};
+	}
 });
-export {
-  P as default
-};
+export { SingleObserver_default as default };

package/dist/_virtual/rolldown_runtime.cjs

@@ -0,0 +1,21 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+exports.__toESM = __toESM;

package/dist/index.cjs

@@ -1 +1,48 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),s=require("@v-c/util"),c=require("@v-c/util/dist/Children/toArray"),d=require("./Collection.cjs"),f=require("./SingleObserver/index.cjs"),p=require("./utils/observerUtil.cjs");function b(r){return typeof r=="function"||Object.prototype.toString.call(r)==="[object Object]"&&!t.isVNode(r)}const y="vc-observer-key",u=t.defineComponent({props:{data:{type:null,required:!1},disabled:{type:Boolean,required:!1},onResize:{type:Function,required:!1}},setup(r,{slots:n}){return()=>{var i;const o=c.toArray((i=n.default)==null?void 0:i.call(n));return process.env.NODE_ENV!=="production"&&(o.length>1?s.warning(!1,"Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead."):o.length===0&&s.warning(!1,"`children` of ResizeObserver is empty. Nothing is in observe.")),o.map((e,l)=>{const a=(e==null?void 0:e.key)||`${y}-${l}`;return t.createVNode(f.default,t.mergeProps(r,{key:a}),b(e)?e:{default:()=>[e]})})}}});u.Collection=d.Collection;exports._rs=p._rs;exports.default=u;
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+const require_Collection = require("./Collection.cjs");
+const require_observerUtil = require("./utils/observerUtil.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_Children_toArray = require("@v-c/util/dist/Children/toArray");
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
+}
+var INTERNAL_PREFIX_KEY = "vc-observer-key";
+var ResizeObserver = /* @__PURE__ */ (0, vue.defineComponent)({
+	props: {
+		data: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onResize: {
+			type: Function,
+			required: false,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		return () => {
+			const childNodes = (0, __v_c_util_dist_Children_toArray.toArray)(slots.default?.());
+			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.");
+			}
+			return childNodes.map((child, index) => {
+				const key = child?.key || `${INTERNAL_PREFIX_KEY}-${index}`;
+				return (0, vue.createVNode)(require_index.default, (0, vue.mergeProps)(props, { "key": key }), _isSlot(child) ? child : { default: () => [child] });
+			});
+		};
+	}
+});
+ResizeObserver.Collection = require_Collection.Collection;
+var src_default = ResizeObserver;
+exports._rs = require_observerUtil._rs;
+exports.default = src_default;

package/dist/index.js

@@ -1,46 +1,45 @@
-import { defineComponent as p, createVNode as a, mergeProps as l, isVNode as u } from "vue";
-import { warning as i } from "@v-c/util";
-import { toArray as m } from "@v-c/util/dist/Children/toArray";
-import { Collection as c } from "./Collection.js";
-import d from "./SingleObserver/index.js";
-import { _rs as k } from "./utils/observerUtil.js";
-function b(r) {
-  return typeof r == "function" || Object.prototype.toString.call(r) === "[object Object]" && !u(r);
+import { Collection } from "./Collection.js";
+import { _rs } from "./utils/observerUtil.js";
+import SingleObserver_default from "./SingleObserver/index.js";
+import { createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { warning } from "@v-c/util";
+import { toArray } from "@v-c/util/dist/Children/toArray";
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const y = "vc-observer-key", v = /* @__PURE__ */ p({
-  props: {
-    data: {
-      type: null,
-      required: !1
-    },
-    disabled: {
-      type: Boolean,
-      required: !1
-    },
-    onResize: {
-      type: Function,
-      required: !1
-    }
-  },
-  setup(r, {
-    slots: o
-  }) {
-    return () => {
-      var n;
-      const t = m((n = o.default) == null ? void 0 : n.call(o));
-      return process.env.NODE_ENV !== "production" && (t.length > 1 ? i(!1, "Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead.") : t.length === 0 && i(!1, "`children` of ResizeObserver is empty. Nothing is in observe.")), t.map((e, s) => {
-        const f = (e == null ? void 0 : e.key) || `${y}-${s}`;
-        return a(d, l(r, {
-          key: f
-        }), b(e) ? e : {
-          default: () => [e]
-        });
-      });
-    };
-  }
+var INTERNAL_PREFIX_KEY = "vc-observer-key";
+var ResizeObserver = /* @__PURE__ */ defineComponent({
+	props: {
+		data: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onResize: {
+			type: Function,
+			required: false,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		return () => {
+			const childNodes = toArray(slots.default?.());
+			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.");
+			}
+			return childNodes.map((child, index) => {
+				const key = child?.key || `${INTERNAL_PREFIX_KEY}-${index}`;
+				return createVNode(SingleObserver_default, mergeProps(props, { "key": key }), _isSlot(child) ? child : { default: () => [child] });
+			});
+		};
+	}
 });
-v.Collection = c;
-export {
-  k as _rs,
-  v as default
-};
+ResizeObserver.Collection = Collection;
+var src_default = ResizeObserver;
+export { _rs, src_default as default };

package/dist/utils/observerUtil.cjs

@@ -1 +1,33 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("resize-observer-polyfill"),o=new Map;function d(c){c.forEach(b=>{var r;const{target:u}=b;(r=o.get(u))==null||r.forEach(v=>v(u))})}const g=new s(d),p=process.env.NODE_ENV!=="production"?o:null,E=process.env.NODE_ENV!=="production"?d:null;function _(c,b){var u,r,v;o.has(c)||(o.set(c,new Set),g.observe(c)),(v=(r=(u=o==null?void 0:o.get)==null?void 0:u.call(o,c))==null?void 0:r.add)==null||v.call(r,b)}function i(c,b){var u,r,v,a,f;o.has(c)&&((v=(r=(u=o==null?void 0:o.get)==null?void 0:u.call(o,c))==null?void 0:r.delete)==null||v.call(r,b),(f=(a=o==null?void 0:o.get)==null?void 0:a.call(o,c))!=null&&f.size||(g.unobserve(c),o.delete(c)))}exports._el=p;exports._rs=E;exports.observe=_;exports.unobserve=i;
+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);
+var elementListeners = /* @__PURE__ */ new Map();
+function onResize(entities) {
+	entities.forEach((entity) => {
+		const { target } = entity;
+		elementListeners.get(target)?.forEach((listener) => listener(target));
+	});
+}
+var resizeObserver = new resize_observer_polyfill.default(onResize);
+const _el = process.env.NODE_ENV !== "production" ? elementListeners : null;
+const _rs = process.env.NODE_ENV !== "production" ? onResize : null;
+function observe(element, callback) {
+	if (!elementListeners.has(element)) {
+		elementListeners.set(element, /* @__PURE__ */ new Set());
+		resizeObserver.observe(element);
+	}
+	elementListeners?.get?.(element)?.add?.(callback);
+}
+function unobserve(element, callback) {
+	if (elementListeners.has(element)) {
+		elementListeners?.get?.(element)?.delete?.(callback);
+		if (!elementListeners?.get?.(element)?.size) {
+			resizeObserver.unobserve(element);
+			elementListeners.delete(element);
+		}
+	}
+}
+exports._el = _el;
+exports._rs = _rs;
+exports.observe = observe;
+exports.unobserve = unobserve;

package/dist/utils/observerUtil.js

@@ -1,24 +1,28 @@
-import E from "resize-observer-polyfill";
-const o = /* @__PURE__ */ new Map();
-function b(c) {
-  c.forEach((v) => {
-    var f;
-    const { target: r } = v;
-    (f = o.get(r)) == null || f.forEach((u) => u(r));
-  });
+import ResizeObserver from "resize-observer-polyfill";
+var elementListeners = /* @__PURE__ */ new Map();
+function onResize(entities) {
+	entities.forEach((entity) => {
+		const { target } = entity;
+		elementListeners.get(target)?.forEach((listener) => listener(target));
+	});
 }
-const d = new E(b), h = process.env.NODE_ENV !== "production" ? o : null, z = process.env.NODE_ENV !== "production" ? b : null;
-function N(c, v) {
-  var r, f, u;
-  o.has(c) || (o.set(c, /* @__PURE__ */ new Set()), d.observe(c)), (u = (f = (r = o == null ? void 0 : o.get) == null ? void 0 : r.call(o, c)) == null ? void 0 : f.add) == null || u.call(f, v);
+var resizeObserver = new ResizeObserver(onResize);
+const _el = process.env.NODE_ENV !== "production" ? elementListeners : null;
+const _rs = process.env.NODE_ENV !== "production" ? onResize : null;
+function observe(element, callback) {
+	if (!elementListeners.has(element)) {
+		elementListeners.set(element, /* @__PURE__ */ new Set());
+		resizeObserver.observe(element);
+	}
+	elementListeners?.get?.(element)?.add?.(callback);
 }
-function O(c, v) {
-  var r, f, u, a, p;
-  o.has(c) && ((u = (f = (r = o == null ? void 0 : o.get) == null ? void 0 : r.call(o, c)) == null ? void 0 : f.delete) == null || u.call(f, v), (p = (a = o == null ? void 0 : o.get) == null ? void 0 : a.call(o, c)) != null && p.size || (d.unobserve(c), o.delete(c)));
+function unobserve(element, callback) {
+	if (elementListeners.has(element)) {
+		elementListeners?.get?.(element)?.delete?.(callback);
+		if (!elementListeners?.get?.(element)?.size) {
+			resizeObserver.unobserve(element);
+			elementListeners.delete(element);
+		}
+	}
 }
-export {
-  h as _el,
-  z as _rs,
-  N as observe,
-  O as unobserve
-};
+export { _el, _rs, observe, unobserve };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/resize-observer",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -16,11 +16,12 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "classnames": "^2.5.1",
     "resize-observer-polyfill": "^1.5.1",
-    "@v-c/util": "0.0.4"
+    "@v-c/util": "0.0.15"
   },
   "scripts": {
-    "build": "vite build"
+    "build": "vite build",
+    "prepublish": "pnpm build",
+    "bump": "bumpp --release patch"
   }
 }

package/src/SingleObserver/index.tsx

@@ -1,6 +1,7 @@
 import type { ResizeObserverProps, SizeInfo } from '../index.tsx'
 import findDOMNode from '@v-c/util/dist/Dom/findDOMNode'
-import { defineComponent, inject, onBeforeUnmount, onMounted, shallowRef } from 'vue'
+import { filterEmpty } from '@v-c/util/dist/props-util'
+import { createVNode, defineComponent, inject, isVNode, onBeforeUnmount, onMounted, shallowRef } from 'vue'
 import { CollectionContext } from '../Collection'
 import { observe, unobserve } from '../utils/observerUtil.ts'
 import DomWrapper from './DomWrapper'
@@ -11,6 +12,17 @@ const SingleObserver = defineComponent<ResizeObserverProps>({
   setup(props, { expose, slots }) {
     const elementRef = shallowRef<HTMLElement>()
     const wrapperRef = shallowRef()
+    const setWrapperRef = (el: any) => {
+      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<SizeInfo>({ width: -1, height: -1, offsetWidth: -1, offsetHeight: -1 })
     const getDom = () => {
@@ -20,7 +32,6 @@ const SingleObserver = defineComponent<ResizeObserverProps>({
       // 判断当前的dom是不是一个text元素
       if (dom && dom.nodeType === 3 && dom.nextElementSibling)
         return dom.nextElementSibling as HTMLElement
-
       return dom
     }
 
@@ -80,6 +91,12 @@ const SingleObserver = defineComponent<ResizeObserverProps>({
       getDom,
     })
     return () => {
+      const children = filterEmpty(slots?.default?.())
+      if (children.length === 1 && isVNode(children[0])) {
+        return createVNode(children[0], {
+          ref: setWrapperRef,
+        })
+      }
       return (
         <DomWrapper ref={wrapperRef}>
           {slots.default?.()}