lowcode-engine 接入运行时指南在 React 应用中渲染编辑器产出的低代码页面【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine本篇聚焦 lowcode-engine 生产链路的最后一环——“接入运行时”先讲清编辑器产出的两份数据资产包 assets 与页面数据 schema再给出渲染模块alilc/lowcode-react-renderer从数据转换到ReactRenderer落屏的完整操作路径并结合仓库内packages/react-renderer与packages/renderer-core的源码深入解析 Props 参数、根组件校验、异常兜底等实现细节读完即可在自己的 React 工程中消费低代码产出的页面。编辑器产出assets 与 schema 两份数据低代码引擎的编辑器将产出两份数据资产包数据 assets包含物料名称、包名及其获取方式对应协议中的《低代码引擎资产包协议规范》详见 assets-spec.md页面数据 schema包含页面结构信息、生命周期和代码信息对应协议中的《低代码引擎搭建协议规范》详见 lowcode-spec.md。拿到这两份数据后可以直接交由渲染模块或出码模块来运行二者的区别在于方案运行时依赖后续维护方式限制渲染模块依赖资产包数据、页面数据和低代码运行时允许维护者继续用低代码LowCode的方式在编辑器中维护运行时需要加载低代码运行时出码模块不依赖低代码运行时和页面数据直接生成可运行的代码允许维护者用源码ProCode的方式继续维护无法再利用低代码编辑器即渲染模块保留了“低代码可维护性”出码模块则把产物落到标准工程代码里走常规研发流程。渲染模块数据转换规则渲染模块所需要的数据需要经过编辑器产出数据的一定转换规则如下schema从编辑器产出的projectSchema中拿到componentsTree中的首项即projectSchema.componentsTree[0]components根据编辑器产出的资产包assets中、页面projectSchema声明依赖的componentsMap加载所有依赖的资产包最后获取资产包的实例并生成“物料 - 资产包”的键值对components。这个过程在官方 Demo 项目的src/preview.tsx中有完整实现核心逻辑如下async function getSchemaAndComponents() { const packages JSON.parse(window.localStorage.getItem(packages) || ); const projectSchema JSON.parse(window.localStorage.getItem(projectSchema) || ); const { componentsMap: componentsMapArray, componentsTree } projectSchema; const componentsMap: any {}; componentsMapArray.forEach((component: any) { componentsMap[component.componentName] component; }); const schema componentsTree[0]; const libraryMap {}; const libraryAsset []; packages.forEach(({ package: _package, library, urls, renderUrls }) { libraryMap[_package] library; if (renderUrls) { libraryAsset.push(renderUrls); } else if (urls) { libraryAsset.push(urls); } }); const vendors [assetBundle(libraryAsset, AssetLevel.Library)]; const assetLoader new AssetLoader(); await assetLoader.load(libraryAsset); const components await injectComponents(buildComponents(libraryMap, componentsMap)); return { schema, components, }; }这段代码对应的关键步骤可以拆解为四步解析编辑器产物packages资产包列表与projectSchema页面数据通常由编辑器保存接口下发Demo 中通过localStorage模拟持久化构造 componentsMap将projectSchema.componentsMap数组转成{ componentName: 物料描述 }的映射它是“页面声明了哪些物料”的清单加载资产包遍历packages把每个包的renderUrls优先或urls收集进libraryAsset通过AssetLoader.load()动态加载这些 JS 资源再把包内导出的组件实例与物料描述buildComponents/injectComponents合并得到最终的components对象返回渲染入参{ schema, components }即ReactRenderer的两个核心 Props。提示资产包的renderUrls是专为“运行时渲染”准备的产物urls则是编辑器搭建期产物Demo 代码中“优先取 renderUrls”正是这个原则的体现。渲染模块使用 ReactRenderer 落屏拿到schema和components后即可在 React 上下文中完成页面渲染import React from react; import ReactRenderer from alilc/lowcode-react-renderer; const SamplePreview () { return ( ReactRenderer schema{schema} components{components} / ); }两点说明此处依赖 React 进行渲染。对 Vue 形态的渲染或编辑器支持官方曾以 issue 形式跟进讨论见 lowcode-engine 仓库的 issue 列表当前仓库内落地的是 React 实现仓库内的 packages/react-renderer/demo 目录提供了 compose、dataSource、i18n、list、table 五类可运行的演示场景每个场景都配有schemas/*.js页面数据与说明文档可用作schema参数的参考样例。仓库内实现ReactRenderer 是怎么注册运行时的官方渲染模块的包名是alilc/lowcode-react-renderer对应源码在 packages/react-renderer/src/index.ts。从源码结构看这个包本身非常薄核心工作是给框架无关的alilc/lowcode-renderer-core注入 React 运行时adapter.setRuntime({ Component, PureComponent, createContext, createElement, forwardRef, findDOMNode: ReactDOM.findDOMNode, }); adapter.setRenderers({ PageRenderer: pageRendererFactory(), ComponentRenderer: componentRendererFactory(), BlockRenderer: blockRendererFactory(), AddonRenderer: addonRendererFactory(), TempRenderer: tempRendererFactory(), DivRenderer: blockRendererFactory(), }); adapter.setConfigProvider(ConfigProvider);这里有三层含义setRuntime把 React 的Component、createElement等 API 交给 renderer-core 的 adapterrenderer-core 由此与具体框架解耦这也是引擎“可扩展到其他 UI 框架”的适配点setRenderers注册了 6 个内置渲染器分别对应 schema 中Page、Component、Block、Addon、Temp等根/容器类型。注意DivRenderer直接复用了blockRendererFactory()这与运行时对根组件“兼容乐高区块模板Div”的校验逻辑相呼应setConfigProviderReact 版本使用 Fusion 的ConfigProvider来自alifd/next包裹渲染产物用于注入locale与device等配置这也解释了 packages/react-renderer/package.json 中对alifd/next的运行时依赖。最后导出的ReactRenderer由rendererFactory()生成的Renderer类派生并覆盖了isValidComponent通过isReactComponent或instanceof Component判定一个导出物是否为合法 React 组件保证components中混入非组件对象时的行为可控。根组件校验与异常兜底renderer-core 的 renderer.tsx 定义了所有渲染器共享的入口类Renderer其中有几处与“接入运行时”直接相关的行为根组件白名单校验renderer.tsx#L144-L147// 兼容乐高区块模板 if (schema.componentName ! Div !isFileSchema(schema)) { logger.error(The root component name needs to be one of Page、Block、Component, please check the schema: , schema); return 模型结构异常; }也就是说传入ReactRenderer schema{...} /的根节点componentName必须是Page、Block、Component或兼容的Div否则渲染模块会直接输出“模型结构异常”。这正好印证了上文“schema 取componentsTree[0]”的必要性——根节点就是编辑器产出的文件级 schema。错误与缺失组件兜底renderer.tsx#L22-L48渲染过程中抛出异常时componentDidCatch会记录engineRenderError随后渲染faultComponent可通过faultComponent/faultComponentMap自定义默认是一个红框提示“组件渲染异常请查看控制台日志”schema 中引用了components里不存在的物料时会渲染NotFoundComponent默认以容器组件包裹占位文案若开启enableStrictNotFoundMode则只输出纯文本Component Not Found不再兜底容器。组件解析顺序renderer.tsx#L125-L136查找组件时业务传入的components会覆盖同名内置渲染器{ ...RENDERER_COMPS, ...components }同时支持${componentName}Renderer这种内置渲染器的回退查找。ReactRenderer 的 Props 全量说明官方文档示例只展示了schema与components两个最小可用入参。完整的 Props 定义位于 renderer-core 的类型声明 types/index.ts#L96-L182 中的IRendererProps结合 renderer.tsx#L57-L66 的defaultProps整理如下Prop类型 / 取值默认值说明schemaIPublicTypeRootSchema \| IPublicTypeNodeSchema{}符合低代码搭建协议的页面数据根节点须为 Page/Block/Component或 DivcomponentsRecordstring, IGeneralComponent{}“物料名 → 组件实例”的键值对即上文数据转换的最终产物className/style/idstring/CSSProperties/string \| number-渲染模块最外层容器的样式与 idlocalestring-语言配合 ConfigProvider 生效messagesRecordstring, any-多语言语料配置规范见搭建协议中的国际化部分appHelperIRendererAppHelperundefined渲染模块全局上下文其中定义的内容可在低代码代码中通过this访问componentsMap{ [key: string]: any }-物料描述映射主要在搭建场景使用生产环境不需要设置designModelive \| design等设计模式标识suspendedbooleanfalse渲染模块是否挂起为true时最外层容器的shouldComponentUpdate始终返回false用于下钻编辑或多引擎渲染场景onCompGetRef(schema, ref) void() {}组件获取 ref 时的钩子onCompGetCtx(schema, ref) void() {}组件 ctx 更新回调getSchemaChangedSymbol/setSchemaChangedSymbol() boolean/(symbol) void-用于外部标记 schema 是否变更customCreateElement(Component, props, children) any原生createElement自定义创建 element 的钩子rendererNameLowCodeRenderer \| PageRenderer \| string-标识当前模块的渲染类型notFoundComponentIGeneralComponent内置占位组件找不到组件时的替代渲染faultComponent/faultComponentMapIGeneralComponent/Recordstring, IGeneralComponent内置红框提示组件渲染异常时的替代渲染devicestring-设备信息透传给 ConfigProviderthisRequiredInJSEbooleantrueJSExpression 是否只支持使用this访问上下文变量enableStrictNotFoundModebooleanfalse开启后找不到组件时不再兜底默认容器组件其中appHelper的类型IRendererAppHelpertypes/index.ts#L62-L89值得单独关注它允许注入utils全局公共函数、constants全局常量、location/historyreact-router 实例等schema 中的JSFunction/JSExpression代码即可通过this.utils、this.location等访问到它们——这是把低代码页面接入宿主应用路由和工具链的关键通道。designMode与suspended两个参数则主要服务于“编辑器内二次渲染”场景如区块下钻编辑纯生产环境接入时可以忽略。测试与 Demo如何验证你的接入仓库自带了可参考的最小用例与快照测试tests/index.test.tsx构造一份包含Box、Breadcrumb、Form、Table、Dialog等 Fusion 组件的components映射配合 tests/fixtures/schema/basic.ts 的页面 schema直接渲染ReactRenderer schema{schema} components{components} /并对输出做 snapshot 断言该 fixture schema 覆盖了页面级dataSource、state、css、lifeCycles、methods以及JSFunction如onClick、JSExpression如 Dialog 的visible: { type: JSExpression, value: this.state.isShowDialog }等典型低代码特性可作为校验“运行时是否正确执行了生命周期与代码块”的参考样本demo 目录下的compose、dataSource、i18n、list、table五组场景则对应了组合渲染、数据源、国际化、列表与表格等更贴近业务的使用面每组场景均提供独立的schemas/*.js数据文件。接入自己的工程时建议按“先跑通 basic 级别 fixture → 再对照 demo 场景逐项验证数据源/事件/多语言”的顺序做回归。出码模块ProCode 路线与渲染模块相对出码模块不依赖低代码运行时和页面数据直接生成可独立运行的工程代码。本仓库中的 modules/code-generator 即出码模块的完整实现其 solutions 目录提供了 icejs、icejs3、rax-app 三类目标工程形态的解决方案对应icejs.ts、icejs3.ts、rax-app.ts并配套了覆盖 i18n、缺失 import、页面映射等场景的回归测试见 modules/code-generator/tests/bugfix。两条路线的选择建议与文档结论一致需要保留低代码编辑能力、资产可动态下发时走渲染模块需要把产物沉淀为标准源码工程、纳入常规 CI/CR 流程时走出码模块。低代码的生产与消费流程总览经过“接入编辑器”与“接入运行时”两节低代码的完整生产消费链路可以概括为生产侧维护者在低代码编辑器中搭建页面编辑器产出projectSchema页面数据与assets资产包存储侧一般需要一个后端项目来保存页面数据信息如果资产包信息是动态的也需要一并保存资产包信息消费侧渲染模块运行页拉取projectSchema与assets按前文规则转换为schemacomponents交给ReactRenderer借助低代码运行时渲染并允许随时回到编辑器继续维护消费侧出码模块将projectSchema交给 code-generator 生成标准工程代码进入常规源码维护流程。渲染模块packages/react-rendererpackages/renderer-core与出码模块modules/code-generator是这份产物图的唯一两个出口二者共享同一套 schema/assets 协议这也是 lowcode-engine 生产链路与消费链路能够解耦的前提。【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考