ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Refactoring] Teact: Refactor dom-events and better debug

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-01-05 17:45:58 +01:00
parent 846b47cb32
commit f156be13ce
3 changed files with 65 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/lib/teact/dom-events.ts
View File

@ -1,102 +1,103 @@
import { DEBUG } from '../../config'; import { DEBUG } from '../../config';
type Handler = (e: Event) => void; type Handler = (e: Event) => void;
type DelegationRegistry = Map<HTMLElement, Handler>;
const NON_BUBBLEABLE_EVENTS = new Set(['scroll', 'mouseenter', 'mouseleave']); const NON_BUBBLEABLE_EVENTS = new Set(['scroll', 'mouseenter', 'mouseleave']);
const delegationRegistry: Record<string, Map<HTMLElement, Handler>> = {};
const delegatedEventsByElement = new Map<HTMLElement, Set<string>>();
const documentEventCounters: Record<string, number> = {}; const documentEventCounters: Record<string, number> = {};
const delegationRegistryByEventType: Record<string, DelegationRegistry> = {};
const delegatedEventTypesByElement = new Map<HTMLElement, Set<string>>();
export function addEventListener(element: HTMLElement, propName: string, handler: Handler, asCapture = false) { export function addEventListener(element: HTMLElement, propName: string, handler: Handler, asCapture = false) {
const eventName = resolveEventName(propName, element); const eventType = resolveEventType(propName, element);
if (canUseEventDelegation(eventName, element, asCapture)) { if (canUseEventDelegation(eventType, element, asCapture)) {
addDelegatedListener(eventName, element, handler); addDelegatedListener(eventType, element, handler);
} else { } else {
element.addEventListener(eventName, handler, asCapture); element.addEventListener(eventType, handler, asCapture);
} }
} }
export function removeEventListener(element: HTMLElement, propName: string, handler: Handler, asCapture = false) { export function removeEventListener(element: HTMLElement, propName: string, handler: Handler, asCapture = false) {
const eventName = resolveEventName(propName, element); const eventType = resolveEventType(propName, element);
if (canUseEventDelegation(eventName, element, asCapture)) { if (canUseEventDelegation(eventType, element, asCapture)) {
removeDelegatedListener(eventName, element); removeDelegatedListener(eventType, element);
} else { } else {
element.removeEventListener(eventName, handler, asCapture); element.removeEventListener(eventType, handler, asCapture);
} }
} }
function resolveEventName(propName: string, element: HTMLElement) { function resolveEventType(propName: string, element: HTMLElement) {
const eventName = propName const eventType = propName
.replace(/^on/, '') .replace(/^on/, '')
.replace(/Capture$/, '').toLowerCase(); .replace(/Capture$/, '').toLowerCase();
if (eventName === 'change' && element.tagName !== 'SELECT') { if (eventType === 'change' && element.tagName !== 'SELECT') {
// React behavior repeated here. // React behavior repeated here.
// https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput // https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput
return 'input'; return 'input';
} }
if (eventName === 'doubleclick') { if (eventType === 'doubleclick') {
return 'dblclick'; return 'dblclick';
} }
// Replace focus/blur by their "bubbleable" versions // Replace focus/blur by their "bubbleable" versions
if (eventName === 'focus') { if (eventType === 'focus') {
return 'focusin'; return 'focusin';
} }
if (eventName === 'blur') { if (eventType === 'blur') {
return 'focusout'; return 'focusout';
} }
return eventName; return eventType;
} }
function canUseEventDelegation(realEventName: string, element: HTMLElement, asCapture: boolean) { function canUseEventDelegation(realEventType: string, element: HTMLElement, asCapture: boolean) {
return ( return (
!asCapture !asCapture
&& !NON_BUBBLEABLE_EVENTS.has(realEventName) && !NON_BUBBLEABLE_EVENTS.has(realEventType)
&& element.tagName !== 'VIDEO' && element.tagName !== 'VIDEO'
&& element.tagName !== 'IFRAME' && element.tagName !== 'IFRAME'
); );
} }
function addDelegatedListener(eventName: string, element: HTMLElement, handler: Handler) { function addDelegatedListener(eventType: string, element: HTMLElement, handler: Handler) {
if (!documentEventCounters[eventName]) { if (!documentEventCounters[eventType]) {
documentEventCounters[eventName] = 0; documentEventCounters[eventType] = 0;
document.addEventListener(eventName, handleEvent); document.addEventListener(eventType, handleEvent);
} }
resolveDelegationRegistryForName(eventName).set(element, handler); resolveDelegationRegistry(eventType).set(element, handler);
resolveDelegatedEventsForElement(element).add(eventName); resolveDelegatedEventTypes(element).add(eventType);
documentEventCounters[eventName]++; documentEventCounters[eventType]++;
} }
function removeDelegatedListener(eventName: string, element: HTMLElement) { function removeDelegatedListener(eventType: string, element: HTMLElement) {
documentEventCounters[eventName]--; documentEventCounters[eventType]--;
if (!documentEventCounters[eventName]) { if (!documentEventCounters[eventType]) {
// Synchronous deletion on 0 will cause perf degradation in the case of 1 element // Synchronous deletion on 0 will cause perf degradation in the case of 1 element
// which is not a real case, so it's ok to do it this way // which is not a real case, so it's ok to do it this way
document.removeEventListener(eventName, handleEvent); document.removeEventListener(eventType, handleEvent);
} }
delegationRegistry[eventName].delete(element); delegationRegistryByEventType[eventType].delete(element);
delegatedEventsByElement.get(element)!.delete(eventName); delegatedEventTypesByElement.get(element)!.delete(eventType);
} }
export function removeAllDelegatedListeners(element: HTMLElement) { export function removeAllDelegatedListeners(element: HTMLElement) {
const eventNames = delegatedEventsByElement.get(element); const eventTypes = delegatedEventTypesByElement.get(element);
if (!eventNames) { if (!eventTypes) {
return; return;
} }
eventNames.forEach((eventName) => removeDelegatedListener(eventName, element)); eventTypes.forEach((eventType) => removeDelegatedListener(eventType, element));
delegatedEventsByElement.delete(element); delegatedEventTypesByElement.delete(element);
} }
function handleEvent(realEvent: Event) { function handleEvent(realEvent: Event) {
const events = delegationRegistry[realEvent.type]; const events = delegationRegistryByEventType[realEvent.type];
if (events) { if (events) {
let furtherCallsPrevented = false; let furtherCallsPrevented = false;
@ -142,29 +143,46 @@ function handleEvent(realEvent: Event) {
} }
} }
function resolveDelegationRegistryForName(eventName: string) { function resolveDelegationRegistry(eventType: string) {
if (!delegationRegistry[eventName]) { if (!delegationRegistryByEventType[eventType]) {
delegationRegistry[eventName] = new Map(); delegationRegistryByEventType[eventType] = new Map();
} }
return delegationRegistry[eventName]; return delegationRegistryByEventType[eventType];
} }
function resolveDelegatedEventsForElement(element: HTMLElement) { function resolveDelegatedEventTypes(element: HTMLElement) {
const existing = delegatedEventsByElement.get(element); const existing = delegatedEventTypesByElement.get(element);
if (existing) { if (existing) {
return existing; return existing;
} }
const newSet = new Set<string>(); const newSet = new Set<string>();
delegatedEventsByElement.set(element, newSet); delegatedEventTypesByElement.set(element, newSet);
return newSet; return newSet;
} }
if (DEBUG) { if (DEBUG) {
document.addEventListener('dblclick', () => { document.addEventListener('dblclick', () => {
const documentListenersCount = Object.keys(documentEventCounters).length;
const delegatedHandlersCount1 = Object.values(documentEventCounters)
.reduce((acc, counter) => acc + counter, 0);
const delegationRegistriesCount = Object.keys(delegationRegistryByEventType).length;
const delegatedHandlersCount2 = Object.values(delegationRegistryByEventType)
.reduce((acc, delegationRegistry) => acc + delegationRegistry.size, 0);
const delegationElementsCount = delegatedEventTypesByElement.size;
const delegatedEventTypesCount = Array.from(delegatedEventTypesByElement.values())
.reduce((acc, eventTypes) => acc + eventTypes.size, 0);
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log('DELEGATED EVENTS', { delegationRegistry, delegatedEventsByElement, documentEventCounters }); console.warn('DELEGATED EVENTS STATS', {
delegatedHandlersCount1,
delegatedHandlersCount2,
delegatedEventTypesCount,
delegationRegistriesCount,
delegationElementsCount,
documentListenersCount,
});
}); });
} }

2
src/lib/teact/teact.ts
View File

@ -250,7 +250,7 @@ const DEBUG_components: AnyLiteral = {};
document.addEventListener('dblclick', () => { document.addEventListener('dblclick', () => {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log('COMPONENTS', orderBy(Object.values(DEBUG_components), 'renderCount', 'desc')); console.warn('COMPONENTS', orderBy(Object.values(DEBUG_components), 'renderCount', 'desc'));
}); });
export function renderComponent(componentInstance: ComponentInstance) { export function renderComponent(componentInstance: ComponentInstance) {

2
src/lib/teact/teactn.tsx
View File

@ -221,7 +221,7 @@ if (DEBUG) {
document.addEventListener('dblclick', () => { document.addEventListener('dblclick', () => {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log( console.warn(
'GLOBAL CONTAINERS', 'GLOBAL CONTAINERS',
orderBy( orderBy(
Array.from(containers.values()) Array.from(containers.values())