@v-c/resize-observer 0.0.1 → 0.0.3

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.1",
+  "version": "0.0.3",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -12,15 +12,16 @@
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
-  "scripts": {
-    "build": "vite build"
-  },
   "peerDependencies": {
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/util": "workspace:*",
-    "classnames": "^2.5.1",
-    "resize-observer-polyfill": "^1.5.1"
+    "resize-observer-polyfill": "^1.5.1",
+    "@v-c/util": "0.0.13"
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepublish": "pnpm build",
+    "bump": "bumpp --release patch"
   }
-}
+}

package/package/dist/Collection.cjs

@@ -1 +0,0 @@
-"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;

package/package/dist/Collection.d.ts

@@ -1,15 +0,0 @@
-import { InjectionKey } from 'vue';
-import { SizeInfo } from '.';
-type onCollectionResize = (size: SizeInfo, element: HTMLElement, data: any) => void;
-export declare const CollectionContext: InjectionKey<onCollectionResize>;
-export interface ResizeInfo {
-    size: SizeInfo;
-    element: HTMLElement;
-    data: any;
-}
-export interface CollectionProps {
-    /** Trigger when some children ResizeObserver changed. Collect by frame render level */
-    onBatchResize?: (resizeInfo: ResizeInfo[]) => void;
-}
-export declare const Collection: import('vue').DefineComponent<CollectionProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CollectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export {};

package/package/dist/Collection.js

@@ -1,36 +0,0 @@
-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);
-    };
-  }
-});
-export {
-  m as Collection,
-  a as CollectionContext
-};

package/package/dist/SingleObserver/DomWrapper.cjs

@@ -1 +0,0 @@
-"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;

package/package/dist/SingleObserver/DomWrapper.d.ts

@@ -1,4 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
-    [key: string]: any;
-}>[] | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;

package/package/dist/SingleObserver/DomWrapper.js

@@ -1,14 +0,0 @@
-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
-};

package/package/dist/SingleObserver/index.cjs

@@ -1 +0,0 @@
-"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;

package/package/dist/SingleObserver/index.d.ts

@@ -1,3 +0,0 @@
-import { ResizeObserverProps } from '../index.tsx';
-declare const SingleObserver: import('vue').DefineComponent<ResizeObserverProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ResizeObserverProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default SingleObserver;

package/package/dist/SingleObserver/index.js

@@ -1,84 +0,0 @@
-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)];
-      }
-    });
-  }
-});
-export {
-  P as default
-};

package/package/dist/index.cjs

@@ -1 +0,0 @@
-"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;

package/package/dist/index.d.ts

@@ -1,24 +0,0 @@
-import { Collection } from './Collection.tsx';
-import { _rs } from './utils/observerUtil';
-export { 
-/** @private Test only for mock trigger resize event */
-_rs, };
-export interface SizeInfo {
-    width: number;
-    height: number;
-    offsetWidth: number;
-    offsetHeight: number;
-}
-export type OnResize = (size: SizeInfo, element: HTMLElement) => void;
-export interface ResizeObserverProps {
-    /** Pass to ResizeObserver.Collection with additional data */
-    data?: any;
-    disabled?: boolean;
-    /** Trigger if element resized. Will always trigger when first time render. */
-    onResize?: OnResize;
-}
-declare const ResizeObserver: import('vue').DefineComponent<ResizeObserverProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ResizeObserverProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof ResizeObserver & {
-    Collection: typeof Collection;
-};
-export default _default;

package/package/dist/index.js

@@ -1,46 +0,0 @@
-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);
-}
-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]
-        });
-      });
-    };
-  }
-});
-v.Collection = c;
-export {
-  k as _rs,
-  v as default
-};

package/package/dist/utils/observerUtil.cjs

@@ -1 +0,0 @@
-"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;

package/package/dist/utils/observerUtil.d.ts

@@ -1,7 +0,0 @@
-export type ResizeListener = (element: Element) => void;
-declare function onResize(entities: ResizeObserverEntry[]): void;
-export declare const _el: Map<Element, Set<ResizeListener>> | null;
-export declare const _rs: typeof onResize | null;
-export declare function observe(element: Element, callback: ResizeListener): void;
-export declare function unobserve(element: Element, callback: ResizeListener): void;
-export {};

package/package/dist/utils/observerUtil.js

@@ -1,24 +0,0 @@
-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));
-  });
-}
-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);
-}
-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)));
-}
-export {
-  h as _el,
-  z as _rs,
-  N as observe,
-  O as unobserve
-};

package/package/package.json

@@ -1,26 +0,0 @@
-{
-  "name": "@v-c/resize-observer",
-  "type": "module",
-  "version": "0.0.1",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./dist/*": "./dist/*",
-    "./package.json": "./package.json"
-  },
-  "main": "dist/index.js",
-  "scripts": {
-    "build": "vite build"
-  },
-  "peerDependencies": {
-    "vue": "^3.0.0"
-  },
-  "dependencies": {
-    "@v-c/util": "workspace:*",
-    "classnames": "^2.5.1",
-    "resize-observer-polyfill": "^1.5.1"
-  }
-}

package/package/src/Collection.tsx

@@ -1,44 +0,0 @@
-import type { InjectionKey } from 'vue'
-import type { SizeInfo } from '.'
-import { defineComponent, inject, provide, shallowRef } from 'vue'
-
-type onCollectionResize = (size: SizeInfo, element: HTMLElement, data: any) => void
-
-export const CollectionContext: InjectionKey<onCollectionResize> = Symbol('CollectionContext')
-
-export interface ResizeInfo {
-  size: SizeInfo
-  element: HTMLElement
-  data: any
-}
-
-export interface CollectionProps {
-  /** Trigger when some children ResizeObserver changed. Collect by frame render level */
-  onBatchResize?: (resizeInfo: ResizeInfo[]) => void
-}
-
-export const Collection = defineComponent<CollectionProps>({
-  setup(props, { slots }) {
-    const resizeIdRef = shallowRef(0)
-    const resizeInfosRef = shallowRef<ResizeInfo[]>([])
-    const onCollectionResize = inject(CollectionContext, () => {})
-    const onResize = (size: SizeInfo, element: HTMLElement, data: any) => {
-      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?.()
-    }
-  },
-})

package/package/src/SingleObserver/DomWrapper.tsx

@@ -1,7 +0,0 @@
-import { defineComponent } from 'vue'
-
-export default defineComponent ({
-  setup(_, { slots }) {
-    return () => slots.default?.()
-  },
-})

package/package/src/SingleObserver/index.tsx

@@ -1,92 +0,0 @@
-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 { CollectionContext } from '../Collection'
-import { observe, unobserve } from '../utils/observerUtil.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 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)
-          })
-        }
-      }
-    }
-    let currentElement: HTMLElement
-    onMounted(() => {
-      currentElement = getDom() as HTMLElement
-      if (currentElement && !props.disabled)
-        observe(currentElement, onInternalResize as any)
-    })
-
-    onBeforeUnmount(() => {
-      if (currentElement)
-        unobserve(currentElement, onInternalResize as any)
-    })
-    expose({
-      getDom,
-    })
-    return () => {
-      return (
-        <DomWrapper ref={wrapperRef}>
-          {slots.default?.()}
-        </DomWrapper>
-      )
-    }
-  },
-})
-
-export default SingleObserver

package/package/src/index.tsx

@@ -1,62 +0,0 @@
-import { warning } from '@v-c/util'
-import { toArray } from '@v-c/util/dist/Children/toArray'
-import { defineComponent } from 'vue'
-import { Collection } from './Collection.tsx'
-import SingleObserver from './SingleObserver'
-import { _rs } from './utils/observerUtil'
-
-const INTERNAL_PREFIX_KEY = 'vc-observer-key'
-export {
-  /** @private Test only for mock trigger resize event */
-  _rs,
-}
-
-export interface SizeInfo {
-  width: number
-  height: number
-  offsetWidth: number
-  offsetHeight: number
-}
-
-export type OnResize = (size: SizeInfo, element: HTMLElement) => void
-
-export interface ResizeObserverProps {
-  /** Pass to ResizeObserver.Collection with additional data */
-  data?: any
-  disabled?: boolean
-  /** Trigger if element resized. Will always trigger when first time render. */
-  onResize?: OnResize
-}
-
-const ResizeObserver = defineComponent<ResizeObserverProps>({
-  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 (
-          <SingleObserver {...props} key={key}>
-            {child}
-          </SingleObserver>
-        )
-      })
-    }
-  },
-})
-
-ResizeObserver.Collection = Collection
-
-export default ResizeObserver as typeof ResizeObserver & {
-  Collection: typeof Collection
-}

package/package/src/utils/observerUtil.ts

@@ -1,41 +0,0 @@
-import ResizeObserver from 'resize-observer-polyfill'
-
-export type ResizeListener = (element: Element) => void
-
-// =============================== Const ===============================
-const elementListeners = new Map<Element, Set<ResizeListener>>()
-
-function onResize(entities: ResizeObserverEntry[]) {
-  entities.forEach((entity) => {
-    const { target } = entity
-    elementListeners.get(target)?.forEach(listener => listener(target))
-  })
-}
-
-// Note: ResizeObserver polyfill not support option to measure border-box resize
-const resizeObserver = new ResizeObserver(onResize)
-
-// Dev env only
-
-export const _el = process.env.NODE_ENV !== 'production' ? elementListeners : null; // eslint-disable-line
-
-export const _rs = process.env.NODE_ENV !== 'production' ? onResize : null; // eslint-disable-line
-
-// ============================== Observe ==============================
-export function observe(element: Element, callback: ResizeListener) {
-  if (!elementListeners.has(element)) {
-    elementListeners.set(element, new Set())
-    resizeObserver.observe(element)
-  }
-  elementListeners?.get?.(element)?.add?.(callback)
-}
-
-export function unobserve(element: Element, callback: ResizeListener) {
-  if (elementListeners.has(element)) {
-    elementListeners?.get?.(element)?.delete?.(callback)
-    if (!elementListeners?.get?.(element)?.size) {
-      resizeObserver.unobserve(element)
-      elementListeners.delete(element)
-    }
-  }
-}

package/package/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": ["../../tsconfig.json"],
-  "compilerOptions": {
-
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"]
-}