json-render-vue2

Vue 2 版 json-render 渲染器，API 与 @json-render/vue 保持一致，可无缝替换 import 路径。

安装

npm install [email protected] @json-render/[email protected] vue@2 zod

API 对齐

与 @json-render/vue 相同的导出：

| 类别 | 导出 | |------|------| | Providers | StateProvider, ActionProvider, VisibilityProvider, ValidationProvider, JSONUIProvider | | 组件 | Renderer, ConfirmDialog, RepeatScopeProvider | | 注册 | defineRegistry, createRenderer | | Composables | useStateStore, useStateValue, useBoundProp, useActions, useAction, useVisibility, useIsVisible, useValidation, useFieldValidation, … | | Streaming | useUIStream, useChatUI, buildSpecFromParts, getTextFromParts, flatToTree | | Schema | schema（同官方，import { schema } from 'json-render-vue2/schema'） | | Core | createStateStore |

用法（与官方相同）

import { defineCatalog } from '@json-render/core'
import { schema } from 'json-render-vue2/schema'
import {
  defineRegistry,
  StateProvider,
  VisibilityProvider,
  ActionProvider,
  Renderer,
  useBoundProp,
} from 'json-render-vue2'
import { h } from 'vue'

<StateProvider :initial-state="initialState">
  <VisibilityProvider>
    <ActionProvider :handlers="handlers">
      <Renderer :spec="spec" :registry="registry" />
    </ActionProvider>
  </VisibilityProvider>
</StateProvider>

或使用一体化 Provider：

<JSONUIProvider
  :registry="registry"
  :handlers="handlers"
  :initial-state="initialState"
>
  <Renderer :spec="spec" :registry="registry" />
</JSONUIProvider>

与 @json-render/vue 的差异

| 项目 | json-render-vue2 | @json-render/vue | |------|------------------|------------------| | 包版本 | 0.19.0 | 0.19.0 | | Vue 版本 | 2.6 / 2.7 | 3.5+ | | API / 接口 | 一致 | 官方 |

开发与发布

# 安装依赖并构建 dist/
npm install
npm run build

# 发布前检查（prepack 会自动执行 build + verify-pack）
npm run verify-pack

# 预览将要发布的文件
npm pack --dry-run

# 发布到 npm
npm publish

运行示例

cd example
npm install
npm run serve

License

Apache-2.0