vue-echarts 8.2.0 → 8.3.0

package/dist/index.js

@@ -1,6 +1,6 @@
-import { a as hasZeroDimension, c as isOn, d as parseOnEvent, f as warn$1, i as hasEventHandler, l as isPlainObject, n as useRuntime, o as isBrowser, r as createEventInvoker, s as isIgnorableWatchChange, u as isValidArrayIndex } from "./runtime-BSiQKM1W.js";
+import { a as hasEventHandler, c as isIgnorableWatchChange, d as isValidArrayIndex, f as parseOnEvent, i as createEventInvoker, l as isOn, o as hasZeroDimension, p as warn$1, r as useRuntime, s as isBrowser, t as planUpdate, u as isPlainObject } from "./update-CWPvYl2M.js";
 import { Teleport, computed, defineComponent, getCurrentInstance, h, inject, nextTick, onBeforeUnmount, onMounted, onScopeDispose, onUpdated, shallowReactive, shallowRef, toRef, toValue, watch, watchSyncEffect } from "vue";
-import { ComponentModel, init, throttle } from "echarts/core";
+import { init, throttle } from "echarts/core";
 //#region src/composables/api.ts
 const METHOD_NAMES = [
 	"getWidth",
@@ -189,12 +189,12 @@ function useSlotOption(slots, onSlotsChange) {
 	collectSlotNames(true);
 	let slotNames = [];
 	let nextSlotNames = slotNames;
-	let patchedSlotNames = slotNames;
-	const hasNewSlots = () => collectSlotNames().some((name) => !slotNames.includes(name));
+	const patchedSlotNames = /* @__PURE__ */ new Set();
+	const callbacks = /* @__PURE__ */ new Map();
 	function setReady(value) {
 		ready.value = value;
 		if (value) return;
-		patchedSlotNames = [];
+		patchedSlotNames.clear();
 		for (const key of Object.keys(params)) delete params[key];
 	}
 	function syncSlotNames(names) {
@@ -202,6 +202,7 @@ function useSlotOption(slots, onSlotsChange) {
 		for (const key of slotNames) if (!names.includes(key)) {
 			delete params[key];
 			delete containers[key];
+			callbacks.delete(key);
 		}
 		slotNames = names;
 		return true;
@@ -224,7 +225,7 @@ function useSlotOption(slots, onSlotsChange) {
 			}, slotContent);
 		}));
 	};
-	function patchOption(src) {
+	function prepare(src) {
 		const names = collectSlotNames();
 		syncSlotNames(names);
 		let root;
@@ -232,24 +233,32 @@ function useSlotOption(slots, onSlotsChange) {
 			root ??= { ...src };
 			writePath(root, getSlotPath(key), null, true);
 		}
-		if (names.length === 0) {
-			patchedSlotNames = [];
-			return root ?? src;
-		}
-		root ??= { ...src };
+		if (names.length) root ??= { ...src };
 		const patchedNames = [];
 		for (const key of names) {
-			const formatter = (payload) => {
-				if (!slots[key]) return;
-				if (key in params && Object.is(params[key], payload)) delete params[key];
-				params[key] = payload;
-				return containers[key];
-			};
-			if (!writePath(root, getSlotPath(key), formatter)) continue;
+			let callback = callbacks.get(key);
+			if (!callback) {
+				const formatter = (payload) => {
+					if (!slots[key]) return;
+					if (key in params && Object.is(params[key], payload)) delete params[key];
+					params[key] = payload;
+					return containers[key];
+				};
+				callback = {
+					path: getSlotPath(key),
+					formatter
+				};
+				callbacks.set(key, callback);
+			}
+			if (!writePath(root, callback.path, callback.formatter)) continue;
 			patchedNames.push(key);
 		}
-		patchedSlotNames = patchedNames;
-		return root;
+		return {
+			option: root ?? src,
+			commit: () => {
+				patchedNames.forEach((name) => patchedSlotNames.add(name));
+			}
+		};
 	}
 	onUpdated(() => {
 		if (syncSlotNames(nextSlotNames)) onSlotsChange();
@@ -260,9 +269,11 @@ function useSlotOption(slots, onSlotsChange) {
 	});
 	return {
 		render,
-		hasNewSlots,
-		patchOption,
-		setReady
+		prepare,
+		setReady,
+		cancelPendingUpdate: () => {
+			syncSlotNames(collectSlotNames());
+		}
 	};
 }
 //#endregion
@@ -303,7 +314,7 @@ function useReactiveChartListeners(chart, attrs) {
 		for (const binding of bindings.values()) binding.emitter.off(binding.event, binding.handler);
 		bindings.clear();
 	}
-	const stopWatch = watchSyncEffect(() => {
+	function sync() {
 		seen.clear();
 		const instance = chart.value;
 		for (const [key, source] of consumedSources) if (attrs[key] !== source) consumedSources.delete(key);
@@ -354,205 +365,30 @@ function useReactiveChartListeners(chart, attrs) {
 			binding.emitter.off(binding.event, binding.handler);
 			bindings.delete(key);
 		}
-	});
+	}
+	const stopWatch = watchSyncEffect(sync);
+	if (getCurrentInstance()) onUpdated(sync);
 	const stop = () => {
 		stopWatch();
 		clearBindings();
 	};
 	onScopeDispose(stop);
-	return stop;
-}
-function useRootAttrs(attrs) {
-	return computed(() => {
-		const result = {};
-		for (const key in attrs) {
-			if (key.startsWith(NATIVE_EVENT_PREFIX)) {
-				const event = key.slice(9);
-				if (event) result[`on:${event}`] = attrs[key];
-				continue;
-			}
-			if (!isOn(key)) result[key] = attrs[key];
-		}
-		return result;
-	});
-}
-//#endregion
-//#region src/update.ts
-function toIdentity(value) {
-	return typeof value === "string" || typeof value === "number" ? String(value) : void 0;
-}
-function buildShape(value, context, mode) {
-	if (!isPlainObject(value)) return true;
-	const shape = Object.create(null);
-	for (const key of Object.keys(value)) {
-		const child = value[key];
-		if (child === void 0) continue;
-		if (mode === "graphic" && key === "$action") context.hasAction = true;
-		if (mode === "graphic" && (key === "elements" || key === "children") && Array.isArray(child)) {
-			shape[key] = analyzeItems(child, context, "graphic", true);
-			continue;
-		}
-		if (mode === "option") {
-			const componentItems = ComponentModel.hasClass(key);
-			if (Array.isArray(child) || componentItems && isPlainObject(child)) {
-				shape[key] = analyzeItems(Array.isArray(child) ? child : [child], context, key === "graphic" ? "graphic" : void 0, componentItems);
-				continue;
-			}
-		}
-		shape[key] = mode === "media" && key === "option" ? buildShape(child, context, "option") : buildShape(child, context);
-	}
-	return shape;
-}
-function analyzeItems(items, context, mode, componentItems) {
-	const shapes = [];
-	for (const item of items) {
-		const identity = componentItems ? item : void 0;
-		shapes.push({
-			id: toIdentity(identity?.id),
-			name: toIdentity(identity?.name),
-			shape: buildShape(item, context, mode)
-		});
-	}
-	return shapes;
-}
-/**
-* Build a structural signature that retains component identities but not option payload values.
-* Data arrays inside component items remain leaves. Graphic element trees and nested option units
-* (`baseOption`, timeline options, and media options) reuse collection summaries.
-*/
-function buildSignature(option) {
-	const opt = option;
-	const context = { hasAction: false };
-	const collections = Object.create(null);
-	const objectShapes = Object.create(null);
-	const leaves = [];
-	for (const key of Object.keys(opt)) {
-		const value = opt[key];
-		const componentItems = ComponentModel.hasClass(key);
-		if (Array.isArray(value) || componentItems && isPlainObject(value)) {
-			const mode = key === "options" ? "option" : key === "media" ? "media" : key === "graphic" ? "graphic" : void 0;
-			collections[key] = analyzeItems(Array.isArray(value) ? value : [value], context, mode, componentItems);
-			continue;
-		}
-		if (isPlainObject(value)) {
-			objectShapes[key] = buildShape(value, context, key === "baseOption" ? "option" : void 0);
-			continue;
-		}
-		if (value !== void 0 && !componentItems) leaves.push(key);
-	}
 	return {
-		collections,
-		objectShapes,
-		leaves,
-		hasAction: context.hasAction
+		sync,
+		stop
 	};
 }
-function hasCollectionRemoval(prev, next) {
-	if (!next) return prev.length > 0;
-	return next.length < prev.length;
-}
-function getItemIdentity(item) {
-	return item.id !== void 0 ? `id:${item.id}` : item.name !== void 0 ? `name:${item.name}` : void 0;
-}
-function hasIdentityChange(prev, next) {
-	const length = Math.min(prev.length, next.length);
-	for (let index = 0; index < length; index++) {
-		const previous = getItemIdentity(prev[index]);
-		const current = getItemIdentity(next[index]);
-		if (previous !== current && (previous !== void 0 || current !== void 0)) return true;
-	}
-	return false;
-}
-function preservesReplacementOrder(prev, next) {
-	const positions = /* @__PURE__ */ new Map();
-	for (let index = 0; index < prev.length; index++) {
-		const item = prev[index];
-		if (item.id !== void 0) positions.set(item.id, index);
-	}
-	return next.every((item, index) => {
-		const previousIndex = item.id === void 0 ? void 0 : positions.get(item.id);
-		return previousIndex === void 0 || previousIndex === index;
-	});
-}
-function hasShapeRemoval(prev, next) {
-	if (prev === true || next === true) return false;
-	const prevIsCollection = Array.isArray(prev);
-	const nextIsCollection = Array.isArray(next);
-	if (prevIsCollection || nextIsCollection) return !prevIsCollection || !nextIsCollection || hasCollectionRemoval(prev, next) || hasIdentityChange(prev, next) || findItemShapeRemoval(prev, next) !== void 0;
-	for (const key in prev) {
-		const nextChild = next[key];
-		if (nextChild === void 0 || hasShapeRemoval(prev[key], nextChild)) return true;
-	}
-	return false;
-}
-function findItemShapeRemoval(prev, next) {
-	let anonymousRemoval;
-	for (let index = 0; index < prev.length; index++) {
-		const item = prev[index];
-		let nextShape;
-		if (item.id !== void 0) nextShape = next.find((candidate) => candidate.id === item.id)?.shape;
-		else nextShape = next[index]?.shape;
-		if (nextShape && hasShapeRemoval(item.shape, nextShape)) {
-			if (item.id !== void 0) return item;
-			anonymousRemoval ??= item;
-		}
-	}
-	return anonymousRemoval;
-}
-/** Returns replacements, undefined for a plain merge, or null when a rebuild is required. */
-function collectReplacements(prev, next) {
-	let replaceMerge;
-	if (next.objectShapes.aria && !prev.objectShapes.aria) return null;
-	for (const key in next.collections) if (!prev.collections[key] && !prev.objectShapes[key] && !prev.leaves.includes(key) && !ComponentModel.hasClass(key)) return null;
-	for (const key in prev.objectShapes) {
-		const prevShape = prev.objectShapes[key];
-		const nextShape = next.objectShapes[key];
-		if (prevShape && nextShape) {
-			if (hasShapeRemoval(prevShape, nextShape)) return null;
+function getRootAttrs(attrs) {
+	const result = {};
+	for (const key in attrs) {
+		if (key.startsWith(NATIVE_EVENT_PREFIX)) {
+			const event = key.slice(9);
+			if (event) result[`on:${event}`] = attrs[key];
 			continue;
 		}
-		if (!next.leaves.includes(key)) return null;
-	}
-	for (const key of prev.leaves) if (!next.leaves.includes(key) && next.collections[key] === void 0 && next.objectShapes[key] === void 0) return null;
-	for (const key in prev.collections) {
-		const prevCollection = prev.collections[key];
-		if (key === "graphic" && next.hasAction) continue;
-		const nextCollection = next.collections[key];
-		if (!nextCollection && !ComponentModel.hasClass(key)) return null;
-		const collectionRemoval = hasCollectionRemoval(prevCollection, nextCollection);
-		const identityChange = nextCollection && !collectionRemoval && hasIdentityChange(prevCollection, nextCollection);
-		const shapeRemoval = nextCollection ? findItemShapeRemoval(prevCollection, nextCollection) : void 0;
-		if (shapeRemoval?.id !== void 0) return null;
-		if (!shapeRemoval && !collectionRemoval && !identityChange) continue;
-		if (!ComponentModel.hasClass(key)) return null;
-		if (nextCollection && !preservesReplacementOrder(prevCollection, nextCollection)) return null;
-		(replaceMerge ??= []).push(key);
+		if (!isOn(key)) result[key] = attrs[key];
 	}
-	return replaceMerge;
-}
-/**
-* Produce an update plan that preserves option structure and initialization semantics.
-* Falls back to `notMerge: true` when the change looks complex.
-*/
-function planUpdate(prev, option) {
-	const next = buildSignature(option);
-	if (!prev) return {
-		signature: next,
-		plan: { notMerge: false }
-	};
-	const replaceMerge = collectReplacements(prev, next);
-	if (replaceMerge === null) return {
-		signature: next,
-		plan: { notMerge: !next.hasAction }
-	};
-	replaceMerge?.sort();
-	return {
-		signature: next,
-		plan: replaceMerge ? {
-			notMerge: false,
-			replaceMerge
-		} : { notMerge: false }
-	};
+	return result;
 }
 //#endregion
 //#region src/style.css?raw
@@ -596,8 +432,8 @@ var src_default = /* @__PURE__ */ defineComponent({
 		const root = shallowRef();
 		const chartHost = shallowRef();
 		const chart = shallowRef();
-		const themeRevision = shallowRef(0);
-		const initOptionsRevision = shallowRef(0);
+		const updateRequest = shallowRef(0);
+		let pendingUpdate = 0;
 		const defaultTheme = inject(THEME_KEY, null);
 		const defaultInitOptions = inject(INIT_OPTIONS_KEY, null);
 		const defaultUpdateOptions = inject(UPDATE_OPTIONS_KEY, null);
@@ -609,95 +445,131 @@ var src_default = /* @__PURE__ */ defineComponent({
 		const realTheme = computed(() => props.theme ?? toValue(defaultTheme) ?? void 0);
 		const realInitOptions = computed(() => props.initOptions ?? toValue(defaultInitOptions) ?? void 0);
 		const realUpdateOptions = computed(() => props.updateOptions ?? toValue(defaultUpdateOptions));
-		const rootAttrs = useRootAttrs(attrs);
 		const terminallyDisposed = shallowRef(false);
-		const { render: renderSlot, hasNewSlots, patchOption, setReady: setSlotsReady } = useSlotOption(slots, requestUpdate);
-		const { patchOption: patchGraphicOption, render: renderGraphic } = useRuntime({
+		const { render: renderSlot, prepare: prepareSlots, setReady: setSlotsReady, cancelPendingUpdate: cancelSlotUpdate } = useSlotOption(slots, requestUpdate);
+		const graphic = useRuntime({
 			slots,
 			manualUpdate,
-			requestUpdate: () => requestUpdate("graphic")
-		}) ?? {};
+			requestUpdate: () => requestUpdate(2)
+		});
 		let lastSignature;
 		let lastAutoOption;
 		let themeApplied = false;
-		let initOptionsInvalidated = false;
 		let optionApplied = false;
-		let manualUpdateAtInit = manualUpdate.value;
 		let initDeferred = false;
 		let graphicSlotApplied = false;
-		const updateFlush = patchGraphicOption ? "post" : "pre";
+		let updateRevision = 0;
+		let modelValid = false;
 		function getAutoOption() {
-			return props.option ?? (patchGraphicOption && (slots.graphic || graphicSlotApplied) ? {} : void 0);
+			return props.option ?? (graphic && (slots.graphic || graphicSlotApplied) ? {} : void 0);
 		}
 		function isCurrent(instance) {
 			return instance !== void 0 && chart.value === instance && !terminallyDisposed.value;
 		}
+		function runUpdate(instance, update, signature) {
+			const revision = ++updateRevision;
+			lastSignature = null;
+			modelValid = false;
+			update();
+			if (!isCurrent(instance) || updateRevision !== revision) return false;
+			lastSignature = signature;
+			modelValid = true;
+			return true;
+		}
 		function applyTheme(instance) {
 			if (!optionApplied || themeApplied) return false;
+			const revision = updateRevision + 1;
 			themeApplied = true;
-			instance.setTheme(realTheme.value || {});
-			return isCurrent(instance);
+			try {
+				return runUpdate(instance, () => instance.setTheme(realTheme.value || {}), lastSignature === void 0 ? void 0 : null);
+			} catch (error) {
+				if (updateRevision === revision) themeApplied = false;
+				throw error;
+			}
 		}
 		function applyOption(instance, option, mode, manualOptions) {
 			const manual = mode === "manual";
 			initDeferred = false;
-			const slotted = patchOption(option);
-			const patched = patchGraphicOption ? patchGraphicOption(slotted) : slotted;
-			const forceGraphic = mode === "graphic";
-			const skipPlanning = manual || forceGraphic;
-			let updateOptions;
-			let nextSignature;
-			if (skipPlanning) updateOptions = forceGraphic ? realUpdateOptions.value ?? void 0 : manualOptions;
-			else if (realUpdateOptions.value) {
-				updateOptions = realUpdateOptions.value;
-				nextSignature = null;
-			} else {
-				const planned = planUpdate(lastSignature ?? void 0, slotted);
-				updateOptions = !planned.signature.hasAction && (lastSignature === null || mode === "theme") ? {
+			const preparedSlots = prepareSlots(option);
+			const slotted = preparedSlots.option;
+			const hasGraphicSlot = Boolean(graphic && slots.graphic);
+			const source = hasGraphicSlot ? {
+				...slotted,
+				graphic: void 0
+			} : slotted;
+			let updateOptions = manual ? manualOptions : realUpdateOptions.value ?? void 0;
+			let nextSignature = null;
+			const graphicOnly = mode === "graphic" && hasGraphicSlot && graphicSlotApplied && modelValid;
+			if (graphicOnly) nextSignature = lastSignature ?? null;
+			else if (!manual && !updateOptions) {
+				const planned = planUpdate(lastSignature ?? void 0, source);
+				updateOptions = !planned.signature.hasAction && lastSignature === null ? {
 					...planned.plan,
 					notMerge: true
 				} : planned.plan;
 				nextSignature = planned.signature;
 			}
-			const hasGraphicSlot = Boolean(patchGraphicOption && slots.graphic);
-			if ((forceGraphic || graphicSlotApplied || hasGraphicSlot) && !updateOptions?.notMerge) {
-				const replaceMerge = updateOptions?.replaceMerge;
-				const replacements = typeof replaceMerge === "string" ? [replaceMerge] : replaceMerge;
-				if (!replacements?.includes("graphic")) updateOptions = {
-					...updateOptions,
-					replaceMerge: replacements ? [...replacements, "graphic"] : ["graphic"]
-				};
-			}
+			const replaceMerge = updateOptions?.replaceMerge;
+			const replacements = typeof replaceMerge === "string" ? [replaceMerge] : replaceMerge ?? [];
+			const preparedGraphic = graphic?.prepare(slotted, !modelValid || !graphicSlotApplied || Boolean(updateOptions?.notMerge) || replacements.includes("graphic") || manual);
+			let patched = preparedGraphic?.option ?? slotted;
+			if ((preparedGraphic?.replace || graphicSlotApplied && !hasGraphicSlot) && !updateOptions?.notMerge && !replacements.includes("graphic")) updateOptions = {
+				...updateOptions,
+				replaceMerge: [...replacements, "graphic"]
+			};
+			const replacesSource = replacements.some((key) => key !== "graphic");
+			if (graphicOnly && !updateOptions?.notMerge && !replacesSource) patched = { graphic: patched.graphic };
+			syncListeners();
+			if (!runUpdate(instance, () => instance.setOption(patched, updateOptions), nextSignature)) return;
+			preparedSlots.commit();
+			preparedGraphic?.commit();
 			graphicSlotApplied = hasGraphicSlot;
 			optionApplied = true;
-			if (!skipPlanning) lastSignature = nextSignature;
 			if (!manual) lastAutoOption = option;
-			instance.setOption(patched, updateOptions);
-			if (!isCurrent(instance) || mode === "theme") return;
-			if (applyTheme(instance) && !manual) applyOption(instance, option, "theme");
+			if (applyTheme(instance) && !manual) applyOption(instance, option);
+		}
+		function scheduleUpdate(reason) {
+			pendingUpdate |= reason;
+			updateRequest.value++;
 		}
-		function requestUpdate(mode) {
+		function requestUpdate(reason = 1) {
+			if (!manualUpdate.value && !initDeferred && !terminallyDisposed.value) scheduleUpdate(reason);
+		}
+		function flushUpdate() {
+			const reasons = pendingUpdate;
+			pendingUpdate = 0;
 			const instance = chart.value;
-			if (!isCurrent(instance) || manualUpdate.value || initDeferred) return;
-			const option = getAutoOption() ?? lastAutoOption;
-			if (!option) return;
-			applyOption(instance, option, mode);
+			if (!reasons || !isCurrent(instance)) return;
+			if (reasons & 8) {
+				cleanup();
+				init$1();
+				return;
+			}
+			if (initDeferred) return;
+			syncListeners();
+			const option = reasons & 3 ? getAutoOption() ?? lastAutoOption : lastAutoOption;
+			const needsTheme = !themeApplied && optionApplied;
+			if (needsTheme && !applyTheme(instance)) return;
+			if (!manualUpdate.value && option) applyOption(instance, option, reasons === 2 && !needsTheme ? "graphic" : void 0);
 		}
-		if (slots.graphic && !patchGraphicOption) warn$1("Detected `#graphic` slot but no extension is registered. Import from `vue-echarts/graphic` to enable it.");
-		const stopListeners = useReactiveChartListeners(chart, attrs);
+		if (slots.graphic && !graphic) warn$1("Detected `#graphic` slot but no extension is registered. Import from `vue-echarts/graphic` to enable it.");
+		const { sync: syncListeners, stop: stopListeners } = useReactiveChartListeners(chart, attrs);
 		function cleanup() {
+			pendingUpdate = 0;
+			graphic?.cancelPendingFlush();
+			updateRevision++;
 			const instance = chart.value;
 			chart.value = void 0;
 			setSlotsReady(false);
 			lastSignature = void 0;
+			modelValid = false;
 			lastAutoOption = void 0;
 			initDeferred = false;
 			graphicSlotApplied = false;
 			instance?.dispose();
 		}
 		function init$1() {
-			initOptionsInvalidated = false;
-			manualUpdateAtInit = manualUpdate.value;
+			pendingUpdate = 0;
 			optionApplied = false;
 			const host = chartHost.value;
 			const instance = init(host, realTheme.value, realInitOptions.value);
@@ -741,46 +613,26 @@ var src_default = /* @__PURE__ */ defineComponent({
 		};
 		const stopThemeWatch = watch(realTheme, (theme, previousTheme) => {
 			if (isIgnorableWatchChange(theme, previousTheme)) return;
-			themeRevision.value++;
 			themeApplied = false;
+			scheduleUpdate(4);
 		}, {
 			deep: true,
 			flush: "sync"
 		});
 		const stopInitOptionsWatch = watch(realInitOptions, (options, previousOptions) => {
-			if (!isIgnorableWatchChange(options, previousOptions)) {
-				initOptionsInvalidated = true;
-				initOptionsRevision.value++;
-			}
+			if (!isIgnorableWatchChange(options, previousOptions)) scheduleUpdate(8);
 		}, {
 			deep: true,
 			flush: "sync"
 		});
-		const stopOptionWatch = watch(() => manualUpdate.value ? SKIP_AUTO_UPDATE : props.option, (option, previousOption) => {
-			if (option === SKIP_AUTO_UPDATE || previousOption === SKIP_AUTO_UPDATE) return;
-			const nextOption = option ?? getAutoOption();
-			if (!nextOption) return;
-			const instance = chart.value;
-			if (initOptionsInvalidated || !isCurrent(instance) || initDeferred) return;
-			if (hasNewSlots()) return;
-			applyOption(instance, nextOption);
-		}, {
-			deep: true,
-			flush: updateFlush
-		});
-		const stopReinitWatch = watch([manualUpdate, initOptionsRevision], () => {
-			if (!chart.value) return;
-			cleanup();
-			init$1();
-		});
-		const stopThemeApplyWatch = watch(themeRevision, () => {
-			const instance = chart.value;
-			if (!initOptionsInvalidated && manualUpdate.value === manualUpdateAtInit && isCurrent(instance) && !themeApplied) {
-				if (!applyTheme(instance)) return;
-				const option = lastAutoOption;
-				if (option && !manualUpdate.value && !initDeferred && !hasNewSlots()) applyOption(instance, option, "theme");
-			}
-		}, { flush: updateFlush });
+		function watchOption() {
+			return watch(() => manualUpdate.value ? SKIP_AUTO_UPDATE : props.option, (option, previousOption) => {
+				if (option !== SKIP_AUTO_UPDATE && previousOption !== SKIP_AUTO_UPDATE && (option ?? getAutoOption())) requestUpdate();
+			}, { deep: true });
+		}
+		let stopOptionWatch = watchOption();
+		const stopModeWatch = watch(manualUpdate, () => scheduleUpdate(8), { flush: "sync" });
+		const stopUpdateWatch = watch(updateRequest, flushUpdate, { flush: "post" });
 		const stopGroupWatch = watchSyncEffect(() => {
 			const instance = chart.value;
 			if (isCurrent(instance)) instance.group = props.group ?? "";
@@ -793,8 +645,8 @@ var src_default = /* @__PURE__ */ defineComponent({
 			stopThemeWatch();
 			stopInitOptionsWatch();
 			stopOptionWatch();
-			stopReinitWatch();
-			stopThemeApplyWatch();
+			stopModeWatch();
+			stopUpdateWatch();
 			stopGroupWatch();
 			stopLoading();
 			stopAutoresize();
@@ -807,14 +659,22 @@ var src_default = /* @__PURE__ */ defineComponent({
 			const instance = chart.value;
 			if (!isCurrent(instance)) return guardedClear();
 			initDeferred = false;
-			lastSignature = void 0;
-			lastAutoOption = void 0;
-			instance.clear();
+			pendingUpdate = 0;
+			graphic?.cancelPendingFlush();
+			cancelSlotUpdate();
+			stopOptionWatch();
+			stopOptionWatch = watchOption();
+			if (runUpdate(instance, () => instance.clear(), void 0)) {
+				lastAutoOption = void 0;
+				graphicSlotApplied = false;
+				optionApplied = true;
+			}
 		};
 		onMounted(() => {
 			if (!terminallyDisposed.value) init$1();
 		});
 		onBeforeUnmount(() => {
+			stopOptionWatch();
 			if (terminallyDisposed.value) return;
 			terminallyDisposed.value = true;
 			const element = root.value;
@@ -842,12 +702,10 @@ var src_default = /* @__PURE__ */ defineComponent({
 			if (!terminallyDisposed.value) {
 				const teleported = renderSlot();
 				if (teleported) children.push(teleported);
-				if (renderGraphic) {
-					const graphic = renderGraphic();
-					if (graphic) children.push(graphic);
-				}
+				const graphicContent = graphic?.render();
+				if (graphicContent) children.push(graphicContent);
 			}
-			const forwardedAttrs = rootAttrs.value;
+			const forwardedAttrs = getRootAttrs(attrs);
 			return h(TAG_NAME, {
 				...forwardedAttrs,
 				ref: root,