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

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

从Aglyn monorepo出版到npm. 随后的版本 语义版本。 。 。 .

安装

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。 。 。 .

使用量

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

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.rootNodea 之后为 存储 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