@ztocwst/wc-lowcode-renderer

低代码 web components 渲染组件 web-lowcoder

项目需引入 web components 脚本：https://npm.ztocwst.com/@ztocwst/wc-lowcode-renderer@latest/dist/wc-lowcode-renderer.min.js

Usage

以下资源按需引入

<!-- 必须 -->
<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>

To HTML

直接使用

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

To Vue

TODO demo

To React

建议直接使用低代码组件，本身支持 react 组件，无需使用 web components

useEffect(() => {
  const ele = document.getElementById('lc');
  ele.setAttribute('return-props', 'returnProps');
}, []);

return <web-lowcoder id="lc"></web-lowcoder>;

Options

推荐直接使用 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 | 引擎里的帮助配置 |

Development

# 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 doctor

LICENSE

MIT