{"id":21333656,"url":"https://github.com/tachibana-shin/message-port-api","last_synced_at":"2025-08-23T13:08:32.113Z","repository":{"id":58504329,"uuid":"532188757","full_name":"tachibana-shin/message-port-api","owner":"tachibana-shin","description":"A simple package that allows you to simplify the use of MessagePort API more easily (Worker, IFrame...)","archived":false,"fork":false,"pushed_at":"2023-10-07T06:16:29.000Z","size":304,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-09T10:48:31.534Z","etag":null,"topics":["iframe","message","message-event","message-port-api","messageapi","messageport","postmessage","webworker"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/tachibana-shin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","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,"zenodo":null}},"created_at":"2022-09-03T07:27:57.000Z","updated_at":"2022-09-03T11:12:51.000Z","dependencies_parsed_at":"2025-06-05T15:05:13.210Z","dependency_job_id":"1a4a3d83-c7b6-4b7d-a901-09b5c2186dff","html_url":"https://github.com/tachibana-shin/message-port-api","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/tachibana-shin/message-port-api","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tachibana-shin%2Fmessage-port-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tachibana-shin%2Fmessage-port-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tachibana-shin%2Fmessage-port-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tachibana-shin%2Fmessage-port-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tachibana-shin","download_url":"https://codeload.github.com/tachibana-shin/message-port-api/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tachibana-shin%2Fmessage-port-api/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271748562,"owners_count":24813988,"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","status":"online","status_checked_at":"2025-08-23T02:00:09.327Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","message","message-event","message-port-api","messageapi","messageport","postmessage","webworker"],"created_at":"2024-11-21T23:14:31.622Z","updated_at":"2025-08-23T13:08:32.084Z","avatar_url":"https://github.com/tachibana-shin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# message-port-api\n\nA simple package that allows you to simplify the use of [MessagePort API](https://developer.mozilla.org/en-US/docs/Web/API/MessagePort) more easily (Worker, IFrame...)\n\n\u003e This is a very simple package. it cannot transfer complex data such as `function` or `class`. if you want to use `API` containing complex data use [workercom](https://npmjs.org/package/workercom)\n\n[![Build](https://github.com/tachibana-shin/message-port-api/actions/workflows/test.yml/badge.svg)](https://github.com/tachibana-shin/message-port-api/actions/workflows/test.yml)\n[![NPM](https://badge.fury.io/js/message-port-api.svg)](http://badge.fury.io/js/message-port-api)\n[![Size](https://img.shields.io/bundlephobia/minzip/message-port-api/latest)](https://npmjs.org/package/message-port-api)\n[![Languages](https://img.shields.io/github/languages/top/tachibana-shin/message-port-api)](https://npmjs.org/package/message-port-api)\n[![License](https://img.shields.io/npm/l/message-port-api)](https://npmjs.org/package/message-port-api)\n[![Star](https://img.shields.io/github/stars/tachibana-shin/message-port-api)](https://github.com/tachibana-shin/message-port-api/stargazers)\n[![Download](https://img.shields.io/npm/dm/message-port-api)](https://npmjs.org/package/message-port-api)\n\n## Installation\n\nNPM / Yarn / Pnpm\n\n```bash\npnpm add message-port-api\n```\n\n## Usage\n\n### Worker\n\nworker.ts\n\n```ts\nimport { useReceive } from \"message-port-api\"\n\nconst receive = useReceive(self)\n\nconst controllers = receive({\n  sum(a: number, b: number) {\n    return a + b\n  }\n})\n\nexport type Controller = typeof controller\n```\n\nindex.ts\n\n```ts\nimport Worker from \"./worker?worker\"\nimport type { Controller } from \"./worker\"\nimport { useSend } from \"message-port-api\"\n\nconst worker = new Worker()\n\nconst send = useSend(worker)\n\nconsole.log(await send\u003cController\u003e(\"sum\", [1, 2])) // 3\n```\n\n### IFrame\n\niframe\n\n```ts\nimport { useReceive } from \"message-port-api\"\n\nconst receive = useReceive(window, parent)\n\nreceive(\n  {\n    changeBg(color: string) {\n      document.body.style.backgroundColor = color\n    }\n  },\n  {\n    targetOrigin: \"*\"\n  }\n)\n```\n\nmain.ts\n\n```ts\nimport { useSend } from \"message-port-api\"\n\nconst send = useSend(window, () =\u003e iframe.contentWindow)\n\nawait send(\"changeBg\", [\"red\"])\n```\n\n## API\n\n### useReceive\n\nThis function will be located on the `host` side to handle the requested tasks\n\n```ts\nfunction useReceive(\n  sender: Sender, // contains `postMessage` function to send return results\n  receiver: Receiver // contains 2 functions `addEventListener` and `removeEventListener` to listen to and cancel the `message` event\n): receive\n\nfunction receive(\n  controllers: Record\u003cstring, Function\u003e, // processing functions\n  targetOptions?: string | WindowPostMessageOptions // option 2 propagates to `postMessage`\n): Controller\n```\n\n\u003e If you want to cancel the call `receive.cancel()'. This is useful when you use `receive` in components\n```ts\nimport { useReceive } from \"message-port-api\"\n\nconst receive = useReceive(self)\n\nreceive({ sum })\n\nreceive.cancel() // cancel receive call\n```\n\n\n### useSend\n\nThis function will be on the `client` side to send processing requests and return a Promise containing processed results from `receive` function\n\n```ts\nfunction useSend(\n  sender: Sender, // contains `postMessage` function to send processing request\n  receiver: Receiver // contains 2 functions `addEventLister` and `removeEventListener` to listen to and cancel the event `message` containing the results processed through the `receive` function,\n  timeout: boolean | number = 30000 // the interval that waits for data to return if the timeout throws a `TIMEOUT` error. Default is 30_0000\n): send\n\nfunction send\u003cControllers\u003e(\n  name: keyof Controllers, // function name for handling\n  arguments: Arguments\u003cControllers[name]\u003e, // processing function call parameter\n  targetOptions?: string | WindowPostMessageOptions // option 2 propagates to `postMessage`\n): Promise\u003cReturnType\u003cControllers[name]\u003e\u003e // prompt containing processed results\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftachibana-shin%2Fmessage-port-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftachibana-shin%2Fmessage-port-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftachibana-shin%2Fmessage-port-api/lists"}