# @shengkai/app-bridge

> 用于在主应用与子应用之间构建通信管道

Latest version **1.0.1** (published 2023-03-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @shengkai/app-bridge
pnpm add @shengkai/app-bridge
yarn add @shengkai/app-bridge
bun add @shengkai/app-bridge
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-03-17 |
| First published | 2023-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 14 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | karasu shin |
| Maintainers | yekon-l, karasu.shin |

## Links

- npm: https://www.npmjs.com/package/@shengkai/app-bridge
- npm.io page: https://npm.io/package/@shengkai/app-bridge

## Dependencies (1)

- [crypto-js](https://npm.io/package/crypto-js.md) ^4.1.1

## Recent versions

- 1.0.1 (latest) — 2023-03-17
- 1.0.0 — 2023-03-17

## README

# App Bridge

## 使用

### 主应用
``` tsx
import { useRef } from 'react'
import { appBridge } from '@shengkai/app-bridge'

export default function Main() {
  const iframeRef = useRef<HTMLIFrameElement>(null)

  const onLoad = () => {
    appBridge.main({
      data: {
        user: '',
        pwd: '',
      },
      iframe: iframeRef.current!,
    })
  }

  return <iframe ref={iframeRef} src="http://172.168.18.250:5174" className="h-full w-full" onLoad={onLoad} />
}
```

### 子应用

``` tsx
import { appBridge } from '@shengkai/app-bridge'

appBridge.sub({
  onMessage: async (data: {
    user: string
    pwd: string
  }) => {
    const res = await fetch('/api/auth/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username: data.user,
        password: data.pwd,
      }),
    })
    const json = await res.json()
    localStorage.setItem('token', json.data.access_token)
  },
})
```

## 配置项
### MainAppOptions

1. data
- 类型：any
- 说明：通信建立成功时发送的数据

2. iframe
- 类型：HTMLIFrameElement
- 说明：建立通信的子应用iframe对象

3. onFetch
- 类型：() => void
- 说明：子应用请求回调，在建立通信时同时也会对子应用的所有fetch和xhr请求建立监听

### SubAppOptions

1. onMessage
- 类型：(data: any) => void
- 说明：子应用接收消息回调

---
_Source: https://npm.io/package/@shengkai/app-bridge · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._