@v-c/resize-observer 0.0.2 → 0.0.3

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,44 @@
-"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;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const CollectionContext = Symbol("CollectionContext");
+const Collection = /* @__PURE__ */ vue.defineComponent({
+  props: {
+    onBatchResize: {
+      type: Function,
+      required: false,
+      default: void 0
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    const resizeIdRef = vue.shallowRef(0);
+    const resizeInfosRef = vue.shallowRef([]);
+    const onCollectionResize = 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);
+    };
+    vue.provide(CollectionContext, onResize);
+    return () => {
+      return slots.default?.();
+    };
+  }
+});
+exports.Collection = Collection;
+exports.CollectionContext = CollectionContext;

package/dist/Collection.js

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

package/dist/SingleObserver/DomWrapper.cjs

@@ -1 +1,11 @@
-"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;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const DomWrapper = /* @__PURE__ */ vue.defineComponent({
+  setup(_, {
+    slots
+  }) {
+    return () => slots.default?.();
+  }
+});
+exports.default = DomWrapper;

package/dist/SingleObserver/DomWrapper.js

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

package/dist/SingleObserver/index.cjs

@@ -1 +1,105 @@
-"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;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const findDOMNode = require("@v-c/util/dist/Dom/findDOMNode");
+const Collection = require("../Collection.cjs");
+const observerUtil = require("../utils/observerUtil.cjs");
+const DomWrapper = require("./DomWrapper.cjs");
+const SingleObserver = /* @__PURE__ */ 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 = vue.shallowRef();
+    const wrapperRef = vue.shallowRef();
+    const onCollectionResize = vue.inject(Collection.CollectionContext, () => {
+    });
+    const sizeRef = vue.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;
+    vue.onMounted(() => {
+      currentElement = getDom();
+      if (currentElement && !props.disabled) observerUtil.observe(currentElement, onInternalResize);
+    });
+    vue.onBeforeUnmount(() => {
+      if (currentElement) observerUtil.unobserve(currentElement, onInternalResize);
+    });
+    expose({
+      getDom
+    });
+    return () => {
+      return vue.createVNode(DomWrapper.default, {
+        "ref": wrapperRef
+      }, {
+        default: () => [slots.default?.()]
+      });
+    };
+  }
+});
+exports.default = SingleObserver;

package/dist/SingleObserver/index.js

@@ -1,84 +1,105 @@
-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({
+import { defineComponent, shallowRef, inject, onMounted, onBeforeUnmount, createVNode } from "vue";
+import findDOMNode from "@v-c/util/dist/Dom/findDOMNode";
+import { CollectionContext } from "../Collection.js";
+import { observe, unobserve } from "../utils/observerUtil.js";
+import DomWrapper from "./DomWrapper.js";
+const SingleObserver = /* @__PURE__ */ defineComponent({
   props: {
     data: {
       type: null,
-      required: !1
+      required: false,
+      default: void 0
     },
     disabled: {
       type: Boolean,
-      required: !1
+      required: false,
+      default: void 0
     },
     onResize: {
       type: Function,
-      required: !1
+      required: false,
+      default: void 0
     }
   },
   name: "SingleObserver",
-  inheritAttrs: !1,
-  setup(u, {
-    expose: w,
-    slots: r
+  inheritAttrs: false,
+  setup(props, {
+    expose,
+    slots
   }) {
-    const n = a(), m = a(), s = z(q, () => {
-    }), t = a({
+    const elementRef = shallowRef();
+    const wrapperRef = shallowRef();
+    const onCollectionResize = inject(CollectionContext, () => {
+    });
+    const sizeRef = shallowRef({
       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 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 {
-        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
+        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
         };
-        t.value = R;
-        const H = f === Math.round(d) ? d : f, M = i === Math.round(l) ? l : i, W = {
-          ...R,
-          offsetWidth: H,
-          offsetHeight: M
+        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
         };
-        s == null || s(W, e, x), g && Promise.resolve().then(() => {
-          g(W, e);
-        });
+        onCollectionResize?.(sizeInfo, target, data);
+        if (onResize) {
+          Promise.resolve().then(() => {
+            onResize(sizeInfo, target);
+          });
+        }
       }
     };
-    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)];
-      }
+    let currentElement;
+    onMounted(() => {
+      currentElement = getDom();
+      if (currentElement && !props.disabled) observe(currentElement, onInternalResize);
+    });
+    onBeforeUnmount(() => {
+      if (currentElement) unobserve(currentElement, onInternalResize);
     });
+    expose({
+      getDom
+    });
+    return () => {
+      return createVNode(DomWrapper, {
+        "ref": wrapperRef
+      }, {
+        default: () => [slots.default?.()]
+      });
+    };
   }
 });
 export {
-  P as default
+  SingleObserver as default
 };

package/dist/index.cjs

@@ -1 +1,56 @@
-"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;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const util = require("@v-c/util");
+const toArray = require("@v-c/util/dist/Children/toArray");
+const Collection = require("./Collection.cjs");
+const index = require("./SingleObserver/index.cjs");
+const observerUtil = require("./utils/observerUtil.cjs");
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const INTERNAL_PREFIX_KEY = "vc-observer-key";
+const ResizeObserver = /* @__PURE__ */ 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 = toArray.toArray(slots.default?.());
+      if (process.env.NODE_ENV !== "production") {
+        if (childNodes.length > 1) {
+          util.warning(false, "Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead.");
+        } else if (childNodes.length === 0) {
+          util.warning(false, "`children` of ResizeObserver is empty. Nothing is in observe.");
+        }
+      }
+      return childNodes.map((child, index$1) => {
+        const key = child?.key || `${INTERNAL_PREFIX_KEY}-${index$1}`;
+        return vue.createVNode(index.default, vue.mergeProps(props, {
+          "key": key
+        }), _isSlot(child) ? child : {
+          default: () => [child]
+        });
+      });
+    };
+  }
+});
+ResizeObserver.Collection = Collection.Collection;
+exports._rs = observerUtil._rs;
+exports.default = ResizeObserver;

package/dist/index.js

@@ -1,46 +1,56 @@
-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 { defineComponent, createVNode, mergeProps, isVNode } from "vue";
+import { warning } from "@v-c/util";
+import { toArray } from "@v-c/util/dist/Children/toArray";
+import { Collection } from "./Collection.js";
+import SingleObserver from "./SingleObserver/index.js";
+import { _rs } from "./utils/observerUtil.js";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const y = "vc-observer-key", v = /* @__PURE__ */ p({
+const INTERNAL_PREFIX_KEY = "vc-observer-key";
+const ResizeObserver = /* @__PURE__ */ defineComponent({
   props: {
     data: {
       type: null,
-      required: !1
+      required: false,
+      default: void 0
     },
     disabled: {
       type: Boolean,
-      required: !1
+      required: false,
+      default: void 0
     },
     onResize: {
       type: Function,
-      required: !1
+      required: false,
+      default: void 0
     }
   },
-  setup(r, {
-    slots: o
+  setup(props, {
+    slots
   }) {
     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]
+      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, mergeProps(props, {
+          "key": key
+        }), _isSlot(child) ? child : {
+          default: () => [child]
         });
       });
     };
   }
 });
-v.Collection = c;
+ResizeObserver.Collection = Collection;
 export {
-  k as _rs,
-  v as default
+  _rs,
+  ResizeObserver 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;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ResizeObserver = require("resize-observer-polyfill");
+const elementListeners = /* @__PURE__ */ new Map();
+function onResize(entities) {
+  entities.forEach((entity) => {
+    const { target } = entity;
+    elementListeners.get(target)?.forEach((listener) => listener(target));
+  });
+}
+const 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 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,33 @@
-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";
+const 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);
+const 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
+  _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.3",
   "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.13"
   },
   "scripts": {
-    "build": "vite build"
+    "build": "vite build",
+    "prepublish": "pnpm build",
+    "bump": "bumpp --release patch"
   }
 }