open-index/open-npm huggingface dataset:
npm package: @shengkai/app-bridge
Description: 用于在主应用与子应用之间构建通信管道
Author: karasu shin
Latest version: 1.0.1

# 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
- 说明：子应用接收消息回调