优维低代码：构件编辑器开发

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。

连载第四十一期

《高级指引：构件编辑器开发》

▽

构件编辑器是用于可视化编排中，实时展示特定构件的低保真线框图的构件。每个构件对应一个构件编辑器，没有编写编辑器的构件则将使用一个默认的基本编辑器。

本文以basic-bricks.general-button 的构件编辑器的开发为例，介绍一个构件编辑器的开发过程。

# 新增一个构件编辑器

1. 在相关的构件仓库中运行 yarn yo；
2. 选择 a new editor brick ；
3. 选择对应的构件包 basic-bricks（可按关键字搜索）；
4. 选择对应的构件 general-button（可按关键字搜索）。

该构件编辑器的相关初始代码就已生成。

# 启动本地打包和服务

1. 启动构建编辑器的开发模式打包：lerna run start:editors --scope @next-bricks/basic-bricks；
2. 启动本地服务：yarn serve --local-editors basic-bricks；
3. 打开本地调试页面：​​http://localhost:8081/​​。

⊙ NOTE

注意：虽然构件和构件编辑器都在构件包中维护，但它们的打包是相互独立的，因此不要试图在构件和构件编辑器之间共享代码。

# 开发

初始化的构件编辑器仅展示一个非常原始的方框和构件别名，而一个好的构件编辑器应该能通过读取它的属性配置来展示该构件的关键 UI 特征。

对于 general-button 这个构件来说，它的关键特征有两个：按钮显示的文本和按钮的类型样式。

因此我们修改 general-button.editor.tsx：

export function GeneralButtonEditor({
  nodeUid,
  brick,
}: EditorComponentProps): React.ReactElement {
  const node = useBuilderNode<GeneralButtonProperties>({ nodeUid });
  // 通过 `node.$$parsedProperties` 读取构件的属性配置。
  const { buttonName, buttonType } = node.$$parsedProperties;


  return (
    <EditorContainer nodeUid={nodeUid} brick={brick}>
      <div
        className={classNames(styles.button, {
          [styles.primary]: buttonType === "primary",
        })}
      >
        {buttonName || node.alias}
      </div>
    </EditorContainer>
  );
}

代码修改后，本地调试页面会自动刷新，这时试试在编排中修改该构件的相关属性配置，看看效果。

⊙ NOTE

注意：构件编辑器和普通构件一样使用 CSS Modules 编写样式。另外，别忘了编写单元测试。