UI插件API (1.8.*)

Example

https://github.com/Jirapo/nowa-gui-plugin-demo

插件结构

  1. |- index.js   主文件
  2. |- .nowa      属性配置文件
  3. |- package.json
  4. |- readme.md

初始化

  1. const Plugin = require('nowa-gui-plugin');
  3. const name = {
  4.   zh: '插件',
  5.   en: 'Plugin'
  6. };
  8. const plugin = new Plugin(name);

使用

plugin 有个 use 方法，里面需要传入一个 generator function，表示插件执行的逻辑。

函数有一个参数 ctx，该参数包含如下字段：

  • logger 打印函数，用于将文本显示到工具的控制台中， 换行需要手动加上\n
  • cwd 当前项目路径
  • renderPromts 渲染工具的提问模板表单
  • config 插件设置, .nowa文件内容
  1. // 这个插件将会打印一条语句，并且弹出一个提问框
  3. plugin.use(function* ({
  4.   logger,
  5.   cwd,
  6.   renderPromts,
  7.   config,
  8. }) {
  9.   logger('in demo plugin\n');
  10.   const res = yield renderPromts([{
  11.     key: 'name',  // 用来标识问题
  12.     label: {
  13.       zh: '名字',
  14.       en: 'Name',
  15.     },
  16.     default: anwsers.name, // 可选，默认值
  17.     validator: {  // 可选，校验
  18.       func: (value) => /\w+$/.test(value), // 校验函数
  19.       msg: 'Invalid Name'  // 校验出错信息
  20.     },
  21.     type: 'input',
  22.   }]);
  24.   console.log('res', res);
  25. });

提问模板

支持 input，select，switch，checkbox, text 5种类型

可以参考 antd 的表单 https://ant.design/components/form-cn/

example

  1. [
  2.   {
  3.     key: 'name',  // 用来标识问题
  4.     label: {
  5.       zh: '名字',
  6.       en: 'Name',
  7.     },
  8.     default: anwsers.name, // 可选，默认值
  9.     validator: {  // 可选，校验
  10.       func: (value) => /\w+$/.test(value), // 校验函数
  11.       msg: 'Invalid Name'  // 校验出错信息
  12.     },
  13.     type: 'input',
  14.   },
  15.   {
  16.     key: 'lang',
  17.     label: {
  18.       zh: '语言',
  19.       en: 'Language',
  20.     },
  21.     values: ['en', 'zh'],
  22.     default: 'en',
  23.     type: 'select',
  24.   },
  25.   {
  26.     key: 'task',
  27.     label: {
  28.       zh: '任务',
  29.       en: 'Tasks',
  30.     },
  31.     type: 'checkbox',
  32.     values: ['eslint', 'test']
  33.   },
  34.   {
  35.     key: 'fix',
  36.     label: {
  37.       zh: '自动修复',
  38.       en: 'Fix',
  39.     },
  40.     default: true,
  41.     type: 'switch'
  42.   },
  43.   {
  44.     key: 'date',
  45.     label: {
  46.       zh: '时间',
  47.       en: 'Time',
  48.     },
  49.     value: new Date(),
  50.     type: 'text'
  51.   }
  52. ]

.nowa 配置文件

在插件运行时外的一份配置文件，用来表示插件的特征，这不应该是通过提问模板得到的答案。

后期会在nowa中可视化显示。

提交

写好插件之后请使用 tnpm || npm 提交。

如何测试

可以联系我测试，提issue 或者手动测试，比较麻烦。

以下是手动测试的步骤。

1、 提交一个 nowa-gui 的测试列表到 npm

这个包可以命名为 my-nowa-gui-plugins。

在 package.json 中增加plugins字段：

  1. {
  2.   ...,
  3.   "plugins": [
  4.     {
  5.       "name": "@ali/plugin-name", // 内网使用的名字
  6.       "type": "ui",
  7.       "origin": "ali"
  8.     },
  9.     {
  10.       "name": "plugin-name", // 外网使用的名字
  11.       "type": "ui",
  12.       "origin": "common"
  13.     }]
  14.   }

2、 fork 或者 clone nowa－gui 的源码

https://github.com/nowa-webpack/nowa-gui

找到 src/renderer/constants.js 中的 GUI_PLUGIN_NPM 字段 nowa-gui-plugins-test 更换为 my-nowa-gui-plugins

那么启动 gui 的时候，可以在设置页面中的插件设置里面看到 my-nowa-gui-plugins里面列出来的组件。

项目详情页面基础操作区域会出现 … 的更多按钮，用户可以开始测试了。