@v-c/resize-observer 0.0.4 → 1.0.1

package/dist/SingleObserver/index.cjs

@@ -4,13 +4,12 @@ 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_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");
 var SingleObserver = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		data: {
-			type: null,
 			required: false,
 			default: void 0
 		},
@@ -74,13 +73,17 @@ var SingleObserver = /* @__PURE__ */ (0, vue.defineComponent)({
 				});
 			}
 		};
-		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);
+		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"
 		});
 		expose({ getDom });
 		return () => {

package/dist/SingleObserver/index.js

@@ -1,13 +1,12 @@
 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 { computed, createVNode, defineComponent, inject, isVNode, shallowRef, watch } 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({
 	props: {
 		data: {
-			type: null,
 			required: false,
 			default: void 0
 		},
@@ -71,13 +70,17 @@ var SingleObserver_default = /* @__PURE__ */ defineComponent({
 				});
 			}
 		};
-		let currentElement;
-		onMounted(() => {
-			currentElement = getDom();
-			if (currentElement && !props.disabled) observe(currentElement, onInternalResize);
-		});
-		onBeforeUnmount(() => {
-			if (currentElement) unobserve(currentElement, onInternalResize);
+		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"
 		});
 		expose({ getDom });
 		return () => {

package/dist/index.cjs

@@ -5,7 +5,7 @@ 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");
+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);
 }
@@ -13,7 +13,6 @@ var INTERNAL_PREFIX_KEY = "vc-observer-key";
 var ResizeObserver = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		data: {
-			type: null,
 			required: false,
 			default: void 0
 		},
@@ -30,7 +29,7 @@ var ResizeObserver = /* @__PURE__ */ (0, vue.defineComponent)({
 	},
 	setup(props, { slots }) {
 		return () => {
-			const childNodes = (0, __v_c_util_dist_Children_toArray.toArray)(slots.default?.());
+			const childNodes = (0, __v_c_util_dist_props_util.filterEmpty)(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.");

package/dist/index.js

@@ -3,7 +3,7 @@ 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";
+import { filterEmpty } from "@v-c/util/dist/props-util";
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
@@ -11,7 +11,6 @@ var INTERNAL_PREFIX_KEY = "vc-observer-key";
 var ResizeObserver = /* @__PURE__ */ defineComponent({
 	props: {
 		data: {
-			type: null,
 			required: false,
 			default: void 0
 		},
@@ -28,7 +27,7 @@ var ResizeObserver = /* @__PURE__ */ defineComponent({
 	},
 	setup(props, { slots }) {
 		return () => {
-			const childNodes = toArray(slots.default?.());
+			const childNodes = filterEmpty(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.");

package/package.json

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

package/src/SingleObserver/index.tsx

@@ -1,7 +1,15 @@
 import type { ResizeObserverProps, SizeInfo } from '../index.tsx'
 import findDOMNode from '@v-c/util/dist/Dom/findDOMNode'
 import { filterEmpty } from '@v-c/util/dist/props-util'
-import { createVNode, defineComponent, inject, isVNode, onBeforeUnmount, onMounted, shallowRef } from 'vue'
+import {
+  computed,
+  createVNode,
+  defineComponent,
+  inject,
+  isVNode,
+  shallowRef,
+  watch,
+} from 'vue'
 import { CollectionContext } from '../Collection'
 import { observe, unobserve } from '../utils/observerUtil.ts'
 import DomWrapper from './DomWrapper'
@@ -76,17 +84,28 @@ const SingleObserver = defineComponent<ResizeObserverProps>({
         }
       }
     }
-    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)
-    })
+    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',
+      },
+    )
     expose({
       getDom,
     })

package/src/index.tsx

@@ -1,5 +1,5 @@
 import { warning } from '@v-c/util'
-import { toArray } from '@v-c/util/dist/Children/toArray'
+import { filterEmpty } from '@v-c/util/dist/props-util'
 import { defineComponent } from 'vue'
 import { Collection } from './Collection.tsx'
 import SingleObserver from './SingleObserver'
@@ -31,7 +31,7 @@ export interface ResizeObserverProps {
 const ResizeObserver = defineComponent<ResizeObserverProps>({
   setup(props, { slots }) {
     return () => {
-      const childNodes = toArray(slots.default?.())
+      const childNodes = filterEmpty(slots.default?.() ?? [])
       if (process.env.NODE_ENV !== 'production') {
         if (childNodes.length > 1) {
           warning(

package/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineProject, mergeConfig } from 'vitest/config'
-import configShared from '../../vitest.config.ts'
+import configShared from '../../vitest.config'
 
 export default mergeConfig(
   configShared,