Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qddegtya/isomorphic-channel
📞 Isomorphic channel for Micro Frontends
https://github.com/qddegtya/isomorphic-channel
iframe-communicator microfrontends pubsub
Last synced: 14 days ago
JSON representation
📞 Isomorphic channel for Micro Frontends
- Host: GitHub
- URL: https://github.com/qddegtya/isomorphic-channel
- Owner: qddegtya
- License: mit
- Created: 2022-12-26T04:39:25.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-11T09:44:21.000Z (16 days ago)
- Last Synced: 2025-01-11T10:20:14.019Z (16 days ago)
- Topics: iframe-communicator, microfrontends, pubsub
- Language: JavaScript
- Homepage:
- Size: 230 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### About
> Isomorphic channel for Micro Frontends.
### Motivation
In large web applications, we often load pages in different execution contexts. To solve historical technical debt problems, sometimes we choose not to be radical, but to choose more rapid integration. So many solutions are emerging in the community, such as what are called `Micro Frontends`, which are most popular. However, we still believe that the most perfect sandbox isolation scheme in the browser environment is `iframe`, so we choose to let them coexist with self-built sandboxes, at this time we need a developer-friendly communication solution, this is what `isomorphic-channel` does.
### Feature
* 🤝 Support `Cross-Context` communications.
* 📢 Support `broadcast-mode`.
* 🚀 Support handler binding to `iframe`, No Restrictions(structured clone).
### Install
**step 1: install**
```shell
$ npm install @atools/isomorphic-channel
```
### Core Api
#### setup
> If you need `broadcast-mode`, must call `setup` first.
```javascript
import { channel } from '@atools/isomorphic-channel';
channel.setup()
```
#### on
> Listen from `channel`, return a `cancellation`
```javascript
import { channel } from '@atools/isomorphic-channel';
const remove = channel.on('iframe-broadcast', (payload) => {
alert(`in qiankun: ${JSON.stringify(payload)}`)
// remove listener
remove()
})
```
⚠️ **listen to iframe context**
> To break the `structured clone algorithm` limitation, we provide `cb.autoRun`, you need to use it to wrap your handler.
```javascript
import { channel, cb } from '@atools/isomorphic-channel';
// The magic of cb.autoRun
// 1. It will break the limitation of [structured clone algorithm].
// 2. Transform handler to current context.
channel.on('qiankun-broadcast', cb.autoRun((payload) => {
alert(`in iframe: ${JSON.stringify(payload)}`)
}))
```
#### broadcast
> Broadcast to `channel`
```javascript
import { channel } from '@atools/isomorphic-channel';
setTimeout(() => {
channel.broadcast('qiankun-broadcast', { key: 'hello, I am qianku.' })
}, 5000)
```
#### send
> Send to `channel`, without `broadcast-mode`
```javascript
import { channel } from '@atools/isomorphic-channel';
channel.send(message, payload);
```
### Enable Debug Mode
```javascript
import { channel } from '@atools/isomorphic-channel';
channel.debug();
```
### Handshake with iframe
#### handshake
> See https://github.com/dollarshaveclub/postmate
```javascript
const disconnect = channel.handshake({
container: DOM_NODE,
url: IFRAME_URL,
name: NAME, // required
classListArray: [], // your own classList
});
// disconnect
disconnect();
```
### Thanks
* [postmate - 📭 A powerful, simple, promise-based postMessage library.](https://github.com/dollarshaveclub/postmate)