使用 @json-render/solid 构建…

当你需要在 SolidJS 项目中把 json-render spec 渲染为组件树，并配置 catalog、registry、providers、actions、bindings 或流式 UI 时使用。

适用场景

解决思路

1. 在 App 中从 `@json-render/solid` 引入 `Renderer`、`JSONUIProvider`，并引入 `Spec` 类型与 `registry`。
2. 用 `JSONUIProvider` 包裹 `Renderer`，传入 `registry` 与 `initialState`（例如 `{}`），并给 `Renderer` 传入 `spec` 与 `registry`。
3. 创建 catalog 时，从 `@json-render/core` 引入 `defineCatalog`，从 `@json-render/solid/schema` 引入 `schema`，从 `zod` 引入 `z`。
4. 调用 `defineCatalog(schema, { components, actions })`；在 `components` 中为每个组件定义 `props` 的 zod 对象和 `description`（例如 `Button` 的 `label`、`variant` 可为 `primary`/`secondary` 或 `null`，`Card` 的 `title`）。
5. 在 `actions` 中定义 action 的 `description`（例如 `submit`）。
6. 定义组件时接收 `ComponentRenderProps<P>`，字段包括 `element`、`children`、`emit`、`on`、`bindings`、`loading`。
7. 组件可使用 `BaseComponentProps` 类型；在示例 `Button` 中通过 `props.emit('press')` 触发事件，并通过 `props.props.label` 读取 label。
8. 创建 registry 时从 `@json-render/solid` 引入 `defineRegistry`，并引入 `catalog`、`Card`、`Button`。
9. 调用 `defineRegistry(catalog, { components: { Card, Button }, actions: { submit: async (params, setState, state) => { ... } } })`，得到 `registry`、`handlers`、`executeAction`。
10. 编写 spec 时使用 `{ root, elements }` 结构；`root` 指向根元素 id（如 `card1`）。
11. 每个 `elements` 项包含 `type`、`props`、`children`；例如 `card1` 的 `type` 为 `Card`、`props.title` 为 `Hello`、`children` 为 `['btn1']`。
12. 事件写在 `on` 中，例如 `btn1` 的 `on.press` 为 `{ action: 'submit' }`。
13. 使用 `StateProvider`：管理 state model 读写，并通过 `store` 支持受控模式。
14. 使用 `VisibilityProvider`：计算 `visible` 条件。
15. 使用 `ValidationProvider`：做字段校验并集成 `validateForm`。
16. 使用 `ActionProvider`：运行内置和自定义 actions。
17. 使用 `JSONUIProvider`：作为组合 provider wrapper。
18. 使用 `useStateStore`。
19. 使用 `useStateValue`。
20. 使用 `useStateBinding`。
21. 使用 `useVisibility`。
22. 使用 `useIsVisible`。
23. 使用 `useActions`。
24. 使用 `useAction`。
25. 使用 `useValidation`。
26. 使用 `useOptionalValidation`。
27. 使用 `useFieldValidation`。
28. 使用 `useBoundProp`。
29. 使用 `useUIStream`。
30. 使用 `useChatUI`。
31. 内置 actions 由 `ActionProvider` 自动处理：`setState`。
32. 内置 actions 由 `ActionProvider` 自动处理：`pushState`。
33. 内置 actions 由 `ActionProvider` 自动处理：`removeState`。
34. 内置 actions 由 `ActionProvider` 自动处理：`validateForm`。
35. 动态 props 与 bindings：嵌套列表可在 enclosing repeat 内把 `repeat.statePath` 设为 `{ '$item': 'field' }`。
36. 支持的表达式形式：`$state`，如 `{'$state': '/path'}`。
37. 支持的表达式形式：`$bindState`，如 `{'$bindState': '/path'}`。
38. 支持的表达式形式：`$bindItem`，如 `{'$bindItem': 'field'}`。
39. 支持的表达式形式：`$template`，如 `{'$template': 'Hi ${/user/name}'}`。
40. 支持的表达式形式：`$computed`，如 `{'$computed': 'fn', 'args': {...}}`。
41. 支持的表达式形式：`$cond` / `$then` / `$else`，如 `{'$cond': <condition>, '$then': <value>, '$else': <value>}`。
42. 在组件中用 `useBoundProp` 处理可写绑定值：调用 `const [value, setValue] = useBoundProp(props.props.value, props.bindings?.value)`。
43. 在 `Input` 组件示例中，将 `<input>` 的 `value` 设为 `String(value() ?? '')`，并在 `onInput` 中调用 `setValue(e.currentTarget.value)`。
44. `useStateValue`、`useStateBinding` 以及 `useFieldValidation` 的 `state` / `errors` / `isValid` 字段在 Solid 中是 reactive accessors；在 JSX、`createMemo` 或 `createEffect` 中作为函数调用。
45. Solid 响应式规则：需要在值保持响应式时，不要在函数签名中解构 component props。
46. Solid 响应式规则：把会变化的读取放在 JSX 表达式、`createMemo` 或 `createEffect` 内。
47. Solid 响应式规则：context values 通过 getter-based objects 暴露，使消费者始终观察 live signals。
48. Streaming UI：使用 `useUIStream`，传入 `{ api: '/api/generate-ui' }`。
49. 调用 `await stream.send('Create a support dashboard')`。
50. 将 `<Renderer>` 渲染为 `spec={stream.spec}`、`registry={registry}`、`loading={stream.isStreaming}`。
51. 聊天 + UI 生成流程使用 `useChatUI`。

适用边界 · 注意事项

• 非 SolidJS 项目或不使用 `@json-render/solid` 时。
• 使用 React、Vue、Svelte 等其他渲染器时。
• 不需要 json-render 规范驱动 UI 时。