1.0.0 • Published 2 years ago
tiklab-plugin-ui v1.0.0
tiklab-plugin-ui
TODO: 插件管理 插件加载对错误捕获有限,只支持react提供的错误边界执行能力 注意: 插件中需要使用到国际化,必选在项目中通过
extraProps
中传递 使用占位符拉传
V2 版本文档说明
npm i tiklab-plugin-ui
#插件错误边界不能捕获的
参考react文档:错误边界
不能捕获 事件错误 x 异步代码 x 服务端渲染 和 错误边界自己的错误 x
initFetch
初始化相关插件数据
组件名称 | 描述 |
---|---|
method | 请求方式 |
routes | 项目路由 |
languages | 项目中中语言资源 |
i18n | useTranslation中的 i18n |
加载的国际化语言包会自动注入到 项目中的 i18n 中,自行调用切换方法以及获取多个语言数据
const [pluginData,setPluginData] = useState({
routes,
pluginStore:[],
languageStore:[]
});
const [viable,setViable] = useState(false);
// 新增
const {i18n, t} = useTranslation();
useEffect(() => {
// 修改
initFetch('post', routes, resources, i18n).then(res => {
setPluginData(res)
})
}, []);
if (!viable) {
return <div>加载中</div>
}
return (
<PluginProvider store={pluginData}>
<Provider {...allStore}>
<HashRouter>
{
renderRoutes(pluginData.routes)
}
</HashRouter>
</Provider>
</PluginProvider>
);
#createContainer
插件全局数据的方法
使用如下
const CounterContainer = createContainer();
return (
<CounterContainer.Provider initialState={pluginData}>
<Provider {...allStore}>
<HashRouter>
{
renderRoutes(pluginData.routes)
}
</HashRouter>
</Provider>
</CounterContainer.Provider>
);
#PluginProvider
<CounterContainer.Provider initialState={pluginData}> 功能一样。
提供2中方式的Provider形式
组件名称 | 描述 |
---|---|
store | store数据 |
return (
<PluginProvider store={pluginData}>
<Provider {...allStore}>
<HashRouter>
{
renderRoutes(pluginData.routes)
}
</HashRouter>
</Provider>
</PluginProvider>
);
#useSelector
选择插件数据
login.js
import {useSelector} from 'tiklab-plugin-ui';
// 获取所有数据
const allData = useSelector(state => state)
// 获取插件配置的数据
const pluginStore = useSelector(state => state.pluginStore)
// 获取语言配置的数据
const languageStore = useSelector(state => state.languageStore)
// 获取处理后得路由
const routes = useSelector(state => state.routes)
// 获取处理后得语言
const languages = useSelector(state => state.languages)
connect (高阶组件)
用于将store的数据以props的方式传递给子组件
1.类组件使用该 方法可以获取到插件管理中的数据,函数组件也是可以。
2.函数组件推荐 useSelector 方法来获取
组件名称 | 描述 |
---|---|
mapStateToProps | (state)=> state |
// 类组件
class Demo {
render() {
// Demo 组件被 connect 包裹红藕props就就会有pluginStore数据
const {pluginStore} = this.props;
return (
<div>
</div>
);
}
}
function mapStateToProps(state) {
return {
pluginStore: state.pluginStore
}
}
export default connect(mapStateToProps)(Demo)
// 函数组件
const Demo1 = (props) => {
const {pluginStore} = props;
return(
<div>
</div>
)
}
export default connect(mapStateToProps)(Demo1)
#RemoteUmdComponent
远程加载组件
使用 Shadow DOM 做沙箱隔离,就会导致在插件中使用Modal,通知类的组件样式丢失,需要在组件中设置isModalType={true} 内部会创建一个link标签在body中,这样样式就会显示.
插件尽可能不需要使用类似在body同级别插件的组件
不要滥用
isModalType=true
的属性
组件名称 | 描述 |
---|---|
isModalType | 默认false, 为true表示插件中有在弹出框或者全局通知中写有自定义样式 |
point | 挂载点 |
pluginStore | 插件管理中的插件数据 |
extraProps | 扩展的props,支持已$name做占位符 |
插件配置 plugin.json
{
"name": "钉钉企业微信ldap的认证", // 插件总体名称
"auth": "hia", // 插件作者
"desc": "用户认证高阶组件", // 插件描述
"tag": ["用户", "组价"], // 插件tag标
"previewImgs": [
"https://img0.baidu.com/it/u=1165226539,2557398339&fm=26&fmt=auto",
"https://img2.baidu.com/it/u=4007240083,716495009&fm=26&fmt=auto"
], // 插件预览图
"extensions": [
// 挂载到项目某个点上
{
"id": "verify", // 插件ID
"type": "function", // 插件类型 function:组件 ,language:语言包类型
"version": "1.0.0", // 插件版本
"js": "/verify/verify.umd.js",
"css": "",
"point": "verify" // 插件挂载点
},
// 挂载到项目某个点上,可传递props属性值
{
"id": "loginBtn",
"type": "function",
"version": "1.0.0",
"js": "/loginBtnForLocal/loginBtnForLocal.umd.js",
"css": "/loginBtnForLocal/loginBtnForLocal.css",
"point": "loginBtn",
"extraProps":{ // 插件所需要的props,"$setUseType"占位符最终会把项目中的setUseType替换
"setUseType": "$setUseType",
"setLoginError": "$setLoginError"
}
},
// 挂载到项目路路由中
{
"id": "plugins-menu",
"type": "function",
"version": "1.0.0",
"css": "/demorouter/demorouter.css",
"js": "/demorouter/demorouter.umd.js",
"routers": [
{
"mount": "", // 挂载跟路由是空 且 'router' 不需要携带/, mount有值就退查找项目中的目录进行挂载
"router": "demo"
}
]
},
// 挂载路由,同时支持menu方式显示menutitle来点击路由
{
"id": "plugins-menu",
"type": "function",
"version": "1.0.0",
"css": "/plugins-menu/plugins-menu.css",
"js": "/plugins-menu/plugins-menu.umd.js",
"routers": [
{
"mount": "orga",
"router": "/plugins-menu",
"menuTitle": "插件导航名称"
}
],
"entry": "button",
"point": "orgaMenu"
},
]
}
1.0.0
2 years ago