Skip to main content

Events And Requests

The child SDK exposes the iframe-app side of the bridge: child-to-parent events, parent-to-child events, and handlers for parent-initiated requests.

It does not expose child-to-parent RPC. There is no child request() method in the MVP.


Lifecycle Gate

await bridge.whenConnected();

whenConnected() resolves when the child has completed the handshake and received bridge:connected from the parent. Use it before sending application events if your app needs to know the parent accepted the bridge.

const bridge = createIframeChildBridge({
allowedParentOrigins: ['https://host.example'],
});

await bridge.whenConnected();
await bridge.sendEvent('app:ready', { version: '1.0.0' });

Send Events To The Parent

await bridge.sendEvent('cart:changed', { itemCount: 3 });

sendEvent() sends a bridge:event envelope to the accepted parent origin. It resolves after the message is posted; it does not mean the parent processed the event.

Use events for notifications, state changes, analytics, and child-to-parent signals that do not require a protocol-level response.


Receive Events From The Parent

const unsubscribe = bridge.on('theme:changed', (payload) => {
document.documentElement.dataset.theme = String(payload);
});

// Later:
unsubscribe();

on() registers a continuous listener for parent bridge:event messages with the matching name. The returned function removes that listener.

The child SDK validates origin, session id, protocol, version, and envelope shape before dispatching the event.


Handle Parent Requests

bridge.handleRequest('user:get', async (payload) => {
return { name: 'Ada' };
});

handleRequest() registers a persistent handler for parent-initiated bridge:request messages. When the parent calls bridge.request('user:get', payload), the child handler returns a payload or throws/rejects, and the child SDK sends the matching bridge:response. The handler stays registered and can respond to later user:get requests until you remove it or destroy the child bridge.

If you register handlers dynamically, keep the returned cleanup function and call it only when that handler should stop responding:

const stopHandlingUserGet = bridge.handleRequest('user:get', async (payload) => {
return { name: 'Ada' };
});

// Later, for route/component cleanup or handler replacement:
stopHandlingUserGet();

Child request handlers respond to parent bridge:request; the child does not initiate bridge:request.


No Child request()

The MVP child bridge has no request() method. This keeps the public contract aligned with the current wire protocol behavior: parent-to-child requests are supported, but child-to-parent requests are not.

If the child needs to ask the parent to do something, send an event and let the parent decide how to respond through a later event or parent-initiated request.

await bridge.sendEvent('checkout:requested', { cartId: 'cart_123' });

Cleanup

bridge.destroy();

destroy() removes the child bridge's message listeners, request handlers, event listeners, and plugin resources. Treat a destroyed bridge as terminal; create a new child bridge instance if the iframe app needs to reconnect.


Protocol Mapping

Child SDK APIWire messageDirection
whenConnected()bridge:ready then bridge:connectedChild -> Parent, then Parent -> Child
sendEvent()bridge:eventChild -> Parent
on()bridge:eventParent -> Child
handleRequest()bridge:request then bridge:responseParent -> Child, then Child -> Parent

For envelope fields and validation rules, see Wire Protocol.