低代码平台开发 - 编辑器拓展

设计器（编辑器）这边内容比较杂，我们这次挑两个讲，一个是自定义出码，一个是新版本引擎中 array-setter 存在的问题
这期和之前的文章关联性不大，可以直接在阿里的低代码引擎初始化的目录下进行，如何搭建阿里低代码引擎平台可以参考我之前的文章

阿里低代码引擎使用 - 项目启动 & 本地物料开发

题外话：无法使用 antd 组件 / antd 组件样式不生效

我们在设计器当中开发时想引入 antd 的组件，会发现 antd 的组件无法使用，或者样式不生效。目前我的解决办法是将 antd 包升到 5.x 版本。我本地使用的是 5.7.1

自定义出码

引擎自带的出码是基于 React 的，组件是类式组件，也就是用的 class。很多场景都无法满足。
不过本文的重点还是专注于熟悉如何使用低代码引擎，不会对出码功能本身做太详细的展开，这次就带着做一个非常简单的 HTML 结构的出码功能，非组件式的

在页面上添加自己的按钮

第一步，我们需要在设计器页面当中添加自己的按钮，也就是入口
官网中的介绍如下

插件拓展 - 面板拓展

我的想法是添加一个按钮，按钮单独打开一个面板，将一部分功能集合全塞在这里，所以我选择新建一个 layout 目录，然后创建我们的按钮

import { IPublicModelPluginContext } from '@alilc/lowcode-types';
import CustomerPanel from './customerPanel';	//	这是一个自定义的组件

// 保存功能示例
const CustomerLayout = (ctx: IPublicModelPluginContext) => {
  return {
    async init() {
      const { skeleton } = ctx;
      skeleton.add({
        name: 'CustomerLayout',
        area: 'leftArea',
        type: 'PanelDock',
        props: {
          align: 'right',
          icon: "wenjian",
          description: "自定义功能集合",
        },
        content: <CustomerPanel ctx={ctx} />,
        panelProps: {
          floatable: true, // 是否可浮动
          height: 300,
          hideTitleBar: false,
          maxHeight: 800,
          maxWidth: 1200,
          title: "自定义功能集合",
          width: 600,
        },
      });
    },
  };
}
CustomerLayout.pluginName = 'CustomerLayout';
CustomerLayout.meta = {
  dependencies: ['EditorInitPlugin'],
};
export default CustomerLayout;

这是我的目录结构

并不一定非要取名 layout，这个是完全取决于自己的，引擎并没有约定的目录结构。customerPanel 是自定义的组件，大家自由发挥，这个和写普通组件是完全一样的。
找到 src 目录下的 index，导入我们的按钮并且注册

···	// 省略部分代码
import CustomerLayout from './layout';
···	// 省略部分代码
await plugins.register(CustomerLayout);
···	// 省略部分代码

刷新页面，我们就能够看到我们添加的按钮，在左侧的导航栏中

点击会弹出一个面板，而面板当中的内容，就取决于你刚刚自定义的组件内容，这里我添加了一个按钮，并设置点击时会再弹出一个面板，而我们自定义显示的出码代码就会在这个面板当中，这个部分完全自由发挥，请大家自行完成。

确认出码逻辑

这一步我们确认出码逻辑，先了解一下官方自带的出码逻辑

出码模块设计

简单来讲，官方的出码是基于 schema 树的，这也是正确的做法，后续我们也会做相关的解析。这次暂时不做这么复杂的，我们做最简单的出码功能，不基于 schema，我们只把页面的 dom 树扒下来
我们随意拖几个组件进设计器，然后打开控制台，观察页面元素


可以看到，引擎把内容都放进了一个 iframe 中，在一个 id 为 app 的 dom 中
我们可以通过代码直接拿到 dom 树

const iframe = document.getElementsByClassName('lc-simulator-content-frame')[0]
// @ts-ignore
const domTree = iframe.contentWindow.document.getElementById('app');
const pageDom = domTree?.children[0];
const contentDom = (pageDom.cloneNode(true).children as Element[]);
const container = document.createElement('div');
container.append(...contentDom);
const domTreeHtml = container.innerHTML;

最后的 domTreeHtml 就是 dom 树了，要注意如果是容器组件的话，在容器组件中没有其他组件时，引擎会在容器组件中插入一个提示信息，就是下面这样

它的 dom 节点是这样的

因此我们直接拿 dom 树的话需要处理这个问题，直接遍历 dom 树清除就好了，可以参考下面的代码

const clearContainerDom = (elems: Element[]) => {
  Array.from(elems)
  for (const elem of Array.from(elems)) {
    if (elem.classList.contains('lc-container-placeholder')) {
      elem.parentElement?.removeChild(elem);
      continue;
    }
    if (elem.children.length > 0) {
      clearContainerDom((elem.children as unknown as Element[]));
    }
  }
}

然后在刚刚拿 dom 树的地方调用这个函数就行了

···	// 其他代码
clearContainerDom(contentDom);
const container = document.createElement('div');
container.append(...contentDom);

渲染 dom 代码

最后，展示我们的代码，这个网上的方案有很多，大家可以自行完成。我这边也从网上看到一个方案，大家可以参考
首先格式化 dom 代码的内容就不展示了，大家自行在网上查找解决方案
推荐大家使用 highlight.js 作为染色方案

import hljs from 'highlight.js/lib/common';

const target = hljs.highlightAuto(格式化后的dom代码, ['html']).value;

在 React 中，我们可以通过下面的方式将我们的 dom 放进元素当中

import React, { useRef, useState } from 'react';

···
const contentDom = useRef<HTMLPreElement>(null!);
···

const target = hljs.highlightAuto(text, ['html']).value;	// 这是刚才的代码
contentDom.current.innerHTML = target;

···
<pre className='customer-code-pre'>
  <code className='customer-code-block hljs language-html' ref={contentDom}></code>
</pre>
···

我们可以直接在样式中指定对应 class 的颜色

.hljs-tag,
.hljs-keyword,
.hljs-selector-tag,
.hljs-attr,
.hljs-literal,
.hljs-strong,
.hljs-name {
  color: #f92672;
}

.hljs-string,
.hljs-bullet,
.hljs-subst,
.hljs-title,
.hljs-section,
.hljs-emphasis,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
  color: #a6e22e;
}

最后简单展示下效果

渲染代码和引擎基本没啥关系了，所以过的很快，如果有疑问可以留言

解决 array-setter 的问题

再补充一点目前引擎存在的问题，要讲这个需要结合物料库的内容（什么是物料库可以参考官方文档，或者我之前的文章）

问题描述

当我们设置一个组件的某个属性是数组类型时，我们可以在设计器当中添加这个数组的元素
比如下面这个组件

export interface AntdSelectProps {
  /**
   * 选项
   * @componentName NewArraySetter
   */
  options: {label: string, value: string}[]
}

const AntdSelect: React.FC<AntdSelectProps> = ({
  options = []
}) => {
  return (
  <select>
    <option value="">请选择</option>
    {
      options?.length > 0 &&
      options.map((item, index) => {
        return <option key={index} value={item.value}>{item.label}</option>
      })
    }
  </select>
  )
}

这是一个下拉框组件，它的下拉选项由传入的 options 属性决定
它在设计器当中是这样的

注意右侧的添加属性
我们点击后可以添加下拉选项

这是正常的效果，但是在最近几个版本当中，会出现问题

当我们添加一个选项之后再次点击，就会报错并且无法再次添加内容
我使用的引擎版本

"@alilc/lowcode-engine": "1.2.3",
"@alilc/lowcode-engine-ext": "1.0.6-beta.19",

这个问题查官方的 git 下面提了不少

解决办法

如果你本地跑起物料库的服务时，会发现在物料库自带的设计器当中并不存在这个问题，那么我的解决办法也非常简单，添加一个新的设置器替代现版本的 array-setter 设置器，而代码就来自物料库当中的 array-setter 代码
有点绕，我们看具体怎么做就行，回到我们设计器的目录下，新建一个 setters 目录，添加一个 new-array-setter.tsx
我们把物料库的服务跑起来，找到 array-setter 的代码位置：

webpack://AliLowCodeEngineExt/src/setter/array-setter/index.tsx

我们拷贝所有代码复制当我们刚刚的 new-array-setter.tsx，解决掉部分依赖和路径问题，最后修改成下面的代码

import * as React from 'react';
import { Component, Fragment } from 'react';
import { common } from '@alilc/lowcode-engine';
import { Button, Message } from '@alifd/next';
import { IPublicModelSettingField, IPublicTypeSetterType, IPublicTypeFieldConfig, IPublicTypeSetterConfig } from '@alilc/lowcode-types';
import CustomIcon from '@alilc/lowcode-engine-ext/es/components/custom-icon';
import Sortable from '@alilc/lowcode-engine-ext/es/setter/array-setter/sortable';
// import './style.less';
const { editorCabin, skeletonCabin } = common;
const { Title } = editorCabin;
const { createSettingFieldView, PopupContext } = skeletonCabin;

interface ArraySetterState {
  items: IPublicModelSettingField[];
}

/**
 * onItemChange 用于 ArraySetter 的单个 index 下的数据发生变化，
 * 因此 target.path 的数据格式必定为 [propName1, propName2, arrayIndex, key?]。
 *
 * @param target
 * @param value
 */
function onItemChange (target: IPublicModelSettingField, items: IPublicModelSettingField[], props: ArraySetterProps) {
  const targetPath: Array<string | number> = target?.path;
  if (!targetPath || targetPath.length < 2) {
    console.warn(
      `[ArraySetter] onItemChange 接收的 target.path <${
        targetPath || 'undefined'
      }> 格式非法需为 [propName, arrayIndex, key?]`,
    );
    return;
  }
  const { field, value: fieldValue } = props;
  // const { items } = this.state;
  const { path } = field;
  if (path[0] !== targetPath[0]) {
    console.warn(
      `[ArraySetter] field.path[0] !== target.path[0] <${path[0]} !== ${targetPath[0]}>`,
    );
    return;
  }
  try {
    const index = +targetPath[targetPath.length - 2];
    if (typeof index === 'number' && !isNaN(index)) {
      fieldValue[index] = items[index].getValue();
      field?.extraProps?.setValue?.call(field, field, fieldValue);
    }
  } catch (e) {
    console.warn('[ArraySetter] extraProps.setValue failed :', e);
  }
};

interface ArraySetterProps {
  value: any[];
  field: IPublicModelSettingField;
  itemSetter?: IPublicTypeSetterType;
  columns?: IPublicTypeFieldConfig[];
  multiValue?: boolean;
  hideDescription?: boolean;
  onChange?: Function;
  extraProps: {renderFooter?: (options: ArraySetterProps & {onAdd: (val?: {}) => any}) => any}
}

export class ListSetter extends Component<ArraySetterProps, ArraySetterState> {
  state: ArraySetterState = {
    items: [],
  };

  private scrollToLast = false;

  constructor(props: ArraySetterProps) {
    super(props);
  }

  static getDerivedStateFromProps(props: ArraySetterProps, state: ArraySetterState) {
    const items: IPublicModelSettingField[] = [];
    const { value, field } = props;
    const valueLength = value && Array.isArray(value) ? value.length : 0;

    for (let i = 0; i < valueLength; i++) {
      let item = state.items[i];
      if (!item) {
        item = field.createField({
          name: i.toString(),
          setter: props.itemSetter,
          forceInline: 1,
          type: 'field',
          extraProps: {
            defaultValue: value[i],
            setValue: (target: IPublicModelSettingField) => {
              onItemChange(target, items, props);
            },
          },
        });
      }
      items.push(item);
    }

    return {
      items,
    };
  }

  onSort(sortedIds: Array<string | number>) {
    const { onChange, value: oldValues } = this.props;
    const { items } = this.state;
    const values: any[] = [];
    const newItems: IPublicModelSettingField[] = [];
    sortedIds.map((id, index) => {
      const item = items[+id];
      item.setKey(index);
      values[index] = oldValues[id as number];
      newItems[index] = item;
      return id;
    });
    this.setState({
      items: newItems,
    });
    onChange?.(values);
  }

  onAdd(newValue?: {[key: string]: any}) {
    const { itemSetter, field, onChange, value = [] } = this.props;
    const values = value || [];
    const initialValue = (itemSetter as any)?.initialValue;
    const defaultValue = newValue ? newValue : (typeof initialValue === 'function' ? initialValue(field) : initialValue);
    values.push(defaultValue);
    this.scrollToLast = true;
    onChange?.(values);
  }

  onRemove(removed: IPublicModelSettingField) {
    const { onChange, value } = this.props;
    const { items } = this.state;
    const values = value || [];
    let i = items.indexOf(removed);
    items.splice(i, 1);
    values.splice(i, 1);
    const l = items.length;
    while (i < l) {
      items[i].setKey(i);
      i++;
    }
    removed.remove();
    const pureValues = values.map((item: any) => typeof(item) === 'object' ? Object.assign({}, item):item);
    onChange?.(pureValues);
  }

  componentWillUnmount() {
    this.state.items.forEach((field) => {
      field.purge();
    });
  }

  render() {
    const { hideDescription, extraProps = {} } = this.props;
    const { renderFooter } = extraProps;
    let columns: any = null;
    const { items } = this.state;
    const { scrollToLast } = this;
    this.scrollToLast = false;
    if (this.props.columns) {
      columns = this.props.columns.map((column) => (
        <Title key={column.name} title={column.title || (column.name as string)} />
      ));
    }

    const lastIndex = items.length - 1;

    const content =
      items.length > 0 ? (
        <div className="lc-setter-list-scroll-body">
          <Sortable itemClassName="lc-setter-list-card" onSort={this.onSort.bind(this)}>
            {items.map((field, index) => (
              <ArrayItem
                key={index}
                scrollIntoView={scrollToLast && index === lastIndex}
                field={field}
                onRemove={this.onRemove.bind(this, field)}
              />
            ))}
          </Sortable>
        </div>
      ) : (
        <div className="lc-setter-list-notice">
          {this.props.multiValue ? (
            <Message type="warning">当前选择了多个节点，且值不一致，修改会覆盖所有值</Message>
          ) : (
            <Message type="notice" size="medium" shape="inline">
              暂时还没有添加内容
            </Message>
          )}
        </div>
      );

    return (
      <div className="lc-setter-list lc-block-setter">
        {!hideDescription && columns && items.length > 0 ? (
          <div className="lc-setter-list-columns">{columns}</div>
        ) : null}
        {content}
        <div className="lc-setter-list-add">
          {
            !renderFooter ? (
              <Button text type="primary" onClick={() => {
                this.onAdd()
              }}>
                <span>添加一项 +</span>
              </Button>
            ) : renderFooter({...this.props, onAdd: this.onAdd.bind(this),})
          }
        </div>
      </div>
    );
  }
}
class ArrayItem extends Component<{
  field: IPublicModelSettingField;
  onRemove: () => void;
  scrollIntoView: boolean;
}> {
  private shell?: HTMLDivElement | null;

  componentDidMount() {
    if (this.props.scrollIntoView && this.shell) {
      this.shell.parentElement!.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
  }

  render() {
    const { onRemove, field } = this.props;
    return (
      <div
        className="lc-listitem"
        ref={(ref) => {
          this.shell = ref;
        }}
      >
        <div className="lc-listitem-body">{createSettingFieldView(field, field.parent)}</div>
        <div className="lc-listitem-actions">
          <Button size="small" ghost="light" onClick={onRemove} className="lc-listitem-action">
            <CustomIcon type="icon-ic_delete" />
          </Button>
          <Button draggable size="small" ghost="light" className="lc-listitem-handler">
            <CustomIcon type="icon-ic_drag" />
          </Button>
        </div>
      </div>
    );
  }
}

class TableSetter extends ListSetter {
  // todo:
  // forceInline = 1
  // has more actions
}

export default class ArraySetter extends Component<{
  value: any[];
  field: IPublicModelSettingField;
  itemSetter?: IPublicTypeSetterType;
  mode?: 'popup' | 'list';
  forceInline?: boolean;
  multiValue?: boolean;
}> {
  static contextType = PopupContext;

  private pipe: any;

  render() {
    const { mode, forceInline, ...props } = this.props;
    const { field, itemSetter } = props;
    let columns: IPublicTypeFieldConfig[] | undefined;
    if ((itemSetter as IPublicTypeSetterConfig)?.componentName === 'ObjectSetter') {
      const items: IPublicTypeFieldConfig[] = (itemSetter as any).props?.config?.items;
      if (items && Array.isArray(items)) {
        columns = items.filter(
          (item) => item.isRequired || item.important || (item.setter as any)?.isRequired,
        );
        if (columns.length > 4) {
          columns = columns.slice(0, 4);
        }
      }
    }

    if (mode === 'popup' || forceInline) {
      const title = (
        <Fragment>
          编辑：
          <Title title={field.title} />
        </Fragment>
      );
      if (!this.pipe) {
        let width = 360;
        if (columns) {
          if (columns.length === 3) {
            width = 480;
          } else if (columns.length > 3) {
            width = 600;
          }
        }
        this.pipe = this.context.create({ width });
      }

      this.pipe.send(<TableSetter key={field.id} {...props} columns={columns} />, title);
      return (
        <Button
          type={forceInline ? 'normal' : 'primary'}
          onClick={(e) => {
            this.pipe.show((e as any).target, field.id);
          }}
        >
          <CustomIcon type="icon-bianji" size="small" />
          {forceInline ? title : '编辑数组'}
        </Button>
      );
    } else {
      return <ListSetter {...props} columns={columns?.slice(0, 4)} />;
    }
  }
}

然后就是注册这个设置器，我们找到 src\plugins\plugin-custom-setter-sample\index.tsx

import { IPublicModelPluginContext } from '@alilc/lowcode-types';
import NewArraySetter from 'src/setters/new-array-setter';

// 保存功能示例
const CustomSetterSamplePlugin = (ctx: IPublicModelPluginContext) => {
  return {
    async init() {
      const { setters } = ctx;

      setters.registerSetter('NewArraySetter', NewArraySetter);
    },
  };
}
CustomSetterSamplePlugin.pluginName = 'CustomSetterSamplePlugin';
export default CustomSetterSamplePlugin;

这里清除了没用的代码，如果拿不准不删除也是完全没问题的
最后就是怎样使用我们新建的设置器，回到物料库，找到对应组件的描述文件：lowcode/xxx/meta.ts

在此处指名要使用到的设置器即可

如果是跟着我物料库的文章做下来的，那更简单，直接在对应组件属性的注释当中声明即可

需要注意，之前的逻辑下必须要在 inject.config.js 配置了对应的组件才行，可以简单配置 group 或者 category 就能看到效果