# 插件规范

Sula为内部的组件及模板有针对性的预留了一些扩展点，用户可以基于扩展点去注册插件，完成个性化的定制。

# usage

插件的注册的两种方式，class类方式注册插件示例：

class RenderPlugin {
  apply(sula) {
    sula.renderType('fancy::input', (ctx, config) => {})
  }
}

//将插件传给组件
<Component plugins={[ new FetchPlugin()]} />

函数方式注册插件：

function renderPlugin(api) {
  api.renderType("fancy::input", (ctx, config) => {});
}
//将插件传给组件
<Component plugins={[renderPlugin] />

# 插件类型

目前Sula支持插件分为两种类型：流程类插件、类型类插件

# 流程类插件

流程类扩展点示例：

class FetchPlugin {
  apply(sula) {
    sula.registerHook('fetch', 2);
    sula.onFetch((ctx, config) => {
      // 自定义对fetch的实现
    }
  }
}

//将插件传给组件
<Component plugins={[ new FetchPlugin()]} />

注册方法：registerHook(name, argNumber)

参数	说明	类型	默认值
name	扩展点名称	`string`	-
argNumber	注册的毁掉函数接收的参数个数	`number`	-

调用方式：sula.on${name}((ctx,config) => {})

# 类型类插件

类型类扩展插件，render插件示例：

class RenderPlugin {
  apply(sula) {
    sula.renderType('fancy::input', (ctx, config) => {
      const props = config.props || {};
      return <Input placeholder={config.type} {...props}/>;
    })
  }
}

//将插件传给组件
<Component plugins={[ new FetchPlugin()]} />

注册方法：${render | action | dependency ...}Type(name, (ctx,config) => {})

参数	说明	类型	默认值
type	插件名称，必须使用`::`命名空间	`string`	-
argNumber	注册的毁掉函数接收的参数个数	`number`	-

调用方法结尾添加$符，可以全局注册一个插件，在组件及模板见共享，示例：

sula.renderType$('button', (ctx, config) => {
  const {
    text,
    props, 
  } = config;
  return <Button {...props} childen={text} />
})

配置调用格式：

render: { // 整个这个对象记为 config
  type: "fancy::input", // 插件名称
  [key]: "", // 插件其他配置信息
}

直接调用格式：

//sula为组件内部sula实例
sula.render('fancy::input', {}, {props: {}});

# API

注册插件的回调方法的入参

# ctx

注入的上下文，不同的组件及模板的上下文会有所不同，参考组件及模板配置

示例：

//form组件的fields字段
const fields = [
  {
    name: 'input',
    label: 'Input',
    render: (ctx) => {
      return <Input disabled={ctx.disabled} />
    }
  }
]

# config

插件的配置项，与type同级的所有属性

//form组件的fields字段
const fields = [
  {
    name: 'input',
    label: 'Input',
    render: (ctx, config) => {
      const props = config.props || {};
      return <Input disabled={ctx.disabled} {...props} />
    }
  }
]

插件配置字段还支持模板表达式（有别于ES6的模板表达式），其目的是为了实现配置持久化，示例：

render: {
  type: 'input',
  props: {
    placeholder: "i am placeholder : ${state.team}"
  }
}

tips

插件配置字段支持字符串、模板表达式、方法，并会转换后传入对应的插件注册方法

# 插件能力直接使用

@sula/core承载了Sula插件机制的核心部分，上文都是在组件及模板上层基于配置对插件能力的使用，下面将直接基于Sula内部的插件能力，完成一个按钮button点击触发fetch请求的使用

import Sula from '@sula/core';
import { Button } from 'antd';
import actionPlugin from '@sula/plugin-action';
// 1. 实例化 sula
const sula = new Sula();

// 2. 注册render、action扩展点
sula.registerType('action', 3);
sula.registerType('render', 3);

// 3. 注册 action 代理事件插件
sula.registerPlugin(actionPlugin);

// 4. 实现 fetch 插件
sula.actionType$('fetch', (ctx, config) => {});

// 5. 实现 button 插件
sula.renderType$('button', (ctx, config) => {
  const {
    text,
    props, 
  } = config;
  return <Button {...props} childen={text} />
})

// 6. 为 button 代理 fetch 事件
let buttonElem = sula.render('button', {}, {text: 'submit'});
buttonElem = sula.action('fetch', {element: buttonElem}, {method: 'post', url: '/v1/submit',})

// 7. 点击button 触发fetch操作

← umi插件