@v-c/overflow 0.0.1

package/dist/Overflow.d.ts

@@ -0,0 +1,100 @@
+import { Key, VueNode } from '@v-c/util/dist/type';
+import { CSSProperties, PropType } from 'vue';
+import { default as RawItem } from './RawItem';
+export { OverflowContextProvider } from './context';
+declare const RESPONSIVE: "responsive";
+declare const INVALIDATE: "invalidate";
+export interface OverflowProps<ItemType = any> {
+    prefixCls?: string;
+    class?: any;
+    style?: CSSProperties;
+    data?: ItemType[];
+    itemKey?: Key | ((item: ItemType) => Key);
+    /** Used for `responsive`. It will limit render node to avoid perf issue */
+    itemWidth?: number;
+    renderItem?: (item: ItemType, info: {
+        index: number;
+    }) => VueNode;
+    /** @private Do not use in your production. Render raw node that need wrap Item by developer self */
+    renderRawItem?: (item: ItemType, index: number) => VueNode;
+    maxCount?: number | typeof RESPONSIVE | typeof INVALIDATE;
+    renderRest?: VueNode | ((omittedItems: ItemType[]) => VueNode);
+    /** @private Do not use in your production. Render raw node that need wrap Item by developer self */
+    renderRawRest?: (omittedItems: ItemType[]) => VueNode;
+    prefix?: any;
+    suffix?: any;
+    component?: any;
+    itemComponent?: any;
+    /** @private This API may be refactor since not well design */
+    onVisibleChange?: (visibleCount: number) => void;
+    /** When set to `full`, ssr will render full items by default and remove at client side */
+    ssr?: 'full';
+}
+declare const OverflowImpl: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly prefixCls: {
+        readonly type: StringConstructor;
+        readonly default: "vc-overflow";
+    };
+    readonly data: {
+        readonly type: PropType<any[]>;
+        readonly default: () => never[];
+    };
+    readonly renderItem: PropType<(item: any, info: {
+        index: number;
+    }) => VueNode>;
+    readonly renderRawItem: PropType<(item: any, index: number) => VueNode>;
+    readonly itemKey: PropType<Key | ((item: any) => Key)>;
+    readonly itemWidth: {
+        readonly type: NumberConstructor;
+        readonly default: 10;
+    };
+    readonly maxCount: PropType<number | typeof RESPONSIVE | typeof INVALIDATE>;
+    readonly renderRest: PropType<VueNode | ((omittedItems: any[]) => VueNode)>;
+    readonly renderRawRest: PropType<(omittedItems: any[]) => VueNode>;
+    readonly prefix: {};
+    readonly suffix: {};
+    readonly component: PropType<any>;
+    readonly itemComponent: PropType<any>;
+    readonly onVisibleChange: PropType<(visibleCount: number) => void>;
+    readonly ssr: PropType<"full">;
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "visibleChange"[], "visibleChange", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly prefixCls: {
+        readonly type: StringConstructor;
+        readonly default: "vc-overflow";
+    };
+    readonly data: {
+        readonly type: PropType<any[]>;
+        readonly default: () => never[];
+    };
+    readonly renderItem: PropType<(item: any, info: {
+        index: number;
+    }) => VueNode>;
+    readonly renderRawItem: PropType<(item: any, index: number) => VueNode>;
+    readonly itemKey: PropType<Key | ((item: any) => Key)>;
+    readonly itemWidth: {
+        readonly type: NumberConstructor;
+        readonly default: 10;
+    };
+    readonly maxCount: PropType<number | typeof RESPONSIVE | typeof INVALIDATE>;
+    readonly renderRest: PropType<VueNode | ((omittedItems: any[]) => VueNode)>;
+    readonly renderRawRest: PropType<(omittedItems: any[]) => VueNode>;
+    readonly prefix: {};
+    readonly suffix: {};
+    readonly component: PropType<any>;
+    readonly itemComponent: PropType<any>;
+    readonly onVisibleChange: PropType<(visibleCount: number) => void>;
+    readonly ssr: PropType<"full">;
+}>> & Readonly<{
+    onVisibleChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    readonly prefixCls: string;
+    readonly data: any[];
+    readonly itemWidth: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+type OverflowComponent = typeof OverflowImpl & {
+    Item: typeof RawItem;
+    RESPONSIVE: typeof RESPONSIVE;
+    INVALIDATE: typeof INVALIDATE;
+};
+declare const Overflow: OverflowComponent;
+export default Overflow;

package/dist/Overflow.js

@@ -0,0 +1,321 @@
+import { defineComponent, computed, ref, watchEffect, createVNode, mergeProps, isVNode } from "vue";
+import ResizeObserver from "@v-c/resize-observer";
+import { classNames } from "@v-c/util";
+import { OverflowContextProvider } from "./context.js";
+import useEffectState, { useBatcher } from "./hooks/useEffectState.js";
+import Item from "./Item.js";
+import RawItem from "./RawItem.js";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const RESPONSIVE = "responsive";
+const INVALIDATE = "invalidate";
+function defaultRenderRest(omittedItems) {
+  return `+ ${omittedItems.length} ...`;
+}
+const overflowProps = {
+  prefixCls: {
+    type: String,
+    default: "vc-overflow"
+  },
+  data: {
+    type: Array,
+    default: () => []
+  },
+  renderItem: Function,
+  renderRawItem: Function,
+  itemKey: [String, Number, Function],
+  itemWidth: {
+    type: Number,
+    default: 10
+  },
+  maxCount: [Number, String],
+  renderRest: [Function, Object],
+  renderRawRest: Function,
+  prefix: {},
+  suffix: {},
+  component: [String, Object, Function],
+  itemComponent: [String, Object, Function],
+  onVisibleChange: Function,
+  ssr: String
+};
+const OverflowImpl = /* @__PURE__ */ defineComponent({
+  name: "Overflow",
+  inheritAttrs: false,
+  props: overflowProps,
+  emits: ["visibleChange"],
+  setup(props, {
+    attrs,
+    slots,
+    emit
+  }) {
+    const notifyEffectUpdate = useBatcher();
+    const [containerWidth, setContainerWidth] = useEffectState(notifyEffectUpdate, null);
+    const mergedContainerWidth = computed(() => containerWidth.value || 0);
+    const [itemWidths, setItemWidths] = useEffectState(notifyEffectUpdate, /* @__PURE__ */ new Map());
+    const [prevRestWidth, setPrevRestWidth] = useEffectState(notifyEffectUpdate, 0);
+    const [restWidth, setRestWidth] = useEffectState(notifyEffectUpdate, 0);
+    const [prefixWidth, setPrefixWidth] = useEffectState(notifyEffectUpdate, 0);
+    const [suffixWidth, setSuffixWidth] = useEffectState(notifyEffectUpdate, 0);
+    const suffixFixedStart = ref(null);
+    const displayCount = ref(null);
+    const mergedDisplayCount = computed(() => {
+      if (displayCount.value === null && props.ssr === "full") {
+        return Number.MAX_SAFE_INTEGER;
+      }
+      return displayCount.value || 0;
+    });
+    const restReady = ref(false);
+    const itemPrefixCls = computed(() => `${props.prefixCls}-item`);
+    const mergedRestWidth = computed(() => Math.max(prevRestWidth.value, restWidth.value));
+    const data = computed(() => props.data ?? []);
+    const isResponsive = computed(() => props.maxCount === RESPONSIVE);
+    const shouldResponsive = computed(() => data.value.length && isResponsive.value);
+    const invalidate = computed(() => props.maxCount === INVALIDATE);
+    const showRest = computed(() => shouldResponsive.value || typeof props.maxCount === "number" && data.value.length > props.maxCount);
+    const mergedData = computed(() => {
+      let items = data.value;
+      if (shouldResponsive.value) {
+        if (containerWidth.value === null && props.ssr === "full") {
+          items = data.value;
+        } else {
+          const mergedItemWidth = props.itemWidth ?? 10;
+          const maxLen = Math.min(data.value.length, mergedContainerWidth.value / mergedItemWidth);
+          items = data.value.slice(0, Math.floor(maxLen));
+        }
+      } else if (typeof props.maxCount === "number") {
+        items = data.value.slice(0, props.maxCount);
+      }
+      return items;
+    });
+    const omittedItems = computed(() => {
+      if (shouldResponsive.value) {
+        return data.value.slice(mergedDisplayCount.value + 1);
+      }
+      return data.value.slice(mergedData.value.length);
+    });
+    const getKey = (item, index) => {
+      const {
+        itemKey
+      } = props;
+      if (typeof itemKey === "function") {
+        return itemKey(item);
+      }
+      if (itemKey != null) {
+        return item?.[itemKey] ?? index;
+      }
+      return index;
+    };
+    function updateDisplayCount(count, suffixFixedStartVal, notReady) {
+      if (displayCount.value === count && (suffixFixedStartVal === void 0 || suffixFixedStartVal === suffixFixedStart.value)) {
+        return;
+      }
+      displayCount.value = count;
+      if (!notReady) {
+        restReady.value = count < data.value.length - 1;
+        props.onVisibleChange?.(count);
+        emit("visibleChange", count);
+      }
+      if (suffixFixedStartVal !== void 0) {
+        suffixFixedStart.value = suffixFixedStartVal;
+      }
+    }
+    function onOverflowResize(_, element) {
+      setContainerWidth(element.clientWidth);
+    }
+    function registerSize(key, width) {
+      setItemWidths((origin) => {
+        const clone = new Map(origin || []);
+        if (width === null) {
+          clone.delete(key);
+        } else {
+          clone.set(key, width);
+        }
+        return clone;
+      });
+    }
+    function registerOverflowSize(_, width) {
+      setRestWidth(width ?? 0);
+      setPrevRestWidth(restWidth.value);
+    }
+    function registerPrefixSize(_, width) {
+      setPrefixWidth(width ?? 0);
+    }
+    function registerSuffixSize(_, width) {
+      setSuffixWidth(width ?? 0);
+    }
+    function getItemWidth(index) {
+      const key = getKey(mergedData.value[index], index);
+      return itemWidths.value?.get(key);
+    }
+    watchEffect(() => {
+      const container = mergedContainerWidth.value;
+      const rest = mergedRestWidth.value;
+      const list = mergedData.value;
+      if (container && typeof rest === "number" && list) {
+        let totalWidth = prefixWidth.value + suffixWidth.value;
+        const len = list.length;
+        const lastIndex = len - 1;
+        if (!len) {
+          updateDisplayCount(0, null);
+          return;
+        }
+        for (let i = 0; i < len; i += 1) {
+          let currentItemWidth = getItemWidth(i);
+          if (props.ssr === "full") {
+            currentItemWidth = currentItemWidth || 0;
+          }
+          if (currentItemWidth === void 0) {
+            updateDisplayCount(i - 1, void 0, true);
+            break;
+          }
+          totalWidth += currentItemWidth;
+          if (
+            // Only one means `totalWidth` is the final width
+            lastIndex === 0 && totalWidth <= container || i === lastIndex - 1 && totalWidth + (getItemWidth(lastIndex) || 0) <= container
+          ) {
+            updateDisplayCount(lastIndex, null);
+            break;
+          } else if (totalWidth + rest > container) {
+            updateDisplayCount(i - 1, totalWidth - currentItemWidth - suffixWidth.value + restWidth.value);
+            break;
+          }
+        }
+        if ((props.suffix ?? slots.suffix?.()) && getItemWidth(0) + suffixWidth.value > container) {
+          suffixFixedStart.value = null;
+        }
+      }
+    }, {
+      flush: "post"
+    });
+    return () => {
+      const {
+        prefixCls = "vc-overflow",
+        component: Component = "div",
+        itemComponent
+      } = props;
+      const renderItem = slots?.renderItem ?? props?.renderItem;
+      const renderRawItem = slots?.renderRawItem ?? props?.renderRawItem;
+      const renderRest = slots?.renderRest ?? props?.renderRest;
+      const renderRawRest = slots?.renderRawRest ?? props?.renderRawRest;
+      let prefix = slots?.prefix ?? props?.prefix;
+      let suffix = slots?.suffix ?? props?.suffix;
+      if (typeof prefix === "function") {
+        prefix = prefix();
+      }
+      if (typeof suffix === "function") {
+        suffix = suffix();
+      }
+      const displayRest = restReady.value && !!omittedItems.value.length;
+      let suffixStyle = {};
+      if (suffixFixedStart.value !== null && shouldResponsive.value) {
+        suffixStyle = {
+          position: "absolute",
+          left: `${suffixFixedStart.value}px`,
+          top: 0
+        };
+      }
+      const itemSharedProps = {
+        prefixCls: itemPrefixCls.value,
+        responsive: shouldResponsive.value,
+        component: itemComponent,
+        invalidate: invalidate.value
+      };
+      const internalRenderItemNode = (item, index) => {
+        const key = getKey(item, index);
+        if (renderRawItem) {
+          let _slot;
+          return createVNode(OverflowContextProvider, {
+            "key": key,
+            "value": {
+              ...itemSharedProps,
+              order: index,
+              item,
+              itemKey: key,
+              registerSize,
+              display: index <= mergedDisplayCount.value
+            }
+          }, _isSlot(_slot = renderRawItem(item, index)) ? _slot : {
+            default: () => [_slot]
+          });
+        }
+        return createVNode(Item, mergeProps(itemSharedProps, {
+          "order": index,
+          "key": key,
+          "item": item,
+          "renderItem": renderItem,
+          "itemKey": key,
+          "registerSize": registerSize,
+          "display": index <= mergedDisplayCount.value
+        }), null);
+      };
+      const restContextProps = {
+        order: displayRest ? mergedDisplayCount.value : Number.MAX_SAFE_INTEGER,
+        class: `${itemPrefixCls.value}-rest`,
+        registerSize: registerOverflowSize,
+        display: displayRest
+      };
+      const mergedRenderRestFn = renderRest ?? defaultRenderRest;
+      const restNode = () => {
+        if (renderRawRest) {
+          let _slot2;
+          return createVNode(OverflowContextProvider, {
+            "value": {
+              ...itemSharedProps,
+              ...restContextProps
+            }
+          }, _isSlot(_slot2 = renderRawRest(omittedItems.value)) ? _slot2 : {
+            default: () => [_slot2]
+          });
+        }
+        return createVNode(Item, mergeProps(itemSharedProps, restContextProps), {
+          default: () => typeof mergedRenderRestFn === "function" ? mergedRenderRestFn(omittedItems.value) : mergedRenderRestFn
+        });
+      };
+      const {
+        class: classAttr,
+        style: styleAttr,
+        ...restAttrs
+      } = attrs;
+      const overflowNode = createVNode(Component, mergeProps({
+        "class": classNames(!invalidate.value && prefixCls, classAttr),
+        "style": styleAttr
+      }, restAttrs), {
+        default: () => [prefix && createVNode(Item, mergeProps(itemSharedProps, {
+          "responsive": isResponsive.value,
+          "responsiveDisabled": !shouldResponsive.value,
+          "order": -1,
+          "class": `${itemPrefixCls.value}-prefix`,
+          "registerSize": registerPrefixSize,
+          "display": true
+        }), {
+          default: () => prefix
+        }), mergedData.value.map(internalRenderItemNode), showRest.value ? restNode() : null, suffix && createVNode(Item, mergeProps(itemSharedProps, {
+          "responsive": isResponsive.value,
+          "responsiveDisabled": !shouldResponsive.value,
+          "order": mergedDisplayCount.value,
+          "class": `${itemPrefixCls.value}-suffix`,
+          "registerSize": registerSuffixSize,
+          "display": true,
+          "style": suffixStyle
+        }), {
+          default: () => suffix
+        }), slots.default?.()]
+      });
+      return isResponsive.value ? createVNode(ResizeObserver, {
+        "onResize": onOverflowResize,
+        "disabled": !shouldResponsive.value
+      }, _isSlot(overflowNode) ? overflowNode : {
+        default: () => [overflowNode]
+      }) : overflowNode;
+    };
+  }
+});
+const Overflow = OverflowImpl;
+Overflow.Item = RawItem;
+Overflow.RESPONSIVE = RESPONSIVE;
+Overflow.INVALIDATE = INVALIDATE;
+export {
+  OverflowContextProvider,
+  Overflow as default
+};

package/dist/RawItem.cjs

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const util = require("@v-c/util");
+const context = require("./context.cjs");
+const Item = require("./Item.cjs");
+const RawItem = /* @__PURE__ */ vue.defineComponent({
+  name: "OverflowRawItem",
+  inheritAttrs: false,
+  props: {
+    component: {
+      type: [String, Object, Function],
+      default: "div"
+    }
+  },
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const context$1 = context.useInjectOverflowContext();
+    return () => {
+      if (!context$1?.value) {
+        const Component = props.component ?? "div";
+        return vue.createVNode(Component, attrs, {
+          default: () => [slots.default?.()]
+        });
+      }
+      const {
+        className: contextClassName,
+        ...restContext
+      } = context$1.value;
+      const {
+        class: classAttr,
+        ...restAttrs
+      } = attrs;
+      return vue.createVNode(context.OverflowContextProvider, {
+        "value": null
+      }, {
+        default: () => [vue.createVNode(Item.default, vue.mergeProps(restContext, restAttrs, {
+          "class": util.classNames(contextClassName, classAttr),
+          "component": props.component
+        }), slots)]
+      });
+    };
+  }
+});
+exports.default = RawItem;

package/dist/RawItem.d.ts

@@ -0,0 +1,15 @@
+import { PropType } from 'vue';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    component: {
+        type: PropType<any>;
+        default: string;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    component: {
+        type: PropType<any>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    component: any;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/RawItem.js

@@ -0,0 +1,47 @@
+import { defineComponent, createVNode, mergeProps } from "vue";
+import { classNames } from "@v-c/util";
+import { useInjectOverflowContext, OverflowContextProvider } from "./context.js";
+import Item from "./Item.js";
+const RawItem = /* @__PURE__ */ defineComponent({
+  name: "OverflowRawItem",
+  inheritAttrs: false,
+  props: {
+    component: {
+      type: [String, Object, Function],
+      default: "div"
+    }
+  },
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const context = useInjectOverflowContext();
+    return () => {
+      if (!context?.value) {
+        const Component = props.component ?? "div";
+        return createVNode(Component, attrs, {
+          default: () => [slots.default?.()]
+        });
+      }
+      const {
+        className: contextClassName,
+        ...restContext
+      } = context.value;
+      const {
+        class: classAttr,
+        ...restAttrs
+      } = attrs;
+      return createVNode(OverflowContextProvider, {
+        "value": null
+      }, {
+        default: () => [createVNode(Item, mergeProps(restContext, restAttrs, {
+          "class": classNames(contextClassName, classAttr),
+          "component": props.component
+        }), slots)]
+      });
+    };
+  }
+});
+export {
+  RawItem as default
+};

package/dist/context.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const OverflowContextKey = Symbol("OverflowContext");
+const OverflowContextProvider = /* @__PURE__ */ vue.defineComponent({
+  name: "OverflowContextProvider",
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: Object
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    vue.provide(OverflowContextKey, vue.computed(() => props.value));
+    return () => slots.default?.();
+  }
+});
+function useInjectOverflowContext() {
+  return vue.inject(OverflowContextKey, null);
+}
+exports.OverflowContextProvider = OverflowContextProvider;
+exports.useInjectOverflowContext = useInjectOverflowContext;

package/dist/context.d.ts

@@ -0,0 +1,25 @@
+import { Key } from '@v-c/util/dist/type';
+import { ComputedRef, PropType } from 'vue';
+export interface OverflowContextType {
+    prefixCls: string;
+    responsive: boolean;
+    order: number;
+    registerSize: (key: Key, width: number | null) => void;
+    display: boolean;
+    invalidate: boolean;
+    item?: any;
+    itemKey?: Key;
+    className?: string;
+}
+export declare const OverflowContextProvider: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: {
+        type: PropType<any>;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: {
+        type: PropType<any>;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare function useInjectOverflowContext(): ComputedRef<OverflowContextType | null> | null;

package/dist/context.js

@@ -0,0 +1,24 @@
+import { defineComponent, inject, provide, computed } from "vue";
+const OverflowContextKey = Symbol("OverflowContext");
+const OverflowContextProvider = /* @__PURE__ */ defineComponent({
+  name: "OverflowContextProvider",
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: Object
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    provide(OverflowContextKey, computed(() => props.value));
+    return () => slots.default?.();
+  }
+});
+function useInjectOverflowContext() {
+  return inject(OverflowContextKey, null);
+}
+export {
+  OverflowContextProvider,
+  useInjectOverflowContext
+};

package/dist/hooks/channelUpdate.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const raf = require("@v-c/util/dist/raf");
+function channelUpdate(callback) {
+  if (typeof MessageChannel === "undefined") {
+    raf(callback);
+  } else {
+    const channel = new MessageChannel();
+    channel.port1.onmessage = () => callback();
+    channel.port2.postMessage(void 0);
+  }
+}
+exports.default = channelUpdate;

package/dist/hooks/channelUpdate.d.ts

@@ -0,0 +1 @@
+export default function channelUpdate(callback: VoidFunction): void;

package/dist/hooks/channelUpdate.js

@@ -0,0 +1,13 @@
+import raf from "@v-c/util/dist/raf";
+function channelUpdate(callback) {
+  if (typeof MessageChannel === "undefined") {
+    raf(callback);
+  } else {
+    const channel = new MessageChannel();
+    channel.port1.onmessage = () => callback();
+    channel.port2.postMessage(void 0);
+  }
+}
+export {
+  channelUpdate as default
+};

package/dist/hooks/useEffectState.cjs

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const useEvent = require("@v-c/util/dist/hooks/useEvent");
+const vue = require("vue");
+const channelUpdate = require("./channelUpdate.cjs");
+function useBatcher() {
+  const updateFuncRef = vue.ref(null);
+  const notifyEffectUpdate = (callback) => {
+    if (!updateFuncRef.value) {
+      updateFuncRef.value = [];
+      channelUpdate.default(() => {
+        updateFuncRef.value.forEach((fn) => {
+          fn();
+        });
+        updateFuncRef.value = null;
+      });
+    }
+    updateFuncRef.value.push(callback);
+  };
+  return notifyEffectUpdate;
+}
+function useEffectState(notifyEffectUpdate, defaultValue) {
+  const stateValue = vue.ref(defaultValue);
+  const setEffectVal = useEvent((nextValue) => {
+    notifyEffectUpdate(() => {
+      if (typeof nextValue === "function") {
+        const updater = nextValue;
+        stateValue.value = updater(stateValue.value);
+      } else {
+        stateValue.value = nextValue;
+      }
+    });
+  });
+  return [stateValue, setEffectVal];
+}
+exports.default = useEffectState;
+exports.useBatcher = useBatcher;