@ai-slot/adapter-react 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-react
+
+React renderer adapter for [ai-slot-component](https://github.com/iannil/ai-slot-component#readme): render validated component trees as real React components, plus an `<AiSlot>` wrapper around the Web Component.
+
+## Install
+
+```bash
+npm install @ai-slot/adapter-react
+# peer deps: react >= 18, react-dom >= 18
+```
+
+## Usage
+
+```tsx
+import { AiSlot, treeToReact } from "@ai-slot/adapter-react";
+
+// 1. Map component-tree nodes to your React components
+const tree = treeToReact({ Banner }, modelOutput);
+
+// 2. Or use the wrapper — plain markup inside 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,28 @@
+import { ComponentNode, Registry } from '@ai-slot/registry';
+import { ComponentType, ReactNode, ReactElement } from 'react';
+
+type ReactComponentMap = Record<string, ComponentType<Record<string, unknown>>>;
+/**
+ * 把 AI 组件树映射为 React 元素。未注册组件跳过并警告（渲染其余部分）。
+ * 默认槽位 children → 组件 children；命名槽位 → 同名 prop（渲染后的 ReactNode 数组）。
+ */
+declare function treeToReact(components: ReactComponentMap, node: ComponentNode): ReactNode;
+
+interface AiSlotProps {
+    src: string;
+    components: ReactComponentMap;
+    /** 提供时渲染前对 AI 输出再校验一次 */
+    registry?: Registry;
+    editable?: boolean;
+    /** 首屏与降级内容（对应 WC 的 light DOM 兜底） */
+    fallback: ReactNode;
+    /** 轮询间隔（秒），>0 时生效 */
+    refreshInterval?: number;
+}
+/**
+ * React 版 <ai-slot>：任何失败静默保留 fallback，语义与 Web Component 一致。
+ * `registry` 应为模块级常量或经 useMemo 稳定化——内联字面量会因引用变化触发重复加载。
+ */
+declare function AiSlot(props: AiSlotProps): ReactElement;
+
+export { AiSlot, type AiSlotProps, type ReactComponentMap, treeToReact };

package/dist/index.js

@@ -0,0 +1,78 @@
+// src/ai-slot.tsx
+import { fetchComponentTree } from "@ai-slot/runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/tree-to-react.ts
+import { createElement, Fragment } from "react";
+function treeToReact(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, i) => createElement(Fragment, { key: i }, treeToReact(components, child))
+  );
+  const props = { ...node.props ?? {} };
+  for (const [slotName, nodes] of Object.entries(node.slots ?? {})) {
+    props[slotName] = nodes.map(
+      (child, i) => createElement(Fragment, { key: i }, treeToReact(components, child))
+    );
+  }
+  return createElement(Comp, props, ...children);
+}
+
+// src/ai-slot.tsx
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+function AiSlot(props) {
+  const [tree, setTree] = useState(null);
+  const [prompt, setPrompt] = useState("");
+  const seqRef = useRef(0);
+  const load = useCallback(
+    async (userPrompt) => {
+      const seq = ++seqRef.current;
+      const next = await fetchComponentTree({ src: props.src, userPrompt, registry: props.registry });
+      if (!next) return;
+      if (seq !== seqRef.current) return;
+      setTree(next);
+    },
+    [props.src, props.registry]
+  );
+  useEffect(() => {
+    void load();
+    if (props.refreshInterval && props.refreshInterval > 0) {
+      const timer = setInterval(() => void load(), props.refreshInterval * 1e3);
+      return () => clearInterval(timer);
+    }
+  }, [load, props.refreshInterval]);
+  const onSubmit = (event) => {
+    event.preventDefault();
+    const value = prompt.trim();
+    if (value) void load(value);
+  };
+  const restore = () => {
+    seqRef.current += 1;
+    setTree(null);
+  };
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    tree ? treeToReact(props.components, tree) : props.fallback,
+    props.editable ? /* @__PURE__ */ jsxs("form", { className: "ai-slot-editor", onSubmit, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          name: "prompt",
+          maxLength: 500,
+          placeholder: "\u7528\u4E00\u53E5\u8BDD\u8C03\u6574\u8FD9\u4E2A\u533A\u57DF\u2026",
+          value: prompt,
+          onChange: (e) => setPrompt(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { type: "submit", children: "\u5E94\u7528" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: restore, children: "\u6062\u590D\u9ED8\u8BA4" })
+    ] }) : null
+  ] });
+}
+export {
+  AiSlot,
+  treeToReact
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@ai-slot/adapter-react",
+  "version": "0.1.0",
+  "license": "MIT",
+  "description": "React renderer adapter for ai-slot: render validated component trees as real React components.",
+  "keywords": [
+    "react",
+    "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-react"
+  },
+  "bugs": "https://github.com/iannil/ai-slot-component/issues",
+  "homepage": "https://github.com/iannil/ai-slot-component/tree/master/packages/adapter-react#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": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "jsdom": "^25.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0",
+    "vitest": "^2.1.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}