@epmkit/epm-extend-core

epm-extend-core

该项目为 EPM 扩展机制核心库

执行 npm install @epmkit/epm-extend-core 来引入该库。

开发

npm start

执行 npm start 进行开发

public 目录下的文件并不是用来发布的，而是调试用的例子插件。

npm run build

执行 npm run build 进行编译

使用

核心库引入

在宿主环境中执行 npm install @epmkit/epm-extend-core 来引入该库。 与该库配套使用的 @epmkit/cra-template-epm-plugin 用来创建插件仓库。

在节点中使用 Extend 机制

引入方法如下所示：

import React, { useEffect, useState } from 'react';
import Extend from '@epmkit/epm-extend-core';

const ExtendContext = React.createContext('Extend');

// 在节点中
function App() {

	const [ExtendInstance, setExtendInstance] = useState(new Extend());

	useEffect(() => {
		async function initExtend() {
			cosnt config = await fetchPluginList(nodeCode); // 获取当前节点的插件插槽配置
			ExtendInstance.init(config);
			setExtendInstance(ExtendInstance);
		}
		initExtend();
		return () => {
			ExtendInstance.dispose();
		};
	}, []);

	return (
		<ExtendContext.Provider value={ExtendInstance.Slot}>
			<ChildElement />
		</ExtendContext.Provider>
	);
}

// 在组件中
function ChildElement() {
	const Slot = React.useContext(ExtendContext);

	// 可针对单个插槽关闭 js 沙箱
	return <Slot name='slot-name' sandbox={false} fn={{
		fnAAA: () => {/* 事件回调 */},
		fnBBB: () => {/* 事件回调 */}
	}} data={{
		dataAAA: '', // 传递数据
		dataBBB: {}
	}} />;
}

1. 在节点的最外层执行 React.createContext('Extend') 创建扩展机制执行上下文

2. 在节点中执行 new Extend(options) 创建 扩展机制实例 ExtendInstance

   扩展机制支持对一些配置进行自定义设置，具体可设置属性如下：

   字段	含义	类型	默认值
   defaultStyleUrl	默认样式CSS地址	string	//design.yonyoucloud.com/static/tinper-next/release/tinper-next.css
   windowScope	插件绑定到window对象上的属性	string	epmPlugin
   sandbox	是否开启js沙箱	boolean	true

3. 在适当的时机执行实例的 init 方法，并传入插件插槽配置。init 时传入的 config 变量为当前节点的插件插槽配置项，需要符合特定的数据结构，以下为例子：

   config = {
   	pluginList: [
   		{
   			name: 'aSmallBtn',
   			scriptEntry: 'http://localhost:3030/plugin-aSmallBtn.e76d9341.js',
   			styleEntry: 'http://localhost:3030/plugin-aSmallBtn.ababa1e9.css',
   			version: '1.3.0',
   			sandbox: false,
   		},
   		{
   			name: 'aSelectExample',
   			scriptEntry: 'http://localhost:3030/plugin-aSelectExample.e86c0e5e.js',
   			styleEntry: 'http://localhost:3030/plugin-aSelectExample.5df6a4d9.css',
   			chunks: ['http://localhost:3030/js/plugin-chunk.155.cb4c80ac.js'],
   			version: '1.4.1',
   		},
   	],
   	slotList: [
   		{
   			name: 'slot-a',
   			plugins: ['aSelectExample', 'aSmallBtn'],
   		},
   		{
   			name: 'slot-b',
   			plugins: ['aSelectExample'],
   		},
   		{
   			name: 'slot-c',
   			plugins: [{ name: 'aSelectExample', version: '1.4.1' }],
   		},
   	],
   };

   各字段含义如下

   字段	含义	类型	例子	是否必需
   pluginList	当前节点的插件列表	Array<Plugin>	-	√
   Plugin.name	插件名	string	aSmallBtn	√
   Plugin.scriptEntry	插件脚本文件入口地址	string	http://localhost:3030/plugin-aSmallBtn.e76d9341.js	√
   Plugin.styleEntry	插件样式文件入口地址	string	http://localhost:3030/plugin-aSmallBtn.ababa1e9.css	-
   Plugin.chunks	插件的分包	Array<URL>	['http://localhost:3030/js/plugin-chunk.155.cb4c80ac.js']	-
   Plugin.version	插件的版本	string	1.3.0	-
   Plugin.sandbox	是否开启沙箱，默认开启，可设置为 false 对单个插件关闭	boolean	false	-
   slotList	当前节点的插槽配置	Array<Slot>	-	√
   Slot.name	插槽名	string	slot-a	√
   Slot.plugins	当前插槽的插件列表	Array<string|Plugin>	-	√

4. 将扩展机制实例的插槽 ExtendInstance.Slot 作为上下文的值传递给子组件

5. 在子组件适当的位置使用 <Slot name='slot-name' /> 注入插槽

插件开发

EPM 扩展机制核心库是和插件配置来使用的，插槽的开发者使用核心库来配置插槽和传递的数据方法，插件开发者需要开发插件来注入应用。 插件开发者执行 npx create-react-app ${plugin-repo-name} --template @epmkit/cra-template-epm-plugin 来创建插件仓库，其中 ${plugin-repo-name} 为插件仓库的名称。

插件的开发同普通 React 组件开发方式相同，只不过组件的 props 是通过插槽传递过来的数据。

一个插件例子如下：

export default function SamllBtn({ fn, data, emit, on }) {
	const { btnName, isBtnShow } = data;
	const { hideBtn, showBtn } = fn;

	useEffect(() => {
		on('anotherPlugin:message', payload => {
			console.log('receiveMessage', payload);
		});
	}, []);

	const handleClick = useCallback(() => {
		if (isBtnShow) {
			hideBtn();
			return;
		}
		showBtn();
		emit('smallBtnClick', !isBtnShow);
	}, [hideBtn, isBtnShow, showBtn]);

	return (
		<Button
			className='plugin-btn'
			style={{ width: 400 }}
			onClick={handleClick}
			type='primary'>{`${btnName}按钮`}</Button>
	);
}

插件的 props 含义如下：

字段名	含义	例子
fn	由插槽定义的方法，通过执行方法改变页面状态	-
data	由插槽传递的数据，获取当前插槽传递的实时数据	-
emit	插件间通信方法，发送事件与数据	emit('event', data)
on	插件间通信方法，监听其他插件发送的事件并对载荷做出处理 需要注意的是，监听时需要带上监听的插件名，插件名和事件之间以冒号 : 连接	on('pluginName:event', (payload) =>{})