# @aglyn/aglyn-node-renderer 中文文档

规范地址：https://npmcn.com/package/%40aglyn/aglyn-node-renderer/

版本：1\.19\.0
npm 元数据更新时间：2026-11-07T13:58:53.101Z
中文译文更新时间：2026-11-05T23:11:49.612Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40aglyn/aglyn-node-renderer
原文对照：https://npmcn.com/package/%40aglyn/aglyn-node-renderer/?lang=original
项目主页：https://aglyn.com/
源码仓库：https://github.com/aglyn/aglyn

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：192 kB，48 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：8 个
- peer 依赖：react ^19\.2\.8
- 首次发布：2026-09-20T23:52:50.370Z
- 最新版本发布：2026-11-07T13:58:52.776Z
- 近 30 天下载量：9835（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：161（近 12 个月 161 个）

## 中文简介

将存储的 Aglyn 节点树作为 React 格式 。 它是Besigner画布、控制台预览和一个已公布的站点全部挂载的一个渲染器。 如果您想在自己的 React app 中显示 Aglyn 节点树, 请安装它 .

## 安装

```sh
npm install @aglyn/aglyn-node-renderer
```

也可以使用：`pnpm add @aglyn/aglyn-node-renderer`、`yarn add @aglyn/aglyn-node-renderer`、`bun add @aglyn/aglyn-node-renderer`

## README

# @aglyn/aglyn-node-resanderer (英语)

将存储的 Aglyn 节点树作为 React 格式 。 造物主就是这个造物主 帆布、控制台预览和一个已公布的站点全部挂载。 安装它,如果你 想要在您的 React app 中显示 Aglyn 节点树 .

> 从Aglyn monorepo出版到npm. 随后的版本 [语义版本](https://semver.org/)。 。 。 .

## 安装

```
npm install @aglyn/aglyn-node-renderer
```

同伴依赖性 :

-   `react`

软件包取决于 `@aglyn/shared-ui-theme` 财务报告和审定财务报表 `@aglyn/shared-ui-jsx`, (中文(简体) ), 在 MUI 上的对等点( W)`@mui/material`, (中文(简体) ), `@mui/system` 和相关的包件)。 这个 渲染器读取了活性主题,所以使它在主题提供者内部.

## 里面有什么东西

树构件,从外出:

-   `TreeRoot` (也导出为 `AglynNodeRenderer`)取出根来 `node` 财务报告和审定财务报表 提供其下方的所有部件.
-   `Trunk`, (中文(简体) ), `Stem` 财务报告和审定财务报表 `Branch` 步行去树上. `Stem` 将每个节点包入一个 出错边界, 因此一个失败的节点不会将页面取下 .
-   `Leaf` 成为一个节点。 上面是节点 `componentId` 输入 `components` 登记簿 `@aglyn/aglyn`,解决节点 `sx` 反对 ,并应用元素动画属性.

替换级别 :

-   `TreeRoot` 接受 `TrunkComponent`, (中文(简体) ), `StemComponent`, (中文(简体) ), `BranchComponent` 财务报告和审定财务报表 `LeafComponent` 道具来. Besigner 编辑器用这个交换叶子 添加选择和拖曳行为 。 这个 `RendererComponents` 上下文载 选择的集.
-   `LeafSxTransformContext` 让主机转换合并 `sx` 总数 在它到达元素之前 已发布的网站不挂载 这个.

帮助者 :

-   `createAglynComponent(schema, component, options?)` 包裹反应组件 用于注册:返回 `{ schema, component }` 组合,与 组件样式并被错误边界所包裹.
-   `useAglynSiteTheme` 财务报告和审定财务报表 `createAglynSiteTheme` 构建网站生成的主题 从存储的主机主题.
-   `resolveSchemeSx`, (中文(简体) ), `resolvePaletteVars`, (中文(简体) ), `resolvePaletteVarsSx` 相关 `sx` 帮助者,从 `@aglyn/aglyn`。 。 。 .

每个文件下 `src/lib` 也可以通过子路径达到,例如 `@aglyn/aglyn-node-renderer/components/tree-root`。 。 。 .

## 使用量

用核心注册一个组件,然后生成一个命名它的节点:

```tsx
import { components } from '@aglyn/aglyn'
import { TreeRoot } from '@aglyn/aglyn-node-renderer'
import { createTheme, ThemeProvider } from '@aglyn/shared-ui-theme'

const Box = (props) => <div {...props} />

components.registerComponent(Box, {
  $id: 'box',
  pluginId: 'example',
  displayName: 'Box',
})

const node = {
  $id: 'root',
  componentId: 'box',
  pluginId: 'example',
  props: { id: 'hello' },
  children: [],
}

export function Page() {
  return (
    <ThemeProvider theme={createTheme({ palette: { mode: 'light' } })}>
      <TreeRoot node={node} />
    </ThemeProvider>
  )
}
```

在Aglyn本身,组件来自插件,例如 `@aglyn/plugins-mui`, (中文(简体) ), 根节点来自核心的画布(`canvas.rootNode`a 之后为 存储 `NodesMap` 被装入其中.

## 怎样才合适

这是 `renderer` 软件包地图的范围:导入核心 (单位:千美元)`@aglyn/aglyn`)和通用软件 `@aglyn/shared-*` 包,没有别的. 它不知道插件; 组件仅通过核心组件到达它 登记. `@aglyn/besigner-ui`, 租户运行时间和插件 这个.

## 许可证

阿帕奇2.0 (英语). 资料来源: [https://github.com/aglyn/aglyn/tree/main/libs/aglyn-node-render 互联网档案馆的存檔,存档日期2014-12-22](https://github.com/aglyn/aglyn/tree/main/libs/aglyn-node-renderer)

## 常见问题

### @aglyn/aglyn-node-renderer 是什么？

将存储的 Aglyn 节点树作为 React 格式 。 它是Besigner画布、控制台预览和一个已公布的站点全部挂载的一个渲染器。 如果您想在自己的 React app 中显示 Aglyn 节点树, 请安装它 \.

### 如何安装 @aglyn/aglyn-node-renderer？

在项目目录运行 npm install @aglyn/aglyn-node-renderer，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.2\.8）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aglyn/aglyn-node-renderer 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @aglyn/aglyn-node-renderer 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @aglyn/aglyn-node-renderer 可以商用吗？

@aglyn/aglyn-node-renderer 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @aglyn/aglyn-node-renderer 的下载量有多少？

根据 npm 官方下载统计，@aglyn/aglyn-node-renderer 在 2026/10/05 – 2026/11/03 这 30 天内被下载 9,835 次，日均约 328 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aglyn/aglyn-node-renderer 还在维护吗？

最新版本 1\.19\.0 发布于 2026/11/07（今天）；至今共发布 161 个版本，其中过去 12 个月发布了 161 个；首次发布于 2026/09/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。