@u-devtools/core 0.1.5 → 0.2.0

package/src/control.ts

@@ -2,38 +2,38 @@ import type { AppBridge } from './bridge-app';
 
 export interface OverlayContext {
   /**
-   * Открыть основное окно DevTools
+   * Open the main DevTools window
    */
   open: () => void;
 
   /**
-   * Закрыть основное окно DevTools
+   * Close the main DevTools window
    */
   close: () => void;
 
   /**
-   * Переключить состояние окна
+   * Toggle window state
    */
   toggle: () => void;
 
   /**
-   * Текущее состояние
+   * Current state
    */
   isOpen: boolean;
 
   /**
-   * Переключить на плагин по имени
+   * Switch to plugin by name
    */
   switchPlugin: (pluginName: string) => void;
 
   /**
-   * Переключить таб внутри плагина по имени таба
+   * Switch tab within plugin by tab name
    */
   switchTab: (pluginName: string, tabName: string) => void;
 
   /**
-   * Создать временный мост для отправки сообщения.
-   * Полезно, если у вас нет доступа к глобальному мосту плагина в данной области видимости.
+   * Create a temporary bridge for sending messages.
+   * Useful if you don't have access to the plugin's global bridge in this scope.
    */
   createBridge: (namespace: string) => AppBridge;
 }
@@ -41,12 +41,12 @@ export interface OverlayContext {
 export interface OverlayMenuItem {
   id: string;
   label: string;
-  icon?: string; // Имя иконки (Heroicons) - для обратной совместимости
-  iconSvg?: string; // SVG как текст
-  iconUrl?: string; // URL к иконке
+  icon?: string; // Icon name (Heroicons) - for backward compatibility
+  iconSvg?: string; // SVG as text
+  iconUrl?: string; // URL to icon
   order?: number;
   /**
-   * Обработчики событий (принимают контекст)
+   * Event handlers (receive context)
    */
   onClick?: (ctx: OverlayContext, event: MouseEvent) => void;
   onDoubleClick?: (ctx: OverlayContext, event: MouseEvent) => void;
@@ -61,72 +61,43 @@ export interface OverlayMenuItem {
   onBlur?: (ctx: OverlayContext, event: FocusEvent) => void;
 }
 
-export const OVERLAY_EVENT = 'u-devtools:register-menu-item';
-
 declare global {
   interface Window {
     __UDEVTOOLS_MENU_ITEMS__?: OverlayMenuItem[];
   }
 }
 
-/**
- * Функция для регистрации кнопки в оверлее (вызывается из app.ts плагина)
- */
-export function registerMenuItem(item: OverlayMenuItem) {
-  if (typeof window === 'undefined') return;
-
-  // Инициализируем глобальный массив, если его нет
-  if (!window.__UDEVTOOLS_MENU_ITEMS__) {
-    window.__UDEVTOOLS_MENU_ITEMS__ = [];
-  }
-
-  // Сохраняем элемент в глобальный массив (для случаев, когда overlay еще не загружен)
-  const existingIdx = window.__UDEVTOOLS_MENU_ITEMS__.findIndex((i) => i.id === item.id);
-  if (existingIdx !== -1) {
-    window.__UDEVTOOLS_MENU_ITEMS__[existingIdx] = item;
-  } else {
-    window.__UDEVTOOLS_MENU_ITEMS__.push(item);
-  }
-
-  // Отправляем событие, которое поймает Vue-приложение оверлея (для обратной совместимости)
-  window.dispatchEvent(
-    new CustomEvent(OVERLAY_EVENT, {
-      detail: item,
-    })
-  );
-}
-
 export class DevToolsControl {
   private channel: BroadcastChannel;
 
   constructor() {
-    // Единый канал для управления состоянием
+    // Single channel for state management
     this.channel = new BroadcastChannel('u-devtools:control');
   }
 
   /**
-   * Открыть DevTools
+   * Open DevTools
    */
   open() {
     this.channel.postMessage({ action: 'open' });
   }
 
   /**
-   * Закрыть DevTools
+   * Close DevTools
    */
   close() {
     this.channel.postMessage({ action: 'close' });
   }
 
   /**
-   * Переключить состояние
+   * Toggle state
    */
   toggle() {
     this.channel.postMessage({ action: 'toggle' });
   }
 
   /**
-   * Получить текущее состояние (асинхронно)
+   * Get current state (asynchronously)
    */
   isOpen(): Promise<boolean> {
     return new Promise((resolve) => {
@@ -138,10 +109,10 @@ export class DevToolsControl {
       };
 
       this.channel.addEventListener('message', handler);
-      // Запрашиваем состояние
+      // Request state
       this.channel.postMessage({ action: 'get-state' });
 
-      // Таймаут на случай, если девтулс не загружен
+      // Timeout in case DevTools is not loaded
       setTimeout(() => {
         this.channel.removeEventListener('message', handler);
         resolve(false);
@@ -150,7 +121,7 @@ export class DevToolsControl {
   }
 
   /**
-   * Подписаться на изменение состояния
+   * Subscribe to state changes
    */
   onStateChange(cb: (isOpen: boolean) => void) {
     const handler = (e: MessageEvent) => {
@@ -163,14 +134,14 @@ export class DevToolsControl {
   }
 
   /**
-   * Переключить на плагин по имени
+   * Switch to plugin by name
    */
   switchPlugin(pluginName: string) {
     this.channel.postMessage({ action: 'switch-plugin', pluginName });
   }
 
   /**
-   * Переключить таб внутри плагина по имени таба
+   * Switch tab within plugin by tab name
    */
   switchTab(pluginName: string, tabName: string) {
     this.channel.postMessage({ action: 'switch-tab', pluginName, tabName });
@@ -181,5 +152,5 @@ export class DevToolsControl {
   }
 }
 
-// Экспортируем синглтон для удобства
+// Export singleton for convenience
 export const devtools = new DevToolsControl();

package/src/event-bus.ts

@@ -0,0 +1,126 @@
+/**
+ * Typed Event Bus for inter-plugin communication
+ */
+
+/**
+ * EventBus events interface.
+ * Plugins can extend this interface through module augmentation.
+ *
+ * @example
+ * ```typescript
+ * // In your plugin
+ * declare module '@u-devtools/core' {
+ *   interface BusEvents {
+ *     'my-plugin:custom-event': { data: string };
+ *   }
+ * }
+ * ```
+ */
+export interface BusEvents {
+  'plugin:mounted': { name: string };
+  'plugin:unmounted': { name: string };
+  navigate: { path: string };
+  'settings:changed': { key: string; value: unknown };
+  'storage:changed': { key: string; value: unknown };
+  [key: string]: unknown;
+}
+
+/**
+ * Typed Event Emitter for inter-plugin communication.
+ * Provides type-safe event emission and subscription.
+ * 
+ * @template T - Type definition for events and their data
+ * 
+ * @example
+ * ```typescript
+ * import { TypedEventBus, type BusEvents } from '@u-devtools/core';
+ * 
+ * // Create event bus instance
+ * const bus = new TypedEventBus<BusEvents>();
+ * 
+ * // Emit events
+ * bus.emit('plugin:mounted', { name: 'my-plugin' });
+ * bus.emit('navigate', { path: '/settings' });
+ * bus.emit('settings:changed', { key: 'theme', value: 'dark' });
+ * 
+ * // Subscribe to events
+ * const unsubscribe1 = bus.on('plugin:mounted', ({ name }) => {
+ *   console.log(`Plugin ${name} was mounted`);
+ * });
+ * 
+ * const unsubscribe2 = bus.on('navigate', ({ path }) => {
+ *   console.log(`Navigating to: ${path}`);
+ * });
+ * 
+ * // Unsubscribe
+ * unsubscribe1();
+ * unsubscribe2();
+ * 
+ * // Or use off method (handler must be the same function reference)
+ * const handler = ({ name }: { name: string }) => {
+ *   console.log(`Plugin ${name} was mounted`);
+ * };
+ * bus.on('plugin:mounted', handler);
+ * bus.off('plugin:mounted', handler);
+ * ```
+ */
+export class TypedEventBus<T extends Record<string, unknown> = BusEvents> {
+  private listeners = new Map<keyof T, Set<(data: T[keyof T]) => void>>();
+
+  /**
+   * Emit an event
+   */
+  emit<K extends keyof T>(event: K, data: T[K]): void {
+    const handlers = this.listeners.get(event);
+    if (handlers) {
+      handlers.forEach((fn) => {
+        fn(data);
+      });
+    }
+  }
+
+  /**
+   * Subscribe to an event
+   */
+  on<K extends keyof T>(event: K, handler: (data: T[K]) => void): () => void {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, new Set());
+    }
+    const handlers = this.listeners.get(event);
+    if (handlers) {
+      handlers.add(handler as (data: T[keyof T]) => void);
+    }
+
+    // Return unsubscribe function
+    return () => {
+      this.off(event, handler);
+    };
+  }
+
+  /**
+   * Unsubscribe from an event
+   */
+  off<K extends keyof T>(event: K, handler: (data: T[K]) => void): void {
+    const handlers = this.listeners.get(event);
+    if (handlers) {
+      handlers.delete(handler as (data: T[keyof T]) => void);
+      if (handlers.size === 0) {
+        this.listeners.delete(event);
+      }
+    }
+  }
+
+  /**
+   * Clear all subscriptions
+   */
+  clear(): void {
+    this.listeners.clear();
+  }
+
+  /**
+   * Get the number of subscribers for an event
+   */
+  listenerCount<K extends keyof T>(event: K): number {
+    return this.listeners.get(event)?.size || 0;
+  }
+}