{"id":20059249,"url":"https://github.com/qddegtya/isomorphic-channel","last_synced_at":"2025-07-24T16:19:27.365Z","repository":{"id":82297360,"uuid":"582205892","full_name":"qddegtya/isomorphic-channel","owner":"qddegtya","description":"📞 Isomorphic channel for Micro Frontends","archived":false,"fork":false,"pushed_at":"2025-02-27T09:00:01.000Z","size":290,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-27T12:24:26.877Z","etag":null,"topics":["iframe-communicator","microfrontends","pubsub"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/qddegtya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-26T04:39:25.000Z","updated_at":"2025-02-27T09:00:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"30795274-b9ac-46e5-87ec-eb42626befbe","html_url":"https://github.com/qddegtya/isomorphic-channel","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qddegtya%2Fisomorphic-channel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qddegtya%2Fisomorphic-channel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qddegtya%2Fisomorphic-channel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qddegtya%2Fisomorphic-channel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qddegtya","download_url":"https://codeload.github.com/qddegtya/isomorphic-channel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241488156,"owners_count":19970827,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["iframe-communicator","microfrontends","pubsub"],"created_at":"2024-11-13T13:06:40.875Z","updated_at":"2025-03-02T09:43:41.181Z","avatar_url":"https://github.com/qddegtya.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### About\n\n\u003e Isomorphic channel for Micro Frontends.\n### Motivation\n\nIn 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.\n\n### Feature\n\n![principle](https://raw.githubusercontent.com/qddegtya/isomorphic-channel/main/media/principle.jpeg)\n\n* 🤝 Support `Cross-Context` communications.\n* 📢 Support `broadcast-mode`.\n* 🚀 Support handler binding to `iframe`, No Restrictions(structured clone).\n\n### Install\n\n**step 1: install**\n\n```shell\n$ npm install @atools/isomorphic-channel\n```\n\n### Core Api\n\n#### setup\n\n\u003e If you need `broadcast-mode`, must call `setup` first.\n\n```javascript\nimport { channel } from '@atools/isomorphic-channel';\nchannel.setup()\n```\n\n#### on\n\n\u003e Listen from `channel`, return a `cancellation`\n\n```javascript\nimport { channel } from '@atools/isomorphic-channel';\n\nconst remove = channel.on('iframe-broadcast', (payload) =\u003e {\n  alert(`in qiankun: ${JSON.stringify(payload)}`)\n\n  // remove listener\n  remove()\n})\n```\n\n⚠️ **listen to iframe context**\n\n\u003e To break the `structured clone algorithm` limitation, we provide `cb.autoRun`, you need to use it to wrap your handler.\n\n```javascript\nimport { channel, cb } from '@atools/isomorphic-channel';\n\n// The magic of cb.autoRun\n// 1. It will break the limitation of [structured clone algorithm].\n// 2. Transform handler to current context.\nchannel.on('qiankun-broadcast', cb.autoRun((payload) =\u003e {\n  alert(`in iframe: ${JSON.stringify(payload)}`)\n}))\n```\n\n#### broadcast\n\n\u003e Broadcast to `channel`\n\n\n```javascript\nimport { channel } from '@atools/isomorphic-channel';\n\nsetTimeout(() =\u003e {\n  channel.broadcast('qiankun-broadcast', { key: 'hello, I am qianku.' })\n}, 5000)\n```\n\n#### send\n\n\u003e Send to `channel`, without `broadcast-mode`\n\n```javascript\nimport { channel } from '@atools/isomorphic-channel';\n\nchannel.send(message, payload);\n```\n\n### Enable Debug Mode\n\n```javascript\nimport { channel } from '@atools/isomorphic-channel';\n\nchannel.debug();\n```\n\n### Handshake with iframe\n\n#### handshake\n\n\u003e See https://github.com/dollarshaveclub/postmate\n\n\n```javascript\nconst disconnect = channel.handshake({\n  container: DOM_NODE,\n  url: IFRAME_URL,\n  name: NAME, // required\n  classListArray: [], // your own classList\n});\n\n// disconnect\ndisconnect();\n```\n\n### Thanks\n\n* [postmate - 📭 A powerful, simple, promise-based postMessage library.](https://github.com/dollarshaveclub/postmate)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqddegtya%2Fisomorphic-channel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqddegtya%2Fisomorphic-channel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqddegtya%2Fisomorphic-channel/lists"}