@coopenomics/desktop 2025.7.3 → 2025.11.8-alpha-2

package/src/shared/lib/widget/index.ts

@@ -0,0 +1,40 @@
+// Простые экспорты для widget системы
+export { PostMessageBridge } from './postmessage-bridge';
+export { WidgetMode, useWidgetMode, widgetModeInstance } from './widget-mode';
+export { useWidgetBridge } from './use-widget-bridge';
+export {
+  useWidgetEvents,
+  WidgetEventManager,
+  widgetEventManager,
+} from './widget-events';
+
+// Типы
+export * from './types';
+
+// Конфигурация
+export {
+  DEFAULT_WIDGET_CONFIG,
+  WIDGET_MESSAGE_TYPES,
+  isOriginAllowed,
+  createWidgetMessage,
+  isValidWidgetMessage,
+} from 'src/shared/config/widget';
+
+export type {
+  IWidgetConfig,
+  IWidgetMessage,
+  IWidgetAPI,
+  WidgetMessageType,
+} from 'src/shared/config/widget';
+
+export type { WidgetEventData, WidgetEventHandlers } from './widget-events';
+
+// Константы
+export const WIDGET_CONSTANTS = {
+  URL_PARAMS: {
+    WIDGET_MODE: 'widget',
+    WIDGET_CONFIG: 'widget_config',
+    WIDGET_ORIGIN: 'widget_origin',
+    WIDGET_PAGE: 'widget_page',
+  },
+} as const;

package/src/shared/lib/widget/postmessage-bridge.ts

@@ -0,0 +1,263 @@
+import {
+  IWidgetMessage,
+  IWidgetConfig,
+  WidgetMessageType,
+  WIDGET_MESSAGE_TYPES,
+  isOriginAllowed,
+  createWidgetMessage,
+  isValidWidgetMessage,
+} from 'src/shared/config/widget';
+
+// Проверка на существование window (для SSR)
+const isClient = typeof window !== 'undefined';
+
+export class PostMessageBridge {
+  private config: IWidgetConfig;
+  private parentWindow: Window | null = null;
+  private eventListeners: Map<string, Array<(data: any) => void>> = new Map();
+  private messageQueue: IWidgetMessage[] = [];
+  private isReady = false;
+  private pendingResponses: Map<string, (data: any) => void> = new Map();
+
+  constructor(config: IWidgetConfig) {
+    this.config = config;
+    this.init();
+  }
+
+  private init() {
+    // Инициализация только на клиенте
+    if (!isClient) return;
+
+    // Проверяем, работаем ли мы внутри iframe
+    if (window.parent !== window) {
+      this.parentWindow = window.parent;
+      this.setupMessageListener();
+    }
+  }
+
+  private setupMessageListener() {
+    if (!isClient) return;
+
+    window.addEventListener('message', (event) => {
+      this.handleMessage(event);
+    });
+  }
+
+  private handleMessage(event: MessageEvent) {
+    // Проверяем origin
+    if (!isOriginAllowed(event.origin, this.config.allowedOrigins)) {
+      console.warn(
+        `[Widget] Blocked message from unauthorized origin: ${event.origin}`,
+      );
+      return;
+    }
+
+    // Проверяем структуру сообщения
+    if (!isValidWidgetMessage(event.data)) {
+      console.warn('[Widget] Invalid message format:', event.data);
+      return;
+    }
+
+    const message = event.data as IWidgetMessage;
+
+    // Обрабатываем сообщение
+    this.processMessage(message);
+  }
+
+  private processMessage(message: IWidgetMessage) {
+    switch (message.type) {
+      case WIDGET_MESSAGE_TYPES.WIDGET_INIT:
+        this.handleInit(message.data);
+        break;
+
+      case WIDGET_MESSAGE_TYPES.WIDGET_SET_DATA:
+        this.handleSetData(message.data);
+        break;
+
+      case WIDGET_MESSAGE_TYPES.WIDGET_GET_DATA:
+        this.handleGetData(message.id);
+        break;
+
+      case WIDGET_MESSAGE_TYPES.WIDGET_NAVIGATE_TO:
+        this.handleNavigateTo(message.data);
+        break;
+
+      case WIDGET_MESSAGE_TYPES.WIDGET_UPDATE_CONFIG:
+        this.handleUpdateConfig(message.data);
+        break;
+
+      case WIDGET_MESSAGE_TYPES.WIDGET_DESTROY:
+        this.handleDestroy();
+        break;
+
+      default:
+        console.warn('[Widget] Unknown message type:', message.type);
+    }
+  }
+
+  private handleInit(data: any) {
+    console.log('[Widget] Initializing with data:', data);
+
+    // Обновляем конфигурацию если передана
+    if (data?.config) {
+      this.config = { ...this.config, ...data.config };
+    }
+
+    // Устанавливаем готовность
+    this.isReady = true;
+
+    // Отправляем сообщение о готовности
+    this.sendMessage(WIDGET_MESSAGE_TYPES.WIDGET_READY, {
+      config: this.config,
+      timestamp: Date.now(),
+    });
+
+    // Обрабатываем очередь сообщений
+    this.processMessageQueue();
+
+    // Вызываем обработчики
+    this.emit('ready', data);
+  }
+
+  private handleSetData(data: any) {
+    console.log('[Widget] Setting data:', data);
+    this.emit('data-change', data);
+  }
+
+  private handleGetData(messageId?: string) {
+    const responseData = this.emit('get-data');
+
+    if (messageId) {
+      this.sendMessage(
+        WIDGET_MESSAGE_TYPES.WIDGET_DATA_CHANGE,
+        responseData,
+        messageId,
+      );
+    }
+  }
+
+  private handleNavigateTo(path: string) {
+    console.log('[Widget] Navigate to:', path);
+    this.emit('navigate', path);
+  }
+
+  private handleUpdateConfig(config: Partial<IWidgetConfig>) {
+    console.log('[Widget] Updating config:', config);
+    this.config = { ...this.config, ...config };
+    this.emit('config-change', this.config);
+  }
+
+  private handleDestroy() {
+    console.log('[Widget] Destroying widget');
+    this.cleanup();
+    this.emit('destroy');
+  }
+
+  private processMessageQueue() {
+    while (this.messageQueue.length > 0) {
+      const message = this.messageQueue.shift();
+      if (message) {
+        this.sendMessageToParent(message);
+      }
+    }
+  }
+
+  // Публичные методы для отправки сообщений
+  public sendMessage(type: WidgetMessageType, data?: any, id?: string) {
+    if (!isClient) return;
+
+    const message = createWidgetMessage(type, data, id);
+
+    if (this.isReady) {
+      this.sendMessageToParent(message);
+    } else {
+      this.messageQueue.push(message);
+    }
+  }
+
+  private sendMessageToParent(message: IWidgetMessage) {
+    if (!isClient || !this.parentWindow) return;
+
+    // Отправляем сообщение всем разрешенным origins
+    this.config.allowedOrigins.forEach((origin) => {
+      if (origin !== '*' && this.parentWindow) {
+        this.parentWindow.postMessage(message, origin);
+      }
+    });
+
+    // Если разрешены все origins
+    if (this.config.allowedOrigins.includes('*') && this.parentWindow) {
+      this.parentWindow.postMessage(message, '*');
+    }
+  }
+
+  // Система событий
+  public on(event: string, callback: (data: any) => void) {
+    if (!this.eventListeners.has(event)) {
+      this.eventListeners.set(event, []);
+    }
+    const listeners = this.eventListeners.get(event);
+    if (listeners) {
+      listeners.push(callback);
+    }
+  }
+
+  public off(event: string, callback: (data: any) => void) {
+    const listeners = this.eventListeners.get(event);
+    if (listeners) {
+      const index = listeners.indexOf(callback);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    }
+  }
+
+  private emit(event: string, data?: any): any {
+    const listeners = this.eventListeners.get(event);
+    if (listeners) {
+      let result;
+      listeners.forEach((callback) => {
+        result = callback(data);
+      });
+      return result;
+    }
+  }
+
+  // Методы для отправки специфичных сообщений
+  public notifyDataChange(data: any) {
+    this.sendMessage(WIDGET_MESSAGE_TYPES.WIDGET_DATA_CHANGE, data);
+  }
+
+  public notifyError(error: any) {
+    this.sendMessage(WIDGET_MESSAGE_TYPES.WIDGET_ERROR, {
+      message: error.message || 'Unknown error',
+      stack: error.stack,
+      timestamp: Date.now(),
+    });
+  }
+
+  public notifyNavigation(path: string) {
+    this.sendMessage(WIDGET_MESSAGE_TYPES.WIDGET_NAVIGATE, { path });
+  }
+
+  public notifyResize(dimensions: { width: number; height: number }) {
+    this.sendMessage(WIDGET_MESSAGE_TYPES.WIDGET_RESIZE, dimensions);
+  }
+
+  // Очистка ресурсов
+  private cleanup() {
+    this.eventListeners.clear();
+    this.messageQueue.length = 0;
+    this.pendingResponses.clear();
+    this.isReady = false;
+  }
+
+  // Геттеры
+  public get isWidgetReady(): boolean {
+    return this.isReady;
+  }
+
+  public get widgetConfig(): IWidgetConfig {
+    return { ...this.config };
+  }
+}

package/src/shared/lib/widget/types.ts

@@ -0,0 +1,166 @@
+import { ComputedRef, Ref } from 'vue';
+
+// Базовые типы для widget системы
+export interface IWidgetSDKConfig {
+  baseUrl: string;
+  page?: string;
+  theme?: 'light' | 'dark';
+  width?: string;
+  height?: string;
+  allowedOrigins?: string[];
+}
+
+export interface IWidgetSDKEventHandlers {
+  onReady?: (data?: any) => void;
+  onDataChange?: (data: any) => void;
+  onError?: (error: any) => void;
+  onNavigate?: (path: string) => void;
+  onResize?: (dimensions: { width: number; height: number }) => void;
+  onDestroy?: () => void;
+}
+
+export interface IWidgetEventData {
+  type: string;
+  payload?: any;
+  timestamp: number;
+  source?: string;
+}
+
+export interface IWidgetState {
+  isWidget: boolean;
+  isReady: boolean;
+  parentOrigin: string;
+  config: any;
+}
+
+export interface IWidgetComposable {
+  isReady: Ref<boolean>;
+  isWidget: Ref<boolean>;
+  widgetData: Ref<any>;
+  config: any;
+  sendData: (data: any) => void;
+  sendError: (error: any) => void;
+  sendNavigation: (path: string) => void;
+  sendResize: (dimensions: { width: number; height: number }) => void;
+  on: (event: string, callback: (data: any) => void) => void;
+  off: (event: string, callback: (data: any) => void) => void;
+  emit: (event: string, data?: any) => void;
+  checkIfWidget: () => boolean;
+  cleanup: () => void;
+}
+
+export interface IWidgetRouterIntegration {
+  navigateToRoute: (path: string) => void;
+}
+
+export interface IWidgetStateIntegration {
+  watchStore: (store: any, key: string) => void;
+  sendCurrentState: (data: any) => void;
+}
+
+export interface IWidgetRouteMeta {
+  title?: string;
+  hideHeader?: boolean;
+  hideFooter?: boolean;
+  disableNavigation?: boolean;
+  theme?: 'light' | 'dark';
+}
+
+export interface IWidgetError {
+  type: 'vue-error' | 'js-error' | 'unhandled-rejection' | 'widget-error';
+  message: string;
+  stack?: string;
+  filename?: string;
+  lineno?: number;
+  colno?: number;
+  info?: string;
+  component?: string;
+  timestamp: number;
+}
+
+export interface IWidgetEventStats {
+  [eventType: string]: number;
+}
+
+export interface IWidgetEventHistory {
+  events: IWidgetEventData[];
+  lastEvent: IWidgetEventData | null;
+  errorCount: number;
+}
+
+export interface IWidgetEventManager {
+  initialize: () => void;
+  destroy: () => void;
+}
+
+export interface IWidgetGlobalState {
+  events: IWidgetEventData[];
+  lastEvent: IWidgetEventData | null;
+  errorCount: number;
+  isListening: boolean;
+}
+
+export interface IWidgetDefaultConfig {
+  enabled: boolean;
+  allowedOrigins: string[];
+  disableNavigation: boolean;
+  hideHeader: boolean;
+  hideFooter: boolean;
+  theme?: 'light' | 'dark';
+  locale?: string;
+  maxWidth?: string;
+  maxHeight?: string;
+}
+
+export interface IWidgetDimensions {
+  width: number;
+  height: number;
+}
+
+export interface IWidgetNavigationData {
+  path: string;
+  query?: Record<string, any>;
+  params?: Record<string, any>;
+}
+
+export interface IWidgetReadyData {
+  config: any;
+  timestamp: number;
+  data?: any;
+}
+
+export interface IWidgetConfigUpdate {
+  theme?: 'light' | 'dark';
+  hideHeader?: boolean;
+  hideFooter?: boolean;
+  disableNavigation?: boolean;
+  allowedOrigins?: string[];
+}
+
+export interface IWidgetInitData {
+  config?: IWidgetConfigUpdate;
+  data?: any;
+  origin?: string;
+}
+
+// Callback типы
+export type WidgetEventCallback = (data: any) => void;
+export type WidgetEventListener = (event: IWidgetEventData) => void;
+export type WidgetMessageHandler = (message: any) => void;
+
+// Типы для Vue App
+export interface IWidgetVueApp {
+  isWidget: ComputedRef<boolean>;
+  isReady: ComputedRef<boolean>;
+  config: ComputedRef<any>;
+}
+
+// Глобальные типы для приложения
+export interface WidgetGlobalProperties {
+  $widget: IWidgetVueApp;
+}
+
+// Типы для расширения Vue
+export interface WidgetProvide {
+  widget: IWidgetVueApp;
+}

package/src/shared/lib/widget/use-widget-bridge.ts

@@ -0,0 +1,200 @@
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
+import { PostMessageBridge } from './postmessage-bridge';
+import { IWidgetConfig, DEFAULT_WIDGET_CONFIG } from 'src/shared/config/widget';
+
+// Проверка на существование window (для SSR)
+const isClient = typeof window !== 'undefined';
+
+export function useWidgetBridge(initialConfig?: Partial<IWidgetConfig>) {
+  // Реактивные данные
+  const isReady = ref(false);
+  const isWidget = ref(false);
+  const widgetData = ref<any>(null);
+  const config = reactive<IWidgetConfig>({
+    ...DEFAULT_WIDGET_CONFIG,
+    ...initialConfig,
+  });
+
+  let bridge: PostMessageBridge | null = null;
+
+  // Проверяем, работаем ли мы в iframe
+  function checkIfWidget(): boolean {
+    return isClient && window.parent !== window;
+  }
+
+  // Инициализация bridge
+  function initBridge() {
+    if (!isClient) return;
+
+    if (checkIfWidget()) {
+      isWidget.value = true;
+      bridge = new PostMessageBridge(config);
+
+      // Подписываемся на события
+      bridge.on('ready', (data) => {
+        isReady.value = true;
+        if (data) {
+          widgetData.value = data;
+        }
+      });
+
+      bridge.on('data-change', (data) => {
+        widgetData.value = data;
+      });
+
+      bridge.on('config-change', (newConfig) => {
+        Object.assign(config, newConfig);
+      });
+
+      bridge.on('navigate', (path) => {
+        // Обрабатываем навигацию
+        navigateToPath(path);
+      });
+
+      bridge.on('destroy', () => {
+        cleanup();
+      });
+    }
+  }
+
+  // Навигация
+  function navigateToPath(path: string) {
+    if (!isClient) return;
+
+    // Здесь можно использовать Vue Router
+    console.log('Navigate to:', path);
+    // router.push(path);
+  }
+
+  // Методы для отправки данных
+  function sendData(data: any) {
+    if (bridge) {
+      bridge.notifyDataChange(data);
+    }
+  }
+
+  function sendError(error: any) {
+    if (bridge) {
+      bridge.notifyError(error);
+    }
+  }
+
+  function sendNavigation(path: string) {
+    if (bridge) {
+      bridge.notifyNavigation(path);
+    }
+  }
+
+  function sendResize(dimensions: { width: number; height: number }) {
+    if (bridge) {
+      bridge.notifyResize(dimensions);
+    }
+  }
+
+  // Система событий для подписки извне
+  const eventListeners = new Map<string, Array<(data: any) => void>>();
+
+  function on(event: string, callback: (data: any) => void) {
+    if (!eventListeners.has(event)) {
+      eventListeners.set(event, []);
+    }
+    const listeners = eventListeners.get(event);
+    if (listeners) {
+      listeners.push(callback);
+    }
+  }
+
+  function off(event: string, callback: (data: any) => void) {
+    const listeners = eventListeners.get(event);
+    if (listeners) {
+      const index = listeners.indexOf(callback);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    }
+  }
+
+  function emit(event: string, data?: any) {
+    const listeners = eventListeners.get(event);
+    if (listeners) {
+      listeners.forEach((callback) => callback(data));
+    }
+  }
+
+  // Автоматическое отслеживание изменений размера
+  function setupResizeObserver() {
+    if (!isClient) {
+      return () => {
+        // Пустая функция для SSR
+      };
+    }
+
+    if (typeof ResizeObserver !== 'undefined') {
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const { width, height } = entry.contentRect;
+          sendResize({ width, height });
+        }
+      });
+
+      resizeObserver.observe(document.body);
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+    // Возвращаем пустую функцию если ResizeObserver не поддерживается
+    return () => {
+      // Пустая функция очистки
+    };
+  }
+
+  let cleanupResize: (() => void) | null = null;
+
+  // Инициализация
+  onMounted(() => {
+    initBridge();
+
+    if (isWidget.value) {
+      cleanupResize = setupResizeObserver();
+    }
+  });
+
+  // Очистка
+  function cleanup() {
+    if (cleanupResize) {
+      cleanupResize();
+      cleanupResize = null;
+    }
+    bridge = null;
+    isReady.value = false;
+    eventListeners.clear();
+  }
+
+  onUnmounted(() => {
+    cleanup();
+  });
+
+  return {
+    // Состояние
+    isReady,
+    isWidget,
+    widgetData,
+    config,
+
+    // Методы
+    sendData,
+    sendError,
+    sendNavigation,
+    sendResize,
+
+    // События
+    on,
+    off,
+    emit,
+
+    // Утилиты
+    checkIfWidget,
+    cleanup,
+  };
+}