Cross-framework Event Bus

This pattern shows three independent widgets sharing state without importing each other.

• React 19 widget (mountly-react)
• Vue widget (mountly-vue)
• Svelte widget (mountly-svelte)

They communicate through a host-level event bus and publish counter updates.

Why this matters

• No framework coupling between widgets.
• Incremental adoption on legacy pages.
• Works in default light DOM and with shadow: true.

Example location

• examples/cross-framework-bus

For new code, use mountly’s typed helper:

import { createEventBus } from "mountly/bus";

type CounterEvents = {
  changed: { source: "react" | "vue" | "svelte"; value: number };
};

const bus = createEventBus<CounterEvents>({ namespace: "counter" });

bus.emit("changed", { source: "react", value: 1 });

const off = bus.on("changed", (event) => {
  console.log(event.source, event.value);
});

The example app keeps the raw EventTarget version visible so the pattern is easy to inspect. The mountly/bus helper adds namespacing, typed payloads, unsubscribe helpers, and optional runtime validation. See Event bus.

Run

pnpm --filter cross-framework-bus dev

Then open the local Vite URL and click each framework button:

• + React
• + Vue
• + Svelte

Each widget view updates peer values from the other two frameworks.