Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/uimix-editor/remote-methods
Call remote methods through message-based communication (for sandboxed iframes etc)
https://github.com/uimix-editor/remote-methods
Last synced: 20 days ago
JSON representation
Call remote methods through message-based communication (for sandboxed iframes etc)
- Host: GitHub
- URL: https://github.com/uimix-editor/remote-methods
- Owner: uimix-editor
- License: mit
- Created: 2022-06-19T07:02:49.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-06-20T08:28:45.000Z (over 2 years ago)
- Last Synced: 2024-08-09T08:34:35.926Z (5 months ago)
- Language: TypeScript
- Size: 24.4 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# remote-methods
[](https://badge.fury.io/js/remote-methods)
Call remote methods through message-based communication (for sandboxed iframes etc)
It allows you to handle postMessage-based communication in more intuitive ways than using `window.postMessage` directly.
## Features
- Abstracts postMessage-based communication to method calls
- Does not depend on initialization timing
- `remote-methods` automatically detects the initialization of the opposite side and establishes communication (like the 3-way handshake)
- Simpler implementation than https://github.com/GoogleChromeLabs/comlink
- Supports any sort of message-based communication
- iframes, web workers, Electron IPC, VS Code webviews, etc
## Usage
### Example (iframe)
#### Parent window
```ts
import { setup, windowEndpoint, Remote } from "remote-methods";
const targetIframe = document.querySelector("iframe")!;
const api: MainAPI = {
mainGreet(name: string): string {
return `mainGreet: Hello, ${name}`;
},
async mainGreetAsync(name: string): Promise {
return `mainGreetAsync: Hello, ${name}`;
},
};
const sandboxAPI: Remote = setup(
api,
windowEndpoint(targetIframe.contentWindow!)
);
console.log(await sandboxAPI.sandboxGreet("Main"));
console.log(await sandboxAPI.sandboxGreetAsync("Main"));
```
#### Child window
```ts
import { setup, windowEndpoint, Remote } from "remote-methods";
const api: SandboxAPI = {
sandboxGreet(name: string): string {
return `sandboxGreet: Hello, ${name}`;
},
async sandboxGreetAsync(name: string): Promise {
return `sandboxGreetAsync: Hello, ${name}`;
},
};
const mainAPI: Remote = setup(
api,
windowEndpoint(window.parent!)
);
console.log(await mainAPI.mainGreet("Sandbox"));
console.log(await mainAPI.mainGreetAsync("Sandbox"));
```
#### Common type definitions
```ts
export interface SandboxAPI {
sandboxGreet(name: string): string;
sandboxGreetAsync(name: string): Promise;
}
export interface MainAPI {
mainGreet(name: string): string;
mainGreetAsync(name: string): Promise;
}
```
### Implementing own endpoints
```ts
interface Endpoint {
addEventListener(listener: (data: any) => void): () => void;
postMessage(data: any): void;
}
```
```ts
import { Endpoint } from "remote-methods";
const myEndpoint: Endpoint = {
addEventListener(listener: (data: any) => void): () => void {
...
return disposeFunction
},
postMessage(data: any): void {
...
}
};
const remoteAPI = setup(api, myEndpoint);
```
## TODO
- [ ] Disconnecting
- [ ] Support callbacks
- [ ] Transferables