Universal DevTools Kit SDK / @u-devtools/core / AppBridge
Class: AppBridge<Protocol>
Defined in: bridge-app.ts:150
AppBridge - Typed communication bridge between App context (main window) and Client context (DevTools iframe).
Communication: App ↔ Client via BroadcastChannel API
Provides type-safe event-based communication with automatic state synchronization.
Example
import { AppBridge } from '@u-devtools/core';
// Define protocol for type-safe communication
interface MyPluginProtocol {
'element-selected': (data: { id: string; html: string }) => void;
'toggle-inspector': (data: { state: boolean }) => void;
}
const typedBridge = new AppBridge<MyPluginProtocol>('my-plugin');
// Send events (type-safe)
typedBridge.send('element-selected', { id: 'el-1', html: '<div>...</div>' });
// Listen to events (type-safe)
typedBridge.on('toggle-inspector', ({ state }) => {
// state is automatically typed as { state: boolean }
console.log('Inspector toggled:', state);
});
// Create synced state
const selectedElement = typedBridge.state<HTMLElement | null>('selectedElement', null);
selectedElement.value = document.getElementById('my-element');Type Parameters
| Type Parameter | Default type | Description |
|---|---|---|
Protocol | Record<string, (...args) => any> | Type definition for events and their handlers |
Constructors
Constructor
new AppBridge<
Protocol>(namespace):AppBridge<Protocol>
Defined in: bridge-app.ts:155
Parameters
| Parameter | Type |
|---|---|
namespace | string |
Returns
AppBridge<Protocol>
Properties
displayName
displayName:
string
Defined in: bridge-app.ts:153
namespace
namespace:
string
Defined in: bridge-app.ts:152
Methods
close()
close():
void
Defined in: bridge-app.ts:207
Returns
void
on()
on<
K>(event,cb): () =>void
Defined in: bridge-app.ts:171
Type Parameters
| Type Parameter |
|---|
K extends string | number | symbol |
Parameters
| Parameter | Type |
|---|---|
event | K |
cb | Protocol[K] extends (...args) => any ? (data) => void : never |
Returns
():
void
Returns
void
request()
request<
RequestData,ResponseData>(requestEvent,requestData,responseEvent,timeout,responseFilter?):Promise<ResponseData>
Defined in: bridge-app.ts:180
Type Parameters
| Type Parameter |
|---|
RequestData |
ResponseData |
Parameters
| Parameter | Type | Default value |
|---|---|---|
requestEvent | string | undefined |
requestData | RequestData | undefined |
responseEvent | string | undefined |
timeout | number | 5000 |
responseFilter? | (request, response) => boolean | undefined |
Returns
Promise<ResponseData>
send()
send<
K>(event, ...args):void
Defined in: bridge-app.ts:163
Type Parameters
| Type Parameter |
|---|
K extends string | number | symbol |
Parameters
| Parameter | Type |
|---|---|
event | K |
...args | Protocol[K] extends (...args) => any ? P : [] |
Returns
void
state()
state<
T>(key,initialValue):SyncedState<T>
Defined in: bridge-app.ts:211
Type Parameters
| Type Parameter |
|---|
T |
Parameters
| Parameter | Type |
|---|---|
key | string |
initialValue | T |
Returns
SyncedState<T>