# post-bridge

> Easy to use Post Message

Latest version **2.1.3** (published 2025-04-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install post-bridge
pnpm add post-bridge
yarn add post-bridge
bun add post-bridge
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.3 |
| Published | 2025-04-15 |
| First published | 2019-09-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | joenix |
| Maintainers | joenix |

## Links

- npm: https://www.npmjs.com/package/post-bridge
- npm.io page: https://npm.io/package/post-bridge

## Dependencies (1)

- [flatted](https://npm.io/package/flatted.md) ^3.3.3

## Recent versions

- 2.1.3 (latest) — 2025-04-15
- 2.1.2 — 2025-04-15
- 2.1.1 — 2024-06-11
- 2.0.17 — 2024-06-11
- 2.0.16 — 2024-06-08
- 2.0.15 — 2024-05-31
- 2.0.14 — 2024-05-30
- 2.0.13 — 2024-05-28
- 2.0.12 — 2024-05-23
- 2.0.11 — 2024-05-22
- 2.0.10 — 2024-05-22
- 2.0.9 — 2024-05-14
- 2.0.8 — 2024-05-06
- 2.0.7 — 2024-05-06
- 2.0.6 — 2024-05-06
- … 24 more at https://npm.io/package/post-bridge/versions

## README

# post-bridge

Version: 2

> 重新封装 `postMessage`，使其更易用。
> A simple package to make `post-message` easily to use.

## how to install ?

```sh
yarn add post-bridge
# or
npm i post-bridge
```

## how to use ?

```js
import postBridge from 'post-bridge';

/**
 * @param { json } configure   - 对 `Bridge` 进行设置
 *  @prop { string } namespace - 必填, 表示当前 `Bridge` 实例的名称
 *  @prop { object } origin    - 选填，设置通信的来源对象，默认: window
 *  @prop { object } target    - 选填，设置通信的目标对象，默认: window
 *  @prop { string } alias     - 选填，设置消息别名，默认: space
 * @param { json } handlers    - `Bridge` 生命周期函数
 *  @method onConnect          - 当成功建立 `Bridge` 连接时触发
 *  @method onAnswer           - 发送消息时，响应成功或失败时触发
 *  @method onSend             - 发送消息前触发，可对发送数据进行加工处理
 * ======== ======== ========
 */
const Bridge = new postBridge(
  // Configure
  { namespace: `sample`, target: window.parent },

  // Handlers
  {
    // 成功建立连接时触发
    onConnect(scope) {
      console.log(scope);
    },

    // 发送消息时，响应成功或失败时触发
    onAnswer({ origin, target, timeout }) {
      if (timeout) {
        return console.error(`Response Timeout !!`);
      }
      console.log(`Send Message from ${origin} to ${target}`);
    },

    // 发送消息前触发，可对发送数据进行加工处理
    onSend(data) {
      return data;
    }
  }
);

/**
 * @name 监听消息
 * @param { string } space - 监听来自 `命名空间` 的消息
 * @param { function } action - 所监听消息的回调函数
 * ======== ======== ========
 */
Bridge.on('test', (data, origin) => {
  console.log(origin); // sample
  console.log(data.say); // hello world !!
});

/**
 * @name 发送消息
 * @param { string } space - 向 `命名空间` 发送消息
 * @param { json } data - 所发送消息的数据实体
 * ======== ======== ========
 */
Bridge.send('test', { say: `hello world !!` });
```

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