Шпаргалка по разработке плагинов

При написании плагина часто возникает мысль: «Что и где именно писать, какой API вызывать?». Эта шпаргалка поможет быстро найти ответ.

Структура каталогов плагина

При создании плагина через yarn pm create @my-project/plugin-name автоматически генерируется следующая структура каталогов. Не создавайте каталоги вручную, чтобы не пропустить шаг регистрации и не получить неработающий плагин. Подробности см. в Написание первого плагина.

plugin-name/
├── src/
│   ├── client-v2/              # 客户端代码（v2）
│   │   ├── plugin.tsx          # 客户端插件入口
│   │   ├── locale.ts           # useT / tExpr 翻译 hook
│   │   ├── models/             # FlowModel（区块、字段、操作）
│   │   └── pages/              # 页面组件
│   ├── client/                 # 客户端代码（v1，兼容）
│   │   ├── plugin.tsx
│   │   ├── locale.ts
│   │   ├── models/
│   │   └── pages/
│   ├── server/                 # 服务端代码
│   │   ├── plugin.ts           # 服务端插件入口
│   │   └── collections/        # 数据表定义
│   └── locale/                 # 多语言翻译文件
│       ├── zh-CN.json
│       └── en-US.json
├── client-v2.js                # 根目录入口（构建产物指向）
├── client-v2.d.ts
├── client.js
├── client.d.ts
├── server.js
├── server.d.ts
└── package.json

Клиент: что я хочу сделать → как это написать

Что я хочу сделать	В каком файле писать	Какой API вызывать	Документация
Зарегистрировать маршрут страницы	`load()` в `plugin.tsx`	`this.router.add()`	Router
Зарегистрировать страницу настроек плагина	`load()` в `plugin.tsx`	`pluginSettingsManager.addMenuItem()` + `addPageTabItem()`	Router
Зарегистрировать пользовательский блок	`load()` в `plugin.tsx`	`this.flowEngine.registerModelLoaders()`	FlowEngine → Расширение блоков
Зарегистрировать пользовательское поле	`load()` в `plugin.tsx`	`this.flowEngine.registerModelLoaders()`	FlowEngine → Расширение полей
Зарегистрировать пользовательское действие	`load()` в `plugin.tsx`	`this.flowEngine.registerModelLoaders()`	FlowEngine → Расширение действий
Сделать так, чтобы внутренняя таблица появилась в выборе таблицы данных блока	`load()` в `plugin.tsx`	`mainDS.addCollection()`	Collections (Таблицы данных)
Перевести тексты плагина	`locale/zh-CN.json` + `locale/en-US.json`	—	i18n Интернационализация

Сервер: что я хочу сделать → как это написать

Что я хочу сделать	В каком файле писать	Какой API вызывать	Документация
Определить таблицу данных	`server/collections/xxx.ts`	`defineCollection()`	Collections (Таблицы данных)
Расширить существующую таблицу данных	`server/collections/xxx.ts`	`extendCollection()`	Collections (Таблицы данных)
Зарегистрировать пользовательский интерфейс	`load()` в `server/plugin.ts`	`this.app.resourceManager.define()`	ResourceManager
Настроить права доступа интерфейса	`load()` в `server/plugin.ts`	`this.app.acl.allow()`	ACL Контроль доступа
Записать начальные данные при установке плагина	`install()` в `server/plugin.ts`	`this.db.getRepository().create()`	Plugin (Плагин)

Шпаргалка по FlowModel

Что я хочу сделать	Какой базовый класс наследовать	Ключевой API
Сделать чистый блок отображения	`BlockModel`	`renderComponent()` + `define()`
Сделать блок, привязанный к таблице данных (с пользовательским рендерингом)	`CollectionBlockModel`	`createResource()` + `renderComponent()`
Сделать полноценный блок таблицы (на базе встроенной таблицы)	`TableBlockModel`	`filterCollection()` + `customModelClasses`
Сделать компонент отображения поля	`ClickableFieldModel`	`renderComponent(value)` + `bindModelToInterface()`
Сделать кнопку действия	`ActionModel`	`static scene` + `registerFlow({ on: 'click' })`

Шпаргалка по методам перевода

Сценарий	Что использовать	Откуда импортировать
В `load()` плагина	`this.t('key')`	Встроено в базовый класс Plugin
В React-компоненте	`const t = useT(); t('key')`	`locale.ts`
Статическое определение FlowModel (`define()`, `registerFlow()`)	`tExpr('key')`	`locale.ts`

Шпаргалка распространённых API-вызовов

Что я хочу сделать	В Plugin	В компоненте
Отправить API-запрос	`this.context.api.request()`	`ctx.api.request()`
Получить перевод	`this.t()`	`useT()`
Получить логгер	`this.context.logger`	`ctx.logger`
Зарегистрировать маршрут	`this.router.add()`	—
Навигация	—	`ctx.router.navigate()`
Открыть модальное окно	—	`ctx.viewer.dialog()`

Связанные ссылки

Обзор клиентской разработки — путь обучения и быстрый указатель
Plugin (Плагин) — точка входа плагина и жизненный цикл
Частые проблемы и руководство по устранению неполадок — разбор часто встречающихся проблем
Router (Маршрутизация) — регистрация маршрутов страниц
FlowEngine → Расширение блоков — базовые классы серии BlockModel
FlowEngine → Расширение полей — разработка FieldModel
FlowEngine → Расширение действий — разработка ActionModel
Collections (Таблицы данных) — defineCollection и типы полей
i18n Интернационализация — формат файлов перевода
ResourceManager (Управление ресурсами) — пользовательские REST API
ACL Контроль доступа — настройка прав доступа
Plugin (Плагин, сервер) — жизненный цикл серверного плагина
Написание первого плагина — создание каркаса плагина

#Шпаргалка по разработке плагинов

#Структура каталогов плагина

#Клиент: что я хочу сделать → как это написать

#Сервер: что я хочу сделать → как это написать

#Шпаргалка по FlowModel

#Шпаргалка по методам перевода

#Шпаргалка распространённых API-вызовов

#Связанные ссылки