@jboltai/tokui-vue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 jboltai.com
+
+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,52 @@
+# @jboltai/tokui-vue
+
+> TokUI 的 Vue 3 适配器：`<TokUIView>` 组件 + `useTokUIStream()` 组合式。
+
+## 安装
+
+```bash
+npm install @jboltai/tokui-vue vue
+```
+
+## 声明式渲染
+
+```vue
+<script setup>
+import { TokUIView } from '@jboltai/tokui-vue';
+const dsl = '[card tt:你好 TokUI][p 流式 UI，零依赖][/card]';
+</script>
+
+<template>
+  <TokUIView :dsl="dsl" theme="default" />
+</template>
+```
+
+`dsl` 变化时自动重新渲染；组件卸载时自动断开清理。
+
+## 流式 / SSE
+
+```vue
+<script setup>
+import { useTokUIStream } from '@jboltai/tokui-vue';
+const { container, start, feed, end, connect } = useTokUIStream();
+
+function render() {
+  start();
+  feed('[card tt:');
+  feed('流式卡片]');
+  end();
+}
+</script>
+
+<template>
+  <div ref="container" />
+  <button @click="render">渲染</button>
+  <button @click="connect('/api/chat', { prompt: '画登录卡片' })">SSE 连接</button>
+</template>
+```
+
+## CSS
+
+样式随 `@jboltai/tokui` 自动注入，无需手动引 CSS。
+
+License: MIT

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@jboltai/tokui-vue",
+  "version": "0.1.0",
+  "description": "TokUI Vue 3 adapter — <TokUIView> component and useTokUIStream() composable for streaming DSL UI.",
+  "license": "MIT",
+  "author": "sdxiaomu (https://jboltai.com)",
+  "homepage": "https://github.com/jboltai/tokui",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jboltai/tokui.git",
+    "directory": "packages/vue"
+  },
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "types": "src/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./src/index.js",
+      "require": "./src/index.js",
+      "default": "./src/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@jboltai/tokui": "^0.1.0"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": false
+    }
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "tokui",
+    "vue",
+    "vue3",
+    "streaming-ui",
+    "dsl",
+    "composable"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,26 @@
+import type { Component, Ref } from 'vue';
+import type { TokUI as TokUIClass, TokUIEventCallback } from '@jboltai/tokui';
+
+export interface TokUIViewProps {
+  dsl?: string;
+  theme?: string;
+  onEvent?: TokUIEventCallback;
+}
+
+export declare const TokUIView: Component;
+
+export interface UseTokUIStreamReturn {
+  container: Ref<HTMLDivElement | null>;
+  start: (container?: HTMLDivElement) => void;
+  feed: (chunk: string) => void;
+  end: () => void;
+  connect: (url: string, body?: Record<string, any>) => Promise<void>;
+  disconnect: () => void;
+}
+
+export declare function useTokUIStream(options?: {
+  theme?: string;
+  onEvent?: TokUIEventCallback;
+}): UseTokUIStreamReturn;
+
+export default TokUIView;

package/src/index.js

@@ -0,0 +1,75 @@
+'use strict';
+
+// TokUI Vue 3 适配器：<TokUIView> 组件 + useTokUIStream() 组合式。
+// 用 h() 渲染函数（ref 对象直接传入），避免模板编译依赖，兼容任意 Vue 3 项目。
+import { defineComponent, h, ref, onMounted, onBeforeUnmount, watch } from 'vue';
+import { TokUI, setTheme } from '@jboltai/tokui';
+
+/**
+ * 声明式渲染一段 TokUI DSL。
+ * @param {object} props
+ * @param {string} [props.dsl] DSL 文本（变化时重新渲染）
+ * @param {string} [props.theme] 主题名
+ * @param {function} [props.onEvent] 事件回调 (name, data)
+ */
+export const TokUIView = defineComponent({
+  name: 'TokUIView',
+  props: {
+    dsl: { type: String, default: '' },
+    theme: { type: String, default: '' },
+    onEvent: { type: Function, default: null }
+  },
+  setup(props) {
+    const container = ref(null);
+    let ui = null;
+
+    onMounted(() => {
+      if (!container.value) return;
+      ui = new TokUI({
+        container: container.value,
+        theme: props.theme || undefined,
+        onEvent: props.onEvent || undefined
+      });
+      if (props.theme) { try { setTheme(props.theme); } catch (e) { /* ignore */ } }
+      if (props.dsl) ui.render(props.dsl);
+    });
+
+    watch(() => props.dsl, (v) => { if (ui && v) ui.render(v); });
+
+    onBeforeUnmount(() => {
+      if (ui && ui.disconnect) ui.disconnect();
+      ui = null;
+    });
+
+    // Vue 3 渲染函数：把 ref 对象直接作为 ref 传入，元素挂载后自动绑定到 container。
+    return () => h('div', { ref: container, class: 'tokui-vue-view' });
+  }
+});
+
+/**
+ * 流式渲染组合式（手动 feed / SSE connect）。
+ * @param {object} [options] TokUI 构造选项（theme/onEvent 等）
+ * @returns {{container, start, feed, end, connect, disconnect}}
+ */
+export function useTokUIStream(options) {
+  const container = ref(null);
+  let ui = null;
+
+  const ensure = () => {
+    if (!ui && container.value) {
+      ui = new TokUI({ container: container.value, ...(options || {}) });
+    }
+    return ui;
+  };
+  const start = (c) => { const u = ensure(); if (u) u.startStream(c || container.value); };
+  const feed = (chunk) => { const u = ensure(); if (u) u.feed(chunk); };
+  const end = () => { if (ui) ui.endStream(); };
+  const connect = (url, body) => { const u = ensure(); return u ? u.connect(url, body) : Promise.resolve(); };
+  const disconnect = () => { if (ui && ui.disconnect) ui.disconnect(); };
+
+  onBeforeUnmount(() => disconnect());
+
+  return { container, start, feed, end, connect, disconnect };
+}
+
+export default TokUIView;