1
1
mirror of https://github.com/go-gitea/gitea synced 2025-07-05 18:17:19 +00:00

Refactor global init code and add more comments (#33755)

Follow up #33748

Now there are 3 "global" functions:

* registerGlobalSelectorFunc: for all elements matching the selector, eg: `.ui.dropdown`
* registerGlobalInitFunc: for `data-global-init="initInputAutoFocusEnd"`
* registerGlobalEventFunc: for `data-global-click="onCommentReactionButtonClick"`


And introduce `initGlobalInput` to replace old `initAutoFocusEnd` and
`attachDirAuto`, use `data-global-init` to replace fragile
`.js-autofocus-end` selector.

Another benefit is that by the new approach, no matter how many times
`registerGlobalInitFunc` is called, we only need to do one
"querySelectorAll" in the last step, it could slightly improve the
performance.
This commit is contained in:
wxiaoguang
2025-03-03 10:57:28 +08:00
committed by GitHub
parent 5cbdf83f70
commit 27bf63ad20
10 changed files with 154 additions and 123 deletions

View File

@ -1,52 +1,73 @@
import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';
import type {Promisable} from 'type-fest';
import type {InitPerformanceTracer} from './init.ts';
type DirElement = HTMLInputElement | HTMLTextAreaElement;
let globalSelectorObserverInited = false;
// for performance considerations, it only uses performant syntax
function attachDirAuto(el: Partial<DirElement>) {
if (el.type !== 'hidden' &&
el.type !== 'checkbox' &&
el.type !== 'radio' &&
el.type !== 'range' &&
el.type !== 'color') {
el.dir = 'auto';
}
}
type SelectorHandler = {selector: string, handler: (el: HTMLElement) => void};
const selectorHandlers: SelectorHandler[] = [];
type GlobalInitFunc<T extends HTMLElement> = (el: T) => void | Promise<void>;
const globalInitFuncs: Record<string, GlobalInitFunc<HTMLElement>> = {};
function attachGlobalInit(el: HTMLElement) {
const initFunc = el.getAttribute('data-global-init');
const func = globalInitFuncs[initFunc];
if (!func) throw new Error(`Global init function "${initFunc}" not found`);
func(el);
}
type GlobalEventFunc<T extends HTMLElement, E extends Event> = (el: T, e: E) => (void | Promise<void>);
type GlobalEventFunc<T extends HTMLElement, E extends Event> = (el: T, e: E) => Promisable<void>;
const globalEventFuncs: Record<string, GlobalEventFunc<HTMLElement, Event>> = {};
type GlobalInitFunc<T extends HTMLElement> = (el: T) => Promisable<void>;
const globalInitFuncs: Record<string, GlobalInitFunc<HTMLElement>> = {};
// It handles the global events for all `<div data-global-click="onSomeElemClick"></div>` elements.
export function registerGlobalEventFunc<T extends HTMLElement, E extends Event>(event: string, name: string, func: GlobalEventFunc<T, E>) {
globalEventFuncs[`${event}:${name}`] = func as any;
globalEventFuncs[`${event}:${name}`] = func as GlobalEventFunc<HTMLElement, Event>;
}
type SelectorHandler = {
selector: string,
handler: (el: HTMLElement) => void,
};
const selectorHandlers: SelectorHandler[] = [
{selector: 'input, textarea', handler: attachDirAuto},
{selector: '[data-global-init]', handler: attachGlobalInit},
];
export function observeAddedElement(selector: string, handler: (el: HTMLElement) => void) {
// It handles the global init functions by a selector, for example:
// > registerGlobalSelectorObserver('.ui.dropdown:not(.custom)', (el) => { initDropdown(el, ...) });
export function registerGlobalSelectorFunc(selector: string, handler: (el: HTMLElement) => void) {
selectorHandlers.push({selector, handler});
const docNodes = document.querySelectorAll<HTMLElement>(selector);
for (const el of docNodes) {
// Then initAddedElementObserver will call this handler for all existing elements after all handlers are added.
// This approach makes the init stage only need to do one "querySelectorAll".
if (!globalSelectorObserverInited) return;
for (const el of document.querySelectorAll<HTMLElement>(selector)) {
handler(el);
}
}
export function initAddedElementObserver(): void {
// It handles the global init functions for all `<div data-global-int="initSomeElem"></div>` elements.
export function registerGlobalInitFunc<T extends HTMLElement>(name: string, handler: GlobalInitFunc<T>) {
globalInitFuncs[name] = handler as GlobalInitFunc<HTMLElement>;
// The "global init" functions are managed internally and called by callGlobalInitFunc
// They must be ready before initGlobalSelectorObserver is called.
if (globalSelectorObserverInited) throw new Error('registerGlobalInitFunc() must be called before initGlobalSelectorObserver()');
}
function callGlobalInitFunc(el: HTMLElement) {
const initFunc = el.getAttribute('data-global-init');
const func = globalInitFuncs[initFunc];
if (!func) throw new Error(`Global init function "${initFunc}" not found`);
type GiteaGlobalInitElement = Partial<HTMLElement> & {_giteaGlobalInited: boolean};
if ((el as GiteaGlobalInitElement)._giteaGlobalInited) throw new Error(`Global init function "${initFunc}" already executed`);
(el as GiteaGlobalInitElement)._giteaGlobalInited = true;
func(el);
}
function attachGlobalEvents() {
// add global "[data-global-click]" event handler
document.addEventListener('click', (e) => {
const elem = (e.target as HTMLElement).closest<HTMLElement>('[data-global-click]');
if (!elem) return;
const funcName = elem.getAttribute('data-global-click');
const func = globalEventFuncs[`click:${funcName}`];
if (!func) throw new Error(`Global event function "click:${funcName}" not found`);
func(elem, e);
});
}
export function initGlobalSelectorObserver(perfTracer?: InitPerformanceTracer): void {
if (globalSelectorObserverInited) throw new Error('initGlobalSelectorObserver() already called');
globalSelectorObserverInited = true;
attachGlobalEvents();
selectorHandlers.push({selector: '[data-global-init]', handler: callGlobalInitFunc});
const observer = new MutationObserver((mutationList) => {
const len = mutationList.length;
for (let i = 0; i < len; i++) {
@ -60,30 +81,27 @@ export function initAddedElementObserver(): void {
if (addedNode.matches(selector)) {
handler(addedNode);
}
const children = addedNode.querySelectorAll<HTMLElement>(selector);
for (const el of children) {
for (const el of addedNode.querySelectorAll<HTMLElement>(selector)) {
handler(el);
}
}
}
}
});
for (const {selector, handler} of selectorHandlers) {
const docNodes = document.querySelectorAll<HTMLElement>(selector);
for (const el of docNodes) {
handler(el);
if (perfTracer) {
for (const {selector, handler} of selectorHandlers) {
perfTracer.recordCall(`initGlobalSelectorObserver ${selector}`, () => {
for (const el of document.querySelectorAll<HTMLElement>(selector)) {
handler(el);
}
});
}
} else {
for (const {selector, handler} of selectorHandlers) {
for (const el of document.querySelectorAll<HTMLElement>(selector)) {
handler(el);
}
}
}
observer.observe(document, {subtree: true, childList: true});
document.addEventListener('click', (e) => {
const elem = (e.target as HTMLElement).closest<HTMLElement>('[data-global-click]');
if (!elem) return;
const funcName = elem.getAttribute('data-global-click');
const func = globalEventFuncs[`click:${funcName}`];
if (!func) throw new Error(`Global event function "click:${funcName}" not found`);
func(elem, e);
});
}