# @alicloud/post-message

> postMessage 封装，可以用成 Promise

Latest version **1.6.10** (published 2024-08-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @alicloud/post-message
pnpm add @alicloud/post-message
yarn add @alicloud/post-message
bun add @alicloud/post-message
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.10 |
| Published | 2024-08-22 |
| First published | 2020-12-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 32.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 54 |
| Author | Jianchun Wang |
| Maintainers | jacksontian, fengmk2, pagecao, aliyunsdkteam, console-fe |

## Links

- npm: https://www.npmjs.com/package/@alicloud/post-message
- Repository: https://github.com/aliyun/alibabacloud-console-base
- Homepage: https://github.com/aliyun/alibabacloud-console-base/tree/master/packages/post-message
- Issues: https://github.com/aliyun/alibabacloud-console-base/issues
- npm.io page: https://npm.io/package/@alicloud/post-message

## Dependencies (2)

- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [@alicloud/sandbox-escape](https://npm.io/package/@alicloud/sandbox-escape.md) ^1.1.8

## Recent versions

- 1.6.10 (latest) — 2024-08-22
- 1.4.1-alpha.0 (alpha) — 2022-07-27
- 1.6.9 — 2023-03-24
- 1.6.8 — 2023-01-19
- 1.6.7 — 2023-01-05
- 1.6.6 — 2022-11-08
- 1.6.4 — 2022-11-08
- 1.6.2 — 2022-10-12
- 1.6.0 — 2022-08-18
- 1.5.3 — 2022-08-17
- 1.5.2 — 2022-08-16
- 1.5.1 — 2022-08-16
- 1.5.0 — 2022-07-27
- 1.4.0 — 2022-07-22
- 1.3.2 — 2022-07-05
- … 102 more at https://npm.io/package/@alicloud/post-message/versions

## README

# @alicloud/post-message

封装 postMessage 相关，有可以将 postMessage 转化成 Promise 的方法。

注意：需要使用者自己保证 Promise。

## INSTALL

```shell
tnpm i @alicloud/post-message -S
```

## Usage

```typescript
import {
  broadcast,
  broadcastInParent,
  broadcastPromise,
  subscribe,
  subscribeOnce,
  subscribePromise,
  unsubscribe,
  unsubscribeOnce
} from '@alicloud/post-message';

// 广播事件
broadcast<T>(message, payload); // 这里 T 是 __payload__ 的类型定义

// 接收事件
function receiver(payload: T) {
  // do sth.
}

const unsubscribe = subscribe<T>(message, receiver); // 适时地使用 unsubscribe 注销
```

## APIs

```typescript
/**
 * 广播消息
 */
function broadcast<P = void>(type: string, payload?: P, targetOrigin?: string): void;

/**
 * 去父窗口进行广播
 */
function broadcastInParent<P = void>(type: string, payload?: P, targetOrigin?: string): void;

/**
 * 广播事件，返回 Promise，必须要有 subscribePromise 来承接该事件，否则此 Promise 将永远无法结束
 */
function broadcastPromise<T = void, P = void>(type: string, payload: P): Promise<T>;

/**
 * 注册回调，返回可用于反注册的方法
 */
function subscribe<P = void>(type: string, fn: (payload?: P) => void): () => void;

/**
 * 注册单次回调，运行一次后将自动移除
 */
function subscribeOnce<P = void>(type: string, fn: (payload?: P) => void): () => void;

/**
 * 对 broadcastPromise 对应的 type 进行响应，这里关心的 payload 还是 broadcastPromise 所传入的 payload
 */
function subscribePromise<T = void, P = void>(type: string, fn: (payload: P) => Promise<T>): () => void;

/**
 * 反注册对 type 的某一回调，一般推荐用 subscribe 的返回
 */
function unsubscribe(type: string, fn: Function): void;

/**
 * 反注册对 type 的某一单次回调（有必要的场景）
 */
function unsubscribeOnce(type: string, fn: Function): void;
```

> 关于 `unsubscribe`，一般情况下，你不需要手动调用，可以直接使用 `subscribe` 返回的无参方法即可。

## 使用 hook 的例子

```typescript jsx
import {
  useEffect
} from 'react';

import {
  broadcast,
  subscribe
} from '@alicloud/post-message';

function SomeComponent(): JSX.Element {
  useEffect(() => {
     // 返回的 unsubscribe 方法会在适当的实际进行反注销
    return subscribe(_SOME_MESSAGE_TYPE_ENUM_, () => {
      // ... do sth
    });
  }, []);
  
  return <></>;
}
```

## 使用 class 的例子

```typescript jsx
import {
  Component
} from 'react';

import {
  broadcast,
  subscribe
} from '@alicloud/post-message';

class SomeComponent extends Component {
  _unsubscribe?(): void;
  
  componentDidMount(): void {
    this._unsubscribe = subscribe(_SOME_MESSAGE_TYPE_ENUM_, () => {
      // ... do sth
    });
  }
  
  componentWillUnmount(): void {
    if (this._unsubscribe) {
      this._unsubscribe();
      
      delete this._unsubscribe;
    }
  }
  
  render(): JSX.Element {
    return <></>;
  }
}
```

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