lowcode-engine
lowcode-engine copied to clipboard
alibaba
动态加载自定义物料时，自动加载其附带的自定义setter
大佬好，请教下怎么在独立的一个物料工程里(类似 lowcode-materials) ，同时 【导出】自定义的setter 并使其伴随物料一起加载 不需要额外的setter加载代码，或者说大佬您推荐如何动态加载物料关联的自定义setter
尝试了一些方法
- 在物料库的index.tsx 文件中 使用如下代码
import * as React from "react";
import { ProFormDigit } from '@ant-design/pro-components'; // ProFormDigit 样式异常了
export default class CustomSetter extends React.PureComponent<any> {
static displayName = 'CustomSetter ';
render() {
return (
<ProFormDigit />
);
}
}
const registerSetter = window.top.AliLowCodeEngine.setters.registerSetter
registerSetter('CustomSetter', CustomSetter)
- 注册官方setter后面加入
// 注册官方的setterMap【低代码主应用】
setters.registerSetter(setterMap);
setters.registerSetter('CustomSetter', CustomSetter);
// 虽然可以使用 但没办法做到不更新低代码主应用的时候 动态加入新的物料和setter
- 期望setter可以像动态加载 assets一样 或者有近似的办法
在自定义物料库尝试了 const registerSetter = window.top.AliLowCodeEngine.setters.registerSetter registerSetter('CustomSetter', CustomSetter) 虽然组件能加载出来但是css丢失了 使用了antd5【 cssinjs】 却依然没有样式
已经尝试了下面几种办法 操作方式1 【css缺失，且弹框控件被局限在模拟器里面】 const registerSetter = window.top.AliLowCodeEngine.setters.registerSetter registerSetter('CustomSetter', CustomSetter) 操作方式2 【正常可用 但低代码主应用不支持动态加载自定义setter】 setters.registerSetter(setterMap); // 挂在官方setters setters.registerSetter('CustomSetter', CustomSetter); // 正常使用 操作方式3 【无法使用antd组件库】 自定义物料库 src同级文件夹lowcode下加入_setter
力皓大佬建议： 我建议就是在 plugin 去注册，在外层注册，把 setter 跟物料写在一起不太优雅，耦合了
- setter 是在外层使用，组件是在渲染器使用，没必要一起加载，然后强行再让部分css内部iframe生效，部分外部生效（我估计你也不好分开，混一起了）；
- simulator iframe的一大作用就是让渲染环境更纯碎，不被设计器相关的css影响，setter css强行混入干扰，算负向优化了；
力皓大佬的建议虽然能解决setter样式问题，但是低代码主应用不停机的情况下动态加载新增的自定义setter的问题依然存在，还望大佬们能指点一二
setter: CustomSetter,
如果是物料自定义的 setter，不是全局通用的，直接在使用到的物料配置 setter 的时候通过这种方法使用即可，没有必要再注册到全局。
如果必须要注册到全局，那就应该像是资产包一样，可以开发一个插件
1.找到这个资产包依赖的 setter， 2.请求 setter 的 js / css， 3.并使用 api 注入到全局。
不建议在物料代码里面再处理 setter。
首先 上面所说的setter是业务setter，属于强耦合类型，不是全局通用的 物料配置是说的meta.ts文件吗？ meta.js 引用不了src里面的组件
这块引擎上目前是没有处理的，你可以基于上面的思路扩展一下，主要还是将setter和物料分离，并且在适当的时候加载专属的setter，防止放全局影响资源 看了上面的解释 依然没法吧这个强耦合类型的setter进行分开 除非使用单仓多包 否则开发一个插件 要维护两套代码
但是单仓多包 开发一个插件依然是耦合的
@sy296565890
我理解你是想把 setter 列表放到资产包里，后面可以动态修改资产包里的 setter 数据，而不需要更新低代码应用的代码是吧；
我建议用资产包里的这个字段 AssetsExtConfig(这是扩展字段，你自己定义就行) ，把 setter 列表写在里面，然后在低代码主应用里获取这里的 setter 列表进行注册就行了。
你说的方案3其实也行，就是把 setter 写到 lowcode 目录下，最后打包进 meta.js 里，但是你说不能用 antd ，但是应该是可以的，我没验证过。不过这个确实不是推荐做法，这会导致 meta.js 比较大并且可能影响低代码主应用的样式。
由于antd v5 是cssinjs v4直接引入资源后可以通过【const { Button, InputNumber } = window.antd;】使用
v5也是可以使用的 但是有很多的问题，貌似不是最佳实践
import { createElement } from 'react';
import { ProFormDigit } from '@ant-design/pro-components';
import { InputNumber } from 'antd';
import { default as DigitalSignature } from './components/signature-digital'
window.okok = {
ProFormDigit, // 可以使用
InputNumber, // 可以使用
DigitalSignature // 不能使用
}
// export { ProFormDigit } from '@ant-design/pro-components';
// //@ts-ignore
const registerSetter = window.top.AliLowCodeEngine.setters.registerSetter
// setTimeout(() => {
// registerSetter('CustomSetter', CustomSetter)
// }, 0);
const NumberSetter2: React.FC<any> = () => {
const { Button, InputNumber } = antd;
// const {ProFormDigit} = ProComponents;
const aa = createElement(window.okok.ProFormDigit, {})
const bb = createElement(window.okok.DigitalSignature, {})
return (
<>
<Button>ssssssss</Button>
<InputNumber />
{/* <ProFormDigit /> */}
{aa}
{bb}
</>
)
}
v5也是可以使用的 但是有很多的问题，貌似不是最佳实践
import { createElement } from 'react'; import { ProFormDigit } from '@ant-design/pro-components'; import { InputNumber } from 'antd'; import { default as DigitalSignature } from './components/signature-digital' window.okok = { ProFormDigit, // 可以使用 InputNumber, // 可以使用 DigitalSignature // 不能使用 } // export { ProFormDigit } from '@ant-design/pro-components'; // //@ts-ignore const registerSetter = window.top.AliLowCodeEngine.setters.registerSetter // setTimeout(() => { // registerSetter('CustomSetter', CustomSetter) // }, 0); const NumberSetter2: React.FC<any> = () => { const { Button, InputNumber } = antd; // const {ProFormDigit} = ProComponents; const aa = createElement(window.okok.ProFormDigit, {}) const bb = createElement(window.okok.DigitalSignature, {}) return ( <> <Button>ssssssss</Button> <InputNumber /> {/* <ProFormDigit /> */} {aa} {bb} </> ) }
嗯，这样太 hack 了，如果带来的理解成本和研发成本大于把 setter 拆分出来，还是拆分出来的好，哈哈
是的 这样写太怪异了，拆出来的话可以使用lerna或pnpm 一仓多包的方式共享自定义组件部分的代码，但是如何动态引入呢 或者说 仅仅引入链接 可以做到自动 registerSetter(setterMap)吗
@sy296565890
我理解你是想把 setter 列表放到资产包里，后面可以动态修改资产包里的 setter 数据，而不需要更新低代码应用的代码是吧；
我建议用资产包里的这个字段
AssetsExtConfig(这是扩展字段，你自己定义就行) ，把 setter 列表写在里面，然后在低代码主应用里获取这里的 setter 列表进行注册就行了。
AssetsExtConfig 这个方便写个使用示例吗， 我的理解 Assets 仅仅只是json对象， 还是说渲染之前需要自定义解析一下这一段？
看看这个回复，我没有具体想好，可以类似这样：
// assets.json
{
packages: [],
components: [],
......
......
AssetsExtConfig: {
// 类似官方 setter 打包好的资源
setters: [
// 'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/css/engine-ext.css',
// 'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/js/engine-ext.js',
]
}
}
低代码应用获取到资产包里的 AssetsExtConfig.setters ，然后动态把这里的资源加到 html 里就行了，你可以试试
// assets.json { packages: [], components: [], ...... ...... AssetsExtConfig: { // 类似官方 setter 打包好的资源 setters: [ // 'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/css/engine-ext.css', // 'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/js/engine-ext.js', ] } }低代码应用获取到资产包里的 AssetsExtConfig.setters ，然后动态把这里的资源加到 html 里就行了，你可以试试
这个做法似乎是可行的，但是setter项目支持npm run dev吗，否则的话貌似不便于调试
@jinchanz 大佬 这一部分 这样加载可行吗？
var link = window.top.document.createElement('link');
link.rel = "stylesheet";
link.href = 'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/css/engine-ext.css';
window.top.document.head.appendChild(link);
var script = window.top.document.createElement('script');
script.src = 'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/js/engine-ext.js';
window.top.document.head.appendChild(script);
// lowCodeExternals
"@alilc/lowcode-engine-ext": "AliLowCodeEngineExt",
// "@alilc/lowcode-engine-ext": "window.AliLowCodeEngineExt",
//
import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext';
const { setterMap, pluginMap } = AliLowCodeEngineExt;
// const { setterMap, pluginMap } = window.AliLowCodeEngineExt;
// 注册setterMap
setters.registerSetter(setterMap);
感觉万变不离其宗，又回来了 哈哈
