@ai-gui/vanilla 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -26,18 +26,18 @@ const __ai_gui_core = __toESM(require("@ai-gui/core"));
 
 //#region src/render-output.ts
 /** Translate a framework-neutral RenderOutput (from a plugin node renderer) into a DOM element. */
-function renderOutputToElement(out) {
+function renderOutputToElement(out, sanitize) {
 	switch (out.kind) {
 		case "html": {
 			const el = document.createElement("div");
-			el.innerHTML = (0, __ai_gui_core.sanitizeHtml)(out.html);
+			el.innerHTML = sanitizeOutput(out.html, sanitize);
 			return el;
 		}
 		case "element": {
 			const el = document.createElement(out.tag);
 			for (const [key, value] of Object.entries(out.props ?? {})) if (key === "class" || key === "className") el.className = String(value);
 			else el.setAttribute(key, String(value));
-			for (const child of out.children ?? []) el.appendChild(renderOutputToElement(child));
+			for (const child of out.children ?? []) el.appendChild(renderOutputToElement(child, sanitize));
 			return el;
 		}
 		case "card": {
@@ -52,37 +52,53 @@ function renderOutputToElement(out) {
 			const el = document.createElement("div");
 			el.setAttribute("data-aigui-mount", "");
 			queueMicrotask(() => {
+				if (el.__aiguiDisposed) return;
 				const c = out.mount(el);
-				if (typeof c === "function") el.__aiguiCleanup = c;
+				if (typeof c === "function") if (el.__aiguiDisposed) c();
+				else el.__aiguiCleanup = c;
 			});
 			return el;
 		}
 	}
 }
+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-dom.ts
 function renderNodeToElement(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 (typeof out?.then === "function") {
-			const ph = document.createElement("div");
-			ph.setAttribute("data-aigui-async-pending", "");
-			out.then((res) => ph.replaceWith(renderOutputToElement(res)));
-			return ph;
+			const host = document.createElement("div");
+			host.setAttribute("data-aigui-async-pending", "");
+			out.then((res) => {
+				if (host.__aiguiDisposed) return;
+				host.removeAttribute("data-aigui-async-pending");
+				host.replaceChildren(renderOutputToElement(res, ctx.sanitize));
+			}, () => {
+				if (host.__aiguiDisposed) return;
+				host.removeAttribute("data-aigui-async-pending");
+				host.setAttribute("data-aigui-async-error", "");
+			});
+			return host;
 		}
-		return renderOutputToElement(out);
+		return renderOutputToElement(out, ctx.sanitize);
+	} catch {
+		return renderFallback(node, ctx);
 	}
 	switch (node.type) {
 		case "heading": {
 			const el = document.createElement(node.tag ?? "h1");
-			el.innerHTML = node.html ?? "";
+			el.innerHTML = renderHtml(node.html ?? "", ctx);
 			return el;
 		}
 		case "paragraph": {
 			const el = document.createElement("p");
-			el.innerHTML = node.html ?? "";
+			el.innerHTML = renderHtml(node.html ?? "", ctx);
 			return el;
 		}
 		case "code": {
@@ -96,17 +112,22 @@ function renderNodeToElement(node, ctx) {
 		case "hr": return document.createElement("hr");
 		case "html": {
 			const el = document.createElement("div");
-			el.innerHTML = node.content ?? "";
+			el.innerHTML = renderHtml(node.content ?? "", ctx);
 			return el;
 		}
 		case "card": return renderCardElement(node, ctx);
-		default: {
-			const el = document.createElement("div");
-			el.innerHTML = node.html ?? (0, __ai_gui_core.sanitizeHtml)(node.content ?? "");
-			return el;
-		}
+		default: return renderFallback(node, ctx);
 	}
 }
+function renderFallback(node, ctx) {
+	const el = document.createElement("div");
+	el.innerHTML = renderHtml(node.html ?? node.content ?? "", ctx);
+	return el;
+}
+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);
+}
 function renderCardElement(node, ctx) {
 	const card = node.card;
 	if (!card) return document.createElement("div");
@@ -149,7 +170,15 @@ function createReconcileState() {
 }
 /** Run a mounted widget's cleanup (if any) before the element leaves the DOM. */
 function disposeEl(el) {
-	el.__aiguiCleanup?.();
+	for (const child of el.querySelectorAll("*")) disposeManagedEl(child);
+	disposeManagedEl(el);
+}
+function disposeManagedEl(el) {
+	const managed = el;
+	if (managed.__aiguiDisposed) return;
+	managed.__aiguiDisposed = true;
+	managed.__aiguiCleanup?.();
+	managed.__aiguiCleanup = void 0;
 }
 function reconcile(container, nodes, ctx, state) {
 	const nextKeys = new Set(nodes.map((n) => n.key));
@@ -184,6 +213,7 @@ function reconcile(container, nodes, ctx, state) {
 }
 /** Mutate an existing element to reflect the node without replacing it. Returns false when a fresh element is required. */
 function updateElementInPlace(el, node, ctx) {
+	if (ctx.nodeRenderers?.[node.type]) return false;
 	switch (node.type) {
 		case "heading":
 			if (el.tagName !== (node.tag ?? "h1").toUpperCase()) return false;
@@ -212,7 +242,7 @@ function updateElementInPlace(el, node, ctx) {
 		case "card": return false;
 		default:
 			if (el.tagName !== "DIV") return false;
-			el.innerHTML = node.html ?? (0, __ai_gui_core.sanitizeHtml)(node.content ?? "");
+			el.innerHTML = node.html ?? node.content ?? "";
 			return true;
 	}
 }
@@ -224,29 +254,43 @@ function createRenderer(el, options = {}) {
 	const ctx = {
 		registry: options.registry,
 		onCardAction,
-		plugins: options.plugins
+		plugins: options.plugins,
+		nodeRenderers: (0, __ai_gui_core.collectNodeRenderers)(options.plugins),
+		sanitize: options.sanitize,
+		sanitized: true
 	};
 	const state = createReconcileState();
+	let destroyed = false;
 	const renderer = new __ai_gui_core.Renderer({
 		...rendererOpts,
-		onPatch: (_patches, nodes) => reconcile(el, nodes, ctx, state)
+		onPatch: (_patches, nodes) => {
+			if (!destroyed) reconcile(el, nodes, ctx, state);
+		}
 	});
 	const disposeAll = () => {
 		for (const entry of state.els.values()) disposeEl(entry.el);
 	};
 	return {
-		push: (c) => renderer.push(c),
-		feed: (s) => renderer.feed(s),
+		push: (c) => {
+			if (!destroyed) renderer.push(c);
+		},
+		feed: (source, feedOptions) => destroyed ? Promise.resolve() : renderer.feed(source, feedOptions),
 		reset: () => {
-			disposeAll();
-			renderer.reset();
-			state.els.clear();
-			el.replaceChildren();
+			if (!destroyed) {
+				disposeAll();
+				renderer.reset();
+				state.els.clear();
+				el.replaceChildren();
+			}
 		},
 		destroy: () => {
-			disposeAll();
-			state.els.clear();
-			el.replaceChildren();
+			if (!destroyed) {
+				destroyed = true;
+				renderer.reset();
+				disposeAll();
+				state.els.clear();
+				el.replaceChildren();
+			}
 		}
 	};
 }

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-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/render-node-dom.d.ts
 interface DomRenderContext {
@@ -9,6 +9,9 @@ interface DomRenderContext {
     cardType: string;
   }) => void;
   plugins?: AIGuiPlugin[];
+  nodeRenderers?: Record<string, NodeRenderer>;
+  sanitize?: RendererOptions["sanitize"];
+  sanitized?: boolean;
 }
 declare function renderNodeToElement(node: ASTNode, ctx: DomRenderContext): HTMLElement;
 
@@ -19,7 +22,7 @@ interface CreateRendererOptions extends Omit<RendererOptions, "onPatch"> {
 }
 interface VanillaRenderer {
   push: (chunk: string) => void;
-  feed: (source: AsyncIterable<string> | ReadableStream) => Promise<void>;
+  feed: (source: FeedSource, options?: FeedOptions) => Promise<void>;
   reset: () => void;
   destroy: () => void;
 }
@@ -28,7 +31,7 @@ declare function createRenderer(el: HTMLElement, options?: CreateRendererOptions
 //#endregion
 //#region src/render-output.d.ts
 /** Translate a framework-neutral RenderOutput (from a plugin node renderer) into a DOM element. */
-declare function renderOutputToElement(out: RenderOutput): HTMLElement;
+declare function renderOutputToElement(out: RenderOutput, sanitize?: RendererOptions["sanitize"]): HTMLElement;
 
 //#endregion
 export { CreateRendererOptions, DomRenderContext, VanillaRenderer, createRenderer, renderNodeToElement, renderOutputToElement };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-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/render-node-dom.d.ts
 interface DomRenderContext {
@@ -9,6 +9,9 @@ interface DomRenderContext {
     cardType: string;
   }) => void;
   plugins?: AIGuiPlugin[];
+  nodeRenderers?: Record<string, NodeRenderer>;
+  sanitize?: RendererOptions["sanitize"];
+  sanitized?: boolean;
 }
 declare function renderNodeToElement(node: ASTNode, ctx: DomRenderContext): HTMLElement;
 
@@ -19,7 +22,7 @@ interface CreateRendererOptions extends Omit<RendererOptions, "onPatch"> {
 }
 interface VanillaRenderer {
   push: (chunk: string) => void;
-  feed: (source: AsyncIterable<string> | ReadableStream) => Promise<void>;
+  feed: (source: FeedSource, options?: FeedOptions) => Promise<void>;
   reset: () => void;
   destroy: () => void;
 }
@@ -28,7 +31,7 @@ declare function createRenderer(el: HTMLElement, options?: CreateRendererOptions
 //#endregion
 //#region src/render-output.d.ts
 /** Translate a framework-neutral RenderOutput (from a plugin node renderer) into a DOM element. */
-declare function renderOutputToElement(out: RenderOutput): HTMLElement;
+declare function renderOutputToElement(out: RenderOutput, sanitize?: RendererOptions["sanitize"]): HTMLElement;
 
 //#endregion
 export { CreateRendererOptions, DomRenderContext, VanillaRenderer, createRenderer, renderNodeToElement, renderOutputToElement };

package/dist/index.js

@@ -2,18 +2,18 @@ import { Renderer, collectNodeRenderers, sanitizeHtml } from "@ai-gui/core";
 
 //#region src/render-output.ts
 /** Translate a framework-neutral RenderOutput (from a plugin node renderer) into a DOM element. */
-function renderOutputToElement(out) {
+function renderOutputToElement(out, sanitize) {
 	switch (out.kind) {
 		case "html": {
 			const el = document.createElement("div");
-			el.innerHTML = sanitizeHtml(out.html);
+			el.innerHTML = sanitizeOutput(out.html, sanitize);
 			return el;
 		}
 		case "element": {
 			const el = document.createElement(out.tag);
 			for (const [key, value] of Object.entries(out.props ?? {})) if (key === "class" || key === "className") el.className = String(value);
 			else el.setAttribute(key, String(value));
-			for (const child of out.children ?? []) el.appendChild(renderOutputToElement(child));
+			for (const child of out.children ?? []) el.appendChild(renderOutputToElement(child, sanitize));
 			return el;
 		}
 		case "card": {
@@ -28,37 +28,53 @@ function renderOutputToElement(out) {
 			const el = document.createElement("div");
 			el.setAttribute("data-aigui-mount", "");
 			queueMicrotask(() => {
+				if (el.__aiguiDisposed) return;
 				const c = out.mount(el);
-				if (typeof c === "function") el.__aiguiCleanup = c;
+				if (typeof c === "function") if (el.__aiguiDisposed) c();
+				else el.__aiguiCleanup = c;
 			});
 			return el;
 		}
 	}
 }
+function sanitizeOutput(html, sanitize) {
+	if (sanitize === false) return html;
+	return sanitizeHtml(html, typeof sanitize === "object" ? sanitize : void 0);
+}
 
 //#endregion
 //#region src/render-node-dom.ts
 function renderNodeToElement(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 (typeof out?.then === "function") {
-			const ph = document.createElement("div");
-			ph.setAttribute("data-aigui-async-pending", "");
-			out.then((res) => ph.replaceWith(renderOutputToElement(res)));
-			return ph;
+			const host = document.createElement("div");
+			host.setAttribute("data-aigui-async-pending", "");
+			out.then((res) => {
+				if (host.__aiguiDisposed) return;
+				host.removeAttribute("data-aigui-async-pending");
+				host.replaceChildren(renderOutputToElement(res, ctx.sanitize));
+			}, () => {
+				if (host.__aiguiDisposed) return;
+				host.removeAttribute("data-aigui-async-pending");
+				host.setAttribute("data-aigui-async-error", "");
+			});
+			return host;
 		}
-		return renderOutputToElement(out);
+		return renderOutputToElement(out, ctx.sanitize);
+	} catch {
+		return renderFallback(node, ctx);
 	}
 	switch (node.type) {
 		case "heading": {
 			const el = document.createElement(node.tag ?? "h1");
-			el.innerHTML = node.html ?? "";
+			el.innerHTML = renderHtml(node.html ?? "", ctx);
 			return el;
 		}
 		case "paragraph": {
 			const el = document.createElement("p");
-			el.innerHTML = node.html ?? "";
+			el.innerHTML = renderHtml(node.html ?? "", ctx);
 			return el;
 		}
 		case "code": {
@@ -72,17 +88,22 @@ function renderNodeToElement(node, ctx) {
 		case "hr": return document.createElement("hr");
 		case "html": {
 			const el = document.createElement("div");
-			el.innerHTML = node.content ?? "";
+			el.innerHTML = renderHtml(node.content ?? "", ctx);
 			return el;
 		}
 		case "card": return renderCardElement(node, ctx);
-		default: {
-			const el = document.createElement("div");
-			el.innerHTML = node.html ?? sanitizeHtml(node.content ?? "");
-			return el;
-		}
+		default: return renderFallback(node, ctx);
 	}
 }
+function renderFallback(node, ctx) {
+	const el = document.createElement("div");
+	el.innerHTML = renderHtml(node.html ?? node.content ?? "", ctx);
+	return el;
+}
+function renderHtml(html, ctx) {
+	if (ctx.sanitized || ctx.sanitize === false) return html;
+	return sanitizeHtml(html, typeof ctx.sanitize === "object" ? ctx.sanitize : void 0);
+}
 function renderCardElement(node, ctx) {
 	const card = node.card;
 	if (!card) return document.createElement("div");
@@ -125,7 +146,15 @@ function createReconcileState() {
 }
 /** Run a mounted widget's cleanup (if any) before the element leaves the DOM. */
 function disposeEl(el) {
-	el.__aiguiCleanup?.();
+	for (const child of el.querySelectorAll("*")) disposeManagedEl(child);
+	disposeManagedEl(el);
+}
+function disposeManagedEl(el) {
+	const managed = el;
+	if (managed.__aiguiDisposed) return;
+	managed.__aiguiDisposed = true;
+	managed.__aiguiCleanup?.();
+	managed.__aiguiCleanup = void 0;
 }
 function reconcile(container, nodes, ctx, state) {
 	const nextKeys = new Set(nodes.map((n) => n.key));
@@ -160,6 +189,7 @@ function reconcile(container, nodes, ctx, state) {
 }
 /** Mutate an existing element to reflect the node without replacing it. Returns false when a fresh element is required. */
 function updateElementInPlace(el, node, ctx) {
+	if (ctx.nodeRenderers?.[node.type]) return false;
 	switch (node.type) {
 		case "heading":
 			if (el.tagName !== (node.tag ?? "h1").toUpperCase()) return false;
@@ -188,7 +218,7 @@ function updateElementInPlace(el, node, ctx) {
 		case "card": return false;
 		default:
 			if (el.tagName !== "DIV") return false;
-			el.innerHTML = node.html ?? sanitizeHtml(node.content ?? "");
+			el.innerHTML = node.html ?? node.content ?? "";
 			return true;
 	}
 }
@@ -200,29 +230,43 @@ function createRenderer(el, options = {}) {
 	const ctx = {
 		registry: options.registry,
 		onCardAction,
-		plugins: options.plugins
+		plugins: options.plugins,
+		nodeRenderers: collectNodeRenderers(options.plugins),
+		sanitize: options.sanitize,
+		sanitized: true
 	};
 	const state = createReconcileState();
+	let destroyed = false;
 	const renderer = new Renderer({
 		...rendererOpts,
-		onPatch: (_patches, nodes) => reconcile(el, nodes, ctx, state)
+		onPatch: (_patches, nodes) => {
+			if (!destroyed) reconcile(el, nodes, ctx, state);
+		}
 	});
 	const disposeAll = () => {
 		for (const entry of state.els.values()) disposeEl(entry.el);
 	};
 	return {
-		push: (c) => renderer.push(c),
-		feed: (s) => renderer.feed(s),
+		push: (c) => {
+			if (!destroyed) renderer.push(c);
+		},
+		feed: (source, feedOptions) => destroyed ? Promise.resolve() : renderer.feed(source, feedOptions),
 		reset: () => {
-			disposeAll();
-			renderer.reset();
-			state.els.clear();
-			el.replaceChildren();
+			if (!destroyed) {
+				disposeAll();
+				renderer.reset();
+				state.els.clear();
+				el.replaceChildren();
+			}
 		},
 		destroy: () => {
-			disposeAll();
-			state.els.clear();
-			el.replaceChildren();
+			if (!destroyed) {
+				destroyed = true;
+				renderer.reset();
+				disposeAll();
+				state.els.clear();
+				el.replaceChildren();
+			}
 		}
 	};
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-gui/vanilla",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Framework-free DOM adapter for AIGUI — stream LLM output straight into the DOM.",
   "keywords": [
     "llm",
@@ -22,14 +22,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": [
@@ -41,10 +50,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@ai-gui/core": "0.1.0"
+    "@ai-gui/core": "0.2.0"
   },
   "scripts": {
     "build": "tsdown",
+    "test": "pnpm --dir ../.. exec vitest run --project vanilla",
     "typecheck": "tsc --noEmit"
   }
 }