About Remote Call Mixin
This mixin enables components to call methods on other components remotely using custom events. It consists of two parts: RemoteCallCallerMixin for sending method calls and RemoteCallReceiverMixin for receiving and executing them. Perfect for decoupled component communication using component IDs.
🔗 Connection Status
Checking connection...
📤 Caller Component
Click the buttons below to call methods on the receiver component:
📖 Implementation Guide
How to Use the Remote Call Mixin:
1. Register the mixin tags:
import { RemoteCallCallerMixin, RemoteCallReceiverMixin } from 'ars-web-components';
if (!customElements.get('remote-call-caller-mixin')) {
customElements.define('remote-call-caller-mixin', RemoteCallCallerMixin);
}
if (!customElements.get('remote-call-receiver-mixin')) {
customElements.define('remote-call-receiver-mixin', RemoteCallReceiverMixin);
}2. Wrap your caller/receiver content with the mixin elements and give the receiver an ID.
3. The caller dispatches a remote-call event; the receiver forwards it to the wrapped target.
// Standalone usage
<remote-call-caller-mixin receiver="my-receiver" method="increment">
<button>Increment</button>
</remote-call-caller-mixin>
<remote-call-receiver-mixin id="my-receiver" allow="increment decrement">
<my-counter></my-counter>
</remote-call-receiver-mixin>
// Extending the concrete mixin classes
import { RemoteCallCallerMixin, RemoteCallReceiverMixin } from 'ars-web-components';
class MyCaller extends RemoteCallCallerMixin {
constructor() {
super();
this.setAttribute('receiver', 'my-receiver');
this.setAttribute('method', 'increment');
}
}
class MyReceiver extends RemoteCallReceiverMixin {
constructor() {
super();
this.counter = 0;
}
increment() {
this.counter++;
}
}
customElements.define('my-caller', MyCaller);
customElements.define('my-receiver', MyReceiver);
// Usage in HTML:
// <my-receiver id="my-receiver"></my-receiver>
✨ Features
What the Remote Call Mixin Provides:
- Decoupled Communication: Components can communicate without direct references
- Method Calling: Call any public method on any component by ID
- Argument Passing: Pass multiple arguments to remote methods
- Security: Private methods (starting with _) are automatically blocked
- Error Handling: Graceful error handling for non-existent methods
- Event-Based: Uses custom events for reliable communication
- Simple Setup: Just extend the mixin and give your receiver an ID
- Lifecycle Management: Proper cleanup in disconnectedCallback