1. YCLIENTS
  2. Маркетплейс интеграций
  3. Плагинизация
  4. Руководство по созданию Frontend плагина
  5. Событийная модель
  6. DocumentEventEmitter

DocumentEventEmitter


Класс для работы с событиями документа. Реализует интерфейс IDocumentEventEmitter и добавляет обработку событий на уровне document.

Основные возможности

  • Подписка на события документа
  • Отправка событий на уровне документа
  • Типизированная работа с событиями
  • Автоматическая очистка слушателей

API Reference

Методы

onDocument(eventName, listener)

Подписка на событие документа.

onDocument<T>(eventName: string, listener: CustomEventListener<T>): void

offDocument(eventName, listener)

Отписка от события документа.

offDocument<T>(eventName: string, listener: CustomEventListener<T>): void

emit(eventName, detail)

Отправка события на уровне документа.

emit(eventName: string, detail?: T): void

Примеры использования

Базовое использование

import { DocumentEventEmitter } from '@yclients-plugins/utils';

const emitter = new DocumentEventEmitter<string>();

// Подписка на событие
emitter.onDocument('user-login', (event) => {
  console.log('User logged in:', event.detail);
});

// Отправка события
emitter.emit('user-login', 'john.doe@example.com');

Использование с интерфейсами

import { DocumentEventEmitter } from '@yclients-plugins/utils';

interface UserData {
  id: number;
  name: string;
  email: string;
}

const emitter = new DocumentEventEmitter<UserData>();

// Подписка на событие
emitter.onDocument('user-update', (event) => {
  console.log('User updated:', event.detail.name);
});

// Отправка события
emitter.emit('user-update', {
  id: 1,
  name: 'John Doe',
  email: 'john@example.com',
});

Использование в плагинах

import { DocumentEventEmitter } from '@yclients-plugins/utils';

interface PluginEvent {
  type: 'ready' | 'update';
  payload: any;
}

class MyPlugin {
  private eventEmitter = new DocumentEventEmitter<PluginEvent>();

  init() {
    // Подписка на события хоста
    this.eventEmitter.onDocument('host-ready', (event) => {
      console.log('Host is ready:', event.detail);
    });

    // Отправка события готовности плагина
    this.eventEmitter.emit('plugin-ready', {
      type: 'ready',
      payload: { status: 'initialized' },
    });
  }
}

Использование с универсальным типом TPluginEvent

import { DocumentEventEmitter, TPluginEvent } from '@yclients-plugins/utils';

interface UserEvent {
  id: number;
  name: string;
}

const emitter = new DocumentEventEmitter<TPluginEvent<UserEvent>>();

// Подписка на событие
emitter.onDocument('user:created', (event) => {
  console.log('User created:', event.detail.payload.name);
  console.log('Container ID:', event.detail.containerId);
  console.log('Area:', event.detail.area);
});

// Отправка события
emitter.emit('user:created', {
  area: 'my-plugin-area',
  containerId: 'container-123',
  payload: {
    id: 1,
    name: 'John Doe',
  },
});

Использование глобального DocumentEventEmitter

import { documentEventEmitter } from '@yclients-plugins/utils';

// Подписка на глобальное событие документа
documentEventEmitter.onDocument('app:initialized', (event) => {
  console.log('Application initialized:', event.detail);
});

// Вызов глобального события документа
documentEventEmitter.emit('app:initialized', { version: '1.0.0' });

Экспорты

Основные экспорты

import { DocumentEventEmitter } from '@yclients-plugins/utils';

Глобальный синглтон

import { documentEventEmitter } from '@yclients-plugins/utils';

Типы

import type { CustomEventListener } from '@yclients-plugins/utils';
Предыдущая статья EventEmitter
Следующая статья Сборка и локальная разработка