@antdv-next/x 1.2.3 → 1.2.4

package/dist/index.umd.js

@@ -66,7 +66,7 @@
 	shiki_dist_themes_vitesse_dark_mjs = __toESM(shiki_dist_themes_vitesse_dark_mjs, 1);
 	shiki_dist_themes_vitesse_light_mjs = __toESM(shiki_dist_themes_vitesse_light_mjs, 1);
 	//#region package.json
-	var version = "1.2.3";
+	var version = "1.2.4";
 	//#endregion
 	//#region components/x-provider/context.ts
 	var XProviderContextKey = Symbol("antdv-next-x-provider-context");
@@ -7321,6 +7321,10 @@
 			const mergedRenderType = (0, vue.computed)(() => {
 				return props.renderType ?? internalRenderType.value;
 			});
+			const latestRenderRef = (0, vue.ref)({
+				content: props.content,
+				renderType: mergedRenderType.value
+			});
 			const mergedActions = (0, vue.computed)(() => {
 				return {
 					enableZoom: props.actions?.enableZoom ?? true,
@@ -7350,23 +7354,29 @@
 				svgEl.style.transition = isDragging.value ? "none" : "transform 0.1s ease-out";
 				svgEl.style.cursor = isDragging.value ? "grabbing" : "grab";
 			}
+			let renderRequestId = 0;
+			let latestCommittedRequestId = 0;
 			const renderDiagram = throttle(async () => {
-				if (mergedRenderType.value === RenderType.Code) {
-					if (graphRef.value) graphRef.value.innerHTML = "";
-					return;
-				}
-				if (!props.content?.trim()) return;
+				const { content, renderType } = latestRenderRef.value;
 				const graphEl = graphRef.value;
-				if (!graphEl) return;
+				if (!graphEl || renderType === RenderType.Code || !content?.trim()) return;
+				const requestId = ++renderRequestId;
 				try {
-					if (await parseMermaid(props.content, { suppressErrors: true }) === false) throw new Error("Invalid Mermaid syntax");
-					const { svg } = await renderMermaid(`${renderBaseId}-${idSeed++}-${props.content.length || 0}`, props.content);
+					if (await parseMermaid(content, { suppressErrors: true }) === false) throw new Error("Invalid Mermaid syntax");
+					const { svg } = await renderMermaid(`${renderBaseId}-${idSeed++}-${content.length || 0}`, content);
+					if (requestId <= latestCommittedRequestId) return;
 					graphEl.innerHTML = svg;
+					latestCommittedRequestId = requestId;
 					applySvgTransform();
 				} catch (error) {
+					if (requestId !== renderRequestId || latestRenderRef.value.content !== content || latestRenderRef.value.renderType !== renderType) return;
 					warning(false, "Mermaid", `Render failed: ${String(error)}`);
 				}
 			}, 100);
+			const invalidateRender = () => {
+				latestCommittedRequestId = ++renderRequestId;
+				renderDiagram.cancel();
+			};
 			function switchRenderType(nextType) {
 				if (props.renderType === void 0) internalRenderType.value = nextType;
 				emit("update:renderType", nextType);
@@ -7545,7 +7555,17 @@
 				mergedRenderType,
 				() => graphRef.value
 			], () => {
-				if (!graphRef.value) return;
+				latestRenderRef.value = {
+					content: props.content,
+					renderType: mergedRenderType.value
+				};
+				const graphEl = graphRef.value;
+				if (mergedRenderType.value === RenderType.Code || !props.content?.trim()) {
+					invalidateRender();
+					if (graphEl) graphEl.innerHTML = "";
+					return;
+				}
+				if (!graphEl) return;
 				renderDiagram();
 			}, {
 				immediate: true,
@@ -7583,7 +7603,7 @@
 				applySvgTransform();
 			}, { deep: true });
 			(0, vue.onBeforeUnmount)(() => {
-				renderDiagram.cancel();
+				invalidateRender();
 			});
 			expose({ get nativeElement() {
 				return rootRef.value;

package/dist/mermaid/Mermaid.js

@@ -149,6 +149,10 @@ var XMermaid = /* @__PURE__ */ defineComponent({
 		const mergedRenderType = computed(() => {
 			return props.renderType ?? internalRenderType.value;
 		});
+		const latestRenderRef = ref({
+			content: props.content,
+			renderType: mergedRenderType.value
+		});
 		const mergedActions = computed(() => {
 			return {
 				enableZoom: props.actions?.enableZoom ?? true,
@@ -178,23 +182,29 @@ var XMermaid = /* @__PURE__ */ defineComponent({
 			svgEl.style.transition = isDragging.value ? "none" : "transform 0.1s ease-out";
 			svgEl.style.cursor = isDragging.value ? "grabbing" : "grab";
 		}
+		let renderRequestId = 0;
+		let latestCommittedRequestId = 0;
 		const renderDiagram = throttle(async () => {
-			if (mergedRenderType.value === RenderType.Code) {
-				if (graphRef.value) graphRef.value.innerHTML = "";
-				return;
-			}
-			if (!props.content?.trim()) return;
+			const { content, renderType } = latestRenderRef.value;
 			const graphEl = graphRef.value;
-			if (!graphEl) return;
+			if (!graphEl || renderType === RenderType.Code || !content?.trim()) return;
+			const requestId = ++renderRequestId;
 			try {
-				if (await parseMermaid(props.content, { suppressErrors: true }) === false) throw new Error("Invalid Mermaid syntax");
-				const { svg } = await renderMermaid(`${renderBaseId}-${idSeed++}-${props.content.length || 0}`, props.content);
+				if (await parseMermaid(content, { suppressErrors: true }) === false) throw new Error("Invalid Mermaid syntax");
+				const { svg } = await renderMermaid(`${renderBaseId}-${idSeed++}-${content.length || 0}`, content);
+				if (requestId <= latestCommittedRequestId) return;
 				graphEl.innerHTML = svg;
+				latestCommittedRequestId = requestId;
 				applySvgTransform();
 			} catch (error) {
+				if (requestId !== renderRequestId || latestRenderRef.value.content !== content || latestRenderRef.value.renderType !== renderType) return;
 				warning(false, "Mermaid", `Render failed: ${String(error)}`);
 			}
 		}, 100);
+		const invalidateRender = () => {
+			latestCommittedRequestId = ++renderRequestId;
+			renderDiagram.cancel();
+		};
 		function switchRenderType(nextType) {
 			if (props.renderType === void 0) internalRenderType.value = nextType;
 			emit("update:renderType", nextType);
@@ -373,7 +383,17 @@ var XMermaid = /* @__PURE__ */ defineComponent({
 			mergedRenderType,
 			() => graphRef.value
 		], () => {
-			if (!graphRef.value) return;
+			latestRenderRef.value = {
+				content: props.content,
+				renderType: mergedRenderType.value
+			};
+			const graphEl = graphRef.value;
+			if (mergedRenderType.value === RenderType.Code || !props.content?.trim()) {
+				invalidateRender();
+				if (graphEl) graphEl.innerHTML = "";
+				return;
+			}
+			if (!graphEl) return;
 			renderDiagram();
 		}, {
 			immediate: true,
@@ -411,7 +431,7 @@ var XMermaid = /* @__PURE__ */ defineComponent({
 			applySvgTransform();
 		}, { deep: true });
 		onBeforeUnmount(() => {
-			renderDiagram.cancel();
+			invalidateRender();
 		});
 		expose({ get nativeElement() {
 			return rootRef.value;

package/dist/package.js

@@ -1,4 +1,4 @@
 //#region package.json
-var version = "1.2.3";
+var version = "1.2.4";
 //#endregion
 export { version };

package/es/antdv-next-x.esm.js

@@ -1,7 +1,7 @@
 import { S as e, _ as t, a as n, b as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, s as g, t as _, u as v, v as y, x as b, y as x } from "./Serializer-Sc9uEpQk.js";
 import { Comment as S, Fragment as C, Teleport as w, Text as T, Transition as E, TransitionGroup as D, cloneVNode as O, computed as k, createTextVNode as A, createVNode as j, defineComponent as M, getCurrentInstance as N, getCurrentScope as P, h as F, inject as I, isVNode as L, markRaw as R, mergeDefaults as z, mergeProps as B, nextTick as V, onBeforeMount as ee, onBeforeUnmount as H, onBeforeUpdate as U, onMounted as te, onScopeDispose as ne, onUnmounted as re, onUpdated as ie, provide as W, reactive as ae, ref as G, render as oe, resolveDynamicComponent as se, shallowReactive as ce, shallowRef as K, toRaw as le, toRef as ue, toRefs as de, toValue as fe, triggerRef as pe, unref as me, useAttrs as he, useId as ge, useSlots as _e, vShow as ve, watch as q, watchEffect as ye, withDirectives as be } from "vue";
 //#region package.json
-var xe = "1.2.3", Se = "anticon", Ce = {}, we = [
+var xe = "1.2.4", Se = "anticon", Ce = {}, we = [
 	"outlined",
 	"borderless",
 	"filled",
@@ -51167,51 +51167,55 @@ var kF = /* @__PURE__ */ M({
 		}), g = G(!1), _ = G({
 			x: 0,
 			y: 0
-		}), v = k(() => e.renderType ?? p.value), y = k(() => ({
+		}), v = k(() => e.renderType ?? p.value), y = G({
+			content: e.content,
+			renderType: v.value
+		}), b = k(() => ({
 			enableZoom: e.actions?.enableZoom ?? !0,
 			enableDownload: e.actions?.enableDownload ?? !0,
 			enableCopy: e.actions?.enableCopy ?? !0,
 			customActions: e.actions?.customActions ?? []
-		})), b = k(() => ({
+		})), x = k(() => ({
 			...s.value.classes,
 			...e.classes
-		})), x = k(() => ({
+		})), S = k(() => ({
 			...s.value.styles,
 			...e.styles
-		})), S = k(() => {
+		})), C = k(() => {
 			let { class: e, style: t, ...n } = i;
 			return n;
 		});
-		function C() {
+		function w() {
 			if (v.value !== EF.Image) return;
 			let e = l.value?.querySelector("svg");
 			e && (e.style.transform = `scale(${m.value}) translate(${h.value.x}px, ${h.value.y}px)`, e.style.transformOrigin = "center", e.style.transition = g.value ? "none" : "transform 0.1s ease-out", e.style.cursor = g.value ? "grabbing" : "grab");
 		}
-		let w = OF(async () => {
-			if (v.value === EF.Code) {
-				l.value && (l.value.innerHTML = "");
-				return;
-			}
-			if (!e.content?.trim()) return;
-			let t = l.value;
-			if (t) try {
-				if (await SF(e.content, { suppressErrors: !0 }) === !1) throw Error("Invalid Mermaid syntax");
-				let { svg: n } = await CF(`${u}-${DF++}-${e.content.length || 0}`, e.content);
-				t.innerHTML = n, C();
-			} catch (e) {
-				gF(!1, "Mermaid", `Render failed: ${String(e)}`);
-			}
-		}, 100);
-		function T(n) {
+		let T = 0, E = 0, D = OF(async () => {
+			let { content: e, renderType: t } = y.value, n = l.value;
+			if (!n || t === EF.Code || !e?.trim()) return;
+			let r = ++T;
+			try {
+				if (await SF(e, { suppressErrors: !0 }) === !1) throw Error("Invalid Mermaid syntax");
+				let { svg: t } = await CF(`${u}-${DF++}-${e.length || 0}`, e);
+				if (r <= E) return;
+				n.innerHTML = t, E = r, w();
+			} catch (n) {
+				if (r !== T || y.value.content !== e || y.value.renderType !== t) return;
+				gF(!1, "Mermaid", `Render failed: ${String(n)}`);
+			}
+		}, 100), O = () => {
+			E = ++T, D.cancel();
+		};
+		function A(n) {
 			e.renderType === void 0 && (p.value = n), t("update:renderType", n), t("renderTypeChange", n);
 		}
-		function E(e) {
+		function M(e) {
 			v.value === EF.Image && (e.preventDefault(), g.value = !0, _.value = {
 				x: e.clientX,
 				y: e.clientY
 			});
 		}
-		function D(e) {
+		function N(e) {
 			if (!g.value || v.value !== EF.Image) return;
 			e.preventDefault();
 			let t = e.clientX - _.value.x, n = e.clientY - _.value.y;
@@ -51223,29 +51227,29 @@ var kF = /* @__PURE__ */ M({
 				y: e.clientY
 			};
 		}
-		function O() {
+		function P() {
 			g.value = !1;
 		}
-		function A() {
+		function F() {
 			v.value === EF.Image && (m.value += .2);
 		}
-		function M() {
+		function I() {
 			v.value === EF.Image && (m.value = Math.max(m.value - .2, .5));
 		}
-		function N() {
+		function L() {
 			v.value === EF.Image && (m.value = 1, h.value = {
 				x: 0,
 				y: 0
 			});
 		}
-		async function P() {
+		async function R() {
 			try {
 				await navigator.clipboard.writeText(e.content);
 			} catch (e) {
 				gF(!1, "Mermaid", `Copy failed: ${String(e)}`);
 			}
 		}
-		function F() {
+		function z() {
 			if (v.value !== EF.Image) return;
 			let e = l.value?.querySelector("svg");
 			if (!e) return;
@@ -51269,47 +51273,47 @@ var kF = /* @__PURE__ */ M({
 				e.download = `${Date.now()}.png`, e.href = o.toDataURL("image/png", 1), e.click();
 			}, u.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(a)}`;
 		}
-		let I = k(() => {
+		let V = k(() => {
 			let t = [];
-			return v.value === EF.Image && (y.value.enableZoom && t.push({
+			return v.value === EF.Image && (b.value.enableZoom && t.push({
 				key: "zoomIn",
 				icon: j(Fp, null, null),
 				label: o.value.zoomIn,
-				onItemClick: A
+				onItemClick: F
 			}, {
 				key: "zoomOut",
 				icon: j(Lp, null, null),
 				label: o.value.zoomOut,
-				onItemClick: M
+				onItemClick: I
 			}, {
 				key: "zoomReset",
 				actionRender: () => j(eu, { title: o.value.zoomReset }, { default: () => [j(_h, {
 					type: "text",
 					size: "small",
-					onClick: N
+					onClick: L
 				}, { default: () => [o.value.zoomReset] })] })
-			}), y.value.enableDownload && t.push({
+			}), b.value.enableDownload && t.push({
 				key: "download",
 				icon: j(af, null, null),
 				label: o.value.download,
-				onItemClick: F
-			})), v.value === EF.Code && y.value.enableCopy && t.push({
+				onItemClick: z
+			})), v.value === EF.Code && b.value.enableCopy && t.push({
 				key: "copy",
 				actionRender: () => j(PM.Copy, { text: e.content }, null)
-			}), [...t, ...y.value.customActions];
+			}), [...t, ...b.value.customActions];
 		});
-		function L() {
+		function ee() {
 			return e.header === null ? null : r.header ? r.header({
 				renderType: v.value,
-				setRenderType: T,
-				zoomIn: A,
-				zoomOut: M,
-				resetZoom: N,
-				download: F,
-				copy: P
+				setRenderType: A,
+				zoomIn: F,
+				zoomOut: I,
+				resetZoom: L,
+				download: z,
+				copy: R
 			}) : e.header === void 0 ? j("div", {
-				class: [`${e.prefixCls}-header`, b.value.header],
-				style: x.value.header
+				class: [`${e.prefixCls}-header`, x.value.header],
+				style: S.value.header
 			}, [j(bT, {
 				options: [{
 					label: o.value.image,
@@ -51319,8 +51323,8 @@ var kF = /* @__PURE__ */ M({
 					value: EF.Code
 				}],
 				value: v.value,
-				onChange: (e) => T(e)
-			}, null), j(PM, { items: I.value }, null)]) : e.header;
+				onChange: (e) => A(e)
+			}, null), j(PM, { items: V.value }, null)]) : e.header;
 		}
 		return q(() => e.renderType, (e) => {
 			e !== void 0 && (p.value = e);
@@ -51342,13 +51346,22 @@ var kF = /* @__PURE__ */ M({
 			v,
 			() => l.value
 		], () => {
-			l.value && w();
+			y.value = {
+				content: e.content,
+				renderType: v.value
+			};
+			let t = l.value;
+			if (v.value === EF.Code || !e.content?.trim()) {
+				O(), t && (t.innerHTML = "");
+				return;
+			}
+			t && D();
 		}, {
 			immediate: !0,
 			deep: !0
 		}), q([
 			v,
-			() => y.value.enableZoom,
+			() => b.value.enableZoom,
 			() => l.value
 		], ([e, t], n, r) => {
 			let i = l.value;
@@ -51370,17 +51383,17 @@ var kF = /* @__PURE__ */ M({
 			v,
 			g
 		], () => {
-			C();
+			w();
 		}, { deep: !0 }), H(() => {
-			w.cancel();
+			O();
 		}), n({ get nativeElement() {
 			return c.value;
-		} }), () => e.content ? j("div", B({ ref: c }, S.value, {
+		} }), () => e.content ? j("div", B({ ref: c }, C.value, {
 			class: [
 				e.prefixCls,
 				s.value.classes?.root,
 				e.rootClass,
-				b.value.root,
+				x.value.root,
 				d.value,
 				f.value,
 				i.class,
@@ -51390,28 +51403,28 @@ var kF = /* @__PURE__ */ M({
 			style: [
 				s.value.style,
 				s.value.styles?.root,
-				x.value.root,
+				S.value.root,
 				i.style,
 				e.style
 			]
 		}), [
-			L(),
+			ee(),
 			j("div", {
 				ref: l,
 				class: [
 					`${e.prefixCls}-graph`,
 					v.value === EF.Code && `${e.prefixCls}-graph-hidden`,
-					b.value.graph
+					x.value.graph
 				],
-				style: x.value.graph,
-				onMousedown: E,
-				onMousemove: D,
-				onMouseup: O,
-				onMouseleave: O
+				style: S.value.graph,
+				onMousedown: M,
+				onMousemove: N,
+				onMouseup: P,
+				onMouseleave: P
 			}, null),
 			v.value === EF.Code ? j("div", {
-				class: [`${e.prefixCls}-code`, b.value.code],
-				style: x.value.code
+				class: [`${e.prefixCls}-code`, x.value.code],
+				style: S.value.code
 			}, [j(SP, B({
 				showLineNumbers: !1,
 				showLanguage: !1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antdv-next/x",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "license": "MIT",
   "files": [
     "dist",