Remote Call Mixin

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. Import the mixins: import RemoteCallCallerMixin from './remote-call-caller-mixin.js' and import RemoteCallReceiverMixin from './remote-call-receiver-mixin.js'

2. Extend your caller class: class MyCaller extends RemoteCallCallerMixin(HTMLElement)

3. Extend your receiver class: class MyReceiver extends RemoteCallReceiverMixin(HTMLElement)

4. Give your receiver component an ID: <my-receiver id="my-receiver"></my-receiver>

5. Call remote methods: this.callRemote('my-receiver', 'methodName', arg1, arg2)

6. Remember to call super.connectedCallback() and super.disconnectedCallback() in receiver components

          // Caller Component
          import RemoteCallCallerMixin from './remote-call-caller-mixin.js';

          class MyCaller extends RemoteCallCallerMixin(HTMLElement) {
          constructor() {
          super();
          this.innerHTML = '<button onclick="this.callRemote(\'my-receiver\',
          \'increment\')">Increment</button>';
          }
          }

          customElements.define('my-caller', MyCaller);
        

          // Receiver Component
          import RemoteCallReceiverMixin from './remote-call-receiver-mixin.js';

          class MyReceiver extends RemoteCallReceiverMixin(HTMLElement) {
          constructor() {
          super();
          this.counter = 0;
          this.innerHTML = `<div>Counter: <span id="counter">${this.counter}</span></div>`;
          }

          connectedCallback() {
          super.connectedCallback(); // Important!
          }

          increment() {
          this.counter++;
          this.querySelector('#counter').textContent = this.counter;
          }

          decrement() {
          this.counter--;
          this.querySelector('#counter').textContent = this.counter;
          }
          }

          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

📡 Remote Call Mixin