@ai-gui/vue 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -28,18 +28,28 @@ const __ai_gui_core = __toESM(require("@ai-gui/core"));
 //#region src/use-ai-renderer.ts
 function useAIRenderer(options = {}) {
 	const nodes = (0, vue.shallowRef)([]);
+	let active = true;
 	const renderer = new __ai_gui_core.Renderer({
 		...options,
 		plugins: options.plugins,
 		onPatch: (_patches, snapshot) => {
-			nodes.value = snapshot;
+			if (active) nodes.value = snapshot;
 		}
 	});
 	return {
 		nodes,
-		push: (c) => renderer.push(c),
-		feed: (s) => renderer.feed(s),
+		push: (c) => {
+			if (active) renderer.push(c);
+		},
+		feed: (source, feedOptions) => active ? renderer.feed(source, feedOptions) : Promise.resolve(),
 		reset: () => {
+			if (active) {
+				renderer.reset();
+				nodes.value = [];
+			}
+		},
+		destroy: () => {
+			active = false;
 			renderer.reset();
 			nodes.value = [];
 		}
@@ -61,6 +71,10 @@ const MountHost = (0, vue.defineComponent)({
 		(0, vue.onMounted)(() => {
 			if (elRef.value) cleanup = props.mount(elRef.value);
 		});
+		(0, vue.watch)(() => props.mount, (mount) => {
+			if (typeof cleanup === "function") cleanup();
+			cleanup = elRef.value ? mount(elRef.value) : void 0;
+		});
 		(0, vue.onBeforeUnmount)(() => {
 			if (typeof cleanup === "function") cleanup();
 		});
@@ -71,10 +85,10 @@ const MountHost = (0, vue.defineComponent)({
 	}
 });
 /** Translate a framework-neutral RenderOutput into a Vue VNode. */
-function renderOutput(out) {
+function renderOutput(out, sanitize) {
 	switch (out.kind) {
-		case "html": return (0, vue.h)("div", { innerHTML: (0, __ai_gui_core.sanitizeHtml)(out.html) });
-		case "element": return (0, vue.h)(out.tag, out.props, (out.children ?? []).map(renderOutput));
+		case "html": return (0, vue.h)("div", { innerHTML: sanitizeOutput(out.html, sanitize) });
+		case "element": return (0, vue.h)(out.tag, out.props, (out.children ?? []).map((child) => renderOutput(child, sanitize)));
 		case "mount": return (0, vue.h)(MountHost, { mount: out.mount });
 		case "card": return (0, vue.h)("pre", { "data-aigui-card-fallback": "" }, [(0, vue.h)("code", JSON.stringify(out.data, null, 2))]);
 	}
@@ -82,39 +96,77 @@ function renderOutput(out) {
 /** Await an async RenderOutput, rendering a placeholder until it resolves. */
 const AsyncOutput = (0, vue.defineComponent)({
 	name: "AsyncOutput",
-	props: { promise: {
-		type: Object,
-		required: true
-	} },
+	props: {
+		promise: {
+			type: Object,
+			required: true
+		},
+		sanitize: {
+			type: [Boolean, Object],
+			default: void 0
+		}
+	},
 	setup(props) {
 		const resolved = (0, vue.ref)(null);
-		props.promise.then((v) => {
-			resolved.value = v;
+		const failed = (0, vue.ref)(false);
+		let generation = 0;
+		let active = true;
+		const awaitPromise = (promise) => {
+			const current = ++generation;
+			resolved.value = null;
+			failed.value = false;
+			promise.then((value) => {
+				if (active && current === generation) resolved.value = value;
+			}, () => {
+				if (active && current === generation) failed.value = true;
+			});
+		};
+		(0, vue.watch)(() => [(0, vue.toRaw)(props.promise)], ([promise]) => awaitPromise(promise), { immediate: true });
+		(0, vue.onBeforeUnmount)(() => {
+			active = false;
+			generation++;
 		});
-		return () => resolved.value ? renderOutput(resolved.value) : (0, vue.h)("span", { "data-aigui-async-pending": "" });
+		return () => {
+			if (failed.value) return (0, vue.h)("span", { "data-aigui-async-error": "" });
+			if (!resolved.value) return (0, vue.h)("span", { "data-aigui-async-pending": "" });
+			try {
+				return renderOutput(resolved.value, props.sanitize);
+			} catch {
+				return (0, vue.h)("span", { "data-aigui-async-error": "" });
+			}
+		};
 	}
 });
+function sanitizeOutput(html, sanitize) {
+	if (sanitize === false) return html;
+	return (0, __ai_gui_core.sanitizeHtml)(html, typeof sanitize === "object" ? sanitize : void 0);
+}
 
 //#endregion
 //#region src/render-node.ts
 function renderNode(node, ctx) {
-	const r = (0, __ai_gui_core.collectNodeRenderers)(ctx.plugins)[node.type];
-	if (r) {
+	const r = (ctx.nodeRenderers ?? (0, __ai_gui_core.collectNodeRenderers)(ctx.plugins))[node.type];
+	if (r) try {
 		const out = r(node);
 		if (out && typeof out.then === "function") return (0, vue.h)(AsyncOutput, {
 			key: node.key,
-			promise: out
+			promise: out,
+			sanitize: ctx.sanitize
 		});
-		return renderOutput(out);
+		const vnode = renderOutput(out, ctx.sanitize);
+		vnode.key = node.key;
+		return vnode;
+	} catch {
+		return renderFallback(node, ctx);
 	}
 	switch (node.type) {
 		case "heading": return (0, vue.h)(node.tag ?? "h1", {
 			key: node.key,
-			innerHTML: node.html ?? ""
+			innerHTML: renderHtml(node.html ?? "", ctx)
 		});
 		case "paragraph": return (0, vue.h)("p", {
 			key: node.key,
-			innerHTML: node.html ?? ""
+			innerHTML: renderHtml(node.html ?? "", ctx)
 		});
 		case "code": return (0, vue.h)("pre", {
 			key: node.key,
@@ -123,13 +175,10 @@ function renderNode(node, ctx) {
 		case "hr": return (0, vue.h)("hr", { key: node.key });
 		case "html": return (0, vue.h)("div", {
 			key: node.key,
-			innerHTML: node.content ?? ""
+			innerHTML: renderHtml(node.content ?? "", ctx)
 		});
 		case "card": return renderCard(node, ctx);
-		default: return (0, vue.h)("div", {
-			key: node.key,
-			innerHTML: node.html ?? (0, __ai_gui_core.sanitizeHtml)(node.content ?? "")
-		});
+		default: return renderFallback(node, ctx);
 	}
 }
 function renderCard(node, ctx) {
@@ -149,7 +198,7 @@ function renderCard(node, ctx) {
 		key: node.key,
 		"data-aigui-card-fallback": ""
 	}, [(0, vue.h)("code", JSON.stringify(card.data, null, 2))]);
-	return (0, vue.h)(Comp, {
+	return (0, vue.h)((0, vue.markRaw)((0, vue.toRaw)(Comp)), {
 		key: node.key,
 		data: card.data,
 		onAction: (a) => ctx.onCardAction?.({
@@ -158,11 +207,22 @@ function renderCard(node, ctx) {
 		})
 	});
 }
+function renderFallback(node, ctx) {
+	return (0, vue.h)("div", {
+		key: node.key,
+		innerHTML: renderHtml(node.html ?? node.content ?? "", ctx)
+	});
+}
+function renderHtml(html, ctx) {
+	if (ctx.sanitized || ctx.sanitize === false) return html;
+	return (0, __ai_gui_core.sanitizeHtml)(html, typeof ctx.sanitize === "object" ? ctx.sanitize : void 0);
+}
 
 //#endregion
 //#region src/ai-renderer.ts
 const AIRenderer = (0, vue.defineComponent)({
 	name: "AIRenderer",
+	emits: ["card-action"],
 	props: {
 		registry: {
 			type: Object,
@@ -173,7 +233,7 @@ const AIRenderer = (0, vue.defineComponent)({
 			default: void 0
 		},
 		sanitize: {
-			type: Boolean,
+			type: [Boolean, Object],
 			default: void 0
 		},
 		onCardAction: {
@@ -181,24 +241,49 @@ const AIRenderer = (0, vue.defineComponent)({
 			default: void 0
 		}
 	},
-	setup(props, { expose }) {
-		const { nodes, push, feed, reset } = useAIRenderer({
+	setup(props, { emit, expose }) {
+		const current = (0, vue.shallowRef)(useAIRenderer({
 			registry: props.registry,
 			sanitize: props.sanitize,
 			plugins: props.plugins
+		}));
+		const nodeRenderers = (0, vue.shallowRef)((0, __ai_gui_core.collectNodeRenderers)(props.plugins));
+		(0, vue.watch)(() => [
+			props.registry,
+			props.sanitize,
+			props.plugins
+		], () => {
+			current.value.destroy();
+			current.value = useAIRenderer({
+				registry: props.registry,
+				sanitize: props.sanitize,
+				plugins: props.plugins
+			});
+			nodeRenderers.value = (0, __ai_gui_core.collectNodeRenderers)(props.plugins);
 		});
+		(0, vue.onBeforeUnmount)(() => current.value.destroy());
+		const push = (chunk) => current.value.push(chunk);
+		const feed = (source, options) => current.value.feed(source, options);
+		const reset = () => current.value.reset();
 		expose({
 			push,
 			feed,
 			reset
 		});
 		return () => {
+			const onCardAction = (action) => {
+				props.onCardAction?.(action);
+				emit("card-action", action);
+			};
 			const ctx = {
 				registry: props.registry,
 				plugins: props.plugins,
-				onCardAction: props.onCardAction
+				nodeRenderers: nodeRenderers.value,
+				onCardAction,
+				sanitize: props.sanitize,
+				sanitized: true
 			};
-			return (0, vue.h)("div", { "data-aigui-renderer": "" }, nodes.value.map((n) => renderNode(n, ctx)));
+			return (0, vue.h)("div", { "data-aigui-renderer": "" }, current.value.nodes.value.map((n) => renderNode(n, ctx)));
 		};
 	}
 });

package/dist/index.d.cts

@@ -1,12 +1,13 @@
 import { ShallowRef, VNode } from "vue";
-import { AIGuiPlugin, ASTNode, CardRegistry, RenderOutput, RendererOptions } from "@ai-gui/core";
+import { AIGuiPlugin, ASTNode, CardRegistry, FeedOptions, FeedSource, NodeRenderer, RenderOutput, RendererOptions } from "@ai-gui/core";
 
 //#region src/use-ai-renderer.d.ts
 interface UseAIRendererResult {
   nodes: ShallowRef<ASTNode[]>;
   push: (chunk: string) => void;
-  feed: (source: AsyncIterable<string> | ReadableStream) => Promise<void>;
+  feed: (source: FeedSource, options?: FeedOptions) => Promise<void>;
   reset: () => void;
+  destroy: () => void;
 }
 declare function useAIRenderer(options?: Omit<RendererOptions, "onPatch">): UseAIRendererResult;
 
@@ -19,18 +20,21 @@ declare const AIRenderer: any;
 interface RenderContext {
   registry?: CardRegistry;
   plugins?: AIGuiPlugin[];
+  nodeRenderers?: Record<string, NodeRenderer>;
   onCardAction?: (action: {
     type: string;
     params?: unknown;
     cardType: string;
   }) => void;
+  sanitize?: RendererOptions["sanitize"];
+  sanitized?: boolean;
 }
 declare function renderNode(node: ASTNode, ctx: RenderContext): VNode;
 
 //#endregion
 //#region src/render-output.d.ts
 /** Translate a framework-neutral RenderOutput into a Vue VNode. */
-declare function renderOutput(out: RenderOutput): VNode;
+declare function renderOutput(out: RenderOutput, sanitize?: RendererOptions["sanitize"]): VNode;
 
 //#endregion
 /** Await an async RenderOutput, rendering a placeholder until it resolves. */

package/dist/index.d.ts

@@ -1,12 +1,13 @@
 import { ShallowRef, VNode } from "vue";
-import { AIGuiPlugin, ASTNode, CardRegistry, RenderOutput, RendererOptions } from "@ai-gui/core";
+import { AIGuiPlugin, ASTNode, CardRegistry, FeedOptions, FeedSource, NodeRenderer, RenderOutput, RendererOptions } from "@ai-gui/core";
 
 //#region src/use-ai-renderer.d.ts
 interface UseAIRendererResult {
   nodes: ShallowRef<ASTNode[]>;
   push: (chunk: string) => void;
-  feed: (source: AsyncIterable<string> | ReadableStream) => Promise<void>;
+  feed: (source: FeedSource, options?: FeedOptions) => Promise<void>;
   reset: () => void;
+  destroy: () => void;
 }
 declare function useAIRenderer(options?: Omit<RendererOptions, "onPatch">): UseAIRendererResult;
 
@@ -19,18 +20,21 @@ declare const AIRenderer: any;
 interface RenderContext {
   registry?: CardRegistry;
   plugins?: AIGuiPlugin[];
+  nodeRenderers?: Record<string, NodeRenderer>;
   onCardAction?: (action: {
     type: string;
     params?: unknown;
     cardType: string;
   }) => void;
+  sanitize?: RendererOptions["sanitize"];
+  sanitized?: boolean;
 }
 declare function renderNode(node: ASTNode, ctx: RenderContext): VNode;
 
 //#endregion
 //#region src/render-output.d.ts
 /** Translate a framework-neutral RenderOutput into a Vue VNode. */
-declare function renderOutput(out: RenderOutput): VNode;
+declare function renderOutput(out: RenderOutput, sanitize?: RendererOptions["sanitize"]): VNode;
 
 //#endregion
 /** Await an async RenderOutput, rendering a placeholder until it resolves. */

package/dist/index.js

@@ -1,21 +1,31 @@
-import { defineComponent, h, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
+import { defineComponent, h, markRaw, onBeforeUnmount, onMounted, ref, shallowRef, toRaw, watch } from "vue";
 import { Renderer, collectNodeRenderers, sanitizeHtml } from "@ai-gui/core";
 
 //#region src/use-ai-renderer.ts
 function useAIRenderer(options = {}) {
 	const nodes = shallowRef([]);
+	let active = true;
 	const renderer = new Renderer({
 		...options,
 		plugins: options.plugins,
 		onPatch: (_patches, snapshot) => {
-			nodes.value = snapshot;
+			if (active) nodes.value = snapshot;
 		}
 	});
 	return {
 		nodes,
-		push: (c) => renderer.push(c),
-		feed: (s) => renderer.feed(s),
+		push: (c) => {
+			if (active) renderer.push(c);
+		},
+		feed: (source, feedOptions) => active ? renderer.feed(source, feedOptions) : Promise.resolve(),
 		reset: () => {
+			if (active) {
+				renderer.reset();
+				nodes.value = [];
+			}
+		},
+		destroy: () => {
+			active = false;
 			renderer.reset();
 			nodes.value = [];
 		}
@@ -37,6 +47,10 @@ const MountHost = defineComponent({
 		onMounted(() => {
 			if (elRef.value) cleanup = props.mount(elRef.value);
 		});
+		watch(() => props.mount, (mount) => {
+			if (typeof cleanup === "function") cleanup();
+			cleanup = elRef.value ? mount(elRef.value) : void 0;
+		});
 		onBeforeUnmount(() => {
 			if (typeof cleanup === "function") cleanup();
 		});
@@ -47,10 +61,10 @@ const MountHost = defineComponent({
 	}
 });
 /** Translate a framework-neutral RenderOutput into a Vue VNode. */
-function renderOutput(out) {
+function renderOutput(out, sanitize) {
 	switch (out.kind) {
-		case "html": return h("div", { innerHTML: sanitizeHtml(out.html) });
-		case "element": return h(out.tag, out.props, (out.children ?? []).map(renderOutput));
+		case "html": return h("div", { innerHTML: sanitizeOutput(out.html, sanitize) });
+		case "element": return h(out.tag, out.props, (out.children ?? []).map((child) => renderOutput(child, sanitize)));
 		case "mount": return h(MountHost, { mount: out.mount });
 		case "card": return h("pre", { "data-aigui-card-fallback": "" }, [h("code", JSON.stringify(out.data, null, 2))]);
 	}
@@ -58,39 +72,77 @@ function renderOutput(out) {
 /** Await an async RenderOutput, rendering a placeholder until it resolves. */
 const AsyncOutput = defineComponent({
 	name: "AsyncOutput",
-	props: { promise: {
-		type: Object,
-		required: true
-	} },
+	props: {
+		promise: {
+			type: Object,
+			required: true
+		},
+		sanitize: {
+			type: [Boolean, Object],
+			default: void 0
+		}
+	},
 	setup(props) {
 		const resolved = ref(null);
-		props.promise.then((v) => {
-			resolved.value = v;
+		const failed = ref(false);
+		let generation = 0;
+		let active = true;
+		const awaitPromise = (promise) => {
+			const current = ++generation;
+			resolved.value = null;
+			failed.value = false;
+			promise.then((value) => {
+				if (active && current === generation) resolved.value = value;
+			}, () => {
+				if (active && current === generation) failed.value = true;
+			});
+		};
+		watch(() => [toRaw(props.promise)], ([promise]) => awaitPromise(promise), { immediate: true });
+		onBeforeUnmount(() => {
+			active = false;
+			generation++;
 		});
-		return () => resolved.value ? renderOutput(resolved.value) : h("span", { "data-aigui-async-pending": "" });
+		return () => {
+			if (failed.value) return h("span", { "data-aigui-async-error": "" });
+			if (!resolved.value) return h("span", { "data-aigui-async-pending": "" });
+			try {
+				return renderOutput(resolved.value, props.sanitize);
+			} catch {
+				return h("span", { "data-aigui-async-error": "" });
+			}
+		};
 	}
 });
+function sanitizeOutput(html, sanitize) {
+	if (sanitize === false) return html;
+	return sanitizeHtml(html, typeof sanitize === "object" ? sanitize : void 0);
+}
 
 //#endregion
 //#region src/render-node.ts
 function renderNode(node, ctx) {
-	const r = collectNodeRenderers(ctx.plugins)[node.type];
-	if (r) {
+	const r = (ctx.nodeRenderers ?? collectNodeRenderers(ctx.plugins))[node.type];
+	if (r) try {
 		const out = r(node);
 		if (out && typeof out.then === "function") return h(AsyncOutput, {
 			key: node.key,
-			promise: out
+			promise: out,
+			sanitize: ctx.sanitize
 		});
-		return renderOutput(out);
+		const vnode = renderOutput(out, ctx.sanitize);
+		vnode.key = node.key;
+		return vnode;
+	} catch {
+		return renderFallback(node, ctx);
 	}
 	switch (node.type) {
 		case "heading": return h(node.tag ?? "h1", {
 			key: node.key,
-			innerHTML: node.html ?? ""
+			innerHTML: renderHtml(node.html ?? "", ctx)
 		});
 		case "paragraph": return h("p", {
 			key: node.key,
-			innerHTML: node.html ?? ""
+			innerHTML: renderHtml(node.html ?? "", ctx)
 		});
 		case "code": return h("pre", {
 			key: node.key,
@@ -99,13 +151,10 @@ function renderNode(node, ctx) {
 		case "hr": return h("hr", { key: node.key });
 		case "html": return h("div", {
 			key: node.key,
-			innerHTML: node.content ?? ""
+			innerHTML: renderHtml(node.content ?? "", ctx)
 		});
 		case "card": return renderCard(node, ctx);
-		default: return h("div", {
-			key: node.key,
-			innerHTML: node.html ?? sanitizeHtml(node.content ?? "")
-		});
+		default: return renderFallback(node, ctx);
 	}
 }
 function renderCard(node, ctx) {
@@ -125,7 +174,7 @@ function renderCard(node, ctx) {
 		key: node.key,
 		"data-aigui-card-fallback": ""
 	}, [h("code", JSON.stringify(card.data, null, 2))]);
-	return h(Comp, {
+	return h(markRaw(toRaw(Comp)), {
 		key: node.key,
 		data: card.data,
 		onAction: (a) => ctx.onCardAction?.({
@@ -134,11 +183,22 @@ function renderCard(node, ctx) {
 		})
 	});
 }
+function renderFallback(node, ctx) {
+	return h("div", {
+		key: node.key,
+		innerHTML: renderHtml(node.html ?? node.content ?? "", ctx)
+	});
+}
+function renderHtml(html, ctx) {
+	if (ctx.sanitized || ctx.sanitize === false) return html;
+	return sanitizeHtml(html, typeof ctx.sanitize === "object" ? ctx.sanitize : void 0);
+}
 
 //#endregion
 //#region src/ai-renderer.ts
 const AIRenderer = defineComponent({
 	name: "AIRenderer",
+	emits: ["card-action"],
 	props: {
 		registry: {
 			type: Object,
@@ -149,7 +209,7 @@ const AIRenderer = defineComponent({
 			default: void 0
 		},
 		sanitize: {
-			type: Boolean,
+			type: [Boolean, Object],
 			default: void 0
 		},
 		onCardAction: {
@@ -157,24 +217,49 @@ const AIRenderer = defineComponent({
 			default: void 0
 		}
 	},
-	setup(props, { expose }) {
-		const { nodes, push, feed, reset } = useAIRenderer({
+	setup(props, { emit, expose }) {
+		const current = shallowRef(useAIRenderer({
 			registry: props.registry,
 			sanitize: props.sanitize,
 			plugins: props.plugins
+		}));
+		const nodeRenderers = shallowRef(collectNodeRenderers(props.plugins));
+		watch(() => [
+			props.registry,
+			props.sanitize,
+			props.plugins
+		], () => {
+			current.value.destroy();
+			current.value = useAIRenderer({
+				registry: props.registry,
+				sanitize: props.sanitize,
+				plugins: props.plugins
+			});
+			nodeRenderers.value = collectNodeRenderers(props.plugins);
 		});
+		onBeforeUnmount(() => current.value.destroy());
+		const push = (chunk) => current.value.push(chunk);
+		const feed = (source, options) => current.value.feed(source, options);
+		const reset = () => current.value.reset();
 		expose({
 			push,
 			feed,
 			reset
 		});
 		return () => {
+			const onCardAction = (action) => {
+				props.onCardAction?.(action);
+				emit("card-action", action);
+			};
 			const ctx = {
 				registry: props.registry,
 				plugins: props.plugins,
-				onCardAction: props.onCardAction
+				nodeRenderers: nodeRenderers.value,
+				onCardAction,
+				sanitize: props.sanitize,
+				sanitized: true
 			};
-			return h("div", { "data-aigui-renderer": "" }, nodes.value.map((n) => renderNode(n, ctx)));
+			return h("div", { "data-aigui-renderer": "" }, current.value.nodes.value.map((n) => renderNode(n, ctx)));
 		};
 	}
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-gui/vue",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Vue 3 adapter for AIGUI — stream LLM output into live Vue components with cards and plugins.",
   "keywords": [
     "llm",
@@ -23,14 +23,23 @@
   "homepage": "https://github.com/liliang-cn/aigui#readme",
   "bugs": "https://github.com/liliang-cn/aigui/issues",
   "type": "module",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     }
   },
   "files": [
@@ -42,7 +51,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@ai-gui/core": "0.1.0"
+    "@ai-gui/core": "0.2.0"
   },
   "peerDependencies": {
     "vue": ">=3.3"
@@ -53,6 +62,7 @@
   },
   "scripts": {
     "build": "tsdown",
+    "test": "pnpm --dir ../.. exec vitest run --project vue",
     "typecheck": "tsc --noEmit"
   }
 }