【Web3】Remix(Ethereum IDE) 插件之 solidity-uml-gen，动手搓基建

前阵子在啃Remix的源代码，在给official-remix贡献代码。给自己留下一些记录，方便今后回来查找和阅读，也是另一种整理。

官方简介: Remix Ethereum IDE 是一个基于 Web 的集成开发环境（IDE），专门用于智能合约的开发、调试和部署。它是以太坊区块链上智能合约的一个流行开发工具，由以太坊社区开发和维护。Remix 提供了一个用户友好的界面，允许开发者在浏览器中编写、测试和优化智能合约代码。

使用 Remix，开发者可以通过简单的图形化界面编写 Solidity 智能合约代码，并且可以在 IDE 中进行实时编辑和调试。它还提供了丰富的工具和功能，如代码自动补全、代码静态分析、合约部署、交易模拟等，帮助开发者更高效地进行以太坊智能合约的开发和调试。

Remix 是一个非常有用的工具，尤其对于初学者和中级开发者来说，它简化了智能合约开发的复杂性，并提供了一个便捷的方式来学习和探索以太坊区块链技术。同时，它也受到了以太坊开发社区的广泛支持和认可。

尽管Remix因为历史遗留问题，导致整体的结构和一些地方写得不够好，但瑕不掩瑜。现在只要是写Solidity，基本都会用到这个: official-remix

Remix 预览：

Remix UML 预览:

注意:

本文只涉及插件solidity-uml-gen, 其他插件不在本文讨论范围内。在了解该插件后，可以自定义增加新的插件
不涉及下层但 sol2UML 的逻辑，只涉及插件的使用。实际上 sol2UML 写得并不好，整体流程无非就是: cst, ast, IR, render
不涉及 Monaco 或者其他 IDE 逻辑。因为Remix使用了大量的 Event、 Reducer, 要一一来讲，篇幅太长，也不是本文的重点。尤其是 NX 的 dev，其实我是非常不满的。

梗概:

Remix
- 插件的结构
- 目录结构
插件的使用
- 注册
- 调用
插件的实现
- 代码
- 流程

Remix

目录结构:

bash 复制代码

.
├── CONTRIBUTING.md
├── Dockerfile
├── Dockerfile.dev
├── LICENSE
├── README.md
├── apps
├── automation.md
├── babel.config.js
├── build-changelog.js
├── build-qa-doc.js
├── build.yaml
├── crowdin.yml
├── dist
├── docker-compose.yaml
├── gulpfile.js
├── lerna.json
├── libs
├── lint-fix-targets.js
├── node_modules
├── nodemon.json
├── nx.json
├── package.json
├── release-management.md
├── release-process.md
├── team-best-practices.md
├── tmp
├── tsconfig.base.json
├── tsconfig.json
├── tsconfig.paths.json
├── yarn-error.log
└── yarn.lock

5 directories, 26 files

Remix 是一个Monorepo，使用Nx管理。旧版本和新版本差别很大，不再赘述，有需要单独开一篇NX的文章。

apps: 项目的主要代码, 显示、插件调用、代码格式化等都在此。我们可以把它看作是Remix的render层，也就是"前端"代码
libs: 项目的核心代码，包括Remix的核心逻辑、插件的核心逻辑等。我们可以把它看作是Remix的core层，也就是"后端"代码
其他不重要，暂且放过

libs 的目录结构:

bash 复制代码

.
├── README.md
├── ghaction-helper
├── remix-analyzer
├── remix-astwalker
├── remix-core-plugin
├── remix-debug
├── remix-lib
├── remix-simulator
├── remix-solidity
├── remix-tests
├── remix-ui
├── remix-url-resolver
├── remix-ws-templates
└── remixd

13 directories, 1 file

UML属于UI，因此我们只需要关注remix-ui即可。

插件solidity-uml-gen目录:

bash 复制代码

.
└── src
    ├── index.ts
    ├── lib
    │   ├── components
    │   │   └── UmlDownload.tsx
    │   ├── css
    │   │   └── solidity-uml-gen.css
    │   ├── solidity-uml-gen.tsx
    │   └── utilities
    │       └── UmlDownloadStrategy.ts
    └── types
        └── index.ts

6 directories, 6 files

index.ts: 插件的入口文件，主要是对外导出lib的内容
types: 插件的类型定义，也就是我们常说的类型声明，或者d.ts也可
lib: 插件的核心逻辑，包括CSS、components等
- solidity-uml-gen.tsx: 这是我们常见的React组件，也就是Plugin的整体骨骼
- UmlDownload.tsx: 对下载、图像放缩的方法封装
- UmlDownloadStrategy.ts: 展示UML的策略，主要是 Blob 中的URL存放图像内容，然后绘制在 canvas 中