低代码 web components 渲染组件 web-lowcoder
项目需引入 web components 脚本：https://npm.ztocwst.com/@ztocwst/wc-lowcode-renderer@latest/dist/wc-lowcode-renderer.min.js
以下资源按需引入
<!-- 必须 -->
<script src="https://gw.alipayobjects.com/os/lib/??react/17.0.2/umd/react.production.min.js,react-dom/17.0.2/umd/react-dom.production.min.js,moment/2.29.1/min/moment.min.js,moment/2.29.1/locale/zh-cn.js"></script>
<!-- 必须 -->
<script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
<!-- 必须 -->
<script src="https://g.alicdn.com/platform/c/??react15-polyfill/0.0.1/dist/index.js,lodash/4.6.1/lodash.min.js"></script>
<script src="https://at.alicdn.com/t/c/font_3051356_3i3m3gd18.js"></script>
<script src="https://g.alicdn.com/code/npm/@ali/ant-design-icons-cdn/4.5.0/index.umd.min.js"></script>
<script src="https://g.alicdn.com/code/lib/antd/4.22.3/antd.min.js"></script><web-lowcoder id="lc"></web-lowcoder>
<script>
function filterScripts(assets, keywords) {
function recursiveFilter(arr) {
return arr
.map((e) => {
if (Array.isArray(e)) {
return e.filter((k) => {
return !keywords.find((x) => k.includes(x));
});
}
if (keywords.find((v) => !v.includes(e))) {
return e;
}
return '';
})
.filter((e) => e.length);
}
return recursiveFilter(assets);
}
const filterLibraryCallback = (assets) => {
return filterScripts(assets, [
'moment',
'font_',
'@ant-design/icons',
'lodash.min',
'alifd__next',
// 'antd-materials',
// 'rc-pro-materials',
]);
};
const returnProps = () => {
return {
filterLibraryCallback,
packages,
projectSchema,
locale: 'en-US',
loading: React.createElement(
'div',
{
className: 'loading',
style: { marginTop: '100px', textAlign: 'center' },
},
'Loading...',
),
};
};
const lc = document.getElementById('lc');
lc.setAttribute('return-props', 'returnProps');
</script><script>
// ...同上
const ele = document.createElement('web-lowcoder');
// props直接挂到节点属性上
ele.returnProps = returnProps;
// 或者setAttribute方法来设置，注意方法名必须挂在window上
// _ele.setAttribute('return-props', 'returnProps');
document.body.appendChild(ele);
</script>TODO demo
建议直接使用低代码组件，本身支持 react 组件，无需使用 web components
useEffect(() => {
const ele = document.getElementById('lc');
ele.setAttribute('return-props', 'returnProps');
}, []);
return <web-lowcoder id="lc"></web-lowcoder>;推荐直接使用 returnProps 函数设置 props, 由于 html 传递 props 时复杂对象无法传递，所以需要设置 returnProps 函数来设置 props，其他参数详见低代码渲染器
| name | type | default | description |
|---|---|---|---|
| returnProps | function | null | 设置 props 的函数 |
| empty | node、ReactNode 、string | 暂无数据 | 数据为空显示内容 |
| loading | node、ReactNode 、string | loading... | 加载中组件 |
| packages | json | null | 低代码包 |
| projectSchema | json | null | 低代码项目 |
| locale | string | 'zh-CN' | 语言 |
| filterLibraryCallback | function | null | 过滤低代码包 |
| appHelper | json | null | 引擎里的帮助配置 |
# install dependencies
$ yarn install
# develop library by docs demo
$ yarn start
# build library source code
$ yarn run build
# build library source code in watch mode
$ yarn run build:watch
# build docs
$ yarn run docs:build
# Locally preview the production build.
$ yarn run docs:preview
# check your project for potential problems
$ yarn run doctorMIT