# micro-message

> global data store of micro front-end / multi app

Latest version **1.2.15** (published 2023-01-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install micro-message
pnpm add micro-message
yarn add micro-message
bun add micro-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.2.15 |
| Published | 2023-01-21 |
| First published | 2022-05-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12.0.0 |
| Dependencies | 1 |
| Unpacked size | 138.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | fz6m && qiutian00 |
| Maintainers | qiutian00 |
| Keywords | micro-frontend, store, global-store, multi-app |

## Links

- npm: https://www.npmjs.com/package/micro-message
- Repository: https://github.com/qiutian00/micro-message
- Homepage: https://github.com/qiutian00/micro-message#README
- Issues: https://github.com/qiutian00/micro-message/issues
- npm.io page: https://npm.io/package/micro-message

## Dependencies (1)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21

## Recent versions

- 1.2.15 (latest) — 2023-01-21
- 1.2.14 — 2023-01-08
- 1.2.13 — 2022-11-07
- 1.2.12 — 2022-10-20
- 1.2.11 — 2022-09-18
- 1.2.10 — 2022-07-24
- 1.2.9 — 2022-07-17
- 1.2.8 — 2022-07-17
- 1.2.7 — 2022-07-03
- 1.2.6 — 2022-06-19
- 1.2.5 — 2022-06-05
- 1.2.4 — 2022-05-20
- 1.2.3 — 2022-05-20
- 1.2.2 — 2022-05-17
- 1.2.1 — 2022-05-16
- … 1 more at https://npm.io/package/micro-message/versions

## README

# micro-message  [![npm](https://img.shields.io/npm/v/micro-message.svg)](https://npmjs.com/package/micro-message)

A global state management for communication between micro-frontends and multiple applications, supporting value classification management, dynamic monitoring, and event bus

### Install

Add it as a dependency in all applications that need to communicate:

```bash
  yarn add micro-message or pnpm add micro-message
````

##### CDN

```html
<body>
  <!-- ... -->
  <script src="https://cdn.jsdelivr.net/npm/micro-message/dist/micro-message.min.js"></script>
  <script>
    MicroMessage.Store.set('key', 'value')
  </script>
</body>
````

### Usage

#### Store

`Store` is an object that contains methods for manipulating global data.

##### example

```ts
import { Store } from 'micro-message'

// set
Store.set('key', 'value')
// support path set
Store.set('object.key.key2', {})

// get
Store.get<string>('key')
Store.get('object.key.key2')

// get all data store
Store.getStore()

// scope data
Store.setWithScope('key', {}, 'some-scope')
Store.getWithScope<Record<string, any>>('key', 'some-scope')
````

##### methods

| method | description |
| :-------------------: | :------------------------- |
| `Store.set` | set value |
| `Store.get` | get value |
| `Store.setWithScope` | Set value with identifier (easy to manage) |
| `Store.getWithScope` | get value with identifier |
| `Store.getScope` | Get all data objects under the identifier |
| `Store.setScope` | set the entire data object under the identifier |
| `Store.getStore` | Get all data |

#### StoreChange

`StoreChange` is used to listen for changes in the data in the `Store`.

##### example

```ts
import { StoreChange } from 'micro-message'

StoreChange.$on((newStore) => {
  // ...
})
StoreChange.$on('path.key', (newValue, oldValue) => {
  // ...
})
````

##### methods

| method | description |
| :--------------------------------: | :--------------------------------------------- |
| `StoreChange.$on` | Listen for value changes on a property, support path monitoring |
| `StoreChange.$delete` | delete a listener function |
| `StoreChange.$destory` | Destroy all listeners for this property |

#### StoreBus

`StoreBus` is an event bus.

##### example

```ts
import { StoreBus } from 'micro-message'

StoreBus.$emit('some-event', 'value')
StoreBus.$on('some-event', (value) => {
  // ...
})
````

##### methods

| method | description |
| :----------------: | :------------------------- |
| `StoreBus.$on` | Listen to an event by event name |
| `StoreBus.$emit` | event broadcast |
| `StoreBus.$delete` | removes a listening function |
| `StoreBus.$off` | Clear all listeners for an event |

### Other

Note: Whether using change listeners or event buses, be careful to destroy or delete your listener functions when the component is `unmount`.

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