Repository: go-gitea/gitea
File: web_src/js/modules/observer.ts (TypeScript)

Code before:
import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';

let globalSelectorObserverInited = false;

type SelectorHandler = {selector: string, handler: (el: HTMLElement) => void};
const selectorHandlers: SelectorHandler[] = [];

type GlobalEventFunc<T extends HTMLElement, E extends Event> = (el: T, e: E) => (void | Promise<void>);
const globalEventFuncs: Record<string, GlobalEventFunc<HTMLElement, Event>> = {};

type GlobalInitFunc<T extends HTMLElement> = (el: T) => void | Promise<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 GlobalEventFunc<HTMLElement, Event>;
}

// 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});
  // 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);
  }
}

// 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>;

Review comment (suggestion):
```suggestion
type GlobalEventFunc<T extends HTMLElement, E extends Event> = (el: T, e: E) => (Promisable<void>);
```

Import `Promisable` from `type-fest`.

Ref: https://github.com/sindresorhus/type-fest/blob/main/source/promisable.d.ts

Code after:
import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';
import type {Promisable} from 'type-fest';
import type {InitPerformanceTracer} from './init.ts';

let globalSelectorObserverInited = false;

type SelectorHandler = {selector: string, handler: (el: HTMLElement) => void};
const selectorHandlers: SelectorHandler[] = [];

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 GlobalEventFunc<HTMLElement, Event>;
}

// 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});
  // 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);
  }
}

// It handles the global init functions for all `<div data-global-int="initSomeElem"></div>` elements.