Message Bus

While Polypane syncs all interaction events, there are some events we can't accurately sync:

• Closed root webcomponents, since they don't emit events beyond their own shadowRoot.
• Events on canvas elements/where the exact x,y position is significant (transposing them won't always work, so we don't).

For these situations, you can use the Polypane Message Bus to communicate data to all other panes.

Message Bug API

The Polypane Message Bus is available on window.__PolypaneBus and features three functions:

window.__PolypaneBus.send(channel, data)

• channel, string
• data, any serializable javascript data (objects, strings, arrays)

Sends a message to all other panes.

window.__PolypaneBus.on(channel, callback)

• channel, string
• callback, function
  • data, the data sent

This adds a listener on channel that executes the callback function with the received data as only argument every time the send API is called in another pane.

The function returns a Symbol that you can store as a reference. You can add multiple listeners to a single channel.

window.__PolypaneBus.off(channel)

• channel, string or Symbol

Use this to turn off all the listeners on a channel when you use a string, or turn off a single listener if you use the Symbol returned by the on API.

Use-cases

As mentioned at the top of this page, you can use this to sync state or events across panes for when these aren't already synced by Polypane.

You can sync DOM events, or their result, on closed web components so these can be tested across screen sizes quickly.

You can sync global game states between panes on change to keep e.g. canvas games in sync between panes while you test different devices.

Got a cool use case? let us know!

Only use the Message Bus in Polypane

There are various ways to detect Polypane, and of course the __PolypaneBus API won't be available elsewhere.

You can use this to selectively sync events only in Polypane, or to remove these calls from your code during a build step.