@ai-slot/adapter-vue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 iannil
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,32 @@
+# @ai-slot/adapter-vue
+
+Vue 3 renderer adapter for [ai-slot-component](https://github.com/iannil/ai-slot-component#readme): render validated component trees as real Vue components, plus an `<AiSlot>` wrapper around the Web Component.
+
+## Install
+
+```bash
+npm install @ai-slot/adapter-vue
+# peer dep: vue >= 3.4
+```
+
+## Usage
+
+```ts
+import { AiSlot, treeToVue } from "@ai-slot/adapter-vue";
+
+// 1. Map component-tree nodes to your Vue components
+const vnode = treeToVue({ Banner }, modelOutput);
+
+// 2. Or use the wrapper — the default slot is the fallback
+// <AiSlot name="hero" src="/ai-render/hero" stream>
+//   <h1>Original content</h1>
+// </AiSlot>
+```
+
+## Docs
+
+- [Root README](https://github.com/iannil/ai-slot-component#readme)
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,63 @@
+import * as vue from 'vue';
+import { Component, VNode, PropType } from 'vue';
+import { ComponentNode, Registry } from '@ai-slot/registry';
+
+type VueComponentMap = Record<string, Component>;
+/**
+ * 把 AI 组件树映射为 Vue VNode。未注册组件跳过并警告（渲染其余部分）。
+ * 默认槽位 children → 默认 slot；命名槽位 → 同名 prop（渲染后的 VNode 数组）。
+ */
+declare function treeToVue(components: VueComponentMap, node: ComponentNode): VNode | null;
+
+/** Vue 版 <ai-slot>：任何失败静默保留默认 slot（fallback），语义与 Web Component 一致。 */
+declare const AiSlot: vue.DefineComponent<vue.ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        required: true;
+    };
+    components: {
+        type: PropType<VueComponentMap>;
+        required: true;
+    };
+    registry: {
+        type: PropType<Registry | undefined>;
+        default: undefined;
+    };
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    refreshInterval: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        required: true;
+    };
+    components: {
+        type: PropType<VueComponentMap>;
+        required: true;
+    };
+    registry: {
+        type: PropType<Registry | undefined>;
+        default: undefined;
+    };
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    refreshInterval: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    registry: Registry | undefined;
+    editable: boolean;
+    refreshInterval: number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { AiSlot, type VueComponentMap, treeToVue };

package/dist/index.js

@@ -0,0 +1,80 @@
+// src/ai-slot.ts
+import { fetchComponentTree } from "@ai-slot/runtime";
+import { defineComponent, h as h2, onMounted, onUnmounted, ref } from "vue";
+
+// src/tree-to-vue.ts
+import { h } from "vue";
+function treeToVue(components, node) {
+  const Comp = Object.hasOwn(components, node.component) ? components[node.component] : void 0;
+  if (!Comp) {
+    console.warn(`[ai-slot] \u7EC4\u4EF6\u672A\u5728\u5BA2\u6237\u7AEF\u6CE8\u518C\uFF0C\u5DF2\u8DF3\u8FC7: ${node.component}`);
+    return null;
+  }
+  const children = (node.children ?? []).map((child) => treeToVue(components, child)).filter((v) => v !== null);
+  const props = { ...node.props ?? {} };
+  for (const [slotName, nodes] of Object.entries(node.slots ?? {})) {
+    props[slotName] = nodes.map((child) => treeToVue(components, child)).filter((v) => v !== null);
+  }
+  return h(Comp, props, () => children);
+}
+
+// src/ai-slot.ts
+var AiSlot = defineComponent({
+  name: "AiSlot",
+  props: {
+    src: { type: String, required: true },
+    components: { type: Object, required: true },
+    registry: { type: Object, default: void 0 },
+    editable: { type: Boolean, default: false },
+    refreshInterval: { type: Number, default: 0 }
+  },
+  setup(props, { slots }) {
+    const tree = ref(null);
+    const prompt = ref("");
+    let seq = 0;
+    let timer;
+    async function load(userPrompt) {
+      const mySeq = ++seq;
+      const next = await fetchComponentTree({ src: props.src, userPrompt, registry: props.registry });
+      if (!next) return;
+      if (mySeq !== seq) return;
+      tree.value = next;
+    }
+    function restore() {
+      seq += 1;
+      tree.value = null;
+    }
+    onMounted(() => {
+      void load();
+      if (props.refreshInterval > 0) {
+        timer = setInterval(() => void load(), props.refreshInterval * 1e3);
+      }
+    });
+    onUnmounted(() => clearInterval(timer));
+    function onSubmit(event) {
+      event.preventDefault();
+      const value = prompt.value.trim();
+      if (value) void load(value);
+    }
+    return () => h2("span", { style: "display: contents" }, [
+      tree.value ? treeToVue(props.components, tree.value) : slots.default?.() ?? null,
+      props.editable ? h2("form", { class: "ai-slot-editor", onSubmit }, [
+        h2("input", {
+          name: "prompt",
+          maxlength: 500,
+          placeholder: "\u7528\u4E00\u53E5\u8BDD\u8C03\u6574\u8FD9\u4E2A\u533A\u57DF\u2026",
+          value: prompt.value,
+          onInput: (e) => {
+            prompt.value = e.target.value;
+          }
+        }),
+        h2("button", { type: "submit" }, "\u5E94\u7528"),
+        h2("button", { type: "button", onClick: restore }, "\u6062\u590D\u9ED8\u8BA4")
+      ]) : null
+    ]);
+  }
+});
+export {
+  AiSlot,
+  treeToVue
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@ai-slot/adapter-vue",
+  "version": "0.1.0",
+  "license": "MIT",
+  "description": "Vue 3 renderer adapter for ai-slot: render validated component trees as real Vue components.",
+  "keywords": [
+    "vue",
+    "ai",
+    "renderer",
+    "adapter"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/iannil/ai-slot-component.git",
+    "directory": "packages/adapter-vue"
+  },
+  "bugs": "https://github.com/iannil/ai-slot-component/issues",
+  "homepage": "https://github.com/iannil/ai-slot-component/tree/master/packages/adapter-vue#readme",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@ai-slot/registry": "0.1.0",
+    "@ai-slot/runtime": "0.1.0"
+  },
+  "peerDependencies": {
+    "vue": ">=3.4"
+  },
+  "devDependencies": {
+    "@vue/server-renderer": "^3.5.0",
+    "jsdom": "^25.0.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0",
+    "vitest": "^2.1.0",
+    "vue": "^3.5.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}