В новом шаблоне реализованы ивенты для работы с компонентами.
Новый шаблон имплементирован на React 18.Перед использовании ивентов рекомендуем ознакомиться с концепцией жизненного цикла в компоненте React.Отслеживание жизненного цикла компонента осуществляться через свойство componentsManager глобального объекта window.
Для получения componentsManager необходимо сделать следующие:
function main() {
// Код вашей программы здесь.
}
if(window.isAppReady) {
main()
// Переходите к следующему пункту
} else {
window.addEventListener('appReady', () => {
main()
// Переходите к следующему пункту
})
}
window.dispatchEvent(new CustomEvent("initComponentsManager"));
После этого у вас появится доступ к window.componentsManager
Весь код выглядит так:
function main() {
window.dispatchEvent(new CustomEvent("initComponentsManager"));
// Ваша логика с window.componentsManager
}
if(window.isAppReady) {
main()
} else {
window.addEventListener('appReady', () => {
main()
})
}
Подписка на ивент компонента
window.componentsManager.addListener('HEADER', 'DID_MOUNT') => {
console.log('Произошло монтирование компонента Header')
})
Отписка от ивента компонента
window.componentsManager.removeListener('HEADER', 'DID_MOUNT', fn)
Загрузка очереди
window.componentsManager.load()
Загрузка затригерит все события что были вызваны до вашего кода| Ивент | Описание |
|---|---|
| WILL_MOUNT | Вызывается перед монтированием компонента на экран. Здесь можно установить начальное состояние и выполнить другие подготовительные действия |
| DID_MOUNT | Вызывается после успешного монтирования компонента на экран. Здесь можно выполнять запросы к серверу, устанавливать подписки на события и выполнять другие действия, которые требуют доступа к DOM или внешним данным |
| WILL_UPDATE | Вызывается перед обновлением компонента. Здесь можно выполнить подготовительные действия перед обновлением состояния или пропсов |
| DID_UPDATE | Вызывается после успешного обновления компонента. Здесь можно выполнять действия, которые требуют доступа к DOM или внешним данным после обновления состояния или пропсов |
| WILL_UNMOUNT | Вызывается перед удалением компонента с экрана. Здесь можно выполнять очистку ресурсов, отменять подписки на события и выполнять другие действия перед удалением компонента |
| DID_UNMOUNT | Вызывается после успешного удаления компонента с экрана. Здесь можно выполнять дополнительные действия после удаления компонента |
| Компонент | Описание |
|---|---|
| HEADER | Шапка сайта |
| SELECT_DEFAULT_SERVER_MODAL | Модальное окно дефолтного выбора сервера |
| WIDGETS | Виджеты |
| ITEM_PRODUCT_MODAL | Модальное окно продукта "Товар" |
| ROULETTE_PRODUCT_MODAL | Модальное окно продукта "Рулетка" |
| KIT_PRODUCT_MODAL | Модальное окно продукта "Набор" |
| DROPDOWN_PRODUCT_MODAL | Модальное окно продукта "Выпадашка" |
| PROFILE_INFO | Информация о профиле |
| PROFILE_CART | Корзина профиля |
| PROFILE_HISTORY | История профиля |
| PRODUCTS | Продукты |
| FILTERS | Фильтры продуктов |
| BALANCE_MODAL | Модальное окно баланса |
| SHOP_PAGE | Страница магазина |
| PROFILE_PAGE | Страница профиля |
| SUPPORT_PAGE | Страница поддержки |
| CUSTOM_PAGE | Статическая страница |
| CHAT_AUTH_MODAL | Модальное окно авторизации через игровой чат |
function main() {
window.dispatchEvent(new CustomEvent("initState"));
window.dispatchEvent(new CustomEvent("initComponentsManager"));
window.componentsManager.addListener('HEADER', 'DID_MOUNT', () => {
const { player } = window.getState().player
if(!player) return
const userAvatar = `
<div style="border-radius: 50%; border: 1px dashed var(--accent-color-800); width: 38px; height: 38px">
<img style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;" src="${player.avatar}"></img>
</div>
`
const profileLink = document.querySelector('.PlayerMenu-module__profileLink')
profileLink.insertAdjacentHTML('beforebegin', userAvatar)
})
window.componentsManager.load()
}
if(window.isAppReady) {
main()
} else {
window.addEventListener('appReady', () => {
main()
})
}
function main() {
window.dispatchEvent(new CustomEvent("initState"));
window.dispatchEvent(new CustomEvent("initComponentsManager"));
window.componentsManager.addListener("CHAT_AUTH_MODAL", "DID_MOUNT", () => {
const header = document.querySelector('.ChatAuthModal-module__header');
if (header) header.textContent = 'Вход';
const body = document.querySelector('.ChatAuthModal-module__body');
if (body) {
const link = document.createElement('a');
link.href = '/api/v1/player.login?login';
link.textContent = 'Войти через Steam';
link.className = 'Button-module__btn Button-module__accent';
const divider = document.createElement('div');
divider.style.cssText = 'display:flex;align-items:center;gap:10px;margin:16px 0;color:#888;font-size:14px;';
const lineLeft = document.createElement('span');
lineLeft.style.cssText = 'flex:1;height:1px;background:currentColor;opacity:.4;';
const lineRight = lineLeft.cloneNode();
const label = document.createElement('span');
label.textContent = 'или';
divider.append(lineLeft, label, lineRight);
body.prepend(link, divider);
}
});
window.componentsManager.load()
}
if(window.isAppReady) {
main()
} else {
window.addEventListener('appReady', () => {
main()
})
}
Файл декларации для TypeScript
enum EComponentNameSpaces {
HEADER = 'HEADER',
SELECT_DEFAULT_SERVER_MODAL = 'SELECT_DEFAULT_SERVER_MODAL',
WIDGETS = 'WIDGETS',
ITEM_PRODUCT_MODAL = 'ITEM_PRODUCT_MODAL',
ROULETTE_PRODUCT_MODAL = 'ROULETTE_PRODUCT_MODAL',
KIT_PRODUCT_MODAL = 'KIT_PRODUCT_MODAL',
DROPDOWN_PRODUCT_MODAL = 'DROPDOWN_PRODUCT_MODAL',
PROFILE_INFO = 'PROFILE_INFO',
PROFILE_CART = 'PROFILE_CART',
PROFILE_HISTORY = 'PROFILE_HISTORY',
PRODUCTS = 'PRODUCTS',
FILTERS = 'FILTERS',
BALANCE_MODAL = 'BALANCE_MODAL',
SHOP_PAGE = 'SHOP_PAGE',
PROFILE_PAGE = 'PROFILE_PAGE',
SUPPORT_PAGE = 'SUPPORT_PAGE',
CUSTOM_PAGE = 'CUSTOM_PAGE',
CHAT_AUTH_MODAL = 'CHAT_AUTH_MODAL'
}
enum EComponentActions {
WILL_MOUNT = 'WILL_MOUNT',
DID_MOUNT = 'DID_MOUNT',
WILL_UPDATE = 'WILL_UPDATE',
DID_UPDATE = 'DID_UPDATE',
WILL_UNMOUNT = 'WILL_UNMOUNT',
DID_UNMOUNT = 'DID_UNMOUNT'
}
declare global {
interface Window {
isAppReady?: boolean
componentsManager: {
addListener: (
namespace: EComponentNameSpaces,
action: EComponentActions,
callback: Function
) => void
removeListener: (
namespace: EComponentNameSpaces,
action: EComponentActions,
callback: Function
) => void
load: () => void
}
}