lowcode-engine 编辑态扩展指南：物料、插件与设置器的配置扩展点解析

lowcode-engine 编辑态扩展指南物料、插件与设置器的配置扩展点解析【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine本篇技术文章基于 lowcode-engine 仓库中的《编辑态扩展简述》文档展开系统梳理低代码编辑器四类可扩展点插件、物料、操作辅助区、设置器的定位并给出material.setAssets、plugins.register、setters.registerSetter三个核心 API 的完整可运行配置示例。阅读结合仓库源码的实现印证你将能够独立完成编辑器的物料注入、第三方插件挂载与自定义设置器注册。一、编辑器扩展点全景四类可定制能力lowcode-engine 的编辑态页面由多个功能区块组成物料面板、画布、设置面板、辅助工具栏等这些功能区块背后都是可扩展项。从可扩展项目的视角出发官方文档将四类扩展点归纳为插件定制可以配置低代码编辑器的功能和面板物料定制可以配置能够拖入画布的物料操作辅助区定制可以配置编辑器画布中的操作辅助区功能设置器定制可以配置编辑器中组件的配置表单。从可扩展项目的视角可以把低代码引擎架构理解为「引擎内核 外部扩展」的双层结构引擎内核负责文档模型、设计器、模拟器和框架骨架的运行与数据交互外部则通过插件、物料资产包、操作辅助区、设置器四类通道向内核注入能力。需要说明的是这种架构视角简化了引擎内核中大量数据交互细节重点强调编辑器和外部扩展之间的交互边界。理解这一边界非常关键alilc/lowcode-engine对外暴露的material、plugins、setters、project、skeleton、workspace等 API都是面向外部扩展的统一入口开发者无需触碰内核即可扩展编辑器行为。二、扩展 API 的底层实现源码印证2.1 统一入口的装配位置所有扩展 API 在引擎入口文件 engine-core.ts 中被集中装配并导出。从源码结构看每个 API 都是「内部实现模型 shell 代理层」的组合// packages/engine/src/engine-core.ts节选 const innerSetters new InnerSetters(); const setters new Setters(innerSetters); const material new Material(editor); // ... const innerPlugins new LowCodePluginManager(pluginContextApiAssembler); plugins new Plugins(innerPlugins).toProxy(); export { skeleton, plugins, project, setters, material, config, event, logger, hotkey, common, workspace, canvas, commonUI, command, };其中Material、Plugins、Setters来自 packages/shell 的 API 代理层内部再委托给alilc/lowcode-editor-core、alilc/lowcode-designer中的内核对象。值得注意的是plugins经过了toProxy()处理支持通过属性名直接访问已注册插件实例详见下文 2.3。2.2 material.setAssets 的调用链文档示例中的material.setAssets(assets)在 shell 层的实现见 material.ts// packages/shell/src/api/material.ts节选 async setAssets(assets: IPublicTypeAssetsJson) { return await this[editorSymbol].setAssets(assets); }它最终委托给内核编辑器 editor.ts 的setAssets方法。从源码结构看该实现除了写入资产包数据外还负责加载远程组件描述、向componentsMap中注册 npm 与组件实例并在数据就绪后发出designer.incrementalAssetsReady事件触发物料面板刷新。这与 shell 层onChangeAssets监听的两个信号完全对应material.ts// setAssets 赋值监听editor.onChange(assets, fn) // 增量资产包监听eventBus.on(designer.incrementalAssetsReady, fn)因此无论是静态注入还是异步 fetch 后注入物料面板都会通过同一套事件机制完成响应式更新。2.3 plugins.register 与插件管理器plugins.register的代理实现见 plugins.ts// packages/shell/src/api/plugins.ts节选 async register( pluginModel: IPublicTypePlugin, options?: any, registerOptions?: IPublicTypePluginRegisterOptions, ): Promisevoid { await this[pluginsSymbol].register(pluginModel, options, registerOptions); }底层是设计器模块的LowCodePluginManager它管理插件的注册、init生命周期与上下文注入。在引擎启动流程中engine-core.ts 的init(container, options, pluginPreference)会先调用plugins.init(pluginPreference)完成内置插件初始化再渲染骨架视图这保证了「先注册、后生效」的时序。2.4 setters.registerSetter 的代理路径setters.registerSetter在 shell 层的实现非常直接见 setters.ts// packages/shell/src/api/setters.ts节选 registerSetter ( typeOrMaps: string | { [key: string]: IPublicTypeCustomView | IPublicTypeRegisteredSetter }, setter?: IPublicTypeCustomView | IPublicTypeRegisteredSetter, ) { return this[settersSymbol].registerSetter(typeOrMaps, setter); };底层对应alilc/lowcode-editor-core的Setters类维护一个 setter 注册表设置面板渲染配置表单时根据物料元数据中声明的 setter 类型从该注册表取值渲染。工作区多窗口模式下setters、material等代理会自动路由到当前激活窗口的实例这也是多文档编辑场景下各窗口配置互不干扰的实现基础。三、配置扩展点实操3.1 配置物料静态注入物料是编辑器可拖入画布的基础单元。通过配置注入物料时这里的配置是物料中心根据物料资产包协议生成的资产包协议详见 docs/docs/guide/expand/editor/metaSpec.md 与 docs/docs/specs/material-spec.md。最简单的静态加载方式import { material } from alilc/lowcode-engine; // 假设您已把物料配置在本地 import assets from ./assets.json; // 静态加载 assets material.setAssets(assets);setAssets是异步方法内部为async它会解析资产包、构建componentsMap并触发物料面板的数据刷新如 2.2 节所述。3.2 配置物料动态异步加载如果物料托管在物料中心可以在插件的init生命周期中异步拉取并注入这样能保证物料加载与编辑器启动流程协调进行import { material, plugins } from alilc/lowcode-engine; import { IPublicModelPluginContext } from alilc/lowcode-types; // 动态加载 assets plugins.register((ctx: IPublicModelPluginContext) { return { name: ext-assets, async init() { try { // 将下述链接替换为您的物料即可。无论是通过 utils 从物料中心引入 // 还是通过其他途径如直接引入物料描述 const res await window.fetch(https://fusion.alicdn.com/assets/default0.1.95/assets.json) const assets await res.text() material.setAssets(assets) } catch (err) { console.error(err) } }, } }).catch(err console.error(err));这个模式体现了插件系统与物料系统的协作plugins.register返回 Promise注册一个名为ext-assets的插件在其init阶段完成远程资产包拉取与注入。后续「物料扩展」章节docs/docs/guide/expand/editor/material.md会对资产包结构做更详细的说明。3.3 配置插件npm 包方式挂载社区插件编辑器功能面板如提 issue、调试工具等可以通过 npm 包形式的社区插件引入import { plugins } from alilc/lowcode-engine; import { IPublicModelPluginContext } from alilc/lowcode-types; import PluginIssueTracker from alilc/lowcode-plugin-issue-tracker; // 注册一个提 issue 组件到您的编辑器中方位默认在左栏下侧 plugins.register(PluginIssueTracker) .catch(err console.error(err));插件对象可以是一个函数工厂形式接收IPublicModelPluginContext返回插件定义也可以是带name、init等字段的插件元数据对象。注册后插件在plugins.init时被实例化并注入上下文 APIskeleton、project、setters、material、event、logger等上下文装配逻辑见 engine-core.ts 的pluginContextApiAssembler.assembleApis。插件的骨架插槽、右键菜单等扩展方式可继续参阅 docs/docs/guide/expand/editor/pluginWidget.md 与 docs/docs/guide/expand/editor/pluginContextMenu.md。3.4 配置设置器注册自定义 setter低代码引擎默认内置了一组设置器。若需要为特定类型的属性值提供自定义配置表单控件可以通过 npm 包或本地模块的方式注册自定义设置器import { setters } from alilc/lowcode-engine; // 假设您自定义了一个 setter import MuxMonacoEditorSetter from ./components/setters/MuxMonacoEditorSetter; // 注册设置器 setters.registerSetter({ MuxMonacoEditorSetter: { component: MuxMonacoEditorSetter, title: Textarea, condition: (field) { const v field.getValue() return typeof v string }, }, });注册项的核心字段字段说明component设置器渲染的 React 组件title设置器在物料描述 / 面板中显示的名称condition可选的判断函数根据field.getValue()的返回类型决定是否启用该设置器设置器与物料元数据的对接、内置设置器清单及condition的更多用法详见后续「设置器扩展」章节docs/docs/guide/expand/editor/setter.md以及 API 文档 docs/docs/api/setters.md。四、扩展 API 速查与延伸阅读扩展点核心 API代理实现仓库相对路径内核行为物料material.setAssets/loadIncrementalAssets/onChangeAssetspackages/shell/src/api/material.ts委托 editor 写入资产包触发designer.incrementalAssetsReady插件plugins.register/plugins.get/plugins.deletepackages/shell/src/api/plugins.ts委托LowCodePluginManagerinit时注入插件上下文设置器setters.registerSetter/setters.getSetterpackages/shell/src/api/setters.ts维护 setter 注册表供设置面板按类型取值渲染上述三类配置扩展点外加操作辅助区定制构成了 lowcode-engine 编辑态扩展的完整入口面。仓库中的文档目录 docs/docs/guide/expand/editor 下还包含 CLI 生成cli.md、物料扩展material.md、主题定制theme.md等分册各 API 的完整签名见 docs/docs/api/index.md读者可沿着本文的调用链shell 代理层 → 内核模型层继续深入源码。【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考