# tiklab-plugin-ui

> > TODO: description

Latest version **1.0.0** (published 2022-09-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install tiklab-plugin-ui
pnpm add tiklab-plugin-ui
yarn add tiklab-plugin-ui
bun add tiklab-plugin-ui
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-09-16 |
| First published | 2022-09-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 458.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mahai |
| Maintainers | tiklab |

## Links

- npm: https://www.npmjs.com/package/tiklab-plugin-ui
- npm.io page: https://npm.io/package/tiklab-plugin-ui

## Dependencies (3)

- [shadow-view](https://npm.io/package/shadow-view.md) ^4.0.1
- [tiklab-core-ui](https://npm.io/package/tiklab-core-ui.md) ^1.0.0
- [tiklab-privilege-ui](https://npm.io/package/tiklab-privilege-ui.md) ^1.0.0

## Recent versions

- 1.0.0 (latest) — 2022-09-16

## README

# `tiklab-plugin-ui`

> TODO: 插件管理
> 插件加载对错误捕获有限，只支持react提供的错误边界执行能力
> 注意:
> 插件中需要使用到国际化，必选在项目中通过`extraProps`中传递 使用占位符拉传

## V2 版本文档说明

```
npm i tiklab-plugin-ui
```

#插件错误边界不能捕获的
> 参考react文档：[错误边界](https://react.docschina.org/docs/error-boundaries.html)
>
| 不能捕获              |   |
|-------------------|---|
| 事件错误              | x |
| 异步代码              | x |
| 服务端渲染 和 错误边界自己的错误 | x |

# initFetch
> 初始化相关插件数据

|  组件名称   | 描述               |
|  ----  |------------------|
| method  | 请求方式             |
| routes  | 项目路由             |
| languages  | 项目中中语言资源         |
| i18n  | useTranslation中的 i18n|


> #### 加载的国际化语言包会自动注入到 项目中的 i18n 中，自行调用切换方法以及获取多个语言数据

```jsx

    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
> 插件全局数据的方法
>
> 使用如下

```jsx
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数据  |

```jsx

return (
    <PluginProvider store={pluginData}>
        <Provider {...allStore}>
            <HashRouter>
                {
                    renderRoutes(pluginData.routes)
                }
            </HashRouter>
        </Provider>
    </PluginProvider>
);
```


#useSelector
> 选择插件数据

```jsx
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 |

```jsx
// 类组件
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
```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"
    },
  ]
}
```

---
_Source: https://npm.io/package/tiklab-plugin-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._